How to Build a Backend for Ionic?

введение в этом учебном пособии вы научитесь создавать полный бэкенд для приложения ionic с использованием back4app мы рассмотрим управление базами данных, функции cloud code, rest и graphql api, аутентификацию пользователей, обработку файлов и многое другое наша цель — показать вам как построить бэкенд для ionic который безопасен, масштабируем и легко поддерживается мы будем использовать интуитивно понятную среду back4app, чтобы упростить настройку серверной части, избавив вас от необходимости вручную настраивать серверы или базы данных вы узнаете о необходимых инструментах, таких как планирование задач с помощью cloud jobs, применение продвинутых правил безопасности и интеграция вебхуков с другими сервисами к концу вы будете готовы расширить этот базовый бэкенд в готовую к производству систему для вашего приложения ionic предварительные требования учетная запись back4app и новый проект back4app начало работы с back4app https //www back4app com/docs/get started/new parse app если у вас нет учетной записи, создайте ее бесплатно и следуйте приведенному выше руководству, чтобы настроить ваш проект базовая среда разработки ionic убедитесь, что у вас установлен ionic cli https //ionicframework com/docs/intro/cli и вы можете создать и запустить приложение ionic установленный node js (версия 14 или выше) скачать node js https //nodejs org/en/download/ для управления зависимостями и сборки вашего проекта знание javascript/typescript и концепций ionic официальная документация ionic https //ionicframework com/docs хорошее понимание структур, компонентов и хуков жизненного цикла ionic будет полезным шаг 1 – создание нового проекта на back4app и подключение войдите в свою учетную запись back4app создайте новое приложение с помощью кнопки “новое приложение” на вашей панели управления back4app назовите ваше приложение (например, “ionic backend tutorial”) этот проект back4app является основой для вашего бэкенда в отличие от использования клиентского sdk parse, этот учебник продемонстрирует, как делать вызовы через rest и graphql из вашего приложения ionic получение ваших учетных данных в панели управления back4app перейдите к настройки приложения или безопасность и ключи запишите ваш идентификатор приложения , ключ rest api , и конечная точка graphql вам понадобятся эти данные для отправки запросов из вашего ionic приложения шаг 2 – настройка базы данных хорошо структурированная база данных является основой каждого приложения панель управления back4app упрощает проектирование моделей данных и управление отношениями 1\ создание модели данных перейдите в раздел база данных в вашей панели управления back4app создайте новый класс (например, “todo”) и добавьте столбцы (например, title как строку, iscompleted как логическое значение) 2\ создание модели данных с использованием ai агента откройте ai agent из вашей панели управления back4app опишите вашу желаемую схему, например, “создать класс todo с полями для заголовка (string) и iscompleted (boolean) ” ai agent автоматически сгенерирует схему 3\ чтение и запись данных с использованием rest api из вашего кода ionic вы можете выполнять http запросы например, чтобы создать todo 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 чтобы получить все todos curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo вы можете интегрировать эти вызовы, используя fetch , axios , или любую библиотеку http клиента в сервисах или компонентах вашего приложения ionic 4\ чтение и запись данных с использованием graphql api аналогично, вы можете отправлять мутации и запросы graphql из вашего приложения ionic например, чтобы создать новый todo mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } пример вызовов rest или graphql можно разместить в файле провайдера/сервиса в вашей структуре ionic, а затем вызывать из ваших страниц 5\ работа с живыми запросами (по желанию) живые запросы предоставляют обновления данных вашего приложения в реальном времени, хотя они требуют sdk parse или специализированного подхода к подписке если вам нужны данные в реальном времени, вы можете включить живые запросы в настройках вашего сервера back4app обычно вы будете использовать соединение websocket, чтобы отслеживать изменения в ваших классах однако для стандартных вызовов на основе http вы можете периодически запрашивать конечные точки rest или graphql шаг 3 – применение безопасности с помощью acl и clp краткий обзор acl (списки контроля доступа) позволяют вам устанавливать разрешения на чтение/запись для отдельных объектов clp (разрешения на уровне класса) позволяют вам управлять более широким доступом на уровне класса эти функции имеют решающее значение для защиты частных данных и обеспечения того, чтобы только авторизованные пользователи могли изменять информацию настройка разрешений на уровне класса в вашей панели управления back4app перейдите в база данных > разрешения на уровне класса настройте ваши классовые параметры по умолчанию (например, только аутентифицированные пользователи могут создавать новые todos) настройка acl при создании или обновлении записей вы можете передать acl поля через rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "title" "private task", "acl" { "user object id here" { "read" true, "write" true } } }' \\ https //parseapi back4app com/classes/todo для получения дополнительной информации смотрите руководство по безопасности приложений https //www back4app com/docs/security/parse security шаг 4 – написание функций облачного кода почему облачный код облачный код позволяет вам выполнять серверный javascript для задач, таких как валидация данных, триггеры или интеграции вы можете создавать пользовательские конечные точки для централизованной логики, что особенно полезно, если вы хотите держать код вне клиента пример функции и триггеров в вашем main js на стороне сервера (back4app) вы можете написать // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); разверните это через back4app cli https //www back4app com/docs/local development/parse cli или в разделе облачный код на панели управления вызов облачного кода из ionic вы можете отправить post запрос curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "check this out"}' \\ https //parseapi back4app com/functions/validatetodo вы получите ответ в формате json, содержащий любые возвращенные данные или сообщение об ошибке модули npm вы можете установить пакеты, такие как axios в вашей среде cloud code для интеграции сторонних сервисов включите их в main js const axios = require('axios'); parse cloud define('fetchdata', async (request) => { const url = request params url; const response = await axios get(url); return response data; }); разверните и вызывайте его так же, как и любую функцию cloud code шаг 5 – настройка аутентификации включение аутентификации пользователей регистрация и вход пользователей могут быть выполнены с помощью rest запросов к классу user например, чтобы зарегистрироваться curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "jon", "password" "somepassword", "email" "jon\@example com" }' \\ https //parseapi back4app com/users вход curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ \ data urlencode 'username=jon' \\ \ data urlencode 'password=somepassword' \\ https //parseapi back4app com/login в случае успеха вы получите sessiontoken храните его в безопасности и включайте в заголовки будущих запросов для аутентифицированных операций социальные входы вы можете настроить социальные входы (например, google или facebook), настроив поток oauth через back4app или используя внешних провайдеров обратитесь к документации по социальным входам https //www back4app com/docs/platform/sign in with apple для подробных шагов шаг 6 – обработка хранения файлов настройка хранения файлов back4app предлагает безопасное хранение файлов вы можете прикреплять файлы к объектам или хранить их независимо например curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary "@path/to/your/image png" \\ https //parseapi back4app com/files/myimage png ответ будет включать url файла, который вы можете сохранить в классе curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "imagefile" { " type" "file", "name" "myimage png", "url" "response url here" } }' \\ https //parseapi back4app com/classes/photo соображения безопасности вы можете включить правила безопасности файлов в настройки сервера back4app, чтобы требовать аутентификацию или ограничить загрузку файлов для определенных ролей шаг 7 – подтверждение электронной почты и сброс пароля почему важна проверка подтверждение электронной почты обеспечивает законность пользовательских адресов электронной почты сброс пароля предоставляет безопасный способ восстановления утерянных учетных данных это помогает поддерживать доверие и правильное управление пользователями в вашем приложении ionic настройка панели управления back4app перейдите в настройки приложения > настройки электронной почты включите подтверждение электронной почты настройте шаблоны электронной почты для подтверждения и сброса пароля шаг 8 – планирование задач с помощью облачных заданий что делают облачные задания облачные задания позволяют вам планировать повторяющиеся задачи, такие как очистка данных или отправка сводных электронных писем вы пишете их в вашем main js parse cloud job('cleanupoldtodos', async (request) => { 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); после развертывания перейдите в настройки приложения > настройки сервера > фоновая работа запланируйте cleanupoldtodos для ежедневного выполнения шаг 9 – интеграция вебхуков вебхуки позволяют отправлять данные во внешние сервисы, когда в вашем проекте back4app происходят определенные события если вашему приложению ionic нужно инициировать действие в stripe или slack после создания новой записи, вы можете использовать вебхуки для автоматизации этого перейдите в дополнительно > вебхуки в вашей панели управления back4app добавьте новый вебхук и установите его конечную точку (например, https //your service com/webhook endpoint ) выберите событие (например, “после сохранения” в классе todo ) вы также можете инициировать исходящие запросы из триггеров cloud code в main js с использованием стандартных http библиотек шаг 10 – изучение панели администратора back4app админ приложение back4app admin app является более простым интерфейсом для нетехнических участников оно предоставляет простой способ выполнения операций crud с вашими классами, не заходя в основную панель управления parse включение админ приложения в панели управления перейдите в дополнительно > админ приложение нажмите включить админ приложение и создайте администратора выберите поддомен для доступа к вашему админ интерфейсу эта панель помогает вам управлять данными без написания запросов, что делает ее идеальной для клиентов или членов команды, которые предпочитают графический интерфейс заключение завершив этот гид о как построить бэкенд для ionic , вы создали безопасный бэкенд на back4app с надежными моделями данных и отношениями интегрировались с rest и graphql api для чтения и записи данных из вашего ionic приложения реализовали безопасность с помощью acl и clp развернули cloud code для пользовательской логики и триггеров настроили аутентификацию пользователей и хранение файлов настроили cloud jobs для планирования задач использовали вебхуки для внешних интеграций изучили панель администратора для упрощения администрирования данных с этой основой ваше ionic приложение может развиваться в готовую к производству платформу добавьте больше логики, подключите сторонние api или уточните правила безопасности, чтобы соответствовать вашему случаю использования следующие шаги улучшите вашу производственную сборку внедрением кэширования, ролевого доступа и мониторинга производительности интегрируйте расширенные функции такие как запросы в реальном времени или многофакторная аутентификация консультируйтесь с официальной документацией back4app для глубокого изучения аналитики, журналов и настройки производительности изучите другие учебники которые демонстрируют чат приложения, интеграции iot или функции на основе местоположения в сочетании с надежными бэкенд сервисами back4app