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.