Building a Simple Blog from Scratch with Skygear with JS

In this tutorial, we will build a simple blog with Skygear.

Skygear is an open-source serverless platform that has features such as a cloud database, authentication, pubsub, push, chat, and event tracking.

If you are new to Skygear, this is the right tutorial to get started.  You will learn how to save and retrieve records from the Skygear cloud database with the record APIs. Cloud database is the fundamental of most applications nowadays, and Skygear record APIs offer a simple way for developers to interact with the cloud database.

Skygear sets up the server for you and also provides a set of APIs to save and get data from the database. That means with Skygear, you only have to work on building the interface of the app.

Let’s take a look at the features of our web blog app:

  1. Create and save new blog posts to the cloud
  2. List all blog posts stored in the cloud

You can play around with the demo we put on GitHub page to get a better idea of how the app works. The source code of this tutorial is available on GitHub.

Add Skygear to the app

First, create an HTML file with any text editor.

In this step, we load Skygear in our app so that we can use it.  For this simple web project, We can simply load it from the CDN provided by the Skygear Cloud.

Add the following code to your HTML file to load Skygear.

index.html

Here I have loaded Bootstrap as well for quick CSS implementation. Booststrap is an open source toolkit for developing with HTML, CSS, and JS. It provides us with decorated HTML component so that we do not have to write CSS from scratch.

Configure Skygear

To connect our app with the Skygear Server, we need to configure Skygear.

Make sure you already have a Skygear account. You can get one here. An app project will be created for you automatically after the sign up.

Then, get your app details in the developer portal dashboard. Configure Skygear with the Server Endpoint and API key.

skygear-portal-new

Now, create a new JS file in the same directory and add the following lines to it.

index.js

Replace the app end point and  the API key with the information you get from the developer portal.

Next, add the following lines inside the body tag of your HTML file so that it loads our JS file.

Now, open your HTML file with a browser and go to the page inspector. If you see “skygear container is now ready for making API calls” in the console, it means Skygear has been successfully set up in the app!

Check out the quick start guide if you want to know how to set up Skygear in other web environments.

Implement the basic UI

Now, it is time to work on the UI and the functions of the app.

The UI of the app is divided into two parts.

The upper part is where we enter the title and the content of a blog post.

The lower part is where we display all the blog posts. And when we click on the blog title, the blog content will be displayed in a new page.

Add the following lines to inside the body tag in the HTML file.

index.html

Refresh your page. You should be able to see:

  1. Input fields for the post title and the post content
  2. “Create Post” button
Blog
UI of the blog

Sign in anonymously

After creating the interface, the next step is to save a blog post to the Skygear Cloud DB.

In Skygear, in order to create a record in the database, we have to sign in as a user first. To keep things simple, instead of building an user authentication system where people register an account with their email and password, we will use the sign up anonymously function here.

This means we do not have to sign up explicitly with a username or email. Skygear will keep the user session using the browser local storage.

Let’s add the following code in the JS file.

Then call the signupAnonymously function right after the API Configuration is completed so that we will be logged in once the app is initialised.

index.js

Create the first blog post

In this step, we list to a “submit” event of the form submit-blog-post. We will also use the title textfield and the content textfield to create a new record in the cloud database blogpost table.

index.js

What we have done:

  1. Create an event listener to listen for submit events
  2. When the form is submitted, the app will first get the input from the title and the content fields, then create a new BlogPost record and associate it with the database table blogpost.
  3. Then, save the ‘BlogPost’ in the `blogpost` table with the two attributes: title and content.
  4. Lastly, clear the input fields.

Enter a few blog entries to see if the function works. You can check for a log like the one below in the developer console to confirm the record is saved successfully.

r {_recordType: "blogpost", _id: "c6a3b3a6-2377-4b93-9be2-3a61c5e7be08", _access: e, _transient: Object, createdAt: Tue Mar 07 2017 17:47:48 GMT+0800 (HKT)…}

*You wouldn’t be able to see the blog posts you entered in the app yet. The above lines only help us save the blog post to the cloud. Next we have to retrieve all the blog posts saved from the database and display them in the app.

List all blog posts from the database

Our next step is to make a query to retrieve the blog posts from the database.

Add the following lines to the JS file.

index.js

What we have done:

  1. Create a query to get records from the table blogpost.
  2. Add a sorting criteria for the query. `addDescending` sorts the query with descending order according to the created date of each blog post (i.e. _created_at).
  3. Update the blog posts we get from the query by adding a <h2> element with the blog title, a <p> element with the created date of the blog post, and a<p> element with the blog content.
  4. Add the updated blog posts to the div ‘content’ we created in step 3.

*You can sort the query based on any attribute of a record. Learn more here.

Cool. We get all our blog posts now. But when should we display them?

Let’s display them after we’ve signed up and after we’ve saved a record.

Now, call showContent() after we’ve signed up anonymously and after we’ve saved a record.

index.js

Refresh your page now. If everything is in its place, you should see something similar:

Screen Shot 2017-09-10 at 10.46.49 PM.png

Congratulation! You made it.

More features

With Skygear Cloud Database, you can implement a lot more features for this blogging system, for example you can let people sign up with email or Google login with just a few line of code.

Beside Database and User Auth, Skygear also comes with Skygear Chat for building chat application, Push notification for iOS and Android apps, and Cloud Functions when your app need some server side code.

Check out our website Skygear, to learn more.

What do you think about this tutorial? We publish monthly tutorials. Let us know what you’d like us to write about next!

Co-written by Ten Tang and Zachary Lo

Leave a Reply