↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

eCommerce-hello-world

eCommerce JavaScript

eCommerce-hello-world

Part I

Pre-requisites:

  • Make sure you have Google Chrome Installed. If it is not installed, you can install it form here: install Chrome.
  • Some familiarity with programming, using GitHub, text-editor/IDE and terminal.

Overview

  • In the 1st part of this tutorial we will get an introduction to the dApp we will build along with some tools and the TRON test network: Shasta.
  • We will set up TronWeb, similar to Web3.js, which will be injected through TronLink and will allow us to interact with the protocol.
  • We will create a TronLink account, access some test TRX, and interact with TronLink and the Shasta network via our dApp.

TronLink

  • If you do not have TronLink already installed, you will need to install it from the Chrome Web Store: install TronLink.
  • Once you have installed the TronLink extension, you should see it in the top right of your Chrome browser along with any other extensions you may have
  • Click on the extension to set up your account:

    1. The TronLink popup will require you to create a password. Be sure to store this password as this is the easiest way to access TronLink. Follow the instructions provided and click on “Continue”.
    2. You should see two options here: first to create an account and second to restore an account. Once you have created your wallet, you will be able to restore it in the future by using your unique generated mnemonic or you private key. Both of these should be stored securely and privately as these can grant access to you account to anyone who knows them.
    3. Click on “Create account” to create a new account.
    4. TronLink will prompt you to create an account name. This is an easy way for you to distinguish accounts in your wallet instead of relying on the public key. Click on “Continue” after you have chosen an account name.
    5. You will be presented with a 12 word mnemonic. This is unique to your account and must be stored securely. Continue after you have stored this mnemonic.
    6. TronLink will now require you to select the words in your mnemonic in the order they were shown (left to right and top to bottom, the same order it was displayed to you. As a word of caution, if there are repeated words, start over as it may cause some issues).
    7. And that’s it! You have created your TronLink wallet!
  • Though you wallet exists in your browser, it is not yet on the blockchain network.

    1. In order to do so we need to do execute at least one transaction.
    2. Let us get your wallet on the Shastsa test network by obtaining some test TRX coins from Shasta faucet.
    3. Navigate to Shasta Test Network to learn more about it and get the test TRX.
    4. Scroll to the bottom of the page and you should see the prompt to enter you Test wallet address.
    5. Click on the TronLink extension to view your accounts.
    6. Click on the settings gear icon at the top right of TronLink. The first options shold say “Switch node”. Mainnet is the default selection. This is the main TRON network where you can explore and execute real, financially significant transactions after this tutorial!
    7. If you click on it, you will be able to select Shasta Testnet located right below the Mainnet selection. This is the test network provided by TRON for us to become familiar with the blockchain infrastructure and test ideas without any financial risk. After selecting Shasta, exit back to the main screen of TronLink.
    8. You should also see your account, by name, in TronLink. Clicking here will open a tab that will allow you to switch between accounts, create new accuonts or restore accounts.
    9. Select and copy the account address below the account name. It will look something like this TYLDyP6wJUTZ7tzKEDa3Ricicz2kAVtMEc.
    10. This public address allows your account to interact with the blockchain. This is how users can send TRX to your account.
    11. Back on the Shasta Test Network page, paste your account address in the Test wallet address and click “Submit”.
    12. you should see “Your request was successfully submitted, please check your wallet.” right below the area you posted your account address.
    13. If you check your account in TronLink, you will see that your account has been sent 10,000 TRX! and you have 5,000 daily bandwidth points (more on this later).
    14. That’s it, you are now ready to start interacting with and testing on the Shasta Test Network.
  • You can view the TronLink code on GitHub if you would like to learn more about how it works.

NPM

  • Make sure you have NPM installed. You can install it by following instructions here: install NPM. using NVM (Node Version Manager) is recommended, and directions can be found here.

TronBox

  • TronBox is a tool developed by the TRON team to help you compile and deploy your contracts quickly.
  • Now that you have NPM installed, you can install TronBox globally on your machine by opening up your terminal and entering npm install -g tronbox.
  • TronBox GitHub.
  • TronBox Documentation.

Let’s begin coding your first dApp on Tron!

Set up the Project

  1. Download or Clone the skeleton for this guide from here.
  2. From your terminal, cd into this newly created directory.
  3. In terminal, run npm install.
  4. Open up this project in your favorite IDE/text-editor.

Get Familiar with Application

  1. Tour
  2. Something

Set up dotenv file IMPORTANT

  1. In the root directory of your project, create a file called .env
  2. This file is used to store information you so not want to expose to the world
  3. Open up this file and paste these lines 
PK = "enter or paste your private key here";
  1. paste your private key in the .env file.
    1. To get your private key, click on the TronLink extension in Chrome.
    2. Make sure you are on the “Accounts” tab.
    3. Click on Export and you should see a pop-up display with your Private Key.
    4. copy and paste this key in your .env file.
  2. Lastly, add .env in your .gitignore file if you plan on publishing this project on GitHub.

Let us see TronLink and TronWeb in action

  1. Launch the application by running npm run start in the terminal.
  2. Your application should now be running in the browser window and look something like this:
  3. In the browser, on the top right, you should see the “Account Information” section. This is the first part we will set up.
  4. In your text-editor, navigate to the ./src/components/TronLinkInfo/index.js file.
  5. Fetch Account Address:

    • Begin by uncommenting the function call on line 19 in the componentDidMount function.
    • If you go back to the browser, you should now see your account address displaying in Hex format.
    • If you would like to see this displayed in Base58 format, uncomment lines 29 to 32 and change the setState function on line 33 to look like: 
this.setState({
  accountAddress: accountAddressInBase58
});
  • You should now be able to go to the browser and see your address displayed in ASCii format.
  • You can click on the TronLink extension and verify that the address being displayed in ASCii format is indeed your account address.
  1. Fetch Account Balance:
    • Uncomment the function call on line 20 in the componentDidMount function.
    • In the browser you should now see the balance of your account in SUN.
    • To view your account balance in TRX, uncomment line 41 and change the setState function on line 44 to look like: 
this.setState({
  accountBalance: balanceInTRX
});
  1. Fetch Account Bandwidth:
    • Uncomment the function call on line 21 in the componentDidMount function.
    • In the browser, you should now see the bandwidth balance of your account.
  2. Your app should now look something like this:

Congratulations! You have completed the first part of this guide! In the next part, we will write out smart contract before moving on to connecting our front-end to our smart-contract on the blockchain!

Part II

Overview

  • In this part, we will explore the tools we use to build a smart contract.
  • Smart contracts are essentially an efficient way to execute transparent and conflict-free transactions online without requiring services of third parties and middlemen.
  • We will use a contract-oriented, high-level language for implementing smart contracts called Solidity. You can check out more in-depth information about Solidity in their documentation here.
  • We will also use Remix, a powerful, open source tool that helps you write Solidity contracts straight from the browser. built for Ethereum and written in JavaScript, Remix supports both usage in the browser and locally. Check out the documentation here.

Resources:

Now that you have acquainted yourself with the tools, let us get started writing our first Smart Contract!

Remix

Introduction

  • First, navigate to Remix.
  • The landing page for Remix will look like this:

  • It comes pre-loaded with an example Ballot Contract. Feel free to look around and try to understand what is going on. Walkthrough: Solidity by Example.
  • We will briefly go through some major parts of Remix complete tour can be found here.

    • The file explorer section on the left will display all the files you have created in Remix. In the “browser” directory is where you will find the contracts you have created.
    • The section in the middle is the Editor or RemixIDE where your contract files are compiled. This will also show open files and syntax highlighting mapped to Solidity keywords.
    • Below the editor is the Terminal which is helpful to view logs of transactions, interact with the RemixIDE and begin debugging.
    • To the right, we will be focusing on 3 tabs – Compile, Run, and Testing but I urge you to learn more about all of them.
      • The Compile tab is where we will select the compiler version we want Remix to use and also enable some settings to make the process easier on ourselves.
      • the Run tab is where we will deploy and interact with our contract. We can also configure which environment we want Remix to connect to. We will stick with JavaScript VM for now as the other two environments will require external tools. Web3 provider requires an Ethereum Node and Injected provider requires MetaMask or Mint. MetaMask is similar to our TronLink and injects TronWeb which is comparable to Web3.
      • The Debugger tab is were we can walkthrough and debug our smart contract if we face some issues. (More on this later)

Setup

  1. Let us begin by creating a new contract file. (N.B. All Solidity files have a .sol extension)
    • In the top right, near the file explorer section, click on the circle with a plus to create a new file.
    • You should see a pop up to alter the name of the default “Untitled.sol”. You may call your file anything but note that it is a general rule of thumb to name it after the contract defined in it. Let us call this file “ECommerce.sol” as our contract will be called “ECommerce”.
    • On successfully submitting the name, you should see your new, blank file (browser/ECommerce.sol) displayed in the Editor.
  2. Compile tab:
    • In the dropdown that should currently be displaying Select new compiler version, scroll down the long list and select “0.4.24+commit.e67f0147”. Currently, the max compiler version compatible with TRON is 0.4.24.
    • Above the dropdown, it should display “Current version:0.4.24+commit.e67f0147.Emscripten.clang”
    • Below the dropdown, we will also check the “Auto compile” box. This will recompile our Smart Contract on changes.
  3. Run tab:
    • The Environment should be JavaScript VM
    • Account will have 5 test accounts with 100 Ether for testing within Remix. Note that the hash next to the “(100 Ether)” is the public address of that account, similar to your public address from TronLink. Right next to it is an option to copy the address of the currently selected account (for future reference).
    • The Gas limit will be defaulted to 3000000. We will leave this as is for now but you can learn more here. This is similar to Energy and Bandwidth on TRON.
    • Value should be 0 and the denomination set to “Wei”. you can learn more about Ethereum denominations here. The denominations used on TRON are TRX or SUN.
    • After we get our contract working in Remix, we will make the necessary…


↑