Options For Mobile App Builders
Want to build something quick? Keep dream… err… reading!
I have recently decided to explore the process of making espresso. It doesn’t take very much time to realize that being scientific about the process is a great way to improve consistency. With each error, there is a chance to compare and contrast the process with a previous run and understand what to try next. While there are plenty of variables to explore in the process, I have started with a few of the essentials:
- Grind size
- Portafilter weight w/ grounds
- Total Pull time
- Weight of resulting shot
- Volume of resulting shot
- Volume of resulting crema
With these variables, I started to explore espresso and develop my own intuition around the process (what works and what doesn’t). While I am not a espresso connoisseur, I have learned a few things over the past ~four weeks. Over this time, I have always thought about way to improve the process to allow the barista to hone their skills and stay focused on the machine and the resulting flavor.
Minimum Viable Product
When in doubt, always start with the simplest solution to a problem. This is usually the easiest way to reach another time where you can iterate on your decision. In my case, I needed to find a process to record the above variables. Like my day to day work, I use a notepad to record notes and spur-of-the-moment thoughts. I decided to apply the same tool for this situation. I used Dropbox’s Paper product to create a note-like document. This has worked surprisingly well! With minimal fuss, I was able to create my own hierarchy and keep most of the variables together. At a glance, I am able to search through the history and understand if my existing results resemble historical values.
While this is working well, I figured I would try and take the experience to the next level. First things first, I should search for competitors and understand their products. Certainly, I can’t be the first person trying to record their espresso “recipes.”
It doesn’t take much time to find Acaia. They have two products that look important for my workflow: a scale and a grinder. Both appear to weigh portafilters though they won’t help out with the later parts of the process. While a bit of of my price range, they do indicate that other coffee makers are interested in quantifying and improving their process.
From the outside, it is not clear if they have an application for my use case. I figured it would be a good learning experience if I try and build one!
Let’s See!
Google Sheets and Google Forms
While a bit apprehensive, I decided to spend ~15 minutes to understand the pitfalls of simpler products.
Logically, Google sheets is a more formal version of the columnar data that I was recording in Paper. I would have to make a column for each variable and record data row by row. Without even labeling the columns, I could tell that only seeing three columns on my phone would result in a lot a scrolling and inefficient use of horizontal space.
Google Forms provides a way to get structured data into a Google Sheet. I quickly set up a Form to record all of the values that I needed to collect. This was a great learning experience because I knew that anything I build would just resemble this form but with a different look and feel (perhaps a few usability improvements).
Google Forms has form validation which could easily prevent me from adding values that were off by some decimal place. Like Google Sheets, Google Forms had some questionable efficiency with vertical space. I was also worried that submitting the form may make editing the data difficult (switching between two apps). While this product isn’t really built for my use case, it did provide an interesting learning experience around the data model and what I can expect when building my own form.
With the failed attempt of Google Forms behind me, I decided that I need to put more work into customizing the interface for recording espresso data.
Low Code
While it probably means different things to different people, I use “Low Code” to mean “absolutely the fewest lines lines of code and least wall clock time to find out of if a design works or solves a problem.” Ideally, this should mean writing no code at all! For this app, I wanted to explore the options for building a mobile app with as little code/configuration as possible.
Aside: A few weeks prior to starting this application, I decided I wanted to map the places in San Francisco where I could buy coffee beans. I didn’t make much progress on this application but it was a fun time exploring the Progressive Web App space. If all goes well, I will revisit this application if I find a better platform for rapid development.
I knew I wanted something with drag-and-drop and, feeling lucky, went to Google to see what is out there…
Thunkable
Thunkable is a platform that is built by the same people that developed Scratch (In my opinion, one of the best applications to learn to write code without worrying about syntax). Even with a quick glance, it appears to have several plugins for advanced data management, payments, and authentication. This was a great early sign so I decided to build and see where things went.
Thunkable has a mobile app that lets allows you to edit online and preview the application on your mobile device. This turned out to be extremely helpful as I cared mostly about the look and feel and viewing on my laptop didn’t really feel the same.
Within a few hours, I had watched a few tutorials and tried exploring the feature of the application. I mostly used the form and formatting elements to build something similar to Google forms but in less space. I also explored the menu options if I event wanted to provide separate experiences for recording and exploring data. I ended up with the following after roughly 3 hours:
While development was progressing, I was not very confident where things had ended up. I was basically using their editor to write CSS and felt that it was too difficult to build a mobile app with a nice look-and-feel. Notably, it was extremely difficult to:
- add icons to the navigation bar
- customize the bottom navigation bar (too block-y) and the drawer (not clear how someone would realize they can open it)
- copy+paste the form elements
Unable to build a desirable user experience, I didn’t even bother trying to write code (though I am sure this would be where this product beats competitors in terms of extensibility).
App Maker
App Maker is designed for businesses already using GSuite. All you need to know is don’t try to build anything with it just yet. It might make sense for processes inside of your business but it is not designed for third party applications.
App Maker seems great for IT professionals that don’t want to mess around with IDEs but still want some automation around data entry. For my task, it is a bit too complex to get started and build something quick. I think that I could spend more time into learning the framework though I would rather invest time into a proper web framework instead of locking in to App Maker.
Buildfire
Buildfire seems to have a few integrations but is clunky to get started and iterate. They do seem to have a way to create a form but it is from a third party. I tried using my Google form but this just opened a hyperlink instead of creating a form for me. NEXT!
Appery.io
Wow. For a while, I thought I would only ever find CSS based IDEs. Appery has really set the stage for Mobile Application builders. Just the data binding feature alone was enough to “wow” me. Coming from an Angular background, it was pretty intuitive to understand 2-way data binding and I was able to recreate my form in a matter of minutes. While not perfect, the look-and-feel was superior to Thunkable and likely worth the extra effort.
After maybe two to three hours of trying various things and finding all of the edges in the platform, I set out to build a prototype of my application. It took me another five hours to build a login form with session key storage and my espresso form that successfully uploads to the database. Basically the whole application! Wow! 😃
Unfortunately, I did run into some problems after this work. The build that Appery produces does not meet some requirements for new APKs on the play store.
I figure this is likely to be fixed at some point. The Appery forms do like they are tended to though there may be some engineering that needs to be done until something like this is rolled out. I decided to download the APK and run on my phone from there. This installation also failed though I am not quite sure why.
Given that I would be pretty close to launch this application, I now have a new requirement: payments. I would like to find platforms that make In-App Payments as easy as possible. Given that most platform will end up using Cordova, this is likely possible with an open-source Cordova plugin.
I decided to keep looking at more competitors given that I have had a remarkable and positive experience so far.
Monaca
Like Appery, Monaca offers a set of tools for building and deploying Coradova-based applications. Unlike Appery, you’ll have to code the UI yourself. This will likely take more time than the friendly drag/drop editors. I skipped over building anything and rushed to verify the target API of their build process. Fortunately, this system targets API Level 28 though I did face some issues with signing keys (I believe Monaca signing your apk will exclude customers that want their signing keys managed by Google).
Monaca also has a similar Backend-as-a-Service but will store collections as JSON documents rather than columnar data. It looks like there are some tools for User management and generating scripts to use in the UI. I am not sure if Monaca has a preferred framework given the sample app is plain Javascript. This might be an option to explore in the future though I am not convinced by the questionable ease-of-use.
Ionic Creator
I initially looked at this option before Monaca. I did end up trying it out but you can’t build an apk from the UI. Ironically, this is the least impressive platform for building Ionic apps. Also, I am also worried that more development effort will be put into their IDE rather than their online editor. Also, I would prefer a 7 day full access trial compared to paying just to see if the app meets my requirements. 😦
Last Words
There might be other platforms out there but they don’t show up on the first two pages of Google as a non-advertisement. I think I will continue to see if I can get Appery to work given that it was pretty easy to get up an running. I may be able to find some hacks around exporting and building on a Google Cloud Shell host though I might as well use Ionic Creator at that point. If I do decide to write a follow up blog post, it will likely be for an in depth guide on creating full-fledged applications in Appery. Thank you for reading! 🍰
