Django for mobile applications

Hassan Abid
Django for mobile
applications
Pycon Korea 2017

About me
• Working as full-stack software engineer at NexStreaming
• Started Python 3 years ago
• Started Web Programming 4 years ago
• Nowadays working with Javascript
• Hobbies are Cycling, Running and Hiking
• I speak Korean, English, Urdu and can read Arabic
2

Contents
• Why Django?
• Create simple project with Django
• Useful Libraries for your Django Project
• Django Rest-framework basics
• Contribute to Open source
• Deploying Django on Server
• Conclusion and Summary
3

What is Django?
Django was invented to meet fast-moving
newsroom deadlines, while satisfying the
tough requirements of experienced Web
developers.
6

Why Django ?
• Django has been around for more than 10 years now
• Easy to code, maintain and extend
• Easy to deploy
• plenty of open-source libraries
7

Django overview
Server
(nginx, apache)
Client
(chrome,
safari etc)
Django
WSGI
Request
Url Resolution
View
View
Model (db)
Template
Template
(html)
Response
Request / Response
Life Cycle
wsgi.py
Middleware
urls.py
Middleware
views.py
models.py
Middleware
Index.html
Middleware
8

Getting Started
• Perquisites
‣ Python 3.x
$ python3 -m venv myvenv
$ source myvenv/bin/activate
<myenv> $ pip install django
<myenv> $ django-admin startproject pyconlunch
9

Conﬁrm Project
$ tree pyconlunch/
pyconlunch/
!"" manage.py
#"" pyconlunch
!"" __init__.py
!"" settings.py
!"" urls.py
#"" wsgi.py
1 directory, 5 files
10

Creating ﬁrst app
$ python manage.py startapp food
!"" food
$   !"" __init__.py
$   !"" admin.py
$   !"" apps.py
$   !"" migrations
$   $   #"" __init__.py
$   !"" models.py
$   !"" tests.py
$   #"" views.py
11

Run server
$ python manage.py runserver
Performing system checks...
System check identified no issues (0 silenced).
You have 13 unapplied migration(s). Your project may not
work properly until you apply the migrations for app(s):
admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
Django version 1.11.4, using settings
'pyconlunch.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
12

Create url for home page 1/2
#pylunch/urls.py
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^', include(‘food.urls')),
]
14

Create url for home page 2/2
#food/urls.py
from django.conf.urls import include, url
from . import views
urlpatterns = [
url(r'', views.index, name='index'),
]
15

Create our ﬁrst view
#food/views.py
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return HttpResponse("Welcome to Pycon Kr 2017.")
16

Run server
17

Create our model
#food/models.py
from django.db import models
from django.contrib.auth.models import User
class Restaurant(models.Model):
name = models.CharField(max_length=200)
address = models.TextField()
photo = models.ImageField(upload_to="food/photos/",
null=True, blank=True)
menu = models.TextField()
tags = models.CharField(max_length=200)
pub_date = models.DateTimeField(auto_now_add=True)
writer = models.ForeignKey(User)
def __str__(self):
return self.name
18

Activating Model
# Go to settings.py and add food to INSTALLED_APPS
# There is a new way to add. So don't be confused
# Either food or 'food.apps.FoodConfig'
# Now makemigrations
$ pip install Pillow
$ python manage.py makemigrations
$ python manage.py migrate
19

Add sample data
# Now that we have a model and db. Let's add some data
# We can add data via shell or through admin interface
# Create a superuser
$ python manage.py createsuperuser
# Start server again
# visit http://127.0.0.1:8000/admin/ and log in!
20

One important thing to do!
#pyconlunch/settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
#pyconlunch/urls.py
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
21

Make app modiﬁable
#food/admin.py
from django.contrib import admin
from .models import Restaurant
admin.site.register(Restaurant)
#start server
 
#visit http://127.0.0.1/admin and login!
22

Our ﬁrst object! Yay!
Name
Address
Image
Menu
Tags and
users
23

Template
• Created a template using Material design light
• Code pen : https://codepen.io/hassanabidpk/
pen/dzNPBz
• Copy it to food/templates/food folder as
index.html
24

Render template with data!
#food/views.py
from django.shortcuts import render
from django.http import HttpResponse
from .models import Restaurant
def index(request):
res_list = Restaurant.objects.order_by('-pub_date')
context = {'res_list': res_list}
return render(request,'food/index.html', context)
25

Django template code
#food/templates/food/index.html
{% if rest_list %}
<div class="mdl-grid">
{% for rest in rest_list %}
<div>
{{ rest.name }}
.......
</div>
{% endfor %}
</div>
{% endif %}
26

There is one more thing!!!
Source
27

Write simple unit tests
#food/tests.py
from django.test import TestCase, Client
from food.models import Restaurant
from django.contrib.auth.models import User
class RestaurantTestCase(TestCase):
def setUp(self):
self.client = Client()
writer = User.objects.create_user('test_user',
'test@example.com', 'password1')
rest = Restaurant.objects.create(name="kfc", address="seoul",
menu="burger", tags="burger", writer=writer)
def test_restaurant_has_name(self):
rest = Restaurant.objects.get(name="kfc")
self.assertEqual(rest.name, "kfc")
def test_index_page(self):
response = self.client.get("/")
self.assertContains(response, "kfc")
28
Test Model
Test View

Run tests
$ python manage.py test
Creating test database for alias 'default'...
System check identified no issues (0 silenced).
..
-------------------------------------------------
---------------------
Ran 2 tests in 0.125s
OK
Destroying test database for alias 'default'...
29

Server
(nginx, apache)
Client
(chrome,
safari etc)
Django
WSGI
Request
Url Resolution
View
View
Model (db)
Template
Template
(html)
Response
Request / Response
Life Cycle
wsgi.py
Middleware
urls.py
Middleware
views.py
models.py
Middleware
Index.html
Middleware
31

Source Code
https://github.com/hassanabidpk/pyconkr2017
33
img_src

There is more!
Korean
English
34

Libraries
• Django rest framework
• django-allauth
• django-rest-auth
• imagekit
• anymail
35

Django rest framework
• Web browsable API
• Supports OAuth and OAuth2
• Serialization supports ORM and non-ORM Data
• easy to implement
• Github : https://github.com/encode/django-rest-
framework/ (8332 stars )
36

Rest Api for Pycon Lunch 1/2
#Create a serializer class in food/serializers.py
from rest_framework import serializers
from food.models import Restaurant
class RestaurantSerializer(serializers.ModelSerializer):
class Meta:
model = Restaurant
fields = ('id', 'name', ‘address', ’photo’,
’tags’, 'menu', 'pub_date')
37

Rest Api for Pycon Lunch 2/2
#food/urls.py
url(r'api/list', views.get_rest_list, name='get_rest_list'),
#food/views.py
from django.http import JsonResponse
from .serializers import RestaurantSerializer
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def get_rest_list(request):
rest_list = Restaurant.objects.order_by('-pub_date')
serializer = RestaurantSerializer(rest_list, many=True)
return JsonResponse(serializer.data, safe=False)
38

Json response
$ curl http://127.0.0.1:8000/api/list | json_pp
[{
"id": 1,
"name": "Burger King",
"address": "Coex Mall, Samseong Station, Seoul, South
KorearnMap link : maps.google.com",
"photo": "/media/food/photos/burger.jpeg",
"tags": "burger",
"menu": "1. Bulgogi Burgerrn2. Monster Burgerrn3. Chicken
Burger",
"pub_date": "2017-08-04T21:05:15.752209Z"
}]
39

Django all auth
• Library for authentication, registration, account
management and 3rd party social accounts
• Github : https://github.com/pennersr/django-allauth
(3115 stars )
40

Django rest auth
• Build on top of Django all-auth for rest api.
• Github : https://github.com/Tivix/django-rest-auth
(891 stars )
• Use Class Based Views and REST (json)
• Simpliﬁes the development life cycle for rest auth
41

Imagekit
• Django app for processing images based on Pillow
• Provides thumbnail of images
• Github : https://github.com/matthewwithanm/
django-imagekit (1203 stars )
42

Imagekit Code Sample
from django.db import models
from imagekit.models import ImageSpecField
from imagekit.processors import ResizeToFill
class Profile(models.Model):
avatar = models.ImageField(upload_to='avatars')
avatar_thumbnail = ImageSpecField(source='avatar',
processors=[ResizeToFill(100, 50)],
format='JPEG',
options={'quality': 60})
43

Django anymail
• Email backend and web hook for for Mail gun, mail jet etc.
• Build on top of Django built-in email
• Github : https://github.com/anymail/django-anymail (407
stars )
44

Contribute to open source
• You can start contributing to open source repositories
after using them in your project
• Read readme carefully and look for typos
• Check source code if you don’t understand some
features
• Try out all the features of the open source library
45

Pull Request (My Experience)
• Django imagekit had some problem while deploying
on Azure because of underlying Windows platform
(pilkit)
• https://github.com/matthewwithanm/pilkit/pull/26
46

Deployment
• The hard-thing-to-do
• There are tons of options available out there.
• Sometimes its hard to explain the difference between
local, dev and production site.
• Some of my favorite servers are Azure, PythonAnywhere
and Google App Engine
50

Deployment - PythonAnywhere
• Tailored for Python web projects such as Flask and
Django
• No special setup or conﬁg required
• mySQL database available
• Paid version supports 1 website with domain for 5 $ /
month
51

Deployment - Azure
• Windows based, but supports Django / Python web
project deployment
• Setup using a nice and interactive GUI
• Supports automatic deployment once you push code on
Github
• Sometimes, its not convenient to use power shell or
command prompt
52

Steps to do
• Create a new web app on Azure portal (portal.azure.com)
• Add web.conﬁg ptvs_virtualenv_proxy.py to your project from here
• Add environment variable for secret key in application setting
• Go to deployment options and complete GitHub setup for you repo
• Select advance tools -> Go. Start debug console
• Do db migration and create super user
• Visit site <web_app_name>.azurewebsites.net
54

Conclusion
• Django is well established Web framework
• Easy to start, develop and maintain
• Tons of open source libraries increases the
development life-cycle
• Simple to deploy
• A top candidate for your mobile app backend
55

https://www.hassanabid.com
@hassanabidpk
56

Links
• Sample code : https://github.com/hassanabidpk/pyconkr2017
• Sample app (reactnative): https://github.com/hassanabidpk/react_pyconlunch
• Django coding style: https://docs.djangoproject.com/en/1.11/internals/
contributing/writing-code/coding-style/
• Django Ofﬁcial Tutorial : https://docs.djangoproject.com/en/1.11/intro/tutorial01/
• Azure deployment blog : creating web apps with Django in Azure and Deploying
Django app to azure
57

Django for mobile applications

More Related Content

What's hot (20)

Similar to Django for mobile applications (20)

More from Hassan Abid (18)

Recently uploaded (20)

Django for mobile applications