Saviez-vous que vous pouvez développer des add-ons et des applications pour Espace de travail Google?
Avec un peu de connaissances en codage, vous pouvez créer des outils pour vous faciliter la vie au travail. Dans cet article, nous vous expliquerons le processus de création d'un module complémentaire ou d'une application de base.
Commençons!
Étapes pour développer des modules complémentaires et des applications Google Workspace
1. Choisissez le bon outil pour le travail
La première étape consiste à décider si vous souhaitez développer un module complémentaire ou une application. La meilleure façon de déterminer celle qui fonctionnera le mieux pour vous est de réfléchir à ce que vous voulez faire, au temps dont vous disposez pour terminer le projet et au niveau de connaissances dont vous disposez en matière de codage.
Si vous débutez, utilisez l'outil Google Add-ons. Si vous avez déjà travaillé avec JavaScript, allez-y et consultez le générateur de modules complémentaires Google Apps Script.
2. Configurez votre environnement de développement
Maintenant que vous avez décidé quel outil vous souhaitez utiliser, il est temps de configurer votre environnement de développement. Cela implique l'installation du logiciel nécessaire et la configuration de certains fichiers de configuration de base. Le processus de configuration varie en fonction de l'outil que vous utilisez.
Si vous développez une application, vous aurez besoin des éléments suivants :
Éditeur de scripts d'application
Si vous développez un script pour un module complémentaire Google Apps, utilisez l'éditeur Google App Scripts ; si vous travaillez avec des applications sur G Suite, utilisez Google Sheets.
Pour accéder à l'éditeur de scripts d'application Google, créez un nouveau document dans Google Docs et ouvrez les scripts d'application à partir de l'onglet extensions. Il ressemblera à ceci:
CLI de script d'application
Les outils de développement Chrome ont inclus une interface de ligne de commande (CLI) qui vous permet de contrôler le script Google Apps directement à partir de votre ligne de commande.
Un compte Google
Vous aurez besoin d'un compte Google pour accéder à Google Apps et à tous ses services. Vous utiliserez ce compte lorsque vous installerez Google Chrome sur votre ordinateur de développement et que vous vous connecterez avec votre compte Google afin que votre ordinateur de développement soit associé à votre compte Google.
Il en va de même pour les add-ons.
3. Écrivez du code !
Il est maintenant temps de commencer à coder. Les détails dépendront de l'outil que vous utilisez, mais en général, vous devrez écrire du code HTML, CSS et JavaScript. Vous pouvez lire comment faire cela avec n'importe quel éditeur de texte ou IDE (environnement de développement intégré).
Après avoir écrit votre code, vous pouvez le tester dans le navigateur ou sur un appareil (téléphone, tablette ou ordinateur) exécutant le Play Store.
HTML
HyperText Markup Language (HMTL) est utilisé pour générer des pages Web. La page se compose d'éléments HTML et de balises. HTML est un langage de balisage qui définit l'apparence de votre page Web et le contenu qui s'affichera lorsque les internautes consulteront la page.
Vous pouvez générer un nouveau fichier HTML dans Google App Script comme ceci :
Pour créer une application efficace, vous utiliserez HTML pour définir la structure de l'application, créer des boutons et d'autres Interface utilisateur éléments et afficher les données de votre base de données.
Le code HTML de votre application doit être écrit dans une balise qui entoure tout le contenu de votre application. Pour voir comment fonctionne le code HTML d'une application, vous pouvez créer un nouveau projet en choisissant Fichier > Nouveau projet. Choisissez l'option Application Web.
CSS
Les feuilles de style en cascade sont utilisées pour appliquer un style aux éléments HTML de votre application. La meilleure façon de voir à quoi ressemble le CSS est de visiter les outils de développement dans Chrome ou Firefox. Une fois que vous avez ouvert les outils de développement, cliquez sur le bouton Basculer la barre d'outils de l'appareil ou tapez contrôle + I pour basculer entre le mode mobile et le mode bureau. Sélectionnez ensuite la vue Conception.
Les bibliothèques CSS et JavaScript peuvent être utilisées en utilisant d'autres bibliothèques, grâce à Apps Script. Une illustration de la façon de créer un lien vers la bibliothèque JQuery dans la section d'en-tête est présentée ci-dessous.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?!=content?>
...
</head>
<body>
Vous verrez le code HTML de base de votre application, ainsi que les propriétés de style qui lui sont appliquées. Au lancement de l'application, les propriétés de style prennent également effet. Cependant, si le style est appliqué au mauvais élément, le résultat peut ne pas être très bon.
JavaScript
JavaScript est un langage de programmation qui ajoute des fonctionnalités plus dynamiques à votre application. Par exemple, JavaScript vous permet d'ajouter de l'interactivité à une page Web. JavaScript est généralement inclus dans vos fichiers de projet lorsque vous créez une nouvelle application. Si vous souhaitez ajouter du JavaScript supplémentaire à votre application, vous pouvez le faire en ajoutant d'autres fichiers à votre projet.
Il s'agit de comprendre le fonctionnement de JavaScript, car il vous permet de créer un code personnalisé sophistiqué pouvant s'exécuter dans Google Docs.
Pour créer un module complémentaire, vous devez d'abord développer le JavaScript nécessaire pour créer une fonctionnalité interactive dans votre application. Vous devez également connaître plusieurs API Google importantes, telles que la bibliothèque JavaScript utilisée par Google Docs pour créer une mise en forme de texte enrichi, l'API Document List pour récupérer des listes de documents, le service Drive pour accéder aux fichiers stockés sur les serveurs de Google et le Drive service de téléchargement de fichiers.
Vous pouvez accéder à la plupart de ces API lorsque vous créez un module complémentaire pour Google Docs. Cependant, vous devrez peut-être modifier la bibliothèque JavaScript de l'application ou d'autres parties. Par exemple, la bibliothèque JavaScript n'expose pas l'API Document List, vous devez donc implémenter la logique pour interroger vous-même une liste de documents.
De plus, la bibliothèque JavaScript ne contient qu'un petit sous-ensemble de fonctions, vous devrez donc peut-être écrire vos propres fonctions pour créer des interactions plus riches.
Il est important de tester et de déboguer tout code que vous écrivez pour vous assurer qu'il fonctionnera correctement. Étant donné qu'un module complémentaire est intégré à l'application, vous pouvez utiliser les outils de débogage JavaScript normaux trouvés sur les sites Web.
4. Testez et publiez votre module complémentaire ou votre application
Une fois que vous avez écrit votre code, il est temps de le tester. Ceci est important pour vous assurer que votre module complémentaire ou votre application fonctionne comme prévu. Le test de votre module complémentaire ou de votre application garantit que le code est solide et que vous avez couvert tous les scénarios possibles.
Après tout, vous ne voulez pas passer des heures à développer quelque chose pour vous rendre compte qu'il y avait un bogue dans le code après que votre utilisateur l'ait obtenu. Une fois que vous êtes satisfait de votre travail, publiez-le sur le site Workspace Labs.
Vous pouvez soit télécharger directement le module complémentaire ou l'application publiée, soit créer un lien vers une copie sur Google Drive.
Soyez sympa! Laissez un commentaire