Beyond Solidity, The Language

I think I was familiar enough with the syntax of the Solidity language to write any logic of smart contracts running on the Ethereum platform, what's next?

I would like to persuade a career in the DApps Development, I think one need to posses the following skills in order to play the role as professional Blockchain Application Developer:

Unit Testing

Regardless of whether we are practicing Test-Driven Development (TDD), we should write tests for the smart contracts to ensure correctness. Writing Tests in JavaScript from Truffle documentation is a good reference for that matter. The @openzeppelin/test-helpers is a great library to simplify your testing code and you can refer to Testing Time Dependent Solidity Smart Contract Functions using OpenZeppelin Test Helpers for sample code. The solidity-coverage is a good tool on test coverage report.

Security

As smart contracts running on public networks,involved monetary transactions and the source code is most likely open source, it is prone to security attacks. Hence, security aspect is the most important aspect of smart contracts after correctness. I think the best source on learn to write secured codes is start from security section of the Ethereum documentation. Learn by playing the Ethernaut game and reuse well-tested @openzeppelin/contracts library and learn from well-documented million dollar mistakes. Lastly, I think it is best to incorporate code analysis tool such as SmartBugs into automated build pipeline. Thanks to Ender Phan, a security engineer published an article regarding automated pentest. 

Gas (Performance) Optimization

As execution of smart contracts in Ethereum Virtual Machine (EVM) causing money (known as gas), it is best to write optimize code for the core features or commonly use functionalities of the DApps. I just find out that we can optimize the codes beyond Solidity by using Inline Assembly. Also, I heard of eWASM, the Ethereum client with Web Assembly runtime, which ultimately will replace EVM. After some research, I think it is still in infancy stage and currently not much progress. But that doesn't stop us from getting ready and trying it out with Compile Solidity to Web Assembly with SoLang or Deploying a WebAssembly smart contract on Oasis Ethereum.

Updated on Sep 16: The Unit Testing, Security and Gas Optimization brought together with a build automation pipeline, please see the Solidity and Truffle Continuous Integration Setup with GitHub Actions to find out more.

Integration

No application is an island including DApps, it need to integrate with external entities to function well, for example:

• Scheduler: Ethereum Alarm Clock
• Interplanetary File System (IPFS)
• The Graph API
• Chainlink

Thanks for reading. Do you have anything to add?

Kickstart Your dApps Development with the Ethereum dApps Next.js Boiletplate

Follow up the previous blog post, I plan to build Fluwix as DApps using Flutter. After search through the Internet, the harsh reality kick in: Most DApps in the market, sample codes and DApps-related libraries and frameworks written in JavaScript and as ReactJS components. 

It is not impossible to port those libraries, frameworks and components to Dart and Flutter, but it is really a big undertaking. So, I picked up ReactJS and found NextJS, the React Framework for Production. I also realized that the codes in the Learn Ethereum book is outdated, hence I took the Udemy's  Master Ethereum & Solidity Programming From Scratch to have better understanding of the latest version of Solidity.

To keep the long story short, the outcome is the Ethereum dApps Next.js Boiletplate.

The creation of the Ethereum dApps Next.js Boiletplate is inspired by a truffle box known as truffle-next with the following improvements:

• TypeScript support
• WalletConnect integration
• Better UI with Chakra UI
• JQuery HTML example (without React)
• Github workflow to run truffle test on every git push

It is tested with MetaMask Chrome extension and Android. I think it is good idea to test out the dApps yourself before you continue reading further.

The dApps is interacting with a Greeter smart contract that running on Rinkeby testnet, hence you need some ETH in your wallet. If you don't have any, you can request some ETH from Rinkeby Faucet.

You might wonder why I still go ahead to build this boiletplate as there's great abstractions such as useDApp, web3-react, web3modal, etc. These libraries are great, but they are fall short on the following aspects:

• Customization. To fully customize a functionality, we need to stick to low enough abstractions such as @metamask/detect-provider, web3 and @walletconnect/web3-provider.
• To avoid abstraction over abstraction. For example, it would be hard to fix a bug on useDApp and web3 which has inter-dependency. I think it is far better to build the abstraction specific to DApps ourself from the base libraries.
• To upgrade the base libraries to the latest version without depends on the abstraction. For example, web3modal still using @walletconnect/web3-provider 1.3.x when the latest version is 1.6.x.

If you are interested to look into the code and run it in your local machine, please check out the git repository hosted at https://github.com/limcheekin/eth-dapps-nextjs-boiletplate. Feel free to fork the repository and send me pull request.

I hope to hear from you soon! :)

Closing The Gap

This is my personal story in the journey from Java back-end development to Flutter and Ethereum Decentralized Applications (DApps) development. I wrote this post to capture my thoughts and experiences so far for ease of reference in the future. 

If you come across my previous blog post of titled "The end is just a new beginning", you will notice that in 2013 to 2014, I am on full-stack development, and start from 2015 I am solely focus on back-end development. I intend to closing the knowledge gap of front-end development since last year and I chose Flutter. 

Before I start my journey for Flutter development, I would like to sum up my experiences in back-end APIs development besides the common Restful APIs, hence I published a blog post titled "Standard query language for your Web API, why GraphQL and OData?". The blog post described the reasoning of using GraphQL API and OData API with code examples.

Flutter

In the early 2021, I created a Flutter App known as Flutter Widgets Explorer to learn about Flutter widgets, so that I don't need to create a new Flutter project each time I want to learn about an interesting Flutter package I come across in pub.dev such as the Flutter Charting library. 

As per any software project, the project is growing. It first being published to Google Play Store as mobile apps. then running as web apps in Fluwix.com and lastly Flutter Widgets Explorer mobile apps re-branded as Fluwix. Now the Fluwix is a Flutter showcases platform on the mobile apps and web. I also promote Fluwix via social media channels, so far the traffic is low. 

I published the following prominent blog posts relevant to Flutter besides those showcases related:

• Flutter Multi-modules Support
• Flutter Navigation: flutter_modular or stacked?
• Free Code Audit For Flutter Project
• Flutter App Architecture: flutter_bloc or flutter_clean_architecture?

The Fluwix platform is solely front-end application at the moment, I did think about adding back-end features few months ago, you can find out more from this github issue. Should I use the traditional back-end stack I know well such as Micronaut or Spring Boot or brand new Web3 Decentralized Applications (DApps) stack such as Ethereum blockchain?

Blockchain Technology

After closing the gap, I'm back to back-end technology again namely Blockchain. First, I took the Udemy's Blockchain A-Z™: Learn How To Build Your First Blockchain course. Thanks to the clear explanation from the instructor, I have good grasp of intuitions on Blockchain, Cryptocurrency and Smart Contract. 

After completed the course, I start exploring the Blockchain space by look beyond the obvious choice for DApps development: Ethereum. Substrate, a Rust-based framework to build your own blockchain by Polkadot catched my interest. In a short time, I find out that to get into Substrate, the prerequisites are knowledge of Rust programming language and Web Assembly. I took the Udemy's The Rust Programming Language course and completed the tutorial in Rust and WebAssembly book, then the Build a Bitcoin-like Blockchain with Substrate - Beginner Friendly YouTube video series. After completed the video 3 of 5 of the YouTube series, I realized that I jumped the gun, I'm a bit too far from DApps development. The Substrate framework is great for building your own blockhain a layer below the DApps instead of DApps itself.

After a big trip to Rust and Substrate, I turn my attention to the obvious choice: Ethereum, I pick up the Learn Ethereum book and code along with it. Currently I am at 50% of the book, so far so good. You might interested to follow some of my github repositories:

• eth-erc721-marketplace: Ethereum Digital Art Marketplace (ERC-721)
  
• fluwix-token: Fluwix Token (ERC-20)
  
• eth-todo: Ethereum Todo Smart Contract
  
• substrate-utxo-workshop: Build a Bitcoin-like Blockchain with Substrate
  
• wasm-game-of-life: Conway's Game of Life with Rust and Web Assembly
  
• eth-dapps-nextjs-boiletplate: Ethereum dApps Next.js Boiletplate
  

Conclusion

At this juncture, I can decide to build Fluwix as DApps over the Ethereum blockchain network. You can expect me to write more about this topic in the future. Lastly, a lesson learned "Sometimes it is far easier to stay with the obvious choice" even the exposure to Rust and Web Assembly is not totally wasted.

Thanks for reading. I hope you get something out of my experiences. :)

Flutter App Architecture: flutter_bloc or flutter_clean_architecture?

The title of the blog post suppose to be "Flutter App Architecture: flutter_bloc or flutter_clean_architecture or stacked?" as I planned to look into comparison of Flutter App Architecture for flutter_bloc, flutter_clean_architecture and stacked package using the Number Trivia app. Unluckily I bumped into Blockchain Technology recently which need my 100% focus, hence I don't have time for the stacked package. (If you're stacked supporter, it will be great if you can showcase stacked architecture using the same Number Trivia app). The good thing is the lengthy post become less lengthy.

You can see the Number Trivia showcase live powered by Fluwix.com:-

Ala! Too bad the Number Trivia showcase only work in mobile apps and web host other than HTTPS such as localhost. As Fluwix.com is hosted in secured site, it is facing the following error when send a get request to the numbersapi.com which is insecured:

Kindly let's me know if you found a solution for the error above.

You can find out details of the Number Trivia app and Clean Architecture from the excellent Flutter TDD Clean Architecture Course, I will not repeat here. Let's look into the architecture and some code metrics without further ado.

flutter_bloc

Github repo: https://github.com/limcheekin/fluwix/tree/number_trivia_flutter_bloc/number_trivia

Total LOC for functional codes is 617 and test codes is 603. You can find out details of code metrics from the README of the link above. 

Enhancements made from the original codes:

• Dependencies updated to the latest version and null safety support.
• Replaced data_connection_checker package to connectivity_plus as it doesn't support null safety.
• Added freezed package to generate toString/toJson/fromJson, hence model class is not needed.

flutter_clean_architecture

Github repo: https://github.com/limcheekin/fluwix/tree/number_trivia_flutter_clean_architecture/number_trivia

Total LOC for functional codes is 641 and test codes is 444. You can find out details of code metrics from the README of the link above. The test codes of flutter_clean_architecture has lesser LOC is due to there's no test cases for controller or presenter class where flutter_bloc has bloc tests. I raised a question How do I write test for the controller or presenter class? to the official github repo. In my opinion, we still can write Widget tests to cover the testing of this functionality.

The flutter_clean_architecture package using view, controller and presenter classes compare to flutter_bloc package using event, bloc and state classes.

Conclusion

So, which one is good for your team? Some developers will say "Learn X, and forget the rest." I tend to disagreed as every team's experience, expertise and background is different, I think it is better for your team to look into options available and pick the one that fit well with your team. Lastly, I will go for flutter_clean_architecture package as it's codes look more natural to me. By the way, you can further enhance the codes by using injectable package if you don't want to write the code in dependencies.dart file manually.

Hope this help and I'd love to hear from you! :)

Free Code Audit For Flutter Project

When you see the title you must think that this is a click bait, otherwise it is too good to be true, right? Is there any catch? It is Better Code Initiative run by me to raise the awareness on code quality matters among stakeholders of computerized systems/apps and IT projects, not just developers. 

It is inspired by a conversation between a Flutter developer and I on the subject of code quality as in my opinion "Most businesses don't care about code quality until their application or system crashed in the production environment". I hope you prove me wrong if you are a business stakeholder who is reading the article. By the way, if you care about code quality, your engineering team members will put priority on the quality of codes they wrote, which in turn will improve the overall health and robustness of your application or system.

You can adopt the best practices of writing code used internally at Google for free with 3 steps:

1. Add the pedantic package to the dev_dependencies of the pubspec.yaml file of your Flutter project before you write the first line of code, for example pedantic: ^1.11.0 at the time of writing.
2.  Add a analysis_options.yaml file to the root directory of your Flutter project with the following line: include: package:pedantic/analysis_options.yaml
3. Your IDE such as Visual Studio Code will report the code issues automatically or you can see the list of code issues by execute the flutter analyze in the command line.

If you still not sure how to do it, you can check out the offer I will audit the code quality of your flutter projects for free at Fiverr. I will generate a report for your Flutter project including: 

• Summary of number of code analysis/linting issues and null safety issues
• List of code analysis/linting issues and null safety issues
• Cost of fixing the issues reported

You can see the sample report below:

If you need helping hands to fix the coding issues and improving the code quality of your Flutter project, please feel free to contact me.

Hear from you soon! :)

FlutterQuill: A rich text editor for Flutter

The Rich Text Editor showcase the example of the flutter_quill package created by Xin Yao from BulletJournal.us. In my opinion, the package is the best Rich Text Editor for Flutter, please let me know if you found a better one.

You can see the following showcase live powered by Fluwix.com:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please add your idea of showcase.

Are you facing any problem with your Flutter development? Kindly share your Flutter problem to us, we might have the solution to your problem. 

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the rich_text_editor branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hear from you soon! :)

The Fluwix Go Social!

I'm glad to inform you that I created a Facebook Page for Fluwix at https://www.facebook.com/fluwixfb. Feel free to like, share and follow the page.

Also, a Telegram Group created at https://t.me/fluwix_chat

Let's connect and chat!

Expandable Floating Search Bar

The Search Bar showcase the example of the material_floating_search_bar package using the code shared by ResoCoder. The package simplify the creation of expandable floating search bar similar to the one Google used in their own apps.

You can see the following showcase live powered by Fluwix.com:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please add your idea of showcase.

Are you facing any problem with your Flutter development? Kindly share your Flutter problem to us, we might have the solution to your problem. 

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the search_bar branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hope to hear from you. :)

Create Native Settings for Flutter App in minutes

The Settings UI showcase the example of the settings_ui package created by Yako.io. The package simplify the creation of Settings screen.

You can see the following showcase live powered by Fluwix.com:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please add your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the settings_ui_showcase branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hope to hear from you. :)

Fluwix: The Neumorphism Design

The Neumorphism Design showcase the example of the flutter_neumorphic package created by Idean.com. There are 6 categories of showcase such as Neumorphic Playground, Text Playground, Samples, Widgets, Tips and Accessibility.

You can see the following showcase live powered by Fluwix.com:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the neumorphism_design branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Lastly, Flutter Widgets Explorer now re-branded to Fluwix, so that the mobile apps and web is under one brand.

Hope to hear from you. :)

Flutter Widgets Explorer now Fluwix

I'm glad to inform you that Flutter Widgets Explorer is rebranded to Fluwix. Start from now the mobile apps and the web app under one brand name.

 

I think the experience of manage the re-branding process is worth sharing here besides the announcement. First of all, if you change the applicationId of the android app, you're actually publish a new app instead of update the existing one in the Google Play Store. Hence, you need a proper way to phase out the existing app and inform user the new app. I'm adopted the following process:

1. Making all the necessary changes for app re-branding and publish the new app to Google Play Store. 

2. Once the new app is ready to be installed by users, update the existing app to inform users to install the new app. I'm using alert dialog, please refer to the following screen: 

3. After user click the "Install Now" button, it will bring the user to the Google Play Store screen to install the app.

Please let's me know if you have better way to manage the re-branding process.

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the retiring branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hope to hear from you!

Fluwix: The Glassmorphism Design

The Glassmorphism Design showcase an example of the glassmorphism package created by Ritick Saha.

The package simplified the creation of Glassmorphic container. I not sure why the package's owner make the width and height properties of the GlassmorphicContainer class required. It is harder to make a widget responsive if you need to specify the height and width of the widget.

You can see the following showcase live powered by Fluwix.com:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the glassmorphism_design branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Lastly, Flutter Widgets Explorer is still in the progress of re-branding to Fluwix, so that the mobile apps and web is under one brand name.

I'd love to hear from you. :)

Fluwix: The Percent Indicator

The Percent Indicator display animated progress widgets based on percentage, can be Circular or Linear, you can also customize it to your needs.. It was created by Diego Velásquez. 

You can see the following showcase live powered by Fluwix.com:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the percent_indicator_showcase branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Lastly, Flutter Widgets Explorer is in the progress of re-branding to Fluwix, so that the mobile apps and web is under one brand name.

I'd love to hear from you. :)