Flutter File Upload

Are you in search of the perfect file upload widget to meet your specific requirements? Look no further! Introducing the File Upload module, a solution born out of the need for a versatile and tailored file uploading tool. 

A picture is worth a thousand words:

The File Upload module offers support for various file upload statuses, ensuring a seamless experience:

• pending: Files are in a queue, waiting for upload.
• uploading: Files are currently in the process of being uploaded, with an option to cancel using the (x) button in the top right corner.
• processing: Uploaded files are actively being processed on the server.
• completed: Files have been uploaded and processed successfully.
• failed: Unfortunately, some file uploads may not succeed.
• cancelled: File uploading have been cancelled by the user.

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

Many open-source file upload solutions provide only frontend components, leaving a gap in the backend integration. We've bridged that gap with a robust backend API developed using Python FastAPI, hosted on AWS Lambda.

Explore the backend source code at serverless-file-upload repository to seamlessly integrate the File Upload module into your projects.

We welcome your insights and contributions to enhance the backend API implementation for file uploads. If you have alternative approaches or know of other backend API implementations that excel in this context, your input would be greatly appreciated. Your valuable suggestions can help us continually improve and refine our implementation. 

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 file_upload 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! :)

Flutter Chatbot UI

The Chatbot UI showcase reuses the code from hadikachmar3/ChatGPT_flutter_course and interacts with an Echo chatbot instead of the OpenAI API. When you send a message to the chatbot, it will simply echo it back to you.

The idea is to have a generic chatbot UI that can be used for any chatbot or chat-based application.

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 chatbot_ui 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! :)

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. :)