MongoDB.local Dallas 2019: MongoDB Stitch Tutorial

MongoDB “Hands On” Stitch
Tutorial
Britton LaRoche, Senior Solutions Architect, MongoDB
Enabling the developer!

Britton LaRoche
Senior Solutions Architect, MongoDB
Stitch Evangelist

Agenda
• Atlas & Stitch Overview
• The Power of the Stitch Tutorial
• Major Airlines Hackathon
• Investment Company Enablement
• Auto Manufacturer Enablement
• Let's do this! Hands on tutorial
• MongoDB Stitch Deep Dive
• What Happened at the Auto Manufacturer

Stitch & Atlas Accelerate Everything
Cloud Infrastructure
Services and APIs
Application Logic
MongoDB Atlas
Rapidly deploy, dynamically scale, and distribute
databases across regions and cloud providers
MongoDB Stitch
Serverless platform that allows developers to focus
on innovation rather than plumbing, services
orchestration, and boilerplate code
2-5x increase in productivity
Client Application or Service
Application Logic
Data
Data generated from your application is sent and retrieved
through the Stitch Client SDK

Focus Your Energy Where You Can Make a Difference
App Backend Infrastructure
Core Database Functionality
Storage
Service integrations, data access control
Code that moves the business forward
Managing OS, Scale, Security, Backups, etc.
MongoDB
Atlas
MongoDB
Stitch Fully managed
Elastic scale
Highly Available
Secure
Customer can focus here
Time
40%
40%
20%

Developer Options: On Prem, Self-managed or DBaaS
Developer Options
With MongoDB
Self-Managed
Aka “Lift and Shift”
Database as
a service
Slow and complicated
No elasticity
Highly manual
Reduces agility
Self-service (Quick and Easy)
Fully elastic
Consumption based
Accelerates time to value & Reduces
Complexity
Dependent on OPS team
Requires Hardware and Networking
Long Turnaround Time
Reduces agility
On Prem
Traditional Operations

Stitch Server
Client Applications
Client and Server side Stitch Code
JavaScript Browser SDK
JavaScript NodeJS SDK
Android SDK
iOS SDK
React Native SDK
Electric Imp Library (IoT)
https://s3.amazonaws.com/stitch-sdks/js-server/docs/4/index.html
https://docs.mongodb.com/stitch/wire-
protocol/#id1
Wire Protocol
HTTPS REST
https://docs.mongodb.com/stitch/procedures/init-stitchclient/
mongodb://<credentials>@stitch.mongodb.com:27020/?<parameters>
MDB Driver
Mongo Shell
Python
C++11
Perl
Stitch Triggers
Stitch Functions
Application
Logic
Atlas
Application
Logic
Service
Integrations
https://docs.mongodb.com/stitch/servic
es/
Authentication Providers

MongoDB Stitch & the power of the
tutorial!
Power of Simplicity!

Major Airlines Hackwars
April 20th -21st 2018 - 2 Day Hackathon
• 1,200 Developers
• 100 Teams (12 developers each)
• 37 Teams used MongoDB
• 4 Teams of the top 5 finalists used MongoDB
• 3 of the 4 finalists used Stitch
Two SAs Triaged 370 Developers with MongoDB Questions
• 90% of the problems were related to connecting to Atlas
• 10% of the problems related to the Development
Environment
• MongoDB Stitch Tutorial - Blog Comments (Provided
Solution) Developers effective in less than 30 minutes.
5 Winning Teams by Percentage
The Blog Tutorial enabling
developers with Stitch directly
resulted in 60% of the winning
teams!

MongoDB Stitch Tutorials
Utilizing the Basic Blog Tutorial
Major Airline Hackathon
developers were productive within
15 to 30 minutes.
Required: Text Editor & Browser

From tutorial to prototype!

Financial Investment Company
Multiple Meetings with 3 different groups
• Solution Architects
• Developers
• DBAs
Challenge: Employee Compliance Project
• Questions around the document model, and tracking history of changes.
• Hackathon (Port 27017 Blocked)
• Trouble installing Operations Manager
• Delays in getting test environment for Hackathon

Demonstrated how the Blog tutorial
could rapidly become an employee
compliance application.
Did not require port 27017 to be opened,
No need for on prem test environment or
OPS Manager

Took the base employee collection and added a
trigger to track employee changes and call a function
to insert change documents in historical collections.
One employee history collection had the full
document, another collection had only the individual
updates.
Trigger
Function

From prototype to production!

Car Manufacturer
All of them complete the
blog tutorial and see how
to extend the tutorial with
stitch functions and
triggers.August 30th 2018 - 35 Developers representing 8 cross functional
teams inside the Auto Manufacturer attend hands on training with
Atlas and Stitch.

Car Manufacturer - Wow Factor!
Rock Star Developer, Scrum Product Owner at a auto manufacturer, took
the blog tutorial and turned it into a fully functional prototype for a cloud
based vehicle telematics application in one weekend!
Rock Star Developer /
Scrum Product
Owner

Car Manufacturer - Wow Factor!
August 2018 - Development
September 2018 - Staging
December 2018 - Production
Concept to
Production in 4
months!

Blog tutorial introduction
Here we go!

Developer Enablement
Toggle between 5 windows:
1. Atlas Browser
2. Stitch Console
3. Compass
4. Text Editor
5. HTML Application
We go over every line in the Basic Blog tutorial and
explain what it means. Make sure everyone is on the
same step, answer questions and be patient.
Show each step in each window. Do it together.
Even with missteps and questions the entire process
will take about 30 minutes...

Basic Blog Tutorial
<html>
<head>
</head>
<body>
<h3>This is a great blog post</h3>
<div id="content">
I like to write about technology because I want to get on the
front page of hacker news. (In a good way)
</div>
<hr>
<div id="comments"></div>
</body>
</html>
Nothing Special with the first step. Its basic HTML.
Save the file as BasicBlogDemo.html and double click the file, it will
open in your browser.
You can see the header, the content and the hard rule at the bottom

Basic Blog Tutorial
<html>
<head>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.0/stitch.js"></script>
</head>
<body>
<div id="content">
I like to write about technology because I want to get on the front page of hacker news. (In a good way)
</div>
<hr>
</body>
</html>
Ok, we just now included the stitch client browser SDK!

Basic Blog Tutorial
<html>
<head>
<script>
// Initialize the App Client
const client = stitch.Stitch.initializeDefaultAppClient("<your-app-id>");
// Get a MongoDB Service Client
const mongodb = client.getServiceClient(stitch.RemoteMongoClient.factory,"mongodb-atlas");
// Get a reference to the blog database
const db = mongodb.db("blog");
</script>
</head>
<body>
<div id="content">
I like to write about technology because I want to get on the front page of hacker news. (In a
good way)
</div>
<hr>
</body>
</html>
Stitch client browser
SDK
Stitch APP ID
Stitch Client Connection
Stitch Database
We now have everything
we need to connect to
the Atlas database
instance for our
Application!

Basic Blog Tutorial
<html>
<head>
<script>
function displayComments() {
db.collection('comments').find({}, {limit: 1000}).asArray()
.then(docs => {
const html = docs.map(c => "<div>" + c.comment +
"</div>").join("");
document.getElementById("comments").innerHTML = html;
});
}
</script>
</head>
<body>
<div id="content">
good way)
</div>
<hr>
</body>
</html>
Our first real function!
Then we display them
in the comments div as
html for the user to view
We specify the
comments collection
We find the documents,
and specify a limit of
1,000
We Loop through the
array of documents and
store them in a variable
called html.

Basic Blog Tutorial<html>
<head>
<script>
.then(docs => {
"</div>").join("");
});
}
function displayCommentsOnLoad() {
client.auth
.loginWithCredential(new stitch.AnonymousCredential())
.then(displayComments)
.catch(console.error);
}
</script>
</head>
<body>
<div id="content">
good way)
</div>
<hr>
</body onload="displayCommentsOnLoad()>
</html>
Our next function logs
us into our database
We have connected to
the database and run
our first query! Check
the stitch console logs.
It calls the display
comments function after
logging in.
The function to connect
to the database is
called in the body
onload...
Save the changes and
refresh the browser.

Basic Blog Tutorial
...
function addComment() {
const newComment = document.getElementById("new_comment");
console.log("add comment", client.auth.user.id)
db.collection("comments")
.insertOne({ owner_id : client.auth.user.id, comment: newComment.value })
.then(displayComments);
newComment.value = "";
}
.then(docs => {
"</div>").join("");
});
}
...
</script>
</head>
<body>
<div id="content">
good way)
</div>
<hr>
Add comment:
<input id="new_comment"><BR>
<input type="submit" onClick="addComment()">
<hr>
</body onload="displayCommentsOnLoad()>
</html>
Now we insert a
comment into our Atlas
database through the
stitch API, and then
retrieve it for display
The value we insert is
obtained from an input
field added here.
The add comment
function is called from
the submit button
Our first stitch App is
complete!

Basic Blog Tutorial
Play with it, add more
comments.
Add new fields, see what
happens. You are well on
your way to being able to
start writing a new
application.
You now have a basic
understanding and are ready
for more.

Hands on!
Let’s Create an
Atlas Cluster &
Stitch Application
Here we go!

Car Manufacturer
Do we have to use the stitch GUI?
Answer 1: You can, but you are not required to use it.
Answer 2: You can integrate stitch apps into your existing CICD
infrastructure.
Git clone and a command line stitch import example is defined
in the “ToDo App - Web” tutorial. Stitch code can be fully
automated with CICD scripts. Simply check code in to your
github repository, add script calls to import code from your
development environment into stitch for build and deployment.

Car Manufacturer
Sept 13th 2018
Over 30 developers from cross functional
teams inside the car manufacturing
company attend a second hands on
training with Atlas and Stitch.
This time we cover the Todo Web app and
integrate authentication services with
Facebook and Google to Atlas through
stitch. We cover making service calls
through Twilio.

MongoDB.local Dallas 2019: MongoDB Stitch Tutorial

Recommended

More Related Content

What's hot (20)

Similar to MongoDB.local Dallas 2019: MongoDB Stitch Tutorial (20)

More from MongoDB (20)

Recently uploaded (20)

MongoDB.local Dallas 2019: MongoDB Stitch Tutorial