May 19, 2018

When creating a piece of software using a framework or language you are unfamiliar with, I find it best to start out simple. Rather than designing a crazy full fledged web or mobile app, you can create a view-only literally single page SPA (i.e. no navigation) that pings an API and renders the content to the screen. That is exactly what I did here, just as a fun experiment in developing a cross platform mobile application using React Native and TypeScript.

Web App and API

In a previous post I wrote about an Incredibly Simple Flat File CRUD API using PHP and made a simple video showing my implementation of it for a Tv Tracking Mobile app that had a React frontend to interact with it. That in itself was full stack but incredibly simple in that no database was required and rather than doing full user authentication I just used a single static access token. See a screenshot below:

View Only Mobile App

Building upon this idea of simplicity, I decided I wanted to build a simple mobile app that I could open up on my Android phone and quickly see if any shows were airing that day. I could have gone further and added CRUD to the app where I could add and delete shows, but I wanted to start out as simple as possible by simply reading the JSON file created by the Flat File CMS. See below for what I ended up creating, which is very simple but helped me learn more about the process to get a mobile up and running using React Native in TypeScript:

Dependencies and Emulation/Build Process

Some of the biggest complexities in getting the application up was simply understanding what dependencies were necessary and the emulation and build process. In particular, since I was using TypeScript I had to learn about how to properly compile from TypeScript -> Native Script, since typically people writing React Native apps are using plain old ES5 or ES6.

After getting the app to compile, I found it was very easy to get an iOS emulator up and running on my MacBook. Unfortunately, while it worked perfectly on iOS it took a lot additional work to get things emulated on Android. I also discovered that debugging errors is not nearly as straightforward when code is being compiled from TypeScript & React Native -> JS -> Native Code. Typically in creating a React or Angular app, you would have a map file from TypeScript to JS which allows you to see where the error is occurring in your original file, rather than the compiled code. As far as I know, something like that does not exist for compiling TypeScript all the way down to the native code.

Getting an APK

Beyond the emulation process there was another hurdle to jump in getting the application into a signed APK that I could install onto my Android phone. This included needing first build an unsigned APK and then generating a key to sign the APK so that I could install it on my phone. Additional hurdles would be needed to actually publish the application to the Play Store or the iOS store. Overall, while the app is very simple it also has provided very useful as I no longer need to open my computer to check on the status of shows that day via the TV Tracker. The only reason to open up the web app is if I want to add or remove shows, which will automatically be reflected on the mobile app since they use the same source of truth (the JSON file).