A Non-Fancy Interface to Broadcast Custom-Json Operations Built in 1 Night

in Programming/Devlast month

Hello everyone.

I was bored one night, my 3-month long internship had just ended and I had nothing better to do. So, I just decided to nerd it out and learn about Github actions.

For the uninitiated, Github actions is a CI-CD(stands for Continuous Integration - Continuous Deployment) feature that can build and test your scripts right when you push a new commit.

While I was interested in learning about Github actions, I had also been thinking about building an NFT market but then decided it wasn't worth the effort since there are already quite a few good ones out there.

At the same time, I have been playing with Hive-Engine stuff for a while now and I wanted an interface to broadcast custom-json operations. This was before I knew about JsonDoctor.

Thus, my average looking but fully functioning interface to broadcast custom-jsons was born.

screencapture-rahul-thapa-github-io-hive-custom-json-2021-03-26-01_32_29.png

https://rahul-thapa.github.io/hive-custom-json/

This was built using React and hive_keychain.js. I built this in one night and if you look at the commits, it took me a while before the CI-CD was set up properly.(Read edit at the end)

onChangeHandler = (e) => {
    const key = e.target.name;
    const obj = {};
    obj[key] = e.target.value;
    this.setState({ ...obj });
  };

The function above listens for change events on the input fields and puts them in their state for the below function.

onSubmitHandler = (e) => {
    e.preventDefault();
    hive_keychain.requestCustomJson(
      this.state.username,
      this.state.id,
      this.state.key,
      this.state.json,
      "Doing stuff"
    );
  };

And this function gets called when the submit button is clicked which then invokes keychain to broadcast the transaction.

The YAML script below does the heavy lifting of installing the dependencies and does the CI-CD stuff.

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Auto Serve for react

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci
      - run: npm run build --if-present

      - name: Deploy
        run: |
          git config --global user.name $user_name
          git config --global user.email $user_email
          git remote set-url origin https://${github_token}@github.com/${repository}
          npm run deploy
        env:
          user_name: "github-actions[bot]"
          user_email: "github-actions[bot]@users.noreply.github.com"
          github_token: ${{ secrets.HIVECJ_DEPLOY_ACCESS_TOKEN }}
          repository: ${{ github.repository }}


And there you have it. Feel free to use it however you wish to. The code is open-source. If this was at all helpful to you, please let me know.

Link to github repo

Edit due to my stupidity:

While I was reviewing my code, I found I had leaked some information that I should not have. Hence I had to remove all the commit history. It was originally pushed on November 26 even if GitHub says it was today.

Sort:  

impressive mate :) A good night's work

Higher being, these words are for you alone:

Thank you. JsonDoc is lot for fancy tho. Mine just gets the job done lol.

Hahahaha thanks! Getting the job done is the main goal and it checks alright ✔️

Why just get the job done when you can pull off something like JSONDoctor(which is amazing by the way, thank you for that)?

Thanks lol guess you're right!

Your post is reblogged and upvoted by me. It is a good post. Thank you @rahul.stan

While I was interested in learning about Github actions, I had also been thinking about building an NFT market but then decided it wasn't worth the effort since there are already quite a few good ones out there.

NFTMart best mart :) I always think its worth some effort to put into projects like that, trying out something new in order to get better at it, like you did here with CI/CD. I've used Travis CI for some automated testing but I wasn't able to figure out the CD part of it(@deathwing can confirm).

Yes yes, NFTmart is the martiest mart.

I wasn't able to figure out the CD part of it(@deathwing can confirm).

Well obviously. In some circles CD is also known as continuous deathwing. :V

Next on my list is to learn how to set up jenkins and nginx.