Plumbing for (some) fun
July 23, 2020
Welcome to part two of my series comparing and contrasting the many ways you can develop a mobile app. (Here’s part one if you missed it.)
As a reminder, I’m developing an app called Ok Car – a classified ad app for buying and selling used cars.
In this post, we'll spend some time reviewing the wireframe I put together in part one. We'll also setup the "plumbing" necessary to allow us to just focus on the mobile application itself in future installments.
Besides a few typos, the wireframe survived review mostly intact. Reviewers noted we probably should have color as a search criteria (being red-green color blind myself I have a good excuse for missing that). The create listing screen was missing some fields and I needed to handle a few more states (like before a listing is approved and after a car is sold). Taking all those changes into account we have a version 2 of the wireframe here.
Now on to the plumbing chores...
One piece of plumbing is a place to share the code I’m developing. Unsurprisingly I’ll use Github for that. What's that you say? It’s a dangerous monoculture controlled by a faceless, nameless Big Corp? Probably true but let's fight that battle some other time. Here’s a link to the Git repository we’ll use:
https://github.com/jamesdterry/OkCar
That was simple enough!
Plumbing task two is a little more work, but really not all that bad. As mentioned in part one, we'll use Parse as our backend. To make an easy to replicate environment we'll run Parse using Docker. If you’ve been living under a rock recently, Docker lets you run "containers" – basically minimal Linux virtual machines. We can set up a container and run it on our development machine and then run the same container in a production server. They take a lot of the pain out of configuring services. Let’s dive right in!
(Well, before we jump, I should also mention there are many other ways to run Parse – see https://github.com/parse-community/parse-server/wiki#community-links in case one of the other paths works better for you.)
First, you'll need to install Docker on your development machine – it runs on Mac OS, Windows and, of course, Linux itself. Just follow the appropriate instructions on the Docker site for your OS.
We'll be using Node (the Javascript development ecosystem) to run a dashboard interface for Parse, so you'll also need to have the Node Package Manager installed. Again, visit a site owned by our favorite formerly evil Big Corp: https://www.npmjs.com/. Follow the instructions to install the latest stable npm on your OS, then use nvm to install Node and npm themselves. (If you won’t be making any changes to Parse using the dashboard, this can be skipped – I’ll provide a way to setup the Parse database without using the dashboard.)
Step three is checking out the Parse Server code and building the Docker container for the server. At your handy command line, in a directory of your choosing, run the following:
git clone https://github.com/parse-community/parse-server.git
cd parse-server
docker build --tag parse-server .
This will build a container using the Dockerfile in this folder and tag it locally on your development machine with the name "parse-server".
Docker has a huge universe of prebuilt containers and we'll use one for the database. Parse stores data
in Mongo (a general purpose, document-based database). Docker can also set up virtual disks (called volumes) attached to containers. We'll set one up for
backing up and restoring our database. We'll start up a Mongo container, with the backup volume linked to
the folder /data_con:.
docker run -v mydb_backup:/data_con --name my-mongo -d mongo
Next the Parse server: first, each instance of Parse has some settings we need to choose, namely an APPLICATION_ID and a MASTER_KEY. The application id doesn’t need to be a secret, but the master key should be – make sure you don't check it into git or otherwise let it out, for our example we'll use:
APPLICATION_ID = OkCar
MASTER_KEY = SomeLongKeyHere
SomeLongKeyHere is not the real master key ;-) I recommend random.org for choosing a good one.
The command to get the Parse server running:
docker run --name my-parse-server -v cloud-code-vol:/parse-server/cloud -v config-vol:/parse-server/config -p 1337:1337 --link my-mongo:mongo -d parse-server --appId OkCar --masterKey SomeLongKeyHere --databaseURI mongodb://mongo/test
Since we're trying to learn something here, let’s look at each argument:
A Docker flag, this is an arbitrary name we give the running container – it could be anything:
--name my-parse-server
A Docker flag creating a volume to store Parse cloud code (which we aren’t using to start).
-v cloud-code-vol:/parse-server/cloud
A Docker flag creating a volume to store the Parse config:
-v config-vol:/parse-server/config
A Docker flag routing the container port to our development machine's port:
-p 1337:1337
A Docker flag that allows the Parse server to talk directly to the Mongo database:
--link my-mongo:mongo
A Docker flag indicating which Container to run:
-d parse-server
A Parse argument, the App Id to use:
--appId OkCar
A Parse argument, the master key to use:
--masterKey SomeLongKeyHere
A Parse argument, the link to the database server to use:
--databaseURI mongodb://mongo/test
After actually running those commands you’ll have two containers running, verify everything went as planned with docker ps – here's the first few columns I see:
CONTAINER ID IMAGE COMMAND CREATED NAMES
656328ce49af parse-server "node ./bin/parse-se..." 2 days ago my-parse-server
da005b79436c mongo "docker-entrypoint.s..." 2 days ago my-mongo
Once we have Parse running we can install and start up the dashboard: (Note that it will stay running and tie up you command window, you'll want to open a new one for other the commands later on or add a & to the end of the command to run it in the background, though then you'll need to use kill to stop it.)
npm install -g parse-dashboard
parse-dashboard --dev --appId OkCar --masterKey yIRZJVySaAIFt1Ht997C --serverURL "http://localhost:1337/parse" --appName OkCar
We can then visit http://localhost:4040 in a browser and we’re ready to setup some models for Ok Car. Parse uses the term "class" to roughly correspond to a database table and “object” to roughly match a row in a SQL database. As befits a sample app, we’ll be keeping this straightforward. Parse starts with a predefined User class. We’ll add three more classes. First, a Car class to track cars for sale. We'll also want a Make class so the list of makes and models isn’t hard coded in the app. Finally, a Report class for keeping track of listings reported for bad behavior. The Parse dashboard provides a nice GUI for adding the classes and columns and even setting the security for each. I'll go into the details of the models in the next post.
For now you can restore a backup of the schema by using some Docker commands and a backup copy of the Mongo database stored in our Git repository. First, checkout the Git repository I linked to above and go to that directory at you command prompt.
docker cp okcar.archive my-mongo:/data_con/.
docker exec -ti my-mongo sh
mongorestore --drop --archive=/data_con/okcar.archive
exit
Those, finally, are enough chores for one post – next up we'll start on our Native iOS app. The real fun! Don't forget to sign up for my mailing list to be notified!