5 шагов для добавления конечных точек GraphQL в Adalo

Это руководство проведет вас через полный процесс интеграции GraphQL в Adalo, конструктор приложений без кода для веб-приложений и нативных приложений iOS и Android, управляемых базой данных — одна версия на всех трех платформах, опубликованная в Apple App Store и Google Play.

Это руководство проведет вас через полный процесс интеграции GraphQL в Adalo, от подготовки конечной точки до развертывания.

Ключевые шаги:

1. Подготовьте вашу конечную точку: Протестируйте ваш GraphQL API на доступность, формат JSON и аутентификацию.
2. Создайте внешнюю коллекцию: Подключите вашу конечную точку GraphQL в Adalo и настройте аутентификацию.
3. Определите запросы и мутации: Используйте запросы GraphQL для получения данных и мутации для обновления или создания записей.
4. Установите заголовки и параметры: Убедитесь в наличии правильных заголовков (например, Authorization) и укажите ключи JSON для анализа данных.
5. Протестируйте и разверните: Привяжите данные к компонентам приложения, протестируйте функциональность и опубликуйте приложение.

Adalo поддерживает числовые идентификаторы записей и имеет ограничение в 5 запросов в секунду. Выполнение этих шагов обеспечивает плавную интеграцию и оптимальную производительность приложения. С неограниченными записями базы данных в платных тарифах и без платежей на основе использования вы можете масштабировать приложение, подключенное к GraphQL, без беспокойства о ограничениях на данные или неожиданных счетах.

Почему Adalo подходит для интеграции GraphQL

Способность GraphQL запрашивать ровно те данные, которые вам нужны, органично сочетается с архитектурой Adalo. Платформа производительность в 3-4 раза выше после переработки инфраструктуры Adalo 3.0 означает, что ваши запросы GraphQL возвращают данные пользователям быстро, даже по мере масштабирования приложения. В отличие от платформ, которые устанавливают ограничения на записи или платежи на основе использования, платные планы Adalo не включают ограничения на данные — ваши внешние коллекции могут расти вместе с вашей базой пользователей.

Ada, конструктор искусственного интеллекта Adalo, позволяет вам описать то, что вы хотите, и генерирует ваше приложение. Magic Start создает полные основы приложения из описания, а Magic Add добавляет функции на естественном языке.

Функции конструирования с помощью ИИ также упрощают процесс интеграции. Magic Add позволяет описать новые функции на естественном языке, и платформа генерирует необходимые экраны и логику для отображения данных GraphQL. X-Ray выявляет узкие места в производительности до того, как они повлияют на пользователей, помогая вам оптимизировать запросы, которые могут замедлить приложение.

Шаг 1: подготовьте вашу конечную точку GraphQL

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

Проверьте доступность конечной точки

Начните с тестирования конечной точки, используя такие инструменты как GraphiQL, GraphQL Playgroundили Postman. Типичные URL конечных точек могут выглядеть следующим образом: https://api.example.com/graphql, /api/graphqlили /v1/graphql.

Отправьте простой запрос, например { __typename }, чтобы проверить доступность конечной точки и подтвердить, что она правильно отвечает. Затем проверьте, включена ли внутренняя проверка схемы, запросив __schema. Это даст вам подробную карту доступных типов, полей и операций, помогая вам понять, какие данные вы можете запросить.

Помните, что GraphQL часто возвращает статус HTTP 200 OK даже при возникновении ошибок. Ошибки будут отображаться в errors массиве ответа. Например, попробуйте запросить недопустимое поле, чтобы увидеть, включает ли ответ GRAPHQL_VALIDATION_FAILED ошибку.

Наконец, подтвердите, что ответ структурирован в формате JSON, требуемом Adalo. Обратите пристальное внимание на верхний уровень ключа, где находятся ваши данные, например data, recordsили resource. Эта деталь критична при настройке внешней коллекции в Adalo.

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

Соберите учетные данные аутентификации

Большинство защищенных конечных точек GraphQL требуют аутентификацию, и существует несколько распространенных методов: ключи API, личные маркеры доступа (PAT) или маркеры OAuth 2.0 (часто в формате JWT). Эти учетные данные обычно добавляются в заголовки HTTP следующим образом:

Authorization: Bearer YOUR_TOKEN_HERE

Вот краткая справка для некоторых распространенных услуг:

Поставщик услуг	Тип учетных данных	Ключ заголовка	Формат значения
Airtable	Личный токен доступа	Authorization	Bearer [Token]
DreamFactory	API Key	X-DreamFactory-API-Key	[Key]
Любой GraphQL API	JWT / OAuth токен	Authorization	Bearer [Token]

Где получить эти учетные данные, зависит от вашего поставщика API. Для Airtable вы найдете опцию создания Personal Access Token в Developer Hub в настройках вашей учетной записи. Убедитесь, что вы назначили необходимые области доступа (например, доступ на чтение/запись) и указали, к каким базам данных может получать доступ токен. Для DreamFactory ключи API создаются и управляются в платформе с использованием ролевого контроля доступа.

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

Шаг 2: создание внешней коллекции в Adalo

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

Перейдите к внешним коллекциям

Начните с открытия Adalo Builder. На левой панели инструментов нажмите на База данных вкладку (ищите значок базы данных). В разделе «Внешние коллекции» выберите + Добавить коллекцию. Дайте вашей коллекции имя, которое отражает тип данных, с которыми вы будете работать, например «Продукты» или «Пользователи». Этот шаг именования помогает держать все организованным, особенно когда вы добавляете больше интеграций позже.

После присвоения имени вы перейдете к настройке деталей конечной точки и аутентификации.

Настройка конечной точки и аутентификации

На экране установки введите вашу GraphQL конечную точку в поле Base URL (например, https://api.example.com/graphql). Затем установите вашу аутентификацию, нажав + Добавить элемент под заголовками. Добавьте заголовок с именем «Authorization» и значением Bearer [Your_Token]. Убедитесь, что вы включили пробел после «Bearer».

Adalo поддерживает как Basic Auth, так и OAuth для внешних коллекций. Для большинства GraphQL конечных точек вы, вероятно, будете использовать Basic Auth с ключом API или токеном OAuth. Имейте в виду, что Adalo ожидает, что ваша GraphQL конечная точка будет возвращать данные в стандартном формате JSON, похожем на REST.

После завершения настройки аутентификации вам потребуется включить синтаксический анализ JSON ответа.

Включение синтаксического анализа JSON ответа

GraphQL ответы часто вкладывают данные в специальные ключи JSON, такие как data, recordsили items. Чтобы помочь Adalo правильно интерпретировать эту структуру, укажите ключ результатов в разделе «Get All Records» конфигурации вашей конечной точки. Это говорит Adalo, где искать массив записей в JSON ответе.

Убедитесь, что в вашем источнике данных существует хотя бы одна запись на этом этапе. Когда вы нажимаете Запустить тест, Adalo проанализирует JSON ответ и автоматически создаст соответствующие свойства для вашего приложения, такие как текстовые, числовые или датовые поля.

Стоит отметить, что Adalo в настоящее время поддерживает только числовые идентификаторы во внешних коллекциях. Если ваша GraphQL конечная точка использует текстовые идентификаторы, UUID или идентификаторы со специальными символами, вам может потребоваться использовать обходное решение. Прокси-сервис, такой как n8n , может помочь, преобразовав GraphQL ответы в формат JSON, совместимый с Adalo.

Шаг 3: определение GraphQL запросов и мутаций

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

Определение запросов для извлечения данных

Внешние коллекции Adalo поддерживают пять ключевых действий: получить все, получить один, создать, обновить и удалить. Для GraphQL эти действия все используют один и тот же базовый URL и требуют POST метод—даже при извлечении данных. Вместо традиционных строк запроса GraphQL встраивает свои запросы непосредственно в тело запроса.

Например, при настройке конечной точки «Get All Records» отформатируйте ваше JSON тело следующим образом:
{"query": "query { users { id name email } }"}.

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

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

Когда ваши запросы установлены, пришло время перейти к настройке мутаций для обновления данных.

Настройка мутаций для обновления данных

Мутации используются для создания, обновления и удаления записей в вашей GraphQL серверной части. Для действия «Create a Record» отформатируйте вашу мутацию в теле запроса следующим образом:
{"query": "mutation CreateUser($name: String!, $email: String!) { createUser(name: $name, email: $email) { id name email } }", "variables": {"name": "VALUE", "email": "VALUE"}}.

Заменить "VALUE" с Magic Text для динамической вставки данных из вашего приложения.

При настройке действия «Update a Record» структура похожа, но вам также потребуется ссылка на конкретный идентификатор записи для изменения. Несмотря на то, что GraphQL использует POST для всех операций, вы можете изменить метод на PATCH, если обновляете только определенные поля.

После настройки каждой мутации запустите тест, чтобы убедиться, что структура ответа соответствует вашим ожиданиям. Имейте в виду, что Adalo имеет лимит скорости платформы 5 запросов в секунду. Если вы превысите этот лимит, вы получите код статуса 429. Однако с отсутствие платежей на основе использования в любом плане Adalo вы не столкнетесь с неожиданными счетами из-за большого объема запросов — просто проектируйте свои запросы эффективно, чтобы оставаться в пределах ограничения по скорости.

После того как ваши запросы и мутации протестированы и работают, вы готовы перейти к настройке заголовков и параметров на следующем этапе.

Шаг 4: Настройка заголовков и параметров запроса

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

Добавьте необходимые заголовки

Для каждого запроса GraphQL в Adalo вам потребуется как минимум два заголовка: Content-Type и Authorization. Установите Content-Type для application/json чтобы указать формат ваших данных. Заголовок Authorization должен включать ваш ключ API в формате Bearer [Your_API_Key], убедившись, что между "Bearer" и вашим токеном есть пробел.

Все запросы к API Adalo должны содержать следующие два заголовка: Authorization: Bearer [Ключ API вашего приложения] Content-Type: application/json
– Ресурсы Adalo

В зависимости от вашего бэкенда вам может потребоваться дополнительные заголовки. Например, если вы работаете с DreamFactory, вам потребуется включить заголовок X-DreamFactory-API-Key с вашим специальным ключом. Чтобы добавить эти заголовки в Adalo, перейдите в раздел "Заголовки и запросы", нажмите +Добавить элементи вручную введите имя заголовка и его значение.

Определение параметров запроса

Хотя GraphQL обычно отправляет данные в теле запроса, некоторые API требуют параметры запроса для задач, таких как фильтрация, пагинация или даже аутентификация. Чтобы добавить эти параметры в Adalo, нажмите Добавить элемент в разделе "Внешние коллекции" и введите требуемые имена параметров и их значения. Некоторые API могут использовать параметры запроса для авторизации вместо заголовков, поэтому важно проконсультироваться с документацией вашего API, чтобы обеспечить точность.

Если ваша конечная точка возвращает вложенные данные, вам потребуется указать ключ результатов (например, data.users или records), чтобы помочь Adalo найти определенный ключ JSON, содержащий ваши записи. Этот шаг особенно важен для ответов GraphQL, структурированных с несколькими слоями данных.

Запустите тесты для проверки конфигурации

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

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

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

Шаг 5: Протестируйте, привяжите и разверните свое приложение

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

Привяжите данные к экранам и компонентам

Для отображения данных из вашей конечной точки GraphQL начните с добавления компонента Список в ваше приложение. Установите его источник данных на вашу внешнюю коллекцию. На этапе "Запуск теста" Adalo автоматически обнаруживает доступные свойства в ответе вашего API, делая их доступными через Magic Text.

Чтобы сопоставить определенные поля данных из ответа GraphQL с пользовательским интерфейсом вашего приложения, коснитесь значка "Волшебный текст" в параметрах компонента (например, "Заголовок", "Подзаголовок" или "Изображение") и выберите соответствующие ключи JSON. Для экранов деталей вы можете связать элементы списка с новыми экранами, используя следующие шаги: Добавить действие > Ссылка > Новый экран. Adalo автоматически передаст данные "Текущий [элемент коллекции]" на новый экран, позволяя вам использовать "Волшебный текст" для отображения конкретных деталей из выбранной записи.

Если ваша схема GraphQL изменится или вы добавите новые поля, просто вернитесь на вкладку "База данных", обновите параметры внешней коллекции и повторно запустите тест подключения, чтобы сделать новые поля доступными в редакторе. С визуальным конструктором Adalo — описываемым как "простой, как PowerPoint" — вы можете быстро адаптировать пользовательский интерфейс для размещения новых полей данных без написания кода.

Просмотр и публикация приложения

Нажмите кнопку "Просмотр", чтобы убедиться, что ваши данные загружаются правильно и все действия работают ожидаемо. производительность в 3-4 раза выше из инфраструктуры Adalo 3.0 означает, что ваши данные GraphQL загружаются быстро даже при сложных запросах.

После того как вы подтвердите, что все работает правильно, вы можете опубликовать свое приложение в веб-сеть, App Store для iOS и Play Store для Android, используя систему единой кодовой базы Adalo. Любые изменения, которые вы внесете, будут автоматически отражаться на всех платформах, поэтому не требуется перестраивать для каждой платформы. Это значительное преимущество перед такими платформами, как Bubble, где мобильные приложения являются веб-обертками, требующими отдельного управления и не синхронизирующимися автоматически с веб-развертываниями и мобильными развертываниями.

Мониторинг производительности и отладка проблем

После того как ваше приложение запущено, инструмент X-Ray Adalo может помочь вам проанализировать производительность и устранить любые проблемы с интеграцией. X-Ray выявляет потенциальные узкие места до того, как они повлияют на пользователей, подчеркивая медленные запросы или неэффективные отношения данных, которые могут повлиять на вашу интеграцию GraphQL.

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

С модульной инфраструктурой Adalo, масштабируемой для обслуживания приложений с Более 1 млн активных пользователей в месяц, ваше приложение, подключенное к GraphQL, может расти без достижения установленных платформой ограничений. В отличие от платформ, которые взимают плату на основе единиц рабочей нагрузки или устанавливают ограничения на количество записей, архитектура Adalo поддерживает производительность при масштабировании без неожиданных затрат.

Заключение

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

Организации сообщили об экономии до 15 часов в неделю на ручном вводе данных и снижении затрат на 65% по сравнению с пользовательской разработкой.

«GraphQL позволяет вам ответить на запросы API, используя ваши существующие данные... это дает клиентам возможность запрашивать только информацию, которую они хотят, и ничего больше.» - n8n

Для лучшей производительности рассмотрите возможность использования PATCH вместо PUT, применяйте фильтры для соблюдения лимита 5 запросов в секунду и используйте инструмент X-Ray компании Adalo для выявления потенциальных проблем. Эти небольшие корректировки могут значительно улучшить отзывчивость вашего приложения.

План Adalo Professional, начиная с $36 в месяц, обеспечивает доступ к внешним коллекциям с неограниченным количеством записей базы данных и без платежей на основе использования. Это обеспечивает немедленную экономию на время разработки и гарантирует, что ваше приложение масштабируется без усилий. С GraphQL ваши данные интегрируются беспрепятственно в списки, формы и действия — без кодирования.

Часто задаваемые вопросы

Почему выбрать Adalo вместо других решений для создания приложений?

Adalo — это приложение для создания приложений на базе ИИ, которое создает истинные нативные приложения для iOS и Android. В отличие от веб-оболочек, оно компилируется в нативный код и публикуется напрямую в Apple App Store и Google Play Store из единой кодовой базы — самая сложная часть запуска приложения выполняется автоматически.

Какой самый быстрый способ создать и опубликовать приложение в App Store?

Интерфейс перетаскивания Adalo в сочетании с функциями построения на основе ИИ, такими как Magic Start и Magic Add, позволяют быстро создавать приложения. Платформа обрабатывает весь процесс отправки в App Store, поэтому вы можете перейти от идеи к опубликованному приложению без необходимости управлять сертификатами, профилями подготовки или руководящими принципами проверки приложений вручную.

Как убедиться, что моя конечная точка GraphQL правильно работает с Adalo?

Начните с подтверждения того, что ваша конечная точка поддерживает стандартные запросы и мутации GraphQL. Выполните тесты с помощью GraphiQL, GraphQL Playground или Postman, чтобы убедиться, что она выдает правильно структурированные ответы JSON. Проверьте, что конечная точка доступна и возвращает данные с числовыми идентификаторами, которые требует Adalo для внешних коллекций.

Какие типы аутентификации можно использовать для подключения конечных точек GraphQL в Adalo?

Adalo поддерживает ключи API, токены OAuth и аутентификацию на основе JWT для конечных точек GraphQL. Добавьте ваши учетные данные в заголовок Authorization в формате "Bearer [Your_Token]". Конкретный метод зависит от требований вашего поставщика API.

Какие лучшие способы улучшить производительность приложения при использовании GraphQL с Adalo?

Используйте PATCH вместо PUT для частичных обновлений, применяйте фильтры для уменьшения размера полезной нагрузки и соблюдайте лимит 5 запросов в секунду. Инструмент X-Ray компании Adalo выявляет узкие места в производительности до того, как они повлияют на пользователей, помогая вам оптимизировать медленные запросы или неэффективные связи данных.

Сколько времени требуется для создания приложения, подключенного к GraphQL, в Adalo?

Имея подготовленную конечную точку GraphQL, вы можете подключить ее к Adalo и создать функциональное приложение за несколько часов. Magic Start создает полные основы приложения из описаний, а визуальный конструктор — описываемый как «легкий, как PowerPoint» — позволяет создавать экраны и привязывать данные без кодирования.

Нужен ли мне опыт кодирования для интеграции GraphQL с Adalo?

Кодирование не требуется. Функция внешних коллекций Adalo обрабатывает техническую сложность интеграции GraphQL. Вы настраиваете конечные точки, заголовки и запросы через визуальный интерфейс, а Magic Text позволяет вам привязывать данные к компонентам пользовательского интерфейса без написания кода.

Сколько стоит создание приложения, подключенного к GraphQL, с помощью Adalo?

План Adalo Professional начинается с $36/месяц и включает внешние коллекции, неограниченное количество записей базы данных и без платежей на основе использования. В отличие от платформ, таких как Bubble, которые взимают плату на основе единиц рабочей нагрузки, цены Adalo прозрачны и без неожиданных счетов.

Могу ли я опубликовать мое приложение, подключенное к GraphQL, в App Store?

Да. Adalo публикует собственные приложения для iOS и Android непосредственно в Apple App Store и Google Play Store из единой базы кода. Обновления синхронизируются автоматически на всех платформах — вам не нужно пересобирать или переотправлять для каждой платформы отдельно.

Что происходит, если мои данные GraphQL значительно увеличиваются?

Платные планы Adalo не имеют ограничений на количество записей, поэтому ваши внешние коллекции могут масштабироваться вместе с вашими данными. Модульная инфраструктура платформы поддерживает приложения с 1 млн+ ежемесячно активных пользователей, а бэкенд Adalo 3.0 обеспечивает производительность в 3-4 раза выше, чем предыдущие версии.