Quickstarters
Comment construire un backend pour Ionic ?

35min
Introduction
Dans ce tutoriel, vous apprendrez à construire un backend complet pour une application Ionic en utilisant Back4App. 
Nous aborderons la gestion de base de données, les fonctions Cloud Code, les API REST et GraphQL, l'authentification des utilisateurs, la gestion des fichiers, et plus encore. 
Notre objectif est de vous montrer comment construire un backend pour Ionic qui est sécurisé, évolutif et facile à maintenir.
Nous utiliserons l'environnement intuitif de Back4App pour simplifier la configuration côté serveur, vous évitant ainsi de configurer manuellement des serveurs ou des bases de données. 
Vous apprendrez des outils essentiels tels que la planification de tâches avec Cloud Jobs, l'application de règles de sécurité avancées, et l'intégration de webhooks avec d'autres services. 
À la fin, vous serez prêt à étendre ce backend fondamental en un système prêt pour la production pour votre application Ionic.
Conditions préalables
Un compte Back4App et un nouveau projet Back4App
Commencer avec Back4App.
Si vous n'avez pas de compte, créez-en un gratuitement et suivez le guide ci-dessus pour configurer votre projet.
Environnement de développement Ionic de base
Assurez-vous d'avoir le Ionic CLI installé et de pouvoir créer et exécuter une application Ionic.
Node.js (version 14 ou supérieure) installé
Télécharger Node.js pour gérer les dépendances et construire votre projet.
Familiarité avec JavaScript/TypeScript et les concepts Ionic
Documentation officielle d'Ionic.
Une bonne compréhension des structures, composants et hooks de cycle de vie d'Ionic sera utile.
Étape 1 – Création d'un nouveau projet sur Back4App et connexion
Connectez-vous à votre compte Back4App.
Créez une nouvelle application en utilisant le bouton “Nouvelle application” dans votre tableau de bord Back4App.
Nommez votre application (par exemple, “Ionic-Backend-Tutorial”).
﻿
Ce projet Back4App est la base de votre backend. Contrairement à l'utilisation d'un SDK Parse côté client, ce tutoriel démontrera comment effectuer des appels via REST et GraphQL depuis votre application Ionic.
Récupération de vos identifiants
Dans le tableau de bord Back4App, allez à App Settings ou Security & Keys.
Notez votre Application ID, REST API Key, et GraphQL Endpoint. Vous en aurez besoin pour envoyer des requêtes depuis votre application Ionic.
Étape 2 – Configuration de la base de données
Avoir une base de données bien structurée est la colonne vertébrale de chaque application. Le tableau de bord de Back4App facilite la conception de modèles de données et la gestion des relations.
1. Création d'un modèle de données
Allez à la section Database dans votre tableau de bord Back4App.
Créez une nouvelle classe (par exemple, “Todo”) et ajoutez des colonnes (par ex., title comme une chaîne, isCompleted comme un booléen).
Créer une nouvelle classe
﻿
2. Création d'un modèle de données en utilisant l'agent IA
Ouvrez l' Agent IA depuis votre tableau de bord Back4App.
Décrivez votre schéma souhaité, comme “Créer une classe Todo avec des champs pour le titre (String) et isCompleted (Boolean).”
L'Agent IA générera automatiquement le schéma.
﻿
3. Lecture et écriture de données en utilisant l'API REST
Depuis votre code Ionic, vous pouvez exécuter des requêtes HTTP. Par exemple, pour créer un Todo:
Bash
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
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
﻿
Pour récupérer tous les Todos:
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
Vous pouvez intégrer ces appels en utilisant fetch, Axios, ou toute bibliothèque cliente HTTP dans les fichiers de service ou de composant de votre application Ionic.
4. Lecture et écriture de données en utilisant l'API GraphQL
De même, vous pouvez envoyer des mutations et des requêtes GraphQL depuis votre application Ionic. Par exemple, pour créer un nouveau Todo :
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Exemple Les appels REST ou GraphQL peuvent être placés dans un fichier de fournisseur/service dans votre structure Ionic, puis appelés depuis vos pages.
5. Travailler avec des requêtes en direct (optionnel)
Les requêtes en direct fournissent des mises à jour en temps réel des données de votre application, bien qu'elles nécessitent le SDK Parse ou une approche d'abonnement spécialisée. Si vous avez besoin de données en temps réel, vous pouvez activer Live Queries dans les paramètres de votre serveur Back4App. Vous utiliseriez généralement une connexion WebSocket pour surveiller les changements dans vos classes. Cependant, pour les appels basés sur HTTP standard, vous pouvez interroger périodiquement les points de terminaison REST ou GraphQL.
Étape 3 – Appliquer la sécurité avec les ACL et les CLP
Aperçu rapide
Les ACL (Listes de contrôle d'accès) vous permettent de définir des autorisations de lecture/écriture sur des objets individuels. Les CLP (Permissions au niveau de la classe) vous permettent de gérer un accès plus large au niveau de la classe. Ces fonctionnalités sont cruciales pour protéger les données privées et garantir que seuls les utilisateurs autorisés peuvent modifier les informations.
Configuration des permissions au niveau de la classe
Dans votre tableau de bord Back4App, allez à Base de données > Permissions au niveau de la classe.
Configurez vos paramètres par défaut de classe (par exemple, seuls les utilisateurs authentifiés peuvent créer de nouveaux Todos).
Configuration des ACL
Lors de la création ou de la mise à jour des enregistrements, vous pouvez passer des ACL via REST :
Bash
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
﻿
Pour plus d'informations, consultez les Directives de Sécurité de l'Application.
Étape 4 – Écriture des Fonctions de Code Cloud
Pourquoi le Code Cloud
Le Code Cloud vous permet d'exécuter du JavaScript côté serveur pour des tâches telles que la validation des données, les déclencheurs ou les intégrations. Vous pouvez créer des points de terminaison personnalisés pour centraliser la logique, ce qui est particulièrement utile si vous souhaitez garder le code hors du client.
Exemple de Fonction et Déclencheurs
Dans votre main.js côté serveur (Back4App), vous pourriez écrire :
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Déployez cela via le Back4App CLI ou dans la section Code Cloud du tableau de bord.
Appeler le Code Cloud depuis Ionic
Vous pouvez envoyer une requête POST :
Bash
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
﻿
Vous recevrez une réponse JSON contenant les données retournées ou un message d'erreur.
Modules NPM
Vous pouvez installer des packages comme axios dans votre environnement Cloud Code pour intégrer des services tiers. Incluez-les dans main.js:
JS
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
﻿
Déployez et appelez-le de la même manière que vous le feriez pour toute fonction Cloud Code.
Étape 5 – Configuration de l'authentification
Activation de l'authentification des utilisateurs
L'inscription et la connexion des utilisateurs peuvent être effectuées avec des appels REST à la User classe. Par exemple, pour s'inscrire:
Bash
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 '{
    "username": "jon",
    "password": "somePassword",
    "email": "[email protected]"
  }' \
  https://parseapi.back4app.com/users
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 '{
    "username": "jon",
    "password": "somePassword",
    "email": "jon@example.com"
  }' \
  https://parseapi.back4app.com/users
﻿
Connexion
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
﻿
En cas de succès, vous recevrez un sessionToken. Conservez-le en toute sécurité et incluez-le dans les en-têtes des futures requêtes pour des opérations authentifiées.
Connexions sociales
Vous pouvez configurer des connexions sociales (comme Google ou Facebook) en configurant le flux OAuth via Back4App ou en utilisant des fournisseurs externes. Consultez les Docs de connexion sociale pour des étapes détaillées.
Étape 6 – Gestion du stockage de fichiers
Configuration du stockage de fichiers
Back4App offre un stockage de fichiers sécurisé. Vous pouvez attacher des fichiers à des objets ou les stocker indépendamment. Par exemple :
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/your/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/your/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
La réponse inclura une URL de fichier que vous pouvez stocker dans une classe :
Bash
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
﻿
Considérations de sécurité
Vous pouvez activer les règles de sécurité des fichiers dans les Paramètres du serveur de Back4App pour exiger une authentification ou limiter les téléchargements de fichiers à des rôles spécifiques.
Étape 7 – Vérification par e-mail et réinitialisation du mot de passe
Pourquoi la vérification est importante
La vérification par e-mail garantit la légitimité des e-mails des utilisateurs. La réinitialisation du mot de passe fournit un moyen sécurisé de récupérer des identifiants perdus. Cela aide à maintenir la confiance et une gestion appropriée des utilisateurs dans votre application Ionic.
Configuration du tableau de bord Back4App
Allez dans Paramètres de l'application > Paramètres de l'e-mail.
Activer la vérification par e-mail.
Personnalisez les modèles d'e-mail de vérification et de réinitialisation de mot de passe.
Étape 8 – Planification des tâches avec les Cloud Jobs
Ce que font les Cloud Jobs
Les Cloud Jobs vous permettent de planifier des tâches récurrentes comme le nettoyage des données ou l'envoi d'e-mails récapitulatifs. Vous les écrivez dans votre main.js:
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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.`;
});
﻿
Après le déploiement :
Allez à Paramètres de l'application > Paramètres du serveur > Tâches en arrière-plan.
Planifiez cleanupOldTodos pour s'exécuter quotidiennement.
Planification d'un Cloud Job
﻿
Étape 9 – Intégration des Webhooks
Les webhooks vous permettent d'envoyer des données à des services externes lorsque certains événements se produisent dans votre projet Back4App. Si votre application Ionic doit déclencher une action dans Stripe ou Slack après la création d'un nouvel enregistrement, vous pouvez utiliser des webhooks pour automatiser cela.
Allez à Plus > WebHooks dans votre tableau de bord Back4App.
Ajoutez un nouveau Webhook et définissez son point de terminaison (par exemple, https://your-service.com/webhook-endpoint).
Choisissez l' événement (par exemple, “Après Enregistrement” dans la Todo classe).
Ajout d'un Webhook
﻿
Vous pouvez également initier des requêtes sortantes à partir des déclencheurs de Cloud Code dans main.js en utilisant des bibliothèques HTTP standard.
Étape 10 – Exploration du panneau d'administration Back4App
Le Back4App Admin App est une interface plus simple pour les parties prenantes non techniques. Elle fournit un moyen facile d'effectuer des opérations CRUD sur vos classes sans entrer dans le tableau de bord principal de Parse.
Activation de l'Admin App
Dans le tableau de bord, allez à Plus > Admin App.
Cliquez sur Activer l'Admin App et créez un utilisateur administrateur.
Choisissez un sous-domaine pour accéder à votre interface d'administration.
Activer l'Admin App
﻿
﻿
Ce panneau vous aide à gérer les données sans écrire de requêtes, ce qui le rend idéal pour les clients ou les membres de l'équipe qui préfèrent une interface graphique.
Conclusion
En complétant ce guide sur comment construire un backend pour Ionic, vous avez :
Créé un backend sécurisé sur Back4App avec des modèles de données robustes et des relations.
Intégré avec des API REST et GraphQL pour lire et écrire des données depuis votre application Ionic.
Implémenté la sécurité avec des ACL et des CLP.
Déployé le Cloud Code pour une logique et des déclencheurs personnalisés.
Configuré l'authentification des utilisateurs et le stockage de fichiers.
Mis en place des Cloud Jobs pour la planification des tâches.
Exploité des webhooks pour des intégrations externes.
Exploré le panneau d'administration pour simplifier l'administration des données.
Avec cette base, votre application Ionic peut évoluer en une plateforme prête pour la production. Ajoutez plus de logique, connectez des API tierces, ou peaufinez les règles de sécurité pour correspondre à votre cas d'utilisation.
Prochaines étapes
Améliorez votre build de production en implémentant la mise en cache, l'accès basé sur les rôles, et la surveillance des performances.
Intégrez des fonctionnalités avancées telles que des requêtes en temps réel ou l'authentification multi-facteurs.
Consultez la documentation officielle de Back4App pour une exploration approfondie des analyses, des journaux, et de l'optimisation des performances.
Explorez d'autres tutoriels qui démontrent des applications de chat, des intégrations IoT, ou des fonctionnalités basées sur la localisation combinées avec les services backend robustes de Back4App.
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment construire un backend pour Symfony ?
Comment construire un backend pour Dart ?