Hvordan bygge en abonnementskasse med stamplay

Abonnementskasser er en stadig mer populær bedrift i disse dager. Du kan finne dem for alt fra pleieprodukter til sunne snacks, barnespill og til og med iskrem. I denne veiledningen vil jeg vise deg hvordan du raskt kan bygge en webapp for å teste om du kan finne de første 1000 kundene for din abonnementskasseidee!

Vår app er inspirert av cocktail abonnementsservice Shaken og inneholder følgende funksjoner:

• Registrer brukerne via Facebook.
• Aktiver gjentatte betalinger via Stripe.
• Pause og reaktiver abonnementer.
• Send transaksjonelle e-poster.
• Legg til brukere på en MailChimp-liste.

Denne opplæringen vil vise deg hvordan du konfigurerer en fullverdig back-end og hvordan du bygger AngularJS-fronten som knytter seg til den.

Den fullstendige kodebasen til frontenden finnes på GitHub.

kupong: Stamplay har gitt Tuts + lesere en eksklusiv kupong for å gi 6 måneder av plussplanen gratis ($ 600 verdi). Kupongkoden er CODETUTSPLUS og den utløper 10. oktober. Registrer deg nå gratis for å innløse det.

1. Stamplay: API Lego for Developers

Stamplay er en nettbasert utviklingsplattform som gir utviklere en utrolig rask måte å bygge fullt integrerte applikasjoner på. Stamplay håndterer bryet med å snakke med mange forskjellige APIer, slik at du ikke trenger å.

Stamplay er bygget rundt konseptet av komponenter; komponenter er byggeblokkene i søknaden vår. Vi kan se de forskjellige verktøyene som er tilgjengelige for oss under Oppgaver> Komponenter.

Når du er logget inn, blir du møtt med dette enkle og elegante instrumentbrettet. Vi lager et program her. Gi det navnet du vil, men husk at dette navnet er det vi skal bruke til å identifisere vår søknad. Dette vil også bli brukt som URL for vår søknad når den er vert.

I vårt tilfelle bruker vi "tutsplus", og vår søknad vil bli hostet på https://tutsplus.stamplayapp.com.

La oss nå begynne å konfigurere bakenden.

1.1 Konfigurere bakenden: Integrering av Facebook-registrering

Denne appen vil inneholde en Facebook-innlogging. Vi vil kunne samhandle med Facebook API og håndtere innlogging og påmelding, alt uten en enkelt linje med kode. Siden vi vil at brukerne skal registrere seg på Facebook, må vi gå over til Facebook Developers-siden og opprette en ny utviklerapp.

Å velge nettsted, og når du får appen din opprettet, kan vi gripe to ting som vi trenger fra Facebook for å integrere med Stamplay:

• App ID
• App Secret

Disse to tingene finnes under Innstillinger> Grunnleggende.

Nå som vi har App ID og App Secret, kan vi plugge dem inn i Stamplay.

Gå tilbake til Stamplay og velg brukere fra hovedmenyen, og deretter Godkjenning. Legg til Facebook Som oppmeldingsservice, kopier og lim inn App ID og App Secret, og klikk Lagre.

Du kan nå registrere brukere via Facebook!

Nå som vi har koblet til vår Facebook-legitimasjon, gir Stamplay en praktisk API-URL for å håndtere logg inn med Facebook. La oss gå dit nå og se vår Facebook-pålogging i handling. 

Gå til https://tutsplus.stamplayapp.com/auth/v1/facebook/connect.

Og boom! Du har din Facebook-innlogging oppe og i gang.

1.2 Konfigurere bakenden: Administrere data med objekter

Ikke alt kan håndteres med komponenter, så Stamplay gir oss en enkel måte å håndtere egendefinerte data på. Tenk på dette som back-end database grensesnitt for din søknad.

Ordrer vil bli sporet med et objekt som heter bestillinger. Den har følgende fem egenskaper:

• aktiv (boolean) // for å spore om abonnementet er aktivt eller ikke
• adresse (plain_object) // brukerens adresse info
• plan (streng) // planen brukeren abonnerer på
• stripesubscription (streng) // abonnementet ID generert av Stripe
• bruker (user_id) // den unike _id av brukeren vår

Stamplay vil øyeblikkelig vise RESTful APIs så snart du oppretter objektet. Endepunktet ser slik ut: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Konfigurere stripe

Vi må regne våre kunder med jevne mellomrom, og heldigvis er dette enkelt å gjøre med Stripe! Den gjentatte betalingsprosessen er implementert i Plan-konseptet. Stripe-planer er objekter som representerer kostnads- og faktureringsperioden for abonnementene dine.

For å sette opp dette må du opprette planen din i Stripe konsoll> Planer:

Når du er ferdig, gå tilbake til Stamplay og koble Stripe-komponenten inn Oppgave> Komponenter. Velg Stripe modul og klikk på Koble knapp.

Nå vil Stripe-kontoen være knyttet til Stamplay-appen, som kan utføre API-forespørsler på våre vegne.

Etter en vellykket Stripe-tilkobling vil du ende opp med en visning som denne.

1.4 Konfigurere MailChimp

For å konfigurere MailChimp, er prosessen ganske lik Bare koble MailChimp-kontoen din som du tidligere gjorde med Stripe, og du får se en side som dette:

2. Legge til automatisering med oppgaver

Dette er server-side delen av søknaden vår, hvor mesteparten av magien skjer! La oss si at vi vil gjøre et par ting:

• Send en "Velkommen" melding når en bruker registrerer seg med Facebook.
• Legg til brukere på en MailChimp-liste når de registrerer seg.

Disse to tingene vil normalt kreve en god del av kode, men ikke med Stamplay ...

2.1 Velkommen e-post

En veiviser vil gå deg gjennom konfigurasjonen av oppgaven. Under Oppgaver> Administrer, opprett en ny oppgave og sett den opp som du vil. Slik har vi satt opp velkomst-e-postoppgaven:

Deretter kan du konfigurere handlingen som utnytter variablene som kommer ut fra avtrekkeren (i dette tilfellet brukeren). Slik har vi konfigurert vår:

2.2 Trykk brukere på en MailChimp-liste

Pushing brukerens e-post til din epostliste på MailChimp er grei.

Under Oppgaver> Administrer, opprett en ny oppgave og sett den opp som du vil. Her er hvordan vi har konfigurert MailChimp-abonnementsoppgaven.

3. Frontend

For å begynne å jobbe med vår forside, må vi bruke Stamplay CLI-verktøyet.

3.1 Installer Stamplay CLI

Dette verktøyet gir oss muligheten til å jobbe med våre Stamplay applikasjoner. Det tillater oss å:

• distribuere applikasjoner
• start en lokal server for utvikling
• initier et Stamplay-prosjekt
• rulle versjoner
• last ned den nyeste versjonen

$ npm installere -g stamplay-cli

La oss lage en ny mappe og initialisere vårt Stamplay-program til den mappen.

$ mkdir tutsplus && cd tutsplus $ stamplay init

Du blir bedt om å legge inn din AppID (navnet på appen din) og din apikey. I dette tilfellet er de tutsplus og 4 **** 0 henholdsvis.

Dette vil opprette en stamplay.json-fil i roten til appen din, slik at når du distribuerer, vil Stamplay kjenne legitimasjonene dine.

"appId": "tutsplus", "apiKey": "4e **** 0", "offentlig": "./", "ignore": ["stamplay.json", "** /. *" "** / node_modules / **"]

3.2 Bygning av frontenden

For å slå bakken kjører med en god design, startet vi fra en av de mange kule gratis HTML5-malene drevet av Templated.co. Den vi brukte, heter Retrospect.

La oss laste den ned og pakke den ut til vår prosjektmappe. La oss da installere noen ekstra biblioteker her ved hjelp av Bower. Kjør følgende kommando, og vi vil være gode å gå:

$ bower installer vinklet vinkel-ui-router vinkel-stamplay stamplay-sdk vinkelrute - save

For å kunne bruke Stamplay med Angular, må vi:

• Last inn SDS-stemmespillet
• konfigurer Stamplay programmet
• Last Angular
• Last Angular UI Router
• Last inn Angular-Stamplay-biblioteket (bare et serviceinnpakning for SDK)

Her er linjene som kreves for å gjøre alt dette. Vi legger til dem under tag i vår index.html-fil:

 ...  ...              

Pass på at du har skrevet din egen AppID inn i Stamplay.init-funksjonen. Vi kan nå starte vår lokale server for å sikre at alt lastes riktig. Kjør følgende:

stamplay start

Du vil se at søknaden din er klar til å gå på http: // localhost: 8080.

3.3 Vinkelapplikasjonen

Vi lager noen filer til vårt kantede program:

De to tjenestefilene vil bruke Stamplay SDK og angular-stamplay-bibliotekene for å hjelpe vår applikasjon til å interagere med våre Stamplay-data.

Det viktigste er userService.js. Den har noen funksjoner og hjelper oss med å ta data eller lage data. For en mer grundig titt på hva Stamplay SDK er i stand til, må du sjekke ut dokumentasjonen.

UserService.js utnytter Stamplay JS SDK til å gi våre Angular app følgende funksjoner:

• Logg Inn
• Logg ut
• isLogged
• saveAddress
• getUserModel
• createCard
• abonnere
• Avslutte abonnementet

/assets/js/services/userService.js

/ * global vinkel, Stripe, konsoll * / 'bruk streng'; angular .module ('tutsplus.service') .factory ('userService', ['$ q', '$ stamplay', funksjon ($ q, $ stamplay) var user = $ stamplay.User (). login: funksjon () return user.login ('facebook');, logout: funksjon () return user.logout ();, isLogged: function () return user.isLogged ();, saveAddress : funksjon (adresse, by, postnummer) // Lagre brukerens adresseinformasjon, getUserModel: funksjon () // Få brukerinformasjon, createCard: funksjon (cardObj) // Samle kredittkortinformasjon og lagre det via Stripe , abonnere: funksjon (planId) // Abonner bruker, abonnement: funksjon (planId) // Avbryt brukerabonnement;]);

Vår søknad vil ha tre sider:

• home.html, hovedlandsiden hvor brukeren vil kunne registrere seg
• subscriptions.html, der brukere kan se boksene som er tilgjengelige for et abonnement
• profile.html, hvor brukere kan redigere informasjonen deres og avbryte et abonnement

Disse sidene styres av tre kontrollører (som foreslått av beste praksis), som er homeCtrl.js, abonnementCtrl.js og profilCtrl.js.

Sidemaler og kontroller er bundet sammen av hovedvinkelen.

Her er grunnlaget for vår app.js:

/ * global vinkel * / 'bruk streng'; angular.module ('tutsplus', ['tutsplus.service', 'ngRoute', 'ui.router', 'ngStamplay']); Angular .module ('tutsplus') .config (funksjon ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/'); $ stateProvider .state ('home', url: '/', templateUrl: '/ sider / home.html ', kontroller:' homeCtrl ', controllerAs:' home ') .state (' abonnementer ', url:' / abonnementer ', templateUrl:' /pages/subscriptions.html ', kontroller:' abonnementCtrl ', controllerAs:' sub ') .state (' profil ', url:' / profil ', templateUrl:' /pages/profile.html ', kontroller:' profileCtrl ', controllerAs:' profile '); ) / * * Lagre logget bruker, hvis tilstede, i rootScope * / .run (['$ rootScope', 'userService', funksjon ($ rootScope, userService) userService.getUserModel () .then (funksjon (userResp)  $ rootScope.user = userResp;);]); 

Nå må vi bare laste inn våre nye filer i index.html under bibliotekene vi la til tidligere.

/index.html

... leder av index.html-filen ...            

3.4 Front-end-godkjenning

Vi har koblet opp vårt Facebook-program tidligere, og nå må vi gi brukerne en måte å bruke den på! All autentisering håndteres av Stamplay. Vi trenger ikke å kode noe opp; Vi trenger bare å koble brukerne til autentiseringsbanen som Stamplay har gitt oss.

Autentiseringsprosessen ser slik ut:

• Koble brukere til vår autentiseringsadresse.
• Autentisering skjer på Facebook.
• Facebook sender en bruker tilbake til vår søknad med et token.
• Stamplay håndterer lagring det token og vår bruker er autentisert.

Vi trenger bare å konfigurere den første av disse trinnene manuelt. La oss bruke vår Angular app med ng-app og ng-kontrolleren til index.html og legg til noen Angular Directives for å koble hjemmesiden til vårt homeCtrl.js. Vi skal også fjerne alt mellom