Créer une application sans code à l'aide de la base de données AppSheet native

1. Avant de commencer

La base de données AppSheet est une base de données first party native permettant d'organiser et de gérer les données qui alimentent les applications AppSheet. Son interface et ses performances améliorées offrent une meilleure expérience tant pour le créateur de l'application que pour l'utilisateur final par rapport à d'autres sources de données externes communément utilisées telles que Google Sheets, Big Query et Cloud SQL. La base de données AppSheet est l'option de données par défaut pour toutes les applications AppSheet.

Ce que vous allez apprendre

  • Comment créer une base de données AppSheet avec des exemples de données ou des données importées à partir d'une feuille de calcul Google Sheets
  • Comment personnaliser des données dans l'éditeur de base de données AppSheet
  • Comment générer une application AppSheet à partir d'une base de données AppSheet
  • Comment modifier la base de données, puis regénérer les tables dans AppSheet pour refléter les changements apportés à leur structure

Objectifs de l'atelier

Cet atelier de programmation vous explique comment générer et personnaliser une nouvelle base de données AppSheet, tout d'abord en partant de rien avec les données par défaut fournies par une base de données AppSheet, puis en utilisant les données d'une feuille de calcul Google Sheets. Vous apprendrez ensuite à générer une nouvelle application AppSheet à partir d'une base de données AppSheet. Enfin, vous découvrirez comment modifier une table de base de données dans l'éditeur de base de données, puis regénérer la table dans l'éditeur d'application AppSheet.

Ce dont vous aurez besoin

  • Un accès à l'environnement de développement AppSheet (appsheet.com)

2. Créer et personnaliser une base de données AppSheet en partant de rien

Pour commencer, vous allez créer et personnaliser une base de données AppSheet en partant de rien et en utilisant la base de données de démarrage par défaut. Cela vous permettra de faire des tests dans l'éditeur de base de données sans interrompre les étapes suivantes de l'atelier de programmation.

  1. Accédez à la page d'accueil AppSheet (appsheet.com), puis cliquez sur Create > Database > New database (Créer > Base de données > Nouvelle base de données).

Nouvelle base de données en partant de rien

  1. Une base de données type est créée et l'éditeur de base de données s'affiche.

Image d'une nouvelle base de données type dans l'éditeur de base de données AppSheet

  1. Personnalisez la base de données : changez son titre, Untitled database (Base de données sans titre), pour Tasks DB (BD Tâches). Pour modifier le titre par défaut, Untitled database (Base de données sans titre), double-cliquez dessus.
  2. Changez le nom de la table Table 1 pour Tasks (Tâches). Pour modifier le nom de l'onglet, double-cliquez dessus.
  3. Changez l'intitulé de la première colonne Title (Titre) pour Task (Tâche).
  4. Ajoutez un nouvel enregistrement en cliquant sur + en haut à gauche.

Image montrant comment ajouter un nouvel enregistrement en cliquant sur "+" en haut à gauche

  1. Double-cliquez sur la colonne Status (Statut). Vous verrez que "Enum" (Énumération) est sélectionné dans le champ "Type" et "Dropdown" (Menu déroulant) dans le champ "Item type" (Type d'élément).

Éditeur de propriétés pour la colonne "Status" (Statut). Les options utilisées sont : "Type" : "Enum" (Énumération) et "Item type" (Type d'élément) : "Dropdown" (Menu déroulant)

  1. Facultatif : Cliquez sur les boutons situés après les symboles = pour appliquer une couleur à chaque option de menu déroulant.

Application de couleurs aux options de menu déroulant à l'aide d'un sélecteur de couleur

  1. Facultatif : Testez les fonctionnalités de l'éditeur en ajoutant de nouvelles options pour l'énumération Status (Statut). Cliquez sur Add option (Ajouter une option) en y associant de nouvelles couleurs.
  2. Facultatif : Testez différents types de colonne, par exemple Color (Couleur), Progress (Progression), Yes/No (Oui/Non), et Phone (Téléphone), et observez leur fonctionnement.

Menu contextuel pour tous les types de données pris en charge dans la base de données AppSheet

N'hésitez pas à explorer et à faire d'autres tests dans l'éditeur de base de données. Vous allez créer une base de données dans les étapes suivantes.

3. Créer et personnaliser une base de données en important les données d'une feuille de calcul Google Sheets

Les étapes suivantes vous expliquent comment importer des données à partir d'une feuille de calcul Google Sheets.

Créer la base de données à partir d'une feuille de calcul Google Sheets

  1. Tout d'abord, faites une copie de cette feuille de calcul Google Sheets publique et renommez-la ASDB: IO Codelab.

Vous remarquerez qu'elle contient deux onglets : Tasks (Tâches) et Owners (Propriétaires).

  1. Accédez à nouveau à la page d'accueil AppSheet (appsheet.com), puis cliquez sur Create > Database > Import from Sheets (Créer > Base de données > Importer à partir de Sheets).

Création d'une base de données en important une feuille de calcul Google Sheets

  1. Dans le sélecteur de fichier Google Drive, sélectionnez votre copie de la feuille de calcul Google Sheets nommée ASDB: IO Codelab (ou le nom que vous lui avez donné).

Une nouvelle base de données AppSheet est générée à partir des données de la feuille de calcul.

Capture d'écran de la base de données générée à partir d'une feuille de calcul Google Sheets dans l'éditeur de base de données

Ajouter une référence dans la table "Tasks" (Tâches)

Ensuite, vous allez ajouter une référence à la table "Owners" (Propriétaires) depuis la table "Tasks" (Tâches).

  1. Dans la table "Tasks" (Tâches) de la base de données AppSheet, double-cliquez sur la colonne Owner (Propriétaire) pour en modifier les paramètres.
  2. Changez le type Text (Texte) pour References > Reference (Références > Référence).

Sélection du type "Reference" (Référence)

  1. Dans le champ Table to reference (Table de référence), choisissez Owners (Propriétaires), puis cliquez sur Save (Enregistrer).

Boîte de dialogue de définition du champ "Type" sur "Reference" (Référence) et du champ "Table to reference" (Table de référence) sur "Owners" (Propriétaires)

  1. Un avertissement concernant la modification du type de colonne s'affiche. Dans notre cas, les données de cette colonne sont compatibles avec le nouveau type de colonne. Vous pouvez donc cliquer sur Yes (Oui) pour poursuivre.

Boîte de dialogue de confirmation de la modification du type de colonne

  1. La base de données AppSheet tente ensuite d'associer les lignes correspondantes de la table "Owners" (Propriétaires) avec les noms de la table "Tasks" (Tâches). Puisque cet ensemble de données correspond, la base de données AppSheet doit insérer les bonnes références aux lignes de la table "Owners" (Propriétaires) dans la colonne "Owner" (Propriétaire).

Table "Tasks" (Tâches) dans l'éditeur de base de données AppSheet affichant les bonnes valeurs dans la colonne "Owner" (Propriétaire)

  1. Pour tester la référence, cliquez sur une cellule de la colonne "Owner" (Propriétaire) et modifiez le propriétaire en choisissant par exemple Sarah.

Sélection d'un autre propriétaire à l'aide d'un pop-up qui s'affiche pour chaque référence

Une fois le nouveau propriétaire sélectionné, la nouvelle valeur (Sarah) s'affiche dans la cellule en question de la colonne "Owner" (Propriétaire) dans la table "Tasks" (Tâches).

Après avoir sélectionné un autre propriétaire, le nom du propriétaire (Sarah) s'affiche dans la colonne "Owner" (Propriétaire) de la table "Tasks" (Tâches).

Modifier la colonne de libellé de la table de référence

Dans la base de données AppSheet, vous pouvez sélectionner une colonne de libellé pour toutes les tables. Cela vous permet de spécifier la colonne que vous souhaitez voir apparaître dans une table parente. Cela détermine également ce qui est affiché dans la table parente de l'interface d'une application AppSheet associée. Ainsi, au lieu d'afficher la colonne Name (Nom) de la table "Owners" (Propriétaires) dans la table "Tasks" (Tâches) comme c'était le cas auparavant, vous pouvez afficher la colonne Email (E-mail) de la table "Owners" (Propriétaires).

  1. Pour ce faire, changez la colonne de libellé de la table Owners (Propriétaires) pour la colonne Email (E-mail) : pointez sur la droite de l'en-tête de la colonne Email (E-mail) et cliquez sur les points de suspension verticaux.

Image montrant les points de suspension verticaux à droite de l'en-tête de la colonne

Le menu contextuel de la colonne s'affiche.

Menu contextuel de la colonne affiché avec l'option "Use column as label" (Utiliser la colonne comme libellé) sélectionnée

  1. Sélectionnez Use column as label (Utiliser la colonne comme libellé) dans le menu contextuel pour définir la colonne Email (E-mail) comme colonne de libellé.

En-tête de la colonne "Email" (E-mail) avec le repère de colonne de libellé en haut à gauche de l'en-tête

  1. Pour vérifier que la colonne "Email" (E-mail) est bien sélectionnée comme colonne de libellé servant de référence pour la table "Tasks" (Tâches), retournez sur l'onglet de la table Tasks (Tâches). Vous remarquerez que la colonne "Owner" (Propriétaire) affiche maintenant des adresses e-mail. Vous devrez peut-être actualiser le navigateur pour que la colonne soit mise à jour.

Colonne "Owner" (Propriétaire) de la table "Tasks" (Tâches) montrant les adresses e-mail après que la colonne "Email" (E-mail) de la table de référence "Owners" (Propriétaires) a été définie comme colonne de libellé

4. Générer une application AppSheet à partir d'une base de données AppSheet

Lorsque vous avez fini de personnaliser votre base de données, vous pouvez générer une application AppSheet directement à partir de cette base de données. Cela peut être utile si vous voulez qu'une interface utilisateur soit personnalisée, si vous devez ajouter des automatisations ou des filtres de sécurité, etc. Pour générer l'application, suivez les étapes ci-dessous :

  1. Cliquez sur Apps (Applications) à droite de l'éditeur de base de données AppSheet.

Capture d'écran de l'éditeur de base de données AppSheet avec le bouton "Apps" (Applications) entouré en rouge à droite

Le menu contextuel pour générer une nouvelle application s'affiche à droite.

Même capture d'écran que précédemment, mais avec la boîte de dialogue contenant le bouton "New AppSheet app" (Nouvelle application AppSheet)

  1. Cliquez sur New AppSheet app (Nouvelle application AppSheet) pour générer une nouvelle application.

Capture d'écran de l'application AppSheet générée

Une fois l'application générée, un avertissement s'affiche :

Column "Owner" in Tasks_Schema has a reference to an unknown table or slice "Owners". Open the column definition to select a source table.

Cela est dû au fait que l'application générée ne dispose que de la table "Tasks" (Tâches) et que sa colonne "Owner" (Propriétaire) fait référence à une table inconnue, la table "Owners" (Propriétaires).

Pour y remédier, ajoutez la table "Owners" (Propriétaires) à l'application AppSheet.

  1. Sur la page Data (Données) de l'éditeur AppSheet, cliquez sur +.

Page "Data" (Données) avec l'icône "+" entourée en rouge

  1. Dans le menu contextuel Add data (Ajouter des données), sélectionnez AppSheet Database (Base de données AppSheet) en tant que source de données.

Menu contextuel "Add data" (Ajouter des données)

  1. Ensuite, sélectionnez la base de données nommée ASDB: IO Codelab (ou le nom que vous lui avez donné plus tôt).

Option du menu "Select database" (Sélectionner une base de données)

  1. Dans la boîte de dialogue qui s'ouvre ensuite, cochez la case par défaut SELECT ALL (TOUT SÉLECTIONNER), puis cliquez sur Add to app (Ajouter à l'application).

Boîte de dialogue de sélection de la table "Owners" (Propriétaires) pour l'ajouter à l'application AppSheet

Lorsque la table "Owners" (Propriétaires) est ajoutée à l'application, l'erreur de référence n'apparaît plus.

Capture d'écran de l'application AppSheet sans erreur de référence

  1. Maintenant que la table AppSheet Owners (Propriétaires) est ajoutée, vous pouvez créer une nouvelle vue pour afficher ces données. Pour ce faire, cliquez sur la page Views (Vues) dans AppSheet, puis sur + à côté de PRIMARY NAVIGATION (NAVIGATION PRINCIPALE).

Page "Views" (Vues) avec l'icône "+" entourée en rouge

  1. Dans la boîte de dialogue Add a new view (Ajouter une nouvelle vue), cliquez sur Create a new view (Créer une vue).

Boîte de dialogue "Add a new View" (Ajouter une nouvelle vue)

  1. Définissez les paramètres suivants pour la nouvelle vue créée :

"View name" (Nom de la vue) : Owners (Propriétaires) ; "For this data" (Pour ces données) : Owners (Propriétaires) ; "View type" (Type de vue) : deck (présentation)

Page de paramétrage de la vue "Owners" (Propriétaires)

Félicitations, votre application est terminée !

  1. Pour tester la référence entre les vues Tasks (Tâches) et Owners (Propriétaires), cliquez sur l'une de ces vues dans l'aperçu sur mobile, puis sélectionnez un enregistrement pour voir les enregistrements liés (de référence).

Capture d'écran de l'application AppSheet avec l'aperçu sur mobile entouré en rouge à droite

Par exemple, vous pouvez cliquer sur la vue Owners (Propriétaires), puis sur un enregistrement pour en afficher le détail et voir les enregistrements de la vue Tasks (Tâches) qui y sont liés.

Image montrant la sélection d'un propriétaire et l'affichage du détail pour voir une tâche liée

5. Modifier la base de données et regénérer la table "Tasks" (Tâches)

Maintenant que vous avez créé une base de données AppSheet et que vous l'avez utilisée pour générer une nouvelle application, vous allez essayer de modifier une table dans la base de données. Vous allez changer le type de données d'une colonne et observer ce qui se passe dans l'application AppSheet associée.

  1. Dans la table Tasks (Tâches) de la base de données, changez le type de la colonne Due Date (Échéance) comme suit : Date and time > Date (Date et heure > Date).

Changement du type de la colonne "Due Date" (Échéance) de la table "Tasks" (Tâches) pour "Date" dans l'éditeur de base de données AppSheet

En retournant sur l'application AppSheet, vous remarquerez qu'elle détecte que la base de données a été mise à jour et affiche un avertissement :

App Schema for table 'Tasks' is out of sync with the schema in AppSheet database. Please regenerate the table structure

Éditeur d'AppSheet détectant une modification du schéma de la base de données et affichant un avertissement

  1. Pour regénérer la table, cliquez sur l'icône d1a956498c05d75f.png en haut à droite.
  2. Une boîte de dialogue d'avertissement s'affiche :

Boîte de dialogue d'avertissement lors de la regénération de la table

  1. Cliquez sur Regenerate (Regénérer) pour poursuivre. Cette action met à jour le type de la colonne Due Date (Échéance) dans l'application, qui est maintenant de type Date. Cela active également le sélecteur de date dans le formulaire Edit (Modifier) pour les enregistrements de la table "Tasks" (Tâches).

Formulaire de modification dans l'application AppSheet montrant le sélecteur de date

6. Félicitations

Vous avez terminé l'atelier de programmation sur la base de données AppSheet !

Complément d'informations