build contract need to install ink: https://paritytech.github.io/ink/
cd diwl-contract/
cargo contract build
The contract generated by the compilation is in the following location：
diwl-contract/target/ink/diwl_contract.contract
前端同样使用Rust编写
cd diwl-front-end
trunk build
编译前端代码 运行 node read_wasm.js 将前端代码打包到js文件中.
trunk.js in the diwl-front-end directory is copied from the dist directory by Yew compiled to initialize wasm. Some changes need to be made, and they need to be copied and modified again after each compilation. Modify as follows: Delete the last two lines
export { initSync }
export default init;
init function is modified to:
async function init(input) {
const imports = getImports();
initMemory(imports);
const { instance, module } = await load(await input, imports);
return finalizeInit(instance, module);
}
前端代码采用Rust编写，但并没有使用Rust版的substrate客户端，而是使用polkadot.js,由js提供函数和Wasm进行交互，因此需要编译一个js文件放到diwl-front-end目录中。
cd polkadot_api
npm run build
./cp.sh
如果重新编译合约合约需要更新，需要更新该目录中data.js中的元数据. 如果重新部署合约，同样需要修改data.js中定义的合约地址。
test目录中不需要更新，重新编译后会自动更新。
I'm use AstarNetwork's swanky-node for test,download a binary release from: https://github.com/AstarNetwork/swanky-node/releases
Start local node:
./swanky_node
I use a old version macos(<12), Swanky Node binary release don't work, so I build from the source, there were some problems compiling rockdb during the compilation process.
If you have the same problem please refer to the link below: rust-rocksdb/rust-rocksdb#528 https://substrate.stackexchange.com/questions/4620/build-rocksdb-failed-at-snappy-snappy-cc103336-error-invalid-output-constrai
在项目根目录下运行 node test/deploy.js，会部署diwl-contract目录下的合约，并打印合约的地址。 地址同时也会被写入到test/address_contract.txt文件中
word_list.txt是一个简单的中文到英语的字典，在项目根目录下运行 node test/initWlist.js，字典数据将被添加到智能合约中。
cd test
npm install
node call.js
[
{ word: 'hello', level: '1', mean: '你好' },
{ word: 'hello', level: '1', mean: '你好' },
{ word: 'hello', level: '1', mean: '你好' }
]
在diwl-front-end目录运行： python3 -m http.server 启动本地服务器。 tampermonkey中的用户自定义脚本会通过http://localhost:8000/获取该目录下的js文件。
diwl-front-end/tampermonkey_load.js 用于加载编译好的代码到浏览器中，成功加载后控制台回打印，获取字典的数目，用户自定义单词的数目。 打开YouTube观看视频时，并打开字幕会，会对相应的单词进行标注，点击字幕后会弹出对话框，用户可以忽略或者标记某个单词。
console log
hello tampermonkey 1676608477724
bundle.js?v=1676608477724:2 hello lib.js
bundle.js?v=1676608477724:2 ws://localhost:9944
Hello Yew 2
trunk.js?v=1676608477724:457 <div>Hello, World!</div>
trunk.js?v=1676608477724:457 common word list loaded size: 3605
bundle.js?v=1676608477724:2 getw_user
user_info.c_count,45
count,0,45
bundle.js?v=1676608477724:2 getw_user
user_info.c_count,45
start_count >= user_info.c_count
trunk.js?v=1676608477724:457 word list loaded size: 45
本次黑客松期间由于时间关系只实现了基本的功能(Rust上花了很多时间)， 后续将增加NFT功能，用户在查看单词时，显示一张图片(NFT)，用于帮助理解和记忆单词。
NFT的销售会鼓励创造者，创造出优质的图片，帮助用户理解和记忆单词，并丰富软件的内容，计划集成现有的NFT市场，或者自己实现一个NFT市场。
如果使用浏览插件钱包登录到网站中 数据写入到合约时，钱包每次都会弹出对话框进行签名 用户标记单词时，需要频繁的写入，每次都要签名是不合理的
直接将密钥导入到前端可以避免这个问题，但这样需要创建新的账户，会增加操作的步骤。
需要找到一种办法，进行自动签名，提前支付gas费 需要调查是否有现成的解决方案，实现原理是怎样的
如果可以用自己的方式实现自动签名，在比赛中会是获得加分选项
如果我们找不到有效的方法，将会使用在前端存储密钥对的方式
初始化一个前端项目，引入test目录中实现的读取单词列表的功能。 编译生成js文件，可以通过Tampermonkey进行加载。
2.16 点击按钮后修改数据并重新刷新数据
点击整个字幕弹出操作对话框 ok 完成单词的标记和修改界面 ok 修改合约导入单词标记函数 ok 处理个人数据 ok 本地缓存的更新 重新获取个人数据 点击整个字幕和点击单词之间可能会存在冲突 需要判读是否已经弹出
2.15
增加弹出框 ok 点击字幕时弹出对话框 可以选中某个单词进行标记 ok
2.14 点击后回调到rust中 ok 让引入的css局部生效 ok 实现单词查询功能 ok
实现单词标记 ok 处理个人单词 优化样式
2.13 处理数据 ok 监听字幕的变化 ok 将公共函数放到另一个文件中 ok
2023.2.12
全局变量 ok
导入js函数到rust中 ok 从rust中获取数据 ok
2023.2.11 集成twcss ok
释放磁盘空间 ok 生成读取数据的js文件 ok 拷贝合约信息到js文件中 ok
2023.2.10 处理wasm和js进行交互 ok
1.确认是否有跨域请求问题 ok 2.将加载数据的js导入yew项目中 ok 3.在yew中访问从合约中获取的数据 ok
2023.2.8 完成查询方法 编写测试代码
查询方法中通过分级进行查询 增加用户个人单词列表 ok
——————————————————————————————————————
解决工作目录的问题 整理代码结构 使用model导出 上传代码 导入单词表