Quickstarters
Feature Overview
How to Build a Backend for Flutter?
40 мин
введение в этом учебном пособии вы узнаете как создать бэкенд для flutter с использованием back4app, надежного и открытого бэкенда как услуги (baas) мы пройдем через интеграцию основных функций back4app — таких как управление базами данных, облачные функции, restful api, graphql api и аутентификация пользователей — в ваш проект flutter вы также узнаете, как обрабатывать обновления в реальном времени с помощью live queries используя мощные серверы back4app, вы можете избежать значительной части ручной настройки и сосредоточиться на создании динамичного приложения flutter этот гид покажет разработчикам flutter, как настроить безопасную, масштабируемую и надежную структуру бэкенда, которая без усилий взаимодействует с вашей клиентской стороной мы также подчеркнем преимущества того, что back4app берет на себя тяжелую работу — такую как хостинг, аутентификация пользователей и логика сервера — чтобы вы могли воспользоваться такими функциями, как автоматическое масштабирование, повышенная безопасность и упрощенное обслуживание если у вас есть проект flutter и вы хотите сэкономить множество часов на настройке бэкенда, это правильное место для начала к концу этого учебного пособия вы поймете, какой тип бэкенда вы можете создать с помощью back4app, и будете готовы расширить свои бэкенд сервисы для приложения, готового к производству, или интегрировать более сложные функции, такие как внешние api и продвинутая аутентификация пользователей давайте начнем! предварительные требования чтобы завершить этот учебник, вам потребуется учетная запись back4app и новый проект back4app начало работы с back4app https //www back4app com/docs/get started/new parse app если у вас нет учетной записи, вы можете создать ее бесплатно следуйте приведенному выше руководству, чтобы подготовить ваш проект базовая среда разработки flutter убедитесь, что у вас установлен и настроен flutter sdk https //docs flutter dev/get started/install также убедитесь, что у вас есть ide (например, android studio или vs code), настроенная для flutter среда программирования dart обычно она устанавливается вместе с flutter убедитесь, что вы можете импортировать пакеты dart без ошибок знание основ flutter официальная документация flutter https //docs flutter dev если вы новичок в flutter, ознакомьтесь с официальной документацией или учебником для начинающих перед началом убедитесь, что у вас есть все эти предварительные требования настройка вашего проекта back4app и вашей локальной среды flutter поможет вам легче следовать инструкциям шаг 1 – создание нового проекта на back4app и подключение создать новый проект первый шаг в создании вашего бэкенда flutter на back4app – это создание нового проекта если вы еще не создали его, выполните следующие шаги войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления back4app дайте вашему приложению имя (например, “flutter backend tutorial”) после создания проекта вы увидите его в своем дашборде back4app этот проект станет основой для всех конфигураций бэкенда, которые мы обсудим установите и инициализируйте parse sdk в вашем приложении flutter back4app полагается на платформу parse для управления вашими данными, обновлениями в реальном времени, аутентификацией пользователей и многим другим чтобы подключить ваш проект flutter к back4app, выполните следующие шаги добавьте parse flutter sdk в ваше приложение dependencies parse server sdk flutter ^4 0 0 импортируйте пакет parse в ваш main dart (или где бы вы ни инициализировали ваше приложение) import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flutter/material dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyparseserverurl = 'https //parseapi back4app com'; const keyclientkey = 'your client key'; // initialize parse with debug set to true await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(const myapp()); } class myapp extends statelesswidget { const myapp({key? key}) super(key key); @override widget build(buildcontext context) { return materialapp( title 'flutter + back4app example', theme themedata(primaryswatch colors blue), home const scaffold( body center( child text('hello from flutter + back4app!'), ), ), ); } } в вашей панели управления back4app перейдите в раздел безопасность и ключи , чтобы найти ваш идентификатор приложения , ключ клиента , и url адрес сервера parse замените заполнители выше на свои собственные учетные данные с этой инициализацией каждый запрос из вашего приложения flutter безопасно направляется к вашему экземпляру back4app помните, что мастер ключ никогда не должен использоваться на стороне клиента вашего приложения flutter если вам нужен мастер ключ, храните его на сервере или в безопасной среде шаг 2 – настройка базы данных создание модели данных как только ваше приложение flutter подключено к back4app, вы можете начать проектировать схему вашей базы данных вы можете сделать это вручную из панели управления back4app перейдите в раздел “база данных” в вашей панели управления создайте новый класс (например, “задача”), и добавьте соответствующие столбцы (например, заголовок, завершено) back4app также предоставляет ai агента для помощи в автоматическом создании схемы откройте ai агента из вашей панели управления приложением или из меню опишите вашу модель данных простым языком (например, “создайте новое приложение todo с полной схемой класса ”) позвольте ai агенту создать схему для вас это упрощает настройку архитектуры данных если вы хотите, чтобы поля создавались автоматически, вы можете просто начать сохранять объекты из вашего приложения — parse поддерживает создание схемы на лету создание модели данных с помощью ai агента если вы решите использовать ai агента back4app, просто предоставьте короткое описание, и он создаст или предложит схему для вас это отличный способ ускорить начальную фазу моделирования данных вашего проекта на flutter чтение и запись данных с использованием flutter parse sdk ниже приведен простой пример, демонстрирующий, как создавать и извлекать объекты с использованием parse flutter sdk import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createtodoitem(string title, bool iscompleted) async { final todo = parseobject('todo') set('title', title) set('iscompleted', iscompleted); final response = await todo save(); if (response success && response result != null) { print('todo saved successfully ${response result}'); } else { print('error saving todo ${response error? message}'); } } future\<list\<parseobject>?> fetchtodos() async { final querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final response = await querytodo query(); if (response success && response results != null) { print('fetched todo items ${response results}'); return response results as list\<parseobject>; } else { print('error fetching todos ${response error? message}'); return null; } } с помощью этого вы можете напрямую взаимодействовать с вашей базой данных back4app из вашего приложения flutter просто вызовите createtodoitem('feed the cat', false) или fetchtodos() для записи и чтения данных чтение и запись данных с использованием rest api если вам нужно интегрироваться с другими сервисами или вы предпочитаете более традиционный подход, вы все равно можете использовать rest api back4app 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 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } это дает вам гибкость для создания любого подхода, который лучше всего подходит для вашего приложения flutter работа с живыми запросами back4app предоставляет живые запросы , чтобы вы могли получать обновления данных в реальном времени включите живые запросы в панели управления back4app (настройки сервера), а затем используйте клиент parse livequery для flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ parse server sdk flutter/live query dart'; future\<void> subscribetotodos() async { final livequery = livequery(); final query = querybuilder\<parseobject>(parseobject('todo')); subscription subscription = await livequery client subscribe(query); subscription on(livequeryevent create, (value) { print('new todo created $value'); }); subscription on(livequeryevent update, (value) { print('todo updated $value'); }); subscription on(livequeryevent delete, (value) { print('todo deleted $value'); }); } с этой подпиской вы можете слушать изменения данных по мере их появления это фантастично для создания совместных приложений, где несколько пользователей видят обновления данных в реальном времени как только будет вызван горячий перезагруз, ваша подписка останется активной, если приложение не перезапустится шаг 3 – применение безопасности с помощью acl и clp что такое acl и clp? back4app использует acl (списки управления доступом) и clp (разрешения на уровне класса) для ограничения того, кто может читать или записывать данные как на уровне объектов, так и на уровне классов этот уровень обеспечивает защиту ваших данных от несанкционированного доступа настройка разрешений на уровне класса в вашей панели управления back4app перейдите к база данных и выберите класс (например, “todo”) перейдите к разрешениям на уровне класса установите значения по умолчанию (например, только аутентифицированные пользователи могут создавать новые объекты) настройка acl в коде вы также можете применять acl на уровне объекта из кода flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createprivatetodo(parseuser owneruser, string title) async { final todo = parseobject('todo') set('title', title); final acl = parseacl(owner owneruser); acl setpublicreadaccess(allowed false); acl setpublicwriteaccess(allowed false); todo setacl(acl); final response = await todo save(); if (response success) { print('private todo saved '); } else { print('error ${response error? message}'); } } сочетая clp и acl, вы можете гарантировать, что только правильные люди или роли могут получить доступ к конкретным данным или изменять их шаг 4 – написание функций облачного кода почему облачный код? cloud code позволяет вам выполнять серверную логику без необходимости вручную настраивать какие либо серверы это идеально подходит для проверки данных, интеграции с внешними сервисами или соблюдения определенных правил в вашем бэкенде как услуге (baas) пример функции вот пример облачной функции, которая вычисляет длину текста // main js in your cloud code parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); вы можете развернуть этот код через back4app cli или в панели управления вашего приложения в разделе cloud code развертывание используя back4app cli b4a configure accountkey b4a deploy используя панель управления в панели управления вашего приложения перейдите в cloud code > functions вставьте код javascript нажмите deploy вызов cloud code из flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> gettextlength(string text) async { final function = parsecloudfunction('calculatetextlength'); final params = \<string, dynamic>{'text' text}; final parseresponse result = await function execute(parameters params); if (result success && result result != null) { print('text length ${result result\['length']}'); } else { print('error calling cloud code ${result error? message}'); } } этот безопасный подход гарантирует, что чувствительная логика остается на сервере, в то время как ваше приложение flutter просто отправляет запросы шаг 5 – настройка аутентификации включить аутентификацию пользователей back4app использует класс parse user для обработки регистрации и входа пользователей по умолчанию parse заботится о хешировании паролей, токенах сессий и безопасном хранении import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> signupuser(string username, string password, string email) async { final user = parseuser(username, password, email); final response = await user signup(); if (response success) { print('user signed up successfully!'); } else { print('sign up error ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = parseuser(username, password, null); final response = await user login(); if (response success) { print('user logged in ${response result}'); } else { print('login error ${response error? message}'); } } социальный вход back4app поддерживает интеграции с google, apple, facebook и другими у каждого провайдера есть свой подход и могут потребоваться дополнительные библиотеки (например, для входа через facebook или google) вы можете затем вызвать await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); настройте параметры в соответствии с документацией провайдера шаг 6 – обработка хранения файлов настройка хранения файлов вы можете хранить изображения, документы или другие медиафайлы, используя parsefile back4app защищает эти файлы и предоставляет url для их получения import 'dart\ io'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ image picker/image picker dart'; future\<void> uploadimage() async { final picker = imagepicker(); final xfile? pickedfile = await picker pickimage(source imagesource gallery); if (pickedfile == null) { print('no file selected '); return; } final parsefile = parsefile(file(pickedfile path)); final response = await parsefile save(); if (response success) { print('file saved ${parsefile url}'); } else { print('error uploading file ${response error? message}'); } } соображения безопасности вы можете определить, кто имеет доступ к файлам (публичные, аутентифицированные пользователи или ограниченные), комбинируя безопасность на уровне файлов с acl это гарантирует, что ваши данные файла остаются в безопасности шаг 7 – подтверждение электронной почты и сброс пароля почему это важно подтверждение электронной почты подтверждает, что пользователь владеет указанным адресом электронной почты, в то время как процессы сброса пароля улучшают пользовательский опыт и безопасность конфигурация панели управления перейдите в настройки электронной почты вашего приложения на панели управления back4app включите проверку электронной почты и сброс пароля настройте шаблоны электронной почты или ваш собственный домен, если это необходимо эти настройки позволяют вашему приложению flutter автоматически обрабатывать проверки прав собственности пользователей и восстановление пароля реализация в flutter final user = parseuser('testuser', 'password123', 'test\@example com'); final signupresponse = await user signup(); if (signupresponse success) { // the user will receive a verification email } // for password reset final resetresponse = await parseuser requestpasswordreset('test\@example com'); if (resetresponse success) { print('reset email sent successfully!'); } шаг 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); разверните этот код, затем перейдите в настройки приложения > настройки сервера > фоновая работа в вашей панели управления back4app, чтобы запланировать его шаг 9 – интеграция вебхуков что такое вебхуки? вебхуки позволяют вашему приложению back4app отправлять http запросы на внешний сервис, когда происходят определенные события (например, сохранение нового объекта) это идеально подходит для интеграции с инструментами третьих сторон перейдите в дополнительно > вебхуки в вашей панели управления back4app и добавить вебхук установите вашу конечную точку и триггеры (например, “новая запись в todo”) вы также можете вручную настроить вебхуки в облачном коде, отправляя http запросы в триггерах beforesave или aftersave шаг 10 – изучение панели администратора back4app где это найти приложение back4app admin app – это удобный интерфейс, который позволяет не техническим членам команды управлять данными (операции crud, задачи с данными и т д ) без необходимости открывать панель управления parse перейдите в app dashboard > more > admin app нажмите enable admin app вы создадите администратора, выберете поддомен и войдете в систему с новыми учетными данными приложение admin помогает быстро просматривать и изменять данные заключение в этом учебном пособии вы узнали как создать бэкенд для flutter с использованием back4app и parse flutter sdk вы создали классы, хранили данные, настраивали запросы в реальном времени, применяли безопасность с помощью acl и clp, писали облачные функции, планировали задачи, интегрировали вебхуки и исследовали панель администратора back4app этот подход ускоряет разработку, позволяя вам сосредоточиться на клиентской стороне flutter, а не на сложной конфигурации сервера финальная строка, которую вы имеете сейчас, — это функционирующий и безопасный бэкенд, который использует restful api, аутентификацию пользователей и простую манипуляцию данными вы можете интегрировать более продвинутые функции в любое время — такие как дополнительные облачные функции, вызовы внешних api или пользовательские роли следующие шаги подготовьтесь к производству реализуйте продвинутый кэширование, аналитику или управление доступом на основе ролей расширьте ваше приложение интегрируйте сторонние сервисы или создайте больше облачных функций для специализированной бизнес логики консультируйтесь с документацией back4app изучите продвинутую безопасность, настройку производительности, анализ логов и многое другое узнайте больше ознакомьтесь с учебными пособиями по приложениям для живого чата, услугам на основе местоположения или более сложным структурам данных объедините их с вашим проектом flutter для реальных случаев использования продолжая уточнять эту настройку, вы преобразите свое приложение flutter в мощное, масштабируемое решение, построенное на надежном бэкенд сервисе удачного кодирования!