Thoughts of Customer Development, Entrepreneurship, Project Management and Software Development

Flutter File Upload

noreply@blogger.com (Lim Chee Kin) — Thu, 14 Sep 2023 03:58:00 +0000

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

noreply@blogger.com (Lim Chee Kin) — Thu, 20 Apr 2023 04:17:00 +0000

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

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

noreply@blogger.com (Lim Chee Kin) — Fri, 03 Sep 2021 07:10:00 +0000

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:

Thanks for reading. Do you have anything to add?

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

noreply@blogger.com (Lim Chee Kin) — Fri, 27 Aug 2021 07:50:00 +0000

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

noreply@blogger.com (Lim Chee Kin) — Thu, 15 Jul 2021 04:07:00 +0000

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:

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:

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?

noreply@blogger.com (Lim Chee Kin) — Tue, 22 Jun 2021 04:49:00 +0000

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

noreply@blogger.com (Lim Chee Kin) — Sat, 05 Jun 2021 09:07:00 +0000

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:

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.
Add a analysis_options.yaml file to the root directory of your Flutter project with the following line: include: package:pedantic/analysis_options.yaml
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

noreply@blogger.com (Lim Chee Kin) — Sat, 29 May 2021 07:15:00 +0000

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

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!

noreply@blogger.com (Lim Chee Kin) — Tue, 25 May 2021 08:50:00 +0000

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

noreply@blogger.com (Lim Chee Kin) — Fri, 21 May 2021 09:20:00 +0000

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

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

noreply@blogger.com (Lim Chee Kin) — Fri, 14 May 2021 08:20:00 +0000

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

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

noreply@blogger.com (Lim Chee Kin) — Sat, 08 May 2021 07:01:00 +0000

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

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

noreply@blogger.com (Lim Chee Kin) — Thu, 06 May 2021 09:41:00 +0000

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.

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

noreply@blogger.com (Lim Chee Kin) — Fri, 30 Apr 2021 08:25:00 +0000

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

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

noreply@blogger.com (Lim Chee Kin) — Sat, 24 Apr 2021 03:45:00 +0000

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

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

Flutter Widgets Explorer Go Web @ fluwix.com

noreply@blogger.com (Lim Chee Kin) — Fri, 16 Apr 2021 06:52:00 +0000

The Web version of the Flutter Widgets Explorer finally released to production at fluwix.com.

You see a word "finally" in the sentence above as the efforts required to web-enabled a Flutter mobile apps is greatly underestimated by me. I initially thought that I just need to make the layout of the app responsive, then it should run on the web automatically. The current stage of Flutter web support prove me wrong.

I wouldn't like to bore you with the details for now and let's me show you the outcome. On the left of the following image is how the Flutter Widgets Explorer looks on the first launch when it is run on your mobile browser and on the right is on your desktop browser:

Then, let's select the newly added showcase "Material Design Showcase", on the left of the following image is how the Material Design Showcase looks when it is run on your mobile browser and on the right is on your desktop browser:

Alternatively, you can access the Material Design Showcase with direct link https://www.fluwix.com/material_design_showcase, please see the following image:

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.

Lastly, If you are interested to look into details of how I web-enabled the mobile apps and how the Material Design Showcase module is created, please check out the responsive and material_design_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 soon! :)

Pay $0.01 for Cloud Hosted MLflow

noreply@blogger.com (Lim Chee Kin) — Fri, 09 Apr 2021 09:11:00 +0000

Let's say you're a ML practitioner working in start up, small company or any company that had limited budget and you would like to explore the use of MLflow to manage your team's machine learning life cycle, but you don't want to take the hassle of setup your own instance of MLflow. Then, the good new is "You can have your own MLflow tracking server and MLflow UI running on the cloud for $0.01 only", that's sound unbelievable, right?

I found the following great deal from AWS Marketplace:When I come across the offer above from InfinStor, I think it is too good to be true, there's must be a catch. I decided to take up the offer and try it out. First of all, I don't have any affiliation or association with InfinStor, I wrote this post is simply for sharing purpose.

Once you sign up and login to the InfinStor console, you will see the following screen which clearly tell you what is the possible "hidden" cost involved.

In short, if you're NOT running the jupyter notebook and MLflow project using EC2 instance, the cost should be minimal. To setup the MLflow tracking server, please check the documentation under "Initial Configuration By Admin" section.

I tested the MLflow tracking server and MLflow UI by running a MLflow project locally. You can checkout the changes I made for helloworld example and go through the Using InfinStor Mlflow Projects to find out how to do that.

Hope this help. Happy weekend! :)

Four Key Stages of The Machine Learning Process

noreply@blogger.com (Lim Chee Kin) — Tue, 06 Apr 2021 08:31:00 +0000

These four stages is defined by Emmanuel Ameisen in his recent book Building Machine Learning Powered Applications. As I think it is an important piece, I created a process diagram above and note down few important points for each stage. You can considered this is a study note.

1. Identifying the Right ML Approach

The best approach for a given problem (product goal) will depends on success criteria, data availability, task complexity and model choice.

2. Building an Initial Prototype

Start by building an end-to-end prototype before working on a model which aim to tackle the product goal with no ML involved and will allow you to determine how to best apply ML.

3. Iterating on Models

If you need ML, start gathering dataset, train a model and evaluate it shortcomings. The goal of this stage is to repeatedly alternate between error analysis and implementation.

4. Deployment & Monitoring

Once a model shows good performance, you should pick an adequate deployment option. Once deployed, models often fail in unexpected ways. The last two chapters of the book will cover methods to mitigate and monitor model errors.

Side Note

I added an arrow labelled "New product goal, Revised product goal" to the process diagram. Based on my experience, software products evolve, it will not end there after the ML solution went live. Hence, it is likely that the existing product goal will be revised or new product goal being inspired or discovered. Then, the cycle start from stage 1. Don't you think so?

Showcase Your Widget with Flutter Widgets Explorer

noreply@blogger.com (Lim Chee Kin) — Fri, 02 Apr 2021 01:00:00 +0000

Start from now, you can use Flutter Widgets Explorer as a platform to showcase your widget with README, codes and licensing information. The Flutter Widgets Explorer supports Android devices at the moment and will support Web in a week or two (Updated on 16 April 2021: The web version of the Flutter Widgets Explorer just went live @ fluwix.com).

That's made possible by the Showcase View widget, let's me show you how it looks:

If the default Read Me, Code and License tabs are not enough for you, the Showcase View widget support additional tabs too, please see the following image:

Does it sound and look interesting? 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.

I think the best way to find out how Flutter Multi-modules works is create the module and try it out yourself. If you don't have any idea, I'm looking for contributors to help on migrate the existing showcases to Flutter modules. So far 5 completed, 9 more to go. If you are interested to help, feel free to look into the module migration guide. If you're still not turn down by the long list of steps and willing to give me a hand, great! :), kindly open an issue in the Github issues and tell me which showcase you are interested to migrate (Updated on 16 April 2021: I completed all migration works myself, thanks to module_starter automated most of the manual works).

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

As usual, I'd love to hear from you. :)

Flutter Navigation: flutter_modular or stacked?

noreply@blogger.com (Lim Chee Kin) — Wed, 31 Mar 2021 06:36:00 +0000

The current way of Flutter Widgets Explorer using switch statement to construct the main listing screen and navigation no longer sustainable as I foreseen the number of showcases will be double or triple in the coming months.

Hence, I decided to look into new solution. First, I come across an article shared about Flutter Navigation 2.0. In my opinion, it is too complex, we need better abstraction to make it usable to developers. I search again and finally nailed down to two alternatives: flutter_modular and stacked.

Let's look at simple code metrics (line of codes) for both packages:

It is obvious that flutter_modular is the winner here. It has less boilerplate code and code generation is not required. For stacked, it still has more line of codes compared to flutter_modular after excluding the generated app.router.dart and app.locator.dart. Also, flutter_modular using Navigation 2.0 and stacked still using Navigation 1.0 if I'm not wrong (Correct me if I'm wrong).

Lastly, there's one pending issue for Flutter Widgets Explorer to adopt flutter_modular as it's navigation library, the default back button is missing, I opened an issue that still pending for response at the time of writing.

If you interested to dig into the code, feel free to look into the github repo for flutter_modular and stacked implementation.

Happy coding! :)

Deploy Serverless Machine Learning Models to AWS Lambda

noreply@blogger.com (Lim Chee Kin) — Tue, 23 Mar 2021 09:19:00 +0000

I just completed the Udemy course with the same title of the blog post.

The course cover three machine learning examples using different library:

scikit-learn: Using regression model from scikit-learn trained on California housing dataset for house price prediction.
spacy: Using a small English model from spaCy NLP framework for named entity recognition.
keras: Using ResNet50 computer vision deep learning model from Keras framework to create for image recognition.

Let's me tell you the following value-added changes of my code from the original source code from the course:

The examples are using Python 3.8 instead of Python 3.6 in the course and latest version of libraries except the scikit-learn example using earlier version of scikit-learn to align with m2cgen which has the possibility to convert scikit-learn model to native code and C code running in the microcontroller with emlearn.
To deploy all examples. you only need git, no other installations are required. All examples are setup with continuous deployment pipeline using Github Actions. The following diagram shows how it works from the high-level:

Developer update changes to repository by sending a git push command.
The git push command will trigger the Github Actions workflow which run the serverless deploy command based on configurations in serverless.yml file.
The CloudFormation stack consists of API Gateway, AWS Lambda, S3, ECR, etc. will be created on AWS.

After you forked my repository, you just need to add AWS_KEY and AWS_SECRET to Repository secrets of Settings/Secrets of your github repo like the following image:
Then, you can deploy all examples to AWS lambda with a git push command.

All examples are setup with "warm start" and request throttling limit to 1 to protect your account and your wallet (You don't want to have surprises in your monthly credit card bill for demo projects, right?)
All examples have a last step "Test Lambda functions" to verify the public API is working post-deployment.
Spacy and keras example are deploy using Docker container image to AWS Lambda. Thanks to Jan Bauer published the blog post Using container images to run TensorFlow models in AWS Lambda, timing is just right on helping me to get the keras example working.
For keras example, image uploaded directly to Lambda endpoint and store as temp file instead of upload to S3 bucket.
Code of each example is located in its own branch.

Please take note of the storage cost of S3 and Elastic Container Registry (ECR), make sure you clean up unnecessary files and Docker image files there.

Lastly, if you look for someone on deploying your machine learning model to AWS lambda, I think I can help here. :)

Oh yeah, here is the github repo URL https://github.com/limcheekin/serverless-ml if you missed it.

I think the scope is broad enough for now, let's go deep.

Stay tuned to the next!

Flutter Multi-modules Support

noreply@blogger.com (Lim Chee Kin) — Mon, 22 Mar 2021 09:34:00 +0000

I wrote this article to inform Flutter developers for a lesser known feature of Flutter: Multi-modules support in a Flutter project. Thanks for inspiration from an article A Flutter BLoC + Clean Architecture journey to release the #1st Idean Flutter app published on Medium.com. It mentioned about “Dart modules”, I not sure whether we are referring to the same thing here.

After gone through the article above, I perform a google search for Flutter module and I found many articles and videos on how to create modular Flutter project, or how to structure Flutter code in modular way, and a library known as flutter_modular. But I’m looking for “real” modules that supported by Flutter and IDEs to define a physical boundary among modules, not a logical one defined by developers. It is an “aha!” moment, out of no way I am thinking of typing flutter create –help command in my terminal window. From the list of options, I found the following option like what I am looking for.

Then, I proceed to flutter.dev website to find out more information about the -t option, not much information found besides a description similar to the above. Hence, I decided to create a Flutter project to test it out. In the flutter project directory, I’m creating two modules such as nested_list and tab_buttons using the following command:

flutter create -t module <module_name>

The following is directory structure of the Flutter project, you can see that the nested_list and tab_buttons module is outside the lib directory (All Flutter code need to be located in the lib directory normally).

The following is the advantages of the “real” Flutter module besides modular structure:

It has it’s own pubspec.yaml file, you can manage assets, dependencies and other stuff on module-basis.
It can have it main.dart, you can run the code of a module independent from project and other modules.
It can have it own test directory, you can write tests to test code of the module.
A Flutter project can have mix of non-null safety and null safety packages which segregated by modules.
You can start null safety migration module by module without blocking the release cycle. Flutter Widgets Explorer will adopt this approach.

Once the module is ready, you can link the module to the project by specify the following dependencies configuration in the pubspec.yaml file:

The Flutter project is working in my mobile phone and Google Chrome with the following command:

flutter run -d chrome

Please check out the following github repo and test it out yourself:

https://github.com/limcheekin/flutter-modules

Thanks for reading, I hope the write ups is helpful to you, hear from you soon! :)

Flutter Widgets Explorer: The Source Code View

noreply@blogger.com (Lim Chee Kin) — Fri, 19 Mar 2021 07:41:00 +0000

The Source Code View is a reusable widget to share code from your public Github repository. It created based on knowledge gained from previous showcases such as Syntax View, Animate Icons, URL Launcher, Markdown View, and Shimmer Effect.

The Source Code View widget will be integrated into Flutter Widgets Explorer to share the code of showcases, so that you can copy and paste the code with a click of button, sound great? :)

I created a MultipleRequestsHttpClient class to reuse the HTTP client in multiple widgets as Future.wait doesn't cut it. Please let's me know if you think there's better way to do the same thing.

Thanks to the pubspec_parse package allowed the PubspecDependenciesView widget to retrieve dependencies data of the pubspec.yaml file.

A picture is worth a thousand words:-

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 source_code_view branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you. :)

Flutter Widgets Explorer: The About Dialog

noreply@blogger.com (Lim Chee Kin) — Tue, 16 Mar 2021 06:39:00 +0000

The about dialog described what the application did and its licensing information. It is integrated into Flutter Widgets Explorer.

A picture is worth a thousand words:-

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 about_dialog branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you. :)

Flutter Widgets Explorer: The Shimmer Effect

noreply@blogger.com (Lim Chee Kin) — Fri, 12 Mar 2021 08:43:00 +0000

The Shimmer Effect is a special effect to indicate loading status. It is an alternative to progress bar to show loading progress.

A picture is worth a thousand words:-

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 shimmer_effect branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you. :)