Comment construire un backend pour NativeScript ?

introduction dans ce tutoriel, vous apprendrez comment construire un backend pour nativescript en utilisant back4app, une plateforme open source qui simplifie le développement de backend pour les applications mobiles 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 code, les points de terminaison api rest et graphql, l'authentification des utilisateurs et les requêtes en temps réel (live queries)—pour créer un backend sécurisé et évolutif pour vos applications nativescript vous découvrirez également comment back4app réduit considérablement le temps de configuration par rapport aux configurations manuelles de serveur et de base de données nous explorerons des mécanismes de sécurité avancés, la planification de tâches avec cloud jobs, et l'utilisation de webhooks pour se connecter à des services tiers à la fin de ce guide, vous disposerez d'un backend flexible qui tire parti de nativescript core, qui alimente les solutions mobiles multiplateformes de nativescript avec cette base, vous serez prêt à intégrer votre propre logique personnalisée ou des api externes selon vos besoins cela sera une étape majeure vers le développement d'applications nativescript prêtes pour la production prérequis 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 nativescript de base vous pouvez le configurer en utilisant le cli nativescript ou un autre flux de travail préféré guide de démarrage de nativescript https //docs nativescript org/environment setup node js (version 14 ou supérieure) installé vous aurez besoin de node js pour installer des paquets npm et exécuter le cli nativescript installer node js https //nodejs org/en/download/ familiarité avec javascript et nativescript core documentation officielle de nativescript https //docs nativescript org/ si vous êtes nouveau dans nativescript, consultez la documentation officielle ou un tutoriel pour débutants avant de commencer assurez vous d'avoir tous ces prérequis en place avant de commencer avoir votre projet back4app configuré et votre environnement local nativescript prêt vous aidera à suivre plus facilement étape 1 – configuration du projet back4app créer un nouveau projet la première étape pour construire votre backend nativescript sur back4app consiste à créer un nouveau projet si ce n'est pas déjà fait, 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, “nativescript backend tutorial”) après avoir créé le projet, vous le verrez listé dans votre tableau de bord back4app ce projet servira de base pour toutes les configurations backend couvertes dans ce tutoriel connecter le sdk parse back4app utilise la plateforme parse pour gérer vos données, la fonctionnalité en temps réel, l'authentification des utilisateurs, et plus encore pour connecter votre application nativescript à back4app, installez le package npm parse et initialisez le avec les identifiants que vous obtenez de votre tableau de bord back4app récupérez vos clés parse dans votre tableau de bord back4app, allez dans la section “paramètres de l'application” ou “sécurité & clés” de votre application recherchez votre id d'application , clé javascript , et url du serveur parse (au format https //parseapi back4app com ) installer le sdk parse npm install parse ensuite, initialisez parse dans un fichier de configuration ou votre fichier d'entrée principal (par exemple, app js ) par exemple, vous pourriez créer un fichier nommé parseconfig js dans un projet basé sur nativescript src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; chaque fois que vous avez besoin d'accéder à parse dans votre application nativescript, importez simplement ce fichier en complétant cette étape, vous avez établi une connexion sécurisée entre votre frontend nativescript et le backend back4app, simplifiant les opérations de données étape 2 – configuration de la base de données sauvegarde et requête de données avec votre projet back4app prêt et le sdk parse intégré, vous pouvez sauvegarder et interroger des données depuis votre application nativescript voici un exemple utilisant la classe parse object pour sauvegarder et récupérer une liste d'éléments // example create a task item import parse from ' /parseconfig'; async function createtaskitem(title, iscompleted) { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('iscompleted', iscompleted); try { const savedtask = await task save(); console log('task saved successfully ', savedtask); return savedtask; } catch (error) { console error('error saving task ', error); } } // example query all task items async function fetchtasks() { const task = parse object extend('task'); const query = new parse query(task); try { const results = await query find(); console log('fetched task items ', results); return results; } catch (error) { console error('error fetching tasks ', error); } } vous pouvez également utiliser l'api rest de back4app si vous préférez des appels http directs 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 supplies", "iscompleted" false}' \\ https //parseapi back4app com/classes/task ou utilisez graphql mutation { createtask(input { fields { title "clean the house" iscompleted false } }) { task { objectid title iscompleted } } } cette flexibilité rend pratique la construction de fonctionnalités backend pour vos applications nativescript via le sdk parse, les points de terminaison rest ou graphql conception de schéma et types de données par défaut, parse peut automatiquement créer un schéma à la volée, ou vous pouvez définir vos classes et types de données dans le tableau de bord back4app allez à la section “base de données” dans votre tableau de bord back4app créez une nouvelle classe (par exemple, “tâche”) et ajoutez des colonnes comme titre (string) et iscompleted (boolean) back4app prend en charge des types de données comme string , number , boolean , object , date , file , pointer , array , relation , geopoint , et polygon vous pouvez soit laisser parse créer ces colonnes lorsque vous enregistrez un objet pour la première fois, soit les définir pour plus de contrôle utiliser l'agent ai de back4app peut également vous aider à générer automatiquement des schémas ouvrez l'agent ai dans votre tableau de bord d'application décrivez votre modèle de données souhaité (par exemple, “veuillez créer une nouvelle classe task pour les applications mobiles avec les champs iscompleted et duedate ”) laissez l'agent créer le schéma automatiquement données relationnelles si vous voulez des données relationnelles—comme un objet catégorie qui pointe vers plusieurs éléments tâche —utilisez des pointeurs ou des relations dans parse // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const task = new parse object('task'); const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; task set('title', title); task set('category', categorypointer); try { return await task save(); } catch (err) { console error('error creating task with category relationship ', err); } } // including the pointer data in a query const query = new parse query('task'); query include('category'); const taskswithcategory = await query find(); cette approche vous aide à récupérer des données complètes pour une tâche et sa catégorie associée en une seule requête requêtes en direct pour des mises à jour en temps réel, activez les requêtes en direct dans les paramètres du serveur dans le tableau de bord de back4app les développeurs nativescript peuvent s'abonner aux changements dans une classe spécifique mettez à jour votre configuration parse pour inclure une url de serveur de requête en direct src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; et ensuite abonnez vous aux événements en temps réel import parse from ' /parseconfig'; async function subscribetotasks(callback) { const query = new parse query('task'); const subscription = await query subscribe(); subscription on('create', (newtask) => { console log('new task created ', newtask); callback('create', newtask); }); subscription on('update', (updatedtask) => { console log('task updated ', updatedtask); callback('update', updatedtask); }); subscription on('delete', (deletedtask) => { console log('task deleted ', deletedtask); callback('delete', deletedtask); }); return subscription; } cette souscription met automatiquement à jour votre interface utilisateur chaque fois qu'une tâche est ajoutée, modifiée ou supprimée—parfait pour des applications nativescript collaboratives en direct étape 3 – application de la sécurité avec les acl et les clp mécanisme de sécurité back4app back4app incorpore des listes de contrôle d'accès (acl) et des permissions au niveau de la classe (clp) pour protéger vos données ces modèles de sécurité vous permettent de contrôler l'accès en lecture/écriture à la fois au niveau de la classe et de l'objet listes de contrôle d'accès (acl) une acl définit les permissions pour chaque objet par exemple, pour donner uniquement au propriétaire un accès en lecture et en écriture async function createprivatetask(title, owneruser) { const task = parse object extend('task'); const task = new task(); task set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); task setacl(acl); try { return await task save(); } catch (err) { console error('error saving private task ', err); } } cela garantit que seul l'utilisateur spécifié peut modifier ou lire l'objet permissions au niveau de la classe (clps) les clps définissent les permissions par défaut pour toute une classe ouvrir la base de données dans back4app et sélectionner la classe pertinente accéder aux permissions au niveau de la classe onglet ajuster les permissions pour le public, les utilisateurs authentifiés ou des rôles spécifiques selon les besoins la combinaison des acl et des clps offre un modèle de sécurité solide pour les applications nativescript pour plus d'infos, voir directives de sécurité de l'application https //www back4app com/docs/security/parse security étape 4 – écriture et déploiement des fonctions cloud le code cloud vous permet d'exécuter du code javascript personnalisé côté serveur, vous n'avez donc pas besoin de maintenir l'infrastructure vous même c'est idéal pour ajouter une logique avancée ou des intégrations réservées au serveur dans votre backend nativescript comment ça fonctionne vous placez généralement votre code cloud (fonctions javascript, déclencheurs et tous les modules npm requis) dans un main js fichier ensuite, vous le déployez sur back4app, et il s'exécute dans l'environnement du serveur parse sans configuration supplémentaire du serveur exemple de structure main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('task', (request) => { const task = request object; if (!task get('title')) { throw new error('task must have a title'); } }); vous pouvez installer et utiliser des packages npm comme axios pour les requêtes http cette approche permet une large gamme d'intégrations, des passerelles de paiement aux api externes, le tout derrière la sécurité de votre application back4app cas d'utilisation typiques logique métier calculs automatiques, transformations de données ou mises à jour de statut validations de données assurez vous que les champs requis sont présents avant de sauvegarder déclencheurs exécutez du code lorsque des données sont créées, mises à jour ou supprimées intégrations connectez vous à des services externes pour les paiements, l'analyse ou la messagerie application de la sécurité validez les données entrantes ou les rôles des utilisateurs avant de continuer déployez votre fonction voici une fonction simple qui calcule la longueur du texte main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); déploiement via https //www back4app com/docs/local development/parse cli installer le cli curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash pour windows, téléchargez le b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe fichier depuis la page des versions https //github com/back4app/parse cli/releases configurez votre clé de compte b4a configure accountkey déployez votre code cloud b4a deploy déploiement via le tableau de bord allez à cloud code > functions dans votre tableau de bord collez votre code de fonction dans main js cliquez sur déployer appeler votre fonction depuis votre application nativescript en utilisant le sdk parse import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } vous pouvez également l'appeler en utilisant rest ou graphql curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength mutation { calculatetextlength(input { text "hello graphql" }) { result } } cela vous donne un moyen flexible d'intégrer la logique côté serveur dans vos applications mobiles basées sur nativescript étape 5 – configuration de l'authentification des utilisateurs authentification des utilisateurs dans back4app back4app utilise la classe parse user , pour gérer l'authentification, ce qui inclut le hachage des mots de passe, les jetons de session, et plus encore cela élimine une grande partie de la complexité associée à la gestion des comptes utilisateurs configuration de l'authentification des utilisateurs dans votre application nativescript, vous pouvez créer un nouvel utilisateur import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } un exemple rest pourrait ressembler à curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login gestion des sessions après s'être connecté, parse attribue un jeton de session à l'utilisateur pour vérifier l'utilisateur actuellement connecté const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } se déconnecter est simple await parse user logout(); intégration de la connexion sociale parse s'intègre également avec des fournisseurs oauth comme google ou facebook la configuration varie selon le fournisseur, donc consultez se connecter avec apple et d'autres https //www back4app com/docs/platform/sign in with apple pour plus de détails par exemple, avec facebook const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; vérification de l'email et réinitialisation du mot de passe activez ces fonctionnalités dans votre tableau de bord back4app accédez aux paramètres de l'email dans votre application back4app activer la vérification par email et la réinitialisation du mot de passe configurez vos modèles d'email et l'adresse « de » étape 6 – gestion du stockage de fichiers téléchargement et récupération de fichiers back4app prend en charge la gestion des fichiers via la parse file classe dans nativescript, vous pouvez télécharger des images ou des documents de manière similaire import parse from ' /parseconfig'; async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } vous pouvez récupérer l'url du fichier à partir de l'objet enregistré const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your nativescript ui components sécurité des fichiers parse server vous permet de configurer la sécurité du téléchargement de fichiers { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } cela vous permet de limiter ou d'autoriser les téléchargements de fichiers en fonction de vos préférences de sécurité étape 7 – planification des tâches avec des travaux cloud emplois cloud emplois cloud vous aident à automatiser des tâches routinières, comme la suppression d'enregistrements obsolètes ou l'envoi de notifications par exemple // main js parse cloud job('cleanupoldtasks', async (request) => { const task = parse object extend('task'); const query = new parse query(task); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtasks = await query find({ usemasterkey true }); await parse object destroyall(oldtasks, { usemasterkey true }); return `deleted ${oldtasks length} old tasks `; } catch (err) { throw new error('cleanup error ' + err message); } }); déployez ce travail via cli ou le tableau de bord dans le tableau de bord back4app > paramètres du serveur > tâches en arrière plan , planifiez le pour qu'il s'exécute quotidiennement ou à un intervalle de votre choix étape 8 – intégration des webhooks les webhooks vous permettent d'envoyer des requêtes http à des services externes lorsque certains événements se produisent dans votre application, comme de nouveaux enregistrements ou des inscriptions d'utilisateurs cela peut être utilisé pour s'intégrer à slack, des passerelles de paiement ou des plateformes d'analyse allez à la configuration des webhooks dans votre tableau de bord back4app et sélectionnez ajouter un webhook ajoutez votre point de terminaison url (par exemple, https //your service com/webhook ) configurez les déclencheurs pour des classes ou événements spécifiques vous pouvez également définir des webhooks dans le code cloud ou appeler des api externes directement dans des déclencheurs comme beforesave ou aftersave étape 9 – exploration du panneau d'administration back4app l' application d'administration back4app est une interface centrée sur le modèle, conviviale pour la gestion des données elle aide les équipes ou les utilisateurs non techniques à effectuer des opérations crud, à créer des tableaux de bord personnalisés et à gérer des tâches de niveau entreprise sans écrire de code activation de l'application d'administration dans votre tableau de bord de l'application , cliquez sur plus > application d'administration activer l'application d'administration créez un premier utilisateur administrateur (nom d'utilisateur/mot de passe) cette configuration ajoute le rôle b4aadminuser et les classes associées ( b4asetting , b4amenuitem , etc ) à votre schéma choisissez un sous domaine, puis connectez vous avec vos nouvelles informations d'identification administratives ce portail permet une manipulation rapide des données sans quitter une interface graphique—une excellente solution pour collaborer avec des membres de l'équipe qui pourraient ne pas être familiers avec le codage conclusion en suivant ce guide, vous avez appris comment construire un backend pour nativescript en utilisant back4app et créé un backend sécurisé pour vos applications nativescript configuré une base de données avec des classes, des schémas et des relations implémenté des requêtes en temps réel pour des mises à jour en direct sécurisé vos données avec des acl et des clp étendu la fonctionnalité avec cloud code mis en place l'authentification pour l'inscription des utilisateurs, la connexion et les jetons de session géré les téléchargements de fichiers et la récupération via parse file planifié des cloud jobs pour des tâches automatisées et périodiques créé des webhooks pour des intégrations tierces utilisé le panneau d'administration back4app pour une gestion des données sans code ces étapes forment une base solide pour construire des applications mobiles open source et multiplateformes avec nativescript core continuez à explorer des fonctionnalités avancées, incorporez plus de points de terminaison api ou intégrez votre propre logique personnalisée pour adapter le backend aux besoins exacts de votre application prochaines étapes évoluez vos applications nativescript en optimisant les performances, le caching et les règles de sécurité explorez la gestion avancée des utilisateurs comme les permissions basées sur les rôles consultez la documentation officielle de back4app pour des guides approfondis sur la sécurité, les journaux et les performances expérimentez avec des intégrations du monde réel telles que les paiements ou les outils d'analyse bon codage, et profitez du flux de développement simplifié que back4app fournit!