สร้าง Python Web App บนโทรศัพท์ Android ด้วย Pydroid3: คู่มือทีละขั้นตอน

เฮ้ย คุณเป็นไง? ผมอายุ 18 เป็น backend developer และ aspiring Machine Learning Engineer ในบทความนี้จะเขียนเกี่ยวกับการสร้าง web app บนโทรศัพท์ด้วย Python 😁 เริ่มกันเลย

ข้อกำหนด

ต้องมี Android phone รุ่น 6.0 ขึ้นไป แต่ถ้าบอกว่านั่นคือทั้งหมดที่ต้องการ? ดูดีเกินจริง

ต่อไป ติดตั้ง mobile app ชื่อ pydroid3

pydroid3 ให้เขียน Python บนโทรศัพท์ได้ ติดตั้งไปเลย

ต่อไป ติดตั้ง Django หากไม่คุ้นเคย ดู Django docs ที่นี่

เปิด side navigation ใน pydroid3 เลือก Terminal:

คลิกแล้วจะเห็น:

พิมพ์คำสั่ง:

pip install django

จะได้ผลลัพธ์ ผมได้ "requirements satisfied" เพราะติดตั้งแล้ว

ติดตั้งสำเร็จ แต่ยืนยันดู: พิมพ์ django-admin กด Enter

ควรได้:

หมายถึงติดตั้งแล้ว

สร้างโปรเจกต์

เริ่มสร้างโปรเจกต์ เปิด terminal พิมพ์:

django-admin startproject myapp

สร้าง Django application ชื่อ myapp ใน root folder

Change directory: cd myapp พิมพ์ python manage.py runserver จะได้:

Server เริ่มทำงาน ทดสอบใน browser ไปที่ 127.0.0.1:8000

Boom! Django setup สำเร็จ

ต่อไป สร้าง Django app ใน Django project folder เป็น root ส่วน app เป็น application จริง

สร้าง Django app: อยู่ใน directory เดิม พิมพ์ python manage.py startapp todo สร้าง To-do app ใน myapp project:

ใน todo folder จะเห็น:

ดูไฟล์เพิ่มเติมตอนเริ่มทำงาน

ตั้งค่าแอปพลิเคชัน

ทำให้ app served โดย Django project เปิด settings.py ใน myapp folder เพิ่ม 'todo' ใน installed apps:

เปิด urls.py เพิ่ม:

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

เพิ่ม include ใน import จาก django.urls path ด้านล่าง path (admin) สร้าง empty path ชี้ไป urls.py ใน todo app directory

สร้างไฟล์ใหม่ใน todo directory ชื่อ urls.py ใส่โค้ด:

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

import path จาก Django.urls และ views จาก root directory สร้าง urlpatterns ส่วนแรกคือ root link views.index ชี้ไป function index ใน views.py

ไปที่ views.py เพิ่มโค้ด:

บนสุด import HttpResponse:

from django.http import HttpResponse

เพิ่มด้านล่าง:

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

สร้าง index function ที่เรียกใน urls.py รับ request parameter คืน HttpResponse ต้อง import จาก django.http import HttpResponse เรียบร้อย ทดสอบ: terminal cd myapp พิมพ์ python manage.py runserver

Response กลับมา ต่อไป load template HTML files

สร้างโฟลเดอร์ใน todo directory:

todo/templates/todo

ใน todo สร้าง templates แล้วในนั้นสร้าง todo อีกที

สร้าง HTML file ชื่อ index.html ใส่:

<h1>Hello world</h1>

โหลด template: แก้ views.py เป็น:

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

แทน return response ด้วย render view ให้ render HTML template save terminal cd myapp run server:

ทำงานดี ไปขั้นตอนต่อไป

ตั้งค่า Static Files

สร้างโฟลเดอร์ใหม่ใน todo directory ชื่อ static ในนั้นสร้างโฟลเดอร์ todo

โครงสร้าง: /static/todo/

ใน todo directory สร้างไฟล์ main.css ใส่ CSS:

body { background-color: red; }

แก้ 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>

รันดู:

ถ้าทำตามมาจะได้ผลลัพธ์ข้างต้น

โหลด Models และ Admin Panel

โหลด admin panel ต้องสร้าง superuser เปิด terminal cd myapp พิมพ์ python manage.py createsuperuser Enter:

Error เพราะยังไม่รัน python manage.py migrate รันแล้ว:

พิมพ์ python manage.py createsuperuser อีกครั้ง:

กรอก credentials ต่อไป รัน server ไปที่ 127.0.0.1:8000/admin

Login ไปที่ dashboard:

Admin panel เสร็จ ทำงานกับ model (database) สร้าง model เก็บ contents เปิด models.py ใส่:

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

สร้าง class มี parameter models.Model ตัวแปร content เก็บ CharField() text field สร้าง magic str คืนชื่อ model แทน object

รัน migration: terminal cd myapp python manage.py makemigrations

สร้าง Post table ใน database แล้ว รัน python manage.py migrate:

ทั้งหมดพร้อม เพิ่มใน admin page: เปิด admin.py ใส่:

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

import model classes ทั้งหมด register Post model ใน admin panel เปิด admin panel จะเห็น post และ save data ได้

อยู่ใน todo app list:

คลิกเข้าไป:

สร้าง post ได้แล้ว

Render ข้อมูลจาก DB ไป View

สุดท้าย fetch data จาก DB แก้ views.py:

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

ง่ายมาก: import ทั้งหมดจาก models.py สร้าง variable content ดึงข้อมูลทั้งหมดจาก table Post ส่งเป็น dictionary ไป view ใน index.html ใส่:

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

เขียน loop ด้วย template tag ดึงข้อมูล content ทั้งหมด terminal cd myapp run server ดู magic:

ทำงาน แต่ confirm อีกครั้ง:

ผลลัพธ์:

Violà - ทำงานได้ เพิ่ม line break เพื่ออ่านง่ายขึ้น เสร็จแล้ว!

ขอบคุณที่อ่าน สนใจ Django tutorial ลึกขึ้นไปดู YouTube channel Devstack และ subscribe