Ionic 3 : Create a cross platform mobile application with Python Django and Django Rest Framework (DRF) -- Words (1207)

Django Ionic
Ionic 3 with Django backend and DRF

In this two parts tutorial ,we are going to recreate our previous Ionic 3 product inventory manager application ,which used a local SQLite database ,to use a Python Django backend .

The application we'll be creating in this tutorial uses Ionic 3 as a frontend ,Django as a backend and Django Rest Framework to create Rest API which will be consumed by Ionic .

It's a simple product inventory management application which shows you many Django concepts such as

How to create a Django project from scratch .

How to create a Django app .

How to model and create database models .

How to migrate your database .

How to generate the Admin web interface to create ,update ,delete and view database records .

How to create a super user .

How to generate a browsable and documented Rest API with Django Rest Framework .

What is Django ?


Django is a Python based web framework which encourages rapid development which is used by many web developers create web applications .It has a clean and pragmatic design which can help ypu create complete prototypes in a hours .Django packages or apps for organization and reuse .You can either create your own apps or use community created apps to sove common web development problems without reinventing the wheel .

Django has a great and helpful community ,a very good documentation and a a lot of tutorials on the web which can help you pickup easily the framework .

What is Django Rest Framework (DRF) ?


Django Rest Framework or DRF is a Django package which allows you to build or generate a full browsable and documented Rest API from your models .Thanks to DRF you can easily get an API which allows you create , update ,delete and view database records from different meduims such as mobile apps or web apps .

What is Ionic ?


Ionic is a hybrid mobile framework to create cross platform mobile apps for Android ,iOS and Universal Windows
Platform (UWP) using web technologies such as HTML ,CSS and JavaScript .Ionic 3 (The latest version of Ionic when writing this tutorial ) is based on Cordova and Angular 4 .

Install Django and Create a project


Head over your terminal or command prompt then create a new virtual environment and activate it :

virtualenv env 
source env/bin/activate 

Install the latest version of Django :

pip install django 

Start a new Django project :

django-admin startproject ProductInventoryManager 

Create an app

cd ProductInventoryManager
python manage.py startapp core 

Go to your project settings.py and add your project to the list of installed apps

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'core'
]

Create your database and run a local development server :

python manage.py migrate 
python manage.py runserver 

A SQLite database will be created on your current directory .You can change the database to mySql or PostgresSQL anytime but for now lets use to a SQLite database .

A local server will be launched ,you can visit your web app at http://localhost:8200

Project requirements and database modeling


The next step is to create database models for our backend but lets first talk about our project requirements

Our product inventory system has products ,each product belongs to a family and has a location

Users need to be able to create products ,families ,locations and transactions

Users need to be able to edit products ,families ,locations and transactions

Users need to be able to delete products ,families ,locations and transactions

Users need to be able to list products ,families ,locations and transactions

Users can create products with an initial Quantity then update this Quantity using Transactions .

Now lets create our database models

Open core/models.py file and add these models :

A Product has a bunch of properties such as : Title ,Description ,Unit Price ,SKU (Stock Keeping Unit) ,Barcode (ISBN, UPC etc.) ,Quantity ,minQuantity ,Unit .

A Product belongs to a Family and has a location

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.db import models


class Product(models.Model):

    sku = models.CharField(max_length=13,help_text="Enter Product Stock Keeping Unit")
    barcode = models.CharField(max_length=13,help_text="Enter Product Barcode (ISBN, UPC ...)")

    title = models.CharField(max_length=200, help_text="Enter Product Title")
    description = models.TextField(help_text="Enter Product Description")

    unitCost = models.FloatField(help_text="Enter Product Unit Cost")
    unit = models.CharField(max_length=10,help_text="Enter Product Unit ")

    quantity = models.FloatField(help_text="Enter Product Quantity")
    minQuantity = models.FloatField(help_text="Enter Product Min Quantity")

    family = models.ForeignKey('Family')
    location = models.ForeignKey('Location')

    def get_absolute_url(self):
        """
        Returns the url to access a particular instance of Product.
        """
        return reverse('product-detail-view', args=[str(self.id)])

    def __str__(self):

        return self.title

A Family has a : Reference,Title ,Description ,Unit ,minQuantity .

class Family(models.Model):

    reference = models.CharField(max_length=13, help_text="Enter Family Reference")
    title = models.CharField(max_length=200, help_text="Enter Family Title")
    description = models.TextField(help_text="Enter Family Description")

    unit = models.CharField(max_length=10,help_text="Enter Family Unit ")

    minQuantity = models.FloatField(help_text="Enter Family Min Quantity")

    def get_absolute_url(self):
        """
        Returns the url to access a particular instance of Family.
        """
        return reverse('family-detail-view', args=[str(self.id)])

    def __str__(self):

        return self.title

A Location has a : Reference ,Title , Description .

class Location(models.Model):

    reference = models.CharField(max_length=20, help_text="Enter Location Reference")
    title = models.CharField(max_length=200, help_text="Enter Location Title")
    description = models.TextField(help_text="Enter Location Description")

    def get_absolute_url(self):
        """
        Returns the url to access a particular instance of Location.
        """
        return reverse('family-detail-view', args=[str(self.id)])

    def __str__(self):

        return self.title

A Transaction has a : Date , Quantity , Unit Cost , Reason (New Stock - Usable Return - Unusable Return ) ,UPC (Universal Product Code ) ,Comment .

class Transaction(models.Model):

    sku = models.CharField(max_length=13,help_text="Enter Product Stock Keeping Unit")
    barcode = models.CharField(max_length=13,help_text="Enter Product Barcode (ISBN, UPC ...)")

    comment = models.TextField(help_text="Enter Product Stock Keeping Unit")

    unitCost = models.FloatField(help_text="Enter Product Unit Cost")

    quantity = models.FloatField(help_text="Enter Product Quantity")

    product = models.ForeignKey('Product')

    date = models.DateField(null=True, blank=True)

    REASONS = (
        ('ns', 'New Stock'),
        ('ur', 'Usable Return'),
        ('nr', 'Unusable Return'),
    )


    reason = models.CharField(max_length=2, choices=REASONS, blank=True, default='ns', help_text='Reason for transaction')

    def get_absolute_url(self):
        """
        Returns the url to access a particular instance of Product.
        """
        return reverse('transaction-detail-view', args=[str(self.id)])

    def __str__(self):

        return 'Transaction :  %d' % (self.id)

Registering models in admin interface


The Django admin can use your models to auto create a web interface which allows you to add ,delete ,update and view records .

To tell django about our newly created models .Open core/admin.py file the copy and paste

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.contrib import admin

from .models import Product ,Family ,Location ,Transaction  

admin.site.register(Product)
admin.site.register(Family)
admin.site.register(Location)
admin.site.register(Transaction)

Now to acess the admin web interface we need to create a super user so head over to your terminal an run

python manage.py createsuperuser 

Enter the credentials you want to use and hit Enter .

Next go to http://localhost:8200/admin then enter the credentials you just created .

You can now use the admin interface to create records for different models such as Products ,Families , Locations and Transactions .




mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.