วิธีสร้างเว็บแอปบนโทรศัพท์ของคุณ – บทช่วยสอนเกี่ยวกับแอป Python &Pydroid สำหรับ Android

เฮ้ สบายดีไหม ฉันอายุ 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 และสมัครรับข้อมูล