Как создать бэкенд Astro.js?

Astro.js – это генератор статических сайтов (SSG) и фронтенд-фреймворк для создания быстрых и современных веб-приложений.

Он позволяет создавать быстрые и легкие веб-сайты за счет предварительного рендеринга статических файлов HTML, CSS и JavaScript во время сборки.

В отличие от традиционных SSG, Astro.js позволяет наполнять статические страницы JavaScript во время выполнения, что дает возможность создавать динамичные и интерактивные сайты.

Эта статья содержит исчерпывающее руководство по созданию приложения Astro.js с использованием Back4app в качестве бэкенда как услуги (BaaS).

В ней вы найдете обзор Astro.js, его преимуществ и ограничений, а также пошаговое руководство по созданию и размещению приложения Astro.js.

Преимущества Astro.js

Astro.js обладает несколькими ключевыми особенностями, которые делают его отличным выбором для создания современных сайтов, в том числе:

Островная архитектура

Островная архитектура – это шаблон веб-архитектуры, который предполагает разбиение веб-страницы на инкапсулированные и независимые островки функциональности.

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

Astro.js разделяет ваш пользовательский интерфейс (UI) на небольшие изолированные компоненты, известные как “острова Astro”. Вы можете использовать эти острова на любой странице, заменяя, таким образом, неиспользуемый JavaScript легковесным HTML.

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

Минимальный JavaScript

Astro придерживается подхода “меньше JavaScript”. Он отправляет JavaScript клиенту только тогда, когда это необходимо для интерактивности. Это позволяет уменьшить размер пакета JavaScript и улучшить время загрузки.

Минимальный JavaScript в Astro.js дает несколько ощутимых преимуществ, включая повышение производительности сайта, улучшение SEO, снижение потребления ресурсов, повышение безопасности и более отзывчивый пользовательский опыт.

Такой подход позволяет создавать эффективные и производительные веб-приложения, что делает Astro.js привлекательным выбором для современной веб-разработки.

Интеграция с популярными фреймворками

Вы можете использовать Astro.js с различными популярными JavaScript-фреймворками, включая React, Svelte, Vue и Lit.

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

Такая гибкость и совместимость делают Astro.js привлекательным выбором для различных проектов.

Оптимизированная загрузка

Оптимизация загрузки – основное преимущество Astro.js. Она коренным образом меняет подход к разработке и доставке веб-страниц, фокусируясь на повышении удобства использования и производительности сайта.

Astro оптимизирует загрузку и рендеринг для различных устройств, включая маломощные, такие как смартфоны. Его цель – обеспечить плавную работу независимо от устройства пользователя и условий сети.

Ограничения Astro.js

Astro.js обладает некоторыми ограничениями, о которых вы должны знать. Вот некоторые из них:

Совместимость с экосистемой

Astro.js был разработан для работы с такими популярными фронтенд-фреймворками, как React, Svelte и Vue.js. Однако его экосистема менее развита, чем у таких фреймворков, как React или Vue, поэтому вы можете найти меньше сторонних библиотек и компонентов, специально созданных для Astro.

Требование к знакомству с фреймворком

Astro.js позволяет использовать различные фронтенд-фреймворки, что требует знакомства с каждым выбранным фреймворком.

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

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

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

Оптимизация обучения

Под оптимизацией понимается понимание и реализация конкретных стратегий для достижения максимальной производительности веб-приложений, созданных с помощью фреймворка.

Хотя Astro.js создан для эффективности и скорости, полное использование его возможностей требует от вас глубокого понимания его методов оптимизации и внедрения их в процесс разработки. Это может оказаться сложным и потребовать глубоких знаний.

Создание приложения для журнала

Следуя этому руководству, вы создадите базовое приложение для ведения журнала, используя фреймворк Astro.js и React.js.

Журнальное приложение будет обеспечивать функциональность CRUD (создание, чтение, обновление, удаление) и использовать Back4app для хранения и поиска данных.

Вы можете создать проект Astro.js, выполнив эту команду в терминале:

npm create astro@latest

Приведенная выше команда сгенерирует базовый проект Astro.js и проведет вас через настройку приложения, включая такие аспекты, как использование TypeScript и уровень его строгости.

Чтобы добавить React.js в проект Astro.js, выполните эту команду в терминале:

npx astro add react

Теперь ваш проект готов. Вы можете начать разработку приложения в вашей любимой IDE. Сначала вы определяете глобальные стили и макет приложения.

Чтобы определить глобальные стили, создайте папку styles в каталоге src. Внутри папки styles создайте файл с именем global.css и определите в нем глобальные стили.

Например, так:

Когда глобальные стили установлены, пришло время определить макет. Вы найдете файл Layout.astro в папке layouts в каталоге src.

Замените существующий код в файле Layout.astro на следующий блок кода:

Блок кода выше представляет компонент макета. Он импортирует глобальные стили, устанавливает метаданные и предоставляет место для динамического содержимого с помощью элемента slot.

Основным содержимым компонента является заголовок h1 с определенным стилем, заданным в теге style.

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

Чтобы применить макет к домашней странице, выполните те же действия в файле index.astro, расположенном в каталоге src/pages.

Например, так:

Этот блок кода определяет домашнюю страницу вашего приложения. Он определяет навигационное меню со ссылкой на страницу “/journal” и применяет специальные стили для центрирования и выравнивания навигационного элемента.

Чтобы создать страницу журнала, создайте файл с именем journal.astro в каталоге src/pages и включите в него следующий блок кода.

Приведенный выше блок кода представляет собой страницу журнала для вашего приложения. Он импортирует компонент layout и оборачивает секцию HTML, чтобы обеспечить последовательную структуру страницы.

Код также определяет форму для записи записей в журнале, оснащенную полями ввода для заголовка и тела, а также кнопкой “Журнал”. Стили CSS, заданные в теге style, управляют внешним видом формы и ее элементов.

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

npm run dev

Команда выше предоставит вам ссылку http://localhost:4321/. Перейдите по этой ссылке в веб-браузере, чтобы просмотреть ваше приложение.

Главная страница должна выглядеть следующим образом:

Чтобы просмотреть страницу журнала, нажмите на навигационную ссылку “Зарегистрировать свой опыт”.

Интеграция Back4app с вашим приложением

Back4App – это облачная сервисная платформа, предназначенная для упрощения разработки и управления приложениями. В качестве бэкенда Astro.js будет использовать Back4app.

Используя фреймворк Parse Server с открытым исходным кодом, он предоставляет надежный набор инструментов, которые позволяют разработчикам сосредоточиться на разработке внешних компонентов, упрощая при этом внутренние сложности.

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

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

Создание учетной записи Back4app

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

1. Посетите веб-сайт Back4app.
2. Нажмите на кнопку “Зарегистрироваться”.
3. Заполните форму регистрации и отправьте ее.

Представляем плагин Back4app ChatGPT

Недавно компания Back4app представила плагин ChatGPT, который поможет разработчикам и нетехническим энтузиастам создавать и взаимодействовать с приложениями Back4app.

Используя плагин Back4app ChatGPT, вы можете преобразовать ваши разговоры в реальные приложения. Это означает, что вам не нужен опыт работы с платформой Back4app перед началом взаимодействия.

Чтобы получить доступ к плагинам ChatGPT, вы должны подписаться на ChatGPT Plus. После подписки нажмите на кнопку “GPT-4”, чтобы открыть всплывающее меню. Выберите пункт “Плагины”, чтобы продолжить.

На экране появится список доступных плагинов. Найдите и выберите плагин Back4app (введите “Back4app” в строку поиска).

Создайте приложение Back4app с помощью плагина

Создание приложения Back4app с помощью плагина Back4app на ChatGPT – простая задача. Сообщите ChatGPT о типе приложения, которое вы хотите создать, и он сделает все остальное.

Например:

Как видно на изображении выше, плагин Back4app ChatGPT создает приложение Back4app под названием “Приложение Journal”.

Чтобы убедиться в том, что плагин Back4app ChatGPT успешно создал приложение, перейдите на сайт Back4app, войдите в свою учетную запись и проверьте приложения. Вы должны найти приложение под названием “приложение журнала” в списке ваших приложений.

Используя плагин, создайте класс журнала в приложении Journal.

Как видно на изображении выше, плагин Back4app ChatGPT создает класс журнала и добавляет в него заголовок, содержание и поле даты.

Добавление данных в приложение Back4app

Используя плагин Back4app ChatGPT, вы также можете добавлять пользовательские данные в приложение. Например, вы можете добавить пользовательский текст в поля заголовка и содержания.

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

Подключение к Back4app

Чтобы подключить ваше приложение журнала к приложению Back4app, вам необходимо установить Parse JavaScript SDK в ваше приложение.

Для этого выполните следующую команду в терминале:

npm install parse 

После установки Parse JavaScript SDK вам понадобятся учетные данные Application ID и Javascript KEY.

Вы можете найти эти учетные данные в разделе Security & Keys на панели управления вашего приложения Back4app. Храните идентификатор приложения и Javascript KEY в безопасном месте в вашем приложении.

Добавление данных в Back4app из приложения

Ранее в этой статье вы узнали, как добавить данные в Back4app с помощью плагина Back4app ChatGPT. Чтобы сделать это с помощью своего приложения-журнала, вы воспользуетесь Parse Javascript SDK.

В файл journal.astro добавьте приведенный ниже блок кода:

Этот блок кода представляет собой сценарий JavaScript, который интегрируется с Parse для создания и сохранения записей в журнале. Он импортирует минифицированную версию Parse из файла parse/dist/parse.min.js и вызывает метод initialize.

Этот метод принимает в качестве аргументов учетные данные Application_ID и Javascript_KEY. После вызова метода initialize на Parse установите свойство serverURL на Parse в https://parseapi.back4app.com/.

Код выбирает элементы input, textarea и button из DOM и присваивает их переменным title, body и button.

Поле ввода принимает заголовок записи в журнале, а поле textarea – текст записи в журнале.

Функция addJournal содержит логику, необходимую для добавления данных в базу данных Back4app. Она создает новый экземпляр объекта Journal, устанавливает его свойства title и content в значения элементов input и textarea и сохраняет его в Back4app.

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

Получение данных из Back4app

Чтобы получить данные из Back4app для отображения в вашем приложении, вы будете использовать компонент React. Создайте файл Journal.tsx в каталоге src/components. В этом файле импортируйте и инициализируйте библиотеку Parse.

Например, так:

Затем определите JSX-элементы компонента:

Затем создайте состояние журнала и определите функцию, содержащую логику получения данных из Back4app.

Например, так:

С помощью метода Parse.Query функция fetchJournal использует Parse SDK для создания запроса, который извлекает данные из класса Journal.

Метод find объекта query возвращает массив, содержащий результаты запроса, а функция setJournal обновляет состояние журнала полученными данными.

Этот код использует хук useEffect для запуска побочных эффектов в компоненте. Он вызывает fetchJournal для получения данных при монтировании компонента. Теперь в компоненте отобразите содержимое состояния журнала.

Например, так:

Приведенный выше блок кода отображает список записей в журнале в виде набора элементов div, каждый из которых имеет определенное содержимое и специальную кнопку “Удалить”.

Он отображает название и содержание каждой записи журнала в тегах h3 и p и имеет кнопку “Удалить”, чтобы пользователи могли легко удалять записи.

Чтобы придать стиль элементам JSX, определенным в компоненте журнала, добавьте следующие стили в файл global.css:

Теперь отобразите компонент журнала на главной странице. Для этого замените существующий код в файле index.astro на приведенный ниже блок кода:

Этот блок кода импортирует компонент журнала и отображает его. Директива client:load гарантирует, что компонент журнала загрузится сразу же при загрузке страницы, обеспечивая плавную и отзывчивую работу с пользователем.

Удаление данных из Back4app

Чтобы обеспечить работу кнопки удаления в вашем приложении рядом с каждой записью, необходимо определить функцию, которая удаляет выбранную запись. Используя событие click, вы привяжете эту функцию к кнопке удаления.

Например, так:

Функция deleteJournal создает новый экземпляр объекта Journal с помощью метода Parse.Object.extend. После создания объекта она устанавливает свойство id объекта в параметр id, переданный в функцию.

Далее функция вызывает асинхронный метод destroy объекта “Journal”, чтобы удалить запись журнала с заданным идентификатором из Back4app.

С помощью метода filter функция отфильтровывает запись журнала с указанным id из состояния журнала, создавая новый массив, исключающий удаленную запись.

Наконец, с помощью метода setJournal функция обновляет состояние журнала с помощью этого нового массива.

Теперь привяжите функцию deleteJournal к кнопке "Удалить" с помощью обработчика события click. В результате JSX-элементы в файле Journal.tsx будут выглядеть следующим образом:

Тестирование приложения

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

Приложение должно выглядеть следующим образом:

Нажмите на кнопку “Зарегистрировать свой опыт”, чтобы перейти на страницу журнала в приложении, и заполните поля ввода.

После заполнения полей ввода нажмите на кнопку log, чтобы добавить данные в базу данных Back4app. Вернитесь на свою домашнюю страницу.

Чтобы проверить, можете ли вы удалить запись, нажмите на кнопку удаления записи “Мой первый день ведения дневника”. Теперь ваша главная страница должна выглядеть так, как показано на рисунке ниже.

Заключение

В этой статье вы познакомились с фреймворком Astro.js, узнали о его преимуществах и потенциальных недостатках. Вы узнали, как создать приложение Astro, легко интегрированное с библиотекой React.

Astro.js – отличный выбор для создания различных веб-сайтов, от простых целевых страниц до сложных веб-приложений. Он особенно хорошо подходит для сайтов, которые должны быть быстрыми, легкими и масштабируемыми.

Чтобы узнать больше, прочитайте руководство Как создать бэкэнд для Astro.js.