How to build a SaaS solution in 60 days
-
Upload
brett-mclain -
Category
Technology
-
view
202 -
download
2
Transcript of How to build a SaaS solution in 60 days
![Page 1: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/1.jpg)
How to build a SaaS solution in 60 days using MeteorJS.
Brett McLainApplication Systems Architect
PotashCorp
![Page 2: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/2.jpg)
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.
![Page 3: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/3.jpg)
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
![Page 4: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/4.jpg)
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.
![Page 5: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/5.jpg)
hackaday.com device
![Page 6: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/6.jpg)
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.
![Page 7: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/7.jpg)
My Device
![Page 8: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/8.jpg)
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???
![Page 9: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/9.jpg)
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.
![Page 10: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/10.jpg)
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.
![Page 11: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/11.jpg)
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.
![Page 12: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/12.jpg)
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?
![Page 13: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/13.jpg)
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.
![Page 14: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/14.jpg)
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!
![Page 15: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/15.jpg)
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.
![Page 16: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/16.jpg)
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.
![Page 17: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/17.jpg)
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)
![Page 18: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/18.jpg)
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.
![Page 19: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/19.jpg)
MongoDB
![Page 20: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/20.jpg)
MongoDB
![Page 21: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/21.jpg)
MongoDB
![Page 22: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/22.jpg)
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.
![Page 23: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/23.jpg)
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.
![Page 24: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/24.jpg)
User Creation Code
![Page 25: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/25.jpg)
Login Code
![Page 26: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/26.jpg)
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.
![Page 27: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/27.jpg)
OAuth wut?
![Page 28: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/28.jpg)
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.
![Page 29: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/29.jpg)
Google OAuth in 5 Minutes
• Step 4 - Create OAuth client ID.
![Page 30: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/30.jpg)
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).
![Page 31: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/31.jpg)
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.
![Page 32: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/32.jpg)
Google OAuth in 5 Minutes
• Step 7 - Add login code on the client.
![Page 33: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/33.jpg)
Google OAuth in 5 Minutes
• Step 8 - Add an Accounts.onCreateUser() hook.
![Page 34: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/34.jpg)
Google OAuth in 5 Minutes
![Page 35: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/35.jpg)
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
![Page 36: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/36.jpg)
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.
![Page 37: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/37.jpg)
Client side routing with iron-router
![Page 38: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/38.jpg)
Manage User Devices
![Page 39: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/39.jpg)
Manage User DevicesClient Side:
Server Side:
![Page 40: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/40.jpg)
Manage User Devices
![Page 41: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/41.jpg)
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:
![Page 42: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/42.jpg)
Setup Phone #’s
• Set up a phone number for each environment.
![Page 43: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/43.jpg)
Setup TwiML Apps
![Page 44: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/44.jpg)
Send/Receive SMS with Twilio!
Send SMS:
Receive SMS:
![Page 45: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/45.jpg)
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.
![Page 46: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/46.jpg)
Phonecall Callback
![Page 47: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/47.jpg)
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?
![Page 48: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/48.jpg)
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.
![Page 49: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/49.jpg)
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!
![Page 50: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/50.jpg)
Set up subscription plans in Stripe
![Page 51: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/51.jpg)
Initialize Stripe.js on the Client
![Page 52: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/52.jpg)
Add Credit Card CodeClient Side:
![Page 53: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/53.jpg)
Add Credit Card Code
Server Side:
![Page 54: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/54.jpg)
Create a Subscription
![Page 55: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/55.jpg)
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.
![Page 56: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/56.jpg)
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.
![Page 57: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/57.jpg)
Commit History
![Page 58: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/58.jpg)
Punchcard
![Page 59: How to build a SaaS solution in 60 days](https://reader033.fdocuments.in/reader033/viewer/2022051318/5878e3361a28abfa038b4f3f/html5/thumbnails/59.jpg)
Questions?