Maîtriser Google Apps Script : Automatisation et Interfaces Web

Qu'est-ce que Google Apps Script ?

Google Apps Script est une plateforme de script basée sur JavaScript. Elle vous permet de : Automatiser des tâches répétitives. Créer des fonctionnalités personnalisées pour Google Workspace (Docs, Sheets, Forms, Gmail, etc.). Connecter différentes applications Google entre elles. Développer des applications web simples.

C'est votre passerelle vers une efficacité accrue.

Pourquoi utiliser Google Apps Script ?

L'automatisation libère votre temps pour des tâches à plus forte valeur ajoutée. Google Apps Script offre : Accessibilité : Basé sur JavaScript, un langage largement utilisé. Intégration : Connectivité native avec l'écosystème Google. Simplicité : Pas d'installation complexe, tout est en ligne. Flexibilité : Des petites automatisations aux applications plus complexes.

Les Fondamentaux de JavaScript pour Apps Script

Apps Script s'appuie sur JavaScript. Voici quelques concepts clés à maîtriser : Variables : Pour stocker des informations (`let`, `const`). Fonctions : Blocs de code réutilisables. Objets : Collections de données. Boucles et Conditions : Pour le contrôle du flux d'exécution.

Comprendre ces bases vous permettra de créer des scripts plus sophistiqués.

Votre Premier Script : "Hello World"

Pour débuter, ouvrons Google Sheets. Allez dans "Extensions" > "Apps Script". Un éditeur s'ouvre. Tapez ce code :

function maPremiereFonction() {
  Logger.log('Bonjour le monde !');
}

Enregistrez le script, puis exécutez la fonction `maPremiereFonction` (choisissez-la dans le menu déroulant à côté de l'icône "Exécuter"). Vérifiez le résultat dans "Affichage" > "Journaux".

L'Éditeur d'Apps Script

L'éditeur est votre espace de travail. Il comprend : Le panneau des fichiers : Pour organiser vos scripts. La zone de code : Où vous écrivez vos scripts. La barre d'outils : Fonctions d'exécution, de débogage, de sauvegarde. La console : Pour afficher les journaux (`Logger.log`).

Familiarisez-vous avec cet environnement pour une utilisation fluide.

Interagir avec Google Sheets

Apps Script peut lire et écrire dans vos feuilles de calcul. Voici un exemple pour lire une valeur :

function lireValeur() {
  const feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const valeur = feuille.getRange('A1').getValue();
  Logger.log('La valeur en A1 est : ' + valeur);
}

Ce script récupère le contenu de la cellule A1 et l'affiche dans les journaux.

Automatiser des Tâches avec Apps Script

Imaginez recevoir un email avec une pièce jointe et vouloir la sauvegarder automatiquement dans Google Drive. Apps Script peut le faire. Il permet de créer des déclencheurs (triggers) qui exécutent des scripts à des moments précis ou suite à des événements (ex: ouverture d'un formulaire).

Création d'une Interface Web Simple

Apps Script peut créer des interfaces utilisateur web pour vos scripts. C'est le domaine des "Web Apps". Ces applications peuvent être appelées via une URL et permettent une interaction plus riche avec vos données ou vos processus automatisés. Nous explorerons cela en détail.

Prochaines Étapes

Dans les modules suivants, nous approfondirons : La manipulation avancée de Google Sheets. L'automatisation de Gmail et de Google Drive. La création d'interfaces utilisateur avec HTML Service. La mise en place de déclencheurs (triggers).

Votre voyage vers une meilleure maîtrise de Google Apps Script ne fait que commencer !

QUIZ DE VALIDATION

Module 2 : Manipulation des Services Google

Bienvenue dans ce module consacré à la manipulation des services Google avec Apps Script. Après avoir exploré les bases du langage, nous allons maintenant plonger dans la manière dont Apps Script peut interagir avec les outils que vous utilisez quotidiennement.

Apps Script agit comme un pont, vous permettant d'automatiser des tâches répétitives et de connecter différents services Google pour créer des solutions personnalisées. Pensez à l'efficacité accrue et aux nouvelles possibilités qui s'offrent à vous.

Accès aux Services Google

Pour manipuler les services Google, Apps Script utilise des objets prédéfinis. Ces objets sont accessibles via le namespace `GoogleAppsScript`. Par exemple, pour interagir avec Google Sheets, vous utiliserez l'objet `SpreadsheetApp`.

Chaque service majeur dispose de son propre objet représentant son API. L'Explorateur d'API Apps Script est votre meilleur allié pour découvrir et comprendre ces services.

Manipulation de Google Sheets

Google Sheets est l'un des services les plus couramment automatisés. Vous pouvez lire, écrire et modifier des données dans vos feuilles de calcul directement depuis Apps Script.

L'objet `SpreadsheetApp` vous donne accès à tous les classeurs ouverts, permet de créer de nouvelles feuilles, de sélectionner des cellules spécifiques et d'y insérer des valeurs.

function modifierCellule() {
  var feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  feuille.getRange("A1").setValue("Bonjour du Script !");
}

Manipulation de Google Docs

De manière similaire, vous pouvez automatiser la création et la modification de documents Google Docs. L'objet `DocumentApp` vous permet d'accéder au corps d'un document, d'insérer du texte, de modifier la mise en forme, etc.

C'est idéal pour générer des rapports, des lettres personnalisées ou pour remplir des modèles.

function creerDocumentSimple() {
  var doc = DocumentApp.create("Mon Nouveau Document");
  var corps = doc.getBody();
  corps.appendParagraph("Ceci est mon premier paragraphe.");
  corps.appendParagraph("Un autre paragraphe pour montrer la puissance du script.");
  Logger.log("Document créé : " + doc.getUrl());
}

Manipulation de Google Drive

Apps Script peut également interagir avec Google Drive pour gérer vos fichiers et dossiers. L'objet `DriveApp` permet de créer des dossiers, de copier, déplacer, supprimer des fichiers, et de gérer leurs permissions.

Cela ouvre la voie à des systèmes de gestion documentaire automatisés ou à des transferts de fichiers intelligents.

function creerDossier() {
  var nomDossier = "Mes Rapports Automatisés";
  var dossierParent = DriveApp.getRootFolder();
  var nouveauDossier = dossierParent.createFolder(nomDossier);
  Logger.log("Dossier créé : " + nouveauDossier.getUrl());
}

Utilisation de Google Forms

Automatisez la création de formulaires avec `FormApp` ou traitez les réponses automatiquement. Vous pouvez créer des formulaires, ajouter des questions, et même récupérer les réponses collectées.

C'est un outil puissant pour la collecte de données et les enquêtes.

function creerFormulaireSimple() {
  var form = FormApp.create("Mon Formulaire de Feedback");
  form.addTextItem()
      .setTitle("Votre nom")
      .setRequired(true);
  form.addParagraphItem()
      .setTitle("Vos commentaires");
  Logger.log("Formulaire créé : " + form.getPublishedUrl());
}

Gmail et la Communication

Apps Script peut envoyer des e-mails via l'objet `GmailApp`. Vous pouvez rédiger des messages, spécifier des destinataires, des sujets et des corps de message.

C'est parfait pour les notifications automatiques, les confirmations ou les rapports par e-mail.

function envoyerEmailSimple() {
  GmailApp.sendEmail("destinataire@example.com", "Sujet de l'email", "Contenu du message.");
  Logger.log("Email envoyé.");
}

Conclusion du Module

Vous avez maintenant découvert comment Apps Script peut se connecter et interagir avec une variété de services Google. Chaque service offre des possibilités uniques pour automatiser et optimiser vos flux de travail.

Expérimentez avec ces objets et explorez leur documentation pour repousser les limites de ce que vous pouvez accomplir.

QUIZ DE VALIDATION

Introduction à JavaScript pour Apps Script

Bienvenue dans ce module dédié aux fondamentaux de JavaScript, essentiels pour maîtriser Apps Script. JavaScript est le langage de programmation qui rend possibles les interactions dynamiques et la création d'applications personnalisées dans Google Workspace. En comprenant ses bases, vous débloquerez le plein potentiel d'Apps Script.

Préparez-vous à explorer les concepts clés qui vous permettront de construire des solutions puissantes et efficaces. Votre voyage vers l'automatisation commence ici.

Variables et Types de Données

Une variable est un conteneur nommé pour stocker des données. En JavaScript, nous utilisons principalement `let` et `const`. `let` permet de réassigner une valeur, tandis que `const` est réservée aux valeurs qui ne changeront pas.

Les types de données courants incluent :

• String : Texte (ex: "Bonjour")
• Number : Nombres entiers ou décimaux (ex: 42, 3.14)
• Boolean : Vrai ou faux (ex: `true`, `false`)
• Array : Liste ordonnée d'éléments (ex: `[1, 2, 3]`)
• Object : Collection de paires clé-valeur (ex: `{ nom: "Alice", âge: 30 }`)

let message = "Bienvenue dans le monde d'Apps Script !";
const annee = 2023;
let estActif = true;

Opérateurs

Les opérateurs permettent d'effectuer des opérations sur les variables et les valeurs.

• Arithmétiques : `+`, `-`, `*`, `/`, `%` (modulo)
• Comparaison : `==` (égal), `===` (strictement égal), `!=`, `!==`, `>`, `=`, `<=`
• Logiques : `&&` (ET), `||` (OU), `!` (NON)
• Affectation : `=`, `+=`, `-=`

let x = 10;
let y = 5;
let somme = x + y; // somme = 15
let estPlusGrand = x > y; // estPlusGrand = true
let condition = (x > 5 && y < 10); // condition = true

Structures de Contrôle : Conditions

Les conditions vous permettent d'exécuter du code uniquement si certains critères sont remplis.

• `if` : Exécute un bloc de code si la condition est vraie.
• `else if` : Exécute un bloc de code si la condition `if` est fausse, et une autre condition est vraie.
• `else` : Exécute un bloc de code si toutes les conditions précédentes sont fausses.

let score = 85;

if (score >= 90) {
  console.log("Excellent !");
} else if (score >= 70) {
  console.log("Bien joué !");
} else {
  console.log("Continuez vos efforts.");
}

Structures de Contrôle : Boucles

Les boucles permettent de répéter un bloc de code plusieurs fois.

• `for` : Idéale lorsque vous connaissez le nombre d'itérations.
• `while` : Répète tant qu'une condition est vraie.
• `forEach` : Parcourt chaque élément d'un tableau.

// Boucle for
for (let i = 0; i < 5; i++) {
  console.log("Itération numéro : " + i);
}

// Boucle while
let compteur = 0;
while (compteur < 3) {
  console.log("Compteur : " + compteur);
  compteur++;
}

// Boucle forEach
const fruits = ["Pomme", "Banane", "Orange"];
fruits.forEach(function(fruit) {
  console.log("J'aime la " + fruit);
});

Fonctions

Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles vous aident à organiser votre code et à éviter les répétitions.

• Elles peuvent prendre des paramètres (entrées).
• Elles peuvent retourner une valeur (sortie).

// Déclaration d'une fonction
function saluer(nom) {
  return "Bonjour, " + nom + " !";
}

// Appel de la fonction
let messageSalutation = saluer("Utilisateur");
console.log(messageSalutation); // Affiche "Bonjour, Utilisateur !"

Objets et Tableaux en Détail

Les objets et tableaux sont fondamentaux pour structurer vos données en Apps Script.

let utilisateur = {
  prenom: "Léa",
  nom: "Dubois",
  age: 28,
  estEtudiant: false
};
console.log(utilisateur.prenom); // Affiche "Léa"

let notes = [18, 15, 19, 12];
console.log(notes[0]); // Affiche 18 (premier élément)
console.log(notes.length); // Affiche 4 (nombre d'éléments)

Méthodes de Tableaux Courantes

Les tableaux disposent de nombreuses méthodes intégrées pour manipuler leurs données facilement.

• `push()` : Ajoute un élément à la fin.
• `pop()` : Retire le dernier élément.
• `shift()` : Retire le premier élément.
• `unshift()` : Ajoute un élément au début.
• `slice()` : Crée une copie d'une partie du tableau.
• `splice()` : Modifie le tableau en ajoutant/supprimant des éléments.
• `map()` : Crée un nouveau tableau en appliquant une fonction à chaque élément.

let nombres = [1, 2, 3];
nombres.push(4); // nombres est maintenant [1, 2, 3, 4]
let doubleNombres = nombres.map(function(n) { return n * 2; }); // [2, 4, 6, 8]

Méthodes d'Objets Courantes

Les objets ont aussi des méthodes utiles pour accéder à leurs propriétés.

• `Object.keys(objet)` : Retourne un tableau des clés de l'objet.
• `Object.values(objet)` : Retourne un tableau des valeurs de l'objet.
• `Object.entries(objet)` : Retourne un tableau de paires `[clé, valeur]`.

let configuration = {
  theme: "sombre",
  langue: "fr",
  notifications: true
};

console.log(Object.keys(configuration)); // ["theme", "langue", "notifications"]
console.log(Object.values(configuration)); // ["sombre", "fr", true]

Introduction aux Objets Spécifiques d'Apps Script

Apps Script expose des objets intégrés pour interagir avec les services Google (Sheets, Docs, Gmail, etc.). Par exemple, `SpreadsheetApp` pour interagir avec Google Sheets.

Comprendre la structure des objets JavaScript est la clé pour utiliser ces services. Ces objets ont des propriétés et des méthodes que vous appellerez pour effectuer des actions.

// Exemple: Obtenir le classeur actif en Google Sheets
let classeurActif = SpreadsheetApp.getActiveSpreadsheet();
let nomClasseur = classeurActif.getName();
console.log("Classeur actif : " + nomClasseur);

QUIZ DE VALIDATION

Module 4 : Fonctions avancées et gestion d'erreurs

Bienvenue dans ce module dédié aux fonctions avancées et à la gestion des erreurs en Apps Script. Après avoir maîtrisé les bases, il est temps d'explorer des techniques pour rendre vos scripts plus robustes, efficaces et faciles à maintenir.

Ce module vous guidera à travers la structuration de votre code, l'optimisation des performances et la mise en place de mécanismes de gestion des erreurs. Préparez-vous à élever votre maîtrise de l'Apps Script à un niveau supérieur.

Fonctions Avancées : La Puissance de la Modularité

Une fonction bien conçue est réutilisable et améliore la lisibilité de votre code. Nous allons explorer comment organiser vos scripts en fonctions modulaires.

Objectifs : Comprendre l'importance des fonctions. Définir et appeler des fonctions personnalisées. Utiliser des paramètres pour la flexibilité. Retourner des valeurs pour l'exploitation des résultats.

Paramètres et Valeurs de Retour

Les paramètres permettent à vos fonctions d'accepter des données externes, tandis que les valeurs de retour leur permettent de communiquer des résultats à d'autres parties de votre script.

function saluerUtilisateur(nom) {
  Logger.log("Bonjour, " + nom + " !");
}

function calculerSomme(nombre1, nombre2) {
  let resultat = nombre1 + nombre2;
  return resultat; // Retourne la valeur calculée
}

// Appel des fonctions
saluerUtilisateur("Alice");
let maSomme = calculerSomme(5, 10);
Logger.log("La somme est : " + maSomme);

Portée des Variables (Scope)

Comprendre la portée des variables est crucial pour éviter les conflits et assurer que vos données sont accessibles là où elles sont nécessaires.

Variables locales : Déclarées à l'intérieur d'une fonction, elles n'existent que pendant l'exécution de celle-ci. Variables globales : Déclarées en dehors de toute fonction, elles sont accessibles partout dans le script. À utiliser avec parcimonie.

let variableGlobale = "Je suis visible partout";

function maFonction() {
  let variableLocale = "Je ne suis visible qu'ici";
  Logger.log(variableGlobale); // Accès à la variable globale
  Logger.log(variableLocale);
}

maFonction();
// Logger.log(variableLocale); // Ceci générerait une erreur

Gestion des Erreurs : La Clé de la Robustesse

Les erreurs sont inévitables. Savoir comment les anticiper, les détecter et y réagir est fondamental pour créer des scripts fiables.

Concepts clés : Erreurs courantes : Incompatibilité de types, accès à des données inexistantes, permissions insuffisantes. L'importance de `try...catch` : Un bloc de code pour intercepter et gérer les erreurs.

Le Bloc `try...catch`

Le bloc `try...catch` permet de "capturer" les erreurs qui surviennent lors de l'exécution du code dans le bloc `try`.

try {
  // Code potentiellement sujet à une erreur
  let resultat = 10 / 0; // Division par zéro
  Logger.log("Ce message ne sera pas affiché.");
} catch (erreur) {
  // Code exécuté si une erreur survient dans le bloc try
  Logger.log("Une erreur s'est produite : " + erreur.message);
} finally {
  // Code exécuté quoi qu'il arrive (avec ou sans erreur)
  Logger.log("Bloc finally exécuté.");
}

Le Bloc `finally`

Le bloc `finally` est optionnel et s'exécute toujours après les blocs `try` et `catch`, qu'une erreur se soit produite ou non. Il est utile pour le nettoyage, comme la fermeture de fichiers ou la libération de ressources.

try {
  // Opération avec un fichier
  Logger.log("Tentative d'ouverture du fichier...");
} catch (e) {
  Logger.log("Erreur lors de l'ouverture du fichier : " + e);
} finally {
  Logger.log("Opération de fermeture des ressources effectuée.");
}

Techniques de Debugging Avancé

Pour diagnostiquer et résoudre les problèmes, utilisez les outils à votre disposition.

`Logger.log()` : Indispensable pour tracer l'exécution et examiner les valeurs des variables. Débogueur Apps Script : Permet de mettre des points d'arrêt et d'inspecter l'état de votre script étape par étape.

• Messages d'erreur clairs : Dans vos blocs `catch`, fournissez des messages d'erreur informatifs.

Optimisation des Performances

Des scripts performants sont essentiels, surtout lorsqu'ils traitent de grandes quantités de données.

Éviter les opérations répétitives : Ne refaites pas le même calcul ou la même requête plusieurs fois si vous pouvez le faire une seule fois. Utiliser des méthodes efficaces : Privilégiez les méthodes intégrées pour la manipulation de tableaux et d'objets.

• Limiter les appels aux services externes : Les interactions avec les services Google (Sheets, Docs, etc.) peuvent être coûteuses en temps.

Gestion des Erreurs Spécifiques

Dans certains cas, vous voudrez gérer des erreurs plus précisément.

`throw` : Permet de déclencher manuellement une erreur pour que celle-ci soit capturée par un bloc `catch`. Tester les conditions : Utilisez des `if` pour vérifier les conditions avant d'exécuter des opérations potentiellement risquées.

function verifierAge(age) {
  if (age < 0) {
    throw new Error("L'âge ne peut pas être négatif.");
  }
  Logger.log("Âge valide : " + age);
}

try {
  verifierAge(-5);
} catch (e) {
  Logger.log("Erreur de validation : " + e.message);
}

Bonnes Pratiques pour des Scripts Robustes

Commentez votre code : Expliquez les parties complexes. Nommez vos fonctions et variables de manière descriptive. Validez les entrées utilisateur ou les données lues. Utilisez des fonctions pour découper des tâches complexes.

• Testez votre code dans différentes conditions.

QUIZ DE VALIDATION

Module 5 : Introduction aux Interfaces Utilisateur (UI)

Bienvenue dans ce module dédié à la création d'interfaces utilisateur (UI) interactives avec App Script. Après avoir exploré les bases du langage, nous allons maintenant donner vie à vos applications grâce à des interfaces visuelles attrayantes et fonctionnelles. Préparez-vous à transformer vos scripts en expériences utilisateurs fluides et intuitives.

Pourquoi une Interface Utilisateur ?

Une interface utilisateur, ou UI, est la passerelle entre vous et votre code. Elle permet à quiconque d'interagir avec votre application sans avoir à comprendre le langage sous-jacent. Une bonne UI améliore l'expérience utilisateur, rend l'application plus accessible et augmente son adoption. App Script offre des outils puissants pour construire ces interfaces directement dans votre environnement Google.

App Script & HTML : La Fondation

App Script s'intègre nativement avec HTML, CSS et JavaScript. Cela signifie que vous pouvez utiliser vos compétences existantes en développement web pour créer des interfaces riches. Nous allons utiliser ces technologies pour construire l'apparence et le comportement de nos applications. La puissance réside dans la combinaison de la logique App Script et de la présentation web.

Les Bases : Serveur vs Client

Dans App Script, il y a une distinction fondamentale entre le code qui s'exécute sur le serveur (App Script) et le code qui s'exécute dans le navigateur de l'utilisateur (HTML, CSS, JavaScript). App Script agit comme le moteur, exécutant les tâches, récupérant les données. L'interface HTML/CSS/JS est la vitrine, présentant les informations et capturant les interactions de l'utilisateur.

Créer votre Première Page HTML

Pour générer une page HTML, vous utilisez la méthode `HtmlService.createHtmlOutputFromFile()`. Cette méthode prend en argument le nom de votre fichier HTML. Vous pouvez ensuite afficher cette page en utilisant `SpreadsheetApp.getUi().showSidebar()` ou `showModalDialog()`, par exemple. Votre fichier HTML sera stocké dans votre projet App Script.

function showMyPage() {
  var html = HtmlService.createHtmlOutputFromFile('MyPage');
  SpreadsheetApp.getUi().showSidebar(html);
}

Structure d'un Fichier HTML

Un fichier HTML typique pour App Script inclut une structure de base avec ``, ``, `` (pour les métadonnées et les liens CSS/JS) et `` (pour le contenu visible). Vous pouvez y intégrer du JavaScript côté client pour dynamiser votre interface.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Mon Interface</title>
  </head>
  <body>
    <h1>Bienvenue !</h1>
    <p>Ceci est votre première page.</p>
  </body>
</html>

Interaction : App Script et Client-Side JavaScript

L'interaction entre votre code App Script (serveur) et votre JavaScript côté client est cruciale. Vous pouvez appeler des fonctions App Script depuis votre JavaScript en utilisant `google.script.run`. Inversement, App Script peut injecter des données dans votre HTML ou exécuter du JavaScript côté client.

function onButtonClick() {
  google.script.run.withSuccessHandler(updateLabel).getServerData();
}

function updateLabel(data) {
  document.getElementById('message').innerText = data;
}

Aller plus loin : CSS pour le Style

Le CSS (Cascading Style Sheets) est utilisé pour styliser votre interface. Vous pouvez l'inclure directement dans une balise `` dans votre fichier HTML ou lier un fichier CSS externe. Un bon design améliore considérablement l'ergonomie et l'attrait de votre application. Pensez à la palette de couleurs, la typographie et la mise en page pour une expérience cohérente.

<head>
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      background-color: #FFFFFF;
      color: #5A208A;
    }
    h1 {
      color: #F4B73B;
    }
  </style>
</head>

Les Docks : Sidebar et Dialogues

App Script propose deux principales façons d'afficher vos interfaces : Sidebar : Une barre latérale qui apparaît sur le côté de l'application (feuille de calcul, document, etc.). Idéal pour les contrôles récurrents. Dialogues : Des fenêtres modales qui interrompent l'interaction principale. Utiles pour des actions ponctuelles ou des confirmations.

Module 5 : Récapitulatif et Préparation

Nous avons posé les bases pour la création d'interfaces utilisateur avec App Script. Vous savez maintenant comment générer du HTML, interagir entre le serveur et le client, et utiliser le CSS pour le style. Les prochaines étapes exploreront des widgets plus avancés et des modèles de conception pour des applications professionnelles.

QUIZ DE VALIDATION

Module 6 : Création d'Interfaces Web avec HTML Service

Bienvenue dans ce module dédié à l'enrichissement de vos scripts Google avec des interfaces utilisateur dynamiques. Jusqu'à présent, nous avons exploré les bases d'App Script pour automatiser des tâches. Désormais, nous allons apprendre à interagir directement avec les utilisateurs grâce à HTML Service, permettant de créer des tableaux de bord, des formulaires personnalisés et bien plus encore au sein de l'écosystème Google.

Introduction à HTML Service

HTML Service est l'outil d'App Script qui vous permet de générer des pages web dynamiques. Il fonctionne en utilisant des templates HTML, CSS et JavaScript standards, que vous pouvez ensuite intégrer dans vos applications Google (Sheets, Docs, Forms, etc.) sous forme de boîtes de dialogue, de panneaux latéraux ou de pages entières. C'est la passerelle vers une expérience utilisateur plus riche et interactive pour vos automatisations.

Principes Fondamentaux

HTML Service permet à vos scripts de produire du contenu HTML. Ce contenu est rendu dans un environnement sécurisé (sandbox) pour protéger les données de l'utilisateur et l'application hôte. Vous pouvez ainsi créer des interfaces qui ressemblent à de véritables sites web, mais qui sont directement connectées à la logique de votre script.

Créer votre Premier Template HTML

Pour commencer, créez un nouveau fichier `.html` dans votre projet App Script. C'est ici que vous écrirez votre code HTML. Par exemple, un simple "Bonjour, monde !" :

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Bonjour, monde !</h1>
  </body>
</html>

Lier le Script au Template

Dans votre fichier `.gs` (votre script principal), vous utiliserez `HtmlService.createHtmlOutputFromFile('NomDuFichierHtml')` pour charger votre template. Ensuite, vous pourrez l'afficher via une fonction qui sera appelée depuis votre application Google.

function afficherBonjour() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('BonjourPage'); // Assurez-vous que le nom correspond à votre fichier .html
  SpreadsheetApp.getUi().showSidebar(htmlOutput); // Ou .showModalDialog()
}

Utilisation de Templates DoM (Server-Side)

HTML Service offre une puissance supplémentaire avec les templates DoM (Document Object Model). Ils vous permettent d'injecter des données depuis votre script directement dans le HTML avant qu'il ne soit rendu. Utilisez la syntaxe `` pour afficher des variables et `` pour exécuter du code côté serveur.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Salut, <?= nomUtilisateur ?> !</h1>
    <? if (messageAdmin) { ?>
      <p><?= messageAdmin ?></p>
    <? } ?>
  </body>
</html>

Injecter des Données Dynamiques

Voici comment passer des données de votre script vers le template DoM :

function afficherDonneesUtilisateur() {
  var template = HtmlService.createTemplateFromFile('DonneesUtilisateur');
  template.nomUtilisateur = Session.getActiveUser().getEmail();
  template.messageAdmin = "Bienvenue sur votre espace personnalisé.";
  
  var htmlOutput = template.evaluate();
  htmlOutput.setTitle('Tableau de Bord');
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

Exécuter du Code JavaScript Côté Client

Vous pouvez également inclure du code JavaScript dans votre fichier HTML pour rendre l'interface interactive côté client. Ces scripts s'exécuteront dans le navigateur de l'utilisateur.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function saluer() {
        alert('Bonjour depuis le client !');
      }
    </script>
  </head>
  <body>
    <h1>Interaction Client</h1>
    <button onclick="saluer()">Cliquez ici</button>
  </body>
</html>

Communication entre Client et Serveur

Le mécanisme `google.script.run` est essentiel pour permettre à votre JavaScript côté client d'appeler des fonctions de votre script App Script côté serveur (et vice-versa). Cela ouvre la voie à des applications web complexes.

// Côté client (dans votre HTML)
function sauvegarderDonnees() {
  var nouvelleValeur = document.getElementById('inputValeur').value;
  google.script.run.avecSucces(callbackSucces).sauvegarderValeurServeur(nouvelleValeur);
}

function callbackSucces(resultat) {
  alert('Données sauvegardées : ' + resultat);
}

// Côté serveur (dans votre .gs)
function sauvegarderValeurServeur(valeur) {
  // Logique pour sauvegarder la valeur
  return "Succès : " + valeur;
}

Sécurité et Best Practices

Sandbox : HTML Service utilise des environnements sandbox pour la sécurité. Comprenez leurs limitations. Validation des entrées : Validez toujours les données provenant du client avant de les traiter côté serveur. Obfuscation : Pour des éléments sensibles, considérez des techniques d'obfuscation de code côté client. Performance : Optimisez vos templates HTML et votre JavaScript pour une meilleure expérience utilisateur.

Cas d'Usage Avancés

Avec HTML Service, vous pouvez créer : Des interfaces personnalisées pour des formulaires avancés. Des tableaux de bord interactifs pour visualiser des données. Des outils d'administration pour vos feuilles de calcul. Des applications pour automatiser des flux de travail complexes.

QUIZ DE VALIDATION

Module 7 : Conception et Développement d'une Application Web Simple

Bienvenue dans ce module dédié à la création de votre première application web avec Google Apps Script. Après avoir exploré les bases du langage et ses interactions avec Google Workspace, nous allons maintenant passer à l'étape concrète : transformer vos scripts en interfaces web interactives et conviviales. Préparez-vous à donner vie à vos idées !

Comprendre le Web et Apps Script

Une application web repose sur deux concepts principaux : le client (votre navigateur) et le serveur (où votre code s'exécute). Google Apps Script agit comme un serveur qui génère le contenu HTML envoyé au client. Nous allons utiliser les fonctions de `HtmlService` pour créer ces pages web dynamiques. Cela permet de présenter des données, de recueillir des informations et d'automatiser des tâches de manière visuelle.

Introduction à HtmlService

`HtmlService` est la bibliothèque essentielle pour générer des interfaces utilisateur web dans Google Apps Script. Elle vous permet d'écrire du code HTML, CSS et JavaScript directement dans votre projet Apps Script. Vous pouvez ainsi créer des formulaires, des tableaux de bord personnalisés et des outils interactifs qui s'exécutent dans un navigateur web.

Créer une Page HTML Simple

Pour commencer, nous allons créer un fichier HTML simple. Dans votre projet Apps Script, allez dans "Fichier" > "Nouveau" > "Fichier HTML". Nommez ce fichier, par exemple, `Index.html`. Vous pouvez y écrire du code HTML basique pour tester son affichage. Ensuite, créez une fonction dans votre script `.gs` pour servir cette page.

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

Afficher le Contenu HTML

La fonction `doGet()` est automatiquement appelée lorsqu'une URL de déploiement web est accédée. `HtmlService.createTemplateFromFile('Index')` charge votre fichier HTML. `.evaluate()` le rend exécutable, et le retourne comme réponse HTTP. Ouvrez votre projet Apps Script, déployez-le en tant qu'application web (paramètres de déploiement), puis accédez à l'URL générée pour voir votre page.

Intégrer des Données Dynamiques avec `HtmlTemplate`

Les modèles HTML (`.html` files) dans Apps Script sont plus que du simple HTML. Ils supportent des "directives" spéciales qui permettent d'intégrer du code JavaScript côté serveur. Par exemple, vous pouvez afficher des données provenant de Google Sheets. Cela rend vos applications web dynamiques et réactives.

Utiliser les Directives de Modèle

Les directives sont des balises spéciales comme `` ou ``. `` exécute du code JavaScript sans afficher de sortie. `` exécute du code JavaScript et affiche le résultat dans le HTML. Utilisez-les pour boucler sur des données, afficher des variables, ou exécuter des fonctions serveur.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Bienvenue !</h1>
    <p>Voici une liste d'éléments :</p>
    <ul>
      <? var items = ["Pomme", "Banane", "Orange"]; ?>
      <? for (var i = 0; i < items.length; i++) { ?>
        <li><?= items[i] ?></li>
      <? } ?>
    </ul>
  </body>
</html>

Communication Client-Serveur

Pour des interactions plus avancées, vous avez besoin de faire communiquer votre page HTML (client) avec votre script Apps Script (serveur). `google.script.run` est la méthode clé. Elle permet d'appeler des fonctions Apps Script depuis le JavaScript côté client et de recevoir les résultats.

// Dans votre fichier .gs
function getGreeting() {
  return "Bonjour du serveur !";
}

// Dans votre fichier .html (dans une balise <script>)
function loadGreeting() {
  google.script.run.withSuccessHandler(displayGreeting).getGreeting();
}

function displayGreeting(greeting) {
  document.getElementById('greetingMessage').innerText = greeting;
}

// Appel initial
loadGreeting();

Envoyer des Données du Client au Serveur

Vous pouvez également envoyer des données du client vers le serveur. La méthode `google.script.run` prend des arguments que votre fonction serveur peut utiliser.

// Dans votre fichier .html (dans une balise <script>)
function sendDataToServer() {
  var userInput = document.getElementById('myInput').value;
  google.script.run.withSuccessHandler(handleServerResponse).processUserInput(userInput);
}

// Dans votre fichier .gs
function processUserInput(data) {
  Logger.log("Données reçues du client : " + data);
  return "Traitement terminé pour : " + data;
}

Améliorer l'Interface avec CSS et JavaScript

Pour rendre votre application web plus attrayante et fonctionnelle, vous pouvez intégrer CSS pour le style et JavaScript pour les interactions côté client. Vous pouvez inclure du CSS et du JavaScript directement dans votre fichier HTML, ou les lier à partir de fichiers externes (bien que pour des applications simples, l'intégration directe soit plus aisée).

Déploiement en tant qu'Application Web

Une fois votre application web prête, vous devez la déployer. Dans l'éditeur Apps Script, allez dans "Déploiement" > "Nouveau déploiement". Choisissez le type "Application web". Configurez qui peut accéder à l'application (vous, toute personne avec un compte Google, ou publiquement). Copiez l'URL de l'application web pour la partager ou l'utiliser.

Considérations de Sécurité

Lorsque vous partagez votre application web, pensez à la sécurité. Évitez de manipuler des données sensibles sans une authentification appropriée. Les appels `google.script.run` sont limités aux fonctions explicitement disponibles. Soyez prudent avec les données envoyées par les utilisateurs et celles affichées.

Optimisation pour une Meilleure Expérience

Pour une expérience utilisateur optimale, assurez-vous que votre application web est responsive (s'adapte aux différentes tailles d'écran). Testez-la sur différents navigateurs. Optimisez le temps de chargement en minimisant la quantité de données transmises et en chargeant les scripts de manière asynchrone si nécessaire.

Exercice Pratique : Créer un Formulaire Simple

Créez un formulaire HTML qui permet à l'utilisateur de saisir son nom. Utilisez `google.script.run` pour envoyer ce nom à une fonction Apps Script qui le logguera. Affichez ensuite un message de confirmation généré par le serveur.

Récapitulatif du Module

Vous avez appris à : Utiliser `HtmlService` pour créer des pages web. Intégrer des données dynamiques avec les modèles HTML. Implémenter la communication client-serveur avec `google.script.run`. Déployer votre application web.

Ces compétences sont fondamentales pour construire des outils puissants et personnalisés basés sur Google Apps Script.

QUIZ DE VALIDATION

Module 8 : Déploiement et Partage

Félicitations pour votre parcours à travers les fondamentaux d'App Script ! Ce module, "Déploiement et Partage", est la touche finale qui vous permettra de rendre vos créations accessibles et utiles à d'autres. Nous allons découvrir comment partager vos scripts et vos applications web générées, assurant ainsi leur diffusion et leur impact.

Partage de Scripts App Script

Une fois votre script prêt, le partage est la clé pour le rendre opérationnel pour d'autres utilisateurs. App Script offre plusieurs niveaux de contrôle sur qui peut accéder à votre code et à ses fonctionnalités. Le partage peut s'effectuer au niveau du projet, en définissant les permissions des collaborateurs.

Options de Partage

Vous pouvez définir votre projet comme privé (accessible uniquement à vous), partager avec des utilisateurs spécifiques (par leur adresse email Google), ou le rendre accessible à des personnes possédant le lien. Il est également possible de le partager avec l'ensemble de votre organisation Google Workspace, si applicable.

Permissions de Partage

Lors du partage, vous pouvez octroyer différents niveaux de permissions : "Peut afficher" (lecture seule), "Peut modifier" (édition du code), et "Peut exécuter" (utilisation du script sans voir ni modifier le code). Le choix dépend de votre objectif : collaboration, mise à disposition d'une fonctionnalité, ou audit.

Création d'une Web App

Lorsque vous avez développé une interface utilisateur interactive avec App Script, vous pouvez la transformer en Web App. Cela permet de déployer votre application via une URL unique, la rendant accessible depuis n'importe quel navigateur web, sans nécessiter l'installation d'un logiciel ou l'accès à Google Workspace.

Déploiement en tant que Web App

Pour déployer votre projet en tant que Web App, vous devez utiliser la fonction `doGet()` ou `doPost()`. Ces fonctions gèrent les requêtes HTTP entrantes. Le déploiement se fait ensuite depuis l'éditeur App Script, en sélectionnant "Déployer" puis "Nouvelle version".

Configuration du Déploiement

Lors du déploiement, vous devrez spécifier les "Paramètres d'exécution" : qui peut exécuter l'application (vous seul, utilisateurs de votre domaine, tout le monde) et qui peut y accéder (vous seul, utilisateurs de votre domaine, tout le monde). Ces paramètres sont cruciaux pour la sécurité et l'accessibilité.

Partage de Web Apps

Une fois déployée, votre Web App dispose d'une URL unique. Cette URL peut être partagée librement selon les autorisations que vous avez définies. Elle est le pont entre votre code App Script et le monde extérieur, permettant à votre application de fonctionner de manière autonome.

Cas d'Usage : Formulaires et Interfaces

Les Web Apps déployées sont idéales pour créer des formulaires de saisie personnalisés, des tableaux de bord interactifs, des outils de gestion de données simples, ou même des prototypes d'applications web, le tout hébergé et exécuté par App Script.

Bonnes Pratiques de Partage

Soyez toujours attentif aux permissions que vous accordez. Revoyez régulièrement qui a accès à vos scripts et Web Apps. Pour les données sensibles, assurez-vous que les autorisations d'exécution sont restrictives et que votre code gère correctement la confidentialité.

QUIZ DE VALIDATION