Maak uw eigen webapps met Stamplay

Web-apps zijn een geweldige manier om met uw klanten te communiceren. Voor niet-webontwikkelaars kunnen ze echter een heel moeilijke taak zijn om te maken. Gelukkig voor die gebruikers wilden de mensen van Stamplay het maken van web-apps een fluitje van een cent maken met hun service die het webapp-ontwikkelingsproces automatiseert door je een eenvoudig stapsgewijs proces te geven bij het maken van apps.

Stamplay kan worden gebruikt om web-apps te maken die integreren met services zoals Facebook, Google, Dropbox en tal van andere apps. Dit is goed, omdat je bij het gebruik van Stamplay niet naar buiten hoeft te gaan om de API's voor elke betreffende service te vinden - je sleept hem gewoon in.

In deze zelfstudie laat ik u zien hoe u uw eerste app met sociale netwerken kunt maken, helemaal opnieuw, met behulp van Stamplay.

Uw eerste web-app maken

Een nieuwe web-app maken vanaf het startscherm.

Ga om te beginnen naar de website van Stamplay en maak een account door op de groene te klikken Begin nu knop die zich in de richting van het midden van het scherm bevindt. U kunt zich vervolgens aanmelden voor een account met behulp van uw e-mailadres of uw Google-account.

Een naam kiezen voor je nieuwe app.

Je wordt nu naar je app-bibliotheek gebracht. U kunt deze pagina gebruiken om zowel uw oude apps te bekijken als het maken van nieuwe apps te starten. Als u een nieuwe app wilt maken, kijkt u in de rechterbovenhoek van het scherm en klikt u op de blauwe knop Maak een app knop. Er verschijnt een pop-upvenster waarin u wordt gevraagd uw nieuwe app een naam te geven. Nadat u de naam van uw app heeft bevestigd, wordt u naar de pagina Componenten gebracht.

Components

Op de pagina met componenten kunt u kiezen hoe u wilt dat uw gebruiker met uw nieuwe web-app communiceert. Voor dit voorbeeld ga ik een applicatie maken waarmee een gebruiker kan inloggen met Facebook, een eenvoudig formulier kan invullen en een e-mail kan sturen naar hun inbox.

Een aanmeldingservice selecteren voor uw app. 

Om te beginnen, klik op het blauw Gebruiker knop vanaf de bovenkant van het venster. Als u Facebook-aanmelding bij uw app wilt toevoegen, klikt u op blauw toevoegen knop aan de rechterkant van het venster; er verschijnt een pop-upvenster waarin u wordt gevraagd om een ​​inlogservice te kiezen. Voor deze zelfstudie selecteer ik de Facebook-optie.

Componenten aan uw webapp toevoegen in Stamplay.

U wordt nu gevraagd om een ​​app-ID en een app-geheim op te geven. Deze kunnen worden verkregen op de devleoper-pagina van Facebook en worden gebruikt om uw app te identificeren met de servers van Facebook.

Klik nu op het blauwe plus knop die zich rechts van het gebruikerslogo bevindt. U kunt nu meer componenten toevoegen aan uw app. Omdat we een e-mail naar onze gebruikers willen sturen, klik je op de e-mail keuze. Klik vervolgens op de plus opnieuw indrukken om weer naar het selectiescherm te worden gebracht. Klik deze keer op het formulier knop.

Velden maken voor uw formulier.

Kijk naar het midden van het scherm, je kunt je formulier instellen door het een naam te geven en velden toe te voegen. Om naar velden toe te voegen, kijk naar de onderkant van het venster onder de Fields header. Gebruik de Veldnaam tekstvak om uw veld een naam te geven. Aan de rechterkant van dit tekstvak vindt u een vervolgkeuzemenu met de vraag welk type veld u wilt toevoegen.

Voor deze zelfstudie gebruik ik het formulier om gebruikers te vragen welk besturingssysteem voor smartphones ze gebruiken. Om dit te doen, laat ik de gebruiker controleren welke telefoon ze gebruiken, dus ik ga kiezen Radio knop uit het vervolgkeuzemenu.

U komt nu in een menu waarin u de opties van uw formulier kunt invoeren. In het geval van keuzerondjes kunt u uw knopnamen toevoegen aan de lijst. Voor mijn formulier voeg ik de namen van smartphone-besturingssystemen toe aan de lijst.

Als je een deel van je formulier wilt invullen, zorg dan dat je de verplicht aan / uit schakelaar naar de op positie. Als u meerdere formulieren aan uw app wilt toevoegen, klikt u op + Voeg een formulier toe knop vanaf de bovenkant van het venster.

taken

De e-mail configureren die wordt verzonden naar de gebruikers van uw app. 

Nu u uw formulier hebt aangemaakt, is het tijd om de. Te gebruiken taken tab om de e-mail te configureren die we naar onze gebruiker willen sturen. Klik in de taken knop uit de zijbalk. Kijk vervolgens in de rechterbovenhoek van het venster en klik op de Nieuwe taak knop.

Een taak configureren in Stamplay

U kunt nu uw triggercomponent en actiecomponent kiezen. Uw triggercomponent activeert de actiecomponent om iets te doen. Onder elk onderdeel kunt u kiezen hoe dat onderdeel wordt geactiveerd. U kunt bijvoorbeeld uw triggercomponent instellen als uw gebruiker en ervoor zorgen dat deze de actie-component activeert wanneer deze zich aanmeldt bij Facebook.

Voor dit voorbeeld ga ik de triggercomponent instellen op de gebruiker en de actiecomponent voor e-mail. Bovendien ga ik het zo maken wanneer de gebruiker zich aanmeldt bij de app, een e-mail wordt verzonden naar zijn inbox.

Filteren naar wie uw app een e-mail stuurt. 

Klik op het blauw doorgaan met knop en je zult een header vinden met het label Stem gebruiker af. U kunt dit gedeelte gebruiken om de gebruikerstrigger fijn af te stemmen, bijvoorbeeld als u alleen wilt dat de e-mail die naar de gebruiker wordt verzonden als hun e-mail eindigt met Gmail-accounts, u kunt dit doen door te klikken op Voeg filter toe knop en kiezen e-mail uit de vervolgkeuzelijst Selecteer een eigenschap en (Tekst) Eindigt met uit het vervolgkeuzemenu. Dat kan je dan typ '@ gmail.com' in het conditie vak en klik op de blauw plus om dit filter aan uw app toe te voegen.

De e-mail configureren die wordt verzonden naar de gebruikers van uw app. 

U wordt nu gevraagd om uw e-mailopties in te stellen. Kijk naar de rechterkant van het venster onder de inlog trigger data header - u zult nogal wat opties opmerken. Deze opties zijn informatie die over uw gebruiker is verzameld tijdens het aanmeldingsproces van Facebook. Om deze informatie in uw formulier te gebruiken, klikt u gewoon in een tekstvak en klikt u vervolgens op de desbetreffende informatie aan de rechterkant van het venster.. 

Je kunt ook handmatig informatie in je e-mail typen, iets wat je wilt doen voor je e-mailadres en e-mailadres. Als u klaar bent met het instellen van uw e-mail, klikt u op de Taak maken knop die zich onderaan het menu bevindt.

lay-out

Nu u uw taken heeft gemaakt, is het tijd om de voorkant van uw app te bouwen. Om dit te doen, klikt u op de lay-out tab uit de zijbalk en kijk in de rechterbovenhoek van het venster. Klik op de knop met het label Thema veranderen.

Een nieuw thema kiezen voor uw app.

Bekijk in het thema-selectievenster elk van de opgenomen thema's. Als je er een vindt die je leuk vindt, beweeg je over het thema en klik je op de Demo bekijken om een ​​voorbeeld van het thema te bekijken. Als je besluit dat je je nieuwe thema leuk vindt, klik dan op Installeer thema knop.

Uw lay-out aanpassen

Kijk nu naar de linkerkant van het venster en klik op de pagina's drop-down menu. U krijgt nu alle HTML-bestanden te zien die deel uitmaken van uw webapp. Als u inhoud aan uw app wilt toevoegen, kunt u de HTML-bestanden bewerken om dit te doen.

In dit artikel gebruik ik het standaard thema Stamplay en heb ik de startpagina (index.html) bewerkt om voorbeeldtekst te verwijderen.

De Facebook-loginknop toevoegen

Kopiëren van Facebook-aanmelding div-tags kopiëren. 

Nu is het tijd om de voorkant van onze web-app te bewerken om de Facebook-loginknop weer te geven op de startpagina. Zie hiervoor de linkerkant van het Stamplay-venster en klik op het vervolgkeuzemenu met het label widgets. Klik vervolgens op de auth.login.hbs.html knop en kijk naar het midden van de pagina.

Kijk naar het midden van het Stamplay-venster in het HTML-document. Scan dit document totdat u een regel vindt die begint met Facebook Login en kopieer het. Open vervolgens het index.html-document van onder de pagina's drop-down menu.

Maak een nieuwe pagina op de index.html-pagina

tag, plak de Facebook Login-code en sluit de

label (

). Kijk nu in de rechterbovenhoek van het Stamplay-venster en klik op de Ga naar de App knop. Uw webapp verschijnt nu op een nieuw tabblad.

Kopiëren van Facebook-aanmelding div-tags kopiëren. 

Klik vanuit uw app op de nieuwe knop Inloggen en log in met uw Facebook-account. U moet dan uw Facebook-naam en profielfoto in de rechterbovenhoek van de app zien. Controleer ook het e-mailaccount dat is gekoppeld aan uw Facebook-account. Als dit correct is geconfigureerd, ziet u dat de e-mail die we eerder hebben ingesteld, is beland in uw inbox.

Een formulier toevoegen aan uw app

De formulier-div-tags toevoegen aan uw app.

Weet je nog het formulier dat we eerder hebben gemaakt? Het is tijd om dat aan de voorkant toe te voegen. Om dit te doen, klikt u op de widgets vervolgkeuzemenu en klik op de form.display.hbs.html knop om naar de HTML-code van uw formulier te worden gebracht. Kijk naar de bovenkant van het menu en kopieer en plak de eerste div-tag in het index.html-document.

We zijn echter nog niet helemaal klaar. Als u naar het einde van de tag kijkt, ziet u een gebied om de ID van uw formulier in te voeren die bij het maken van uw tabel is ingesteld. Als u niet zeker bent van uw tafel-ID, kunt u deze bekijken door op de. Te klikken tafel knop in de componenten tab en kijkend naar het midden van het venster.

Uw app testen

Nu uw app klaar is voor gebruik, test u deze door deze in een nieuw tabblad te openen. U kunt de URL van uw toepassing ophalen door op te klikken instellingen tab op de linkerzijbalk en kijk onder de domeinen header. Kopieer en plak deze URL in een nieuw tabblad en geef het een werveling!

Het tabblad Beheerder

Zodra uw app live is, kunt u naar de beheerder tab om reacties op uw formulier te bekijken. Klik op het tabblad en klik in het vervolgkeuzemenu op Het formulier knop. Vanuit het midden van het venster kunt u resposnes bekijken op uw formulier en de e-mailadressen die door het Facebook-account van de gebruiker worden verstrekt. Bovendien, als u op klikt gebruikers knop, kunt u de naam en e-mail bekijken van elke gebruiker die uw app heeft gebruikt.

Klaar is kees!

U kunt nu Stamplay gebruiken om eenvoudige webapps te maken voor interactie met uw gebruikers en klanten. Link ons ​​in de opmerkingen naar uw nieuwe web-app of laat ons weten of u hulp nodig heeft met behulp van Stamplay!