{"id":685,"date":"2017-11-14T12:25:17","date_gmt":"2017-11-14T20:25:17","guid":{"rendered":"https:\/\/www.kenwalger.com\/blog\/?p=685"},"modified":"2018-01-11T06:32:57","modified_gmt":"2018-01-11T14:32:57","slug":"mongodb-stitch-tutorial","status":"publish","type":"post","link":"https:\/\/www.kenwalger.com\/blog\/nosql\/mongodb\/mongodb-stitch-tutorial\/","title":{"rendered":"MongoDB Stitch Tutorial"},"content":{"rendered":"

I have talked about MongoDB<\/a>‘s Backend as a Service (BaaS) Stitch previously<\/a>. In this post, let’s take a look at a basic Stitch application and how easy it is to get started. For this particular tutorial, we’ll be looking at basic Stitch functionality. However, I’ll point out some options along the way for extending the application.<\/p>\n

The Stitch Application Overview<\/h3>\n

For this tutorial, let’s imagine an application that tracks blood glucose<\/a> for diabetic patients<\/a>\"\". A blood sugar monitor, like the One Drop Chrome<\/a>\"\",\u00a0would send results to our application. Medical practitioners<\/a> could see the results and leave comments on the reading. While beyond the scope of this tutorial, Stitch can integrate with a service such as Twilio<\/a> to send the comments via SMS message to the patient for diabetic management suggestions. From a development perspective, this can be integrated with MongoDB 3.6 Change Streams<\/a> as well.<\/p>\n

A sample application page is available to view here<\/a> with working comments attached to a MongoDB Atlas<\/a> cluster and using Stitch. Let’s see how it was generated.<\/p>\n

Cloud Services<\/h3>\n

Stitch runs on top of Atlas so we’ll need to set those services up.<\/p>\n

Atlas<\/h6>\n

First off we’ll need to log into<\/a> MongoDB Atlas\u00a0or create an account. Then we’ll need to set up an Atlas Cluster. There is an option for an M0 level which is free and doesn’t require a credit card to get started. This is a great feature to be able to try out this incredible service.<\/p>\n

Stitch is currently only located in the AWS US East 1 region so it is best to set your cluster up in that region for optimal performance. Once the cluster is configured, deployed, and initialized we’ll move onto setting up Stitch.<\/p>\n

Stitch<\/h6>\n

To get started setting up a Stitch application, in the MongoDB Atlas console, select the\u00a0Stitch App<\/em> option.<\/p>\n

\"Stitch<\/p>\n

Then the\u00a0Create New Application<\/em> button in the upper right. Give the application a name, I’m calling this application\u00a0glucose<\/strong>, and select the MongoDB Atlas Cluster you want to connect to.<\/p>\n

\"New<\/p>\n

It will take a minute to spin up the new application. Once it is up and running, we’ll want to set authentication to\u00a0Anonymous Authentication<\/em>.<\/p>\n

\"Anonymous<\/p>\n

There are a few pieces of information we’ll need from this screen for our application. For this tutorial, we’ll be using the\u00a0information from\u00a0JS(Browser)<\/em> but it is great to see support for Node.js, iOS, and Android configurations as well.<\/p>\n

\"Stitch<\/p>\n

We’ll want to grab the <script><\/code> information from the\u00a0Importing on a Webpage<\/em> bit and add that to our HTML that we’ll generate. We’ll also need the App Id listed later on as well. But first, let’s setup our database and collection. We’ll want to click\u00a0mongodb-atlas<\/em> from the left navigation panel and then the\u00a0Rules<\/em> tab.<\/p>\n

Connect the Database<\/h6>\n

Click\u00a0NEW<\/em> to add a new MongoDB collection<\/a>. For the database, I’ve called mine glucose<\/strong> and I called the collection\u00a0results<\/strong>. Now we’ll need to configure some permissions to allow, for the purposes of this tutorial, anyone to read the comments. Obviously, with sensitive and private medical data we would want to set the permissions to be more strict.<\/p>\n

Under the\u00a0Rules<\/em>\u00a0tab, click on the collection you just created and proceed to the\u00a0Filters<\/em> tab.<\/p>\n

\"\"<\/p>\n

Delete this existing filter and click\u00a0SAVE<\/em>. Now head on over to the\u00a0Field Rules<\/em> tab. In the\u00a0Permissions for top-level document<\/em> section, we’ll want to change the\u00a0Read<\/em> rule to {}<\/code> and click\u00a0SAVE<\/em>.<\/p>\n

\"\"<\/p>\n

With these settings, we are allowing anyone to read any records in glucose.results<\/code>, but only the owners can edit or delete their own comments. Stitch has integration with services such as Facebook and Google via OAuth. Further, custom authentication <\/a>is possible with JSON Web Tokens.<\/p>\n

Stitch the Application to the HTML<\/h3>\n

Now that we’ve set up our Stitch application on the backend, we need to integrate it into our HTML page. For this tutorial, we’re generating a static page with fake data. However, in a real application, we would use some dynamic content. At any rate, let’s see how we can proceed.<\/p>\n

HTML<\/h6>\n

We’ll generate a basic HTML page with our <script><\/code> information in the <head><\/code> section. And we’ll include a form at the end to be able to get input from our medical professionals.<\/p>\n

<!doctype html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"utf-8\">\n        <meta http-equiv=\"x-ua-compatible\" content=\"ie-edge\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Blood Glucose<\/title>\n        <script src=\"https:\/\/s3.amazonaws.com\/stitch-sdks\/js\/library\/stable\/stitch.min.js\"><\/script>\n    <\/head>\n    <body>\n        <h2>Sample Blood Glucose Report<\/h2>\n        <div>\n            <p>Patient Id: 12345<\/p>\n            <p>Date: 5 November 2017<\/p>\n            <p>Time: 07:23am<\/p>\n            <p>Reading was taken: Before Breakfast<\/p>\n            <p>Result: 110<\/p>\n            <hr>\n            <div id=\"comments\">\n            <\/div>\n            <hr>\n            <form>\n                <label for=\"new_comment\">Add Comments:<\/label>\n                <input id=\"new_comment\">\n                <input class=\"button\" type=\"submit\">\n            <\/form>\n        <\/div>\n    <\/body>\n<\/html><\/pre>\n
Let’s also think about what we’re trying to do with our JavaScript and add in the appropriate hooks in our HTML before we tackle our JavaScript.<\/p>\n
Since we want our comments to load when the page does, let’s add an onload<\/code> to the <body><\/code> tag:<\/p>\n
<body onload=\"displayCommentsOnLoad()\"><\/pre>\n
We’ll also need to add an on click listener to our form:<\/p>\n
<input class=\"button\" type=\"submit\" onClick=\"addComment()\"><\/pre>\n
Nice. It seems like, then, that we have three JavaScript functions to write to get our functionality implemented. The two mentioned and a third displayComments<\/code>\u00a0seems like it will be necessary. Let’s tackle those functions next in glucose.js<\/code>.<\/p>\n
JavaScript<\/h6>\n
glucose.js<\/code><\/p>\n
const client = new stitch.StitchClient('glucose-XXXXX');\nconst db = client.service('mongodb', 'mongodb-atlas').db('glucose');\n\nfunction displayCommentsOnLoad() {\n    client.login().then(displayComments();\n}\n\nfunction displayComments() {\n    db.collection('results').find({}).then(docs => {\n        const html = docs.map(c => \"<div>\" + c.comment + \"<\/div>\").join(\"\");\n        document.getElementByID(\"comments\").innerHTML = html;\n    });\n}\n\nfunction addComment() {\n    const foo = document.getElementById(\"new_comment\");\n    db.collection(\"results\").insert({owner_id : client.authedId(), comment : foo.value}).then(displayComments);\n    foo.value = \"\";\n}<\/pre>\n
You’ll want to alter the glucose-XXXXX<\/code> to utilize the App Id for your own application and if you are using a different database and\/or collection names, make those changes as well.<\/p>\n
We’ll also need to add the script to our HTML in the <head><\/code> section:<\/p>\n
<script src=\"glucose.js\"><\/script><\/pre>\n
I have the completed project code<\/a>, with some minimal Foundation<\/a> styling available on GitHub as well.<\/p>\n
Wrap Up<\/h3>\n
And that’s it! Neat. We now have a basic web page that will accept comments from a user (medical professional) and, through the power of Stitch, save the comments in a\u00a0<\/span>MongoDB Atlas hosted database. Stitch has provided the backend power and we just had to write some minimal JavaScript<\/a> functions to handle the button click and document insert into our collection.<\/p>\n
\n
Follow me on Twitter @kenwalger<\/a> to get the latest updates on my postings. Or better yet, sign up for the email list to get updates in your mailbox!<\/p>\n
There are a few MongoDB specific terms in this post. I created a MongoDB Dictionary<\/a> skill for the Amazon Echo<\/a>\u00a0line of products. Check it out and you can say “Alexa, ask MongoDB for the definition of a\u00a0document?” and get a helpful response.<\/p>\n\"Facebook\"<\/a>\"twitter\"<\/a>\"reddit\"<\/a>\"linkedin\"<\/a>\"mail\"<\/a>","protected":false},"excerpt":{"rendered":"
I have talked about MongoDB‘s Backend as a Service (BaaS) Stitch previously. In this post, let’s take a look at a basic Stitch application and how easy it is to get started. For this particular tutorial, we’ll be looking at basic Stitch functionality. However, I’ll point out some options along the way for extending the … Continue reading “MongoDB Stitch Tutorial”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":417,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pmpro_default_level":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6,4],"tags":[72],"yst_prominent_words":[1227,123,89,1114,1127,1128,117,1111,1120,1122,1129,87,1113,1116,1121,1126,805,1107,417,1109],"class_list":["post-685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-mongodb","tag-stitch","pmpro-has-access"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.kenwalger.com\/blog\/wp-content\/uploads\/2017\/06\/mongodbstitch-e1498689024596.png?fit=125%2C125&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8lx70-b3","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":6,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"predecessor-version":[{"id":771,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions\/771"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/media\/417"}],"wp:attachment":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/tags?post=685"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}