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

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

Язык: English

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

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

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

Что вы будете создавать?

Приложение Django. Сконфигурируйте аутентификацию и авторизацию пользователя с помощью ядра Django. Координируйте двусторонний обмен сообщениями с каналами Django и Redis. Создайте RESTful API с помощью Django REST Framework.

Угловое приложение. Создайте инфраструктуру компонентов Angular и управляйте потоком с помощью маршрутизации. Общайтесь с бэкэндом с помощью WebSockets, сервисов Angular и реактивного программирования. Используйте сторонние приложения, такие как Google Maps, чтобы улучшить взаимодействие с пользователем.

Спойлер: Что мы изучим

Часть 1

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

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

Часть 2

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

Инструменты и технологии: Angular, TypeScript, Жасмин, Карма, Докер

Часть 3

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

Инструменты и технологии: (асинхронный) Python, Django, Django Channels, Angular, TypeScript, Jasmine, Karma, WebSockets, Google Maps, Geolocation

Спойлер: Содержание

Part 1

• Introduction
• Changelog
• Getting Started
• Authentication
• HTTP
• WebSockets
• UI Support
• User Photos
• Conclusion

Part 2

• Introduction
• First Steps
• Routing
• Our First Test
• User Data Model
• Authentication Service
• Docker
• Forms
• Landing Page
• Conclusion

Part 3

• Introduction
• Rider Dashboard
• Retrieving Trips
• Requesting Trips
• Trip Detail
• Refactor
• Driver Component
• Driver Dashboard Component
• Driver Detail Component
• Tying it All Together
• Google Maps
• Notifications
• Conclusion