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.
|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|
|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.