เรียนรู้การใช้งาน Django Rest Framework with React.js [EP.1]

 React กับ Django สามารถทำงานร่วมกันได้ไม่ยากอย่างที่คิด

Django เป็น backend Framework ที่ใช้งานได้ง่ายหลาย ๆ คนอาจคิดว่ามันใช้งานได้แค่ none-framework จริง ๆ แล้วมันใช้งานคู่กับ framework อื่น ๆ ได้ด้วยเช่นกันโดยใช้ Django Rest Framework (DRF) ซึ่งเป็นตัวที่ทำให้เราสร้าง REST API ขึ้นมาเพื่อใช้ในการติดต่อกับ frontend ได้เพราะฉะนั้นวันนี้เราจะมาลองเขียน React + Django ดูกันว่าถ้าเกิด Django ทำงานร่วมกับ framework อื่นมันยากง่ายแค่ไหนโดยบทความนี้จะทดลองสร้างเว็บง่าย ๆ ก่อนคือการดึงข้อมูลจาก database มาแสดงบนหน้าเว็บเกริ่นมาได้พอสมควรแล้วมาเริ่มกันเลยดีกว่าครับ

Set up Django

เรามาเริ่มกันต้องแต่กันตั้งค่าที่อยู่ไฟล์กันเลยดีกว่าครับในที่นี้ผมจะวางไฟล์ไว้ที่ drive c โดยเปิด command line console ขึ้นมาแล้วก็สั่งสร้างไฟล์ตามนี้เลย

$ mkdir myhero && cd myhero

$ mkdir backend && cd backend

สร้างที่อยู่โฟเดอร์เสร็จแล้วต่อไปก็คือการ set up django project อย่างแรกต้องติดตั้งตัว virtual env เอาไว้เก็บ package ต่าง ๆ ที่เราใช้กับ project นี้โดยติดตั้งตามนี้ครับ

ติดตั้ง Virtual Environment

$ python -m pip install --user virtualenv
$ python -m venv env

จากนั้นเราต้อง activate ตัว env ที่เราได้สร้างไว้ด้วยแล้วค่อยติดตั้ง package ที่เอาไว้ใช้ใน project ตามนี้ครับ สามารถอ่านเรื่อง virtualenv เพิ่มเติมได้ที่นี่

สำหรับ Linux and OS X

$ source env/bin/activate

สำหรับ Window

./> env\Scripts\activate

ติดตั้ง django

(env) pip install django

เมื่อเราได้ติดตั้ง django แล้วถัดมาสร้างโปรเจกต์ django กันดีกว่า

(env) django-admin startproject hero_api
(env) cd hero_api
(env) python manage.py startapp heros

จะเห็นว่าเราได้สร้างทั้ง project และ app เมื่อเราได้สร้าง app ใน django สิ่งที่เราควรทำอย่างแรกเลยคือไปที่  settings.py  แล้วเพิ่ม app ลงใน  INSTALLED_APPS 

Register App

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

มาถึงตรงนี้แล้วอยากให้ทุกคนทดลองรัน project ของเรากันสักหน่อยครับ

(env) python manage.py runserver

Django Models

เราจะสร้าง  Hero  model เพื่อเอาไว้เก็บข้อมูล  Hero  ซึ่งจะมีอยู่สอง fields คือ  name  ,

 description 

# heros/models.py
from django.db import models

class Hero(models.Model):
    name = models.CharField(max_lenght=100)
    description = models.TextField()
    
    def __str__(self):
        return self.name

Migrate App

ทุกครั้งที่สร้าง model ขึ้นมาใหม่ต้องทำการ migrate มันก่อนเพื่อให้มันขึ้นไปอยู่ใน database ของเราซึ่งขั้นตอนก็ไม่ยากเราจะต้องสั่ง command line ตามนี้

(env) python manage.py makemigrations
(env) python manage.py migrate

เพื่อให้เราสามารถดูข้อมูลและเพิ่มข้อมูลใน Hero model ได้ง่ายโดยสามารถไปใช้หน้า admin ที่ django ทำขึ้นมาให้อยู่แล้วได้แต่เราต้องเพิ่ม model เข้าไปในหน้า admin เองไปที่ admin.py แล้วเพิ่มโค้ดตามนี้ก่อนที่จะเข้าหน้า admin ได้เราต้องสร้าง superuser ขึ้นมาก่อน

สร้าง Django Superuser

(env) python manage.py createsuperuser

เมื่อสร้างเสร็จแล้วมาทดลองเข้าหน้า admin กันดีกว่าครับ

(env) python manage.py runserver

เมื่อรันเซิร์ฟเวอร์เสร็จแล้วไปที่ http://127.0.0.1:8000/admin แล้วก็ Login ตามรหัสที่เราได้สร้างเป็น superuser ไว้ได้เลย

ตอนนี้เรายังไม่มีข้อมูลใน database เราสามารถเพิ่มข้อมูลได้โดยกดไปที่ Add แล้วก็เพิ่มข้อมูล Hero สัก 3 คนตามนี้ครับ

Django Rest Framework

เราจะใช้ Djago Rest Framework (DRF) เป็นตัวสร้าง REST APIs เพื่อเป็นตัวติดต่อกับ frontend framework โดยก่อนจะใช้ต้องติดตั้งกันก่อน

(env) pip install djangorestframework

ก่อนที่เราจะเอา Rest Framework ไปใช้ต้องไปเพิ่มเข้าใน   INSTALLED_APPS 

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

ในการใช้ Rest Framework เราต้องมีการตั้งค่าการเข้าถึงด้วยถ้าเราทำขึ้นโปรเจกต์แบบจริงจังเพื่อความปลอดภัยของข้อมูลเราต้องตั้งค่าเกี่ยวกับการเข้าถึงแต่ตอนนี้เราแค่ทดลองเฉยๆเพราะฉะนั้นใส่ตามนี้ได้เลย

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

เราจะเริ่มสร้าง url กันก่อนแต่อาจจะเป็น url ที่ยังไม่สามารถเข้าได้นะเพราะยังไม่มี view เราค่อยสร้างทีหลังตอนนี้เริ่มออกแบบ url กันก่อนที่คิดไว้เราจะเป็นเว็บที่แสดงรายชื่อฮีโร่ก็คือเมื่อไป  /hero  จะแสดงรายชื่อ hero ทั้งหมดแต่ถ้า /hero/<id>  /hero/<id>  จะแสดงรายชื่อ hero แต่ละคนซึ่งเราสามารถเรียก hero แต่ละคนผ่านทาง   id  มันจะไปอิงตาม id ที่อยู่ใน database แล้วก็จะดึงข้อมูลตาม id ที่เราเรียกถึงเช่นถ้าเราต้องการเรียก hero คนแรกก็จะพิม   /hero/1  ถ้าตัวที่สองก็   /hero/2  ตามลำดับ

ดังนั้นเรามาสร้างตามที่เราพูดกันเลยดีกว่าครับไปที่ urls.py แล้วเพิ่ม url ตามนี้ครับ

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('heros.urls')),
]

สร้างไฟล์   urls.py  ที่โฟลเดอร์ heros แล้วเพิ่มโค้ดตามนี้ได้เลย
# heros/urls.py
from django.urls import path
from . import views
urlpatterns = [
    path('', views.ListHero.as_view()),
    path('<int:pk>/', views.DetailHero.as_view()),
]

# heros/serializers.py
from rest_framework import serializers
from .models import Hero
class HeroSerializer(serializers.ModelSerializer):
    class Meta:
        fields = (
            'id',
            'name',
            'description',
        )
        model = Hero

# heros/views.py
from rest_framewrk import generics
from .models import Hero
from .serializers import HeroSerializer

class ListHero(generics.ListCreateAPIView):
    queryset = Hero.objects.all()
    serializer_class = HeroSerializer
    
class DetailHero(generics.RetrieveUpdateDestroyAPIView):
    queryset = Hero.objects.all()
    serializer_class = HeroSerializer 

Browsable API

(env) python manage.py runserver