How to build a REST backend for mobile app

In this post, I will delve deeper into how to build a REST backend for a mobile app.  Using my github repository IonicAppWithRestBackend to delve into details about what it is and the problem it aims to solve.

Introduction

The idea of the aforementioned repo is to provide code samples for both the backend and front-end for an Ionic app that communicates with a RESTful backend. The aim is to bring many disparate aspects of building a solution like this (hybrid app that talks to a REST backend) and to be able to see most of them as one complete solution. Also, a solution such as this ensures you can test your Ionic app locally during development. Still not clear? read on to find out what I mean.

Motivation

In 2014, I started working on a project with someone which involved building a mobile app that fetches/sends data to a REST backend. My associate did not have a very technical background…I mean she knew a lot more than people from her academic background would but she wasn’t a programmer. Therefore I wanted to  build a solution which would involve us having fewer meetings, during the development stage. I wanted a solution such that she can run a REST based backend on a server on her machine, then run the app using Ionic serve and test the app.

In my quest to build something like this, I managed to find a solution to all my problems. However a solution like this is composed of several disparate(different) components as a result of which the I needed was scattered across a bunch of different places. Once I found all the information I needed to build this solution, I thought to myself “hmm…it would have helped me if all of it was in one place”….and that is the story of how I thought about creating this repo and sharing this solution.

How to build REST backend

Let’s start by examining the structure of this repo

Ok great, so how do I run the backend solution?

The backend has been written using Python/Django and should you want to know more about Django, you can read it here or if you want to know how to write Django web apps, read the excellent tutorial series Writing your first Django appseries. Ok, now to run the backend,

Clone the repo

git clone https://github.com/cptdanko/IonicAppWithRestBackend

cd IonicAppWithRestBackend/backend/python_django/restBackend/

python manage.py runserver

Once you execute that command, expect to see something like this

Great! The backend solution is now running at localhost. In case you are wondering about the Web server that is running our backend solution? Django comes with a lightweight Web server written purely in Python, if you want to know more about it, you can read more about it here.

This is a very simple REST backend which exposes a Django application titled abstractApp which has only 2 REST endpoints that return some data as JSON.

Front-end

Now, I will talk more about the front-end side of things. Ahh, I have a background in web development, hence I call this front-end, but that’s not the most accurate thing to say in these modern times. So the right way to say this is, I will talk about the Ionic app in this Github repository(IonicAppWithRestBackend) in more details in this post.

So what have we done so far?

We got to the point of running our backend on the web server that ships with Django. To refresh your memory, this is how we got the backend server running,

git clone https://github.com/cptdanko/IonicAppWithRestBackend

cd IonicAppWithRestBackend/backend/python_django/restBackend/

python manage.py runserver

So how do we run the Ionic app?

cd IonicAppWithRestBackend/ionicApp/

ionic serve

What is the Ionic app in this repo?

The Ionic app is a simple sidemenu app which fetches some data from the backend and displays it . The screenshot on the right shows what the app looks like.

When you run the app, it fetches some data(names of 2 smugglers) from the

http://localhost:8000/smugglers/

 endpoint from our backend. Data is fetched using the $http service in AngularJS. In addition to the official AngularJS docs, you can also look at the tutorial: Integrating a Backend Service with AngualrJS on Learn Ionic.

If you click on Hondo or Han the app will use the id of the smuggler to fetch more details about him from this endpoint

Any more problems to solve in this solution?

Since both our Ionic app and the RESTful backend are running on localserver, I ran into the CORS issue when I first started working on this. Thankfully this blog post on the Ionic blog provides a solution to this owing to which the ionic.project file for the Ionic app in this repo(IonicAppWithRestBackend) looks like this,

"proxies": [
    {
        "path":"/api/",
        "proxyUrl": "http://localhost:8000/"
    }
]

Now, if you look at the code in HomeCtrl.js in this repo, the urls we pass to the $http service look something like

/api/smugglers

or

‘/api/smuggler/’+smugler.id+’/’;

That combined with the proxy that we have in our ionic.project file means that every time our app is calling a url which has api in it’s path, the api part of the url will be replaced with
http://localhost:8000/ 

 so when we call(invoke)

/api/smugglers/ 

thanks to our proxy, the actual url invoked will look like this

http://localhost:8000/smugglers/

The fate of the project with my associate

To avoid any distractions from the actual content of this post, I was saving this for the end. So the project for which I had to build a solution like this: after a year of working on it, it came to a very sudden and somewhat quick finish. The best way to summarise it would be.. it was like a girl breaking up with a guy over a text message. So there was no talking about it or any warnings prior to this, the only time she mentioned anything was when she was ending it. It was a little unprofessional but, things aren’t always very professional in the startup world anyway, so it’s all part of the job.