Transcription
1. Introduction: Dans ce cours, nous allons créer une page de profil cool qui ressemble à ceci. Maintenant, la chose super cool à propos de cette page de profil est qu'elle est pilotée par Google Sheets. J' ai donc une feuille Google ici que si je modifie cette feuille, nous allons changer cette page Web. Maintenant, cette page Web est déployée sur Google Cloud R1, et le cours couvre également cela. Alors nous allons juste prouver que cela fonctionne. Donc, disons que je décide soudainement que j'ai cinq ans d'expérience dans MongoDB. Je peux juste changer ça. Retourne ici. Et ça dit deux ans d'expérience ici. Mais si je clique sur Actualiser, j'ai
tout d'un coup cinq ans d'expérience. Et soyons un peu plus sérieux ici et disons ça. Oui, Def Lay est allé à un humain, la ville. Comme ça. Revenez ici, cliquez sur Actualiser. Et moi, je suis allé à l'université. Maintenant, l'autre chose cool à ce sujet est que nous avons une page de contact ici. Et dans notre feuille Google, encore une fois, nous avons cette feuille de calcul des contacts. Et pour le moment, on a juste un contact ici. Mais si quelqu'un d'autre veut entrer en contact avec nous, disons que Fred bloque. Et il est Fred chez Gmail et il veut créer un site web. On peut certainement l'aider là-bas. Et donc il va envoyer un message, revenir sur notre page d'accueil. Et puis si nous revenons à notre feuille de calcul, vous pouvez voir que Fred nous a contactés via notre Google Sheet, ce qui est super cool. On va utiliser des technologies du charbon comme Python, trois flasques, bombardier, Docker, Google Container Registry, Google Cloud run. Évidemment Google Sheets. Tu vas apprendre beaucoup de choses dans ce cours. Et ce cours dure seulement une heure. Vous allez vous familiariser avec de nombreuses nouvelles technologies et avoir un aperçu de ce qui est possible avec le développement d'applications Web modernes. J' espère que vous déciderez de suivre le cours. Et merci d'avoir regardé.
2. Prérequis du logiciel: Pour ce cours, vous devrez installer le logiciel suivant. Si vous allez sur Docker.com, barre oblique
avant démarre. Vous pouvez installer Docker Desktop pour votre système d'exploitation particulier. Ils font des versions pour Windows, Mac et Linux. Une fois que vous avez installé Docker, alors si vous allez au code point Visual Studio.com et installez à nouveau le code Visual Studio pour votre IRS. Ils font des versions pour Windows, Mac et Linux. Une fois que vous avez installé ces deux logiciels, vous êtes prêt à commencer le cours.
3. Bonjour le monde: Ok, donc si vous ouvrez le code Visual Studio et allez dans Fichier et ouvrir le dossier, et maintenant nous allons créer un nouveau dossier et je vais l'appeler profil de flasque. Cliquez sur Sélectionner le dossier. Et nous allons créer notre fichier d'application python principal. Cliquez avec le bouton droit de la souris et choisissez Nouveau fichier Et appelons ce point AP. Et avant d'aller plus loin, nous voulons nous assurer d'avoir une extension appelée Docker. Donc, si nous cherchons la doctrine ici, et elle devrait être au sommet ici. Donc, si vous cliquez dessus et assurez-vous de l'installer, je l'ai déjà installé. Une fois que vous avez fait cela, fermez ça et revenez aux fichiers. Et maintenant, si vous appuyez sur F1, vous obtiendrez cette ligne de commande où vous pouvez rechercher certaines commandes. Et donc si je recherche Docker, j'ai toute une liste d'options. Et celui que nous voulons est d'ajouter des fichiers Docker à l'espace de travail. Donc, si vous cliquez dessus, et alors cela échafaudera quelques fichiers Docker pour nous. Et donc nous voulons le Python Flask. Donc, si nous cliquons sur cela, et notre point d'entrée est ce point d'application p y. Donc, nous allons cliquer sur cela. 5 000, c'est bien pour le port. Et oui, nous pourrions aussi bien inclure nos fichiers docker-composer. Et maintenant c'est échafaudé tous les fichiers Docker dont nous aurons besoin en fait. Donc c'est un peu pratique. Donc, nous avons nos exigences. Donc c'est la fiole et la licorne. Nous avons notre fichier docker, qui est utilisé pour construire notre image, et quelques fichiers docker-composer. Et surtout sous le code VS, nous avons en fait quelques fichiers ici qui aident au débogage. Donc, nous pouvons maintenant déboguer notre code dans le conteneur Docker en utilisant VS Code, ce qui est très cool. Maintenant, nous voulons faire quelques petits changements à ce fichier JSON point de tâche pour nous
permettre de recharger à chaud un lorsque nous faisons une modification dans ce fichier app.js. Donc c'est assez simple à faire. Donc nous devons venir ici sous ENV, nous devons ajouter un flacon, souligner ANOVA. Et nous voulons spécifier que nous sommes en mode développement. Cela signifie que flask
redémarrera son serveur web chaque fois que nous apporterons une modification à notre fichier. Et puis en dessous de cela dans le groupe V, nous devons créer une section de volumes. Et donc à l'intérieur ici, nous devons spécifier un chemin de conteneur, qui est dans un dossier d'application dans notre conteneur. Et le chemin local, qui est en fait le dossier de l'espace de travail dans lequel nous sommes. Et puis l'autre petit changement que nous devons faire est supprimer ces deux lignes ici. Parce que nous voulons utiliser le débogueur et nous voulons faire des rechargements à chaud. Et si nous contrôlons S pour sauver. Et juste pour que vous sachiez, pourquoi je sais que c'est slash application est parce que si nous regardons dans notre fichier docker, nous pouvons voir que nous avons mis notre répertoire de travail deux application slash là. C' est pourquoi cela doit être une application slash. Maintenant, si nous revenons à notre app.js, commençons à créer l'implémentation de flasque. Donc, c'est assez du code standard pour créer une application Flask. Ok, alors voyons si ça marche. Donc si nous frappons F5 maintenant, ou choisissez Exécuter et commencer à déboguer, et je vais juste frapper F5. Et cela va disparaître et créer notre conteneur Docker. Et comme vous pouvez le voir, nous avons notre Helloworld qui travaille ici. Maintenant, vérifions simplement que le rechargement à chaud fonctionne. Donc si je fais un amendement ici et que je mets quelques points d'exclamation à la fin et sûr. Nous devrions dire que nous sommes en train de recharger le serveur Web. Et si on fait un rafraîchissement, on aura ces points d'exclamation à la fin. Donc, nous avons
ici un environnement de développement assez agréable qui a été échafaudé assez rapidement.
4. Modèle d'index - Un début: Donc, la prochaine chose que nous voulons faire est de mettre en place un dossier de modèles et un modèle. Alors faisons ça maintenant. Donc, si nous faisons un clic droit et faisons un nouveau dossier, et nous créons un dossier appelé modèles. Et puis à l'intérieur de ce dossier Templates, je vais créer un nouveau fichier. Et nous appellerons ce point d'index HTML. Donc, pour se lancer rapidement avec le modèle index.html, nous allons utiliser le framework CSS appelé Bohmer. Donc si vous allez la bombarder, je documentation, aperçu commence. Et si nous faisons défiler tout le chemin vers le bas, nous avons une sorte de modèle de démarrage pour Obama. Donc, si nous sélectionnons et copions ou cliquez simplement sur copier ici, revenez à notre index.html et collez-le juste ici. Boehm était assez gentil en ce qu'il n'a vraiment besoin que de ce fichier CSS pour fonctionner, mais cela a été enregistré comme un peu de frappe. Donc si nous sauvegardons ce contrôle est de sauver. Et puis pour montrer ce modèle, si nous revenons au fichier app.js et nous maintenant de Flask besoin modèle de rendu. Et donc, au lieu de simplement retourner une chaîne, maintenant, nous voulons rendre modèle. Et quel modèle nous voulons rendre. Eh bien, c'est élevé index.html. Et donc si nous gardons ça, nous devrions obtenir un rechargement. Et si nous cliquons sur rafraîchir, nous voyons notre helloworld, mon premier site web avec Bulmer. Maintenant, si nous revenons à notre point d'index HTML et nous descendons à notre zone de corps. Et nous allons supprimer tout à l'intérieur de cette première section. Et nous allons commencer à écrire notre propre code ici. Donc, la première section va avoir notre image de profil
, puis juste notre nom et notre poignée Twitter. Donc, nous pouvons mettre une image en utilisant cette étiquette de figure. Et nous allons dire que c'est une image. Donc aussi un conteneur qui nous aide à centrer. Et puis nous voulons que ce soit 128 par 128. Et puis on va mettre une image ici. Et nous allons le faire échouer. Donc Bohmer vous donne beaucoup de cours très pratiques. Des choses comme est arrondie, ce qui vous évite vraiment d'avoir à écrire CSS, votre NCSS pour cela, vous allez en classe sont déjà, vous
donnera des images arrondies. Et puis pour notre source, eh bien, nous voulons une image de profil. Mais si vous n'en avez pas un à portée de main, disons si nous pouvons utiliser disons, image de
chat ou autre chose. Donc, je fais juste un lien vers votre image de profil ici. Nous allons utiliser quelque chose comme chat comme un service pour obtenir une image qui est de préférence carrée. Et si on regarde ça,
on peut voir qu' on a un poil de chat. Maintenant en dessous, nous voulons montrer sur le nom, spécifiez-le sur mon nom jambon. Et puis en dessous,
nous allons avoir un sous-titre, qui est votre handle twitter. On sauve ça. Retournez et rafraîchissez. Vous pouvez dire, voir que nous avons un titre et un sous-titre. Mais la première chose que nous voulons faire est que vous voulez envoyer à ces images ci-dessous. C' est donc agréable et facile à faire à Bohmer. Nous pouvons simplement dire a le texte centré, enregistrer, revenir en arrière et maintenant nous avons envoyé un texte. Et aussi si nous ne sommes pas satisfaits de cette taille, je veux dire, ça a l'air assez massif. Donc si je veux réparer ça et que les enfants doivent réparer
ça, ça doit être égal à égal. Donc oui, je n'aime pas ça. C' est si grand. Et c'est assez grand aussi. Ok, pour qu'on puisse dire quelque chose comme Dash est plein, sauve. Et ça rend ça un peu plus petit. Et puis nous pouvons jouer avec la taille de ceci aussi. Donc, je peux dire, est tiret six, dire sauver. Et cela semble un peu plus petit en plus Atlas mieux. Et il n'y a pas beaucoup d'écart entre notre image et notre titre. Donc, nous pouvons facilement réparer cela aussi bien parce que le baume est génial. Donc on peut juste faire un cheveu de marge inférieure, par exemple, plein. Sauvegardez ça, rafraîchissez, et nous avons un peu plus d'écart. Maintenant, cette subvention.
5. Modèle d'index - Boutons: Donc maintenant, nous voulons ajouter quelques liens. Ci-dessous. Un lien de contact et un autre lien peuvent être liés à n'importe quoi venir juste lien vers YouTube. Donc, mais que ces liens ressemblent à des boutons. Et nous avons quelques craintes couleurs par défaut dans Bohmer. Donc, je vais utiliser est info, ce qui lui donnera une couleur par défaut. Et je vais utiliser un bouton esquissé et un bouton arrondi. Donc le moment est que H ref n'ira nulle part. Mais on va arranger ça. Et nous voulons que ce soit un contact. Et je vais juste copier cette ligne parce que je veux que YouTube soit similaire, mais juste une couleur différente. Le danger que je connais est une couleur rouge qui convient à YouTube. Tout le reste est pareil. Et je vais juste appeler ça YouTube. Donc si je garde ça, jetez un oeil à ça. Donc maintenant, nous avons deux boutons côte à côte comme ça. C' est la fin de notre première section.
6. Modèle d'index - Section principale: Commençons par notre deuxième section maintenant. Maintenant, cette section va avoir deux colonnes. Donc je vais donner à ça une classe de colonnes pour le dire, pour dire aux bombardiers qu'on utilise des colonnes. Et nous voulons commencer par une colonne centrale qui occupe les trois cinquièmes de la page et est au centre. Donc on peut le faire assez facilement. Tout d'abord, nous devons dire que c'est une colonne. Ensuite, nous pouvons spécifier la largeur que nous voulons. Donc, nous voulons que ce soit les trois cinquièmes de la page. Et puis nous sommes allés au centre. Il va donc devoir être compensé d'un cinquième. Et je veux lui donner un arrière-plan et juste un fond assez clair. Et je viens de mettre des trucs ici pour le moment, sauf ça. Donc si on regarde ça, ne
dirait pas que ça marche ici. Parce que c'est, mais c'est en fait parce que les colonnes ne démarrent pas jusqu'
à ce que la largeur soit supérieure à 1024. Donc si je l'étire et que vous pouvez voir que notre colonne fonctionne réellement, et nous avons cette colonne centrale sous notre première section. Et donc ici, nous voulons mettre quelques colonnes que nous pouvons remplir avec des informations de profil. Alors faisons ça maintenant. Donc nous voulons un autre div, et cette fois nous voulons deux colonnes. Donc, nous disons à ce div qu'il va contenir des colonnes. Et nous allons avoir deux colonnes. Et nous voulons que chaque colonne occupe la moitié de l'espace. Donc nous disons que la colonne est la moitié. Et je le copie et le colle. Et encore une fois, nous avons nos deux colonnes. Et si nous gardons ça et
revenons en arrière, nous pouvons dire que nous avons deux colonnes prises moitié et moitié. Donc, dans notre première colonne, vous voulez créer une carte. Et je vais commencer à utiliser Emmett pour rendre ça un peu plus rapide. Où vous pouvez faire est que vous pouvez faire div. Onglet Point. Maintenant, nous allons réellement créer un div avec une classe de carte. C' est un joli petit raccourci. Et puis je veux div si le contenu actuel. Et puis je suis allé à une classe de titre. Et ça va être à propos et ensuite je veux juste payer l'étiquette. Et je vais juste dire pour l'instant à propos de moi, point-point. C' est notre première carte à l'intérieur de notre première colonne. Alors créons une autre carte qui sera identique en dessous de ça. Donc, je peux juste copier ça. Et je vais appeler cela intérêts afin que je veux donner à ce panier un peu d'arrière-plan afin que je puisse définir, disons a fond. Je vais lui donner une des couleurs que Balmer me donne. Alors jetons un coup d'oeil à ça. Donc, c'est bien. Mais comme vous pouvez le voir, ils
sont trop proches ensemble. Alors réparons ça maintenant. Donc, nous pouvons essentiellement mettre une marge autour de ces chiffres. Je vais dire m 3 x. Si je rafraîchis un peu de marge maintenant, d' accord, changeons juste un peu mon zoom. J' ai été zoomé juste pour rendre les choses un peu plus claires, mais nous ne voyons pas vraiment la page très bien. Alors faisons, nous allons, vous zoomez vers le bas à un 100%. Et donc vous pouvez voir toute la page maintenant un peu plus clair. Ok, alors remplissons la deuxième colonne maintenant. Donc ce que nous pouvons faire est de dire que nous sommes paresseux, c'est que nous pouvons juste copier dans cette colonne ici et juste coller sur le haut de cette colonne ici. Et au lieu de moi, je veux que ce soit l' expérience et l'éducation. Et faisons quelques arrière-plans pour celui-ci comme arrière-plan. Et puis je vais faire la lumière primaire. Je vais changer ça en voyant d'avertissement de fond. Et voyons à quoi ça ressemble. Donc ça a l'air plutôt bien sauf qu'on a ce genre de grand écart ici. Et la raison en est que nous
avons une sorte d'écart par défaut entre les deux premières colonnes. Alors essayons de régler ça. Donc ici, on peut dire que c'est l'écart plus I et II, on ne veut pas d'écart entre ces deux colonnes. Et puis si on rafraîchit les oméga moins, un peu mieux. Ok, donc on a un peu échafaudé la page de profil maintenant. Et maintenant, nous voulons extraire les données d' une feuille Google que nous allons utiliser pour remplir ces cartes. Donc, il est super facile de savoir si nous décidons que nous avons un autre intérêt. Si tu es comme moi, tu as un nouvel intérêt tous les deux jours. Au lieu de revenir en arrière et d'avoir à déployer la vue ou quoi que ce soit, vous pouvez simplement aller dans votre Google Sheet et ajouter l'intérêt ici et il va juste apparaître. Alors faisons-le ensuite.
7. Configuration des feuilles: Bon, nous voulons maintenant activer la lecture et l'écriture sur une feuille Google. Et nous allons utiliser G spread pour ça. Donc, si vous allez à g spread dot lire le docs dot passe en fait par la façon de le faire. Nous allons donc accéder à notre console Google Developers. Et si vous cliquez sur cette liste déroulante ici et créez un nouveau projet. Et puis je vais appeler ce profil de flasque. Et cliquez sur Créer. Et puis assurez-vous que le projet est sélectionné en entrant et en le sélectionnant. Et puis si nous activons les API et les services, et que nous voulons activer l'API Google Drive. Donc, si vous tapez Drive et que vous devriez trouver celui-ci. Puis cliquez sur Activer. Et puis si nous recherchons Sheets, cliquez sur l'API Google Sheets et activez celle-ci. Et puis si nous descendons aux informations d'identification et cliquez là, puis cliquez sur Créer des informations d'identification et choisissez le compte de service. Je vais appeler ce profil de flasque. Puis cliquez sur Créer un nom, cliquez sur
Continuer, puis cliquez sur Terminé. Et puis si nous cliquons sur Gérer les comptes de service. Et puis si nous cliquons sur ces trois points ici et choisissez Créer une clé. Et puis nous voulons choisir le type de clé de JSON et cliquez sur Créer. Et puis sauvegardez ça. Vous souhaitez ensuite copier le fichier JSON
que vous venez de télécharger dans votre dossier d'espace de travail. Et puis je vais juste renommer mon profil de tiret de flasque, comme ça. Et si vous regardez ça, vous devriez voir que vous
avez toutes ces informations là-dedans. Maintenant, ce que vous voulez faire, c'est que vous voulez copier cette adresse e-mail ici. Ensuite, vous voulez créer une feuille Google Sheet. Et j'ai appelé Mind Flask Dash profile. Et l'étape importante ici est que nous devons cliquer sur Partager dans coller dans cette adresse e-mail, puis cliquer dessus pour le choisir. Nous pouvons prendre maintenant à phi et nous voulons cliquer sur Partager. Donc maintenant, si nous revenons à l'application Python et dans les exigences, nous devons dire à Pip d'installer g spread. Donc, nous tapons ci propagation dans les exigences. Et puis cela s'assurera que cette ligne
installe ici le module G spread en utilisant PIP, qui est un gestionnaire de paquets pour Python. Et cela nous permettra donc de revenir dans notre application et d'importer la propagation G. Et puis en dessous,
nous pouvons configurer J spread avec le compte de service que nous venons créer en utilisant ce fichier de point de profil de flasque JSON. Et cela nous permettra d'ouvrir cette feuille de calcul. Maintenant, nous allons utiliser deux feuilles de calcul dans cette feuille de calcul. Le premier, nous allons juste garder les informations de profil. Et le second gérera la page des contacts. Quand on est là pour l'écrire. Et pour un test rapide pour voir si cela fonctionne, nous allons juste essayer
d'ajouter un contact factice à cette deuxième feuille. Donc, si nous gardons cela, et revenons à notre forme et ajoutons une nouvelle feuille en bas ici. Et renommons ces profils. Donc c'est la feuille à l'index 0 et les contacts comme ça. Et puis si nous retournons à notre page et la rafraîchissons, et c'est correct. En fait, nous n'avons pas ce module parce que nous
devons réellement reconstruire notre image pour que Pip puisse installer ce module supplémentaire. Alors revenons en arrière et faisons ça. Donc, si nous arrêtons ça aime et appuyez sur F5, cela va reconstruire l'image Docker. Et si nous revenons à notre feuille, nous devrions voir, en fonction du nombre de fois où vous avez cliqué actualiser, vous devriez voir que nous avons écrit avec succès sur notre feuille Google Sheet.
8. Profil des feuilles: Maintenant, si nous revenons à notre page de profil, nous allons vouloir avoir une ligne où nous spécifions le contenu. L' un pour les intérêts sur, l'expérience et l'autre pour l'éducation. Et si on rend ça un peu plus grand pour qu'on puisse taper quelque chose ici. Alors je vais juste dire mon nom. Walden, point de point, intéressant, point de point, point d'interrogation. Expérimenté et le personnel. Et si instruite que je peux épeler l'éducation. Aussi. J'ai de l'éducation. D' accord. Alors, allons les mettre dans notre page Web pour qu'on puisse les voir ici. Donc c'est assez simple à faire. Nous venons ici et nous allons mettre en place un objet de dictionnaire de profil. Et nous allons dire et nous allons utiliser le profil SH. Et nous voulons examiner une cellule spécifique dans cette feuille de calcul, qui est b1. Et nous voulons valoriser si cette cellule. Et copions ça. Et aux intérêts, Expérience et Éducation. Et ça allait être B2, B3, B4. Sauvegardez ça. Maintenant, nous devons passer cela à notre modèle. Donc, la façon dont nous faisons cela est en faisant profil égal. Donc, je vais modèle aura accès à cet objet de profil. Donc, si nous allons dans notre modèle maintenant et nous pouvons simplement trouver sont des cartes pertinentes. Et au lieu de me mettre comme ça, dans les doubles crochets bouclés du filet, on peut faire un point de profil. Copions ça. Intérêts de points périphériques par fichier profil d'expérience de point .edu. Donc maintenant, si nous revenons ici et faisons un rafraîchissement, comme vous pouvez le voir, nous avons maintenant les informations de Google Sheet directement dans notre page de profil. Donc, disons que si je veux étendre ça, je peux simplement entrer ici. Alors revenez ici pour vous rafraîchir. Et ça surgit immédiatement ici. Maintenant, il y a d'autres trucs cool que tu peux faire. Comme peut-être que vous pourriez vouloir envoyer à travers un style HTML afin que certains parfaitement possible. Donc je ne vais pas faire ça avec environ, mais faisons ça pour les autres. Donc, si je le fais, si je supprime les choses afin que je
n'ai pas de style existant et que je dois le fournir moi-même. Et ce que j'ai besoin de faire. A la fin de cela, je peux dire en sécurité. Et cela signifie que nous allons rendre le HTML parce que nous l'avons désigné comme HTML sécurisé. Et puis un moment, ça s'est bien passé parce que nous ne l'
avons pas fait, nous avons déjà le paragraphe ici, mais rien ici. Mais allons, je vais coller des trucs dans la feuille de calcul. Donc, si je colle dans du HTML que j'ai préparé plus tôt, donc je l'ai collé maintenant. Donc si je retourne ici et fais un rafraîchissement, comme vous pouvez le voir, nous avons des listes non ordonnées. Et vous pouvez réellement mettre n'importe quel type de HTML que vous voulez ici. Et cela sera reflété dans votre page Web.
9. Contacts: Ok, alors commençons à travailler sur notre formulaire de contact maintenant. Donc, si nous faisons un clic droit sur notre dossier de modèles, choisissez Nouveau fichier. Et nous appellerons ce point de contact HTML. Et nous allons juste tricher un peu et copier une partie du HTML de ce index.html. En fait, avant de le faire, réparons ce titre ici. Alors appelons ceci ma page de profil. Et copions tout cela en contact. Nous allons nous débarrasser de ces deux sections. Et nous appellerons cette page de contact. Ok, donc ça va juste avoir une section et ça va contenir un formulaire. Et cette forme va simplement se composer d'une colonne. Donc, configurez les colonnes ici. Et nous allons réellement faire une demande de poste sur notre page principale index.html lorsque nous cliquons sur le bouton Soumettre. Je vais vous montrer comment ça marche dans un peu. Alors mettons en place une seule colonne. Et nous voulons nous assurer que le texte est sur la gauche. Et ça va être, encore une fois les trois cinquièmes. Nous avons un décalage de 1 cinquième. Alors créons notre premier échec. Et un champ est juste un conteneur pour une étiquette et un contrôle. Et c'est dû en premier. Cela va être sur le champ de nom. Et donc le contrôle GRIS DE, qui est juste un
type d'entrée de texte. Et nous allons nommer ce nom d'entrée, ce
qui est important lorsque nous voulons y accéder dans le cadre de la demande de publication. Ok, créons un autre champ, qui sera le champ email. Maintenant, nous voulons étiqueter et je vais commencer à l'utiliser juste pour accélérer les choses. Donc, nous voulons entrer le contrôle. Et nous voulons nommer le même nom. Et notre dernier champ, qui va être je vais message a échoué. Tant d'étiquettes Nader. Qui est son message ? Et le contrôle va être une zone de texte car le nom du message peut supprimer cela. Et enfin, nous allons avoir un bouton qui dit envoyer un message. Et cela va
soumettre une demande de poste comme bientôt. Donc, si nous tapons contact ici, nous ne pouvons pas le trouver parce que je vais aller à la racine pour le moment. Alors réglons ça maintenant. Donc, si nous revenons à l'application dot fichier PY, et nous allons créer une route pour le contact. Donc, nous créons une fonction appelée contact, et cela va retourner le modèle HTML point de contact. Donc maintenant, si on se rafraîchit, on devrait voir notre formulaire ici. Et cela ne fonctionne pas tout à fait correctement parce que cela devrait être au centre. Alors voyons ce qui se passe là-bas. Ok, donc fait une légère erreur ici. Donc, au lieu de la FIAS décalage 1 cinquième nécessaire tiret là entre l'un et le cinquième. Donc si nous sauvegardons ça et revenons en arrière et faisons un rafraîchissement. Comme vous pouvez le voir maintenant, un formulaire de contact est centré correctement. Donc être assez agréable si elles envoient le bouton de message est allé à travers qu'ils forment et était une couleur légèrement plus agréable. Alors réglons ça maintenant. Nous en ferons une couleur bleue et nous la mettrons à pleine largeur. Et puis je pense que ça doit être un peu plus audacieux. Alors résolvons ça. Ok, donc je suis heureux avec ce formulaire de contact maintenant. Alors faisons-le pour que nous puissions accéder au formulaire de contact à partir du bouton. Nous devons donc modifier cette réf. H. Donc, la façon dont nous faisons cela dans Flask est que nous l'utilisons pour la fonction et nous lui transmettons réellement le nom de la fonction de contact, comme ça. Et puis mettons la référence H ici pour votre chaîne YouTube. Donc je vais juste coller ma chaîne Youtube ici. Donc si je clique sur contact maintenant, je devrais nous emmener pour entendre que nous n'avons aucun moyen de revenir. Alors réparons ça maintenant. Mais vérifions simplement que YouTube fonctionne aussi bien. Oui, c'est bien. Mettons-nous en fin de compte pour qu'on puisse revenir si on ne veut pas envoyer de message. Donc, si nous revenons à notre point de contact HTML, et nous allons juste mettre un autre champ en haut ici. Et ce sera un lien de suppression de classe. Et encore une fois, nous utiliserons les quatre. Mais cette fois, c'est la fonction à domicile. Et nous voulons que notre bouton de suppression se ferme bouton pour être grand. Et nous voulons tirer sur la droite. Si nous gardons ça. Et maintenant, nous avons un bouton de fermeture ici, sur
lequel nous pouvons cliquer, et cela nous ramènera à notre page d'accueil. Ok, si nous allons à un formulaire de contact et nous cliquons sur envoyer un message, nous obtiendrons cette méthode non autorisée parce que nous essayons de faire une demande de poste à notre fonction à domicile. Et si nous jetons un oeil à cette fonction maison, il a juste une application par défaut qui ne gère que les requêtes get. Donc, la façon dont nous corrigeons cela est de spécifier les méthodes que nous pouvons utiliser. Et vous voulez dire que nous pouvons faire une méthode post et la méthode get. Donc maintenant, si nous sauvegardons cela et cliquez ici, il est maintenant heureux et revient ici et a fait une demande de poste ici, mais où nous ne l'avons pas géré. Alors traitons cette demande maintenant. Donc, à partir de Flask, nous voulons importer des demandes afin que nous puissions traiter différents types de demandes. Et ce que nous voulons faire, c'est que vous voulez dire si la méthode de requête C'est égal à poster. Et nous voulons vraiment très bien faire cette ligne ici. Alors prenons ça, coupez-le parce qu'on va le faire, on veut le faire ici. Mais au lieu d'ajouter Bob, à chaque fois, nous voulons modifier ce qui vient ici de notre formulaire. Et donc nous obtenons deux formulaires en faisant un formulaire de requête point. Et puis nous spécifions le nom du contrôle. Donc, si je copie ça, collez-le ici et nous savons que nous envoyons pour le nom, l'e-mail et le message. Alors disons ça. Tout d'abord, revenons à notre feuille de calcul et revenons aux contacts. Et nous avons beaucoup de Bob dedans. Supprimons Bob. Retournons à la page. Prenez un contact. Et si vous cliquez sur Envoyer le jetpack, Jamnagar. Nous avons joint les informations provenant du formulaire.
10. Déploiement: Déployons notre site maintenant. Et puisque nous utilisons Google Sheets, pourquoi ne pas déployer notre site en utilisant Google Cloud pour si vous allez à cloud dot google.com avant slash SD argile docs installer. Vous souhaitez donc installer le SDK Cloud pour votre système. Donc, je suis sur Windows, donc je téléchargerais et exécuterais ce programme d'installation du SDK Cloud. Suivez donc ces instructions ici et obtenez ce SDK Cloud installé. Ensuite, nous reviendrons sur la console Google Cloud Platform. Et encore une fois à l'intérieur d'un projet de profil de flacon, nous allons vouloir rechercher le registre de conteneurs. Donc, si vous cliquez dessus et que nous voulons activer l'API Container Registry. Donc, si nous cliquons ici, c'est activé le registre des conteneurs, mais nous n'avons pas de référentiels là-haut pour le moment. Donc c'est vide. Si on touche rafraichir, on est allés dire quoi que ce soit ici. C'est très bien. Donc, si nous revenons au code VS
maintenant, maintenant dans notre fichier docker, nous devons changer cette ligne pour le rendre un peu plus heureux pour Google Cloud. Donc, si nous commentons cette ligne et alors je vais juste coller dans la ligne qui est nécessaire. Donc, c'est assez similaire, sauf qu'il a besoin de ce port ici et il spécifie également les travaux et les threads à travers que nous voulons utiliser. Donc je vais laisser ça à l'écran une seconde. Vous pouvez toujours mettre la vidéo en pause et le taper. Alors sauvegardons ces troll s. Donc, tout d'abord, nous devons nous assurer que nous sommes dans le bon projet G Cloud. Donc, si nous faisons G-Cloud config set projet et que notre projet est appelé profil de tableau de bord Flask. Alors construisons l'image Docker. Donc, nous pouvons faire une image docker construite. Et nous devons l'étiqueter avec un nom très spécifique, qui est g x0 point slash fiole profil. Et ceci doit être le nom de votre projet. Et puis je vais juste appeler mon profil de tableau de bord de flasque image aussi. Et je vais juste utiliser la balise 1. Ça peut être n'importe quoi. Et j'ai oublié de mettre les points à la fin. Donc tu dois faire de l'espace. Et dire que nous construisons le répertoire de travail. Ok, donc ça a construit l'image. Maintenant, nous voulons faire un docker. Pousser vers l'avant
flacon profil barre oblique flasque profil, étiquette
carillon 1. Donc ça a poussé notre image à leur train de posit. Nous pouvons vérifier cela en allant ici et en cliquant sur Actualiser. Et nous avons notre image de profil de fil dentaire là-dedans. Et maintenant, nous pouvons faire G-Cloud. Courir. Déployer. bord, image de tableau de bord, barre oblique g, flacon par fichier, profil de tableau de bord de flasque, boucle sur Guam. Et nous voulons choisir l'option un nuage autour du nom de service entièrement géré est correct, donc je vais juste appuyer sur Entrée. Google Cloud R1 n'est donc pas encore activé sur ce projet. Nous voulons donc l'activer et recommencer. Alors disons oui à ça. Donc, cela a activé cela avec succès. Et nous voulons choisir où nous voulons le déployer. Je vais juste dire le USA Est. Je vais dire oui parce que c'est une page Web publique. Et donc maintenant, nous devrions être en mesure d'aller à cette application a et C sont en cours d'exécution. Et puis vous allez, nous avons déployé la page Web sur Google Cloud ram. Et la bonne chose à propos de Google Cloud run est qu'il vous donne une page Web HTTPS entièrement fonctionnelle. Donc, vous n'avez plus à faire de configuration pour que cela fonctionne. Donc c'est plutôt sympa. Et puis, bien sûr, vous pouvez toujours configurer un domaine personnalisé ici aussi.
Morgan Page, Web & Game Developer
