Пошаговое руководство по добавлению сервисов Firebase в приложение Flutter

Вы давно работаете разработчиком мобильных приложений? Тогда у вас должно быть представление о Flutter. Это фреймворк для разработки мобильных приложений, разработанный Google. С помощью этого фреймворка вы можете разрабатывать приложения как для Android, так и для iOS.

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

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

Теперь, если вы хотите получить доступ к платформе Firebase при использовании инфраструктуры Flutter, вам нужно использовать FlutterFire. Это плагин Flutter для Firebase. Итак, с помощью этого плагина вы можете добавить сервисы Firebase в приложение Flutter. Давайте проанализируем этот аспект подробно прямо сейчас!

Предпосылки

Для использования сервисов Firebase для приложения Flutter вам потребуется:

• Android Studio 3.1.3 или выше
• Google Flutter SDK 0.9.4 или выше
• Плагин Google Flutter 29.0.1 или выше
• Аккаунт Firebase
• Устройство с Android API уровня 23 или выше.

Добавление сервисов Firebase в приложение Flutter

Шаг 1: Подготовка проекта Google Flutter

Прежде всего, вам нужно подготовить проект Flutter. Для этого перейдите в Android Studio и создайте новый проект Flutter. Убедитесь, что вы выбрали вариант приложения Flutter. Кроме того, подтвердите приложение с именем пакета, как показано на снимке экрана ниже.

Помните одну вещь: вы не можете использовать сервисы Firebase, пока не зарегистрируете их и не свяжете с каким-либо проектом. Есть два способа сделать это: (а) вручную с помощью браузера и (б) с помощью Android Studio Firebase Assistant. Последнее требует меньше времени и усилий.

Теперь перейдите внутрь проекта Flutter и выберите Инструменты > Flutter > Открыть для редактирования в Android Studio. Здесь вам будет предложено открыть проект. Убедитесь, что вы открываете его в новом окне. В новом окне перейдите в «Инструменты» > «Firebase», чтобы открыть помощник Firebase.

Теперь перейдите в раздел «Аналитика» > «Зарегистрировать событие аналитики» и нажмите кнопку «Подключиться». Здесь вы увидите диалоговое окно, в котором вам будет предложено назвать проект Firebase. Итак, введите имя и нажмите кнопку «Подключиться к Firebase», как показано на скриншоте ниже.

Теперь процесс регистрации будет завершен. Итак, добавьте файл google-services.json. Он содержит детали конфигурации.

Для чтения файла JSON вам потребуется подключаемый модуль Google Services. Теперь откройте сборку. файл gradle и добавить classpath плагина внутри раздела зависимостей.

classpath 'com.google.gms:google-services:4.0.1'

apply plugin: 'com.google.gms.google-services'

Активируйте плагин, добавив следующие строки кода в файл build.gradle.

apply plugin: 'com.google.gms.google-services'

Теперь закройте окно и вернитесь к проекту Flutter.

Шаг 2: Добавление зависимостей

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

firebase_analytics: ^1.0.3
cloud_firestore: ^0.7.3
firebase_ml_vision: ^0.2.0+1

Здесь мы будем создавать приложение, которое может сканировать QR-коды. Таким образом, база данных будет сохранена в облаке. Мы будем использовать комплект ML для декодера QR-кода и плагин Cloud Firestore для базы данных.

Теперь для обработки QR-кодов вам потребуется Image Picker. Вот как вы можете добавить его в качестве зависимости.

image_picker: ^0.4.10

После этого нажмите кнопку Packages get и установите все пакеты.

Шаг 3. Использование Firebase Analytics

Как правило, вам не нужно писать код для использования Firebase Analytics в приложении Flutter. Если вы не столкнулись с какими-либо ошибками, вы могли видеть всплывающие события на панели аналитики StreamView, как показано на снимке экрана ниже.

Шаг 4. Использование комплекта Firebase ML

Комплект Firebase ML — это служба Firebase. Он позволяет распознавать лица, сканировать штрих-коды и выполнять распознавание символов. Плагин Flutterfire предлагает интуитивно понятный API. Теперь давайте используем его для декодирования QR-кодов.

Вы можете использовать Flutter для разработки кроссплатформенных приложений. Вы также можете использовать Flutter с сервисами Firebase. Именно поэтому он завоевал популярность среди людей.

Для расшифровки QR-кода создайте макет, содержащий кнопку для съемки фотографий. Для создания макета дизайна материалов вы можете использовать следующий фрагмент кода.

void main() => runApp(new MaterialApp(home: new MyApp()));
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
 
            // More code here
 
          },
          child: new Text("Capture QR Code")
        )
      )
    );
  }
}

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

Теперь у кнопки есть прослушиватель событий при нажатии. Внутри слушателя можно использовать метод pickImage() класса ImagePicker. Это поможет вам сделать снимок. Для подключения прослушивателя используйте следующий код.

ImagePicker.pickImage(source: ImageSource.camera).then((photo) {
  // More code here
});

После захвата фотографии вы должны передать ее классу BarCodeDetector ML Kit. Чтобы получить объект класса, используйте метод barCodeDetector() класса FirebaseVision.

Комплект ML поддерживает различные типы штрих-кодов. Таким образом, для более точного принятия решения вы можете использовать объект BarCodeDetectorOptions для указания типа штрих-кода.

Вот как вы можете создать детектор для QR-кодов:

BarcodeDetector detector = 
          FirebaseVision.instance.barcodeDetector(
            BarcodeDetectorOptions(
                barcodeFormats: BarcodeFormat.qrCode
            )
          );

Теперь есть поворот в хвосте. Детектор не сможет обрабатывать изображения напрямую. Таким образом, вам нужно преобразовать фотографию в объект FirebaseVisionImage с помощью метода fromFile(). Метод работает асинхронно. Итак, вам нужно прикрепить к нему слушателя.

detector
      .detectInImage(FirebaseVisionImage.fromFile(photo))
      .then((barcodes) {
        // More code here        
      });

В прослушивателе вам нужно будет получить доступ к списку объектов штрих-кода. Поле rawValue каждого объекта содержит необработанные данные. Теперь создайте простой виджет AlertDialog с виджетом Text для заголовка и содержимого и виджетом FlatButton. Вот как вы можете достичь этого.

if(barcodes.length > 0) {
  var barcode = barcodes[0]; // Pick first barcode
 
  // Create Alert Dialog
  showDialog(context: context, builder: (context) {
    return new AlertDialog(
      title: new Text("QR Code Contents"),
      content: new Text(barcode.rawValue),  // Show raw value
      actions: <Widget>[new FlatButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: new Text("OK")
      )],
    );
  });
}

После использования кода, если вы запустите приложение, вы получите вывод, как показано ниже.

Шаг 5: Использование облачного хранилища Firestore

Cloud Firestore — это база данных NoSQL. Вы можете использовать это средство для хранения данных приложения в облаке. Плагин FlutterFire позволяет выполнять операции CRUD.

Теперь вручную включите службу Cloud Firestore в консоли Firebase. Для этого перейдите в раздел База данных и нажмите кнопку Создать базу данных.

Здесь вам нужно определить правила безопасности. Для этого выберите вариант Запустить в тестовом режиме.

Теперь нажмите кнопку «Включить», которая создаст базу данных. В Android Studio вы можете получить ссылку на базу данных, используя поле экземпляра класса Firestore.

вар myDatabase = Firestore.instance;

Всякий раз, когда вы используете Cloud Firestore, вы должны хранить все данные внутри документов. Каждый документ должен ссылаться на коллекцию. Для этого вы можете использовать метод collection(). Получив доступ к коллекции, вы должны использовать метод add().

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

myDatabase.collection("qr_codes").add({
        "raw_data": barcode.rawValue,
        "time": new DateTime.now().millisecondsSinceEpoch
      }).then((_) {
        print("One document added.");
      });

можно увидеть содержимое внутри консоли Firebase, как показано на снимке экрана ниже.

Вывод

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

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

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