Hi All,
Welcome to my journey in building a data services based web app. I am working on a react based website to provide information on competitive examinations to be held in India by various seat allocation boards for professional engineering colleges in India.
My tech stack includes React frontend, with PostgreSQL as the backend, and I am going to use django framework for the API Services. This blog is to share with you how I did it. Some references I used are:
Here is a good starter video from Traversy Media - This video is a little old, but it meets the purpose, and the django framework API Guides.
I have imported schedule data from a csv into my database table. I plan to fetch the schedule data from the database and show it on the react front-end using API services I created using django rest framework.
I created a project called backendproject. For the purpose of the blog, I will call this the project folder, and an app within it with the name backendapp. I will call this the app folder.
Here we begin:
Step 1: To create a rest API and test it in postman.
1. First the database model. My models.py has the schedule model defined as follows:
from django.db import models
from backendapp.submodels import mdl_users
class schedules(models.Model):
TENTATIVE_CHOICES =[
('TENTATIVE', 'TENTATIVE'),
('CONFIRMED', 'CONFIRMED'),
('EXTENDED', 'EXTENDED'),
('UPDATED', 'UPDATED'),
('PREPONED', 'PREPONED'),
]
EXAM_MODE = [
('ONLINE', 'ONLINE'),
('OFFLINE', 'OFFLINE'),
]
sch_allocationboard = models.CharField(max_length=15, null=True)
sch_exam_name = models.CharField(max_length = 15, null=True)
sch_exam_mode = models.CharField(max_length = 15, choices = EXAM_MODE, null=True)
sch_exam_application_startdate = models.DateTimeField(null=True)
sch_exam_application_enddate = models.DateTimeField(null=True)
sch_exam_application_dates_tentative = models.CharField(max_length = 15, choices = TENTATIVE_CHOICES, null=True)
sch_exam_feepaymentby_date = models.DateTimeField(null=True)
sch_exam_application_correction_startdate = models.DateTimeField(null=True)
sch_exam_application_correction_enddate = models.DateTimeField(null=True)
sch_exam_daterangestart = models.DateTimeField(null=True)
sch_exam_daterangeend = models.DateTimeField(null=True)
sch_exam_dates_tentative = models.CharField(max_length = 15, choices = TENTATIVE_CHOICES, null=True)
sch_admitcard_date = models.DateTimeField(null=True)
sch_resultdate = models.DateTimeField(null=True)
sch_notes = models.CharField(max_length = 500, null=True)
sch_modified_date = models.DateTimeField(auto_now=True)
sch_modified_by = models.ForeignKey(
mdl_users.user, related_name = 'sch_modified_by', on_delete=models.SET_NULL, null=True)
sch_created_by = models.ForeignKey(
mdl_users.user, related_name='sch_created_by', on_delete=models.SET_NULL, null=True)
sch_created_date = models.DateTimeField(auto_now_add=True)
As mentioned earlier, I have imported data from a csv file into the table using postgre import feature. I am only going to retrieve the data from the table onto the react front-end app called 'frontend' using API Service.
2. I created a serializer for the model. This file is called serializers.py and is located under backendProject\backendapp\serializers.py. Serializers convert data into JSON or XML form.
serializer.py
from rest_framework import serializers
from backendapp.models import mdl_schedules
class ScheduleSerializer(serializers.ModelSerializer):
class Meta:
model = mdl_schedules.schedules
fields = '__all__'
You can choose to output selected fields, but here, I have chosen to output all fields, for the sake of simplicity.
3, Import the serializer we just created and create viewsets in the app folder. Viewsets will hold data that serialisers provide. I have created a file called api.py.
api.py
from backendapp.models import mdl_combined_cutoffs, mdl_combined_seats
from rest_framework import viewsets, permissions
from .serializers import ScheduleSerializer
#Create Schedule viewset
class ScheduleViewSet(viewsets.ModelViewSet):
queryset = mdl_schedules.schedules.objects.all()
permission_classes = [
permissions.AllowAny
]
serializer_class = ScheduleSerializer
3. In the project folder, I updated the urls.py file. Django needs to be told as to where to find the viewsets. So we create the path for it to fetch the viewsets. This happens in two places. One, the project urls.py file, where we ask django to include the urls mentioned in the app path.
# backend/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('', include('backendapp.urls')),
path('admin/', admin.site.urls),
]
Since I have named my app as backendapp, I will ask django to include the url file I will create in the backendapp folder. This file is also called urls.py, which is the next step.
4. In the backendapp folder, I create a file called urls.py. I register the Viewsets we created to the api path for django to refer to.
# backendapp/urls.py
from rest_framework import routers
from .api import ScheduleViewSet
router = routers.DefaultRouter()
router.register('api/schedules', ScheduleViewSet,'schedules')
urlpatterns = router.urls
5. From the backendproject folder terminal, I run the manage.py runserver command to start the server. It gives me the port number it has started the services on.
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
December 23, 2023 - 11:39:08
Django version 4.1.5, using settings 'backend.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
6. I use postman to test the service.
Here is the postman result. It has given me all the rows in the table. You can choose to output in JSON, XML or some other text formats.
Part 2 of this blog is where we create the React App and integrate it with Django.
Comments
Post a Comment