Table des matières:

Organisateur de garde-robe : 13 étapes
Organisateur de garde-robe : 13 étapes

Vidéo: Organisateur de garde-robe : 13 étapes

Vidéo: Organisateur de garde-robe : 13 étapes
Vidéo: Comment organiser sa garde-robe comme une pro 2024, Juillet
Anonim
Organisateur de garde-robe
Organisateur de garde-robe

Que ce soit pour acheter des vêtements ou qu'on vous demande toujours d'emprunter un article, il y a des moments où vous souhaiteriez pouvoir jeter un coup d'œil dans votre placard de n'importe où pour voir si vous avez quelque chose de similaire. L'organisateur de garde-robe fait exactement cela ET PLUS !

Il s'agit d'un guichet unique et est vaste pour de nombreuses autres fins. My Wardrobe Organizer est une combinaison de Google Sheets en tant que base de données SQL, de Google Scripts pour la gestion des données et de Google WebApp pour un portail en ligne vers ces données. L'utilisateur final peut voir tous les articles, filtrer pour quelque chose de spécifique, marquer les articles comme prêtés, gérer leur linge et empêcher maman de vous acheter la même chemise pour Noël chaque année*.

(*Aucune garantie. Les mères achèteront ce qu'elles veulent, que vous en ayez besoin ou non)

En jetant un coup d'œil rapide à la conception du site Web dans l'image ci-dessus, on peut reconnaître une mise en page familière. L'organisateur de garde-robe est configuré comme n'importe quel site Web de vêtements ordinaire. Divisé par départements en haut et filtres fournis sur le côté, cette interface apporte une familiarité avec les fonctionnalités à l'utilisateur occasionnel. ET il est simple à utiliser.

Étape 1: Configuration de votre propre copie

Configuration de votre propre copie
Configuration de votre propre copie

Commençons par créer votre propre copie de ce projet.

Google Drive

Cliquez sur le lien ci-dessus pour accéder à ma version actuelle de cette application.

Vous verrez 3 éléments dans ce dossier: un formulaire Google, une feuille Google et un dossier.

Faites un clic droit sur la feuille Google et cliquez sur Faire une copie.

Définissez l'emplacement de cette copie sur votre propre lecteur.

Après avoir copié ce document, le formulaire Google sera automatiquement généré dans le même dossier que vous avez déplacé la feuille Google.

Pour créer le dossier (cela est nécessaire pour collecter les téléchargements des images de l'article), cliquez sur le formulaire Google copié et une invite apparaîtra vous demandant de restaurer l'emplacement du dossier pour les téléchargements.

Vous avez maintenant une copie de ce document pour travailler par vous-même !

Étape 2: présentation du formulaire Google

Présentation du formulaire Google
Présentation du formulaire Google
Présentation du formulaire Google
Présentation du formulaire Google
Présentation du formulaire Google
Présentation du formulaire Google
Présentation du formulaire Google
Présentation du formulaire Google

Maintenant que vous avez votre propre version de cette application, jetons un coup d'œil.

Votre formulaire Google est configuré pour accepter de nombreux types d'articles différents. Cependant, les chemises, les pantalons, les robes et les chaussures ont tous des limites de taille différentes. Par conséquent, une section différente de ce formulaire sera remplie en fonction du département sous lequel vous déposez votre article. Dans mon modèle (de l'article masculin), j'ai créé 5 catégories de tailles différentes. (Pour les articles sur les femmes, cliquez ici, il y en a beaucoup d'autres).

Sous chaque section de dimensionnement, j'ai établi un titre unique pour chaque paramètre que je collecterai. Nous ne voulons pas avoir plusieurs colonnes dans notre base de données avec le nom "Taille" ou nous ne serions pas en mesure de déterminer à quel type de vêtements cette taille s'applique.

A la fin de chaque section, l'utilisateur est dirigé vers la dernière partie de ce formulaire: Emplacement. J'ai personnellement choisi d'ajouter Emplacement pour déterminer les articles chez le pressing, dans la blanchisserie, à leur place ou les articles dans lesquels j'ai laissé un ami emprunter. Cela me permet d'être organisé et de ne jamais avoir l'impression de manquer un vêtement quelque part.

Comme je l'ai mentionné depuis le début, ce projet peut être étendu d'un million de façons différentes. Vous pouvez l'utiliser pour l'inventaire, un outil d'organisation plus précis, ou pour le strict emprunt de vêtements. Les champs et les sections que vous pouvez ajouter sont infinis, alors ne vous sentez pas limité à ce qui se trouve dans mon formulaire. (Pour les articles sur les femmes cliquez ici)

Avant de télécharger quelques-uns de vos propres éléments, passons à l'étape suivante pour garantir une soumission correcte.

Étape 3: Google Scripts: (Server Code.gs) Regardez d'abord les données et le code

Scripts Google: (Server Code.gs) Regardez d'abord les données et le code
Scripts Google: (Server Code.gs) Regardez d'abord les données et le code
Scripts Google: (Server Code.gs) Regardez d'abord les données et le code
Scripts Google: (Server Code.gs) Regardez d'abord les données et le code

En cliquant sur le document Google Sheets, vous verrez de nombreuses colonnes de données (et quelques lignes, laissées pour la démonstration). Lors de la soumission du formulaire, certaines sections sont ignorées, comme le montrent les données manquantes dans certaines colonnes. Mais des colonnes supplémentaires telles que ID, Emplacement par défaut, Qui et Mis à jour ont été ajoutées pour mieux suivre les modifications de ces éléments.

Un champ ID a été créé lorsque vous avez soumis le formulaire pour permettre un identifiant unique lors de la traversée de cette base de données. Pour créer ce champ, nous allons jeter un œil à l'éditeur de script en cliquant sur Outils>Éditeur de script.

Avec l'éditeur de script ouvert, vous remarquerez 8 documents dans la barre latérale de cette nouvelle fenêtre. Ces documents aident à contrôler le processus back-end, les affichages frontaux et les fonctionnalités front-end. Nous allons sauter dans chacun d'eux (si vous restez dans les parages), mais cliquez maintenant sur Server Code.

Dans le fichier Server Code.gs, il y a de nombreuses fonctions:

onSubmit(e), onOpen(), doGet(), include(fileName), openApplication(), openLaundryApp(), changeValueOnSubmit(e), setIDOnSubmit(e)

onSubmit(e) - Cette fonction sera configurée comme la première fonction à s'exécuter lors de la soumission d'un formulaire Google. Vous pouvez placer d'autres fonctions à l'intérieur de cette fonction pour permettre à de nombreux processus différents de se produire.

onOpen (e) - Cette fonction est appelée lorsque Google Sheets est ouvert. Il remplit une nouvelle option de menu pour permettre un accès rapide aux liens et aux vues de l'application.

doGet() - Cette fonction est appelée lors de l'appel d'adresse de l'application Web. Lorsqu'un utilisateur accède à l'application Web publiée, ce code indiquera à cette page ce qu'elle doit afficher. Dans ce cas, il s'agit du document Application.html.

include(fileName) - Cette fonction est utilisée à l'intérieur des pages HTML pour lire d'autres documents et insérer leur contenu dans un format HTML approprié dans une autre page. Nous l'utilisons pour nos fichiers CSS.html et JS.html.

openApplication() et openLaundryApp() - Ces fonctions contiennent le code à exécuter lorsqu'un utilisateur clique sur les boutons de menu ajoutés à la barre d'outils Google Sheet.

changeValueOnSubmit(e) et setIDOnSubmit(e)- Ce sont les fonctions que nous examinerons pour le moment. Ils sont chargés de mettre à jour certains champs avec des valeurs par défaut lors de la soumission initiale du formulaire.

Étape 4: Activer OnFormSubmit

Activer OnFormSubmit
Activer OnFormSubmit
Activer OnFormSubmit
Activer OnFormSubmit
Activer OnFormSubmit
Activer OnFormSubmit

Ces deux fonctions, changeValueOnSubmit(e) et setIDOnSubmit(e), doivent être connectées à l'action de l'utilisateur consistant à soumettre un formulaire. Pour ce faire, nous devons activer un déclencheur.

Nous activons le déclencheur en cliquant sur Modifier > Déclencheurs du projet actuel. Cela ouvre le Google Developer Hub.

Dans le coin inférieur droit du tableau de bord des déclencheurs se trouve un bouton Ajouter un déclencheur. Cliquez ici.

Nous allons maintenant configurer la fonction à exécuter lorsqu'un formulaire est soumis. Dans notre cas, j'ai plusieurs fonctions (changeValueOnSubmit(e) et setIDOnSubmit(e)) que je mets à l'intérieur d'une fonction onSubmit() donc je n'ai qu'à configurer 1 déclencheur. Par conséquent, nous sélectionnerons onSubmit() et définirons ce déclencheur pour qu'il s'exécute On form submit.

Nous avons maintenant un formulaire de travail qui remplira une feuille Google avec des identifiants uniques et définira des valeurs par défaut.

Vous pouvez désormais télécharger vos propres éléments à l'aide du formulaire Google. (Ce n'est pas nécessaire de continuer car il y a déjà des valeurs de démonstration). Nous allons maintenant plonger dans l'interface utilisateur.

Étape 5: Configuration de l'interface utilisateur

Configuration de l'interface utilisateur
Configuration de l'interface utilisateur
Configuration de l'interface utilisateur
Configuration de l'interface utilisateur
Configuration de l'interface utilisateur
Configuration de l'interface utilisateur

BIENVENUE! Nous avons enfin atteint la partie pour laquelle vous êtes venu, l'interface utilisateur !!!!

A première vue, il n'y a rien ici. Nous n'avons pas encore passé d'appels. Pour charger la page plus rapidement, j'ai décidé de ne pas encombrer la première page de TOUS vos éléments et de vous permettre de cliquer sur ce que vous voulez voir plus rapidement. Puisque c'est le cas, il n'y a aucun élément dans le champ de contenu principal et aucun filtre dans la barre latérale. Cliquez sur Tout pour voir ce qu'il y a dans notre base de données.

Nous avons maintenant chargé chaque élément de notre base de données dans le champ de contenu principal. Vous verrez des images, des numéros d'identification, des couleurs, des tailles et des emplacements. Le champ de localisation peut être mis à jour ici ! Si vous décidez de prêter l'article, vous pouvez sélectionner cette option, vous pouvez le placer dans votre placard, votre commode ou votre buanderie.

Et dans notre barre latérale, nous avons tous les champs possibles pour chaque vêtement dans notre nouvelle requête. Imaginez simplement avoir 20 options de tailles différentes dans cette barre latérale, cela ne serait pas très efficace, alors affinons notre recherche en cliquant sur Accessoires.

Maintenant que nous avons chargé Accessoires, jetez un œil à la barre latérale. Il s'est ajusté à seulement 3 champs, car ce sont les paramètres qui s'appliquent à chaque élément de cette requête. Je vais faire un tri par couleur. En cliquant sur couleur, une liste déroulante apparaît. Ici, je peux soit taper la couleur que je veux, puis la sélectionner, soit si je vois mon option tout de suite, je clique simplement dessus. J'ai choisi Red pour cette démonstration. Cliquez sur Appliquer le filtre au bas de cette barre latérale et le contenu principal s'actualisera en vous montrant les éléments dont la couleur Rouge est définie comme paramètre de couleur.

J'ai déjà mentionné que cette base de données m'aide à gérer mes articles en prêt et dans ma lessive. Pour rendre les choses un peu plus faciles, au lieu de cliquer manuellement sur chaque emplacement déroulant de cette page principale, j'ai créé le mode blanchisserie. Revenez à la page Google Sheet et sous App View, vous verrez Mode blanchisserie. Cette option affichera un modal plus petit qui affichera uniquement les éléments avec l'emplacement de blanchisserie. Je peux maintenant marquer tous ces éléments par défaut, ce qui les replacera dans leurs emplacements où ils sont normalement stockés.

Étape 7: Projet terminé

Projet terminé !
Projet terminé !

FÉLICITATIONS

Pour ceux d'entre vous qui souhaitent simplement une base de données fonctionnelle pour gérer leurs articles, bienvenue dans votre organisateur en ligne. Pour les esprits curieux intéressés par le code derrière cette application. Restez dans les parages pendant que je le décompose.

*Vous êtes libre de supprimer les éléments de test APRÈS avoir entré au moins un de vos propres éléments dans la base de données. (Je t'expliquerai plus tard si tu restes).

Étape 8: Étape 1: le code back-end (Server Code.gs)

Étape 1: le code back-end (Server Code.gs)
Étape 1: le code back-end (Server Code.gs)
Étape 1: le code back-end (Server Code.gs)
Étape 1: le code back-end (Server Code.gs)

Plus tôt, nous avons ouvert le fichier Server Code.gs et j'ai brièvement décrit chacune des fonctions car leur objectif était de servir chacun des éléments que vous venez de configurer, mais nous allons maintenant les décomposer en certaines fonctionnalités et utilitaires appelés pour faire de ce code un succès.

1) Parcours de table:

var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheetByName("Réponses de formulaire 1"); var range = feuille.getRange(1, 1, feuille.getMaxRows()); var rowNum = range.getLastRow();

  • Ce code est une base pour parcourir une feuille Google. J'appelle la feuille par son nom plutôt que par son numéro afin que si les feuilles sont supprimées ou réorganisées par fonction, elle puisse toujours fonctionner correctement.
  • Dans ce code, je ne collecte que la plage pour toutes les données du tableau.

2) Attribution d'un identifiant:

var LastID =range.getCell(rowNum-1, 1);var CellValue = Number(LastID.getValue());var ColA = 1; var max =15; var min=5; CellValue = CellValue+ Math.round((Math.random()* (max - min) + min)); e.source.getActiveSheet().getRange(range.getLastRow(), ColA).setValue(CellValue); changeValueOnSubmit(e);

  • J'ai précédemment demandé que les valeurs de démonstration soient laissées dans le tableau jusqu'à ce que l'utilisateur ait soumis au moins une valeur pour lui-même. Cela est dû au fait que le générateur d'identification automatique s'appuie sur la dernière valeur de la base de données à remplir.
  • Je récupère l'avant-dernière ligne car la dernière ligne est notre nouvelle valeur et la 1ère colonne pour la valeur de l'ID.
  • Je génère ensuite aléatoirement un nombre entre 5 et 15 et l'ajoute à la dernière valeur. *
  • Enfin, je place cette valeur dans la colonne ID de la dernière ligne.
  • Ensuite, nous appelons la fonction changeValueOnSubmit(e).

* J'ai choisi 5-15 pour permettre l'étiquetage futur et l'intégration de Google Home afin que les chiffres ne soient pas suffisamment proches pour créer une confusion sur les cintres, les étiquettes de vêtements ou les codes-barres.

3) Modification de la valeur de l'URL:

var DataChange = e.namedValues["Item Picture"];var DefaultLocation = e.namedValues["Où gardez-vous cet article ?"]; var ColD = ColumnID_("Item Picture") +1; var ColLoc = ColumnID_("Emplacement par défaut")+1;DataChange = DataChange.toString().replace("open?", "uc?export=view&"); e.source.getActiveSheet().getRange(e.range.rowStart, ColD).setValue(DataChange); e.source.getActiveSheet().getRange(e.range.rowStart, ColLoc).setValue(DefaultLocation);

  • Lorsque vous soumettez une photo via un formulaire Google, l'URL insérée dans Google Sheets est un lien vers le document réel. Dans notre cas, lorsque nous créons une page HTML, nous voulons que le lien ne soit que l'image.
  • En changeant le "ouvrir?" partie de l'URL vers "uc?export=view&", nous avons plutôt créé un lien vers l'image.
  • Nous placerons à nouveau cette nouvelle valeur à l'emplacement du lien actuel de l'image de l'article.
  • Je règle également "l'emplacement par défaut" et "l'emplacement actuel" de l'élément sur la même chose dans la base de données. Cela m'aidera lorsque j'essaierai d'utiliser mon mode blanchisserie.
  • Nous y plongerons à la page suivante, mais c'est notre premier aperçu de la fonction ColumnID_() que j'ai créée.

    Cette fonction utilise les noms de colonne pour le traduire en entier de colonne, ce qui est utile pour les appels de plage qui nécessitent un numéro de colonne plutôt qu'un nom

4) SpreadsheetApp.getUI()

  • Dans la deuxième image, vous pouvez voir l'utilisation de SpreadsheetApp.getUI() pour créer un ajout de menu de barre d'outils à la feuille Google.
  • La fonction.getUI () permet également de créer une fenêtre contextuelle modale utilisée pour le mode blanchisserie et comme lien rapide vers l'interface du site Web.

5) Service HTML

  • Il existe deux types de HTMLServices utilisés dans ce code: Template et HTMLOutput
  • Le modèle permet d'insérer du code à l'intérieur du code HTML afin que les informations provenant d'un serveur puissent être renseignées lorsque la page est appelée.
  • La sortie HTML affiche des pages HTML simples.
  • Nous avons également la méthode include() qui nous permet de créer plusieurs fichiers HTML et de les combiner dans un fichier HTML modélisé en renvoyant le contenu du fichier dans un format HTML plutôt qu'une chaîne.

J'ai joint un document configuré comme Google App Scripts Documentation pour vous familiariser avec la façon dont le code source et les fonctionnalités sont expliqués dans Google Apps.

Étape 9: Étape 2: la partie 2 du code back-end (Server Calls.gs)

Étape 2: la partie 2 du code back-end (Server Calls.gs)
Étape 2: la partie 2 du code back-end (Server Calls.gs)
Étape 2: la partie 2 du code back-end (Server Calls.gs)
Étape 2: la partie 2 du code back-end (Server Calls.gs)
Étape 2: la partie 2 du code back-end (Server Calls.gs)
Étape 2: la partie 2 du code back-end (Server Calls.gs)

Maintenant, nous avons entré le Server Calls.gs. Ces fonctions sont principalement utilisées dans le JavaScript HTML, elles ont donc été séparées du code principalement utilisé dans le back-end qui se trouve dans Server Code.gs.

Image 1) Variables globales:

Image 2) récupération d'objets:

Image 3) fetchItemsQry

Image 4) filterItems

Image 5) fetchFiltersWithQry

Image 6) ColumnID et CacheCalls

Il y a tellement de choses à dire avec chacun d'eux. Et pour décomposer le code et expliquer ce qui se passe, j'avais besoin d'un peu plus d'espace de frappe. Ci-joint un document pour la répartition du code de ServerCalls.gs

Ce document est configuré comme la documentation Google App Scripts et fait même des liens vers des objets similaires.

Étape 10: Étape 3: le code HTML (Application.html)

Étape 3: le code HTML (Application.html)
Étape 3: le code HTML (Application.html)
Étape 3: le code HTML (Application.html)
Étape 3: le code HTML (Application.html)
Étape 3: le code HTML (Application.html)
Étape 3: le code HTML (Application.html)

Le code HTML devient très malheureux dans la boîte de dialogue d'un Instructable. Alors s'il vous plaît suivez les images ci-dessus.

1) Dans l'en-tête de la page Application.html nous établissons un titre et appelons notre page CSS.html à charger.

* Étant une page HTML modélisée, nous pouvons ajouter plus de code à ce document sans encombrer l'écran actuel en utilisant la méthode include(pageName) mentionnée précédemment trouvée dans Server Code.gs

La boîte d'en-tête principale se trouve également dans cette image. Vous pouvez modifier l'en-tête ici et saisir "[Votre nom]'s Wardrobe" ou tout autre élément sous lequel vous voudriez reconnaître cette page.

2) Juste en dessous de l'en-tête se trouve notre barre de navigation supérieure.

Cette barre de navigation comprend tous les types d'articles répertoriés sur la feuille Article à l'intérieur de nos feuilles Google.

Une fonction en ligne est appelée pour récupérer un tableau de ces éléments. Ensuite, une boucle est exécutée pour inclure chacune de ces options en tant que bouton de menu, avec un code d'action afin que lorsqu'un utilisateur clique sur le bouton de menu, les éléments respectifs apparaissent dans la zone du corps.

3) Le corps principal.

Il y a 4 portions dans cette partie. Une sortie de texte, le filtre de la barre latérale, les images du corps principal et le JS inclus.

La sortie de texte permet à l'utilisateur de voir une vue de texte rapide pour le type d'éléments qu'il examine actuellement au lieu de se référer à l'option de menu qu'il a sélectionnée.

Le filtre de la barre latérale contient les nombreux filtres disponibles pour le type d'élément qu'un utilisateur a sélectionné. Ces filtres reflètent toutes les options disponibles pour cette catégorie ainsi que le nombre d'éléments qui relèvent de cette valeur de catégorie. Cette barre latérale est remplie de code JavaScript (qui sera discuté ensuite).

Le corps principal est actuellement vide, mais tout comme les filtres, il sera rempli de boîtes d'articles détaillant l'ID, la couleur, la taille et l'emplacement de l'article avec une image incluse une fois que l'utilisateur sélectionne une catégorie et que le code JavaScript remplit cette zone.

Enfin, les includes (JS), examinons cela à l'étape suivante.

Étape 11: Étape 4: le code JavaScript (JS.html)

Étape 4: le code JavaScript (JS.html)
Étape 4: le code JavaScript (JS.html)

Si vous pensiez que le code serveur était une section lourde, apprenez-en davantage.

Ici, nous combinons notre HTML et SeverCode avec les interactions des utilisateurs. Tout élément sur lequel vous cliquez doit être traité ici pour obtenir les données appropriées et les renvoyer dans un format lisible. Jetons donc un œil à nos premiers appels:

Le script appelle: j'utilise 3 bibliothèques différentes pour ce projet; jquery, bootstrap et un module complémentaire spécial de sélection de bootstrap. Ces bibliothèques permettent le formatage des objets et des appels plus faciles aux éléments dans le code HTML.

Ma prochaine ligne importante de JavaScript est ci-dessous:

$(document).touche(function(event){ if (event.which == '13') { event.preventDefault(); } });

Ici, je désactive la touche Entrée pour ne déclencher aucun des formulaires. Comme dans ce cas, les Google Web Apps ne reçoivent qu'une seule adresse de page. Une pression d'entrée ajouterait des données à l'adresse HTML et tenterait de rediriger l'utilisateur. En désactivant cela, vous autorisez votre code JavaScript à faire tout le travail.

function removeFilters(){ google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters(); }

function updateDBlocation(id, value){ google.script.run.withSuccessHandler(allGood).withFailureHandler(FailDBUpdate).updateLocation(id, value); }

Voici deux fonctions qui appellent le fichier Server Code.gs. La ligne:

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters();

a de nombreuses parties de travail, mais le squelette est enraciné à partir de " google.script.run" qui indique à la page HTML que la fonction suivante est sur le serveur.

  • Le dernier bit de ce code est la fonction à exécuter. Dans cet exemple ServerRemoveFilter()
  • En ajoutant un withSuccessHandler(), la page HTML sait maintenant quoi faire avec les données renvoyées, c'est-à-dire exécuter la fonction avec la parenthèse.
  • La même chose s'applique à withFailureHandler()

Maintenant que nous avons décomposé l'appel de code serveur, jetons un coup d'œil rapide à ce qui se passe lorsque ces appels de serveur réussissent et échouent.

function allGood(e){ console.log("Success on server"); } function onFailure(error){ $("#message-box").html("

Impossible de récupérer les vêtements pour le moment. ERREUR: " + message d'erreur +"

"); } function FailDBUpdate(error){ $("#message-box").html("

Vous n'avez pas accès pour modifier l'emplacement. ERREUR: " + message d'erreur +"

"); $(".location-selects").prop('disabled', 'disabled'); }

J'ai créé un journal de console très simple pour signifier le succès lorsque la fonction de localisation est exécutée que vous pouvez voir comme allGood().

Lors de la gestion des erreurs, ces deux fonctions génèrent le message d'erreur que l'utilisateur peut voir en utilisant un appel jQuery à l'objet HTML avec un ID de "message-box".

Passons maintenant au gros travail

Étape 12: Étape 5: les actions de clic sur le code JavaScript (JS.html)

Étape 5: les actions de clic sur le code JavaScript (JS.html)
Étape 5: les actions de clic sur le code JavaScript (JS.html)
Étape 5: les actions de clic sur le code JavaScript (JS.html)
Étape 5: les actions de clic sur le code JavaScript (JS.html)
Étape 5: les actions de clic sur le code JavaScript (JS.html)
Étape 5: les actions de clic sur le code JavaScript (JS.html)

La barre de menu supérieure a des options pour chaque type d'article. La fonction qu'ils exécutent au clic est:

function filterType(article, id){ $("ul.navbar-nav li.active").removeClass("active"); $("#articlecourant").html(" //CODE HTML ICI");

updateSideBar = true;

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure).fetchItems("Articles", article); var newSelect = "#type-"+id; $(newSelect).addClass("actif"); $("#myNavbar").removeClass("in"); }

Nous pouvons voir dans ce code que nous avons un google.script.run qui appelle le serveur pour récupérer des informations. La fonction de réussite de cet appel est updateItems().

IMAGE 1 (avec le code HTML lourd dans cette fonction, il est difficile de copier strictement le code, sans apparaître un désordre dans cette boîte)

Dans le code updateItems(), il se passe beaucoup de choses. Encore une fois, nous devons parcourir l'objet qui nous a été renvoyé et ajouter chaque élément à notre page de corps principale.

Le code HTML est ajouté sous forme de tableaux pour décomposer le code et le rendre plus facile à lire et à voir où itemData est inséré.

Dans la boucle de chaque élément, je supprime les champs que je ne veux pas voir dans la description, tels que Par défaut, horodatage et URL de l'image. Je supprime l'URL de l'image de la description car elle est plutôt ajoutée en tant que href à une balise. Une fois ces informations assemblées, elles sont envoyées au corps principal à l'aide de la fonction jQuery.append().

Une fois que tous les éléments ont été ajoutés à la page, cette requête d'éléments est à nouveau envoyée au code serveur pour trier et renvoyer les options de filtrage, comme indiqué sur l'image 2.

IMAGE 2 (mise à jour de la barre latérale)

Très similaire à la fonction updateItems(), nous avons à nouveau des tableaux de code HTML et une boucle pour toutes les options de filtrage. Le seul changement notable est le jQuery.selectpicker('refresh'). Cette fonction provient de la bibliothèque de scripts que nous avons incluse dans la dernière étape. Il permet au programmeur d'écrire un simple HTML sélectionné et de laisser la bibliothèque le mettre à jour pour inclure une fonction de recherche ainsi que le code CSS.

IMAGE 3 (filtrage avec la barre latérale)

Enfin, nous avons la fonction updateFilter(formData). Ceci est utilisé lorsqu'un formulaire est soumis à partir de la barre latérale. On commence par utiliser une fonction jQuery.serializeArray() qui lit le code HTML de l'élément défini dans notre cas un formulaire, et renvoie les valeurs dans une chaîne à envoyer au serveur. Et nous recommençons le processus à partir de l'image 1.

Étape 13: La fin….enfin

La fin….enfin
La fin….enfin
La fin….enfin
La fin….enfin

Bien, tu l'as maintenant; une explication complète et approfondie pour vous aider à créer votre propre garde-robe en ligne ou à utiliser les fonctionnalités créées dans mes scripts Google pour développer votre propre projet.

Cela a été un voyage de codage de ce projet (et de documentation à travers ce Instructable) mais j'ai apprécié le processus et j'espère que vous apprécierez le produit. J'aimerais avoir des nouvelles de tous ceux qui font des ajustements comme Michael Jordan dit "Le plafond est le toit" et je suis d'accord que cette application n'a pas de limites.

Conseillé: