Real-Time Taxi App with Django Channels and React

Real-Time Taxi App with Django Channels and React

​

Язык данного курса: Английский

Спойлер: Оригинальное описание

Learn how to develop and test a real-time ride-sharing app with Django Channels, React, and Cypress!

In this course, you will learn how to create a ride-sharing application that incorporates a React front-end with a Django back-end in a Docker container. The focus of this course is the real-time communication between client and server. We'll be using Django Channels and Redis to send and receive JSON messages over an open WebSockets connection.

Another important aspect of these chapters is Test-Driven Development (TDD). Each step of the way, we'll demonstrate how to test both the UI and the APIs.

What will you build?
Django app: We'll configure user authentication and authorization with core Django, coordinate two-way messaging with Django Channels and Redis, and construct a RESTful API with Django REST Framework.

React app: We'll build an infrastructure of React components and control the flow with routing; communicate with the backend using WebSockets, React services, and reactive programming; and leverage third-party apps like Google Maps to bolster the user experience.

What will you learn?
Part 1
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 data profile. 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, Redis, PostgreSQL, JSON Web Tokens (JWTs)

Part 2
In Part 2, you'll take the first steps in setting up the user interface for the app. We'll start by creating a React front-end application. Using JSX, 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 the Cypress end-to-end testing framework. Before we end this part, we'll learn how to run both the front-end and back-end in a single Docker container.

Tools and Technologies: React, Cypress, Docker, React Hooks

Part 3
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 JSX code necessary for establishing a WebSockets connection with the server and subscribing to it. Along with manual testing, we'll test the real-time nature of the app through automated tests. 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, React, Cypress, WebSockets, Google Maps, Geolocation, React Hooks

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
​

Перевод гугла.

Разработка приложения для такси в реальном времени с каналами Django и React

​

Узнайте, как разработать и протестировать приложение для совместного использования в реальном времени с помощью Django Channels, React и Cypress!

В этом курсе вы узнаете, как создать приложение для совместного использования поездок, которое включает в себя внешний интерфейс React с внутренним интерфейсом Django в контейнере Docker. Основное внимание в этом курсе уделяется обмену данными между клиентом и сервером в режиме реального времени. Мы будем использовать Django Channels и Redis для отправки и получения сообщений JSON через открытое соединение WebSockets .

Другим важным аспектом этих глав является разработка через тестирование (TDD). На каждом этапе мы будем демонстрировать, как тестировать как пользовательский интерфейс, так и API.

Что вы будете строить?
Приложение Django : мы настроим аутентификацию и авторизацию пользователей с помощью ядра Django, скоординируем двусторонний обмен сообщениями с Django Channels и Redis и создадим RESTful API с помощью Django REST Framework.

Приложение React : мы создадим инфраструктуру компонентов React и будем управлять потоком с помощью маршрутизации; взаимодействовать с бэкэндом с помощью WebSockets, служб React и реактивного программирования; и использовать сторонние приложения, такие как Google Maps, для улучшения взаимодействия с пользователем.

Чему ты научишься?
Часть 1
В части 1 вы узнаете, как программировать серверный код приложения для совместного использования. Мы начнем с разработки пользовательской модели аутентификации пользователя и профиля данных. Затем мы создадим модель данных для отслеживания поездок, в которых участвуют гонщики и водители, а также API, которые предоставляют доступ к этим данным. Наконец, мы будем использовать асинхронную природу каналов Django для отправки и получения сообщений через WebSockets . В этой части мы будем тестировать каждую функцию, чтобы убедиться, что код, который мы пишем, работает так, как мы ожидаем.

Инструменты и технологии: (асинхронный) Python, Django, Django REST Framework, Django Channels, Redis, PostgreSQL, JSON Web Tokens (JWT)

Часть 2
Во второй части вы сделаете первые шаги по настройке пользовательского интерфейса для приложения. Мы начнем с создания интерфейсного приложения React . Используя JSX , мы напишем компоненты и сервисы для дополнения API аутентификации, которые позволяют пользователям регистрироваться, входить и выходить из системы. Опять же, мы позаботимся о том, чтобы протестировать наше приложение, на этот раз с использованием среды полного тестирования Cypress . Перед тем, как закончить эту часть, мы узнаем, как запускать как интерфейсную часть, так и фоновую часть в одном контейнере Docker .

Инструменты и технологии: React, Cypress, Docker, React Hooks

Часть 3
В третьей части вы закончите кодирование внешнего интерфейса и соедините пользовательский интерфейс с серверными API. Продолжая то, что мы остановили в части 2, мы расширим наш пользовательский интерфейс, чтобы создать две панели мониторинга - одну для гонщика и одну для водителя. Здесь мы также создадим код JSX, необходимый для установления соединения WebSockets с сервером и подписки на него. Наряду с ручным тестированием мы будем проверять характер приложения в режиме реального времени с помощью автоматических тестов. Мы также добавим Карты Google, чтобы пользователи могли визуализировать свое текущее местоположение и введенные адреса.

Инструменты и технологии: (асинхронный) Python, Django, Django Channels, React, Cypress, WebSockets, Google Maps, геолокация, React Hooks