Design and setup Django project for a Ionic application, Part 1/3

DAY 1 - September 2018

Before designing or setting up our project, we need to define what will be the application, and which features will be available.
As i said previously, we are going to develop a real application with concrete use-cases, so we will develop a kind of Find a <something> application, where <something> could be anything you want, depending on your business, such as : Restaurant, Doctor, Farmacy or even Bicycles, Bikes...
For instance something like this template

So at least, we will have the following screens in our app:

  • Login / Forgotten Password screens
  • Register screen
  • Display list of object
  • Display Google maps
  • Detail page of an object
  • Integrate Paypal payment
  • History of transactions
  • Account page
  • About us page


And because we need to define what is the <something>, we will develop a very common use case these days: Find a Bike application.
Users will be able to look around them thru a Google map or a list mode, in which we will display bikes around them. Then our users will be able to rent a bike (we will integrate payments in our app), do a trip and free the bike once done.
Ok that's enough to begin the tutorial. We will add more feature later. So now that we know what will be build, it's time to move on to the next section.

Designing a database model for our ionic application


Our two main entities for this application, will be of course the User entity and the Bike entity.
I didn't mention it before but we will use PostgreSQL as our database engine.

User model:

Column Type Description
id UUID Primary key
email String Our user email
username String The username of our user
facebookId String The user facebook identifier (used when login with Facebook)
android Boolean Is the user using an android device
iOS Boolean Is the user using an iOS device
acceptPush Boolean Did the user agreed to receive push on this device
pushToken String The token used to send push notifications to the user
valid Boolean We will use this field to activate or deactive a user account


Bike model:

Column Type Description
id UUID Primary key
reference String An internal reference of our bike
qrCode String The QRCode of the bike (to unlock it)
picture String A picture for our bike
location Pointfield A specific Django field for storing the location (latitude and longitude) of the bike
available Boolean Is the bike available
valid Boolean We will use this field to activate or deactive a bike in the system


These are the minimal fields we will use to begin our project. We will certainly add other fields later as we will progress in the tutorial.
When designing a mobile application and it's backend, it is highly recommended to design the full database model (a.k.a all entities) before starting developing the application. For our concern, there will be entities for storing relationship between users and bikes (rent, trip), for payment... But for the beginning of this tutorial, we will begin with only User and Bike database tables.

Setting up Django backend environment for our ionic application

All source code could be find on my Github repository

First of all, we will create our repositories (Backend,Frontend) which will contain our backend code (the Django part) and our frontend code (the IONIC application). 

 mkdir Backend;
mkdir Frontend;

Then inside our Backend directory, we will setup our virtual environment for our Django project. We will use python 3 for developing.

 
virtualenv -p python3 djangobikeenv
source djangobikeenv/bin/activate

And that's all. You have now a virtual environment called djangobikeenv which has been activated and in which we will install our Django libraries.