The Great App Store Trials

Today marks my first day as a published app store developer. It's been a dream of mine to release work I've done not just on the web, but as something native you can put in your pocket without needing a browser. Some stories are of great heroes who overcome dangerous challenges through incredible feats of might; this one is of the problems and solutions of releasing a web app to the Play Store.

Act I: Building the App

I chose theQuasar Frameworkpowered byVue.jswithCordovamobile conversion built in.Choosing tools that played well togetherassured me that if Iread the documentationand put in the effortI'd eventually succeed.

Release often. Advice I give to anyone and even easier to follow for a hobbyist project. Hit yourminimum viable product then releasethe app to the public.

Problem: Releasing a Web App Cheaply and Easily

I'm no server admin. I've built my app and just wish to see it online for public consumption.

Solution: Netlify

Open Source projects can be automatically deployed and built directly from a Github repo for free to theNetlifyservers. Once hosted you get a simple URL to include in your project.

Problem: Bugs

They happen, bugs are a natural part of application development. Keeping a todo list on your computer seems counter to the connected open source world we live in.

Solution: Github Issues

Being transparent in logging bugs has a number of benefits.Github Issuesis a great tool for this.

  • As easy as a todo list.
  • Great practice, especially if youfollowSemVerand writeclean commits.
  • Users know what's busted and have a window into helping tofix the bugs themselves.
  • Forms a public history for the projectwhileencouraging a changelogas the app evolves.

Act II: Building for Android

GenerallyQuasar makes compiling for Android easyand enjoyable. Running their mobile dev tools unveiled several mobile specific bugs, which I logged then fixed.

Quasar's easy tools are great for quick feedback but are nothing compared to a real debugging APK running on your phone. Luckily there are docs forwrapping your Quasar app in Cordova.

Problem: Running Cordova Built APK

The documentation drops off quickly after Cordova has done its job.

You find yourself in a wolf's den of opinions and tools in a world of assumed knowledge.

Emulation throughAndroid Studiois possible, but I could never get it to work with my non-Android-Studio app.

Solution: Cordova compile to device.

After some digging, the most successful way to compile to my Android device was:

  1. quasar buildfrom myroot.
  2. quasar run --devicefrom thecordova directorywhile myphone was pluggedin withUSB Debuggingturned on.

This automatically compiles and opens the app on your connected Android device.

P.S. Android Studio may still be required here.

Also... Overcoming USB Debugging

Enabling USB Debugging on modern Android phones is the opposite of obvious. Luckily,this guide to Android USB debuggingexplains the process.

Also... Overcoming USB Cable Differences

I encountered times where USB debugging refused to work. Turns outsome usb cables only transfer power and not data. Use the correct USB cable type to avoid wasted time for silly reasons.

Problem: Local Ajax Calls Don't Work

JSON cannot be fetched locally as we could on Netlify. I did not wish to bake in all of my data on the web app to slow down initial load.

Solution: Bake in data for the app build only.

For my web app, the only concern with baking in data was app size for first load. On mobile that's not a problem. In fact, baking in the data means an even easier offline solution.

I wrote adata processornode script that could either compile my data to a JSON file or to a JS importable module (withexport default ...) along with somepackage.json build scriptsto simplify the process during development and releases. In the app, I always import the JS module and if there isdata.length > 0I use it, else I attempt to fetch the JSON file.

It took effort, but assured that my both the web and android app were quick to launch.

ACT III: Publishing

Congratulations! You have an app that runs on Android. Next, you must fumble through theapp publishing process. I've done my best to list the steps, problems and solutions below.

Step: You Want Money and My Soul?

First step is registering for a Publisher Account with your Google User. This involves agreeing to many terms of services and paying afee of $25that separates you from the potential onslaught of crapware and spam that may otherwise reach the Play Store. Relatively straightforward anda necessary evilto progress.

Problem: Releasable APK file

Up until nowwe've been using a debugging APKfile. That's not good enough for release.

Solution: Cordova Build

cordova buildwill create an android-release-unsigned.apk that is, as the filename implies, anunsigned but otherwise ready to release APK.

Problem: Signing the APK file

One of the least documented parts of the process is signing the APK outside of a completely Android Studio made app.

Solution: Android App Studio, Keystore, jarsigner

  1. InstallAndroid Studioand launch it
  2. Open an Existing Project... choose the cordova created project directory for the app
  3. Build -> Generate Signed APK
  4. Key Store Path: Create New (follow onscreen prompts)
  • Note the place you've saved it, and what the key alias is (key0 is fine)
  1. Close Android Studio, we'll instead use jarsigner to sign our apk:

    jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <~/path/to/keystore.jks> <~/path/to/android-release-unsigned.apk> <KEY ALIAS>

Problem: Installing onto Android Device

Let's get it running on our Android once again, signed and ready to release.

adb install ~/path/to/android-release-signed.apk

Solution: Installingadb

adbcan be installed from the Android Studio Preferences screen:

  1. Appearance & Behavior > System Settings > Android SDK > SDK Tools
  2. Check Android SDK Build-Tools, Android SDK Platform-Tools, Android SDK Tools
  3. Ifadbstill isn't available, correct your path like so:

Now runningadb installon your apk will install directly to your device.

Problem: zipalign

While uploading to the Play Store you may see a notice that the apk is not zipaligned.

Solution: zipalign it

Unfortunately this is not a tool we can install by itself, but it does come with Android Studio.

The command we desire to run is something like:

zipalign -v 4 ~/path/to/file.apk ~/path/to/newfile.apk

Replacezipalignwith the path to it on your machine, likely under your android studio sdk directory.

Finally we have asigned, zipaligned, releasable APK file ready for the Play Store. Follow the prompts on the site and your app will hopefully be published within a day.

I encourage others to write about their experiences building apps for the Play Store. I'm sure there are simpler ways to achieve the same result with fewer headaches. Ultimately, having a published app on the Play Store is a very satisfying experience and this document will serve as a reminder of the trials I've been through in an attempt to inform others of the problems that may be encountered along the way with some solutions that worked for me.

Stuck with a similar project? Reach out to me on Twitter @SharpShark28