Guide étape par étape pour construire un backend Flutter

Cet article traite de Flutter, un kit de développement logiciel d’interface utilisateur open-source créé par Google.

Nous explorerons les avantages et les inconvénients de l’utilisation de Flutter et mettrons en évidence les différentes options de backend pour votre application Flutter.

Enfin, vous apprendrez à construire un backend fonctionnel pour votre application Flutter en utilisant la fonctionnalité Backend as a Service (BaaS) de Back4apps.

Qu’est-ce que le Flutter ?

Flutter est un cadre de développement multiplateforme qui vous permet de créer rapidement des applications Android, iOS, Web, Linux, macOS et Windows à l’aspect natif.

Avec Flutter, vous constaterez que de nombreuses complexités liées à la création d’applications spécifiques à une plateforme sont contournées pour vous. Flutter est également connu pour ses performances rapides et ses magnifiques widgets d’interface utilisateur.

L’équipe de Flutter définit elle-même la technologie comme suit ;

Il s’agit d’un framework open-source de Google qui permet de créer de belles applications multiplateformes compilées nativement à partir d’une base de code unique.

Les 3 principaux avantages et limites de Flutter

Quels sont les types de backend ?

Le choix de l’option Backend appropriée pour gérer les tâches côté serveur est très important lors de la création d’une application.

Chaque type de backend a ses points forts, et les besoins particuliers de votre application doivent guider votre choix de backend.

Les sous-sections suivantes mettent en évidence les différentes options de backend que vous pouvez utiliser, ce qu’elles sont, comment elles fonctionnent et comment elles peuvent répondre au mieux aux besoins de votre application.

IaaS

L’IaaS est une option de backend que vous devriez envisager d’employer si vous avez affaire à une grande application avec de nombreux utilisateurs. L’IaaS est un modèle d’informatique en nuage qui signifie Infrastructure as a Service (infrastructure en tant que service).

L’informatique en nuage est un modèle dans lequel un fournisseur tiers fournit des ressources informatiques, telles que des serveurs, des espaces de stockage et des applications, via l’internet.

Ces ressources sont accessibles à la demande, avec une tarification à la carte. Avec l’IaaS, le fournisseur de services en nuage assure la maintenance de la principale infrastructure informatique sous-jacente, tandis que vous avez le contrôle total de la configuration des données de votre application, du système d’exploitation et de toutes les autres exigences de base.

Il s’agit donc d’une bonne option pour les applications nécessitant une évolution des ressources informatiques à la hausse ou à la baisse.

PaaS

Platform-as-a-Service (PaaS) et Infrastructure-as-a-Service (IaaS) sont deux modèles distincts d’informatique en nuage qui répondent à des objectifs différents. Bien qu’ils offrent tous deux flexibilité et évolutivité, ils répondent à des besoins différents en matière de développement et de déploiement d’applications.

Un backend PaaS vous fournira un environnement de développement complet, en faisant abstraction des complexités liées à la gestion des serveurs, du réseau et du stockage. Le PaaS est le mieux adapté si vous souhaitez vous concentrer sur la création et la maintenance d’applications sans vous préoccuper de la gestion de l’infrastructure.

BaaS

Un backend en tant que service (BaaS) vous fournit des services et des fonctionnalités backend prêts à l’emploi, ce qui leur permet de se concentrer sur la création et l’amélioration de l’expérience utilisateur de l’application sans avoir à gérer l’infrastructure backend.

Avec BaaS, les développeurs peuvent accéder à des fonctions telles que l’authentification des utilisateurs, les bases de données et le stockage, par le biais d’API, ce qui élimine la nécessité de mettre en place et de maintenir des serveurs dorsaux.

C’est comme si vous utilisiez une pièce de puzzle prête à l’emploi qui s’intègre parfaitement à votre application, ce qui vous permet de gagner du temps et d’économiser des efforts.

Par essence, le BaaS simplifie le processus de développement, permettant aux développeurs de se concentrer sur les aspects de leurs applications qui touchent l’utilisateur, tout en s’appuyant sur des services backend préconstruits qui se chargent des tâches les plus lourdes.

Comment construire un backend Flutter en utilisant un backend en tant que service

Cette section explique comment construire le backend d’une application Flutter. La plateforme Back4app est une excellente option pour construire des applications backend évolutives et sécurisées qui sont flexibles et faciles à déployer.

Aperçu de Back4app

Back4App est une plateforme Backend-as-a-Service (BaaS) qui simplifie le développement d’applications mobiles et web en fournissant une infrastructure backend complète.

En utilisant Back4App, vous pourrez vous concentrer sur la construction des fonctionnalités frontales de votre application.

La plateforme offre une large gamme de services dorsaux prêts à l’emploi, notamment des bases de données, des API et des fonctions en nuage.

Les principales caractéristiques/avantages de Back4app sont les suivants :

• Bases de données relationnelles et non relationnelles
• API REST et GraphQL
• Requêtes en direct
• Large éventail d’options d’authentification
• Hébergement évolutif
• Notifications push et par courriel

Back4App utilise le serveur Parse, un kit open-source pour développer des composants côté serveur d’une application. Avec le support de multiples technologies. Ce guide de référence liste les différentes technologies supportées par Back4app.

Introduction du projet

Le but de ce guide est de construire un backend Back4app pour supporter une application Flutter. L’application se connectera et interagira avec le backend mis en place en utilisant le SDK Parse server.

L’application que vous allez construire est une simple application de contacts qui permet aux utilisateurs de créer et de lire des contacts. Ces contacts seront stockés en utilisant le support de la base de données PostgreSQL de Back4app.

Les utilisateurs peuvent ajouter de nouveaux contacts en saisissant les informations les concernant dans l’application.

À la fin de ce guide, vous aurez acquis une solide compréhension de la manière de procéder :

• Construire une application backend sur la plateforme Back4app
• Ecrire dans une base de données structurée de Back4app
• Gérer les bases de la sécurité du backend de Parse.

Conditions préalables

Pour suivre ce guide, vous devez remplir les conditions suivantes :

• Familiarité avec le langage Dart et le framework Flutter
• Connaissance de la manipulation d’états dans Flutter
• Un simulateur ou un émulateur d’appareil pour exécuter votre application. Xcode pour iOS ou Android Studio pour Android.
• Compréhension de base des bases de données relationnelles et non relationnelles

Créer une application

Vous devez avoir un compte Back4app pour créer votre backend. Vous pouvez en créer un si vous n’en avez pas en suivant la procédure d ‘inscription pour uncompte gratuit .

Si vous avez déjà un compte chez Back4app,connectez-vous et créez une nouvelle application. Sélectionnez Backend as a Service comme option de service.

Cela permettra de construire un backend BaaS évolutif. N’oubliez pas de donner un nom unique à votre application. Pour la base de données, Back4app propose PostgreSQL comme option de base de données.

PostgreSQL est un système de gestion de bases de données relationnelles (SGBDR) open-source très répandu. Il est connu pour son évolutivité, sa fiabilité, ses hautes performances et sa sécurité.

L’utilisation de l’option beta PostgreSQL dans Back4app vous permet de bénéficier de ces fonctionnalités et avantages.

La phase de construction devrait se dérouler rapidement. Une fois qu’elle est terminée, vous serez dirigé vers le tableau de bord de votre application.

Base de données PostgreSQL

Dans Back4App, vous pouvez définir des classes et des champs qui représentent les données de votre application. PostgreSQL utilise des bases de données relationnelles, une méthode structurée de stockage des données pour les utilisateurs de votre application.

Comme mentionné précédemment, notre application Flutter sera un carnet de contacts dans lequel nous pourrons stocker plusieurs contacts. Les bases de données PostgreSQL contiennent des relations. Un modèle de données raisonnable pour cette application serait une classe de contacts et le code postal de la ville du contact.

Commençons par le modèle Contact. La table des contacts nécessite les différents champs ;

• ContactId/ObjectId
• Nom
• Numéro de téléphone
• Code postal

Votre tableau de modèle de données ressemblerait à ceci ;

Contact

Code postal

L’objet Contact stocke les informations relatives au contact, avec l’identifiant ContactId comme clé primaire. Les champs name, phoneNumber et zipCode doivent obligatoirement être remplis (NOT NULL),

Ce modèle de données crée une relation entre les tables de l’application Contacts, ce qui vous permet de gérer les informations relatives aux contacts et d’associer plusieurs champs à chaque contact.

Pour créer ces deux classes sur votre application Back4app, cliquez sur le bouton Créer une classe dans le coin supérieur gauche de votre tableau de bord.

Nommez la classe Contact et activez l’option “champ obligatoire”.

Créez les colonnes pour les champs de données de Contact, puis faites de même pour la classe Code Postal. Back4app vous permet de personnaliser chaque colonne créée.

Panneau d’administration

Back4App fournit une interface utilisateur graphique (GUI) intuitive appelée panneau d’administration pour gérer le backend de vos applications sans effort.

Le panneau d’administration est un outil puissant pour surveiller, modifier et analyser les données, ce qui en fait un atout inestimable pour la gestion de l’application.

Vous pouvez accéder au panneau d’administration de votre application à l’intérieur de celle-ci. Sur le tableau de bord de l’application, vous trouverez un bouton ou un lien intitulé“Panneau d’administration” sous “Plus“, qui vous dirigera vers le panneau d’administration. Vous pouvez y activer l’application d’administration.

Vous fournirez un nom d’utilisateur et un mot de passe pour accéder à l’application d’administration.

La dernière étape de la configuration de votre application d’administration consiste à choisir un nom de domaine que vous souhaitez utiliser pour accéder au panneau.

Pour ce guide, un bon exemple serait : flutter-backend.admin.back4app.com.

Vous pouvez maintenant vous connecter à votre tableau de bord d’administration en ouvrant le domaine fourni dans un navigateur.

Pour en savoir plus sur Back4app Admin App, visitez la documentation officielle.

Sécuriser l’application

Actuellement, votre application dorsale est totalement vulnérable et les informations qu’elle contient peuvent être altérées depuis le côté client.

Pour éviter cela dans la phase de production, vous pouvez configurer des règles et des autorisations d’accès.

Pour contrôler la façon dont les classes sont créées et interdire la création de classes du côté client, naviguez dans votre tableau de bord > Paramètres de l’application et localisez Création de classes par le client. Désactivez cette option, car votre application ne nécessite actuellement que les deux classes que vous avez créées.

Une fenêtre contextuelle s’affiche lorsque vous désactivez l’application. Il s’agit de confirmer et d’enregistrer les modifications apportées à l’application.

Test d’API CRUD avec Flutter

Dans cette section, vous testerez les fonctions de l’API backend et la base de données de votre application à l’aide d’une application Flutter que vous créerez. Vous commencerez par construire l’interface utilisateur de l’application Flutter.

Vous devez installer le SDK Flutter sur votre ordinateur pour initialiser une application Flutter.

Suivez la documentation officielle Get Started Docs de Flutter pour installer le SDK Flutter et les outils nécessaires à la création d’une application Flutter sur votre machine Windows ou Mac.

Pour initialiser une application Flutter, exécutez les commandes suivantes dans votre terminal :

#Initialize your Flutter app
flutter create my_flutter_app

#Run your Flutter app
flutter run

Ces commandes permettent d’échafauder et de démarrer une application Flutter simple sur laquelle vous pourrez vous appuyer.

Pour que ce guide reste simple, le fichier main.dart contiendra la majeure partie du code nécessaire à l’exécution de votre application Flutter. Nous ne discuterons pas du code Flutter ici, car ce n’est pas l’objectif de ce guide.

Remplacez tout le code du fichier main.dart par le code suivant :

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,
  });
}

Avec cela, vous aurez l’interface utilisateur de base de votre application Flutter.

Vous pouvez maintenant démarrer l’implémentation de Back4app. Back4app utilise le SDK Parse Flutter pour intégrer Parse Server dans une application Flutter.

Parse Server est une plateforme backend open-source qui fournit une infrastructure prête à l’emploi pour gérer les données des applications.

Avec le SDK, vous pouvez communiquer avec l’API Parse Server depuis votre application Flutter, ce qui facilite l’exécution d’opérations CRUD (Create, Read, Update, Delete) sur les données, la gestion des sessions utilisateur et d’autres fonctionnalités côté serveur.

Pour utiliser le SDK Parse, installez-le en tant que dépendance dans le fichier pubspec.yaml de votre projet Flutter.

Spécifiez le serveur Parse :

dependencies:
	# Parse SDK
  parse_server_sdk_flutter: ^5.1.1

  flutter:
    sdk: flutter

Veillez à ce que l’indentation soit correcte. Les fichiers .yaml sont très sensibles à la casse et à l’indentation.

Exécutez la commande pour installer la dépendance spécifiée :

flutter pub get

Allez dans main.dart et importez le SDK Parse que vous avez ajouté :

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);
}

Ici, vous importez le ParseSDk dans votre fichier main.dart. Vous initialisez également Parse dans main() en appelant Parse().initialize(). Comme il s’agit d’un programme asynchrone, marquez main() avec le mot-clé async.

Les caractères de remplacement pour votre Application_Id et Client Key doivent être remplacés par les valeurs réelles. Il s’agit des informations d’identification de l’application pour communiquer avec votre backend.

Pour obtenir ces clés, naviguez vers App Settings > Security & Keys depuis votre tableau de bord Back4app. Remplacez ensuite les espaces réservés par les clés correspondantes.

Lors de l’exécution de votre application, main() est lancé, Parse sera initialisé avec votre application, et votre application Flutter sera connectée à votre backend Back4app.

Écriture dans la classe Contact et ZipCode

Vous apprendrez ici à créer et à écrire dans les classes de votre base de données à partir du côté client de votre application. Pour créer les classes Contact et Anniversaire, vous allez modifier le fichier main.dart.

Dans la méthode onPressed() du widget bouton élevé, vous utiliserez ParseObject() pour créer une nouvelle instance de la classe 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()}');
    }

Le SDK Parse Flutter utilise ParseObject() pour créer une nouvelle instance de n’importe quel nom de classe que vous passez en argument. Appeler Contact.set() avec le nom du champ de l’objet et ses valeurs écrira et mettra à jour ces champs.

Vous pouvez créer un objet ParseResponse pour contenir les résultats de l’opération d’enregistrement. ParseResponse contiendra une propriété ” success ” qui vaudra true si l’opération d’enregistrement a réussi et false si l’opération d’enregistrement a échoué.

Le code initialise ensuite une variable contactId à null. Cette variable sera utilisée pour stocker l’ID d'objet généré automatiquement pour l’objet contact sauvegardé. Le code se poursuit avec la gestion des erreurs.

Sous le code ci-dessus :

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

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

Vous créez ici l’objet ParseObject code postal. Lors de l’ajout d’un nouveau contact par le biais de la boîte de dialogue, le code créera correctement un objet ZipCode et l’associera au champ zipCode de l’objet Contact.

Il utilise l’objectId du code postal sélectionné pour établir l’association en tant que pointeur. Utilisez la méthode .save() pour enregistrer les deux objets dans le backend.

Interrogation/lecture des données de la base de données

Nous verrons ici comment envoyer une requête à la base de données à partir de votre application Flutter. Vous pouvez faire une requête pour récupérer tous les contacts ayant le même code postal. Cela serait assez complexe à réaliser dans un système de base de données non relationnel.

Si l’extraction est réussie, vous pouvez afficher une liste de tous les contacts dans votre application Flutter.

Pour obtenir une liste de contacts ayant le même code postal :

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
  }

La méthode _loadContacts construit une requête à la classe Contacts, à la recherche d’objets de contact avec le code postal spécifié.

La méthode renvoie ensuite les contacts dans une liste en les classant par nom dans l’ordre croissant sur la base du champ “nom”.

Lorsque l’application démarre(initState), la méthode _loadContacts est appelée pour récupérer les contacts correspondant au code postal sélectionné.

Conclusion

Avoir un backend contrôlé où vous pouvez structurer correctement le flux de données dans votre application est absolument nécessaire. Avec Back4app, vous pouvez construire le backend de votre application mobile à tout moment.

Vous pouvez également utiliser la plateforme Back4app pour mettre en œuvre l’authentification des utilisateurs à l’aide d’une base de données de modèles d’utilisateurs.