Over a 2 days getaway in Melaka, our tech team have developed a Biztory mobile app using WeChat Mini Program. We realised that our users are not on their computer all the time so this will help them to access the app using their phone.
Why do we develop this mini program?
Mobile apps have better performance than accessing the app using mobile browser because it can store data locally on the user’s phone.
Why not just build a new app using Flutter/Android Studio/IOS development?
There are a lot of built in functions inside of the mini program. Developers can develop and deploy their own apps in WeChat ecosystem. Users can straight away use millions of the hosted mini program without needing to download them.
Background
Our tech team brainstormed some of the functions in Bizotory desktop application that can be implemented for the mini program. The functions are:
- Checking the subdomain
- Login page
- Dashboard
- Creating invoice
We do not need to build the backend from scratch since most functions are already available in the desktop version of Biztory. So now we need to find a way to access the API of the desktop app with the mini program.
To communicate with the API of the desktop app, we used API Gateway by Amazon Web Service. APIs that are needed for the mini program are exposed and developed in the mini program.
![](https://biztory.com.my/wp-content/uploads/2019/11/get_api-1024x458.png)
If you have some experience in web development then, words like HTML and CSS should sound familiar to you. WeChat mini program uses these elements but they are called WXML and WXSS respectively. For the scripting language, you can choose between TypeScript and Javascript. WeChat has its own IDE(Integrated Development Environment) which looks similar to Android Studio. It also has its own emulator which comes with multiple types of phones and screen resolution. The compilation of the software is also very fast, it will compile every time you save the file in the program
Log In
![](https://biztory.com.my/wp-content/uploads/2019/11/subdomain_wechat_ide-1024x655.png)
On the first page of the app, you need to insert your subdomain of your Biztory app. It will validate with the API to ensure that the subdomain exist. Then it will redirect to the login page
![](https://biztory.com.my/wp-content/uploads/2019/11/login_page-578x1024.png)
Creating item and invoice
![](https://biztory.com.my/wp-content/uploads/2019/11/unnamed.png)
![](https://biztory.com.my/wp-content/uploads/2019/11/item_detail-573x1024.png)
The app requires you to complete the fields and then it will redirect you to a page where you can create an invoice by clicking the button “Create Invoice”. The app will then give you a success message. So if you use the desktop version of Biztory, you should see the newly created invoice.
![](https://biztory.com.my/wp-content/uploads/2019/11/unnamed-1.png)
We are proud of what we achieved under a day and of course there are some improvements that needs to be done. Thank you for reading 🙂