Trong phần một mình đã giới thiệu sơ qua về kiến trúc trong Django. Để hiểu rõ hơn, chúng ta thử làm một demo nhỏ hiển thị giá crypto bằng Django.

Demo với website hiển thị giá Crypto

1. Cài đặt môi trường

Cài đặt python

Bước đầu tiền luôn cần thiết khi phát triển một ứng dụng là cài đặt môi trường.

Đầu tiên bạn cần cài python. Truy cập vào https://www.python.org/, tải gói python phù hợp với OS của bạn và cài đặt.

Sau khi python xong, bạn mở terminal lên và check version:

$ python
Python 3.6.5 :: Anaconda, Inc.
$

Bạn có thể check những models đã được cài đặt bằng lệnh pip freeze trong python

$ pip freeze
certifi==2019.3.9
chardet==3.0.4
Django==2.0.6
idna==2.8
pytz==2019.1
requests==2.22.0
urllib3==1.25.3
$

Tiếp theo cài tool virtualenv với lệnh sau:

$ pip install virtualenv

virtualenv là tool giúp tạo các dự án python.

Tạo thư mục project

$ mkdir django-projects
$ cd django-projects/

Tạo thư mục dự án tên django-projects rồi di chuyển vào thư mục vừa tạo.

Cài đặt môi trường cho project của bạn với lệnh sau:

$ virtualenv .

Sau khi chạy lệnh trên xong, trong thư mục django-project sẽ có một vài thư mục môi trường như sau:

├── django-project
    ├── bin
    ├── include
    └── lib

Start môi trường với lệnh:

$ . bin/activate

Bên cạnh đó bạn có thể shutdown môi trường với lệnh:

$ deactivate

Cài đặt Django

Nếu bạn muốn cài Django với phiên bản mới nhất, bạn run lệnh sau:

$ pip install django

Nếu bạn muốn cài Django với phiên bản đặc định, bạn run lệnh sau kèm theo version muốn cài:

$ pip install django==2.0.6

Cài đặt project

Tiếp đến bạn tạo project trong Django với lệnh sau:

$ django-admin.py startproject mysite

Sau thi tạo xong, bạn sẽ có thư mục như sau:

├── django-project
    ├── bin
    ├── include
    ├── lib
    └── mysite                  ← thư mục project mysite
        ├── db.sqlite3
        ├── manage.py
        └── mysite              ← thư mục app mysite
            ├── __init__.py
            ├── __pycache__
            │   ├── __init__.cpython-36.pyc
            │   ├── settings.cpython-36.pyc
            │   ├── urls.cpython-36.pyc
            │   └── wsgi.cpython-36.pyc
            ├── settings.py
            ├── urls.py
            └── wsgi.py

Trong project mysite, Django tự động tạo giúp bạn một ứng dụng website cơ bản với tên app trùng với tên project mysite. Như đã nói ở trên, Django không quá quan tâm đến tên project, nên bạn có thể đổi tên khác đễ không bị nhầm lẫn với tên ứng dụng. Ở đây mình để nguyên tên không đổi.

Tiếp theo bạn thử run project xem nhé

# di chuyển vào project mysite
$ cd mysite
$ python manage.py runserver

Mở trình duyệt lên và gõ http://localhost:8000/. Lúc này bạn sẽ thấy webiste cơ bản như sau:

Có vẻ mọi thứ đã chạy ổn. Nhưng bạn thử nhìn vào màn hình terminal, nếu bạn thấy warning You have 14 unapplied migration(s). , bạn cần cài thêm vài bước sau.
Warning báo như sau:

Bạn nhấn Ctr+C để thoát, sau đó chạy những lệnh sau:

# di chuyển vào project mysite
$ cd mysite

# chạy lệnh migrate
$ python manage.py migrate

# start lại project
$ python manage.py runserver

Lúc này khi start lại project, bạn sẽ không còn thấy thông báo như trên nữa.

Tạo ứng dụng Crypto

Di chuyển vào project mysite, tạo ứng dụng crypto với lệnh như sau:

# di chuyển vào project mysite
$ cd mysite
$ python manage.py startapp crypto

Sau khi tạo xong bạn sẽ có cấu trúc thư mục như sau:

├── django-project
    ├── bin
    ├── include
    ├── lib
    ├── crypto   ← ứng dụng crypto đã được tạo
    └── mysite

Cụ thể trong ứng dụng crypto, bạn sẽ có những thứ như sau:

├── crypto
    ├── __init__.py
    ├── __pycache__
    ├── migrations
    ├── admin.py
    ├── apps.py
    ├── models.py
    ├── tests.py
    └── views.py

Khai báo ứng dựng crypto trong settings.py

Sau khi vừa tạo một ứng dụng mới, bạn vào settings.py để khai báo với Django tên ứng dụng của bạn.

# django-projects/mysite/mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crypto',    # ← tên ứng dụng crypto được thêm vào
]

Khai báo đường dẫn urls

Hiện tại cứ gõ http://localhost:8000/ là Django đang đọc dữ liệu từ ứng dụng mysite để hiển thị lên. Làm sao để Django không chạy vào ứng dụng mysite nữa mà chạy vào ứng dụng crypto?

Trước tiên, bạn cận tạo file urls.py trong thư mục crypto như sau:

# django-projects/mysite/crypto/urls.py

from django.urls import path
from . import views

urlpatterns = [
    # Khi bạn khai báo đường dẫn với dấu nháy trống '',
    # nghĩa là sẽ nhận url root http://localhost:8000/
    path('', views.home, name='home'),
    
    # Nếu bạn có url http://localhost:8000/home
    # bạn sẽ khai báo như sau:
    # path('home', views.home, name='home'),
]

path('', views.home, name='home') cụ thể là như thế nào mình sẽ giải thích sau.

Tiếp đến bạn vào urls.py của ứng dụng mysite, khai báo thêm urls.py của crypto như sau:

# import thêm hàm include
from django.urls import include

urlpatterns = [
    ...
    # khai báo urls của crypto
    path('', include('crypto.urls'))
]

Trở lại với định nghĩa trong urls của crypto, path('', views.home, name='home') nghĩa là khi bạn gõ vào trình duyệt đường dẫn http://localhost:8000/, Django sẽ bắt đường dẫn này, dò tìm trong file urls rằng views nào sẽ nhận trách nhiệm xử lý tương ứng với request mà user đã yêu cầu. Trong trường hợp này, thì hàm home() trong views.py sẽ xử lý.

Định nghĩa views

Sau khi đã chỉ định hàm home() trong views.py sẽ xử lý nhiệm vụ hiển thị danh sách giá crypto, bạn mở file views.py và định nghĩa hàm home() như sau:

# django-projects/mysite/crypto/views.py

from django.shortcuts import render
import requests
import json

def home(request):

    # get crypto price Data
    price_request = requests.get("https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,XRP&tsyms=USD,EUR")
    price = json.loads(price_request.content)

    # truyền dữ liệu giá qua template để được hiển thị
    return render(request, 'home.html', {"price": price})

Ở phần lấy giá crypto, mình sử dụng dịch vụ https://min-api.cryptocompare.com để query. Trong bài viết này, mình sẽ không bàn về sử dụng APIs của dịch vụ trên. Nhìn chung thì cũng rất đơn giản, các bạn có thể tham khảo thêm trên website của họ.

Đầu tiên bạn cần import hai models là requests và json để sử dụng trong việc gửi và nhận dữ liệu trả về. Import models render để sử dụng trong việc chỉ định template html sẽ hiển thị và truyền biến dữ liệu giá qua template.

requests.get() hàm này sẽ tạo ra một request đến địa chỉ mà bạn chỉ định. Ở đây mình truyền vào địa chỉ apis lấy giá của các đồng BTC, XRP.
json.loads() hàm sẽ nhận dữ liệu prices trả về dạng json
Ở phần render, mình sẽ chỉ định tên template sẽ hiển thị là home.html.

home.html sẽ là file nào và khai báo ở đâu?

Định nghĩa templates

Bạn cần tạo một thư mục với tên templates trong thư mục crypto để khai báo các file html. Sau khi tạo thư mục templates, như khai báo ở trên, bạn tạo thêm file home.html. Lúc này cấu trúc thư mục sẽ như sau:

crypto
    │   ├── __init__.py
    │   ├── __pycache__
    │   ├── admin.py
    │   ├── apps.py
    │   ├── migrations
    │   ├── models.py
    │   ├── templates          ← thư mục templates vừa tạo
    │   │   ├── home.html      ← file home.html vừa tạo
    │   ├── tests.py
    │   ├── urls.py
    │   └── views.py

Sau khi tạo xong, bạn định nghĩa file home.html như sau:

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Price</th>
      <th scope="col">24h High</th>
      <th scope="col">24h Low</th>
      <th scope="col">Market Cap</th>
    </tr>
  </thead>
  <tbody>
    {% for key, value in price.DISPLAY.items %}
    <tr>
      <td>{{ key }}</td>
      <td>{{ value.USD.PRICE }}</td>
      <td>{{ value.USD.HIGHDAY }}</td>
      <td>{{ value.USD.LOWDAY }}</td>
      <td>{{ value.USD.MKTCAP }}</td>
    </tr>
    {% endfor %}
  </tbody>
  </table>

Với cấu trúc json trong price mà Apis crypto trả về, ta sử dụng price.DISPLAY.items để truy vấn đến danh sách giá của crypto.

price.DISPLAY.items sẽ là một danh sách, nên ta sử dụng cấu trúc lặp for để hiển thị từng giá của cryto.

Bây giờ bạn thử refresh lại trình duyệt và sẽ hiển thị như sau:

Ở đây table mình hiển thị trong đẹp mắt là do mình có sử dụng Bootstrap. Nhưng về cơ bản là list price sẽ được loop và show ra như thế.

Dưới đây là website mình đã demo thử với Django. Các bạn có thể tham khảo thêm trong code của mình.

Github: https://github.com/lando110390/django_get_price_crypto

Tóm lại

Django là một framework viết bằng python và hầu như để lập trình website. Ngoài các framework thịnh hành trên thị trường hiện nay được viết bằng PHP thì Django cũng là một lựa chọn cho các fan python khi muốn tạo website mà mà không cần phải học thêm ngôn ngữ khác. Về phần template thì các cấu trúc, lệnh, hàm khác giống với các template hiện nay, nên việc tiếp cận cũng không mấy khó khăn.

Tham khảo

https://djangobook.com/