Creați-vă propriile aplicații Web cu Stamplay

Aplicațiile Web reprezintă o modalitate excelentă de a interacționa cu clienții dvs. Cu toate acestea, pentru dezvoltatorii non-web, acestea pot fi o sarcină foarte dificil de creat. Din fericire pentru acei utilizatori, cei de la Stamplay au avut ca scop să facă crearea de aplicații web un briza cu serviciul lor, care automatizează procesul de dezvoltare a aplicațiilor web, oferindu-vă un simplu pas cu pas procesul de creare a aplicațiilor.

Stamplay poate fi folosit pentru a face aplicații web care se integrează cu servicii precum Facebook, Google, Dropbox și multe alte aplicații. Acest lucru este frumos deoarece, atunci când utilizați Stamplay, nu trebuie să ieșiți și să găsiți API-urile pentru fiecare serviciu respectiv - purtați-l.

În acest tutorial, vă vom arăta cum puteți crea prima aplicație alimentată de rețeaua socială, din nou, folosind Stamplay.

Crearea primei aplicații web

Crearea unei noi aplicații web din ecranul inițial.

Pentru a începe, mergeți pe site-ul Stamplay și creați un cont făcând clic pe verde Începe acum care este situat în centrul ecranului. Apoi, puteți să vă înscrieți pentru un cont folosind adresa dvs. de e-mail sau Contul dvs. Google.

Alegerea unui nume pentru noua dvs. aplicație.

Veți fi adus acum la biblioteca de aplicații. Puteți utiliza această pagină pentru a vizualiza atât aplicațiile vechi, cât și pentru a începe crearea de noi aplicații. Pentru a crea o aplicație nouă, priviți spre colțul din dreapta sus al ecranului și faceți clic pe albastru Creați aplicația buton. Apoi va apărea o fereastră pop-up prin care vi se cere să vă numiți noua aplicație. După ce confirmați numele aplicației, veți fi aduși pe pagina Componente.

Componente

În pagina de componente, puteți alege modul în care doriți ca utilizatorul dvs. să interacționeze cu noua dvs. aplicație web. Pentru acest exemplu, voi crea o aplicație care permite unui utilizator să se conecteze cu Facebook, să completeze un formular simplu și să trimită un e-mail în căsuța de e-mail.

Selectarea unui serviciu de înscriere pentru aplicația dvs.. 

Pentru a începe, faceți clic pe albastru Utilizator din partea de sus a ferestrei. Pentru a adăuga autentificare Facebook la aplicația dvs., faceți clic pe Adaugă albastru butonul din partea dreaptă a ferestrei; va apărea o fereastră pop-up care vă cere să alegeți un serviciu de conectare. Pentru acest tutorial, voi selecta opțiunea Facebook.

Adăugarea de componente în aplicația web din Stamplay.

Acum vi se va solicita să furnizați un ID de aplicație și secretul aplicației. Acestea pot fi achiziționate pe pagina devleoper a Facebook și sunt folosite pentru a identifica aplicația dvs. cu serverele Facebook.

Acum, faceți clic pe albastru la care se adauga care este situat în partea dreaptă a siglei utilizatorului. Acum veți putea adăuga mai multe componente în aplicația dvs. Deoarece vrem să trimitem un e-mail utilizatorilor noștri, faceți clic pe e-mail opțiune. Apoi faceți clic pe la care se adauga pentru a reveni din nou la ecranul de selectare. De data aceasta, dați clic pe formă buton.

Crearea de câmpuri pentru formularul dvs..

Uită-te spre centrul ecranului, vei putea configura formularul, dându-i un nume și adăugând câmpuri. Pentru a adăuga câmpuri, căutați în partea de jos a ferestrei sub Câmpuri antet. Folosește Numele domeniului caseta de text pentru a da câmpului dvs. un nume. În partea dreaptă a acestei casete text veți găsi un meniu derulant care întreabă ce tip de câmp doriți să adăugați.

Pentru acest tutorial, voi folosi formularul pentru a întreba utilizatorii ce sistem de operare smartphone folosesc. Pentru a face acest lucru, voi avea utilizatorul să verifice ce telefon utilizează, așa că am de gând să aleg buton de radio din meniul drop-down.

Acum veți fi adus la un meniu care vă permite să introduceți opțiunile formularului. În cazul butoanelor radio, puteți adăuga numele de butoane în listă. Pentru formularul meu, voi adăuga numele de sisteme de operare smartphone în listă.

Dacă doriți să faceți o parte din formularul dvs. necesar, asigurați-vă că îl întoarceți necesar porniți / opriți comutatorul pe poziţie. Pentru a adăuga mai multe formulare în aplicație, faceți clic pe + Adăugați un formular din partea de sus a ferestrei.

Sarcini

Configurarea e-mailului care va fi trimis utilizatorilor aplicației dvs.. 

Acum că ați creat formularul dvs., este timpul să utilizați formularul Sarcini pentru a configura e-mailurile pe care le vom trimite utilizatorului. Faceți clic pe Sarcini de pe lateral. Apoi, priviți spre colțul din dreapta sus al ferestrei și faceți clic pe Sarcina noua buton.

Configurarea unei sarcini în Stamplay

Acum puteți alege componenta de declanșare și componenta de acțiune. Componenta dvs. de declanșare este ceea ce declanșează componenta de acțiune pentru a face ceva. Sub fiecare componentă, puteți alege cum va fi declanșată componenta respectivă. De exemplu, puteți seta componenta dvs. de declanșare ca utilizator și puteți declanșa componenta de acțiune atunci când se conectează la Facebook.

Pentru acest exemplu, voi seta componenta de declanșare la utilizator și componenta de acțiune pentru e-mail. În plus, o să fac așa că atunci când utilizatorul semnează în aplicație, un e-mail este trimis în căsuța de e-mail.

Filtrarea la care aplicația dvs. trimite un e-mail la. 

Faceți clic pe albastru continua și veți găsi un antet etichetat Tune User. Puteți utiliza această secțiune pentru a regla cu ușurință declanșatorul utilizatorului, de exemplu dacă doriți numai e-mailurile trimise utilizatorului în cazul în care e-mailul se termină cu conturile Gmail, puteți face acest lucru făcând clic pe Adăugați un filtru butonul și alegerea e-mail din meniul derulant Selectați o proprietate și (Text) Se termină cu din meniul drop-down. Atunci poți introduceți "@ gmail.com" în caseta condiție și faceți clic pe albastru plus pentru a adăuga acest filtru în aplicație.

Configurarea e-mailului care va fi trimis utilizatorilor aplicației dvs.. 

Acum vi se va solicita să configurați opțiunile de e-mail. Uită-te spre partea dreaptă a ferestrei sub conectați datele de declanșare header - veți observa câteva opțiuni. Aceste opțiuni sunt informații culese despre utilizatorul dvs. în procesul de conectare Facebook. Pentru a utiliza aceste informații în formularul dvs., trebuie doar să faceți clic pe o casetă de text și apoi să faceți clic pe informațiile respective din partea dreaptă a ferestrei. 

Puteți, de asemenea, să introduceți manual informații în e-mailul dvs., ceva ce veți dori să faceți pentru adresa dvs. de e-mail de întoarcere și corpul de e-mail. După ce terminați configurarea e-mailului dvs., faceți clic pe Creați o sarcină care este situat în partea de jos a meniului.

schemă

Acum că ți-ai creat sarcinile, e timpul să construiești front-ul aplicației tale. Pentru aceasta, faceți clic pe schemă din bara laterală și priviți spre colțul din dreapta sus al ferestrei. Faceți clic pe butonul etichetat Schimbă tema.

Alegerea unei teme noi pentru aplicația dvs..

Din fereastra de selectare a temelor, aruncați o privire la fiecare dintre temele incluse. Când găsiți una care vă place, plasați cursorul pe temă și faceți clic pe Vizualizați demonstrația pentru a previzualiza tema. Dacă decideți că vă place noua temă, faceți clic pe Instalați tema buton.

Personalizarea aspectului

Acum, uită-te în partea stângă a ferestrei și dă click pe pagini meniul derulant. Veți fi afișați acum toate fișierele HTML care alcătuiesc aplicația web. Dacă doriți să adăugați conținut în aplicația dvs., puteți să editați fișierele HTML pentru a face acest lucru.

În acest articol, folosesc tema standard Stamplay și am editat pagina de pornire (index.html) pentru a elimina textul probelor.

Adăugarea butonului de conectare Facebook

Copiați etichetele de conectare Facebook div. 

Acum este momentul să începeți editarea front-end-ului aplicației noastre web pentru a afișa butonul de conectare Facebook la pagina de pornire. Pentru a face acest lucru, priviți în partea stângă a ferestrei Stamplay și faceți clic pe meniul derulant etichetat widget-uri. Apoi faceți clic pe auth.login.hbs.html și priviți spre centrul paginii.

Uită-te spre centrul ferestrei Stamplay de la documentul HTML. Scanați acest document până când găsiți o linie care începe cu Logare Facebook și copiați-l. Apoi, deschideți documentul index.html din sub pagini meniul derulant.

Din pagina index.html, creați un nou

etichetă, lipiți codul de autentificare Facebook și închideți

etichetă (

). Acum, priviți spre colțul din dreapta sus al ferestrei Stamplay și faceți clic pe Mergi la aplicatie buton. Aplicația Web va apărea acum într-o filă nouă.

Copiați etichetele de conectare Facebook div. 

Din aplicația dvs., dați clic pe butonul de conectare nou și conectați-vă utilizând contul dvs. Facebook. Ar trebui să vedeți apoi numele și fotografia dvs. Facebook în colțul din dreapta sus al aplicației. În plus, verificați contul de e-mail asociat contului dvs. Facebook, dacă este configurat corespunzător, veți observa că e-mailul pe care l-am configurat mai devreme a aterizat în Inbox.

Adăugarea unui formular pentru aplicația dvs.

Adăugarea etichetelor de formular div în aplicația dvs..

Amintiți-vă formularul creat mai devreme? Este timpul să adăugați asta la capătul din față. Pentru aceasta, faceți clic pe widget-uri drop-down și faceți clic pe form.display.hbs.html pentru a fi aduse codului HTML al formularului. Uită-te în partea de sus a meniului și copiați și inserați prima etichetă div a documentului index.html.

Cu toate acestea, încă nu am terminat. Dacă vă uitați la sfârșitul etichetei, veți vedea o zonă pentru a introduce codul de identificare a formularului dvs. care a fost setat la crearea tabelului. Dacă nu sunteți sigur de ID-ul tabelului, îl puteți vedea făcând clic pe masa buton în componente și privirea către centrul ferestrei.

Testarea aplicației dvs.

Acum că aplicația dvs. este gata să meargă, încercați-o deschizând-o într-o filă nouă. Puteți recupera URL-ul aplicației dvs. făcând clic pe Setări pe bara laterală din partea stângă și vă uitați sub domenii antet. Copiați și inserați această adresă URL într-o filă nouă și dați-i un vârtej!

Fila Administrator

Odată ce aplicația dvs. este live, puteți merge la admin pentru a vedea răspunsurile la formularul dvs. Faceți clic pe fila și, din meniul derulant, faceți clic pe Formă buton. Din centrul ferestrei puteți vedea răspunsurile la formularul dvs. și adresele de e-mail furnizate de contul de utilizator al utilizatorului Facebook. În plus, dacă faceți clic pe Utilizatori , puteți vedea numele și e-mailul fiecărui utilizator care a folosit aplicația dvs..

Și asta e o înfășurare!

Acum puteți utiliza Stamplay pentru a face ca aplicațiile web simple să interacționeze cu utilizatorii și clienții dvs. În comentariile dvs., conectați-vă la noua dvs. aplicație web sau anunțați-ne dacă aveți nevoie de ajutor folosind Stamplay!