สร้าง Todo App Django REST Framework + Ajax Ep. 1

บทความนี้เป็นอีกหนึ่งบทความที่เราจะพูดเรื่อง Django REST Framework ซึ่งจะมาคู่กับ AJAX เป็นตัวที่ทำให้เว็บของเรานั้นสามารถที่จะตอบโต้กับผู้ใช้ได้ดียิ่งขึ้นไม่ต้องรีโหลดหน้าขึ้นมาใหม่ในทุกๆครั้งที่มีการเรียกค่าหรือส่งค่าเข้า Server ทำให้ผู้ใช้ไม่รู้สึกขัดจิตขัดใจโดยบทความนี้เราจะพากันสร้าง API โดยใช้ Django REST Framework ซึ่งมีหัวข้อให้ทำตามดังนี้

• Set up Django project
• Create Models
• Set up Django REST Framework
• Updates Urls
• Updates View

ปล. ถ้ายังไม่เคยใช้ Django REST Framework แนะนำบทความ

สร้าง API แบบติดจรวดด้วย Django REST Framewrok

Django REST Framework + React Ep.1

Django REST Framework + React Ep.2

Django REST Framework + React Ep.3

Django REST Framework + Vue.js

Set up Django project

ก่อนที่เราจะทำอะไรอย่างแรกอยากให้ทุกคนนั้นได้ set up virtual environment ของ project ขึ้นมาก่อนเพื่อที่จะเก็บ Packages ต่าง ๆ ที่ต้องใช้ใน project โดยสามารถติดตั้งตามขั้นตอนนี้เลย

 1. python -m pip install --user virtualenv

 2. python -m venv env

Note: ทุกคนต้องติดตั้ง Python ก่อนนะครับบ

หลังจากติดตั้งเสร็จแล้วต้อง activate ให้มันเริ่มใช้งานด้วย

สำหรับ Linux and OS X

 3.1. source myvenv/bin/activate 

สำหรับ Window

 3.2. .\env\Scripts\activate

แค่นี้เราก็สามารถที่จะติดตั้ง packages ต่าง ๆ ที่เราต้องการได้แล้วครับ

ติดตั้ง Django

(env) pip install django

เพื่อเราติดตั้ง django เสร็จแล้วขั้นตอนต่อไปก็ต้องสร้าง project ขึ้นมาโดยใช้คำสั่ง

(env) django-admin startproject todoapp
(env) cd todoapp

หลังจากที่เราสร้าง project ขึ้นมาเราจำเป็นต้องสร้าง app เพื่อเอาไว้จัดการ To Do ซึ่งสร้างโดยใช้คำสั่ง

(env) python manage.py startapp todo

หลังจากที่เราติดตั้ง app เราต้องไปเข้าไปใน settings.py เพื่อที่จะเพิ่ม app ของเราที่พึ่งสร้างขึ้นมาใหม่โดยเพิ่มตามนี้

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todoapp', # เพิ่ม app เข้ามาใหม่
] 

Create Django Model

หลังจากสร้างอะไรเรียบร้อยแล้วมาถึงอีกอย่างที่ต้องสร้างก็คือ model ซึ่งเป็น model ที่เอาไว้เก็บ task แต่ละอันใน todo list ของเราโดยสร้างแบบง่ายๆ ดังนี้ 

todoapp/models.py
from django.db import models
class Task(models.Model):
    title = models.CharField(max_length=200)
    Completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

task model

โดยแต่ละ task นั้นจะเก็บอยู่สองอย่างคือ title ที่เอาไว้บอกว่า task ต้องทำอะไรถัดมาคือ Completed จะเป็นตัวบอกว่า task นี้เสร็จแล้วหรือยัง

หลังจากสร้างเสร็จอย่าลืมที่จะ migrate ขึ้น database นะครับโดยใช้คำสั่ง

python manage.py makemigrations

python manage.py migrate

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

todoapp/admin.py
from django.contrib import admin
from .models import Task

admin.site.register(Task)

Create SuperUser

เพื่อที่จะเข้าไปในหน้า admin ได้เราจำเป็นต้องมี superuser ในการเข้าใช้เราสามารถสร้างด้วยคำสั่ง

(env) python manage.py createsuperuser

หลังจากนั้นก็จะมีให้กรอก username และ password ของเราที่ต้องการสร้างขึ้นมาโดย password มันอาจจะไม่แสดงแต่จริงๆ มันพิมให้เราอยู่นะครับเมื่อพิมเสร็จก็ enter แค่นี้เราก็สามารถที่จะสร้าง superuser ได้แล้ว  หลังจากนี้เรามาทดลอง run server ของเรากันดีกว่าครับ

(env) python manage.py runserver

แล้วไปที่

http://127.0.0.1:8000/admin/

เราจะเห็นว่า models ที่เราสร้างนั้นมันจะขึ้นอยู่มาแสดงให้เห็นในหน้า admin อยากจะให้ทุกคนเพิ่ม task ของตัวเองสัก 3-4 อันนะครับ

Set up Django REST Framework

มาถึงพระเอกของเราแล้วก่อนที่จะใช้อย่างแรกเลยต้องติดตั้งก่อนโดยใช้คำสั่ง

(env) pip install djangorestframework

หลังจากที่ Install เสร็จแล้วต้องไปเพิ่ม app ใน settings.py ด้วย

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework', # เพิ่มเข้ามาใหม่
    'todoapp', 
] 

Model Serializer

สร้างไฟล์ขึ้นมาใหม่ชื่อ serializer.py ในโฟลเดอร์ todo เพื่อที่จะแปลง model ให้อยู่ในรูปแบบที่เหมาะสมสำหรับ api คล้ายๆกับการนำ model มาแปลงเป็น Django ModelForm สามารที่จะเขียน serializer ได้ดังนี้

from rest_framework import serializers
from .models import Task

class TaskSerializers(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ('id', 'title', 'Completed')

Update Urls

url ที่เราต้องอัพเดตนั้นมีอยู่สองที่มเริ่มที่แรกก่อนเลยดีกว่าคือที่หน้าหลักของเราไปที่

todoapp/urls.py แล้วเพิ่มโค้ดตามนี้เลย

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('todo.urls')),
]

ส่วนถัดมาก็เป็นส่วนของ To Do โดยให้เราสร้างไฟล์ urls.py ขึ้นมาใหม่แล้วเข้าไปเพิ่มโค้ดตามนี้

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.apiList, name='api-list'),
    path('todo-list/', views.taskList, name='todo-list'),
    path('task-detail/<str:pk>', views.taskDetail, name='task-detail'),
    path('task-create/', views.taskCreate, name='task-create'),
    path('task-updates/<str:pk>', views.taskUpdate, name='task-updates'),
    path('task-delete/<str:pk>', views.taskDelete, name='task-delete'),
]

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

Update View

มาเพิ่ม view กันดีกว่าเพื่อที่จะสร้าง API ที่สามารถ สร้าง, เรียกดู, อัพเดต และ ลบ task ของเราในบทความนี้จะสร้าง view แบบ Function Based Views โดยเราจะเขียน view ตามแบบนี้

from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .serializers import TaskSerializers
from .models import Task

URL = "http://localhost:8000/api"

@api_view(['GET'])
def apiList(request):
    api_urls = {
        'List': URL +'/todo-list/',
        'Detail View':URL + '/task-detail/<str:pk>',
        'Create':URL + '/task-create/',
        'Update':URL + '/task-updates/<str:pk>',
        'Delete':URL + '/task-delete/<str:pk>',
    }
    return Response(api_urls)

@api_view(['GET'])
def taskList(request):
    tasks = Task.objects.all()
    serializer = TaskSerializers(tasks, many=True)
    return Response(serializer.data)

@api_view(['GET'])
def taskDetail(request, pk):
    tasks = Task.objects.get(id=pk)
    serializer = TaskSerializers(tasks, many=False)
    return Response(serializer.data)

@api_view(['POST'])
def taskCreate(request):
    serializer = TaskSerializers(data=request.data)
    print(serializer)
    if serializer.is_valid():
        serializer.save()
    return Response(serializer.data)

@api_view(['POST'])
def taskUpdate(request, pk):
    task = Task.objects.get(id=pk)
    serializer = TaskSerializers(instance=task, data=request.data)
    print(serializer)

    if serializer.is_valid():
        serializer.save()
    return Response(serializer.data)

@api_view(['DELETE'])
def taskDelete(request, pk):
    task = Task.objects.get(id=pk)
    task.delete()
    
    return Response(task.title + " successfully delete!")

เราจะใส่ Decorator @api_view([method]) ทุก view เลยเพื่อเป็นตัวบ่งบอกว่า API นี้สามารถใช้งาน method อะไรได้บ้างอันนี้ผมทำแยกออกมาเป็น 1 API 1 method จะไม่รวม method ให้อยู่ใน API อันเดี่ยวกันเพราะอยากให้ทุกคนนั้นเห็นภาพว่าเวลาเรา สร้าง เพิ่ม ลบ ข้อมูลใน database มันมีการทำงานอย่างไร

จะเห็นว่า view ที่เราสร้างนั้นมีทั้งหมด 6 อันซึ่งประกอบไปด้วย

1. apiList : เป็น API ที่เอาไว้แสดง urls ที่เกี่ยวข้องทั้งหมดเพื่อให้ง่ายต่อการเข้าถึง API นั้นๆ

2. taskList: เป็น API ที่เอาไว้แสดง To Do List ของเราทั้งหมดว่ามีอะไรบ้างแต่ละ task ของเราทำเสร็จแล้วหรือยังดูได้ทั้งหมด

3. taskDetail : เป็น API ที่จะเอาไว้แสดง detail ของแต่ละ task เลยโดยเราต้องระบุ task id เพื่อเข้าถึงข้อมูลด้วยเช่น

http://localhost:8000/api/task-detail/1

4. taskCreate: เป็น API ที่เอาไว้สร้าง task โดยสามารถสร้าง task ได้โดยกรอกข้อมูลเป็นรูปแบบ JSON ได้ดังนี้

5. taskUpdates เป็น API ที่เอาไว้อัพเดทสถานะ task หรือแก้ไขข้อความใน task ได้โดยการที่เราจะแก้ไข task เราต้องระบุด้วยว่าจะแก้ไข task ไหนสามารถระบุผ่าน url ได้เลยเช่น

http://localhost:8000/api/task-updates/1

โดยเราสามารถแก้ไขข้อมูลโดยป้อนข้อมูลไปรูปแบบ JSON เหมือนเดิมเลยครับ

6. taskDelete เป็น API เอาไว้ใช้เพื่อที่จะลบ task นั้นโดยสามารถลบได้ต้องระบุ task id ผ่าน url ด้วยแบบนี้

http://localhost:8000/api/task-delete/1

แล้วจะมีปุ่ม Delete สีแดง ๆ ให้กดเพื่อทดลองลบข้อมูลถ้ากดลบแล้วข้อมูลจะเอากลับมาไม่ได้ถือว่าลบไปเลยนะครับโดยผมจะลบให้ดู 1 ตัวดังนี้

เมื่อลบแล้วระบบจะแจ้งชื่อ task แล้วก็บอกว่าลบสำเร็จไหม

จบ EP. 1

เป็นอย่างไรกันบ้างครับสำหรับบทความนี้หวังว่าทุกคนจะเข้าใจเรื่องของ Django Rest framework มากขึ้นกว่าเดิมนะครับ ผมเขียนค่อนข้างที่จะระเอียดขึ้นเพื่อที่จะให้หลายคนเข้าใจคำว่า api มากยิ่งขึ้นยังไง ep.2 จะพูดถึงเรื่องหน้าบ้านน่าจะลงเร็ว ๆ นี้จะรีบเร่งมือเขียนให้นะครับขอบคุณที่อ่านบทความจนจบครับติดตรงไหนสามารถที่จะคอมเม้นถามได้หรือ inbox เข้ามาถามใน Facebook ได้เสมอครับขอบคุณครับ

Oil STACKPYTHON

Follow us on

Medium: STACKPYTHON

Youtube: STACKPYTHON

Facebook: STACKPYTHON

หรือเข้าชมคอร์ส Django Crash Course ของ STACKPYTHON

Python Web Development with Django Crash Course