Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Building Websites and Web Apps Using SAP Cloud Platform and Contentstack

Hi there! My name is Mayank Mishra, I’m the Director of Engineering at Contentstack and have been a member of the Built.io team since its inception for over 10 years! I’m passionate about great design, and am a firm believer that it’s possible to build products that offer a great experience for both developers and business users.

Contentstack was born out of my frustrations with the complexities of implementing CMS solutions over the years. Historically, they have always required dozens of servers, taken months to launch with a website, and been so difficult to use that no one liked it.

Today, I’m excited to teach you how I believe we developers should be integrating content management into our websites and web applications (I’ll follow up with a lesson on mobile in my next blog post). By integrating Contentstack, a headless CMS with the SAP Cloud Platform, you can create a secure web application or website in just a few minutes that will be easy for your business users to manage and maintain without bugging you or any other developers on your team. The advantage of deploying this on the SAP Cloud Platform is that you get all the benefits, security, and tools that are offered by SAP so you can move quickly without the need for complex implementations that are convoluted and take months to launch.

Now let’s get started!

Getting Started with JavaScript SDK in Contentstack

Use Contentstack to power content for your JavaScript projects

Create JavaScript-based applications and use the JavaScript SDK to fetch and deliver content from Contentstack. The SDK uses Contentstack’s Content Delivery APIs.

Getting Started

SDK Installation and Setup

To use the JavaScript SDK, download it from here and include it in the

Initialize SDK

You will need to specify the API key, Access token, and Environment Name of your stack to initialize the SDK:

const Stack = Contentstack.Stack("api_key", "access_token", "enviroment_name");

Once you have initialized the SDK, you can start getting content in your app.

Cache Policies

The Cache policies allow you to define the source from where the SDK will retrieve the content. Based on the selected policy, the SDK can get the data from cache, network, or both.

Let’s look at the various cache policies available for use:

POLICIES DESCRIPTION
IGNORE_CACHE (default) When the IGNORE_CACHE policy is set, the SDK always retrieves data by making a network call, without maintaining any cache. This is set as the default policy.
ONLY_NETWORK If you set ONLY_NETWORK as the cache policy, the SDK retrieves data through a network call, and saves the retrieved data in the cache.
CACHE_ELSE_NETWORK When the CACHE_ELSE_NETWORK policy is set, the SDK gets data from the cache. However, if it fails to retrieve data from the cache, it makes a network call.
NETWORK_ELSE_CACHE When the NETWORK_ELSE_CACHE policy is set, the SDK gets data using a network call. However, if the call fails, it retrieves data from cache.
CACHE_THEN_NETWORK If CACHE_THEN_NETWORK is set as the cache policy, the SDK gets data from cache, and then makes a network call. (A success callback will be invoked twice.)

You can set a Cache Policy on a stack and/or query object.

Setting a cache policy on a stack

This option allows you to globalize a cache policy. This means the cache policy you set will be applied to all the query objects of the stack.

// setting a cache policy on a stack
Stack.setCachePolicy(Contentstack.CachePolicy.NETWORK_ELSE_CACHE)

Setting a cache policy on a query object

This option allows you to set/override a cache policy on a specific query object.

// setting a cache policy on a query object
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)

Basic Queries

Get a Single Entry

To get a single entry, you need to specify the content type as well as the id of the entry.

var Query = Stack.ContentType('blog').Entry("blta464e9fbd048668c")
Query.fetch()
.then(function success(entry) {
console.log(entry.get('title')); // Retrieve field value by providing a field's uid
console.log(entry.toJSON()); // Convert the entry result object to JSON
}, function error(err) {
// err object
});

Get Multiple Entries

To retrieve multiple entries of a content type, you need to specify the content type uid. You can also specify search parameters to filter results.

var Query = Stack.ContentType('blog').Query();
Query
.where("title", "welcome")
.includeSchema()
.includeCount()
.toJSON()
.find()
.then(function success(result) {
// result is array where -
// result[0] => entry objects
// result[result.length-1] => entry objects count included only when .includeCount() is queried.
// result[1] => schema of the content type is included when .includeSchema() is queried.
}, function error(err) {
// err object
});

API Reference

Go through our SDK API Reference guide to know about the methods that can be used to query your content in Contentstack.

Read JavaScript API Reference Guide

Tutorial to Build a website using Express.js and Contentstack

This example website is built using Express.js and Contentstack’s JavaScript SDK. It uses Contentstack to store and deliver the content of the website.

  • View Demo
  • View Code

Here’s a quick guide on how to create a marketing website using Express.js and Contentstack’s JavaScript SDK.

Prerequisites

Contentstack account

Note: For this tutorial, we have assumed that you are familiar with Contentstack and Express.js. If not, then please refer to the docs (Contentstack docs and Express docs) for more details.

In this tutorial, we will first go through the steps involved in configuring Contentstack, and then look at the steps required to customize and use the presentation layer.

Step 1: Create a stack

Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your website. Learn more on how to create a stack.

Step 2: Add a publishing environment

To add an environment in Contentstack, navigate to ‘Settings’ -> ‘Environment’, and click on the ‘+ New Environment’ tab. Provide a suitable name for your environment, say ‘staging’. Specify the base URL (e.g., ‘http://YourDomainName.com’), and select the language (e.g., English – United States). Then, click on ‘Save’. Read more about environments.

Step 3: Import content types

A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.

For this website, basic content types are required: Header, Footer, Home, About, Feature, product. For quick integration, we have already created these content types. You simply need to import them to your stack. (You can also create your own content types. Learn how to do this.)

To import the content types, first save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the ‘Import’ link, and select the JSON file saved on your machine.

Note: Import JSON files in the sequence: header.json, footer.json, and home.json.

Here’s a brief overview of all the content types required for this project.

  • Header: The ‘Header’ content type enables you to add content for the header section of your website.
  • Footer:The ‘Footer’ content type enables you to add content for the footer section of your website.
  • Home: The ‘Home’ content type enables you to add content for the home page of your website. It includes the main banner and the About us section.
  • About: The ‘About’ content type enables you to add content for the about page of your website.
  • Feature: The ‘Feature’ content type enables you to add content for the feature page of your website.
  • Product: The ‘Product’ content type enables you to add content for the product page of your website.

Download All Content Types

Now that all the content types are ready, let’s add some content for your website.

Step 4: Adding content

Create and publish entries for the ‘Header’ and ‘Footer’ content types

Using the ‘Header’ content type, add the name, logo, menu, and other details for your website. Similarly, add footer content using the ‘Footer’ content type. Learn how to create and publish entries.

Create and publish entry for the other content types

Add entries for the ‘Home’, ‘About’, ‘Feature’, and ‘Product’ content type. The ‘Home’ content type includes two reference fields: ‘Header’ and ‘Footer’. You need to select the respective entries in these fields. Save and publish the entry. Learn how to create and publish entries.

With this step, you have created sample data for your website. Now, it’s time to use and configure the presentation layer.

Step 5: Build and configure website

To get your app up and running quickly, we have created a sample website (using Node.js and Express.js) for this project. You simple need to download it and change the configuration.

Download code

Note: The website uses the Content Delivery API (which has in-built CDN support) to deliver content to the website. Read more about our CDN-enabled content delivery system.

Once you have downloaded the project, add your Contentstack API Key, Access Token, and Environment to the project. The config/default.js file would look something like this:

// Contentstack Config
contentstack: {
api_key: "",
access_token: "",
environment: ""
}

Note: In the above code, mention the environment that you created in Contentstack.

Fire up your terminal (command prompt or similar on Windows), point it to your project location and run the following:

npm install
npm start

Note: This will work on node version 6.9.0 or above. Now open http://localhost:3000 to see your website. This will initiate your project.

Step 6: Go live

You can make the application live by deploying it on any cloud- hosting service. In this tutorial, we have used Heroku as the hosting service.

Deploying your application on Heroku is quick and easy. If you are new to Heroku, refer to these steps to deploy your app.



This post first appeared on Web Service Testing A Blackjack GUI And API, please read the originial post: here

Share the post

Building Websites and Web Apps Using SAP Cloud Platform and Contentstack

×

Subscribe to Web Service Testing A Blackjack Gui And Api

Get updates delivered right to your inbox!

Thank you for your subscription

×