Lag din egen webapps med stamplay

Nettprogrammer er en fin måte å samhandle med kundene dine. Men til ikke-webutviklere kan de være en veldig skremmende oppgave å skape. Heldigvis for de brukerne har folkene på Stamplay sikret å gjøre opprettelsen av webapplikasjoner en bris med deres tjeneste som automatiserer utviklingsprosessen for nettapp ved å gi deg en enkel, trinnvis prosess for å lage apper.

Stamplay kan brukes til å lage webapps som integreres med tjenester som Facebook, Google, Dropbox og masse andre apper. Dette er fint fordi du ikke trenger å gå ut og finne APIene for hver tjeneste, når du bruker Stamplay, bare dra den inn.

I denne opplæringen viser jeg deg hvordan du kan lage ditt første sosiale nettverk drevne app, fra grunnen av, ved hjelp av Stamplay.

Opprette din første webapp

Opprette en ny webapp fra startskjermbildet.

For å starte, gå over til Stamplay nettside og opprett en konto ved å klikke på den grønne Start nå knappen som ligger mot midten av skjermen. Du kan deretter registrere deg for en konto med enten din e-postadresse eller din Google-konto.

Velger et navn for den nye appen din.

Nå kommer du til appbiblioteket ditt. Du kan bruke denne siden til både å se de gamle appene dine og starte opprettelsen av nye apper. For å opprette en ny app ser du øverst til høyre på skjermen og klikker på den blå Opprett app knapp. Deretter vises et popup-vindu som ber deg om å nevne den nye appen din. Etter at du har bekreftet appens navn, blir du brakt til komponentsiden.

komponenter

På komponentsiden kan du velge hvordan du vil at brukeren skal samhandle med den nye webappen din. For dette eksempelet skal jeg lage et program som lar brukeren logge på med Facebook, fylle ut et enkelt skjema og ha en epost sendt til innboksen sin.

Velger en påmeldingstjeneste for appen din. 

For å starte, klikk på den blå Bruker knappen fra toppen av vinduet. For å legge til Facebook-innlogging i appen din, klikk på blå Legg til knapp fra høyre side av vinduet; et popup-vindu vil dukke opp og spør deg om å velge en påloggingstjeneste. For denne opplæringen vil jeg velge Facebook-alternativet.

Legge til komponenter i webappsappen din i Stamplay.

Du blir nå bedt om å oppgi en App ID og App hemmelig. Disse kan kjøpes på Facebooks devleoper-side og brukes til å identifisere appen din med Facebook-servere.

Klikk nå på det blå i tillegg til knappen som er plassert til høyre for brukerlogoen. Nå kan du legge til flere komponenter i appen din. Siden vi vil sende en e-post til brukerne våre, klikker du på e-post alternativ. Deretter klikker du på i tillegg til knappen igjen for å komme til valgskjermen igjen. Denne gangen klikker du på skjema knapp.

Opprette felt for skjemaet ditt.

Se mot midten av skjermen, du vil kunne sette opp skjemaet ditt ved å gi det et navn og legge til felt. For å legge til felt, se til bunnen av vinduet under Enger Overskrift. Bruke Feltnavn tekstboks for å gi ditt felt et navn. Til høyre for denne tekstboksen finner du en rullegardinmeny som spør hvilken type felt du vil legge til.

For denne opplæringen skal jeg bruke skjemaet til å spørre brukerne hvilket smarttelefonoperativsystem de bruker. For å gjøre dette, vil jeg få brukeren til å sjekke hvilken telefon de bruker, så jeg skal velge radioknapp fra rullegardinmenyen.

Du kommer nå til en meny som lar deg legge inn skjemaets alternativer. Når det gjelder radioknapper, kan du legge til knappens navn i listen. For min form vil jeg legge til navnene på smarttelefon operativsystemer til listen.

Hvis du vil gjøre en del av skjemaet ditt, må du passe på at du slår på nødvendig på / av bryter til på stilling. For å legge til flere skjemaer i appen din, klikk på + Legg til skjema knappen fra toppen av vinduet.

oppgaver

Konfigurere e-postmeldingen som sendes til appens brukere. 

Nå som du har opprettet skjemaet ditt, er det på tide å bruke oppgaver fanen for å konfigurere e-posten vi skal sende til brukeren vår. Klikk inn i oppgaver knapp fra sidefeltet. Deretter ser du mot øvre høyre hjørne av vinduet og klikker på Ny oppgave knapp.

Konfigurere en oppgave i Stamplay

Du kan nå velge utløserkomponenten og handlingene. Utløserkomponenten er hva som utløser handlingen for å gjøre noe. Under hver komponent kan du velge hvordan nevnte komponent vil bli utløst. For eksempel kan du sette utløserkomponenten som bruker og få den til å utløse handlingen når den logger på Facebook.

For dette eksempelet skal jeg sette utløserkomponenten til bruker og handlingen komponenten til e-post. I tillegg skal jeg gjøre det når brukeren logger på appen, blir en epost sendt til innboksen sin.

Filtrerer hvem appen din sender en e-post til. 

Klikk på den blå Fortsette knappen, og du finner en overskrift merket Still brukeren. Du kan bruke denne delen til å finjustere brukerutløseren, for eksempel hvis du bare vil e-posten sendes til brukeren hvis e-posten slutter med Gmail-kontoer, kan du gjøre dette ved å klikke på Legg til filter knappen og velge e-post fra rullegardinmenyen Velg en eiendom og (Tekst) slutter med fra rullegardinmenyen. Du kan da skriv "@ gmail.com" inn i betingelsesboksen og klikk på blå pluss knappen for å legge til dette filteret i appen din.

Konfigurere e-postmeldingen som sendes til appens brukere. 

Du blir nå bedt om å konfigurere e-postalternativer. Se mot høyre side av vinduet under logg utløser data header - du vil legge merke til ganske mange alternativer. Disse alternativene er informasjon samlet om brukeren din i innloggingsprosessen til Facebook. For å bruke denne informasjonen i skjemaet, klikker du bare på en tekstboks og klikker deretter på sin respektive informasjon fra høyre side av vinduet. 

Du kan også skrive inn informasjon manuelt i e-posten din, noe du vil gjøre for din returadresse og e-postadresse. Når du er ferdig med å konfigurere e-posten din, klikker du på Opprett oppgave knappen som er plassert mot bunnen av menyen.

Oppsett

Nå som du har opprettet oppgavene dine, er det på tide å bygge appens frontend. For å gjøre dette, klikk på Oppsett fane fra sidefeltet og se mot øvre høyre hjørne av vinduet. Klikk på knappen merket Endre tema.

Velger et nytt tema for appen din.

Fra temavalgsvinduet, ta en titt på hvert av de medfølgende temaene. Når du finner en du liker, svever du over temaet og klikker på Se demo knappen for å forhåndsvise temaet. Hvis du bestemmer deg for ditt nye tema, klikker du på Installer tema knapp.

Tilpasse layoutet ditt

Se nå til venstre på vinduet og klikk på sider nedtrekksmenyen. Du vil nå bli vist alle HTML-filene som utgjør din web-app. Hvis du vil legge til innhold i appen din, kan du redigere HTML-filene for å gjøre det.

I denne artikkelen bruker jeg standard Stamplay-tema og har redigert hjemmesiden (index.html) for å fjerne eksempeltekst.

Legge til Facebook-innloggingsknappen

Kopiering av Facebook login div tags. 

Nå er det på tide å begynne å redigere forsiden av vår webapp for å vise innloggingsknappen til hjemmesiden. For å gjøre dette, se til venstre i Stamplay-vinduet og klikk på rullegardinmenyen merket widgets. Deretter klikker du på auth.login.hbs.html knappen og se mot midten av siden.

Se mot midten av Stamplay-vinduet i HTML-dokumentet. Skann dette dokumentet til du finner en linje som starter med Facebook Logg inn og kopier det. Deretter åpner du index.html-dokumentet under under sider nedtrekksmenyen.

Fra index.html-siden, opprett en ny

tag, lim inn innloggningskoden til Facebook og lukk

stikkord (

). Se nå til øverste høyre hjørne av Stamplay-vinduet og klikk på Gå til App knapp. Din nettapp vil nå vises i en ny kategori.

Kopiering av Facebook login div tags. 

Fra appen din, klikk på den nye innloggingsknappen og logg inn med din Facebook-konto. Du bør da se ditt Facebook-navn og profilbilde øverst til høyre i appen. I tillegg kan du sjekke e-postkontoen som er knyttet til Facebook-kontoen din, hvis den er konfigurert riktig, vil du legge merke til at e-posten vi installerte tidligere har landet i innboksen din.

Legge til et skjema i appen din

Legger til form div-merkene i appen din.

Husk skjemaet vi opprettet tidligere? Det er på tide å legge til det i frontenden. For å gjøre dette, klikk på widgets rullegardinmenyen og klikk på form.display.hbs.html knappen som skal hentes til skjemaets HTML-kode. Se mot toppen av menyen og kopier og lim inn den første div-taggen ditt index.html-dokumentet.

Vi er imidlertid ikke helt ferdige ennå. Hvis du ser mot slutten av taggen, ser du et område for å legge inn skjemaets ID som ble angitt når du opprettet bordet ditt. Hvis du er usikker på tabell-ID, kan du se det ved å klikke på bord knappen i komponenter flipp og ser mot midten av vinduet.

Teste appen din

Nå som appen din er klar til å gå, må du prøve den ved å åpne den i en ny kategori. Du kan hente programmets URL ved å klikke på innstillinger fanen på venstre sidepanel og ser under domener Overskrift. Kopier og lim inn denne nettadressen til en ny fane og gi den en virvel!

Administrasjonsfanen

Når appen din er live, kan du gå til admin kategorien for å vise svar på skjemaet ditt. Klikk på fanen og i rullegardinmenyen, klikk på Form knapp. Fra midten av vinduet kan du se resposnes til skjemaet og e-postadressene som tilbys av brukerens Facebook-konto. I tillegg, hvis du klikker på brukere knappen, kan du se navnet og e-postadressen til hver bruker som har brukt appen din.

Og det er en vikle!

Du kan nå bruke Stamplay til å gjøre enkle webapps til å kommunisere med brukerne og kundene dine. I kommentarene, lenke oss til din nye web-app - eller gi oss beskjed hvis du trenger hjelp med å bruke Stamplay!