Comment construire un backend pour Flutter ?

introduction dans ce tutoriel, vous apprendrez comment construire un backend pour flutter en utilisant back4app, un backend open source et fiable en tant que service (baas) nous allons passer en revue l'intégration des fonctionnalités essentielles de back4app—comme la gestion de base de données, les fonctions cloud, les api restful, les api graphql et l'authentification des utilisateurs—dans votre projet flutter vous découvrirez également comment gérer les mises à jour en temps réel en utilisant les requêtes en direct en utilisant les puissants serveurs backend de back4app, vous pouvez éviter une grande partie de la configuration manuelle et vous concentrer sur la création d'une application flutter dynamique ce guide montrera aux développeurs flutter comment configurer une structure backend sécurisée, évolutive et robuste qui communique sans effort avec votre côté client nous mettrons également en avant les avantages de laisser back4app gérer les tâches lourdes—comme l'hébergement, l'authentification des utilisateurs et la logique serveur—afin que vous puissiez bénéficier de fonctionnalités telles que l'évolutivité automatique, la sécurité avancée et la maintenance simplifiée si vous avez un projet flutter et souhaitez économiser d'innombrables heures de configuration backend, c'est le bon endroit pour commencer à la fin de ce tutoriel, vous comprendrez le type de backend que vous pouvez créer avec back4app et serez prêt à étendre vos services backend pour une application prête pour la production ou à intégrer des fonctionnalités plus complexes, telles que des api externes et une authentification avancée des utilisateurs commençons! prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app et un nouveau projet back4app commencer avec back4app https //www back4app com/docs/get started/new parse app si vous n'avez pas de compte, vous pouvez en créer un gratuitement suivez le guide ci dessus pour préparer votre projet environnement de développement flutter de base assurez vous d'avoir le sdk flutter https //docs flutter dev/get started/install installé et configuré confirmez également que vous avez un ide (comme android studio ou vs code) configuré pour flutter environnement de langage de programmation dart généralement, cela est installé avec flutter assurez vous de pouvoir importer dart des packages sans erreur familiarité avec les fondamentaux de flutter documentation officielle de flutter https //docs flutter dev si vous êtes nouveau dans flutter, consultez la documentation officielle ou un tutoriel pour débutants avant de commencer assurez vous d'avoir tous ces prérequis en place avoir votre projet back4app configuré et votre environnement flutter local configuré vous aidera à suivre plus facilement étape 1 – créer un nouveau projet sur back4app et se connecter créer un nouveau projet la première étape pour construire votre backend flutter sur back4app est de créer un nouveau projet si vous n'en avez pas encore créé un, suivez ces étapes connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” dans votre tableau de bord back4app donnez un nom à votre application (par exemple, “flutter backend tutorial”) une fois le projet créé, vous le verrez listé dans votre tableau de bord back4app ce projet sera la base de toutes les configurations backend que nous allons discuter installer et initialiser le sdk parse dans votre application flutter back4app s'appuie sur la plateforme parse pour gérer vos données, les mises à jour en temps réel, l'authentification des utilisateurs, et plus encore pour connecter votre projet flutter à back4app, suivez ces étapes ajoutez le sdk flutter parse à votre application dependencies parse server sdk flutter ^4 0 0 importez le package parse dans votre main dart (ou où que vous initialisiez votre application) 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!'), ), ), ); } } dans votre tableau de bord back4app, allez dans la section sécurité et clés pour trouver votre id d'application , clé client , et url du serveur parse remplacez les espaces réservés ci dessus par vos propres identifiants avec cette initialisation, chaque demande de votre application flutter est acheminée en toute sécurité vers votre instance back4app n'oubliez pas que la clé maître ne doit jamais être utilisée du côté client de votre application flutter si vous avez besoin de la clé maître, gardez la sur le serveur ou dans un environnement sécurisé étape 2 – configuration de la base de données création d'un modèle de données une fois que votre application flutter est connectée à back4app, vous pouvez commencer à concevoir le schéma de votre base de données vous pouvez le faire manuellement depuis le tableau de bord back4app accédez à la section “base de données” dans votre tableau de bord créez une nouvelle classe (par exemple, “todo”), et ajoutez des colonnes pertinentes (par exemple, titre, estcomplété) back4app propose également un agent ia pour aider à la création automatique de schémas ouvrez l'agent ia depuis votre tableau de bord d'application ou le menu décrivez votre modèle de données en langage simple (par exemple, “créez une nouvelle application todo avec un schéma de classe complet ”) laissez l'agent ia créer le schéma pour vous cela rationalise la configuration de l'architecture des données si vous souhaitez que des champs soient créés automatiquement, vous pouvez simplement commencer à enregistrer des objets depuis votre application—parse prend en charge la création de schémas à la volée créer un modèle de données en utilisant l'agent ia si vous choisissez d'utiliser l'agent ia de back4app, il vous suffit de fournir une courte description, et il construira ou suggérera un schéma pour vous c'est un excellent moyen d'accélérer la phase initiale de modélisation des données de votre projet flutter lire et écrire des données en utilisant le sdk flutter parse voici un exemple simple démontrant comment créer et récupérer des objets en utilisant le sdk flutter parse 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; } } avec cela, vous pouvez interagir directement avec votre base de données back4app depuis votre application flutter il vous suffit d'appeler createtodoitem('feed the cat', false) ou fetchtodos() pour écrire et lire des données lecture et écriture de données en utilisant l'api rest si vous avez besoin de vous intégrer à d'autres services ou si vous préférez une approche plus traditionnelle, vous pouvez toujours utiliser l'api rest de 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 lecture et écriture de données en utilisant l'api graphql back4app propose également un point de terminaison graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } cela vous donne la flexibilité de construire l'approche qui fonctionne le mieux pour votre application flutter travailler avec des requêtes en direct back4app fournit des requêtes en direct afin que vous puissiez recevoir des mises à jour en temps réel de vos données activez les requêtes en direct dans le tableau de bord back4app (paramètres du serveur) puis utilisez le client 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'); }); } avec cet abonnement, vous pouvez écouter les changements de données au fur et à mesure qu'ils se produisent c'est fantastique pour construire des applications collaboratives où plusieurs utilisateurs voient des mises à jour de données en direct une fois le rechargement à chaud déclenché, votre abonnement restera actif à moins que l'application ne redémarre étape 3 – appliquer la sécurité avec les acl et les clp qu'est ce que les acl et les clp ? back4app utilise des acl (listes de contrôle d'accès) et des clp (permissions au niveau de la classe) pour restreindre qui peut lire ou écrire des données à la fois au niveau des objets et des classes cette couche garantit que vos données sont protégées contre tout accès non autorisé configuration des permissions au niveau de la classe dans votre tableau de bord back4app, allez à database et sélectionnez une classe (par exemple, “todo”) naviguez vers class level permissions définissez des valeurs par défaut (par exemple, seuls les utilisateurs authentifiés peuvent créer de nouveaux objets) configuration des acl dans le code vous pouvez également appliquer des acl au niveau des objets depuis le code 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}'); } } en combinant les clp et les acl, vous pouvez vous assurer que seules les bonnes personnes ou rôles peuvent accéder ou modifier des données spécifiques étape 4 – écriture des fonctions cloud code pourquoi cloud code ? le cloud code vous permet d'exécuter une logique côté serveur sans configurer manuellement de serveurs backend c'est parfait pour valider des données, s'intégrer à des services externes ou appliquer certaines règles dans votre backend en tant que service (baas) exemple de fonction voici un exemple de fonction cloud qui calcule la longueur d'un texte // 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 }; }); vous pouvez déployer ce code via le cli back4app ou dans le tableau de bord de votre application sous cloud code déploiement utilisation du cli back4app b4a configure accountkey b4a deploy utilisation du tableau de bord dans le tableau de bord de votre application, allez à cloud code > functions collez le code javascript cliquez sur déployer appeler le cloud code depuis 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}'); } } cette approche sécurisée garantit que la logique sensible reste sur le serveur, tandis que votre application flutter effectue simplement des requêtes étape 5 – configuration de l'authentification activer l'authentification des utilisateurs back4app utilise la parse user classe pour gérer l'inscription et la connexion des utilisateurs par défaut, parse s'occupe du hachage des mots de passe, des jetons de session et du stockage sécurisé 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}'); } } connexion sociale back4app prend en charge les intégrations avec google, apple, facebook, et plus encore chaque fournisseur a une approche spécifique et peut nécessiter des bibliothèques supplémentaires (par exemple, pour la connexion facebook ou google) vous pouvez ensuite appeler await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); ajustez les paramètres selon la documentation du fournisseur étape 6 – gestion du stockage de fichiers configuration du stockage de fichiers vous pouvez stocker des images, des documents ou d'autres fichiers multimédias en utilisant parsefile back4app sécurise ces fichiers et fournit une url pour les récupérer 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}'); } } considérations de sécurité vous pouvez définir qui a accès aux fichiers (public, utilisateurs authentifiés ou restreints) en combinant la sécurité au niveau des fichiers avec des acl cela garantit que vos données de fichier restent en sécurité étape 7 – vérification de l'email et réinitialisation du mot de passe pourquoi ils sont importants la vérification de l'email confirme qu'un utilisateur possède l'adresse email fournie, tandis que les flux de réinitialisation de mot de passe améliorent l'expérience utilisateur et la sécurité configuration du tableau de bord allez dans les paramètres de l'email de votre application dans le tableau de bord back4app activez la vérification par email et la réinitialisation du mot de passe configurez les modèles d'email ou votre domaine personnalisé si nécessaire ces paramètres permettent à votre application flutter de gérer automatiquement les vérifications de propriété des utilisateurs et la récupération de mot de passe mise en œuvre dans 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!'); } étape 8 – planification des tâches avec les cloud jobs cloud jobs vous voudrez peut être planifier des tâches récurrentes (comme nettoyer les anciennes données ou envoyer des emails périodiques) les cloud jobs vous permettent de faire cela // 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 `; }); déployez ce code, puis allez à paramètres de l'application > paramètres du serveur > tâches d'arrière plan dans votre tableau de bord back4app pour le programmer étape 9 – intégration des webhooks qu'est ce que les webhooks ? les webhooks permettent à votre application back4app d'envoyer des requêtes http à un service externe lorsque certains événements se produisent (comme l'enregistrement d'un nouvel objet) c'est idéal pour s'intégrer à des outils tiers allez à plus > webhooks dans votre tableau de bord back4app et ajoutez un webhook définissez votre point de terminaison et vos déclencheurs (par exemple, “nouvel enregistrement dans todo”) vous pouvez également configurer manuellement des webhooks dans le code cloud en effectuant des requêtes http dans les déclencheurs beforesave ou aftersave étape 10 – exploration du panneau d'administration back4app où le trouver l' application d'administration back4app est une interface conviviale qui permet aux membres de l'équipe non techniques de gérer les données (opérations crud, tâches de données, etc ) sans avoir besoin d'ouvrir le tableau de bord parse allez à tableau de bord de l'application > plus > application d'administration cliquez sur activer l'application d'administration vous allez créer un utilisateur administrateur, choisir un sous domaine et vous connecter avec les nouvelles informations d'identification l'application d'administration aide à des examens et modifications rapides des données conclusion dans ce tutoriel, vous avez appris comment construire un backend pour flutter en utilisant back4app et le sdk parse flutter vous avez créé des classes, stocké des données, configuré des requêtes en temps réel, appliqué la sécurité avec des acl et des clp, écrit des fonctions cloud, programmé des tâches, intégré des webhooks et exploré le panneau d'administration de back4app cette approche accélère le développement en vous permettant de vous concentrer sur le côté client de flutter plutôt que sur la configuration complexe du serveur la chaîne finale que vous avez maintenant est un backend fonctionnel et sécurisé qui tire parti des api restful, de l'authentification des utilisateurs et d'une manipulation facile des données vous pouvez intégrer des fonctionnalités plus avancées à tout moment—comme des fonctions cloud supplémentaires, des appels d'api externes ou des rôles personnalisés prochaines étapes rendre prêt pour la production implémentez un cache avancé, des analyses ou des contrôles d'accès basés sur les rôles étendre votre application intégrez des services tiers ou construisez plus de fonctions cloud pour une logique métier spécialisée consulter la documentation de back4app explorez la sécurité avancée, l'optimisation des performances, l'analyse des journaux, et plus encore en savoir plus consultez des tutoriels pour des applications de chat en direct, des services basés sur la localisation, ou des structures de données plus complexes combinez les avec votre projet flutter pour des cas d'utilisation réels en continuant à affiner cette configuration, vous transformerez votre application flutter en une solution puissante et évolutive construite sur un service backend robuste bon codage!