Ionic app & Django backend: Part 1 – The backend

Appropriately titled Ionic app & Django backend, this post is a tutorial with code samples on how to build a Django backend for a Ionic framework app. In this post, I will be talking about my latest Github repository(repo); IonicAppWithRestBackend and delve into details about what it is and the problem it aims to solve.

Introduction

The idea of this 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.

Note: Once I started writing this post, I realised that it would be a really long blog post, so I decided to split it into individual parts in hopes that it’s an easier read. In part 1, I will be talking about what the backend solution is and how to get it running.

Ionic app & Django backend: 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.

In case you are wondering what happened to that project I was working on with my associate… well after working on it for a year it came to a very abrupt and a sudden end! I will talk a bit about that later but for now, I will talk about the solution(code) in this repo.

Mobile app backend: Solution

Let’s start by examining the structure of this repo

• IonicAppWithRestBackend
  • Backend: A folder that can store backend solutions
    • Python/Django: I thought about starting simple with a Django backend
  • IonicApp: This has the Ionic app that you can run in your browser

More details on the backend

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 app series. Ok, now to run the backend,

Clone the repo

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

Navigate to the backend project directory

cd IonicAppWithRestBackend/backend/python_django/restBackend/

Note: if you are using Windows, you may want to change “/” to “” in the above command.

Once there you can run the backend server with the following command

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.

Conclusion and part 2