AngularJS - популярный JavaScript MVW Framework, используемый для разработки клиентских приложений. Hasura JS SDK можно использовать с AngularJS для расширения возможностей вашего приложения с помощью таких серверных функций, как аутентификация, данные и файл API.

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

Мы также создали стартовый комплект AngularJS-Hasura с использованием Yeoman Generator для AngularJS, который вы можете использовать для создания каркаса вашего приложения. В этом наборе есть полные рабочие страницы, демонстрирующие возможности API Hasura. Вы можете обратиться к ним, чтобы начать работу, или даже использовать этот комплект непосредственно для своих приложений.

Включая Hasura JS SDK

JS SDK Hasura доступен на GitHub. Добавьте следующий фрагмент в index.html своего приложения.

Этот сценарий предоставит глобальную переменную с именем hasura, которая доступна в области window. Для обычных JS-приложений этого было бы достаточно. Но для AngularJS не рекомендуется полагаться на глобальные переменные. Нам нужно внедрить этот объект в компоненты, которым он потребуется. Для этого мы помещаем этот объект внутрь фабрики AngularJS и делаем его доступным как компонент AngularJS.

Для этого мы создаем новый компонент в рамках модуля AngulaJS. Создайте файл с именем hasura.js со следующим содержимым и добавьте его в index.html.

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

Теперь вы можете внедрить hasura в любой компонент AngularJS, например, в контроллеры и т. Д. Прежде чем мы сможем использовать SDK для выполнения запросов и выполнения других действий, SDK необходимо инициализировать с помощью проекта Hasura. Это можно сделать в разделе run приложения AngularJS. Если ваше приложение предназначено только для авторизованных пользователей, вы также можете выполнить эту проверку в том же разделе.

Примечание. На этом шаге также предполагается, что у вас есть готовый проект Hasura. Если у вас его нет, войдите в Hasura Dashboard и создайте проект.

API аутентификации

Зарегистрироваться / Зарегистрироваться

Ниже приведен пример контроллера для использования API регистрации. Полный рабочий пример можно увидеть в шаблоне быстрого старта AngularJS-Hasura.

Авторизоваться

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

API данных

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

  • Создайте новую таблицу с именем todo с помощью консоли Hasura и добавьте следующие столбцы:
  • id: целое число (автоинкремент)
  • title: Текст
  • user_id: целое число
  • completed: логический
  • Выберите id в качестве первичного ключа
  • Нажмите "Создать".
  • Перейдите на вкладку "Разрешения" и нажмите "Добавить разрешения для новой роли".
  • В раскрывающемся списке выберите user.
  • Введите {"user_id": "REQ_USER_ID"} во все поля "Проверка" и "Фильтр".
  • Переключить все для раздела "Выбрать"
  • Отметьте completed в разделе "Обновить".
  • Сохранить изменения

Примечание. Полный рабочий пример можно увидеть в шаблоне быстрого запуска AngularJS-Hasura.

Теперь вы можете использовать следующие API.

Выбирать

Чтобы выбрать все задачи, принадлежащие пользователю, вы можете выполнить следующий запрос:

Вставлять

Создать новый ToDo

Обновлять

Переключить завершенное состояние существующего ToDo

Удалить

Удалить задачу

Файловый API

Загрузить

Скачать

Удалить

Использование шаблона быстрого старта

Шаг 1а: Получите проект Hasura

Зарегистрируйтесь на Hasura Dashboard и заведите себе проект Hasura. Создание проекта hasura предоставит вам домен. Примерно так: project42.hasura-app.io. Вы также получите электронное письмо с учетными данными администратора для вашей консоли проекта и вашей базы данных (если у вас возникли проблемы с поиском электронной почты, выполните поиск по запросу учетные данные hasura в папке Входящие).

В частности, обратите внимание на название вашего проекта.

Шаг 1b: установите hasuractl

Установите инструмент командной строки hasura: hasuractl.

Когда вы закончите с этим, войдите и настройте hasuractl:

Заставьте hasuractl поговорить с конкретным проектом, который вы создали на шаге 1а. (это было project42 в приведенном выше примере)

Шаг 2. Инициализируйте проект AngularJS с именем приложения

Выполните следующую команду, чтобы инициализировать приложение Angular, которое можно мгновенно развернуть:

Шаг 3. Добавьте название проекта в SDK Hasura JS

Отредактируйте файл app/src/scripts/app.js и измените следующую строку, чтобы использовать имя вашего проекта.

Шаг 4. Используйте hasuractl, чтобы добавить свой SSH-ключ в проект Hasura

Вы не можете просто начать вводить код в новый проект hasura, не убедившись, что вы действительно являетесь собой! hasuractl может отправить ваш SSH-ключ в кластер вашего проекта hasura, чтобы вы могли начать продвигать свой код.

Шаг 5: git push готово!

Hasura - это Postgres BaaS + Kubernetes PaaS, который поможет вам очень быстро создавать и развертывать серверные ВМ. Попробуйте на hasura.io

Первоначально опубликовано на docs.hasura.io.