How To Build a Django Web App From Development to Production and Hosting on a Microsoft Azure Virtual Machine, Part 1.

Part 1 of 5: Developing the Django Web App

Introduction

This series will look into developing a Django web app from testing to production and to hosting onto a virtual machine. We are going to work with Microsoft Azure, virtual machines.

It will be a five-part series split into the following topics:

  1. Part 1: Developing the Django Web App: Here, I will improve the “Restful A.P.I.s in Django Project” I built by building its UI/Web platform as it was only accessible via postman, so that users can access the system via web interface with more features
  2. Part 2: Acquire a VM from Microsoft Azure: Here, I will take a user through the process of choosing the best VM with regards to cost and performance
  3. Part 3: Setting up the VM and uploading of Project using GIT
  4. Part 4: Configuring the Django project on the VM and making it accessible online
  5. Part 5: Monitoring of the Django Web App using Microsoft Azure Tools

Intended audience: Who the article is for

This article targets python/Django web developers who want to build and migrate their web apps from the testing phase to a production phase by hosting the system on a virtual machine. This will provide a good guideline on how to do so regardless of the type of Django project.

Case Study: What the article is going to cover

This article follows up from the previous article on “Restful A.P.I.s in Django Project”. The previous article showed how to implement APIs in Django for integration with mobile devices but did not provide a user interface for a developer to view the API documentation and features such as API subscriptions.

This project aims to develop the user interface for the “Restful A.P.I.s in Django Project” so as to have a Django project with an interactive UI deployed to a production server.

Requirements:

  1. Some knowledge of Python and Django
  2. Some knowledge on using Postman
  3. Knowledge on using Gmail as an email service for Django, here is how to do so.

Getting started with the Web App

Creating a Django Project

  1. From your terminal, navigate to the folder/location your project is to reside
  2. We will clone the “Restful A.P.I.s in Django Project”, type the command: “git clone https://bitbucket.org/dans0l/djangorestapis.git
  3. From the terminal, navigate into the cloned project folder called “djangorestapis”, where you will create and activate your project’s virtual environment by typing in the terminal the command “python –m venv venv”
  4. In windows, type “venv\Scripts\activate” in the terminal.
  5. In Mac/Linux, type ”source venv/bin/activate” in the terminal.
  6. After your virtual environment has been activated, run the code below in the terminal to install the python packages, “pip install –r requirements.txt”
  7. Create an SQLite database that the project will use by typing in the terminal the command: “python manage.py makemigrations”
  8. Apply database changes by typing in the terminal the command: “python manage.py migrate”
  9. Create a superuser by typing the command
    • python manage.py createsuperuser
    • Enter the username
    • Enter the email
    • Enter the password
    • Remember these superuser credentials; they will be needed when logging into the Django admin interface
  10. Start your server by typing on the terminal the command: “python manage.py runserver”
  11. If the server starts successfully, there should be a login webpage up and running on the location: http://127.0.0.1:8000/admin
  12. While in the terminal type Ctrl+C to stop the server
  13. Everything from now on will be performed inside this python activated environment.

We are stopping the server so as to create the user interface HTML pages and URLs pointing to them and then apply the changes before restarting the server.

Creating Project CSS File

  1. Open the Django project folder in your code editor
  2. Open the “countries” app folder
  3. In the “countries” app folder, create a folder labelled “static”
  4. Inside the created “static” folder create another folder labelled “countries”
  5. Inside the “countries” folder just created inside the “static” folder, create a css file labelled “main.css”
  6. Copy the code below into the “main.css” file

Configure Django Project Settings

  1. Open your Django project folder: “djangorestapis”
  2. Locate a folder with a similar name to your Django project folder, this folder is in the same directory as your “users” app folder.
  3. Inside this folder is a python file labelled “settings.py”
  4. Open the “settings.py” file and locate the python variable INSTALLED_APPS, which is a python list located close to the start of the file.
  5. Inside the “settings.py” file, locate the variable INSTALLED_APPS
  6. The variable installed_apps is a list where you will register one of the apps from the python packages we just installed from the “requirements.txt” file
  7. Insert the code below inside the list: This app is used to beautify bootstrap forms.
  8. Paste code below at the end of the “settings.py” file; it will be responsible for allowing our app to send email notifications using Gmail as email service, here’s an article on “How to use Gmail as email service in Django”.

Creating your business logic for Countries App

We will now create the business logic in the “views.py” file located in the “countries” app folder. Below is how to do so:

  1. Open the “countries” app folder
  2. Locate a python file labelled “views.py”
  3. Paste the code below

Views Code Logic

We start by importing the following methods:

  • Render – This method is used to return a HTML page to the user
  • Redirect – This method is used to redirect the user back to the URL passed to it as an argument
  • API and Subscription – One of the two countries database tables or models we created
  • messages – This is a Django built-in method that can be used to send pop up messages from your views to the HTML pages

We now build the views/functions or methods below:

  • Home – This is a method or function view that accepts a web request and returns the home HTML page render
  • list_api – This is a method or function view that will display the documentation for the “Get API List”  API
  • subscribe_api – This method or function view will display the documentation for the “Subscription A.P.I.” 
  • subscribed_apis – This is a method or function view that will display the documentation for the “Subscribed APIs”  API
  • unsubscribe_apis – This is a method or function view that will display the documentation for the “Unsubscribe from API”  API
  • continents_apis – This is a method or function view that will display the documentation for the “Get Continents”  API
  • countries_apis – This is a method or function view that will display the documentation for the “Get Countries”  API
  • cities_apis – This is a method or function view that will display the documentation for the “Get Cities”  API
  • unsubscribe – This is a method or function view that will allow a user to unsubscribe from an API
  • subscribe – This is a method or function view that will allow a user to subscribe from an API

Create Login, Register and User Profile Update Forms

We will first create forms displayed in the user HTML pages to allow users to log in, register and update their profile information.

These are the forms used to render user data onto their profile pages

  1. Open the “users” app folder
  2. Locate/create a python filed labelled “forms.py”
  3. Paste the code below

Creating your business logic for Users App

We will now create the business logic in the “views.py” file located in the “users” app folder. Below is how to do so:

  1. Open the “users” app folder
  2. Locate a python file labelled “views.py”
  3. Paste the code below

Views Code Logic

We start by importing the following methods:

  • Render – This method is used to return a HTML page to the user
  • Redirect – This method is used to redirect the user back to the URL passed to it as an argument
  • UserRegisterForm and UserUpdateForm – The two user forms we created above
  • login_required – This is a Django built-in method that forces a user to first log in before viewing the requested page
  • Token – The in-built django restframework table responsible for saving the user Tokens

We now build the views/functions or methods below:

  • register – This is a method or function view that will return a page responsible for signing up users to the platform
  • profile – This is a method or function view that will display the user profile page

Creating “Countries” HTML Templates

  1. On these HTML templates are where the different countries API documentation data will be displayed
  2. We will start by creating HTML templates related to the “countries” app we created, which are:
    • home.html – The default home page for the web app with brief instructions on how the web app works
    • base.html – This is the page that will display the “Get Cities” API documentation
    • api_cities.html – This is the page that will display the “Get Cities” API documentation
    • api_countries.html – This is the page that will display the “Get Countries” API documentation
    • api_continents.html – This is the page that will display the “Get Continents” API documentation
    • api_unsubscribed.html – This is the page that will display the “Unsubscribe from API” API documentation
    • api_subscribed.html – This is the page that will display the “Subscribed APIs” API documentation
    • api_subscribe.html – This is the page that will display the “Subscription A.P.I.” API documentation
    • api_list.html – This is the page that will display the “Get API List” API documentation
  3. To create the above “countries” HTML templates, do the following:
    • In your project folder, navigate into the “countries” folder
    • Create a folder labelled “templates”
    • Inside the “templates” folder create another folder and label it “countries”
    • Inside the “countries” folder you have just created inside the “templates” folder
    • Create the following blank HTML pages; home.html, base.html, api_cities.html, api_countries.html, api_continents.html, api_unsubscribed.html, api_subscribed.html, api_subscribe.html and api_list.html.

4. Below is a screenshot of the “countries” directory tree:

5. Below are the HTML codes to be placed on each HTML page

Creating “users” HTML Templates

  1. On these HTML templates is where the different user data will be displayed.
  2. We will start by creating HTML templates related to the “users” app we created, which are:
    • login.html – The log in page
    • logout.html – The log out page
    • register.html – The register or sign up page
    • profile.html – The user profile page
    • password_reset.html – The page a user will input their email for a password reset link to be sent to
    • password_reset_complete.html – The page that will notify a user that a password reset link has been successfully sent to the provided email address
    • password_reset_confirm.html – This page where a user will enter their new password
    • password_reset_done.html – This page will be used to display to the user the success message after the password has been changed.
  3. To create the above “users” HTML templates, do the following:
    • In your project folder, navigate into the “users” folder.
    • Create a folder labelled “templates”
    • Inside the “templates” folder create another folder and label it “users”
    • Inside the “users” folder you have just created inside the “templates” folder
    • Create the following blank HTML pages; login.html, logout.html, register.html, profile.html, password_reset.html, password_reset_complete.html, password_reset_confirm.html, password_reset_done.html and send_email.html.
    • Below is a screenshot of the “users” directory tree:

4. Below are the HTML codes to be placed on each HTML page:

Creating the “countries” App URLs

These are the URLs that the user will use to navigate the “countries” web app. They are usually placed in a file called “URLs.py”. Do the following to create/edit this file:

  1. Open the “countries” app folder
  2. Locate/create a python file labelled “URLs.py”
  3. Paste the code below

Creating the “users” App URLs

These are the URLs that the user will use to navigate the “users” web app. They are usually placed in a file called “URLs.py”. Do the following to create/edit this file:

  1. Open the “users” app folder
  2. Locate/create a python file labelled “URLs.py”
  3. Paste the code below

Configure Project URLs

This is where the URLs that point to each Django app are placed to be accessible from a browser. They are usually placed in a file called “URLs.py”. Do the following to create/edit this file:

  1. Open your Django project folder: “djangorestapis”
  2. Locate a folder with a similar name to your Django project folder; this folder is in the same directory as your “countries” app folder
  3. Open the “djangorestapis” folder that is inside the Django project folder.
  4. Locate/create a python file labelled “URLs.py”
  5. Paste the code below

Project Tree

Below is a screenshot of how your project tree should look like, assuming the name of your Django project is “djangorestapis”:

Run the server

  1. cd/navigate into the “djangorestapis” Django project via the terminal
  2. Activate the virtual environment by typing the command: “venv\Scripts\activate”
  3. Start the server by typing the command: python manage.py runserver
  4. If there’s nothing wrong, the server should be up on http:127.0.0.1:8000

Testing the System

  1. Once the server is up
  2. Go to the web page address e.g. http://127.0.0.1:8000
  3. Follow the instructions on the home page on how to test the system

NB: Remember to navigate to this tutorial here to learn how to integrate Gmail as an email client for your Django project. The credentials retrieved from Gmail are to be placed in the project settings file.

Conclusion

You should now have a basic understanding of creating an API management System in Django with an interactive user interface for users to get API documentation from and manage their API subscriptions.

Further improvements could be done on the project such as, allowing users to view how many times they called a particular API and any errors raised before.

Find Part 2 of this series here

Finally, you can find the code snippets in this @repo.

Quick Guide

If you want to clone the project and get it up running, below is how to do so in minutes:

  1. Clone it:
    • git clone https://bitbucket.org/dans0l/series_1.git
  2. Cd into the Django web app:
    • cd series_1/djangorestapis
  3. Create a venv:
    • python3 -m venv venv
  4. Activate venv:
    • Mac/Linux: source venv/bin/activate
    • Windows: venv\Scripts\activate
  5. Install the requirements:
    • pip install -r requirements.txt
  6. Create DB
    • python manage.py makemigrations
  7. Apply DB Changes:
    • python manage.py migrate
  8. Create a superuser by typing the command
    • python manage.py createsuperuser
    • Enter the username
    • Enter the email
    • Enter the password
    • Remember these superuser credentials; they will be needed when logging into the Django admin interface
  9. Run the server:
    1. python manage.py runserver
  10. Navigate to the site: http://127.0.0.1:8000
  11. Follow the instructions on the home page to start using the site

Please let me know how your experience was, Thank you.


0 Shares:
You May Also Like