Transkripte
1. Einführung: In diesem Kurs erstellen wir eine coole Profilseite, die so aussieht. Nun ist das super coole Ding an dieser Profilseite, dass es von Google Sheets angetrieben wird. Also habe ich hier ein Google-Blatt, dass, wenn ich dieses Blatt bearbeite, wir diese Webseite ändern werden. Jetzt wird diese Webseite auf Google Cloud R1 bereitgestellt, und der Kurs deckt das auch ab. Also lassen Sie uns einfach beweisen, dass das funktioniert. Nehmen wir an, ich beschließe plötzlich, dass ich fünf Jahre Erfahrung in MongoDB habe. Das kann ich einfach ändern. Geh hierher zurück. Und es sagt, zwei Jahre Erfahrung hier. Aber wenn ich auf Aktualisieren klicke, habe ich
plötzlich fünf Jahre Erfahrung. Und lasst uns hier etwas ernster werden und das sagen. Ja, Def Lay ging zu einem Menschen, der Stadt. So wie so. Kommen Sie zurück, klicken Sie auf Aktualisieren. Und ich, ich bin definitiv auf eine Universität gegangen. Die andere coole Sache daran ist, dass wir hier eine Kontaktseite haben. Und in unserem Google-Blatt haben wir
wieder dieses Kontaktarbeitsblatt. Und im Moment haben wir hier nur einen Kontakt. Aber wenn jemand anderes mit uns in Kontakt treten will, sagen
wir, dass Fred Blocks. Und er ist Fred bei Gmail und er will eine Website erstellen. Wir können ihm da draußen auf jeden Fall helfen. Und so wird er eine Nachricht senden, kommt zurück auf unsere Homepage. Und dann, wenn wir zurück zu unserem Arbeitsblatt gehen, können
Sie sehen, dass Fred uns über unser Google Sheet kontaktiert hat, was super cool ist. Wir werden Kohle-Technologien wie Python verwenden, drei Flaschen, Bomber, Docker, Google Container Registry, Google Cloud laufen. Offensichtlich Google Blätter. Du wirst in diesem Kurs viel lernen. Und dieser Kurs ist nur eine Stunde lang. Sie werden auf viele neue Technologien zu berühren und bekommen
einen Vorgeschmack auf das, was mit moderner Webanwendungsentwicklung möglich ist. Ich hoffe, Sie entscheiden, den Kurs zu nehmen. Und danke fürs Zuschauen.
2. Softwarevoraussetzungen: Für diesen Kurs müssen Sie die folgende Software installieren. Wenn Sie zu Docker.com gehen, wird der
Schrägstrich gestartet. Sie können Docker Desktop für Ihr bestimmtes Betriebssystem installieren. Sie machen Versionen für Windows, Mac und Linux. Sobald Sie Docker installiert haben,
dann, wenn Sie zu Code Punkt Visual Studio.com gehen und Visual Studio-Code erneut für Ihre IRS installieren. Sie machen Versionen für Windows, Mac und Linux. Sobald Sie diese beiden Softwareteile installiert haben, können Sie den Kurs starten.
3. Hallo Welt neu geladen.: Okay, also wenn Sie Visual Studio-Code öffnen und zu Datei gehen und Ordner öffnen, und jetzt werden wir einen neuen Ordner erstellen und ich werde es Flask-Profil nennen. Klicken Sie auf Ordner auswählen. Und wir werden unsere Haupt-Python-App-Datei erstellen. Klicken Sie mit der rechten Maustaste und wählen Sie Neue Datei. Und nennen wir diesen AP Punkt. Und bevor wir weiter gehen, wollen
wir sicherstellen, dass wir eine Erweiterung namens Docker haben. Also, wenn wir hier nach Lehre suchen, und es sollte an der Spitze hier sein. Wenn Sie also darauf klicken und sicherstellen, dass Sie das installieren, habe
ich es bereits installiert. Sobald Sie das getan haben, schließen Sie das und gehen Sie zurück zu den Dateien. Und wenn Sie nun F1 drücken, erhalten
Sie diese Befehlszeile, in der Sie nach bestimmten Befehlen suchen können. Und wenn ich nach Docker suche, bekomme
ich eine ganze Liste von Optionen. Und das, was wir wollen, ist das Hinzufügen von Docker-Dateien zum Workspace. Also, wenn Sie darauf klicken, und dann wird dies einige Docker-Dateien für uns Gerüst. Und so wollen wir die Python Flask eins. Also, wenn wir darauf klicken, und unser Einstiegspunkt ist diese App Punkt p y. also lasst uns darauf klicken. 5 Tausend ist in Ordnung für den Hafen. Und ja, wir könnten auch unsere Docker-Compose-Dateien einbeziehen. Und jetzt ist das Gerüst aus all den Docker-Dateien, die wir eigentlich brauchen. Also, das ist irgendwie praktisch. Also haben wir unsere Anforderungen. Also, das ist Flasche und Einhorn. Wir haben unsere Docker-Datei, die verwendet wird, um unser Image zu erstellen, und ein paar Docker-Compose-Dateien. Und vor allem unter VS-Code haben
wir hier tatsächlich einige Dateien, die beim Debuggen helfen. So können wir jetzt unseren Code
innerhalb des Docker-Containers mit VS Code debuggen , was sehr cool ist. Jetzt wollen wir einige kleine Änderungen an dieser Aufgabe Punkt JSON-Datei machen, um uns
zu ermöglichen , Hot Reloading ein zu tun, wenn wir eine Bearbeitung in dieser app.js Datei machen. Also, das ist ziemlich einfach zu tun. Also müssen wir hier unten unter ENV kommen, wir müssen Kolben hinzufügen, ANOVA unterstreichen. Und wir wollen angeben, dass wir uns im Entwicklungsmodus befinden. Das bedeutet, dass Flask seinen Webserver jedes Mal
neu starten wird , wenn wir eine Änderung an unserer Datei vornehmen. Und dann unter diesem in V-Gruppe, müssen
wir einen Volume-Abschnitt erstellen. Und so müssen
wir hier einen Containerpfad angeben, sich in einem App-Ordner in unserem Container befindet. Und der lokale Pfad, eigentlich der Arbeitsbereichsordner ist, in dem wir uns befinden. Und dann ist die andere kleine Änderung, die wir tun müssen, dass wir diese beiden Zeilen hier entfernen
müssen. Weil wir den Debugger verwenden möchten und wir heiße Neuladungen durchführen möchten. Und wenn wir S kontrollieren, um zu retten. Und nur damit du weißt, warum ich weiß, dass dies Schrägstrich App ist, weil wenn wir in unserer Docker-Datei schauen, können
wir sehen, dass wir unser Arbeitsverzeichnis zwei Schrägstrich App dort gesetzt haben. Deshalb muss dies Schrägstrich App sein. Nun, wenn wir zu unserer app.js zurückgehen, lassen Sie uns anfangen, Flask Implementierung zu erstellen. Dies ist also ziemlich vorbildlicher Code zum Erstellen einer Flask-App. Okay, also mal sehen, ob das funktioniert. Also, wenn wir jetzt F5 drücken oder Ausführen wählen und anfangen zu debuggen, und ich werde nur F5 treffen. Und das wird verschwinden und unseren Docker-Container erstellt. Und wie Sie sehen können, haben wir unsere Helloworld hier zu arbeiten. Jetzt lassen Sie uns einfach überprüfen, ob das heiße Nachladen funktioniert. Also, wenn ich hier etwas ändern und ein paar Ausrufezeichen am Ende setzen und sicher. Wir sollten sagen, dass wir jetzt den Webserver neu laden. Und wenn wir eine Aktualisierung machen, bekommen
wir diese Ausrufezeichen am Ende. Also haben wir
hier eine ziemlich schöne Entwicklungsumgebung , die ziemlich schnell gerüstert wurde.
4. Index – Ein Start: Das nächste, was wir tun möchten, ist tatsächlich einen Vorlagenordner und eine Vorlage einzurichten. Also lasst uns das jetzt machen. Also, wenn wir mit der rechten Maustaste und tun neue Ordner, und wir erstellen einen Ordner namens Vorlagen. Und dann werde ich in diesem Templates-Ordner eine neue Datei erstellen. Und wir werden diesen Index Punkt HTML nennen. So schnell aufstehen und mit index.html Vorlage laufen, werden
wir CSS-Framework namens Bohmer verwenden. Also, wenn Sie gehen, um es zu bombardieren, ich Dokumentation, Übersicht starten. Und wenn wir den ganzen Weg nach unten scrollen, haben
wir eine Art Starter-Vorlage für Obama. Also, wenn wir auswählen und kopieren oder einfach hier kopieren klicken, kommen Sie zurück zu unserer index.html und fügen Sie es einfach hier ein. Boehm war sehr nett darin, dass es wirklich nur diese eine CSS-Datei braucht, um zu funktionieren, aber das wurde als ein bisschen Tippen gespeichert. Also, wenn wir diese Kontrolle speichern, ist zu speichern. Und dann, um diese Vorlage zu zeigen, wenn wir zu app.js Datei zurückkommen und wir jetzt von Flask brauchen Rendervorlage. Und so, anstatt nur eine Zeichenfolge zurückzugeben, wollen wir
jetzt Vorlage rendern. Und welche Vorlage wir rendern wollen. Nun, es ist hoch index.html. Und wenn wir das speichern, sollten
wir eine Neuladung bekommen. Und wenn wir auf Aktualisieren klicken, sehen
wir unsere Helloworld, meine erste Website mit Bulmer. Nun, wenn wir zurück zu unserem Index Punkt HTML und wir kommen runter zu unserem Körperbereich. Und wir werden alles in diesem ersten Abschnitt löschen. Und wir werden anfangen, hier unseren eigenen Code zu schreiben. Der erste Abschnitt wird also unser Profilbild haben und dann nur unseren Namen und Twitter-Griff. So können wir in ein Bild
mit diesem Figur-Tag setzen . Und wir werden sagen, das ist ein Bild. So auch ein Container, der uns hilft, Zentrieren. Und dann wollen wir, dass es ein 128 mal 128 wird. Und dann stellen wir hier ein Bild rein. Und wir werden es geerdet haben. Bohmer gibt Ihnen also viele wirklich praktische Klassen. Dinge wie abgerundet ist, was Sie wirklich erspart, CSS zu schreiben,
Ihre NCSS dafür,
Sie gehen in Ihre NCSS dafür, die Klasse sind bereits, wird Ihnen abgerundete Bilder geben. Und dann für unsere Quelle, na ja, wir wollen ein Profilbild. Aber wenn Sie noch keinen zur Hand haben, sagen
wir, wenn wir sagen können, Katzenbild oder so. Also mache ich hier einfach einen Link zu deinem Profilbild. Wir verwenden so etwas wie Katze als Service, um ein Bild zurückzubekommen, das vorzugsweise quadratisch ist. Und wenn wir uns das ansehen, können
wir sehen, dass wir ein Katzenhaar haben. Jetzt unter diesem, wollen wir auf Namen zeigen, geben Sie es auf meinem Namen Schinken. Und dann darunter werden
wir einen Untertitel haben, dein Twitter-Handle ist. Das retten wir. Geh zurück und aktualisiere dich. Sie können sagen, sehen, dass wir einen Titel und einen Untertitel haben. Aber das erste, was wir tun wollen, ist, dass Sie zu diesen unter Bild senden wollen. Das ist also schön und einfach in Bohmer zu tun. Wir können einfach sagen, hat Text zentriert, speichern, zurück und jetzt haben wir einen Text gesendet. Und auch wenn wir mit dieser Größe nicht zufrieden sind, sieht das ziemlich massiv aus. Also, wenn ich das reparieren will und Kinder das reparieren müssen, muss das A gleich sein. Also ja, das gefällt mir nicht. Das ist so groß. Und das ist auch ziemlich groß. Okay, also können wir so etwas wie „Ist Dash voll“ sagen, sparen. Und das macht das etwas kleiner. Und dann können wir auch mit der Größe spielen. Also kann ich sagen, ist Strich sechs, sagen speichern. Und das sieht etwas kleiner aus, weiter Atlas besser. Und es gibt keine große Lücke zwischen unserem Image und unserem Titel. So können wir das auch leicht beheben, weil Balsam genial ist. Also können wir einfach einen unteren Rand Haare sagen, voll. Speichern Sie das, aktualisieren Sie, und wir haben ein bisschen mehr Lücke. Jetzt dieser Zuschuss.
5. Index – Buttons: Also, jetzt möchten wir ein paar Links hinzufügen. Hier unten. Ein Kontaktlink und ein weiterer Link kann auf alles verlinkt werden kommen nur auf YouTube. Also, aber lassen Sie uns diese Links wie Schaltflächen aussehen. Und wir haben einige Ängste Standardfarben in Bohmer. Also werde ich verwenden ist info, die ihm eine Standardfarbe geben wird. Und ich werde einen umrissenen Knopf und einen abgerundeten Knopf benutzen. Der Moment ist, dass H ref nirgendwohin gehen wird. Aber wir werden das reparieren. Und wir wollen, dass dies Kontakt ist. Und ich werde nur diese Zeile kopieren, weil ich möchte, dass YouTube ähnlich ist, aber nur eine andere Farbe. Gefahr, die ich zufällig weiß, ist eine rote Farbe, die YouTube passt. Alles andere gleich. Und ich werde das nur YouTube nennen. Also, wenn ich das speichere, sieh dir das an. Also jetzt haben wir zwei Tasten nebeneinander wie so. Das ist also das Ende unseres ersten Abschnitts.
6. Index – Hauptabschnitt: Lassen Sie uns jetzt mit unserem zweiten Abschnitt beginnen. Jetzt wird dieser Abschnitt zwei Spalten haben. Also werde ich diesem eine Klasse von Säulen geben, um es zu sagen, um Bomber zu sagen, dass wir Säulen verwenden. Und wir wollen eigentlich mit einer zentralen Spalte beginnen , die drei Fünftel der Seite einnimmt und sich in der Mitte befindet. So können wir das ziemlich leicht machen. Zunächst einmal müssen wir sagen, dass dies eine Spalte ist. Dann können wir die Breite angeben, die wir wollen. Wir wollen also, dass es drei Fünftel der Seite sind. Und dann gingen wir in die Mitte. Es muss also um 1 Fünftel versetzt werden. Und ich möchte ihm einen Hintergrund und nur einen ziemlich hellen Hintergrund geben. Und ich habe für den Moment gerade etwas Müll hier reingesteckt, das zu retten. Wenn wir uns das ansehen, sieht
es nicht so aus, als würde es hier funktionieren. Denn das ist, aber das liegt eigentlich daran, dass Spalten nicht
eintreten , bis die Breite über 1024 ist. Also, wenn ich es dehne und Sie sehen können, dass unsere Kolumne tatsächlich funktioniert, und wir haben diese zentrale Spalte unter unserem ersten Abschnitt. Und so innerhalb hier wollen wir ein paar
Spalten einfügen , die wir mit einigen Profilinformationen ausfüllen können. Also lasst uns das jetzt machen. Also wollen wir ein anderes div, und dieses Mal wollen wir zwei Spalten. Also sagen wir diesem div, dass es Spalten enthalten wird. Und wir werden zwei Spalten haben. Und wir wollen eigentlich, dass jede Spalte die Hälfte des Platzes einnimmt. Also sagen wir, Spalte ist halb. Und ich kopiere das und füge das ein. Und wieder, dann haben wir unsere zwei Säulen. Und wenn wir das speichern und zurückgehen, können
wir sagen, dass wir zwei Spalten haben, die halb einhalb einhalb eingenommen haben. In unserer ersten Spalte möchten
Sie also eine Karte erstellen. Und ich werde Emmett verwenden, um das ein bisschen schneller zu machen. Wo Sie tun können, ist, dass Sie div tun können. Registerkarte „Punkt“. Jetzt lassen Sie uns tatsächlich ein div mit einer Klasse von Karte erstellen. Es ist eine ziemlich nette kleine Abkürzung. Und dann möchte ich div, wenn der aktuelle Inhalt. Und dann ging ich zu einer Klasse von Titel. Und das wird gehen, und dann will ich einfach nur einen Tag bezahlen. Und ich werde nur für den Moment über mich sagen, Punkt-Punkt-Punkt. Das ist also unsere erste Karte in unserer ersten Spalte. Also lassen Sie uns eine andere Karte erstellen, die unten identisch sein wird. Also kann ich das einfach kopieren. Und ich werde diese Interessen nennen ,
so dass ich diesem
Wagen ein wenig einen Hintergrund geben möchte , damit ich einstellen kann, sagen, hat Hintergrund. Ich gebe ihm eine der Farben, die Balmer mir gibt. Also schauen wir uns das mal an. Also, das ist in Ordnung. Aber wie Sie sehen können, sind
diese zu nah beieinander. Also lasst uns das jetzt reparieren. So können wir im Grunde eine Marge um diese Zahlen setzen. Ich sage M drei X wenn ich jetzt ein wenig Marge aktualisiere, okay, lasst uns einfach meinen Zoom etwas ändern. Ich wurde vergrößert, nur so machen die Dinge ein bisschen klarer, aber wir sehen die Seite nicht wirklich sehr gut. Also lassen Sie uns machen, lassen Sie uns, Sie zoomen auf 100%. Und so kann man die ganze Seite jetzt ein bisschen klarer sehen. Ok, also füllen wir jetzt die zweite Spalte aus. Was wir also tun können, ist zu sagen, dass wir faul sind,
ist, dass wir einfach diese Spalte hier kopieren
und einfach über den oberen Rand dieser Spalte hier einfügen können . Und statt über mich möchte
ich, dass dies Erfahrung und Bildung ist. Und lasst uns ein paar Hintergründe
dafür als Hintergrund machen. Und dann werde ich Primärlicht machen. Ich werde das in Hintergrundwarnlicht umwandeln. Und mal sehen, wie das aussieht. Das sieht also ziemlich gut aus, außer dass wir hier eine große Lücke haben. Und der Grund dafür ist, dass
wir eine Art Standardlücke zwischen den ersten beiden Spalten haben. Also lasst uns das einfach klären. Also hier drin, können wir sagen, ist Lücke plus I und II, wir wollen keine Lücke zwischen diesen beiden Spalten. Und dann, wenn wir Omega weniger auffrischen, etwas besser. Okay, also haben wir jetzt ein Gerüst aus der Profilseite gemacht. Und jetzt wollen wir Daten aus
einem Google-Blatt ziehen , mit dem wir diese Karten ausfüllen werden. Das macht es also super einfach, wenn wir uns entscheiden, dass wir ein anderes Interesse haben. Wenn du wie ich bist, bekommst du jeden zweiten Tag ein neues Interesse. Anstatt zurück zu gehen und den Anblick oder irgendetwas bereitstellen zu müssen, können
Sie einfach in
Ihr Google Sheet gehen und das Interesse an hier hinzufügen und es wird einfach auftauchen. Also lasst uns das als nächstes tun.
7. Blätter einrichten: Richtig, wir wollen nun das Lesen und Schreiben auf einem Google-Tabelle ermöglichen. Und wir werden G Spread dafür verwenden. Also, wenn Sie zu g Spread Punkt gehen, lesen Sie den Docs Dot tatsächlich durch, wie dies zu tun ist. Also gehen wir zu unserer Google Developers Konsole. Und wenn Sie hier auf dieses Dropdown-Feld klicken und ein neues Projekt erstellen. Und dann werde ich dieses Kolbenprofil nennen. Und klicken Sie auf Erstellen. Sie dann sicher, dass das Projekt ausgewählt ist, indem Sie in gehen und es auswählen. Und dann, wenn wir APIs und Dienste aktivieren, und wir wollen die Google Drive-API aktivieren. Also, wenn Sie in Drive eingeben und das finden sollten. Und klicken Sie dann auf Aktivieren. Und dann, wenn wir nach Tabellen suchen, klicken Sie auf die Google Sheets API und aktivieren Sie diese. Und dann, wenn wir zu den Anmeldeinformationen gehen und dort klicken, und klicken Sie dann auf Create Credentials und wählen Sie Service-Konto. Ich werde dieses Kolbenprofil nennen. Klicken Sie dann auf „Namen erstellen“, klicken Sie
einfach auf „Weiter“ und dann auf „Fertig“. Und dann, wenn wir auf Service-Konten verwalten klicken. Und dann, wenn wir hier auf diese drei Punkte klicken und Key erstellen wählen. Und dann möchten wir den Schlüsseltyp von JSON auswählen und auf Erstellen klicken. Und dann speichern Sie das. Sie möchten dann die JSON-Datei, die Sie gerade heruntergeladen haben, in Ihren Arbeitsbereichsordner kopieren. Und dann werde ich einfach mein Flask Dash-Profil umbenennen, so. Und wenn du es dir ansiehst, solltest du sehen, dass du all diese Informationen da drin
hast . Nun, was Sie eigentlich tun möchten, ist, dass Sie diese E-Mail-Adresse hier kopieren möchten. Und dann möchten Sie ein Google Sheet erstellen. Und ich habe Mind Flask Dash Profil genannt. Und der wichtige Schritt hier ist, dass wir auf
Teilen in diese E-Mail-Adresse einfügen klicken müssen , und klicken Sie dann darauf, um es auszuwählen. Wir können jetzt zu phi nehmen und wir wollen auf Teilen klicken. Also, wenn wir jetzt zur Python App und in Anforderungen zurückkehren, müssen
wir Pip sagen, g Spread zu installieren. So tippen wir in ci verteilt in Anforderungen. Und dann wird das sicherstellen, dass diese Zeile hier das G Spread-Modul mit PIP
installiert, das ein Paketmanager für Python ist. Und so wird es uns ermöglichen, wieder in unsere App zu gehen und G Spread zu importieren. Und dann unten hierkönnen
wir J Spread
mit dem Service-Konto einrichten, können
wir J Spread
mit dem Service-Konto einrichten das wir gerade mit
dieser Kolbenprofilpunkt-JSON-Datei
erstellt haben. Und das wird es uns
ermöglichen , diese Tabelle zu öffnen. Jetzt werden wir zwei Arbeitsblätter in dieser Tabelle verwenden. Der erste, wir halten nur Profilinformationen fest. Und der zweite wird die Kontaktseite behandeln. Wenn wir es schreiben müssen. Und für einen schnellen Test, um zu sehen, ob das funktioniert, werden
wir nur versuchen, diesem zweiten Blatt
einen Dummy-Kontakt hinzuzufügen . Also, wenn wir das speichern, und gehen wir zurück zu unserer Form und fügen Sie hier unten ein neues Blatt hinzu. Und lassen Sie uns dieses Profil umbenennen. Das ist also das Blatt bei Index 0 und Kontakte wie so. Und dann, wenn wir zurück zu unserer Seite gehen und sie aktualisieren, und das ist richtig. Eigentlich haben wir dieses Modul nicht, weil wir tatsächlich unser Image neu erstellen müssen , damit Pip dieses zusätzliche Modul installieren kann. Also gehen wir zurück und machen das. Wenn wir also aufhören, dass Likes und F5 drücken, wird das Docker-Image neu erstellt. Und wenn wir zurück zu unserem Blatt gehen, sollten wir sehen,
je nachdem, wie oft Sie auf Aktualisieren geklickt haben, sollten
Sie sehen, dass wir erfolgreich in unser Google Sheet geschrieben haben.
8. Sheets: Wenn wir nun zu unserer Profilseite zurückkehren, wollen
wir eine Zeile haben, in der wir den Inhalt angeben. Eine für Interessen auf, für Erfahrung und eine für Bildung. Und wenn wir das etwas größer machen, damit wir hier etwas eingeben können. Also sag ich einfach meinen Namen. Walden, Punktpunkt, interessant, Punkt-Punkt-Punkt, Fragezeichen. Erfahrene und das Personal. Und so gebildet kann ich Bildung buchstabieren. Auch. Ich habe Bildung. Ok. Also lasst uns diese in unsere Webseite ziehen, damit wir sie hier sehen können. Also, das ist ziemlich einfach zu tun. Wir kommen hier runter und wir werden ein Profilwörterbuchobjekt einrichten. Und wir werden sagen, und wir werden SH Profil verwenden. Und wir wollen in bestimmte Zelle in diesem Arbeitsblatt suchen, die b1 ist. Und wir wollen, wenn diese Zelle zu bewerten. Und lassen Sie uns das kopieren. Und zu Interessen, Erfahrung und Bildung. Und das würde B2, B3, B4 sein. Speichern Sie das. Jetzt müssen wir dies an unsere Vorlage weiterleiten. Die Art und Weise, wie wir das tun, ist, indem wir Profil gleich Profil machen. Also werde ich Vorlage Zugriff auf dieses Profilobjekt haben. Also, wenn wir jetzt in unsere Vorlage gehen und wir können einfach finden, sind relevante Karten. Und anstatt mich so zu machen, in den doppelten geschweiften Klammern des Netzes können
wir
in den doppelten geschweiften Klammern des NetzesProfilpunkt machen. Lassen Sie uns das kopieren. Periphere Punkt-Interessen pro Datei Punkt Erfahrung profile.edu. Also jetzt, wenn wir hier zurückkommen und eine Aktualisierung machen, wie Sie sehen können, haben
wir jetzt die Informationen von Google Blatt direkt in unsere Profilseite. Sagen Sie, wenn ich das erweitern möchte, kann
ich einfach hier reingehen. Also komm zurück, um mich zu erfrischen. Und das taucht sofort hier auf. Jetzt gibt es noch ein paar andere coole Sachen, die du tun kannst. Wie vielleicht möchten Sie vielleicht über
einige HTML-Styling senden , so dass einige perfekt möglich sind. Also werde ich das nicht mit etwa machen, aber lass uns das für die anderen machen. Also wenn ich das tue, wenn ich Dinge entferne, so hatte ich
kein vorhandenes Styling und muss es selbst liefern. Und was ich tun muss. Am Ende kann
ich sagen, sicher. Und das bedeutet, dass wir
das HTML rendern , weil wir es als sicheres HTML bezeichnet haben. Und dann ein Moment ging es gut aus, weil wir nicht, wir haben bereits den Absatz hier, aber nichts hier. Aber lasst uns, ich füge ein paar Sachen in die Tabelle ein. Also, wenn ich etwas HTML einfüge, habe ich früher vorbereitet, also habe ich das jetzt eingefügt. Also, wenn ich hier zurück gehe und eine Aktualisierung mache, wie Sie sehen können, haben wir einige ungeordnete Listen. Und Sie können tatsächlich jede Art von HTML, die Sie wollen, hier einfügen. Und es wird sich in Ihrer Webseite widerspiegeln.
9. Kontakte: Okay, also beginnen wir jetzt mit der Arbeit an unserem Kontaktformular. Wenn wir also mit der rechten Maustaste auf unseren Vorlagenordner klicken, wählen Sie Neue Datei. Und wir werden diesen Kontakt Punkt HTML nennen. Und lassen Sie uns einfach ein wenig betrügen und einige der HTML aus dieser index.html kopieren. In der Tat, bevor wir das tun, lasst uns einfach diesen Titel hier reparieren. Also lassen Sie uns das meine Profilseite nennen. Und lassen Sie uns das alles einfach in Kontakt kopieren. Wir werden diese beiden Abschnitte loswerden. Und wir rufen diese Kontaktseite an. Okay, also wird das nur
einen Abschnitthaben einen Abschnitt und es wird ein Formular enthalten. Und diese Form wird nur aus einer Spalte bestehen. Also richten Sie hier Spalten ein. Und wir werden tatsächlich eine Post-Anfrage an unsere Hauptseite
index.html tun , wenn wir auf die Schaltfläche Senden klicken. Also zeige ich dir, wie das in ein bisschen funktioniert. Also lassen Sie uns eine einzelne Spalte einrichten. Und wir wollen sicherstellen, dass der Text auf der linken Seite ist. Und das wird wieder drei Fünftel sein. Wir haben einen Offset von 1 Fünftel. Also lasst uns unser erstes gescheitert erstellen. Und ein Feld ist nur ein Container für ein Label und ein Steuerelement. Und es ist zuerst das entsprechende Etikett. Dies wird auf dem Namensfeld sein. Und so grau zu steuern, die nur ein
Eingabetyp von Text ist. Und wir werden diesen Eingabennamen nennen, was wichtig ist, wenn wir darauf als Teil der Post-Anfrage zugreifen möchten. Okay, lassen Sie uns ein weiteres Feld erstellen, das das E-Mail-Feld sein wird. Jetzt wollen wir etikettieren und ich werde es benutzen, nur um die Dinge zu beschleunigen. Also wollen wir die Steuerung eingeben. Und wir wollen das Gleiche nennen. Und unser letztes Feld, das sein wird, ich werde Nachricht fehlgeschlagen. So viele Nader Label. Wer ist seine Botschaft? Und Steuerung wird
ein Textbereich sein , weil der Name der Nachricht dies löschen kann. Und schließlich werden wir einen Knopf haben, besagt
, dass Nachricht senden. Und das wird eine Post-Anfrage wie bald
einreichen. Also, wenn wir Kontakt hier eingeben, können
wir es nicht finden, weil ich dafür noch rootten werde. Also lasst uns das jetzt klären. Also, wenn wir zurück zu App Punkt PY-Datei gehen, und lassen Sie uns
eine Route für den Kontakt erstellen . So erstellen wir eine Funktion namens Kontakt, und dies wird die Kontakt-Punkt-HTML-Vorlage zurückgeben. Also, wenn wir jetzt aktualisieren, sollten
wir unser Formular hier sehen. Und es funktioniert nicht ganz richtig, weil dies in der Mitte sein sollte. Mal sehen, was da los ist. Okay, also hat hier einen kleinen Fehler gemacht. Also anstelle von ISAF Offset 1 Fünftel benötigt Bindestrich zwischen dem einen und dem fünften. Also, wenn wir das speichern und zurückgehen und eine Aktualisierung durchführen. Wie Sie jetzt sehen können, ist ein Kontaktformular korrekt zentriert. Also ganz nett sein, wenn sie Nachricht senden Taste ging über sie bilden und war etwas schönere Farbe. Also lasst uns das jetzt klären. Wir machen es in eine blaue Farbe und wir setzen es auf volle Breite. Und dann denke ich, es muss nur ein bisschen mutiger sein. Also lasst uns das lösen. Okay, also bin ich jetzt mit diesem Kontaktformular zufrieden. Also lassen Sie es uns machen, damit wir über die Schaltfläche zum Kontaktformular gelangen können. Also müssen wir diese H ref ändern. Die Art und Weise, wie wir dies in Flask tun, ist, dass
wir dies für die Funktion verwenden und es tatsächlich den Namen der Kontaktfunktion übergeben, so. Und dann lassen Sie uns einfach die H-Referenz hier für Ihren YouTube-Kanal einfügen. Also werde ich nur meinen Youtube-Kanal hier einfügen. Also, wenn ich jetzt Kontakt klicke, sollte
ich uns mitnehmen, um zu hören, dass wir keine Möglichkeit haben, zurück zu kommen. Also lasst uns das jetzt reparieren. Aber lassen Sie uns einfach überprüfen, ob YouTube auch funktioniert. Ja, das ist gut. Also lassen Sie uns hier kurz schließen, damit wir zurückkommen können, wenn wir keine Nachricht senden wollen. Also, wenn wir zurück zu unserem Contact dot HTML, und wir werden einfach ein anderes Feld an der Spitze hier setzen. Und das wird ein Link von Klassenlöschung sein. Und wieder werden wir alle vier benutzen. Aber dieses Mal ist es die Home-Funktion. Und wir möchten, dass unser Lösch-Button geschlossen wird, um groß zu sein. Und wir wollen nach rechts rüber ziehen. Wenn wir das retten. Und jetzt haben wir hier einen Close-Button
, auf den wir klicken können, und es wird uns zurück zu unserer Homepage führen. Okay, wenn wir zu einem Kontaktformular gehen und wir auf Nachricht senden klicken, erhalten
wir diese Methode nicht erlaubt, weil wir versuchen,
eine Post-Anfrage an unsere Home-Funktion zu tun . Und wenn wir einen Blick auf diese Home-Funktion werfen, hat
es nur eine Standard-App, die nur Get-Anfragen verarbeitet. Die Art und Weise, wie wir das beheben, ist, dass wir die Methoden angeben, die wir verwenden können. Und Sie möchten sagen, dass wir eine Post-Methode und die Get-Methode
tun können . Also jetzt, wenn wir das speichern und hier klicken, ist
es jetzt glücklich und geht zurück zu hier und hat eine Post-Anfrage hier gemacht, aber wo wir es nicht behandelt haben. Also lasst uns diese Anfrage jetzt bearbeiten. Also von Flask möchten wir Anfragen importieren, damit wir verschiedene Arten von Anfragen bearbeiten können. Und was wir tun möchten, ist, dass Sie sagen wollen, ob die Anforderungsmethode Es ist gleich zu posten. Und wir wollen diese Linie hier sehr gut machen. Also nehmen wir das, schneiden wir es, weil wir es wollen, wir wollen es hier unten machen. Aber anstatt Bob anzuhängen, wollen
wir jedes Mal das aufrüsten, was aus unserer Form hierher kommt. Und so erhalten wir zwei Formulare, indem wir ein Anforderungspunktformular machen. Und dann geben wir den Namen des Steuerelements an. Wenn ich das also kopiere, fügen Sie das hier ein und wir wissen, dass wir den Namen,
die E-Mail und die Nachricht senden . Also lassen Sie uns das sagen. Gehen wir zunächst zu unserer Tabellenkalkulation zurück und gehen in Kontakte. Und wir haben eine Menge von Bob drin. Lassen Sie uns Bob löschen. Gehen wir zurück zur Seite. Holen Sie sich einen Kontakt. Und wenn du auf „Jetpack senden“ klickst, Jamnagar. Wir haben die Informationen, die aus dem Formular zurückkommen, angehängt.
10. Bereitstellung: Lassen Sie uns unsere Website jetzt bereitstellen. Und da wir Google Sheets verwenden, warum nicht unsere Website mit Google Cloud bereitstellen, wenn Sie gehen zu Cloud dot google.com vorwärts slash SD Ton docs installieren. Sie möchten also das Cloud SDK für Ihr System installieren. Also bin ich unter Windows, also würde ich dieses Cloud SDK-Installationsprogramm herunterladen und ausführen. Befolgen Sie also diese Anweisungen hier und lassen Sie das Cloud SDK installieren. Dann kommen wir zurück zur Google Cloud Platform Konsole. Und wieder in einem Flask Profilprojekt werden
wir nach der Container Registry suchen wollen. Also, wenn Sie auf diese klicken und wir wollen die Container Registry API aktivieren. Wenn wir also hier klicken, ist
das die Containerregistrierung aktiviert, aber wir haben derzeit keine Repositories dort oben. Das ist also leer. Wenn wir auf „Erfrischen“ klicken, gingen
wir hier alles sagen. Das ist in Ordnung. Wenn wir also jetzt zu VS-Code zurückkommen,
jetzt in unserer Docker-Datei, müssen
wir diese Zeile tatsächlich ändern, um sie ein wenig glücklicher für Google Cloud zu machen. Also, wenn wir diese Zeile
auskommentieren und dann werde ich nur die Zeile einfügen, die benötigt wird. Es ist also ziemlich ähnlich, außer dass es diesen Port
hier benötigt und auch die Arbeiten und Threads spezifiziert, die wir verwenden möchten. Also lasse ich das für eine Sekunde auf dem Bildschirm. Sie können das Video immer pausieren und einfach eingeben. Und so lassen Sie uns diese Troll s speichern. Also zuerst müssen wir sicherstellen, dass wir im richtigen G Cloud Projekt sind. Also, wenn wir G-Cloud Config Set Projekt und unser Projekt wird Flask dash Profil genannt. Also lassen Sie uns Docker-Image erstellen. So können wir Docker-Image erstellen. Und wir müssen es mit einem sehr spezifischen Namen markieren, der g x0 Punkt Schrägstrich Kolben Profil ist. Und das muss der Name Ihres Projekts sein. Und dann werde ich auch mein Bild Flachmann Armaturenprofil nennen. Und ich werde nur Tag eins verwenden. Kann alles sein. Und ich vergaß, die Punkte am Ende zu setzen. Also musst du Platz machen. Und um zu sagen, dass wir das Arbeitsverzeichnis erstellen. Okay, das ist also das Bild gebaut. Also, jetzt wollen wir einen Andocker machen. Schieben Sie nach vorne
Schrägkolben Profil Schrägkolben Profil, Glockenschild eins. Das hat also unser Image in ihren Post-Zug geschoben. Wir können das überprüfen, indem wir hier nach oben gehen und auf Aktualisieren klicken. Und wir haben unser Zahnseiden-Profilbild da drin. Und jetzt können wir G-Cloud machen. Lauf. Bereitstellen. Bindestrich, Bindestrich Bild, g Punkt Schrägstrich, Kolben pro Datei, Schrägkolben Bindestrich Profil, Locke auf Guam. Und wir wollen Option wählen, eine Cloud um vollständig verwalteten Service-Name ist richtig, also werde ich nur drücken Enter. Google Cloud R1 ist also für dieses Projekt noch nicht aktiviert. Also wollen wir es aktivieren und es erneut versuchen. Sagen wir ja dazu. So hat das erfolgreich aktiviert. Und wir wollen wählen, wo wir es bereitstellen möchten. Ich werde nur sagen, die USA Ost. Ich werde ja dazu sagen, weil es eine öffentliche Webseite ist. Und so sollten wir jetzt in der Lage sein, zu diesem gehen und C laufen Anwendung. Und dann gehen Sie, wir haben Web-Seite zu Google Cloud ram bereitgestellt. Und das Gute an Google Cloud läuft ist, dass es Ihnen eine voll funktionsfähige HTTPS-Webseite gibt. Sie müssen also nicht mehr einrichten, um das zum Laufen zu bringen. Also, das ist ziemlich nett. Und dann können Sie natürlich auch hier immer eine benutzerdefinierte Domain einrichten.
Morgan Page, Web & Game Developer
