เฮ้ สบายดีไหม ฉันอายุ 18 ปี เป็นนักพัฒนาแบ็กเอนด์และเป็นวิศวกรแมชชีนเลิร์นนิ่งที่ต้องการ และในบทความนี้ ฉันจะเขียนเกี่ยวกับวิธีการสร้างเว็บแอปบนโทรศัพท์ของคุณโดยใช้ Python 😁 มาดำดิ่งกัน

ข้อกำหนด
สิ่งแรกที่เราต้องการที่นี่คือโทรศัพท์ Android เวอร์ชัน 6.0 ขึ้นไปเป็นอย่างน้อย แต่ถ้าฉันบอกคุณว่านั่นคือทั้งหมดที่เราต้องการ ถือว่าดีเกินจริง
สิ่งต่อไปที่เราต้องทำคือติดตั้งแอปพลิเคชั่นมือถือบนโทรศัพท์ของเราชื่อ pydroid3

อย่างที่คุณเห็น pydroid3 เป็นแอปพลิเคชั่นมือถือที่ให้คุณเขียน Python บนโทรศัพท์มือถือของคุณได้ ดังนั้นติดตั้งเลย
สิ่งต่อไปที่เราต้องทำคือติดตั้ง Django หากคุณไม่คุ้นเคยกับ Django โปรดดูเอกสาร Django ที่นี่
ในการติดตั้ง Django เราต้องเปิดการนำทางด้านข้างใน pydroid3 ของเราแล้วเลือก Terminal:

จากนั้นคลิกที่มันและเราจะเห็นสิ่งนี้:

เมื่อเสร็จแล้วสิ่งที่คุณต้องทำคือพิมพ์คำสั่งต่อไปนี้:
pip install django
และคุณควรได้รับด้านล่าง ฉันได้รับข้อความ "ข้อกำหนดที่พึงพอใจ" เนื่องจากฉันได้ติดตั้งไว้แล้ว

ติดตั้งสำเร็จแล้ว แต่ขอยืนยันว่า ในประเภทเทอร์มินัล django-admin
แล้วกด Enter
คุณควรได้รับสิ่งนี้:

แสดงว่าติดตั้งจริงแล้ว
วิธีสร้างโครงการของเรา
มาเริ่มสร้างโครงการของเรากันดีกว่า เปิดเทอร์มินัลของคุณและพิมพ์คำสั่งต่อไปนี้:
django-admin startproject myapp
สิ่งนี้จะสร้างแอปพลิเคชัน Django ชื่อ myapp ในโฟลเดอร์รูทของคุณ
เปลี่ยนไดเร็กทอรีเป็นไดเร็กทอรีโดยพิมพ์ cd myapp
แล้วพิมพ์ python manage.py runserver
. จากนั้นคุณควรได้รับสิ่งนี้:

ตอนนี้เซิฟเวอร์เริ่มทำงานแล้ว ถัดไป หากต้องการทดสอบในเบราว์เซอร์ ให้ไปที่ 127.0.0.1:8000

และบูม! คุณควรเห็นว่า Django ตั้งค่าสำเร็จแล้ว
สิ่งต่อไปที่เราต้องทำคือสร้างแอป Django ของเรา ใน Django โฟลเดอร์โปรเจ็กต์ทำหน้าที่เป็นรูทในขณะที่แอปทำหน้าที่เป็นตัวแอปพลิเคชันเอง
ในการสร้างแอป Django ตรวจสอบให้แน่ใจว่าคุณยังคงอยู่ในไดเร็กทอรี จากนั้นพิมพ์ python manage.py startapp todo
. สิ่งนี้จะสร้างแอพ To-do ในโครงการ myapp ของเราดังนี้:

จากนั้นในโฟลเดอร์ todo เราจะเห็นสิ่งนี้:

เราจะพิจารณาไฟล์เพิ่มเติมเมื่อเราเริ่มทำงานกับไฟล์เหล่านั้น
วิธีกำหนดค่าแอปพลิเคชันของเรา
ตอนนี้มาทำให้แอปสามารถให้บริการโดยโปรเจ็กต์ Django กันเถอะ ก่อนอื่น เปิด settings.py
. ของคุณ ไฟล์ในโฟลเดอร์ myapp และเพิ่ม 'todo'
ไปยังแอปที่ติดตั้งในลักษณะนี้:

ต่อไปเราต้องเปิด urls.py
. ของเรา และเพิ่มสิ่งต่อไปนี้ในโค้ดของคุณ:
from django.urls import path, include
path('', include('todo.urls'))

สิ่งที่เกิดขึ้นจริงคือฉันได้เพิ่ม include
จาก django.urls
เส้นทางการนำเข้า และใต้เส้นทาง (admin
) เราสร้างเส้นทางว่างที่ชี้หรือรวม urls.py
ไฟล์ในไดเร็กทอรีแอพ todo ฉันหวังว่าจะชัดเจน
ต่อไปเราต้องสร้างไฟล์ใหม่ในไดเร็กทอรีไฟล์ todo ชื่อ urls.py
และเพิ่มโค้ดต่อไปนี้เข้าไป:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='home')
]

เรานำเข้า path
จาก Django.urls
และยังนำเข้า views
จากไดเรกทอรีราก จากนั้นเราก็สร้าง urlpatterns
. ของเรา โดยส่วนแรกเป็นลิงก์รูท อย่างที่คุณเห็น views.index หมายความว่าเรากำลังชี้มุมมองนี้ไปยังฟังก์ชันดัชนีใน views.py
ไฟล์. คุณจะเห็นว่ามันทำงานอย่างไรในระยะเวลาอันสั้น
ไปที่ views.py
. ของเรากัน ไฟล์และเพิ่มโค้ดบางส่วน
ที่ด้านบน ให้นำเข้า HttpResponse
แบบนี้:
from django.http import HttpResponse
และเพิ่มสิ่งนี้ด้านล่าง:
def index(request):
return HttpResponse('Hello')

อย่างที่คุณเห็น เราได้สร้างฟังก์ชันดัชนีที่เราเรียกใน urls.py
และเราส่งพารามิเตอร์คำขอเข้าไป จากนั้นเราก็ส่งคืน HttpResponse
.
แต่ก่อนเป็น HttpResponse
ใช้งานได้เราต้องนำเข้าจาก django.http import HttpResponse
- ง่ายเหมือน ABC ลองทำสิ่งนี้:เปิดเทอร์มินัลและ cd ของคุณใน myapp แล้วพิมพ์ python manage.py runserver
เพื่อทดสอบ

อย่างที่คุณเห็น มันตอบกลับมา ต่อไปเราจะโหลดไฟล์ HTML ของเทมเพลต
ในการโหลดไฟล์ HTML ของเรา เราต้องสร้างโฟลเดอร์แบบนี้ในไดเร็กทอรี todo ตามลำดับ:
todo/templates/todo
ในไดเร็กทอรี todo ให้สร้างโฟลเดอร์ชื่อ templates ภายในโฟลเดอร์นั้น ให้สร้างโฟลเดอร์ชื่อ todo ง่ายๆ นั่นเอง
จากนั้นไปข้างหน้าและสร้างไฟล์ HTML อย่างง่ายที่เรียกว่า index.html และเขียนสิ่งนี้ลงไป:
<h1>Hello world</h1>
ในการโหลด ทำ views.py
. ของคุณ รหัสมีลักษณะดังนี้:
def index(request):
return render(request, 'todo/index.html')

ตอนนี้แทนที่จะส่งคืนการตอบกลับ เราส่งคืนมุมมองการแสดงผลที่ช่วยให้เราสามารถแสดงเทมเพลต HTML ของเราได้ในขณะนี้ ให้บันทึกสิ่งนี้โดยเปิดซีดีเทอร์มินัลของคุณลงใน myapp และเรียกใช้ เราควรจะมีสิ่งนี้

อย่างที่คุณเห็นมันใช้งานได้ดี - ไปยังขั้นตอนต่อไป
วิธีการตั้งค่าไฟล์สแตติก
ตอนนี้ในการตั้งค่าไฟล์สแตติก ให้สร้างโฟลเดอร์ใหม่ในไดเร็กทอรี todo ของคุณและตั้งชื่อเป็นสแตติก ภายในโฟลเดอร์นั้น ให้สร้างโฟลเดอร์และตั้งชื่อว่าสิ่งที่ต้องทำ
ดังนั้นควรเป็นดังนี้:/static/todo/
.
ในไดเร็กทอรี todo ให้สร้างไฟล์และตั้งชื่อเป็น main.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>

ตอนนี้มาเริ่มกันเลย:

หากคุณได้ปฏิบัติตามฉันแล้ว คุณควรมีข้อมูลข้างต้น
วิธีการโหลดโมเดลและแผงการดูแลระบบ
ตอนนี้เพื่อโหลดแผงผู้ดูแลระบบของเรา เราต้องสร้าง superuser ทำได้ง่ายๆ เพียงเปิดเทอร์มินัลและ cd ลงในโฟลเดอร์ myapp จากนั้นพิมพ์ python manage.py createsuperuser
และกด Enter คุณควรเห็นสิ่งนี้:

เราได้รับข้อผิดพลาดเนื่องจากเราไม่ได้เรียกใช้ python manage.py migrate
ยัง. พิมพ์นั้นแล้วกด Enter แล้วคุณจะมีลักษณะดังนี้:

ตอนนี้พิมพ์ python manage.py createsuperuser
และกด Enter:

เพียงกรอกข้อมูลประจำตัว สิ่งต่อไปที่เราต้องทำคือเรียกใช้เซิร์ฟเวอร์ของเราและชี้ไปที่ 127.0.0.1:8000/admin

เข้าสู่ระบบและคุณจะถูกนำไปที่แดชบอร์ด:

ตอนนี้เราทำแผงผู้ดูแลระบบเสร็จแล้ว มาทำงานกับโมเดล (ฐานข้อมูล) กัน เราจะสร้างแบบจำลองที่รวบรวมเนื้อหา ดังนั้นเปิด models.py
. ของคุณ ไฟล์และพิมพ์รหัสนี้:
class Post(models.Model):
content = models.CharField(max_length=255, null=False)
def __str__(self):
return self.content

เราสร้างคลาสที่มีพารามิเตอร์ models.Model
และให้ตัวแปร content
ที่มี CharField()
เหมือนช่องข้อความมากกว่า สุดท้ายเราสร้างเวทย์มนตร์ str
ที่ส่งคืนชื่อของโมเดลแทนที่จะเป็นอ็อบเจกต์
ต่อไปเราต้องเรียกใช้การโยกย้าย เปิดเทอร์มินัลของคุณ cd ลงใน myapp แล้วพิมพ์ python manage.py makemigrations
. คุณควรเห็นสิ่งนี้:

นั่นหมายความว่าได้สร้างตารางโพสต์ในฐานข้อมูลของเรา จากนั้นเรียกใช้ python manage.py migrate
ซึ่งจะส่งผลดังต่อไปนี้:

ซึ่งหมายความว่าทุกอย่างชัดเจน ตอนนี้หากต้องการเพิ่มไปยังหน้าผู้ดูแลระบบ ให้เปิด admin.py
แล้วพิมพ์โค้ดนี้:
from .models import *
admin.site.register(Post)

เรานำเข้าคลาสโมเดลทั้งหมดจากโมเดลและลงทะเบียนโมเดลโพสต์ในแผงการดูแลระบบ ตอนนี้ถ้าเราเปิดแผงการดูแลระบบ เราควรเห็นโพสต์และบันทึกข้อมูลบางอย่างไว้

สังเกตว่าตอนนี้อยู่ในรายการแอป todo:

หลังจากคลิกแล้ว คุณจะเห็นสิ่งนี้:

จากนั้นคุณสามารถสร้างโพสต์ได้หากต้องการ
วิธีการแสดงข้อมูลจากฐานข้อมูลไปยัง View
สุดท้ายเราจะดึงข้อมูลของเราจากฐานข้อมูล ในการทำเช่นนั้น เราจำเป็นต้องอัปเดต views.py
. ของเรา ดังนี้
from .models import *
def index(request):
content = Post.objects.all()
context = {'content': content}
return render(request, 'todo/index.html', context)

ง่ายนิดเดียว เรานำเข้าทั้งหมดจาก models.py
, สร้างตัวแปรชื่อ content
และดึงข้อมูลทั้งหมดจากตาราง โพสต์ จากนั้นเราก็ส่งต่อให้เป็นพจนานุกรมในมุมมองของเรา ดังนั้นใน index.html เพื่อให้ใช้งานได้ ให้เพิ่มสิ่งนี้:
{% for contents in content %}
{{content.content}}
{% endfor %}

ที่นี่ เราเขียนลูปโดยใช้แท็กเทมเพลตและดึงเนื้อหาข้อมูลทั้งหมด ตอนนี้เปิดเทอร์มินัลของคุณ cd ลงใน myapp แล้วเรียกใช้เซิร์ฟเวอร์เพื่อดูความมหัศจรรย์ที่เกิดขึ้น:

ใช้งานได้ แต่มายืนยันว่าใช้งานได้:

และผลลัพธ์ควรเป็นดังนี้:

วิโอลา – มันใช้ได้ดี สุดท้ายคุณสามารถเพิ่มตัวแบ่งบรรทัดเพื่อให้คุณสามารถอ่านได้ชัดเจนยิ่งขึ้น เสร็จแล้ว!
ขอบคุณสำหรับการอ่าน. หากคุณต้องการดูบทแนะนำ Django เชิงลึก โปรดไปที่ช่อง YouTube ของฉัน Devstack และสมัครรับข้อมูล