Coder Social home page Coder Social logo

sagaratalatti / secretmessenger Goto Github PK

View Code? Open in Web Editor NEW
2.0 3.0 0.0 35 KB

Ethereum Secret Messenger - A simple Ethereum Smart Contract

HTML 77.93% CSS 22.07%
ethereum ethereum-contract ethereum-dapp ethereumjs solidity-contracts solidity-dapps solidity ganache

secretmessenger's Introduction

Secret Messenger - Ethereum Smart Contract

Working towards setting up your blockchain to connect with a front end application. Using an HTML file, then switch to serving this live on our local host.. We will be deploying smart contract to local ethereum blockchain by Ganache

Prerequisites

  1. Install Ganache and Run the application for one click ethereum blockchain deployment on localhost.

Ganache Application

You will find the blockchain has been deployed to http://127.0.0.1:7545. The ganache will also create Ethereum wallet addresses for you, all addresses are loaded with 100.00 Ethers and Mnemonic passphrase.

Project Setup

Dependencies Used

  1. Web3 - Ethereum API

Dependencies Installation

  1. Download and open project in Visual Studio Code or any other code editors.
  2. Open terminal and install all dependencies by running command npm install

Working with Project

  1. Open index.html file in your Chrome browser.
  2. Any changes made to code you will need to refresh the page on browser to update changes.
  3. Copy code from messenger.sol and paste the code to Remix solidity EVM. Remix will help you interact with your Ganache Local Blockchain and Metamask wallet.

Using Ganache - Local Ethereum Blockchain

Once you have deployed the Ganache Local Ethereum Blockchain on localhost you need to make the following steps to this project.

  1. Go to Remix EVM and click start to compile.
  2. In Remix go to Run tab and select Web3 Provider to connect to Ganache. After selecting web3 provider you need to enter the RPC address where the Ganache blockchain has been deployed. You will find the RPC address in your Ganache Application.

RPC Server Address

  1. Once you have successfully connected to Ganache blockchain you should see your Ganache Ethereum addresses with 100 Ethers in Remix.

Remix connected with Ganache

  1. Deploy the message contract by clicking Deploy button in Remix.
  2. In Remix console you will find the new section below as Deployed Contracts will show your contract there. Click on the message contract and copy the deployed contract address.

Copy deployed contract address

  1. Open index.html in Visual Studio Code editor and find this code: var myMessage = RemixContract.at('Enter Your Contract Address'); paste your contract address there.
  2. We also need to copy + paste the ABI code for our contract from Remix. You will find the ABI code to copy in compile section from remix console.

Copy ABI code

  1. Paste ABI code in your index.html within this code: var RemixContract = web3.eth.contract('Enter your ABI code here');
  2. Now we need to connect Ganache with your index.html copy the RPC Server address from Ganache Application within this code: web3 = new Web3(new Web3.providers.HttpProvider("Enter RPC Server"));
  3. Refresh your index.html in chrome browser to updated all the changes we have made so far.

Testing the Project

  1. Open console in Google Chrome to see logs from the project. Options>More Tools>Developer Tools> Console.
  2. Type any secret message you want and click Set Secret Message.
  3. You should see the output in console log.

Chrome console log and you will also find the transaction in your Ganache application in the Transaction section.

Ganache Transaction

secretmessenger's People

Contributors

sagaratalatti avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.