Création d’un mini Blog en utilisant Sheet, Form et Apps Script

1

Présentation du Mini blog

Nous allons voir comment créer un mini blog en utilisant plusieurs applications de notre Suite Google .
L’idée étant de publier un article via un Google Form que nous allons créer, de le sauvegarder dans un Google Sheet et ensuite de l’afficher en tant qu’application web via Apps Script.

Regardez cette démonstration :
Lien de démonstration du Script

Etape 1 : La création de notre formulaire à l’aide de Google form, afin de créer les champs dont nous allons avoir besoin pour la publication d’un article.

Créons immédiatement un champ titre, un champ contenu, Bouton catégorie et nous rajouterons l’auteur de l’article.

Étape 2 : Depuis Google Form, générez un Google Sheet, répertoriant la liste des articles enregistrés depuis votre Google Form.

creation du formulaire
generation du Sheet

  • Cliquez sur le petit icone de Sheet afin de générer le fichier correspondant à nos enregistrements.

base de donnée sur Google Sheet

Maintenant que nous avons la possibilité d’enregistrer les articles via notre Google Form, aidons-nous d’une application tierce qui va nous permettre de transformer ces données depuis votre Google Sheet en un format qui sera exploitable pour créer notre application web.

Etape 3 : Nous utiliserons donc l’application https://sheet.best/ , qui est une plateforme web permettant via l’enregistrement d’un fichier Sheet de récupérer les données et de les convertir en format Json (JavaScript Object Notation) qui nous permettra d’utiliser les données pour construire notre application via Apps Script.

plateforme qui converti les données Sheet en JSON

Pour se faire il vous suffit simplement de vous connecter à l’aide de votre compte Google, de créer une nouvelle API Sheet laquelle vous demandera un nom pour votre API et surtout L’URL entière de votre
Google Sheet (générée plus haut).
( ex: https://docs.google.com/spreadsheets/d/1uz2hA03YeReq0M4adhWoO15NcXX-5Eot5Wxg )

api de Google Sheet

Une fois votre nouvelle API crée, récupérer l’API Code fournie par SHEET BEST ( voir ci-dessous )

api code fournis par sheet best

Pour vérifier que ceci fonctionne bien, copier-coller cette URL API Code dans un nouvel onglet de votre navigateur, et vous devriez voir apparaître ceci.

format JSON des articles

 » Vue des données de votre Google Sheet, transformé en données JSON. »

Étape 4 : Il ne nous reste plus qu’à créer notre système via Apps Script, nous permettant de récupérer ces données et de les afficher sur notre page de blog.

Depuis votre Google Sheet, ouvrez l’éditeur de script

lancement de google apps scripts

Nommez votre Script par exemple “WEBJSON” puis insérez dans l’onglet Code.gs le script suivant:

Nous allons écrire 2 fonctions :

La  première fonction  » include() », prévoit l’inclusion d’autres fichiers à l’intérieur de notre fichier principal “page.html” en format Html pour le web.

La seconde « doGet() » lance l’application et crée notre format web pour notre page principale qui s’appellera page.html que nous créerons ensuite.

éditeur de code google scripts

Créons désormais notre second fichier « page.html » dont nous aurons besoin pour afficher les éléments.

creation d'une page html avec apps scripts de Google

Cliquez dans fichier –> Nouveau –> Nouveau fichier HTML
Nommez ce fichier “page.html”.
Puis collez-y le code ci contre :

code html avec google apps scripts

Nous avons préparé la structure de notre affichage, nous allons maintenant créer une nouvelle page “ app.html qui va venir contenir le script qui aura pour mission de récupérer les Datas en JSON depuis notre API.

Comme précédemment, créez une nouvelle page appelée “app.html”  et collez-y le code javascript suivant qui intègre la librairie Jquery dont le code aura besoin pour fonctionner…
En prenant bien soin de mettre à la place du code ci-joint votre variable API code récupéré depuis la plateforme Sheet Best.

Ainsi que le lien ci dessous vers la librairie javascript suivante :

<script src= »https://code.jquery.com/jquery-3.4.1.min.js » crossorigin= »anonymous » integrity= »sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo= »></script>

insertion jquery dans notre scripts google

Nous allons désormais relier notre page “app.html” à notre “page.html” afin qu’elle récupère bien le script d’import des données.
Puis mettez à jour le code de votre fichier “page.html”.

code la page Html

ÉTAPE 5 :  La publication de notre Blog

Vérifions que nos articles remontent bien et s’affichent.
Pour ce faire, exécutez dans fichier Code.gs la fonction DoGet().

Puis cliquez sur Publier –> Déployer en tant qu’application Web.

execution de la fonction avec l'éditeur google apps scripts
publier une google web apps
application des droits et autorisation dans une applicattion google web

Autorisez tout le monde à pouvoir accéder à votre application.
Si tout vos réglages sont bons, vos articles s’afficheront les uns en dessous des autres.

Vérifiez votre affichage en collant L’url de votre App dans un nouvel onglet de Chrome.

Nous avons terminé notre Web application de blogging !

Bien sur la personnalisation reste à faire, il faut y ajouter un soupçon  de Css (Cascading Style Sheet ) afin d’avoir le rendu final.

Mais je vous donne ci-dessous mon code complet afin de l’embellir rapidement avec un peu de CSS.
https://codeshare.io/5NvRQV

Avec un minimum de formation et de pratique à l’utilisation des différentes API et du développement Google Apps Script, les possibilités de combinaisons sont infinies entre les applications de la Gsuite.

Amusez vous bien ! 

Si vous avez trouvé une faute d’orthographe, veuillez nous en informer en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée .

1 COMMENTAIRE

  1. Bonjour

    Etape 1 ok
    Etape 2 ok
    Etape 3 KO

    je me retrouve bloqué face à ce message d’erreur que faire?

    L’URL ne semble pas valide. Vérifiez qu’il s’agit bien de feuilles Google. Notez que pour les feuilles téléchargées, vous devez d’abord les convertir en interne.

    que faire ……
    merci de votre retour

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.