How to build a SaaS solution in 60 days using MeteorJS.

Brett McLainApplication Systems Architect

PotashCorp

About Me

• Application Systems Architect at PotashCorp corporate office.

• Programming for 12 years.

• Married with a 20 month old son - free time comes at a premium.

What am I going to talk about?

• Why I decided to build a SaaS solution.

• What is MeteorJS and why is it special?

• MongoDB

• Twilio

• Stripe

Background

• In 2009 I read this post on hackaday.com:

–http://hackaday.com/2010/01/15/gsm-car-starter/

• The authors car starter had extremely poor range.

• He purchased a GSM controlled relay from China.

• Wired the relay to his car starters key fob.

• Calling the GSM relay would press the button on the key fob.

hackaday.com device

Background

• My truck’s car starter was garbage as well.

• Purchased the same type of device from China and implemented the same solution by cannibalizing one of my car starters key fobs.

• Added a 12V adapter to plug into my cigarette lighter.

My Device

Did others have the same problem as me?

• Step 1 - Build a car starter.

• Step 2 - Buy some devices from China and put them on eBay.

• Step 3 - Profit???

What else can these be used for?• Common use cases for these devices are:

–Turning an irrigation pump on/off.–Opening/closing a gate for gated communities.–Starting a vehicle.–Restarting remote servers.–Wild animal traps (feral hogs).

• Sales grew over time: 3000+ devices sold and nearly $500,000 in sales. Some customers are operating over 100 devices.

Fast forward 4 years...problems...

• Customers were manually keeping track of their devices in Excel spreadsheets.

• Each device has a “whitelist” of allowed phone numbers that can call it. This list is manually maintained in Excel as well.

• Complex syntax for SMS commands meant that using these devices required training.

• Over one hundred different devices in their contacts lists on multiple phones added complexity.

Solution

• Build a centralized command and control web application to manage these devices, send and receive SMS & phone calls, abstract away command complexity, control their “whitelist”, monitor SMS usage, and review audit logs.

Initial Requirements• Needs to be a web application

– MEAN Stack (Mongo, Express.js, Angular JS, Node JS)• Ideally can be compiled for mobile

– Phonegap• Payments

– Paypal• SMS & Phone Calls

– Twilio• Reactive?

Quickly ran into problems…• Needs to be a web application

– MEAN stack has a lot of moving parts.– Need to establish patterns from the ground up.

• Ideally can be compiled for mobile– Phonegap – good.

• Payments– Paypal, frustrating test API/sandbox.– Requires https to even begin testing on their modern API.

• SMS & Phone Calls– Twilio – good.

• Reactive– Didn’t know where to start.

MeteorJS to the rescue!• Needs to be a web application

– MeteorJS provides a full cohesive stack right out of the box with established patterns for everything.

• Mobile– MeteorJS compiles to Phonegap.

• Payments– Stripe.js is outrageously easy to use, same package as Node.js.

• SMS & Phone Calls– Twilio uses same package as Node.js.

• Everything is reactive out of the box!

What is MeteorJS?

• Think of it as a skeleton into which a number of components are inserted in a logical manner to create a cohesive ecosystem for application development.

• Out of the box it comes with most of what you need, however you can swap out almost any piece.

MeteorJS Features•Compiling

– Isobuild Package Manager (coffeescript, less.js, minifiers, templating compilation, npm packages, cordova packages).

•Server Side–Runs on Node.js.

–LiveQuery (Mongo or Redis) Replication Sets/oplog tailing.

–Fibers/Futures for dealing with callback spaghetti.

MeteorJS Features• Communication Layer

–DDP (Distributed Data Protocol)–EJSON (Serializes Dates, Binary)

• Browser–Tracker (backbone for reactivity).– Iron router (routing).–Blaze+Spacebars (templating).–Minimongo.–Hot Code Push.–Session (reactive UI variables)

MongoDB Features

• Is a NoSQL, Document style database that uses BSON (similar to JSON) for storing data.

• Has the concept of “databases”, and tables (called collections).

• Strongly consistent (though that can be changed).

• Sharding.• High availability via replica sets.

MongoDB

MongoDB

MongoDB

So where to start?

• Tempting to just start building some initial basic pages…

• Should really start with authentication first so it’s baked in right from the start.

Authentication/Login• Meteor provides an accounts package that

securely manages authentication for you.• Install the base package to just use simple

username and password:– meteor add accounts-base– meteor add accounts-password

• Provides simple API’s for user creation, account verification (email), login, password reset, and forgotten password.

User Creation Code

Login Code

OAuth wut?• Simple username and password is fine, but I

really love websites that allow me to use my google account to login to their site. This is called OAuth.

• “OAuth is an open standard for authorization, commonly used as a way for internet users to log into third party websites using their Microsoft, Google, Facebook, or Twitter accounts without exposing their password.” - Wikipedia.

OAuth wut?

Google OAuth in 5 Minutes• In MeteorJS you can implement Google

OAuth in less than 5 minutes.• Step 1 -Add the accounts-google package:

–meteor add accounts-google• Step 2 - Sign up for a google developer

account if you don’t already have one, then go to the google developer console:

–https://console.developers.google.com/• Step 3 - Create a project in the google

developer console.

Google OAuth in 5 Minutes

• Step 4 - Create OAuth client ID.

Google OAuth in 5 Minutes

• Step 5 - Add the OAuth keys to the MeteorJS settings.json file. This makes them globally accessible (private is server side only, public is both client and server side).

Google OAuth in 5 Minutes

• Step 6 - Add the service configuration for Google on the server side using the google clientId and secret that was generated by your OAuth client ID.

Google OAuth in 5 Minutes

• Step 7 - Add login code on the client.

Google OAuth in 5 Minutes

• Step 8 - Add an Accounts.onCreateUser() hook.

Google OAuth in 5 Minutes

Other OAuth Packages Available● oauth-encryption● accounts-password● accounts-google● accounts-facebook● accounts-twitter● accounts-weibo● accounts-meteor-developer● accounts-github● accounts-meetup● accounts-oauth

Auth is done, so what next?

• Build out the app to allow users to manage their devices.

• Send and receive SMS, and place phone calls.

• Pay for their subscription.

• Let’s go over each of these.

Client side routing with iron-router

Manage User Devices

Manage User DevicesClient Side:

Server Side:

Manage User Devices

Send/Receive SMS with Twilio!

• Twilio is a service that sells you a phone number and allows you to send/receive SMS and phone calls using their API’s.

• Founded in 2007, SMS API released in 2010.

• Extremely cheap:

Setup Phone #’s

• Set up a phone number for each environment.

Setup TwiML Apps

Send/Receive SMS with Twilio!

Send SMS:

Receive SMS:

Place a Phone Call with Twilio!

• Twilio uses TwiML, an XML-based language that consists of five basic verbs for Voice calls: Say, Play, Gather, Record, Dial.

Phonecall Callback

Show Me The Money

• Our service now displays some devices and let’s you send/receive an SMS or phone call.

• How do you make money off your service?

PayPal?

• Initially used PayPal as I had some experience with it from working on PHP based e-commerce sites.

• Requires SSL for their modern API’s, however older features such as PayPal buttons work without SSL.

• Their TEST sandbox is a confusing nightmare.

PayPal sucks, Stripe.js is best!

• Stripe is a payment service that was founded in 2010 by John and Patrick Collison.

• Went live 2012.

• Extremely clean and simple API.

• PCI compliant out of the box; nothing is handled on the server side thanks to Stripe.js!

Set up subscription plans in Stripe

Initialize Stripe.js on the Client

Add Credit Card CodeClient Side:

Add Credit Card Code

Server Side:

Create a Subscription

Subscription Changes/Billing

• Stripe allows you a user to change their subscription at any time and pro-rate it.

• Changing the subscription is as simple as updating which plan the user wants and that’s it, no hassle refunding the customer or messing around with account balances.

Conclusion

• I taught myself Meteor JS and built the majority of this site over the course of 2 months.

• I have no time tracking data available and unfortunately have no idea how much time I spent on this.

Commit History

Punchcard

Questions?