Hur man bygger en prenumerationslåda med stamplay

Prenumerationslådor är idag en alltmer populär affär. Du kan hitta dem för allt från grooming produkter till friska snacks, barnspel och till och med glass. I den här handledningen visar jag dig hur du snabbt bygger en webbapp för att testa om du kan hitta de första 1000 kunderna för din prenumerationsboksidé!

Vår app är inspirerad av cocktailabonnemang Shaken och innehåller följande funktioner:

• Registrera användare via Facebook.
• Aktivera återkommande betalningar via Stripe.
• Pausa och återaktivera prenumerationer.
• Skicka transaktionsmeddelanden.
• Lägg till användare på en MailChimp-lista.

Denna handledning visar dig hur du konfigurerar ett fullföljande back-end och hur du bygger den AngularJS-fronten som hakar upp till det.

Den fullständiga kodbasen för fronten finns på GitHub.

Kupong: Stamplay har gett Tuts + läsare en exklusiv kupong för att ge 6 månader i plusplanen gratis ($ 600 värde). Kupongkoden är CODETUTSPLUS och den löper ut den 10 oktober. Registrera dig nu gratis för att lösa in den.

1. Stamplay: API Lego för utvecklare

Stamplay är en webbaserad utvecklingsplattform som ger utvecklare ett otroligt snabbt sätt att bygga helt integrerade applikationer. Stamplay hanterar besväret att prata med många olika API, så att du inte behöver.

Stamplay bygger på begreppet komponenter; komponenter är byggstenarna i vår ansökan. Vi kan se de olika verktygen som är tillgängliga för oss under Uppgifter> Komponenter.

När du är inloggad hälsas du med denna enkla och eleganta instrumentbräda. Vi skapar en applikation här. Namnge det som du vill, men kom ihåg att det här namnet är vad vi ska använda för att identifiera vår ansökan. Detta kommer också att användas som webbadress för vår ansökan när den är värd.

I vårt fall använder vi "tutsplus", och vår ansökan kommer att vara värd på https://tutsplus.stamplayapp.com.

Nu börjar vi konfigurera bakre änden.

1.1 Konfigurering av baksidan: Integrerande Facebook-registrering

Den här appen kommer att innehålla en Facebook-inloggning. Vi kommer att kunna interagera med Facebook API och hantera inloggning och inloggning, alla utan en enda kodrad. Eftersom vi vill att våra användare ska registrera sig med Facebook måste vi gå vidare till sidan Facebook Developers och skapa en ny utvecklarapp.

Välj Hemsida, och när du får din app skapad kan vi ta två saker som vi behöver från Facebook för att integrera med Stamplay:

• App ID
• App Secret

Dessa två saker finns under Inställningar> Grundläggande.

Nu när vi har vårt App ID och App Secret, kan vi ansluta dem till Stamplay.

Gå tillbaka till Stamplay och välj användare från huvudmenyn, och sedan autentisering. Lägg till Facebook som registreringsservice, kopiera och klistra in App ID och App Secret, och klicka Spara.

Du kan nu registrera användare via Facebook!

Nu när vi har anslutit våra Facebook-referenser tillhandahåller Stamplay en bekväm API-adress för att hantera inloggning med Facebook. Låt oss gå dit nu och se vår Facebook-inloggning i aktion. 

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

Och boom! Du har din Facebook-inloggning igång.

1.2 Konfigurera baksidan: Hantera data med objekt

Inte allt kan hanteras med komponenter, så Stamplay ger oss ett enkelt sätt att hantera anpassade data. Tänk på detta som back-end-databasgränssnittet för din ansökan.

Order spåras med ett Objekt som heter order. Den har följande fem egenskaper:

• aktiv (booleska) // för att spåra om prenumerationen är aktiv eller inte
• adress (plain_object) // användarens adressinformation
• plan (sträng) // planen användaren prenumererade på
• stripesubscription (string) // prenumerations-id som genereras av Stripe
• användare (user_id) // den unika _id av vår användare

Stamplay kommer omedelbart att avslöja RESTful APIs så fort du skapar objektet. Slutpunkten kommer att se ut så här: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Konfigurera Stripe

Vi måste fakturera våra kunder regelbundet, och tack och lov är det enkelt att göra med Stripe! Den återkommande betalningsbearbetningen genomförs inom plankonceptet. Stripplaner är objekt som representerar kostnads- och faktureringscykeln för dina prenumerationer.

För att ställa upp det måste du skapa din plan i Stripe Console> Planer:

När du är klar, gå tillbaka till Stamplay och anslut Stripe-komponenten i Uppgift> Komponenter. Välj Rand modul och klicka på Ansluta knapp.

Nu kommer Stripe-kontot att kopplas till Stamplay-appen, som kan utföra API-förfrågningar på våra vägnar.

Efter en framgångsrik Stripe-anslutning hamnar du på en vy som den här.

1.4 Konfigurera MailChimp

För att konfigurera MailChimp är processen ganska lik koppla enkelt ditt MailChimp-konto som du tidigare gjorde med Stripe, så ser du en sida så här:

2. Lägga till automation med uppgifter

Detta är serverns sida av vår ansökan, där huvuddelen av magiken händer! Låt oss säga att vi vill göra ett par saker:

• Skicka ett meddelande till "Välkommen" när en användare registrerar sig med Facebook.
• Lägg till användare på en MailChimp-lista när de registrerar sig.

Dessa två saker skulle normalt kräva en bra bit av kod, men inte med Stamplay ...

2.1 Välkommen e-post

En trollkarl tar dig genom konfigurationen av uppgiften. Under Uppgifter> Hantera, skapa en ny uppgift och sätt upp det som du vill ha. Så här har vi ställt in välkommen e-post-uppgiften:

Då kan du konfigurera åtgärden som använder variablerna som kommer ut från avtryckaren (i det här fallet användaren). Så här har vi konfigurerat vårt:

2.2 Tryck användare på en MailChimp-lista

Att skicka användarnas e-post till din e-postlista på MailChimp är enkelt.

Under Uppgifter> Hantera, skapa en ny uppgift och sätt upp det som du vill ha. Så här har vi satt upp MailChimp-prenumerationsuppgiften.

3. Frontänden

För att börja arbeta med vår främre del behöver vi använda Stamplay CLI-verktyget.

3.1 Installera Stamplay CLI

Det här verktyget ger oss möjlighet att arbeta med våra Stamplay-applikationer. Det tillåter oss att:

• distribuera applikationer
• starta en lokal server för utveckling
• initiera ett Stamplay-projekt
• Rulla versioner
• ladda ner den senaste versionen

$ npm installera -g stamplay-cli

Låt oss skapa en ny mapp och initiera vår Stamplay-applikation till den mappen.

$ mkdir tutsplus && cd tutsplus $ stamplay init

Du blir uppmanad att ange din appId (namnet på din app) och din apikey. I det här fallet är de tutsplus och 4 **** 0 respektive.

Detta kommer att skapa en stamplay.json-fil i roten till din app så att Stamplay när du distribuerar känner till dina uppgifter.

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

3.2 Bygga framänden

För att träffa marken med en bra design började vi från en av de många coola gratis HTML5-mallarna som drivs av Templated.co. Den vi använde heter Retrospect.

Låt oss ladda ner det och pakka ut det till vår projektmapp. Låt oss sedan installera några ytterligare bibliotek här med Bower. Kör följande kommando och vi kommer att vara bra att gå:

$ bower installerar vinkelvinkel-ui-router vinkel-stamplay stamplay-sdk vinkelrute -save

För att kunna använda Stamplay med Angular måste vi:

• ladda Stamplay SDK
• konfigurera Stamplay-programmet
• Belastning
• ladda Angular UI Router
• ladda biblioteket Angular-Stamplay (bara ett serviceomslag för SDK)

Här är de linjer som krävs för att göra allt detta. Vi lägger till dem nedanför tagg av vår index.html-fil:

 ...  ...              

Se till att du har skrivit din egen APPID in i funktionen Stamplay.init. Vi kan nu starta vår lokala server för att säkerställa att allt laddas korrekt. Kör följande:

stamplay start

Du kommer att se att din ansökan är redo att gå på http: // localhost: 8080.

3.3 Vinkelapplikationen

Vi kommer att skapa några filer för vår kantiga applikation:

De två tjänstefilerna kommer att använda Stamplay SDK och vinkel-stam-spelbibliotek för att hjälpa vår applikation att interagera med vår stamdata.

Det viktigaste är userService.js. Den har några funktioner och hjälper oss att fånga data eller skapa data. För en mer djupgående titt på vad Stamplay SDK kan hantera, var noga med att kolla in dokumentationen.

UserService.js använder Stamplay JS SDK för att ge våra Angular app följande funktioner:

• logga in
• logga ut
• isLogged
• saveAddress
• getUserModel
• createCard
• prenumerera
• säga upp

/assets/js/services/userService.js

/ * global vinkel, Stripe, konsol * / 'använd strikt'; angular .module ('tutsplus.service') .factory ('userService', ['$ q', '$ stamplay', funktion ($ q, $ stamplay) var användare = $ stamplay.User (). login function return user.login ('facebook';, logout: funktion () return user.logout ();, isLogged: function () return user.isLogged ();, saveAddress : // Funktion (adress, ort, postnummer) // Spara användarens adressinformation, getUserModel: function () // Få användarinformation, createCard: function (cardObj) // Samla kreditkortsinformation och lagra den via Stripe , prenumerera: funktion (planId) // Prenumerera användare, unsubscribe: function (planId) // Avbryt användarabonnemang;]);

Vår ansökan har tre sidor:

• home.html, den viktigaste målsidan där användaren kommer att kunna registrera sig
• subscriptions.html, där användarna kan se de rutor som finns tillgängliga för en prenumeration
• profile.html, där användarna kan redigera sin information och avbryta en prenumeration

Dessa sidor hanteras av tre kontrollanter (som rekommenderas av bästa praxis), som är homeCtrl.js, subscriptionCtrl.js och profileCtrl.js.

Sidmallar och kontroller är bundna av huvudvinkelappen.

Här är grunden för vår app.js:

/ * global vinkel * / 'använd strikt'; angular.module ('tutsplus', ['tutsplus.service', 'ngRoute', 'ui.router', 'ngStamplay']); vinkel. modul ('tutsplus') .config (funktion ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/'); $ stateProvider.state ('home', url: '/', templateUrl: '/ sidor / home.html ', controller:' homeCtrl ', controllerAs:' home ') .state (' prenumerationer ', url:' / abonnemang ', templateUrl:' /pages/subscriptions.html ', controller:' subscriptionCtrl ', controllerAs:' sub ') .state (' profil ', url:' / profil ', templateUrl:' /pages/profile.html ', controller:' profileCtrl ', controllerAs:' profil '); ) / * * Spara loggad användare, om den finns, i rootScope * / .run (['$ rootScope', 'userService', funktion ($ rootScope, userService) userService.getUserModel () .then (funktion (userResp)  $ rootScope.user = userResp;);]); 

Nu behöver vi bara ladda våra nya filer i index.html nedanför de bibliotek vi lagt till tidigare.

/index.html

... huvudet av index.html-filen ...            

3.4 Gränssnittskontroll

Vi kopplade upp vårt Facebook-program tidigare, och nu måste vi ge våra användare ett sätt att använda det! All autentisering hanteras av Stamplay. Vi behöver inte koda något Vi behöver bara länka våra användare till den autentiseringsväg som Stamplay har gett oss.

Autentiseringsprocessen ser så här ut:

• Länk användare till vår autentiseringsadress.
• Autentisering sker på Facebook.
• Facebook skickar en användare tillbaka till vår ansökan med ett token.
• Stamplay handles lagra den token och vår användare är autentiserad.

Vi behöver bara manuellt konfigurera det första av dessa steg. Låt oss tillämpa vår Angular app med ng-app och ng-regulator till index.html och lägg till några Angular Directives för att ansluta hemsidan med vår homeCtrl.js. Vi ska också ta bort allt mellan