Where It All Started.

Where It All Started.

Life, Stock Trading, Investments, Business and Startup. Most are programming stuff.

Tag: documentation

Solidity Series – Building Your First Hello World

Knowing others is wisdom, knowing yourself is enlightenment.

— Lao Tzu.

It’s the start of decentralization age but how to start programming on decentralize environment?

Ethereum1, considered as second wave of blockchain innovation. The pioneer and first blockchain ecosystem to implement and handle smart contracts. So how do you start developing system and application DApps (Decentralize Apps) in it?

The answer is “Solidity” — a programming language that interface EVM (Ethereum Virtual Machine) and your app.

Prerequisites

In this tutorial we assume you have some basic knowledge in programming.

The main requirements in developing a blockchain app is first its compiler then the secondary requirements but optional are the bootstrap framework like truffle.

  • Node 10 and above

Building Hello World

To start the development, we must get the required dependency in developing a structured smart contract project. The tool and framework that we will be using is truffle, which handles all the bootstrapping procedure and creates the base of your project. Installing it is just breeze, all you have to do is type npm install -g truffle.

Also install ganache which is the old ethereum-test-rpc project. To install ganache you have an option whether to install it on a desktop or a CLI (Command Line Interface) build. For this project I’ll be using the CLI build, so to start we install ganache using the command npm install -g ganache-cli. Both truffle and ganache is under the truffle software development platform.

And now we start building the project, after all dependencies installed we need to create an empty project directory with the command truffle init. As a note, the init sub-command only works on an empty directory. This sub-command will create a base structure for our project.

Project Structure

Below is a structure that I recommend to bootstrap your project.

  • contracts: Storage of smart contracts source.
  • migrations: Migration script to deploy smart contract.
  • test: Test directory for smart contract.
  • truffle-config.js: Truffle configuration for Windows users (for backward compatibility).
  • truffle.js: Truffle configuration for *nix system.

To test if everything’s okay we must run truffle compile.

Running a test RPC for Ethereum

So in order to start, we first need to generate test accounts and run a test environment. Start by typing ganache-cli in a separate non-occupied terminal window. The tool ganache will generates 10 ETH addresses with an initial balance of 100 ether.

Coding your first hello

With ganache-cli running at background, we continue building our hello world project. To start, we must create a new contract using truffle create contract Hello on which this command will create a new file under contracts ⇒ Hello.sol. Edit the newly created file and add a new function that will return the string Hello in EVM.

pragma solidity ^0.4.24;

contract Hello {
	function greeter() public pure returns (string) {
		return "Hello World";
	}
}

In the next step, will be creating and editing the migration file. To create the file execute touch migrations/2_deploy_contracts.js, then edit the new file and link that to the file we created earlier Hello.sol. This is a very crucial step in order to deploy our Hello solidity file on test blockchain environment.

Here are the changes we need in migrations/2_deploy_contracts.js.

var hello = artifacts.require("./Hello.sol");
module.exports = function(deployer) {
	deployer.deploy(hello);
}

After we edit the migration file, we can now connect the truffle project to ganache test blockchain RPC environment. To do that we’ll be editing truffle.js and point it to ganache host and port which is localhost:8545.

module.exports = {
	networks: {
		development: {
			host: "localhost",
			port: 8545,
		},
	},
};

When everything’s done, execute truffle migrate. This command will automatically compile and deploy the smart contract into ganache test blockchain RPC environment. Remember and copy the Hello function address in the output console, we will be using this later.

To test the function if its already deployed in the test environment, we will execute a REPL console using truffle console. Then inside the console, we type Hello.at(address).greeter() (note the address here is the one we copy earlier).

If everything is correct it should output Hello World. That’s it, now you’re on your way to become a blockchain developer.This is the link to the whole source code.

Conclusion

Hey guys, now that you’ve finish the setup you are now on the path of becoming a blockchain software developer. Follow us on our next adventure developing deep into the blockchain ecosystem. Stay tuned for the next follow up series for solidity.


  1. Ethereum is an open source, public, blockchain-based distributed computing platform and operating system featuring smart contract functionality. It supports a modified version of Nakamoto consensus via transaction-based state transitions. ↩︎

Flutter Series – Custom Icons

Everyone thinks of changing the world, but no one thinks of changing himself.

— Leo Tolstoy.

Custom free icons for everyone! Just joking I’m not the one giving.

Joking aside, as I began learning Flutter to develop new apps. I began to wonder, how can I beautify it to almost match the wire frame I’m copying.

There are several things to consider, getting exact dimensions and well crafted image and icons. For today’s TIL (Today I Learned), we will get deeper on how to add custom icons to flutter development environment as well use it in app.

To icon or not to icon?

Manually creating icons from scratch, seems to be a bit daunting. But do not worry as there are tools to create this automatically already.

Meet fluttericon! Just like a father introducing his son to everyone.

Anyways, to create your first set of icons follow the steps below.

  1. First is go to FlutterIcon site.
  2. Create your own set of icons from the different sources or upload a custom one.
  3. You make a suitable name like (e.g. SuperSimpleLineIcons) then download your own custom font.
  4. Extract the downloaded files.
  5. Move the font folder in your flutter project, better if you create an assets folder.
  6. Copy the generated dart file to your flutter lib directory.
  7. View the contents of the generated dart file. You’ll see the header part’s instruction and apply it to your pubspec.yaml file.
  8. Import the generated dart to your flutter source on where you want to include the custom icons.
  9. To use the icons inside your flutter project, call it like this Icon(CustomIcons.copyright).

Also check this GitHub repository to know more info and get help PolyIcon.

Conclusion

As for developers tooling, one of the several factors a developer may consider before diving in to a new language. And flutter, has many of those tooling compared to react native. Currently, dart has native first class auto completion and analyzer integrated to VS tools and several other editors.

Its up to you now to decide which programming language you would choose. Be it react native or flutter in developing modern production grade app. See you on the next flutter series.

Hope you guys, enjoyed this article! 🧡❤

Automating HTML5 Generation With AsciiDoctor

If you’re a documentation nerd or somewhat planning to create content for publishing, surely you will encounter ASCII Doc. ASCII Doc is being use by different publishing giants like O’Reilly to create books and content.

One problem I encountered is generating HTML documents from asciidoc format. So how do I automate it?

Better to die fighting for freedom then be a prisoner all the days of your life.

— Bob Marley.

Prerequisites

  • Ruby 2.5 and above

So how do we render HTML5 from ASCII Doc?

We proceed by getting all the required gems. The first step is get the file watcher to watch for changes.

gem install asciidoctor guard guard-shell guard-livereload yajl-ruby

The livereload gem watch changes in the file system. Also, you may need to install companion browser extension.

After the installation of Chrome Extension, you need to check “Allow access to file URLs” checkbox in More Tools > Extensions > Live Reload Details in order for it to work with local file URLs.

Then we create a Guardfile with the contents below.

require "asciidoctor"
guard "shell" do
	watch(/^solidity\.adoc$/) {|m|
		Asciidoctor.convert_file m[0]
	}
end
guard "livereload" do
	watch(%r{^.+\.(css|js|html)$})
end

The first guard block converts file to HTML5. Then after that the second guard block watches for file changes and reloads browser.

When all is done start the guard process to monitor and serve files.

guard start

That’s it guys we created our workflow for generating HTML5 using the asciidoctor format. Hit like if you like, subs if you love and as always live life. Hope you guys, enjoyed this article!