Как создать и развернуть бессерверную игру с помощью DataStax Astra DB, JAMStack, Stargate и Netlify…

Автор: Дэвид Джонс-Джиларди

В одном из наших многочисленных бесплатных руководств на Канале разработчиков DataStax на YouTube мы рассказали вам, как создать и развернуть бессерверную игру — BattleStax — онлайн-игру для вечеринок, в которую вы можете играть со своими друзьями.

BattleStax реализован как приложение JAMStack, использующее Stargate, Netlify, DataStax Astra DB и GitHub, чтобы продемонстрировать, как создавать и развертывать приложения с использованием современных масштабируемых архитектур. В этом посте мы разберем видео, чтобы помочь вам быстро создать собственную игру BattleStax с помощью React и Redux, реализованных с конвейером CI/CD, глобальной сетью доставки контента (CDN) и Apache Cassandra®.

Технологии, с которыми мы вас познакомим:

React для внешнего интерфейса
Redux для управления состоянием
Stargate и Astra DB для серверной части
Netlify для развертывания

Даже если вы никогда не слышали о JAMStack или не работали с JavaScript, у нас есть все, что предварительно загружено для вас в облаке, чтобы вы могли следовать упражнениям, информации и решениям. Мы надеемся, что к концу урока у вас появятся новые знания о том, как работать с JAMStack.

Что такое JAMStack?

JAMstack — это новая стандартная архитектура для Интернета, а JAM расшифровывается как JavaScript API Markup. Он использует все современные технологии, которые у нас есть, и объединяет их в единую платформу для развертывания приложения от начала до производства. Поскольку он имеет полную непрерывную интеграцию, он выигрывает в безопасности, масштабируемости, производительности, удобстве обслуживания и переносимости.

Используя рабочие процессы Git и современные инструменты сборки, предварительно обработанный контент передается в CDN и становится динамическим с помощью API и бессерверных функций. Технологии в стеке включают фреймворки JavaScript, генераторы статических сайтов, Headless CMS и CDN.

JAMstack использует статические страницы для доставки контента, а не для рендеринга контента во время выполнения. Традиционные серверы создают веб-сайт, загружают его на сервер и отображают в режиме реального времени. В случае с JAMStack вы фактически выполняете предварительный рендеринг всех страниц, отображая статический контент. Но он по-прежнему предлагает динамические бессерверные функции, подключаясь к серверным микросервисам. Микросервисная архитектура обеспечивает быструю, частую и надежную доставку больших и сложных приложений.

По сути, мы выполняем предварительную сборку, когда создаем и предварительно отображаем все эти страницы и отправляем их на различные устройства в CDN. Если вы не знакомы с CDN, один из способов понять это — он берет ваш контент и автоматически распределяет его по пограничным серверам как часть своей системы.

Таким образом, вместо одного веб-сервера, на котором размещен ваш сайт, и пользователей, подключающихся к этим серверам, чтобы попасть на ваш сайт, ваш контент распространяется по всему миру в этой сети, что делает доставку мгновенной.

Если вы хотите узнать больше, ознакомьтесь с нашим Руководством по JAMStack на GitHub.

Почему мы используем Apache Cassandra?

Cassandra — это распределенная база данных NoSQL, которая используется подавляющим большинством компаний из списка Fortune 100. Facebook, Instagram и Netflix используют Apache Cassandra. Если вы заходите на свой телефон и открываете приложение, скорее всего, вы уже используете его.

Apache Cassandra помогает компаниям надежно и масштабируемо обрабатывать большие объемы быстро меняющихся данных. Известная своей производительностью в больших масштабах, Cassandra считается Porsche Lamborghini в мире разработчиков, но может быть привередливой, если вы не знаете, как правильно ею управлять. Cassandra практически неограниченно масштабируется. Здесь нет главного узла, а Cassandra — это одноранговая система. На самом деле вы можете отключить две трети своего кластера, но при этом оставаться в рабочем состоянии и быть доступным для упрощения операций, а также для записи и чтения данных.

DataStax Astra DB, построенный на основе лучшего дистрибутива Cassandra, обеспечивает возможность разработки и развертывания приложений, управляемых данными, с помощью облачного сервиса без проблем с администрированием базы данных и инфраструктуры. Автоматизируя настройку и настройку, DataStax Astra радикально упрощает операции с базами данных.

Astra DB — это, по сути, Cassandra в облаке. Что действительно полезно, так это то, что с точки зрения разработки, даже используя только бесплатный уровень, вы можете загрузить его, подключить свою базу данных Cassandra к Astra и Netlify и заставить ваше приложение работать. И если вы решите перейти на открытый исходный код и запустить собственную Cassandra, вы тоже можете сделать это с тем же драйвером и кодом.

Обзор учебника

Все пошаговые инструкции со скриншотами вы найдете на GitHub. Мы заранее подготовили IDE, конфигурации и зависимости, поэтому вам не нужно ничего скачивать, и вы можете пройти семинар в облаке. Просто запустите GitPod прямо из своего кода и прыгайте в него.

Начните с следования инструкциям в нашем репозитории BattleStax на GitHub, чтобы настроить и развернуть свое первое приложение, создать репозиторий BattleStax и настроить учетную запись Netlify.

Вот обзор четырех лабораторных работ, которые мы проведем на GitHub.

Начальная загрузка: Установите и разверните свое первое приложение
Лабораторная работа 1 — Введение в Netlify
Представьте свой API «hello world»
Лабораторная работа 2 — Что такое DataStax Astra и Stargate?
Внедрение API бессерверных данных
Лабораторная 3 — Что такое Redux и React?
Создание состояния клиента с помощью Redux
Лабораторная работа 4 — Привязка Redux к пользовательскому интерфейсу

Готовый? Пойдем!

Лабораторная работа 1: Введение в Netlify + Раскройте свою точку доступа «hello world»

Давайте поговорим о Netlifyи о том, что он может сделать для вас (или не стесняйтесь переходить к демонстрации вашего «привет мир API»)

Возможно, вы уже использовали функции Netify по сборке, упаковке, развертыванию и размещению для настройки и развертывания вашего пустого приложения. Netlify также может настраивать ваши сборки и управлять атомарными развертываниями.

Netlify позволяет развертывать бессерверные функции Lambda без учетной записи AWS, а управление функциями осуществляется непосредственно в Netlify. Это означает, что вы можете создавать бессерверные функции в своем приложении, к которым вы можете беспрепятственно обращаться в своей локальной среде или через глобальную CDN (после развертывания). Вы можете сделать это без фактического сервера для развертывания кода.

Помните, мы создали статические страницы и собираемся сгенерировать эти статические страницы. Вот тут-то и появляются эти функции Netlify, создавая бессерверные функции.

Если вы хотите углубиться и узнать больше, нажмите здесь для получения подробной документации: Что Netlify может сделать для вас.

Приступаем к кодированию. У вас есть два варианта:

Вариант A: облачный GitPod (рекомендуется)
Вариант Б: Локальная среда разработки

Мы рекомендуем Вариант А. Gitpod — это облачная IDE, основанная на Eclipse Theia, очень похожая на VSCode. Вам необходимо пройти аутентификацию с помощью вашей учетной записи GitHub, и GitPod инициализирует вашу рабочую область, создавая решение. Нажмите здесь, чтобы запустить Gitpod, чтобы инициализировать вашу среду.

В качестве альтернативы вы можете использовать свой ноутбук, что объяснено в документации.

Лабораторная работа 1 расскажет, как:

Лабораторная работа 2: DataStax Astra DB и Stargate + реализация бессерверного API данных

Мы кратко рассмотрели Astra DB в разделе выше, а теперь мы представим Stargate, шлюз данных с открытым исходным кодом для абстрагирования конкретных концепций Cassandra от разработчиков приложений и поддержки различных параметров API. Он развертывается между клиентскими приложениями и базой данных, чтобы обеспечить уровень абстракции, который можно использовать для формирования вашего доступа к данным в соответствии с потребностями вашего приложения.

Давайте реализуем CRUD API в Astra DB. В Лабораторной работе 2 учебника BattleStax мы:

Создайте базу данных Astra DB для хранения игровых документов.
Создайте тестовые примеры, чтобы убедиться, что наш вызов API работает правильно.
Создайте вызов API к Astra DB для создания игрового документа на основе требований нашего теста.

Рис. 5. С помощью Document API можно сохранять и искать документы JSON без схемы в Cassandra.

Лабораторная работа 3: Введение в Redux и React + Создание состояния клиента с помощью Redux

React — это быстрая, основанная на компонентах, интерфейсная библиотека JavaScript. React обычно запускается в вашем браузере и отображает пользовательские интерфейсы одностраничных веб-приложений. Redux — это библиотека JavaScript, которая используется в основном для управления состоянием приложения. Redux поддерживает состояние всего приложения в одном неизменном дереве состояний (объекте), которое нельзя изменить напрямую. Когда что-то меняется, создается новый объект (используя действия и редукторы).

React и Redux работают вместе, позволяя вам создавать компоненты, которые реагируют на изменения состояния приложения. Компоненты, затронутые изменением состояния, повторно визуализируются с новыми данными. Компоненты также отправляют действия, например, при нажатии кнопки.

Узнайте больше, прочитав нашу Документацию по Redux и React здесь.

В Лаборатории 3 мы будем:

Создайте шаблонный код игрового фрагмента, внедрив один редьюсер, экспортировав действие и селектор.
Запустите тесты, чтобы опробовать функциональность нашего игрового фрагмента.

Мы расскажем, как:

Лабораторная работа 4: привязка Redux к пользовательскому интерфейсу

На этом последнем и последнем шаге мы уже создали пользовательский интерфейс с помощью React, но теперь нам нужно связать его с нашим игровым состоянием.

В Лаборатории 4 мы будем:

Создайте компонент NewGame.js, подключив его к Redux.
Создайте тест, чтобы опробовать функциональность NewGame.js.

Мы расскажем, как:

Резюме

Если вы выполнили все шаги в руководстве GitHub, к этому моменту у вас будет:

Развернул приложение через конвейер CI/CD с помощью GitHub Actions.
Научился использовать бессерверные функции, доступные по всему миру через Netlify.
Использовал их на основе лучшей распределенной базы данных NoSQL Apache Cassandra на DataStax Astra DB.

И все это можно было сделать, не прикасаясь к серверу, не развертывая внутренний код и не общаясь с друзьями из ИТ. Наслаждайтесь созданием своего следующего вирусного приложения JAMStack!

Ознакомьтесь с дополнительными руководствами на нашем Канале разработчиков DataStax на YouTube и подпишитесь на оповещение о событиях, чтобы получать уведомления о новых семинарах для разработчиков. Для эксклюзивных сообщений обо всех данных: Cassandra, потоковое вещание, Kubernetes и многое другое; следуйте DataStax на Medium.