5202

ein Blog über technische Fragen zu Blogger

Kontaktformular für Blogger auf Google App Engine hosten

von

Wie angekündigt - nach der Alpha Version von meinem Formular, heute ein voll einsatzfähiges Script, auf Google App Engine gehostet.

Zu Demozwecken ist das Formular in einer Google Drive Seite eingebaut -- das funktioniert natürlich auch in jeder anderen Seite, etwa in Blogger.

Noch mal die Vorteile: Dieses Formular könnt ihr an jedes Layout anpassen. Auf Google App Engine sind bis zu 5000K Mails/Monat frei. Der ganze Spass ist frei und kostenlos. Das Formular auf der Demoseite ist voll einsatzfähig - probiert es aus!

Tutorial

Alles in allem solltet ihr das Script in 10min zum laufen bringen - da aber doch einige ungewöhnlich Sachen dabei sind, erkläre ich es a bisserl ausführlicher ... falls trotzdem was unklar ist, einfach nachfragen - wenn nötig, mache ich noch ein Screencast dazu.

Vorbereitung: Blogger Dev

Um ein Script auf der Google App Engine ausführen, müsst ihr euch zuerst auf der Google Entwicklerseite anmelden und zwar mit eurem normalen Google Account.
Wenn ihr das gemacht habt, landet ihr automatisch auf der My Applications Seite, wo ihr mit dem Schalter Create Application eine neue Anwendung erstellen könnt. Das ist die Anwendung, in der später euer Kontaktformular laufen wird.

Ihr werdet bei der ersten Anwendung aufgefordert, euer Konto mittels SMS oder Telefon zu bestätigen - Google speichert eure Telefonnummer nicht, sondern möchte nur sicher gehen, das ihr Menschen und keine Maschinen seid. Bestätig also eure Konto.

Anschließend gebt ihr euren neuen Anwendung eine ID und einen Titel - die ID muss einmalig sein ... probiert notfalls mit ein paar kreativen Namen rum. Die Web-URL von eurer Anwendung lautet www.eure-ID.appspot.com. Merkt euch die URL für später ... wenn ihr jetzt die Seite aufruft, kommt logischerweise nur eine 404 Fehlermeldung.

App Engine SDK

Zum testen und laden des Scripts braucht ihr entweder eine Eclipse Laufzeitumgebung oder ihr holt euch das Software Developer Kit für Google App Engine.

Ihr findet auf der Download Seite eine SDK für alle möglichen Sprachen und Systeme ... ihr braucht die SDK für _Python_ [weil das Script in Python geschrieben ist] und logischerweise für euer Betriebssytem.

Ladet das richtige Kit runter und startet den Launcher ... dabei könnt ihr praktisch nichts falsch machen :).

Download & Konfiguration

Soweit die Vorbereitung - fangen wir mit dem Spass an ... und zwar ladet ihr als erstes das Script und entpackt es.

Anschließend holt ihr euch einen Kaffe, Tee whatever ... macht euch locker und dann gehen wir die Konfiguration von dem Script an.

Mit Doopellklick öffnet ihr die Donwload Datei und dann mit einem _echten_ Editor [Notepad ++ o.ä.] die Datei app.yaml. Nehmt auf _keinen Fall_ WORD oder so was dazu ... Python ist eine Sprache, wo es auf jedes Leerzeichen ankommt und eine Textverarbeitung macht Hackfleisch aus dem Code.

Ihr habt die app.yaml erfolgreich geöffnet - schreibt nun die erste Zeile um:

application: your-app-name

Statt your-app-name setzt ihr eure ID vom ersten Schritt ein - beachtet das Leerzeichen. Die genaue ID braucht ihr später zum hochladen.

Ihr sucht nun die Datei mit diesem Pfad: gae-kontakt/boilerplate/config.py. Das ist die Konfigurations Datei - in dieser Datei schaut ihr nach diese Zeile:

# contact page email settings
'contact_sender' : "your.name@gmail.com",
'contact_recipient' : "your.name@gmail.com",

Statt your.name@gmail.com setzt ihr die E-Mail Adresse von dem Google Konto ein, mit dem ihr euch auf der App Engine angemeldet habt. Aus Sicherheitsgründen könnt ihr von keinem anderen Konto E-Mails senden ... als Empfäger könnt ihr eine beliebige Adresse angeben, wie weit das Sinn macht, eure beste Freundin eure Kontaktmails zu senden, sei dahingestellt :).

Die ganze Geschichte ist übrigens die GAE Boilerplate und in der habt ihr unendlich viele weitere Möglichkeiten ... ignoriert für's erste alles sonstige.

Testen

Zeit für einen ersten Test - startet euren SDK Launcher und ruft das Script mit 'run' über den Pfad wo-auch-immer-ihr-das-hingepackt-habt/gae-kontakt auf. Bei grünem Licht könnt ihr mit Klick auf 'Browse' über localhost:8080 die Startseite öffnen ... 'Gratuliere - es funktioniert!'

Mit Klick auf 'Kontakt' [oben rechts] kommt ihr nun eeeendlich auf die Kontaktformular Seite. Das läuft lokal auf einem Server, der von der SDK bereitgestellt wird - d.h. ihr könnt jetzt das Formular anpassen und seht auf dieser Seite sofort 'live' jede Änderung.

Formular anpassen

Unter gae-kontakt/boilerplate/templates/contact.html findet ihr das Layout zu eurer Kontaktseite - ich habe oben in die Seite eine <style> Anweisung geschrieben, die mehr oder weniger alles auf der Seite anspricht ... Hintergrund, senden Knopf, Größe der einzelnen Felder und so weiter.

Ich gehe jetzt mal davon aus, das bis hierher eh nur noch derjenige weitergelesen hat, dem so a bisserl Code nicht schreckt ... dürfte kein Problem sein, das anzupassen, oder?

Mit STRG + R könnt ihr übrigens auf localhost:8080/contact jede Änderung auf der Seite sofort sehen.

Hochladen

Ihr habt eure Kontaktseite den eigenen Wünschen angepasst - jetzt wird's Zeit, das Script auf den Server zu packen. Ihr nehmt dazu den Launcher und mit Deplay ladet ihr das Script automatisch auf die App Engine hoch - passt nur auf, dass ihr euch mit dem richtigen Konto anmeldet.

Beim Hochladen wird automatisch eine Logkonsole geöffnet, die euch erzählt, was der Launcher gerade tut - hat alles geklappt, meldet der Launcher Vollzug.

Seht euch nun eure App auf www.eure-ID.appspot.com an ... hat alles geklappt, kommt ihr mit Klick auf 'Kontakt' auf eure neue Kontaktseite. Probiert das Formular aus ... ihr solltet sofort ein Mail bekommen. Wenn das klappt, seit ihr mit dem Aufsetzen des Scripts fertig - Gratulation!

Einbinden im Blog

Letzter Schritt - wie fügt ihr nun das Formular in euren Blog ein? Ganz einfach, über ein iFrame. Dazu geht ihr auf der Seite, in der ihr euer neues Formular einfügen wollt, in den HTML Modus des Editors und schreibt:

<iframe width="980" height="630" style="overflow-y: hidden; border: none" scrolling="no" src="http://eure-ID.appspot.com/contact/" seamless></iframe>

That's all! Ihr könnt gegebenenfalls noch die Breite und Höhe des iFrames anpassen.

Wenn das Formular mit eurem Layout nicht harmoniert, müsst ihr zurück auf gae-kontakt/boilerplate/templates/contact.html Seite, dort die CSS umschreiben und dann das Script neu hochladen.

Weitere Posts

Anmerkungen

Was halltet ihr von dem Script? Ich habe so lange nach einer Möglichkeit gesucht, ein Kontaktformular wirklich 'frei' anpassen zu können - wer Verbesserungsvorschläge oder Ideen hat ... immer her damit!