When using a backend technology or framework like Django, Laravel, or Node.js to write REST APIs, you need to have an additional frontend skill using frameworks like React, Angular, and Vue to consume the API endpoints. But that’s not always the case, you’re able to consume the APIs in Django itself using Django templates.
Setting Up a Django Project and API Endpoints
The first step will be to create a project directory. Open your terminal and create a directory for your project.
For this tutorial, you will build APIs for a payment wallet.
The full source code is available in aGitHub repository.
Start bycreating a virtual environment. In this case, you will use the Pipenv library.
This command installs the necessary libraries as well as creates a virtual environment.
Activate the virtual environment using the command below:
Create a new Django projectnamedPayApp.
Using the full stop (.) at the end of thedjango-admincommand ensures the project avoids creating a duplicate directory of the project directory.
Create anew Django appwithin the project directory.
Now, proceed to build your API application using the steps below.
Creating a Payment Wallet REST API
Open thewallet/models.pyfile and define the wallet and transaction models.
In thewalletdirectory, create a new fileserializers.py, and write the wallet and transaction model serializers.
The serializers consider all the fields in the wallet and transaction models.
Inwallet/views.py, write the views for handling the logic of implementing the wallet functionality. This includes the deposit and withdrawal abilities.
Next, define the URL routing for the API by creating awallet/urls.pyfile:
In your project’surls.py, include the app’s URLs:
In thePayApp/settings.pyfile, add thewalletandrest_framwork appsto theINSTALLED_APPSlist.
This will register the wallet and rest_framework apps to the Django project application.
Consuming the API With Django Templates
Now, you’ll use the Django templates to create a simple frontend for consuming the API. Create awallet.htmlfile in thewallet/templates/directory and add the HTML code below.
The HTML file renders the deposit and withdrawal APIs in a beautiful user interface designed using Bootstrap.
User Interaction With Forms
In the HTML file, create a script tag and add the following code to the deposit form submission event listener.
Next, add the event listener for the withdrawal form submission using the code below:
The event listener is responsible for handling the deposit and withdrawal (#deposit-formand#withdraw-form) form submissions.
The URL for the fetch request is for matching the URLs for deposit and withdrawal actions.
The JSON responses for the deposits and withdrawals are then parsed to get the updated balance (data.balance). They are then formatted and displayed on the page.
Next, in thewallet/views.py, add the following update to render the wallet.html page:
In this example, you will use thefirst()query method to select a single user’s wallet for demonstration purposes.
Update theurls.pyfile by adding a path to thewallet_viewas follows:
Access the wallet page from the URL:http://127.0.0.1:8000/home/.
With everything set up and working as expected, execute themakemigrationsandmigratecommands. Finally, run the application:
To access the API endpoints, navigate tohttp://127.0.0.1:8000/api/.
Expected output:
Navigate to thelocalhostto interact with the wallet.
The wallet shows the balance and gives you the option to either deposit or withdraw.
Understanding Django Templates and Their Role in API Consumption
Despite being excellent for presenting static content, Django templates have certain restrictions when using APIs:
Build Scalable Applications
By providing a way to separate the presentation layer from the business logic, Django templates allow developers to focus on creating reusable and maintainable code. However, due to their limitations, Django templates may not be the best choice when consuming APIs at scale. Client frameworks like React are still useful in building scalable applications.
