Developing a Real-Time Taxi App with Django Channels and Angular
Learn how to build and test a real-time ride-sharing app with Django Channels and Angular!
In this course, you will learn how to create a ride-sharing application that incorporates an Angular front-end with a Django back-end in a Docker container. The focus of this course is real-time communication between client and server, and we'll be using Django Channels and Redis to send and receive JSON messages over an open WebSockets connection.
Another important aspect of these lessons is test-driven development (TDD). Each step of the way, we will demonstrate how to test both the UI and the APIs.
What will you build?
A Django app. Configure user authentication and authorization with core Django. Coordinate two-way messaging with Django Channels and Redis. Construct a RESTful API with Django REST Framework.
An Angular app. Build an infrastructure of Angular components and control the flow with routing. Communicate with the backend using WebSockets, Angular services, and reactive programming. Leverage third-party apps like Google Maps to bolster the user experience.
- Current version: 1.0.1
- Last updated: January 11th, 2019
- Author: Jason Parent
What will you learn?
In Part 1, you'll learn how to program the server code of the ride-sharing application. We'll start by developing a custom user authentication model and profile data. Then we'll create a data model to track the trips that the riders and drivers participate in along with the APIs that provide access to that data. Lastly, we'll leverage the asynchronous nature of Django Channels to send and receive messages via WebSockets. Throughout this part, we'll be testing every function to make sure that the code we write operates the way we expect it to.
Tools and Technologies: (Asynchronous) Python, Django, Django REST Framework, Django Channels, Postgres, Redis
In Part 2, you'll take the first steps in setting up the user interface for the app. We'll start by creating an Angular front-end application. Using TypeScript, we'll write components and services to complement the authentication APIs that allow users to sign up, log in, and log out. Again, we'll make sure to test our application along the way, this time using Jasmine and the Angular testing framework. Before we end this module, we'll learn how to run both the front-end and back-end in a single Docker container.
Tools and Technologies: Angular, TypeScript, Jasmine, Karma, Docker
In Part 3, you'll finish coding the front-end and you'll stitch the UI together with the server APIs. Continuing where we left off in Part 2, we'll expand our UI to build two dashboards--one for the rider and one for the driver. Here, we'll also create the TypeScript code necessary for establishing a WebSockets connection with the server and subscribing to it. We'll test the real-time nature of the app through automated tests and manually. We'll also incorporate Google Maps so that users can visualize their current locations and the addresses they input.
Tools and Technologies: (Asynchronous) Python, Django, Django Channels, Angular, TypeScript, Jasmine, Karma, WebSockets, Google Maps, Geolocation
Table of Contents
Table of contents from Developing a Real-Time Taxi App with Django Channels and Angular...
- First Steps
- Our First Test
- User Data Model
- Authentication Service
- Landing Page
- Rider Dashboard
- Retrieving Trips
- Requesting Trips
- Trip Detail
- Driver Component
- Driver Dashboard Component
- Driver Detail Component
- Tying it All Together
- Google Maps
Get all 3 parts:
Join our mailing list to be notified about course updates and new tutorials.