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.
- 7. My Device
- 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.
- 19. MongoDB
- 20. MongoDB
- 21. MongoDB
- 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.
- 25. Login Code
- 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.
- 27. OAuth wut?
- 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.
- 34. Google OAuth in 5 Minutes
- 35. 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
- 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.
- 37. Client side routing with iron-router
- 39. Manage User Devices Client Side: Server Side:
- 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:
- 42. Setup Phone #’s • Set up a phone number for each environment.
- 43. Setup TwiML Apps
- 44. Send/Receive SMS with Twilio! Send SMS: Receive SMS:
- 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!
- 50. Set up subscription plans in Stripe
- 51. Initialize Stripe.js on the Client
- 52. Add Credit Card Code Client Side:
- 53. Add Credit Card Code Server Side:
- 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.
- 57. Commit History
- 58. Punchcard
- 59. Questions?