TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
How to build a SaaS solution in 60 days
1. How to build a SaaS solution in
60 days using MeteorJS.
Brett McLain
Application Systems Architect
PotashCorp
2. 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.
3. 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
4. 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.
6. 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.
8. 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???
9. 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.
10. 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.
11. 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.
12. 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?
13. 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.
14. 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!
15. 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.
16. 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.
17. 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)
18. 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.
22. 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.
23. 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.
26. 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.
28. 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.
29. Google OAuth in 5 Minutes
• Step 4 - Create OAuth client ID.
30. 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).
31. 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.
32. Google OAuth in 5 Minutes
• Step 7 - Add login code on the client.
33. Google OAuth in 5 Minutes
• Step 8 - Add an Accounts.onCreateUser() hook.
36. 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.
41. 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:
45. 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.
47. 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?
48. 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.
49. 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!
55. 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.
56. 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.