Xây Dựng Web App Python Trên Điện Thoại Android Với Pydroid3

Chào các bạn, khỏe không? Mình 18 tuổi, backend developer và aspiring Machine Learning Engineer. Bài này viết về cách build web app trên điện thoại dùng Python 😁. Let's dive in.

Yêu Cầu

Đầu tiên cần Android phone, ít nhất version 6.0+. Nhưng nếu nói đó là tất cả cần? Quá tốt để tin.

Tiếp theo cài mobile app tên Pydroid3.

Như thấy, Pydroid3 cho viết Python trên điện thoại, cài đặt ngay.

Tiếp theo cài Django. Nếu không quen Django, check Django docs.

Cài Django: mở side navigation Pydroid3, chọn Terminal:

Click vào, thấy giao diện:

Gõ lệnh:

pip install django

Kết quả như dưới. Mình nhận "requirements satisfied" vì đã cài.

Cài thành công, confirm: terminal gõ django-admin Enter.

Kết quả:

Đã cài thành công.

Xây Dựng Project

Bắt đầu build project. Mở terminal, gõ:

django-admin startproject myapp

Tạo Django application myapp ở root folder.

Change directory: cd myapp, gõ python manage.py runserver. Kết quả:

Server started. Test browser: 127.0.0.1:8000.

Boom! Django setup thành công.

Tiếp tạo Django app. Trong Django, project folder là root, app là application itself.

Tạo Django app: đảm bảo vẫn trong directory, gõ python manage.py startapp todo. Tạo To-do app trong myapp project:

Trong folder todo thấy:

Xem kỹ files khi bắt đầu làm việc.

Cấu Hình Ứng Dụng

Cho app được serve bởi Django project. Mở settings.py trong folder myapp, thêm 'todo' vào installed apps:

Mở urls.py thêm code:

from django.urls import path, include path('', include('todo.urls'))

Đã thêm include từ django.urls import path. Dưới path admin, tạo empty path trỏ/include urls.py trong todo app directory.

Tạo file mới trong todo directory tên urls.py, thêm code:

from django.urls import path from . import views urlpatterns = [ path('', views.index, name='home') ]

Import path từ Django.urls, import views từ root. Tạo urlpatterns với root link. views.index trỏ đến function index trong views.py.

Vào views.py thêm code.

Đầu import HttpResponse:

from django.http import HttpResponse

Thêm dưới:

def index(request): return HttpResponse('Hello')

Tạo function index gọi trong urls.py, truyền request parameter, return HttpResponse.

Trước HttpResponse hoạt động, import từ django.http import HttpResponse. Test: terminal cd myapp, python manage.py runserver.

Response returned. Tiếp load template HTML files.

Load HTML: tạo folder trong todo directory theo thứ tự:

todo/templates/todo

Trong todo, tạo folder templates. Trong đó tạo folder todo.

Tạo HTML file index.html, viết:

<h1>Hello world</h1>

Load nó, sửa views.py:

def index(request): return render(request, 'todo/index.html')

Thay vì response, return render view cho phép render HTML template. Save, terminal cd myapp, run. Kết quả:

Hoạt động tốt - next step.

Setup Static Files

Setup static files: tạo folder mới todo directory tên static. Trong đó tạo folder todo.

Cấu trúc: /static/todo/.

Trong todo directory, tạo file main.css. Viết styling:

body { background-color: red; }

Save.

Sửa index.html:

{% load static %} <!Doctype html> <html> <head> <title>My page</title> <link rel="stylesheet" href="{% static 'todo/main.css' %}" > </head> <body> Hello </body> </html>

Run:

Nếu follow along, nên có kết quả trên.

Load Models Và Admin Panel

Load admin panel: tạo superuser. Mở terminal, cd myapp, gõ python manage.py createsuperuser Enter:

Lỗi vì chưa chạy python manage.py migrate. Gõ đó Enter:

Gõ python manage.py createsuperuser Enter:

Điền credentials. Chạy server, truy cập 127.0.0.1:8000/admin.

Admin panel xong, làm model (database). Tạo model collect contents. Mở models.py:

class Post(models.Model): content = models.CharField(max_length=255, null=False) def __str__(self): return self.content

Class param models.Model, variable content hold CharField() (text field). Magic str return tên model thay vì object.

Chạy migration. Terminal cd myapp, python manage.py makemigrations:

Đã tạo table Post trong database. Chạy python manage.py migrate:

All clear. Thêm vào admin page, mở admin.py:

from .models import * admin.site.register(Post)

Import all model classes, register Post model admin panel. Mở admin panel thấy Post và save data.

Có trong todo app list:

Click vào thấy:

Tạo post nếu muốn.

Render Data Từ DB Ra View

Cuối cùng fetch data từ DB. Update views.py:

from .models import * def index(request): content = Post.objects.all() context = {'content': content} return render(request, 'todo/index.html', context)

Import all từ models.py, tạo variable content, retrieve all data từ table Post. Pass as dictionary to view. Trong index.html thêm:

{% for contents in content %} {{content.content}} {% endfor %}

Viết loop dùng template tag fetch all data content. Terminal cd myapp, run server thấy magic:

Hoạt động, confirm: