Erstellen Sie Ihre eigenen Web-Apps mit Stamplay

Web-Apps sind eine großartige Möglichkeit, mit Ihren Kunden zu interagieren. Für Nicht-Web-Entwickler können sie jedoch eine wirklich schwierige Aufgabe sein. Zum Glück für diese Benutzer haben die Leute bei Stamplay das Ziel verfolgt, die Erstellung von Web-Apps mit ihrem Service zu einem Kinderspiel zu machen, der den Web-App-Entwicklungsprozess automatisiert, indem Sie einen einfachen Schritt für Schritt beim Erstellen von Apps durchführen.

Mit Stamplay können Web-Apps erstellt werden, die sich mit Diensten wie Facebook, Google, Dropbox und vielen anderen Apps integrieren lassen. Das ist schön, denn wenn Sie Stamplay verwenden, müssen Sie nicht die APIs für die jeweiligen Dienste finden. Ziehen Sie sie einfach hinein.

In diesem Tutorial zeige ich Ihnen, wie Sie mit Stamplay Ihre erste von sozialen Netzwerken betriebene App von Grund auf erstellen können.

Erstellen Sie Ihre erste Web-App

Erstellen einer neuen Web-App über den Startbildschirm.

Um zu beginnen, gehe zur Stamplay-Website und erstelle ein Konto, indem du auf das grüne klickst Jetzt anfangen Taste, die sich in der Mitte des Bildschirms befindet. Sie können sich dann entweder über Ihre E-Mail-Adresse oder Ihr Google-Konto für ein Konto anmelden.

Einen Namen für Ihre neue App auswählen.

Sie werden jetzt in Ihre App-Bibliothek aufgenommen. Auf dieser Seite können Sie Ihre alten Apps anzeigen und mit der Erstellung neuer Apps beginnen. Um eine neue App zu erstellen, blicken Sie in die rechte obere Ecke des Bildschirms und klicken Sie auf das blaue App erstellen Taste. In einem Popup-Fenster werden Sie aufgefordert, Ihre neue App zu benennen. Nachdem Sie den Namen Ihrer App bestätigt haben, gelangen Sie auf die Seite Komponenten.

Komponenten

Auf der Komponentenseite können Sie auswählen, wie Ihr Benutzer mit Ihrer neuen Web-App interagieren soll. In diesem Beispiel werde ich eine Anwendung erstellen, mit der sich ein Benutzer bei Facebook anmelden, ein einfaches Formular ausfüllen und eine E-Mail an seinen Posteingang senden kann.

Auswählen eines Anmeldedienstes für Ihre App. 

Klicken Sie zum Starten auf das blaue Nutzer Schaltfläche oben im Fenster. Um ein Facebook-Login zu Ihrer App hinzuzufügen, klicken Sie auf blau hinzufügen Knopf von der rechten Seite des Fensters; In einem Popup-Fenster werden Sie aufgefordert, einen Anmeldedienst auszuwählen. Für dieses Tutorial wähle ich die Option Facebook.

Hinzufügen von Komponenten zu Ihrer Web-App in Stamplay.

Sie werden nun aufgefordert, eine App-ID und ein App-Geheimnis anzugeben. Diese können auf der Devleoper-Seite von Facebook erworben werden und dienen dazu, Ihre App mit den Servern von Facebook zu identifizieren.

Klicken Sie jetzt auf das Blau Plus Schaltfläche, die sich rechts vom Benutzerlogo befindet. Jetzt können Sie Ihrer App weitere Komponenten hinzufügen. Da wir unseren Benutzern eine E-Mail senden möchten, klicken Sie auf Email Möglichkeit. Klicken Sie dann auf Plus erneut, um zum Auswahlbildschirm zurückzukehren. Klicken Sie dieses Mal auf bilden Taste.

Felder für Ihr Formular erstellen.

Wenn Sie in die Mitte des Bildschirms blicken, können Sie Ihr Formular einrichten, indem Sie ihm einen Namen geben und Felder hinzufügen. Um Felder hinzuzufügen, sehen Sie am unteren Rand des Fensters unter Felder Header. Verwenden Sie die Feldname Textfeld, um Ihrem Feld einen Namen zu geben. Rechts neben diesem Textfeld befindet sich ein Dropdown-Menü, in dem Sie gefragt werden, welchen Feldtyp Sie hinzufügen möchten.

In diesem Tutorial werde ich das Formular verwenden, um die Benutzer zu fragen, welches Smartphone-Betriebssystem sie verwenden. Um dies zu tun, werde ich den Benutzer überprüfen lassen, welches Telefon er verwendet, also werde ich wählen Radio knopf aus dem Dropdown-Menü.

Sie werden nun zu einem Menü geführt, in dem Sie die Optionen Ihres Formulars eingeben können. Im Falle von Optionsfeldern können Sie die Schaltflächennamen zur Liste hinzufügen. Für mein Formular füge ich der Liste die Namen der Smartphone-Betriebssysteme hinzu.

Wenn Sie einen Teil Ihres Formulars ausfüllen möchten, stellen Sie sicher, dass Sie die Option deaktivieren erforderlich Ein- / Ausschalter auf die auf Position. Um Ihrer App mehrere Formulare hinzuzufügen, klicken Sie auf + Formular hinzufügen Schaltfläche oben im Fenster.

Aufgaben

Konfigurieren Sie die E-Mail, die an die Benutzer Ihrer App gesendet wird. 

Nachdem Sie Ihr Formular erstellt haben, ist es an der Zeit, das Formular zu verwenden Aufgaben Registerkarte, um die E-Mail zu konfigurieren, die wir an unseren Benutzer senden werden. Klick in die Aufgaben Knopf von der Seitenleiste. Schauen Sie dann in die obere rechte Ecke des Fensters und klicken Sie auf Neue Aufgabe Taste.

Task in Stamplay konfigurieren

Sie können jetzt Ihre Trigger- und Aktionskomponente auswählen. Ihre Trigger-Komponente bewirkt, dass die Aktionskomponente etwas unternimmt. Unter jeder Komponente können Sie auswählen, wie diese Komponente ausgelöst wird. Sie können beispielsweise Ihre Trigger-Komponente als Benutzer festlegen und die Aktionskomponente auslösen, wenn sie sich bei Facebook anmeldet.

Für dieses Beispiel setze ich die Trigger-Komponente auf Nutzer und die Aktionskomponente zu Email. Außerdem mache ich es so, wenn sich der Benutzer bei der App anmeldet, wird eine E-Mail an ihren Posteingang gesendet.

Filtern, an wen Ihre App eine E-Mail sendet. 

Klicke auf das Blau fortsetzen und Sie finden eine Kopfzeile mit der Bezeichnung Benutzer abstimmen. Sie können diesen Abschnitt verwenden, um den User-Trigger fein einzustellen. Wenn Sie beispielsweise die E-Mail nur an den Benutzer senden möchten, wenn ihre E-Mail mit Google Mail-Konten endet, können Sie dies durch Klicken auf Filter hinzufügen Taste und Auswahl Email aus der Dropdown-Liste Select a Property und (Text) endet mit aus dem Dropdown-Menü. Das kannst du dann Geben Sie "@ gmail.com" ein. in das Bedingungsfeld und klicken Sie auf die Schaltfläche blau plus Schaltfläche, um diesen Filter zu Ihrer App hinzuzufügen.

Konfigurieren Sie die E-Mail, die an die Benutzer Ihrer App gesendet wird. 

Sie werden nun aufgefordert, Ihre E-Mail-Optionen einzurichten. Schauen Sie zur rechten Seite des Fensters unter Login-Auslösedaten Header - Sie werden einige Optionen bemerken. Bei diesen Optionen handelt es sich um Informationen, die über Ihren Nutzer bei der Facebook-Anmeldung erfasst werden. Um diese Informationen in Ihrem Formular zu verwenden, klicken Sie einfach in ein Textfeld und dann auf die entsprechenden Informationen auf der rechten Seite des Fensters. 

Sie können auch manuell Informationen in Ihre E-Mail-Adresse eingeben, was Sie für Ihre E-Mail-Adresse und Ihren E-Mail-Text tun möchten. Wenn Sie Ihre E-Mail-Adresse eingerichtet haben, klicken Sie auf Aufgabe erstellen Taste, die sich am unteren Rand des Menüs befindet.

Layout

Nachdem Sie Ihre Aufgaben erstellt haben, können Sie das Front-End Ihrer App erstellen. Klicken Sie dazu in das Layout Registerkarte in der Seitenleiste und blicken Sie in die obere rechte Ecke des Fensters. Klicken Sie auf die Schaltfläche mit der Bezeichnung Thema wechseln.

Auswählen eines neuen Designs für Ihre App.

Sehen Sie sich im Themenauswahlfenster die enthaltenen Themen an. Wenn Sie einen gefunden haben, den Sie mögen, bewegen Sie den Mauszeiger über das Thema und klicken Sie auf Demo anzeigen Schaltfläche, um eine Vorschau des Designs anzuzeigen. Wenn Sie entscheiden, dass Ihnen Ihr neues Design gefällt, klicken Sie auf Theme installieren Taste.

Anpassen Ihres Layouts

Schauen Sie nun auf die linke Seite des Fensters und klicken Sie auf Seiten Dropdown-Menü. Nun werden Ihnen alle HTML-Dateien angezeigt, aus denen Ihre Web-App besteht. Wenn Sie Ihrer App Inhalte hinzufügen möchten, können Sie die HTML-Dateien entsprechend bearbeiten.

In diesem Artikel verwende ich das Standard-Stamplay-Design und habe die Startseite (index.html) bearbeitet, um Beispieltext zu entfernen.

Hinzufügen der Facebook Login-Schaltfläche

Facebook-Login-Div-Tags kopieren. 

Nun ist es an der Zeit, das Frontend unserer Web-App so zu bearbeiten, dass die Facebook-Anmeldeschaltfläche auf der Startseite angezeigt wird. Schauen Sie sich dazu die linke Seite des Stamplay-Fensters an und klicken Sie auf das Dropdown-Menü Widgets. Klicken Sie dann auf auth.login.hbs.html und blicken Sie in Richtung Mitte der Seite.

Schauen Sie in Richtung des Stamplay-Fensters auf das HTML-Dokument. Scannen Sie dieses Dokument, bis Sie eine Zeile finden, die mit beginnt Facebook Login und kopiere es. Öffnen Sie dann das index.html-Dokument unter Seiten Dropdown-Menü.

Erstellen Sie auf der Seite index.html eine neue

Fügen Sie den Facebook-Login-Code ein und schließen Sie das

Etikett (

). Schauen Sie nun in die obere rechte Ecke des Stamplay-Fensters und klicken Sie auf Gehe zu App Taste. Ihre Web-App wird jetzt in einer neuen Registerkarte angezeigt.

Facebook-Login-Div-Tags kopieren. 

Klicken Sie in Ihrer App auf die neue Login-Schaltfläche und melden Sie sich mit Ihrem Facebook-Konto an. Sie sollten dann Ihren Facebook-Namen und Ihr Profilbild in der rechten oberen Ecke der App sehen. Überprüfen Sie außerdem das mit Ihrem Facebook-Konto verknüpfte E-Mail-Konto. Wenn Sie es richtig konfiguriert haben, werden Sie feststellen, dass die zuvor eingerichtete E-Mail in Ihrem Posteingang gelandet ist.

Hinzufügen eines Formulars zu Ihrer App

Hinzufügen der Formular-Div-Tags zu Ihrer App.

Erinnern Sie sich an das zuvor erstellte Formular? Es ist Zeit, dies dem Frontend hinzuzufügen. Klicken Sie dazu in das Widgets Dropdown-Menü und klicken Sie auf die Schaltfläche form.display.hbs.html Schaltfläche, um zum HTML-Code Ihres Formulars gebracht zu werden. Schauen Sie nach oben im Menü und kopieren Sie das erste div-Tag Ihres index.html-Dokuments.

Wir sind jedoch noch nicht ganz fertig. Wenn Sie zum Ende des Tags schauen, wird ein Bereich angezeigt, in den Sie die ID Ihres Formulars eingeben können, die beim Erstellen der Tabelle festgelegt wurde. Wenn Sie sich Ihrer Tabellen-ID nicht sicher sind, können Sie diese durch Klicken auf die Schaltfläche anzeigen Tabelle Taste in der Komponenten Registerkarte und in Richtung der Mitte des Fensters.

Testen Sie Ihre App

Nun, da Ihre App einsatzbereit ist, testen Sie sie, indem Sie sie in einem neuen Tab öffnen. Sie können die URL Ihrer Anwendung abrufen, indem Sie in klicken die Einstellungen Registerkarte in der linken Seitenleiste und unter der Domains Header. Kopieren Sie diese URL und fügen Sie sie in eine neue Registerkarte ein. Machen Sie einen Wirbel!

Die Admin-Registerkarte

Sobald Ihre App live ist, können Sie zur Administrator Registerkarte, um Antworten auf Ihr Formular anzuzeigen. Klicken Sie in die Registerkarte, und klicken Sie im Dropdown-Menü auf Bilden Taste. In der Mitte des Fensters können Sie die Antworten zu Ihrem Formular und den E-Mail-Adressen anzeigen, die vom Facebook-Konto des Benutzers bereitgestellt werden. Außerdem, wenn Sie auf die Schaltfläche klicken Benutzer Mit der Schaltfläche können Sie den Namen und die E-Mail-Adresse aller Benutzer anzeigen, die Ihre App verwendet haben.

Und das ist ein Wrap!

Sie können jetzt mit Stamplay einfache Web-Apps für die Interaktion mit Ihren Benutzern und Kunden erstellen. Verlinken Sie sich in den Kommentaren mit Ihrer neuen Web-App. Oder teilen Sie uns mit, wenn Sie Hilfe bei der Verwendung von Stamplay benötigen!