Visual Coding: Build an App in 5 Days

Visual Coding: Build an App in 5 Days

You may have experienced this: café's or restaurants only accept cash and it's communicated nowhere! Not in Google Maps and not on the websites of the cafe/restaurant owners. You have to ask for it!! So what if an app features popular venues and how you can pay? I always wanted to build an app—so I set the ambitious goal to do that in 5 days.

Day 1 • Set goals and finish research

First, I focused on countries where the share of cash transactions at the POS is still high—e.g. Germany and Austria. Second, I created a list of cafés and restaurants in Berlin and Vienna based on my personal favorites. I called 80 cafés and restaurants to verify if and how they accept cashless payments! 94% accept cards, but some venues only accept debit, some go only for credit cards, and Mobile Payments are not for granted. A significant part of 23% request a minimum consumption for cashless payments—mostly 10 Euro but also 18, 25, 40, or 100 Euro.

After that exercise, I drew a few wireframes to clarify the scope of the project and have the first idea of how users would navigate. It's straightforward—splash screen, overview, four detail screens, and a marketing section. This forced me to take decisions early on, for example about the name of the app, the value proposition, and the main actions on every screen.

Day 2 • Build UI directly in Thunkable

From all App Builders out there (such as Good Barber, Bubble, and Apphive), I decided to go for Thunkable. It has a cross-platform approach, the coding blocks look simple, and there are many YouTube tutorials available. I went directly from wireframes to App Builder, trying to build the actual screens with columns and rows, messing around with margins and paddings. I looked into storing images and icons in Firebase and Airtable—and then added the URL to the image component.

Day 3 • Mess with Visual Coding

How did I get started with coding? I watched YouTube tutorials! And I rephrased a problem as "How do I get the images into the app?" or "How can I dynamically change images, text, and Google Maps links on screen?". Above, you see the code blocks for the "overview" screen where a user decides for a café or restaurant list. E.g. "button_berlin_cafes" leads to a new screen called "4_berlin_cafe" which was a matter of creating screens, choosing a code component, and selecting the right variables. Easy.

The bigger problem was to create four separate screens that can display content dynamically. By clicking on "venue_next", all variables such as "venue_img" and "venue_title" would change. The content would be called from a list. For each click on "venue_next", the number would increase by 1 until it hits 13 (in a list with 13 items). Then the list would loop — and jump to the first item.

Day 4 • Export APK and test

The most exciting moment was to export the APK from Thunkable, upload it into my Google Drive, and install the APK on Android and iOS. The screens above are real screenshots and the app worked perfectly! The features of sharing a venue and displaying a venue on Google Maps turned out nicely.

Day 5 • Submit to Play store and Marketing

I didn't manage to publish the app on the Google Play store. Requirements were too tough and the code of the Thunkable App Builder was not optimized for it. Even contacting support and the Thunkable community couldn't fix this! That discouraged me to even think of the Apple app store. Engineers, we will always need you!! Also, I build a Marketing Website in 2 hours with Launchaco — but I couldn't upgrade to the pro plan to attach a custom URL. However, if you search for "Cashlessy" on Google, you will find my Marketing page easily! At this point, I stopped the project on a Friday night and enjoyed the weekend.

Outcome

Most of all, I learned that Thunkable is not a suitable tool to publish apps in the major app stores. I underestimated the requirements and efforts for that part. On the other hand, I made great progress in just 5 days, dived into visual programming, got the app running on my Android and Apple smartphone, messed around with Firebase and Airtable. Last but not least, I learned how 57 café and restaurant owners treat their cashless payments.