Momkhulu Hospital Resource Allocation Tool
By: Nyasha Bryan
Tags: Software Engineering, Websocket, Django Channels, Asynchronous, Django

Django and the Django REST Framework

Django was the default choice for the development of the web application. Django is one of the most popular and stable Python-based web frameworks. Django has many inbuilt features, but I felt it was also necessary to use Django REST Framework, which is an extension to Django for use specifically for RESTful APIs. I designed specific API endpoints for RapidPro’s Webhooks. These API endpoints became the bridge of information between the RapidPro and the application.

Django Channels

The app required the instantaneous update of the website and browser screens showing the patient information. Instantaneous updates were important because they allowed the clinicians around the hospital to be up to date with what was going on in the hospital in real-time. With the relevant clinicians always up to date, organizing operations would become more efficient.

To achieve this, I used Django Channels, which is another extension for Django. Django Channels uses the WebSocket protocol for connection instead of HTTP. HTTP, which is the most common web protocol, works by a client sending a request to the server, and the server responding after processing the request. This means that the client can only receive new data if they have requested it. Now if the client desired to get almost instantaneous updates, they would have to keep polling the server for data through a loop, which is very wasteful of resources. WebSocket, on the other hand, opens a connection between the client and the server and keeps this connection open. This allows the server to push data to the client asynchronously without the client requesting it, which is far more elegant and resource efficient! It allowed me to design the app in such a way that if there is any change in the patient’s information, the pages showing the patient’s information are updated almost instantaneously.

Channels is a project that takes Django and extends its abilities beyond HTTP — to handle WebSockets, chat protocols, IoT protocols, and more. — Channels Documentation.

Because Channels uses WebSockets and is asynchronous, it is more complex and so more difficult to use than Django. While Django uses Views, Channels uses Consumers. The Channels Consumers are the applications which are linked to each of the WebSocket endpoints and connect to the client. The WebSocket connections are initiated by Javascript in the client’s browser. The client-side Javascript requests the WebSocket connection to a particular Consumer and keeps this connection open. While the connection is open, the WebSocket on the client-side listens for any asynchronous messages from the Consumer application.

Illustration showing the difference between the HTTP and WebSocket protocols.

To ensure that the page is up to date at all times, every update to the patient entries triggers the application to send an update of the table to all connected browsers via the WebSocket. On receiving the updated table, the script on the client-side updates the view page.

What is most interesting about Channels is its implementation of WebSockets. The use of WebSockets means that the deployment of a Channels based application is in a few ways different from that of a regular Django application. Because it is asynchronous, Channels is run through ASGI (Asynchronous Server Gateway Interface) instead of the regular WSGI (Web Server Gateway Interface). Since Channels needs ASGI, it is deployed using the Daphne server. Daphne is a web server designed for Django Channels since the WebSockets do not work with synchronous servers like Gunicorn.

Javascript and JQuery

The implementation of Channels required a client-side script capable of setting up the WebSocket connection with the Consumer on Channels. Apart from using JavaScript just for the WebSockets implementation, JQuery came in handy again in the design of responsive web pages.

Bootstrap 4

I used Bootstrap 4 for the design of all the pages of the web application. Bootstrap is a front-end framework for rapid development of responsive web pages across all device sizes. I felt it was important that clinicians should be able to view the page on all kinds of devices, from a large screen terminal to a small mobile phone, allowing them flexibility in the way they work and share the data. Bootstrap along with some custom CSS allowed for the rapid development of a standardized and attractive page which could be used across all browsers and devices.