Blog App: Create a Web Client

最新推荐文章于 2024-05-16 08:37:20 发布

Bol5261

最新推荐文章于 2024-05-16 08:37:20 发布

阅读量236

点赞数

分类专栏： MongoDB(Collenction-oriented) 文章标签： mongodb

原文链接：https://docs.mongodb.com/

版权

MongoDB(Collenction-oriented) 专栏收录该内容

190 篇文章 0 订阅

订阅专栏

MongoDB Logo
ServerDriversCloudToolsGuides
Get MongoDB
Close ×
MongoDB Stitch

Introduction
Tutorials
    Overview
    Basic Blog Tutorial
        Blog App Overview
        Build the Blog Backend
        Build a Web-based Blog Client
    To-Do App Tutorial
        To-do App Overview
        Build the To-do Backend
        Build a To-do Client
        Add Google Authentication
        Add Facebook Authentication
        Add Collection-Level Watch
Users & Authentication
MongoDB Atlas
GraphQL
MongoDB Mobile
Functions
Triggers
External Services
Values & Secrets
Application Deployment
Hosting
Troubleshooting
Stitch Administration
Application Logs
Client SDKs
Release Notes

Stitch > Tutorials > Basic Blog Tutorial

Blog App: Create a Web Client

Author: Stitch Documentation Team

In this guide, we’ll create the frontend of our blog. Our blog frontend needs to:

allow users to log in
allow users to create comments on a blog post
allow users to view the comments of other users on blog posts

Since our backend is already set up, all we need to do is call the right APIs for each of these actions.

Time required: 15 minutes
What You’ll Need

If you have not yet built the backend for the blog, follow the steps in the Create the Backend guide.
Procedure

Note

You can download the completed blog.html file for this tutorial in the blog folder in the tutorials repo.
1
Create an HTML page

Begin by creating a file named blog.html and copy the following HTML into the file:
blog.html

This is a great blog post

I like to write about technology because I want to get on the front page of hacker news.

2
Include the MongoDB Stitch JavaScript SDK

We need the JavaScript SDK to communicate with Stitch from our blog code. To include the SDK, add the following

3
Initialize Stitch Clients

Apps communicate with Stitch by calling methods on client objects from the Stitch SDK. We need to initialize an app client and a MongoDB Service client to store comments in MongoDB.

To set up Stitch:

Paste the following <script> tag in blog.html beneath the tag that imports the Stitch SDK:

<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>

In the code you just pasted, replace <your-app-id> with your Stitch application’s App ID. You can find the App ID on the Clients page of the Stitch UI.

4
Query and Display Comments on Page Load

We can use the MongoDB Service client we just created to query the blog.comments collection. Once we have the comments documents, we can map them to HTML and display them on the blog post.

To query and display comments, add the following function to the

Important

MongoDB Stitch requires users to log in before interacting with any Stitch service. Even though we configured the rules for the blog.comments collection, this query won’t work unless a user is logged in.
5
Log In and Display Comments On Load

Users log in to Stitch applications with a provider-specific credential object that we pass to the loginWithCredential() function. We created an anonymous authentication provider in Stitch, so we need users to log in with an anonymous credential.

To set up anonymous authentication in blog.html:

Add the following function to the <script> tag:

function displayCommentsOnLoad() {
client.auth
.loginWithCredential(new stitch.AnonymousCredential())
.then(displayComments)
.catch(console.error);
}

Update the tag in blog.html to display comments when the page loads.

<body onload="displayCommentsOnLoad()">

6
Add a Form for Submitting Comments

We now have everything we need to query and display comments that are already in MongoDB. All that’s left to do is to wire up a form that lets users insert new comments.

To let users add new comments:

Add the addComment() function to the <script> tag:

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 = “”;
}

Add a comment form by pasting the following code at the bottom of the tag in blog.html:

<hr>
Add comment:
<input id="new_comment"><input type="submit" onClick="addComment()">

Summary

Congratulations, you now have a working blog! Try refreshing the page and submitting a comment on the blog post.
What’s Next

Check out some of our suggestions to improve your blog even more!
← Blog App: Create the Backend To-do App Overview →

© MongoDB, Inc 2008-present. MongoDB, Mongo, and the leaf logo are registered trademarks of MongoDB, Inc.
Was this page helpful?
Yes
No

Bol5261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Blog App: Create a Web Client

MongoDB LogoServerDriversCloudToolsGuidesGet MongoDBClose ×MongoDB StitchIntroductionTutorials Overview Basic Blog Tutorial Blog App Overview Build the Blog Backend ...
复制链接

扫一扫