Пошаговое руководство по созданию бэкэнда на Flutter

В этой статье речь пойдет о Flutter, наборе для разработки пользовательского интерфейса с открытым исходным кодом, созданном компанией Google.

Мы рассмотрим преимущества и недостатки использования Flutter и выделим различные варианты бэкенда для вашего приложения на Flutter.

Наконец, вы узнаете, как создать рабочий бэкенд для вашего приложения Flutter, используя функцию Back4apps “Бэкенд как сервис” (BaaS).

Что такое Flutter?

Flutter – это кроссплатформенный фреймворк для разработки, который позволяет быстро создавать нативные приложения для Android, iOS, Web, Linux, macOS и Windows.

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

Сама команда Flutter определяет технологию так;

Фреймворк с открытым исходным кодом от Google для создания красивых, нативно скомпилированных, многоплатформенных приложений из одной кодовой базы.

Топ-3 преимуществ и ограничений Flutter

Какие бывают типы бэкэнда?

Выбор подходящего варианта Backend для решения задач на стороне сервера очень важен при создании любого приложения.

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

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

IaaS

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

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

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

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

PaaS

Платформа-как-сервис (PaaS) и инфраструктура-как-сервис (IaaS) – это две разные модели облачных вычислений, которые служат разным целям. Хотя обе они обеспечивают гибкость и масштабируемость, они отвечают разным потребностям в разработке и развертывании приложений.

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

BaaS

Бэкенд как услуга (BaaS) предоставляет готовые к использованию сервисы и функциональные возможности бэкенда, позволяя сосредоточиться на создании и улучшении пользовательского опыта приложения без управления инфраструктурой бэкенда.

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

Это все равно что использовать готовый пазл, который идеально вписывается в ваше приложение, экономя время и силы.

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

Как построить бэкенд Flutter, используя бэкенд как сервис

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

Обзор Back4app

Back4App – это платформа Backend-as-a-Service (BaaS), которая упрощает разработку мобильных и веб-приложений, предоставляя полную инфраструктуру бэкенда.

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

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

Ключевые особенности/преимущества Back4app включают:

• Реляционные и нереляционные базы данных
• API REST и GraphQL
• Живые запросы
• Широкий спектр возможностей аутентификации
• Масштабируемый хостинг
• Push-уведомления и уведомления по электронной почте

Back4App использует сервер Parse, набор с открытым исходным кодом для разработки серверных компонентов приложения. С поддержкой множества технологий. В этом справочном руководстве перечислены различные технологии, поддерживаемые Back4app.

Введение в проект

Целью данного руководства является создание бэкенда Back4app для поддержки приложения Flutter. Приложение будет подключаться и взаимодействовать с настроенным бэкэндом с помощью Parse server SDK.

Приложение, которое вам предстоит создать, представляет собой простое приложение “Контакты”, позволяющее пользователям создавать и читать контакты. Эти контакты будут храниться с помощью поддержки базы данных PostgreSQL в Back4app.

Пользователи могут добавлять новые контакты, вводя информацию о них в приложении.

К концу этого руководства вы будете иметь четкое представление о том, как:

• Создайте внутреннее приложение на платформе Back4app
• Запись в структурированную базу данных Back4app
• Разберитесь с основами безопасности бэкенда Parse.

Пререквизиты

Чтобы следовать этому руководству, вы должны выполнить следующие условия:

• Знакомство с языком Dart и фреймворком Flutter
• Знания о манипулировании состояниями во Flutter
• Симулятор или эмулятор устройства для запуска вашего приложения. Xcode для iOS или Android Studio для Android.
• Базовое понимание реляционных и нереляционных баз данных

Создать приложение

Для создания бэкенда вам потребуется учетная запись Back4app. Вы можете создать его, если у вас его нет, пройдя регистрацию для получения бесплатногоаккаунта .

Если у вас уже есть аккаунт в Back4app, войдите в него и создайте новое приложение. В качестве опции сервиса выберите Backend as a Service.

Это позволит создать масштабируемый бэкэнд BaaS. Не забудьте дать своему приложению уникальное имя. В качестве базы данных Back4app предлагает PostgreSQL.

PostgreSQL – популярная реляционная система управления базами данных (РСУБД) с открытым исходным кодом. Она известна своей масштабируемостью, надежностью, высокой производительностью и безопасностью.

Использование бета-версии PostgreSQL в Back4app позволит вам воспользоваться этими возможностями и преимуществами.

Фаза сборки должна пройти быстро. По его завершении вы перейдете на панель приложений.

База данных PostgreSQL

В Back4App вы можете определить классы и поля, которые представляют данные вашего приложения. PostgreSQL использует реляционные базы данных – структурированный метод хранения данных для пользователей вашего приложения.

Как уже говорилось ранее, наше приложение Flutter будет представлять собой книгу контактов, в которой мы сможем хранить множество контактов. В базах данных PostgreSQL хранятся отношения. Разумной моделью данных для этого приложения будет класс контактов и город ZipCode контакта.

Начнем с модели контактов. Для таблицы контактов потребуются различные поля;

• ContactId/ObjectId
• Имя
• Номер телефона
• Почтовый индекс

Таблица вашей модели данных будет выглядеть следующим образом;

Связаться с

Почтовый индекс

Объект Contact будет хранить информацию о контакте, с contactId в качестве первичного ключа. Поля name, phoneNumber и zipCode являются обязательными для заполнения (NOT NULL),

Эта модель данных создает связь между таблицами приложения “Контакты”, позволяя управлять контактной информацией и связывать несколько полей с каждым контактом.

Чтобы создать эти два класса в приложении Back4app, нажмите кнопку “Создать класс” в левом верхнем углу панели инструментов.

Назовите класс Contact и включите опцию “Является ли это обязательным полем?”.

Создайте столбцы для полей данных в классе Contact, а затем сделайте то же самое для класса ZipCode. Back4app позволяет настраивать каждый созданный столбец.

Панель администратора

Back4App предоставляет интуитивно понятный GUI (графический интерфейс пользователя) под названием Admin Panel для управления бэкендом ваших приложений без особых усилий.

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

Доступ к панели администратора приложения можно получить в самом приложении. На приборной панели приложения вы найдете кнопку или ссылку с надписью“Панель администратора” в разделе “Еще“, которая направит вас в панель администратора. Там вы можете включить и включить приложение администратора.

Вам будет предоставлено имя пользователя и пароль для доступа к приложению администратора.

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

Для данного руководства хорошим примером будет flutter-backend.admin.back4app.com.

Теперь вы можете войти в панель администратора, открыв в браузере указанный домен.

Чтобы узнать больше о приложении Back4app Admin App, посетите официальную документацию.

Обеспечение безопасности приложения

В настоящее время ваше внутреннее приложение полностью уязвимо, и информация в нем может быть подделана со стороны клиента.

Чтобы предотвратить это на этапе производства, вы можете настроить правила и разрешения доступа.

Чтобы контролировать процесс создания классов и запретить создание классов на стороне клиента, перейдите в раздел Dashboard > App Settings и найдите Client Class Creation. Отключите эту опцию, поскольку в настоящее время вашему приложению требуются только два созданных вами класса.

При выключении появится всплывающее окно. Это нужно для подтверждения и сохранения изменений в приложении.

Тестирование CRUD API с помощью Flutter

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

Чтобы инициализировать приложение Flutter, необходимо установить Flutter SDK на свой компьютер.

Следуйте официальным документам Flutter поначалу работы, чтобы установить Flutter SDK и необходимые инструменты для создания приложения Flutter на машину с Windows или Mac.

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

#Initialize your Flutter app
flutter create my_flutter_app

#Run your Flutter app
flutter run

Эти команды помогут вам создать и запустить простое приложение Flutter.

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

Перепишите весь код в файле main.dart следующим образом:

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final keyApplicationId = 'appID';
  final keyClientKey = 'clientKey';
  final keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  runApp(MaterialApp(
    title: 'Contacts',
    theme: ThemeData(
      primaryColor: Colors.white,
    ),
    home: ContactsApp(),
  ));
}

class ContactsApp extends StatefulWidget {
  const ContactsApp({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _ContactsAppState createState() => _ContactsAppState();
}

class _ContactsAppState extends State<ContactsApp> {
  List<Contact> contacts = [];
  String? selectedZipCode; // Initialize with a default value

  @override
  void initState() {
    super.initState();
    selectedZipCode = '1234'; // Initialize with a default value
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Contacts'),
      ),
      body: ListView.builder(
        itemCount: contacts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(contacts[index].name),
            subtitle: Text(contacts[index].phoneNumber),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  contacts.removeAt(index);
                });
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showAddContactDialog();
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  void _showAddContactDialog() async {
    showDialog(
      context: context,
      builder: (context) {
        String name = '';
        String phoneNumber = '';

        return AlertDialog(
          title: const Text('Add Contact'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                decoration: const InputDecoration(labelText: 'Name'),
                onChanged: (value) {
                  name = value;
                },
              ),
              TextField(
                decoration: const InputDecoration(labelText: 'Phone Number'),
                onChanged: (value) {
                  phoneNumber = value;
                },
              ),
              // Checkbox for Zip Code
              ListTile(
                title: const Text('Select Zip Code'),
                subtitle: Column(
                  children: [
                    RadioListTile(
                      title: const Text('1234'),
                      value: '1234',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                    RadioListTile(
                      title: const Text('4321'),
                      value: '4321',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  contacts.add(Contact(
                    name: name,
                    phoneNumber: phoneNumber,
                    zipCode: selectedZipCode as String,
                  ));
                });

                // Save the contact to Back4App
                final contact = ParseObject('Contact');
                contact.set('name', name);
                contact.set('phoneNumber', phoneNumber);
                contact.set(
                    'zipCode',
                    (ParseObject('ZipCode')..objectId = selectedZipCode.objectId)
                        .toPointer());

                await contact.save();

                // ignore: use_build_context_synchronously
                Navigator.of(context).pop();
              },
              child: const Text('Save'),
            ),
          ],
        );
      },
    );
  }
}

class Contact {
  final String name;
  final String phoneNumber;
  final String zipCode;

  Contact({
    required this.name,
    required this.phoneNumber,
    required this.zipCode,
  });
}

class ZipCode {
  final String zipCode;

  ZipCode({
    required this.zipCode,
  });
}

Таким образом, вы получите базовый пользовательский интерфейс для вашего приложения Flutter.

Теперь вы можете приступить к реализации Back4app. Back4app использует Parse Flutter SDK для интеграции Parse Server в приложение Flutter.

Parse Server – это бэкэнд-платформа с открытым исходным кодом, которая предоставляет готовую к использованию инфраструктуру для управления данными приложений.

С помощью SDK вы можете взаимодействовать с Parse Server API из своего приложения Flutter, что упрощает выполнение CRUD-операций (Create, Read, Update, Delete) над данными, управление сессиями пользователей и другие функции на стороне сервера.

Чтобы использовать Parse SDK, установите его в качестве зависимости в файл pubspec.yaml вашего проекта Flutter.

Укажите сервер Parse:

dependencies:
	# Parse SDK
  parse_server_sdk_flutter: ^5.1.1

  flutter:
    sdk: flutter

Убедитесь в точности отступов. Файлы .yaml очень чувствительны к регистру и отступам.

Выполните команду, чтобы установить указанную зависимость:

flutter pub get

Перейдите в файл main.dart и импортируйте добавленный вами Parse SDK:

import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
	// code for runApp()

  const keyApplicationId = 'YOUR_APPLICATION_ID_HERE';
  const keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  const keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
}

Здесь вы импортируете ParseSDk в файл main.dart. Вы также инициализируете Parse внутри main(), вызвав Parse().initialize(). Поскольку это асинхронная программа, пометьте main() ключевым словом async.

Заполнители для Application_Id и Client Key должны быть заменены реальными значениями. Это учетные данные приложения для связи с вашим бэкендом.

Чтобы получить эти ключи, перейдите в Настройки приложения > Безопасность и ключи на панели Back4app. Затем замените заполнители на соответствующие ключи.

При запуске вашего приложения будет запущена функция main(), Parse будет инициализирован вашим приложением, а ваше приложение Flutter будет подключено к бэкенду Back4app.

Запись в класс Contact и ZipCode

Здесь вы узнаете, как создавать и записывать классы в базе данных со стороны клиента вашего приложения. Чтобы создать классы Contact и Birthday, вы измените файл main.dart.

Внутри метода onPressed() для виджета поднятой кнопки вы будете использовать функцию ParseObject() для создания нового экземпляра класса Contacts :

final contact = ParseObject('Contact');
contact.set('name', name);
contact.set('phoneNumber', phoneNumber);

final ParseResponse parseResponse = await contact.save();

if (parseResponse.success) {
   final contactId = (parseResponse.results!.first as ParseObject).objectId!;
		print('Object created: $contactId');

	} else {
      print('Object created with failed: ${parseResponse.error.toString()}');
    }

В Parse Flutter SDK используется функция ParseObject() для создания нового экземпляра класса, имя которого вы передаете в качестве аргумента. Вызов Contact.set() с именем поля объекта и его значениями запишет и обновит эти поля.

Вы можете создать объект ParseResponse для хранения результатов операции сохранения. ParseResponse будет содержать свойство success, которое будет равно true, если операция сохранения прошла успешно, и false, если операция сохранения не удалась.

Затем код инициализирует переменную contactId значением null. Эта переменная будет использоваться для хранения автоматически сгенерированного objectId сохраненного объекта контакта. Далее следует обработка ошибок.

Под приведенным выше кодом:

final zipCodeObject = ParseObject('ZipCode')
    ..objectId = selectedZipCode as String;
zipCodeObject.set('zipCode', selectedZipCode);
contact.set('zipCode', zipCodeObject.toPointer());

await contact.save();
await zipCodeObject.save();

Здесь вы создаете объект ParseObject почтового индекса. При добавлении нового контакта через диалог код будет правильно создавать объект ZipCode и связывать его с полем zipCode объекта Contact.

Он использует objectId выбранного почтового индекса для создания ассоциации в качестве указателя. Используйте метод .save(), чтобы сохранить оба объекта в бэкенде.

Запрос/чтение данных из базы данных

Здесь мы рассмотрим, как можно отправить запрос к базе данных из вашего приложения Flutter. Вы можете сделать запрос, чтобы получить все контакты с одинаковым почтовым индексом. Это было бы довольно сложно сделать в нереляционной системе баз данных.

Если извлечение прошло успешно, вы можете показать список всех контактов в приложении Flutter.

Чтобы получить список контактов с одинаковым почтовым индексом:

Future<void> _loadContacts() async {
  final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Contact'))
    ..whereEqualTo('zipCode', selectedZipCode) // Filter by zip code
    ..orderByAscending('name');

  final response = await queryBuilder.query();

  if (response.success && response.results != null) {
    final List<Contact> loadedContacts = response.results!.map((parseObject) {
      return Contact(
        name: parseObject.get('name'),
        phoneNumber: parseObject.get('phoneNumber'),
        zipCode: parseObject.get('zipCode')!.objectId,
      );
    }).toList();

    setState(() {
      //set your contacts to loadedContacts
    });
  }
}

@override
  void initState() {
    super.initState();
   
    _loadContacts(); // Load contacts when the app starts
  }

Метод _loadContacts формирует запрос к классу Contacts, ища объекты контактов с указанным почтовым индексом.

Затем метод возвращает контакты в виде списка, упорядочивая их по имени в порядке возрастания на основе поля ‘name’.

Когда приложение запускается(initState), вызывается метод _loadContacts, чтобы получить контакты с выбранным почтовым индексом.

Заключение

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

Вы также можете использовать платформу Back4app для реализации аутентификации пользователей с помощью установленной базы данных моделей пользователей.