Cum se construiește o casetă de abonament cu Stamplay

Cutiile de abonament sunt o afacere din ce în ce mai populară în aceste zile. Le puteți găsi pentru totdeauna, de la îngrijirea produselor până la gustări sănătoase, jocuri pentru copii și chiar înghețată. În acest tutorial, vă vom arăta cum să construiți rapid o aplicație web pentru a testa dacă puteți găsi primii 1.000 de clienți pentru ideea casei de abonament!

Aplicația noastră este inspirată de serviciul de abonament pentru cocktailuri Shaken și include următoarele caracteristici:

• Înscrieți-vă utilizatorii prin Facebook.
• Activați plățile recurente prin Stripe.
• Întrerupeți și reactivați abonamentele.
• Trimiteți e-mailuri tranzacționale.
• Adăugați utilizatori într-o listă MailChimp.

Acest tutorial vă va arăta cum să configurați un back-end cu funcții complete și cum să construiți un front-end AngularJS care să îl atașeze.

Codul de bază complet al front-end-ului poate fi găsit pe GitHub.

Cupon: Stamplay a oferit cititorilor Tuts + un cupon exclusiv de oferit 6 luni din planul plus gratuit (Valoare de 600 USD). Codul promoțional este CODETUTSPLUS și expiră la 10 octombrie. Înscrieți-vă acum gratuit pentru ao răscumpăra.

1. Stamplay: API Lego pentru dezvoltatori

Stamplay este o platformă de dezvoltare bazată pe web care oferă dezvoltatorilor o modalitate incredibil de rapidă de a construi aplicații complet integrate. Stamplay se ocupă de dificultatea de a vorbi cu mai multe API-uri diferite, astfel încât să nu fie nevoie.

Stamplay este construit în jurul conceptului de componente; componentele reprezintă elementele de bază ale aplicației noastre. Putem vedea diferitele instrumente disponibile la noi Sarcini> Componente.

După ce v-ați conectat, sunteți întâmpinați cu acest tablou de bord simplu și elegant. Vom crea o aplicație aici. Denumiți-vă ce vreți, dar amintiți-vă că acest nume este ceea ce vom folosi pentru a identifica cererea noastră. Acest lucru va fi, de asemenea, utilizat ca URL pentru aplicația noastră atunci când este găzduit.

În cazul nostru, folosim "tutsplus", iar aplicația noastră va fi găzduită la adresa https://tutsplus.stamplayapp.com.

Acum, să începem configurarea back-end-ului.

1.1 Configurarea back-end-ului: Integrarea înregistrării Facebook

Această aplicație va conține o autentificare Facebook. Vom putea interacționa cu API-ul Facebook și vom putea gestiona datele de conectare și înregistrare, toate fără un singur rând de cod. Deoarece vrem ca utilizatorii noștri să se înscrie cu Facebook, va trebui să ne îndreptăm spre pagina de dezvoltatori Facebook și să creăm o nouă aplicație pentru dezvoltatori.

Selectați website, și odată ce ați creat aplicația dvs., vom putea să luăm două lucruri de care avem nevoie de la Facebook pentru a se integra cu Stamplay:

• ID-ul aplicației
• Secretul aplicației

Aceste două lucruri pot fi găsite sub Setări> De bază.

Acum, când avem App ID-ul și Secretul aplicațiilor, le putem conecta la Stamplay.

Întoarce-te la Stamplay și selectează Utilizatori din meniul principal și apoi Autentificare. Adăuga Facebook ca serviciu de înregistrare, copiați și lipiți ID-ul aplicației și secretul aplicației și faceți clic pe Salvați.

Acum puteți înregistra utilizatorii prin Facebook!

Acum, când ne-am conectat la acreditările Facebook, Stamplay oferă o adresă URL convenabilă API pentru a gestiona conectarea cu Facebook. Hai să mergem acolo și să vedem datele de conectare Facebook în acțiune. 

Accesați https://tutsplus.stamplayapp.com/auth/v1/facebook/connect.

Și boom! Aveți login-ul dvs. Facebook în funcțiune.

1.2 Configurarea Back End: Gestionarea datelor cu obiecte

Nu totul poate fi manipulat cu componente, așa că Stamplay ne oferă o modalitate ușoară de a gestiona datele personalizate. Gândiți-vă la acest lucru ca la interfața bazei de date back-end pentru aplicația dvs..

Comenzile vor fi urmărite cu un Obiect numit Comenzi. Are următoarele cinci proprietăți:

• active (boolean) // pentru a urmări dacă abonamentul este activ sau nu
• adresa (plain_object) // informații despre adresa utilizatorului
• plan (șir) // planul la care sa abonat utilizatorul
• stripsubscription (șir) // ID-ul abonamentului generat de Stripe
• utilizator (user_id) // unicul _id al utilizatorului nostru

Stamplay va expune imediat API-urile RESTful de îndată ce creați obiectul. Punctul final va arăta astfel: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Configurarea Stripei

Va trebui să ne facturați clienții periodic, și, din fericire, acest lucru este ușor de făcut cu Stripe! Prelucrarea sa periodică de plată este implementată în cadrul conceptului Planului. Planurile Stripe sunt obiecte care reprezintă ciclul de cost și de facturare al abonamentelor dvs..

Pentru a configura acest lucru, va trebui să vă creați planul în Consola consola> Planuri:

După ce ați terminat, reveniți la Stamplay și conectați componenta Stripe Sarcină> Componente. Selectează Dunga modul și faceți clic pe Conectați buton.

Acum contul Stripe va fi legat de aplicația Stamplay, care poate executa cereri API în numele nostru.

După o conexiune Stripe de succes, veți ajunge la o vizualizare ca aceasta.

1.4 Configurarea MailChimp

Pentru a configura MailChimp, procesul este destul de similar; pur și simplu conectați contul dvs. MailChimp așa cum ați făcut anterior cu Stripe și veți vedea o pagină ca aceasta:

2. Adăugarea automatizării cu activități

Aceasta este partea de server a aplicației noastre, unde se petrece cea mai mare parte a magiei! Să spunem că vrem să facem câteva lucruri:

• Trimiteți un mesaj "Bine ați venit" atunci când un utilizator se înscrie cu Facebook.
• Adăugați utilizatorii într-o listă MailChimp când vă înscrieți.

Aceste două lucruri ar necesita în mod normal o bucată de cod, dar nu cu Stamplay ...

2.1 Mesaj de întâmpinare

Un expert vă va îndruma prin configurația sarcinii. Sub Sarcini> Gestionați, creați o nouă sarcină și configurați-o așa cum doriți. Iată cum am creat sarcina de e-mail de bun venit:

Apoi puteți configura acțiunea prin folosirea variabilelor care ies din declanșator (în acest caz, utilizatorul). Iată cum ne-am configurat a noastră:

2.2 Apăsați utilizatorii într-o listă MailChimp

Apăsarea e-mailurilor utilizatorilor în lista dvs. de corespondență pe MailChimp este simplă.

Sub Sarcini> Gestionați, creați o nouă sarcină și configurați-o așa cum doriți. Iată cum am creat sarcina de abonare MailChimp.

3. Frontul

Pentru a începe să lucrăm la partea din față, va trebui să folosim instrumentul Stamplay CLI.

3.1 Instalați CLI-ul Stamplay

Acest instrument ne va da posibilitatea de a lucra cu aplicatiile noastre Stamplay. Ne permite să:

• implementarea aplicațiilor
• porniți un server local pentru dezvoltare
• inițializați un proiect Stamplay
• roll back versiuni
• descărcați cea mai recentă versiune

$ npm instalare -g stamplay-cli

Să creăm un nou dosar și să inițializăm aplicația Stamplay în dosarul respectiv.

$ mkdir tutsplus și& cd tutsplus $ stamplay init

Veți fi invitat să introduceți datele dvs. APPID (numele aplicației dvs.) și al dvs. apiKey. În acest caz, sunt tutsplus și 4 **** 0 respectiv.

Acest lucru va crea un fișier stamplay.json în rădăcina aplicației dvs., astfel încât atunci când se implementează, Stamplay va cunoaște acreditările dvs..

"appld": "tutsplus", "apiKey": "4e **** 0", "public": " "** / node_modules / **"]

3.2 Construirea Frontului

Pentru a atinge terenul care rulează cu un design bun, am pornit de la unul dintre cele mai multe șabloane gratuite HTML5 gratuite, alimentate de Template.co. Cel pe care l-am folosit se numește Retrospect.

Să o descărcăm și să o dezarhivăm în dosarul nostru de proiect. Apoi să instalăm câteva biblioteci suplimentare utilizând Bower. Rulați următoarea comandă și vom fi bine să mergeți:

$ bower instalează unghiular unghiular-ui-router unghiular-stamplay stamplay-sdk unghi-rută - salvează

Pentru a folosi Stamplay cu Angular, va trebui:

• încărcați SDK Stamplay
• configurați aplicația Stamplay
• încărcare Angulară
• încărcați routerul UI rotativ
• încărcați biblioteca Angular-Stamplay (doar un pachet de servicii pentru SDK)

Iată liniile necesare pentru a face toate acestea. Le vom adăuga sub eticheta fișierului nostru index.html:

 ...  ...              

Asigurați-vă că ați tastat-vă propriul APPID în funcția Stamplay.init. Acum putem începe serverul nostru local pentru a ne asigura că totul se încarcă corect. Rulați următoarele:

stamplay start

Veți vedea că aplicația dvs. este gata să meargă la http: // localhost: 8080.

3.3 Aplicația unghiulară

Vom crea câteva fișiere pentru aplicația noastră Angular:

Cele două fișiere de servicii vor utiliza bibliotecile Stamplay SDK și unghiular-stamplay pentru a ajuta aplicația noastră să interacționeze cu datele Stamplay.

Cel mai important este userService.js. Are câteva funcții și ne ajută să preluăm datele sau să creăm date. Pentru o privire mai aprofundată asupra a ceea ce este capabil de SDK Stamplay, asigurați-vă că verificați documentația.

UserService.js utilizează SDK Stamplay JS pentru a furniza aplicației noastre Angulare următoarele funcționalități:

• Logare
• logout
• isLogged
• saveAddress
• getUserModel
• createCard
• Abonati-va
• de dezabonare

/assets/js/services/userService.js

/ * globală unghiulară, Stripe, consolă * / 'utilizare strictă'; ($ q, $ stamplay) var user = $ stamplay.User () Modelul; returnare ('tutsplus.service'). login: function () retur user.login ('facebook');, logout: function () return user.logout ();, isLogged: functie () return user.isLogged : funcția (adresa, orașul, codul poștal) // Salvați informația adresei utilizatorului, getUserModel: funcția () // Obțineți informațiile despre utilizator, creaCard: funcția (cardObj) // Colectați informații despre cartea de credit și stocați-o prin Stripe , abonați: funcția (planId) // Abonare utilizator, dezabonare: funcție (planId) // Anulați abonamentul utilizatorului;]);

Cererea noastră va avea trei pagini:

• home.html, pagina principală de destinație unde utilizatorul va putea să se înscrie
• subscriptions.html, unde utilizatorii pot vizualiza casetele disponibile pentru abonament
• profile.html, unde utilizatorii își pot edita informațiile și pot anula un abonament

Aceste pagini sunt gestionate de trei controlori (conform celor sugerate de cele mai bune practici), care sunt homeCtrl.js, subscriptionCtrl.js și profileCtrl.js.

Șabloanele de pagini și controlorii sunt legate între ele de aplicația principală Angular.

Iată fundația aplicației noastre:

/ * globală unghiulară * / "utilizarea strictă"; angular.module ("tutsplus", ['tutsplus.service', 'ngRoute', 'ui.router', 'ngStamplay')]; unghiular .module ("tutsplus") .config (functie ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/'); $ stateProvider. pagini / home.html ", controler: 'homeCtrl', controllerAs: 'home') .state ('subscriptions', url: '/ subscriptions', templateUrl: '/pages/subscriptions.html', controller: 'subscriptionCtrl "," controlerAs: 'sub') .state ('profil', url: '/ profile', templateUrl: '/pages/profile.html', controller: 'profileCtrl' ) / * * Salvați utilizatorul logat, dacă este prezent, în rootScope * / .run (['rootScope', 'userService', funcția ($ rootScope, userService) userService.getUserModel $ rootScope.user = userResp;);]); 

Acum, trebuie doar să încărcăm noile noastre fișiere în index.html sub bibliotecile pe care le-am adăugat mai devreme.

/index.html

... capul fișierului index.html ...            

3.4 Autentificare front-end

Am conectat aplicația noastră Facebook mai devreme, iar acum trebuie să oferim utilizatorilor noștri o modalitate de ao folosi! Toate autentificările sunt tratate de Stamplay. Nu trebuie să codificăm nimic; trebuie doar să conectăm utilizatorii noștri cu calea de autentificare pe care Stamplay ne-a oferit-o.

Procesul de autentificare arată astfel:

• Conectați utilizatorii la adresa URL de autentificare.
• Autentificarea se face pe Facebook.
• Facebook trimite un utilizator înapoi la cererea noastră cu un simbol.
• Stamplay se ocupă de stocarea acestui simbol și utilizatorul nostru este autentificat.

Trebuie doar să configurați manual primul dintre acești pași. Să aplicăm aplicația noastră Angular ng-app și ng-controler la index.html și adăugați câteva directive unghiulare pentru a conecta pagina de pornire cu homeCtrl.js. De asemenea, vom elimina totul între