How to Build a Backend for Gatsby?

введение в этом учебном пособии вы узнаете как создать бэкенд для gatsby с использованием back4app мы покажем вам, как интегрировать функции back4app — такие как управление базами данных, функции облачного кода, rest api и возможности graphql запросов , а также аутентификацию пользователей и запросы в реальном времени (live queries) — чтобы создать безопасный, масштабируемый и надежный бэкенд, к которому можно получить доступ с вашего gatsby сайта вы также увидите, как быстрая настройка и интуитивно понятная среда back4app могут значительно сократить время и усилия, необходимые для выполнения задач бэкенда к концу вы точно узнаете как создать бэкенд для gatsby , который хранит и извлекает данные, обрабатывает аутентификацию, интегрирует облачные функции и многое другое это подготовит вас к легкому внедрению пользовательской логики, добавлению сторонних api или расширению вашей модели данных без необходимости беспокоиться о традиционном обслуживании серверов что вы построите и почему это ценно полная интеграция бэкенда вы создадите масштабируемую структуру бэкенда для вашего сайта gatsby, включая parse sdk, который идеально подходит для динамических потребностей в данных экономия времени back4app предоставляет инструменты, такие как ai agent, запросы в реальном времени и облачные задания, которые ускоряют создание бэкенда расширяемые навыки после завершения вы сможете адаптировать эти концепции для более продвинутых функций gatsby, таких как создание страниц во время сборки или подключение к безсерверным функциям для динамических операций предварительные требования учетная запись back4app и новый проект back4app начало работы с back4app https //www back4app com/docs/get started/new parse app если у вас нет учетной записи, вы можете создать ее бесплатно следуйте приведенному выше руководству, чтобы подготовить ваш проект базовая среда разработки gatsby вы можете настроить это, установив gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli и запустив установленный node js (версия 14 или выше) установка node js https //nodejs org/en/download/ знание javascript и концепций gatsby официальная документация gatsby https //www gatsbyjs com/docs/ прочитайте документацию или учебник для начинающих, если вы новичок в gatsby убедитесь, что у вас есть эти требования это обеспечит плавный процесс, когда вы создаете новый файл для конфигурации или выполняете запросы graphql в вашей среде gatsby шаг 1 – настройка проекта back4app создать новый проект первый шаг в создании бэкенда для gatsby на back4app – это создание нового проекта если вы еще этого не сделали войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления дайте вашему приложению имя (например, “gatsby backend tutorial”) после создания проекта он появится на вашей панели управления back4app мы будем использовать этот проект в качестве основы нашего бэкенда подключите parse sdk back4app использует платформу parse для управления вашими данными, предоставления функций в реальном времени, обработки аутентификации пользователей и многого другого для gatsby вы все равно можете npm install parse и затем интегрировать его в ваши исходные файлы получите ваши ключи parse на вашей панели управления back4app найдите ваш application id и javascript key , обычно в разделе “настройки приложения” или “безопасность и ключи ” вы также найдете parse server url (обычно что то вроде https //parseapi back4app com ) установите parse sdk в вашем сайте gatsby npm install parse создайте parseconfig js в корневом каталоге вашего проекта gatsby или в src/ src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; каждый раз, когда вы импортируете parse из parseconfig js в ваших файлах gatsby (например, в gatsby node js , gatsby browser js , или страницах/компонентах), у вас будет предварительно настроенный экземпляр, готовый для выполнения запросов к вашему бэкенду back4app шаг 2 – настройка базы данных создание модели данных в back4app данные управляются как “классы” (аналогично таблицам) с полями для ваших данных давайте создадим класс “todo” для демонстрации мы покажем несколько способов, как вы можете сохранять и извлекать данные в gatsby с помощью parse перейдите в раздел “база данных” в вашей панели управления back4app создайте новый класс (например, “todo”) и добавьте столбцы, такие как заголовок (string) и iscompleted (boolean) или вы можете позволить parse автоматически создавать столбцы, когда объекты впервые сохраняются из вашего кода создание модели данных с помощью ai агента back4app предоставляет ai агента, чтобы помочь определить вашу структуру данных откройте ai агента из вашей панели управления приложением или меню опишите вашу модель данных (например, “пожалуйста, создайте новую схему приложения todo с заголовком и статусом завершения ”) позвольте ai агенту сгенерировать схему для вас чтение и запись данных с использованием sdk пример фрагмента в gatsby может выглядеть так (например, на странице на основе react или в gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } чтение и запись данных с использованием rest api в качестве альтернативы вы можете взаимодействовать с базой данных через rest api curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo чтение и запись данных с использованием graphql api back4app также поддерживает graphql api , поэтому вы можете выполнять запросы или мутации, такие как mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } это особенно удобно, если вы хотите, чтобы ваш сайт на gatsby получал данные через запросы graphql во время сборки работа с живыми запросами gatsby — это генератор статических сайтов, но вы все равно можете настроить динамические соединения в реальном времени, используя parse живые запросы это может быть полезно в коде, выполняемом в браузере, или в ваших собственных безсерверных хуках включите живые запросы в вашей панели управления back4app (в разделе настройки сервера) добавьте url сервера живых запросов в parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; подпишитесь на класс для уведомлений в реальном времени async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } это будет отправлять обновления данных в реальном времени на фронтенд вашего проекта gatsby шаг 3 – применение безопасности с помощью acl и clp что такое acl и clp? acl (списки управления доступом) позволяют вам определять разрешения на отдельные объекты, в то время как clp (разрешения на уровне класса) применяются ко всем классам в вашей базе данных back4app настройка разрешений на уровне класса перейдите к база данных в вашей панели управления back4app выберите класс (например, todo ) нажмите на вкладку разрешения на уровне класса настройте, является ли класс общедоступным для чтения, требует ли аутентификации или ограничен определенными ролями использование acl в коде в вашем коде gatsby вы можете определить acl для каждого нового объекта async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } шаг 4 – написание функций облачного кода зачем облачный код? с помощью облачного кода вы можете добавить пользовательскую серверную логику в ваш бэкенд back4app это отлично подходит для бизнес правил, rest api преобразований, триггеров или валидаций данных, которые вы хотите сохранить в безопасности и не показывать на стороне клиента пример облачной функции // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); развертывание облачного кода через back4app cli установите и настройте cli, затем выполните b4a deploy через панель управления перейдите в cloud code > functions на вашей панели управления, вставьте ваш код в main js , и нажмите deploy вызов вашей функции из gatsby/parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } шаг 5 – настройка аутентификации класс пользователя parse back4app использует класс parse user для аутентификации по умолчанию он обрабатывает хеширование паролей, сессии и безопасное хранение регистрация и вход в gatsby import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } после входа в систему вы можете вызвать parse user current() чтобы проверить, вошел ли пользователь в систему социальный вход вы можете интегрировать google , facebook , apple , и других провайдеров с дополнительными настройками узнайте больше в документации по социальному входу https //www back4app com/docs/platform/sign in with apple шаг 6 – обработка хранения файлов загрузка файлов используйте parse file для загрузки изображений или других файлов например, в компоненте gatsby async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } затем вы можете прикрепить этот файл к объекту parse, сохранить его и позже получить url файла для отображения на вашем сайте gatsby шаг 7 – подтверждение электронной почты и сброс пароля почему это важно подтверждение электронной почты подтверждает адрес электронной почты пользователя, а процессы сброса пароля улучшают пользовательский опыт оба легко настраиваются в back4app перейдите в настройки электронной почты вашего приложения в панели управления включите подтверждение электронной почты и настройте шаблон электронной почты для сброса пароля используйте методы sdk parse (например, parse user requestpasswordreset(email) ) для отправки писем для сброса пароля шаг 8 – планирование задач с помощью облачных заданий обзор облачных заданий используйте облачные задания для автоматизации повторяющихся задач, таких как удаление устаревших данных или отправка ежедневных сводок например // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); затем запланируйте это в разделе настройки приложения > настройки сервера > фоновая работа шаг 9 – интеграция вебхуков вебхуки позволяют вашему приложению back4app отправлять http запросы внешним сервисам, когда происходят определенные события — например, создание новой записи перейдите в вашу панель управления back4app > дополнительно > вебхуки добавьте новый вебхук , указав url адрес конечной точки для внешнего сервиса выберите то, что вызывает вебхук (например, aftersave в классе todo) вы также можете интегрироваться со slack или платежными системами, добавив соответствующую конечную точку шаг 10 – изучение панели администратора back4app admin app admin app — это интерфейс, ориентированный на модели, для управления данными вы можете предоставить нетехническим пользователям безопасный доступ для выполнения операций crud с вашими классами включение admin app перейдите в app dashboard > more > admin app и нажмите “включить admin app ” затем создайте пользователя admin и выберите поддомен для интерфейса администратора теперь вы можете войти в свой admin app, чтобы просматривать и изменять данные без написания кода заключение в этом учебном пособии вы узнали как создать бэкенд для gatsby с использованием back4app вы научились настроить безопасную базу данных с классами, пользовательскими полями и отношениями использовать parse sdk , вместе с rest api и graphql запросами для транзакций данных настроить acl и clp для безопасности данных написать и развернуть cloud code для расширения бизнес логики и триггеров управлять аутентификацией пользователей с регистрацией, входом, сбросом пароля и подтверждением электронной почты обрабатывать хранение файлов для изображений и документов запланировать автоматизированные задачи с помощью cloud jobs интегрировать внешние сервисы через webhooks использовать admin app для простого администрирования данных с этими навыками ваш сайт на gatsby может использовать мощные динамические функции, при этом сохраняя преимущества статической отрисовки gatsby отсюда вы можете расширить вашу модель данных и добавить сложную бизнес логику интегрировать больше внешних api для действительно комплексной платформы следовать официальной документации back4app для более глубокого изучения безопасности, производительности и аналитики экспериментировать с функциями времени сборки gatsby —например, “ создавать страницы ” из динамических данных или настроить плагин “ gatsby source ” для вашего бэкенда back4app теперь у вас есть прочная основа для создания устойчивых к будущему, ориентированных на данные приложений с помощью gatsby и back4app