Project title: Vehicle History and Service Tracker
One-liner: Development of app that allows a user to add vehicles and vehicle services to the blockChain
Project Summary: Project consists of two repos, a smart contract that uses near-sdk-core
, where a user can add vehicles and vehicles services to the blockchain. The second repo is a front-end repo the uses Vue.js and near-api-js
to render the state of the contract on a browser.
Developer in Residence:
discord: phoenixpulsar | A Macedo#8225
Period:
Jan 6→ 31, 2022
Summary of work done (40hrs)
- Created two new repos on a new Github account
- Smart Contract
- GitHub - phoenixpulsar/vehicle-history-smart-contract: Smart Contract uses near-sdk-core to create a WASM file that deploys to Testnet
- As a user I should be able to add a new vehicle and store it in the blockchain
- As a user I should be able to add a vehicle service and store it in the blockchain
- Front End
- GitHub - phoenixpulsar/vehicle-history-front-end: VUE front-end that uses near-api-js to displays the state of an account deployed in Testnet
- url:
https://festive-kalam-8a63cd.netlify.app/#/
- As a user I should be able to see though a web app the state of my contract
- Deployed a Vue front-end that uses
near-api-js
to read state of contract to Netlify - Use Vuex to store and fetch data of a specific contract
- Smart Contract
Next Steps (from proposal)
- Allow a user to log-in in the FE (nearWallet)
- Allow a logged in user to create a contract to hold his/hers Vehicles and Vehicles Services
- Allow a user to sell a vehicle to another user using NEAR coin
- Add more css/style/flare
- Investigate limits of
RPC
how to index or store if state grows above 50kb of state size - Document steps & create blog post english/spanish
- Start next project smart forms
Detailed outline of main achievements/‘aha’ moments/ divided in 10hr blocks
Block 1 (10hrs)
- Updated reviewed and created a new repo from
NCD1
for smart contract - Use near-account utils to verify methods of smart contract
- Debug error: Can not sign transactions for account dev-XXXX on network
- Error caused by not having env variable OWNER to sign transaction
- Created a couple a Vue apps to explore
near-api-js
- Debug developer tools for Vue
- Vue developer tools need Beta for Vue 3 to work (different tools than Vue 2)
- Spike: Very informative video on RPC endpoints
https://www.youtube.com/watch?v=T8rH8dxGRKg
Block 2 (10hrs)
- Debug how to decode values from state near-api-js
- To decoded it in Vue/JS I am using:
atob(val)
- Tools/linting warn this is deprecated, tried alternative suggested in error
Buffer.from(val, "base64");
but did not work asatob()
returned arrayUint8Array
instead of the value
- To decoded it in Vue/JS I am using:
- Minor debugging using SCSS with Vue CLI 4
https://cli.vuejs.org/guide/css.html#pre-processors
- Created a new Vue repo but picked
dart-sass
which did not seem to require loader from above
Block 3 (10hrs)
- Added CSS to create UI, added double scroll(scroll through vehicles, flip card and scroll through services)
- Wrangle data from RPC APIs, separated into data structures needed for UI to consume
- Added code to use Vuex as state management to share state data across whole app
Block 4 (10hrs)
- Created new clean repo for Front-End with clean git history
- Created a new clean repo for Smart-Contract
- Debug error: Server error: account dev-xxxxx does not exist while viewing
- Deploying the front-end was creating a production build that was calling a contract on mainnet instead of testnet
- Created a Netlily account to deploy FE
- Hooked Netlify account with Github