WEB APP

Définition

• Qu'est ce qu'une page Web ?

Est ce que vous savez vraiment comment fonctionne une page Web ?

Et bien tout d'abord ce qu'il se cache derrière, c'est du code !

L'outil qui est chargé de transformer ce code en formulaires, boutons textes et images est votre navigateur Web

Votre navigateur va alors lire du code et le transformer en objets sur votre écran. Le code est un regroupement de trois langages qui sont utilisés pour créer des pages web :

• Le premier est un langage de balisage nommé HTML. C'est avec lui que l'on va expliquer au navigateur quels sont les éléments, leur contenus et leur place dans notre page web. On peut imaginer la structure du code HTML comme un arbre avec des blocs qui s’imbriquent les uns dans les autres.

Si l'on avait que le langage HTML nos pages web ressembleraient à ça :

• Le deuxième langage CSS sera alors le maquillage de notre page web en définissant le style de nos éléments : les titres en bleu, les images alignées à droite, les boutons avec une police d’écriture en gras,...

• Le dernier langage Javascript est différent des deux autres puisque c'est un langage de programmation. Il nous permettra de modifier des éléments de notre page, envoyer de requêtes à des serveurs ou encore de créer des applications comme les Web App de GAS

Voilà donc ce qu'est une page Web.

• La Web App : une page Web particulière

Un Web App est donc tout simplement un page Web qui comprend un fichier HTML , un fichier CSS et un fichier Javascript. La particularité d'une Web App est qu'elle va être créée depuis la plateforme GAS qui stockera vos fichiers et accédera à vos données depuis un Google Sheets par exemple.

Le développement d'un Web App proposé par Google intervient lorsque les outils de Google Workspace ne conviennent pas à vos besoins graphique et opérationnels. Par exemple : un formulaire de temps passé par tâches Google Tasks sera plus simplement géré et mieux présenté dans une Web App qu'avec un simple Google Forms.

C'est là que se retrouve l'utilité de cet outil. La Web App est donc une page Web ou application Web utilisant comme base la plateforme Google Apps Script et les applications de Google Workspace.

REMARQUE : la Web App est un outil plus libre et donc moins facile à gérer. Il faut donc l'utiliser avec parcimonie et penser à la gestion du flux sur cette Web App ainsi que la quantité des données gérées. Avant de vous lancer dans une Web App, vous pouvez consulter les offres d'AppSheet, l'outil de no-code de Google Workspace

Prérequis

Pour créer une WebApp, il est nécessaire :

• De créer un script standalone

• De créer une fonction doGet(e) dans ce script et que cette fonction renvoie un objet de classe HTMLOutput

Classes GAS

La fonction doGet(e) de notre script doit donc nous renvoyer un objet de type HTMLOutput.

Un page Web étant accessible depuis une URL, votre Web App le sera également. Lorsque vous renseignerez l’URL à votre navigateur, ce dernier récupérera l'objet de classe HTMLOutput représentant la page Web avec l'ensemble du code et des interactions définies dans cet objet.

Pour accéder à cet classe, GAS nous propose d'utiliser la classe HtmlService : service qui permet de retourner des contenus HTML depuis un script. En voici donc quelques fonctions :

• createHtmlOutput(html)

Cette fonction créé un objet de classe HTMLOutput avec en paramètre du texte correspondant à du contenu HTML.

Attention : ce contenu ne pas encore être affiché dans votre navigateur juste avec cette fonction

//Retourne une page HTML avec écrit Bonjour dans la variable output

var output = HtmlService.createHtmlOutput('<b>Bonjour!</b>');

• createHtmlOutputFromFile(filename)

Cette fonction créé un objet de classe HTMLOutput avec en paramètre le nom d'un fichier script de type HTML

var output = HtmlService.createHtmlOutputFromFile('AIDE');

//Le fichier AIDE sera un fichier de type HTML dans votre script

La fonction createHtmlOutputFromFile utilisera alors les données du fichier qui contiendra du code dans le langage HTML et devra posséder au minium la structure suivante :

• createTemplateFromFile(filename)

Cette fonction créé un objet de classe HTMLTemplate . Cet objet peut recevoir des paramètres contrairement à un objet HTMLOutput . Cette notion de paramètre sera utile pour renseigner les options d'une liste déroulante à partir des valeurs d'un Google Sheets par exemple.

HTMLTemplate

• HTMLTemplate.parametre

L'attribut .parametre peut posséder des valeurs récupérées avec des fonctions GAS et depuis des documents de Google Workspace . Cet attribut pourra être importé dans le fichier HTML et comprendra la valeur qui lui a été assigné avec la méthode <?!=parametre;?>

• • Le code dans mon fichier .gs

function doGet(e){

//Déclaration d'une variable ui qui va se baser sur le fichier HTML

var ui = HtmlService.createTemplateFromFile('EXERCICE 10 - HTML')

//Déclaration de la variable du fichier HTML qui va contenir un paramètre

ui.parametre="Mon texte qui va renseigner la valeur du paramètre"

return ui.evaluate().setWidth(1200).setHeight(1000);

}

• • Le code dans mon fichier .html

<!DOCTYPE html>

<html>

<head>

<base target="_top">

</head>

<body>

<?!=parametre;?>

</body>

</html>

• evaluate()

Cette fonction retourne un objet de classe HTMLOutput exploitable pour la Web App

//Récupération d'une valeur

var nombre=7.9909

//Déclaration d'une variable ui qui va se baser sur le fichier HTML

var ui = HtmlService.createTemplateFromFile('EXERCICE 10 - HTML')

//La valeur de parametre sera la valeur de nombre

//Cette valeur sera prise en compte lors de

ui.parametre=nombre

//On créé un objet HTMLOutput

return ui.evaluate()

HTMLOutput

• getContent()

Cette fonction permet de récupérer sous format texte notre fichier HTML ,c'est à dire de récupérer le code sous format texte. Cette fonction sera utilisée pour importer un fichier HTML dans un autre dans le but de séparer les codes CSS, HTML et Javascript .Nous verrons sa mise en place dans les exercices 9 et 10

• setWidth() | setHeigth() | setTitle()

Cette fonction définit la largeur | hauteur | titre de la Web App

Langage HTML, CSS & Javascript

• HTML

Si l'on doit retenir quelque chose du langage HTML, c'est que c'est un langage de balisage.

Une balise est donc un objet possédant les caractéristiques suivantes :

• Un chevrons ouvrant "<"

• Le type de notre objet HTML

• Des attributs

• Un chevron fermant ">"

Voici quelques exemples :

• <p class="form_control"> Mon texte </p>

• <meta charset="utf-8">

• <img src="monImage.png" alt="">

Un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :

La liste des attributs d'un élément HTML est longue, en voici donc les principaux pour ce cours :

• id : l'identifiant de notre élément

• value : la valeur cachée de notre élément

• class : la classe de notre élément . Un classe pour un élement HTML est ce qui caractérise son style avec du CSS

  • Exemple avec <title class="mes_titres"> LOREM IPSUM<title> :ici on définit la classe "mes_titres" à l'élément. Nous pouvons ensuite définir avec du CSS quel style appliqué à cette classe

• text : valeur visible d'une liste déroulante

• innerHTML : contenu d'un élément comme son texte par exemple

• style : permet de définir des élements CSS en plus de ceux de la classe de l'élément

  • Exemple : style="visibility:hidden;"

• type : type d'élément

  • Exemple : input, submit, number,...

• placeHolder : texte mis par défaut dans un élément

Ecrire en partant de zéro un code HTML peut être compliqué. C'est pour cela que des outils de transcription d'un format texte en format HTML existent. Vous pouvez donc vous orienter vers HTML EDITOR

• NOTION DE PARAMÈTRE D'URL

Une page web possède également des arguments dans son URL . En effet prenons l'exemple suivant :

https://support.google.com/google-ads/answer/6277564?hl=fr

Cette URL possède un argument qui se situe après le "?" : hl=fr. Ce paramètre nous indique que la page Web est chargé avec la langue Française. Si vous changez ce paramètre fr à en , vous verrez que la page Web est modifiée avec la langue Anglaise. Cette notion de paramètre peut donc s'appliquer sur l'URL de votre Web App pour changer de vue. En effet supposons que vous souhaitiez mettre en place une page Accueil avec deux liens permettant d'accéder à deux autres pages différentes. Vous pourrez alors créer 3 fichier HTML :

• Fichier ACCUEIL : ce fichier contiendra les éléments de la page d'accueil et les boutons/liens donnant accès aux deux autres pages Web

  • Bouton 1 : ce bouton va changer le paramètre de l'URL et charger la page HTML (Fichier HTML PAGE 1) correspondante à ce paramètre

  • Bouton 2 : ce bouton va changer le paramètre de l'URL et charger la page HTML (Fichier HTML PAGE 2) correspondante à ce paramètre

Pour que cette méthode puisse fonctionner, il nous faut utiliser l'attribut target. Il est utilisé pour définir où vont s'ouvrir les liens présents dans la page web. 4 possibilités sont envisageables :

• • _blank : Ouvre le lien dans un autre onglet du navigateur Opens the link in a new window or tab

  • _self : valeur par défaut. Ouvre le lien dans la même fenêtre où il y a eu le click

  • _parent : Ouvre le lien dans la fenêtre qui contient la fenêtre où il y a eu le click

  • _top : Ouvre le lien dans l'onglet où il y a eu le click

Pour le contexte de ce cours nous allons lié l'argument target à l'entête de nos pages HTML avec la balise base comme ceci :

<head> <base target="_self"> </head>

Cet attribut, placé sur la valeur _self, permettra à votre page d'accueil d'ouvrir les autres pages dans la même fenêtre au sein de votre Google Site par exemple.

Si vous souhaitez comprendre en profondeur le langage HTML, vous trouverez de nombreuses informations via ce lien : w3schools.com

• CSS

Pour définir des classes CSS, il faut respecter la syntaxe suivante :

<style>

.nom_classe{

font-family:Century Gothic;

font-weight:bold;color:black;

}

</style>

Dans le cadre de ce cours, nous restreindrons à l'utilisation d'éléments HTML prédéfinis grâce à BootStrap. En effet ce site procure des éléments en HTML et CSS avec un style plutôt agréable, mais surtout facile d'utilisation.

Si BootStrap ne vous convient pas, vous pouvez également faire un tour du côté de Materialize .

Ces deux sites vous proposeront du code HTML à copier permettant d'afficher correctement dans votre Web App des formulaires, des boutons et bien d'autres . La seul condition sera d'importer leur code CSS via une url.

Pour ce faire rien de plus simple que de suivre le code HTML suivant :

<!DOCTYPE html>

<html>

<head>

<base target="_top">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body >

</body>

</html>

Le lien dans la balise link est donc nécessaire pour que les éléments copiés sur le site BootStrap s'affiche avec le style CSS demandé.

• Javascript

Le langage Javascript va nous permettre de manipuler nos éléments HTML. Pour qu'un fichier HTML reconnaisse du code javascript , ce dernier doit être entouré des balises <script> et </script> comme ceci :

<!DOCTYPE html>

<html>

<head>

</head>

<body >

</body>

<script>

//mon code Javascript

</script>

</html>

Une fois ces balises déclarées, nous pouvons utiliser les fonctions Javascript suivantes :

• FileReader

L'objet FileReader permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. Pour notre cours nous utiliserons la méthode suivante :

• • FileReader.readAsDataURL() : Cette méthode va lire un fichier et nous renvoyer un objet possédant plusieurs attribut. Un de ces attribut est result . Il va contenir les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64. Pour décoder cette chaîne, nous utiliseront la fonction Utilities.base64Decode(data) couplée avec la fonction Utilities.newBlob(data, contentType, name)

• document.getElementById("id") : cette fonction permet de récupérer l'élément HTML par son attribut id

• document.getElementById("id").onchange : permet de lancer une fonction lors d'un changement sur l'élément . Cette fonction sera utilisée pour les listes déroulantes

• document.getElementById("id").onclick : permet de lancer un fonction lors d'un click sur l'élément. Utilisé pour des éléments HTML Buttons

• google.script.run.MyFunction() : permet d'exécuter une fonction d'un fichier .gs contenu dans votre script.

  • Une variante de cette fonction est la suivante

google.script.run.withSuccessHandler(function (data){

//mes actions utilisant la valeur de data

}).MyFunction();

Cette variante fonctionne comme suit :

1. Appel de la fonction MyFunction : cette fonction provient d'un fichier .gs. Elle fonctionne avec google.script.run . On suppose que MyFunction nous renvoie une donnée (i.e. la fonction doit posséder un return) ayant la valeur 10 par exemple

2. Exécution des actions de function (data) : Les actions de cette fonction vont s’exécuter avec la valeur du paramètre data qui aura pris la valeur de la donnée retournée dans l'étape 1, soit la valeur 10.

Ce fonctionnement est spécifique à javascript puisque l'exécution du code ne se fait pas forcement ligne par ligne et de droite à gauche. C'est ce qu'on appelle une méthode asynchrone. Cette dernière vous sera très utile pour rafraîchir votre liste déroulante après l'envoi d'un formulaire (voir Exercice 10).

Déploiement

Pour déployer votre script en tant qu'application Web, suivez les étape suivantes :

• Cliquez sur l'entrée de bouton Déployer/Nouveau déploiement puis choisir Application Web

• Choisissez ensuite les paramètres de déploiement

  • Execute as : Sélectionnez sous quel compte sera exécutée la Web App. Cela va dépendre des autorisations que vous accordez pour modifier votre Google Sheets par exemple

    • Moi(mon_adresse_mail@gmail.com) : l'utilisateur manipulera la Web App mais les actions seront exécuté avec votre compte, c'est à dire le compte du créateur de la Web App

    • Utilisateur accédant à l'application : Cette approche demande à l'utilisateur manipulant la Web App d'accepter la Web App comme une application autorisée à chaque fois

• Qui a accès : Qui a accès à la Web App. Par souci de simplicité, vous pouvez choisir la valeur "Anyone, even anonymous"

• Cliquez ensuite sur Déployer :

  • Une autorisation d'accès est demandée. Cliquez sur Autoriser l'accès et suivez les instruction de demande d'accès

  • Le nouveau déploiement est créé dans lequel vous pouvez récupérer l'URL d'exécution

• Si vous souhaitez retrouver les différents déploiements en cliquant sur le Bouton Déployer/Gérer les déploiements

  • Vous retrouverez les versions déployées de la WebApp ainsi que les urls des Bibliothèques dans la liste des déploiements

  • Vous pourrez également archiver un déploiement via le bouton en haut à droite

Schémas récapitulatif de la structure d'une WebApp