Programming on your phone

A whole new meaning to mobile developer

What? They don’t have computers?! How am I supposed to teach mobile app development if the students don’t have computers?

When asked if I would teach Mobile App Development in Spring 2021 at Mongolia International University, I gladly agreed. This would be a great opportunity to systematically present Flutter, a modern cross-platform UI framework for making native apps, one that I greatly prefer over plain Android and iOS development.

A new perspective

While I promote those who are doing good work like donating computers, I’m primarily writing this article for the other side, for those people whose only computer is their cell phone. The vast majority of them can’t wait around for someone to give them a laptop.

Teach the students to program on their phones.

That sounds crazy, I know. Nobody does that seriously, right? Maybe for fun or practice, but not to actually build a production app.

Back in the days

Think back to how people programmed back in the early days. I first heard about this from Uncle Bob (Robert Martin) who talks about how people used to write their programs by hand on coding form like this one:

Fortran coding form
Fortran punched card
Punched card program deck

Requirements

There are two main requirements for enabling people to develop on their phones. The first is that the entire process needs to be possible to do completely on the developer’s device. Second, it must be affordable. People who can’t afford to buy a computer yet also can’t afford to pay high prices for online services.

Things that didn’t quite work

In exploring how to write code on one’s phone, I considered several different options. The first that came to mind was DartPad, which allows you to write and run Dart programs and even simple Flutter apps online. This does make it a good tool for learning and testing things in isolation. However, DartPad doesn’t support multiple files or importing third-party libraries, so it’s not really a solution to make a real app that you’ll publish to an app store.

The plan

These are one possible set of steps that will allow you to publish a mobile app from your phone:

  1. Set up a remote Linux server
  2. Install command-line-based Flutter and Dart on the server
  3. Develope a Flutter project
  4. Sync code between the phone and the server using GitHub
  5. Run unit and widget tests on the server
  6. Build a Flutter web app for UI/UX testing
  7. Use an online service to build release versions for Android or iOS
  8. Submit the app to the app store

Installing a terminal app

You’re going to be doing most of the testing on a Linux server, so you need a way to access the server from the command line.

Termux app for Android
pwd
/data/data/com.termux/files/home
pkg install openssh

Getting up a remote Linux server

For this step the key requirement is finding the cheapest server that will run Dart and Flutter. Since you’ll only be working with the command line version of Flutter and you don’t need to run a heavy IDE or emulator, a 1GB virtual private server (VPS) will be fine.

Installing Flutter and Dart

Once you have your server, you can log in from Termux (or whatever ssh client you are using on your phone).

ssh root@107.173.555.555

Downloading Flutter

Go to the Linux Install page for Flutter in your phone browser. Then long click the download button so that you can copy the current stable release download link.

wget https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_1.22.6-stable.tar.xz
tar xf flutter_linux_1.22.6-stable.tar.xz
rm flutter_linux_1.22.6-stable.tar.xz
  • You can also experiment with different keyboards that make command line and code input easier.
  • If you stay logged in to the server for a long time, the terminal might become unresponsive, in which case you’ll have to force kill the process in Termux. To do that, long press the screen, choose More… and then Kill process.

Adding Flutter to your path

In order to run Flutter and Dart commands from the command line, you need to add Flutter (which includes Dart) to your path. The place you do this on different Linux distributions is different.

ls -al
nano .bashrc
export PATH="$PATH:$HOME/flutter/bin"
source .bashrc

Finishing up the install

Now run:

flutter --version
Error: Unable or find git in your PATH
Missing "curl" tool. Unable to download Dart SDK
Missing "unzip" tool. Unable to extract Dart SDK
sudo apt-get install git
sudo atp-get install curl
sudo apt-get install unzip
Flutter 1.22.6 • channel stable
...
Tools • Dart 2.10.4

Developing a Flutter project

You can do anything Flutter related on the command line. In fact, the IDEs like Android Studio and VS Code all use the Flutter command line interface (CLI) internally.

Creating a new project

Go to whatever directory you want to put your projects in. Then create a new Flutter project like this:

flutter create my_project

Editing files

You can of course use nano or vi to edit the project files and do your coding. If you go that route I’d use vi (or vim). It has a steep learning curve but once you learn the shortcuts it’s pretty powerful. (That’s what people say anyway — I wouldn’t know.)

Acode app for Android

Syncing changes with git

In order to write code on your phone and run it on the server, you need to sync the changes between them. To do that you can use git with GitHub as the central repository. After you finish making an edit on your phone, you’ll push the changes to GitHub. Then before you run the code on the server, you’ll pull the updates from GitHub.

  1. Initialize your project with git on the server.
  2. Connect your server’s git project to the GitHub repository.
  3. Push your code from the server to GitHub.
  4. Install git on your phone. You can do this in Termux with pkg install git.
  5. Clone the GitHub repository on your phone. Don’t do it in the home folder of Termux, otherwise your code editing app won’t have access to it. Instead, enable shared storage in Termux with with termux-setup-storage and then cd ~/shared to find a good clone location.
  6. Make edits to the code on your phone. You can use Acode or whatever app you like for that.
  7. Add, commit, and then push those changes to GitHub from the phone.
  8. Switch back to the server and pull the changes from GitHub.

Debugging a Flutter project

Make sure you’re in the root folder of your project in the server terminal. Run the following command:

flutter analyze
Analyzing my_project...No issues found! (ran in 9.1s)

Running Dart code with tests

Eventually you’re going to run the Flutter web version of your app to see how the whole app is working. However, you can check individual chunks of your code by running tests. One great thing about testing Flutter apps is that the tests don’t rerquire a graphical interface. That means that in addition to testing pure Dart logic, you can also test UI widgets — all from the command line.

flutter test
00:34 +1: All tests passed!

Publishing a Flutter web app

The fastest way to get your whole app running and see what the UI actually looks like is to build the web version of your Flutter app.

Adding web support to the app

At the time of writing Flutter web is still in beta, so you’ll need to run the following commands to enable web builds:

flutter channel beta
flutter upgrade
flutter config --enable-web
flutter create .
flutter build web

Serving the web app

You already have a server, so you might as well use it as a web server, too. To do that you can use Nginx. There’s a longer explanation of how to set Nginx up here, but I’ll include the minimal instructions below:

sudo apt-get install nginx
sudo ufw allow 'Nginx HTTP'
Screenshot of default Nginx setup
sudo nano /etc/nginx/sites-available/my_project
server {
listen 80;
root /home/suragch/my_project/build/web;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}
sudo rm /etc/nginx/sites-enabled/default
sudo ln -s /etc/nginx/sites-available/my_project /etc/nginx/sites-enabled
sudo systemctl restart nginx

Publishing your app

I think I might have trouble getting the default counter app published to Google Play or the App Store. So to test this step I’m going to use an app I made previously for an article I wrote at raywenderlich.com. Normally I couldn’t use that content for an educational article like this one, but Ray kindly gave me special permission to use the app as an example here. I won’t be describing how to make the app itself, so check out the article I linked to above if you want to know how it was made.

Moola X app running on the web

Where to publish

Publishing on Google Play requires a $25 USD one-time fee while publishing on the Apple App Store requires a yearly $99 USD fee. That makes Google Play the clear winner as the first publishing target.

Getting set up with Codemagic

Codemagic, if you are reading this, consider asking someone to write some step-by-step tutorials that go through exactly what a new user needs to do to get an app published. Leave no step out. Have one tutorial for publishing a Flutter Android app, another tutorial for publishing a Flutter iOS app, and so on for all of the options you offer. You do have a lot of good documentation and I like the articles on your blog, but it was pretty intimidating getting set up for the first time.

  • In Codemagic add the git repository for your app
  • You’ll need to create a keystore to sign your Android app. To do that you need to use keytool from the Java Development Kit (JDK) framework. So on your server install Java. There are good directions here. Then generate the keystore file by using keytool like this. Don’t forget your password, don’t lose your keystore file, and don’t commit the file to GitHub. If you loose the file or forget your password you won’t be able to update your app in the future.
  • Download the keystore to your phone. You can use scp for that. Here’s an example of what that might look like. Your details will be different, of course.
scp suragch@107.173.555.555:/home/suragch/moolax_keystore.jks .
  • In Codemagic upload the keystore file and input the password and alias information. You should also make sure that the Android settings are for building a release. I also selected AAB and universal APK as the build outputs. The AAB is what you’ll put on Google Play, but the APK you can install directly on your phone.
  • Make sure all your local changes are pushed to GitHub (whether you made them on your phone or on the server). Then click Start build in Codemagic.
Moola X running as an Android app

Publishing to Google Play

To publish on Google Play you need to sign up for a developer account and log in to the Google Play Console. The are directions here. As I mentioned earlier, the fee is $25 USD. Students or developers who can’t afford this could team up and share an account with someone else.

Screenshots from filling out the required Google Play information

Concluding thoughts

Programming mobile apps on your phone is no trivial task. However, a sufficiently motivated individual is fully capable of accomplishing it. The required process will even help the “mobile” developer learn skills that a “laptop” developer might miss, skills like server administration, source control with git, unit testing, and CI/CD workflows.

A Flutter and Dart developer. Follow me on Twitter @suragch1 to get updates of new articles.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store