Building Websites and Web Apps Using SAP Cloud Platform and Contentstack

[Former Member]

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.

Before we get started, let’s go through some basic concepts of Contentstack.

Key Concepts for Using Contentstack

Stack

A stack is like a container that holds the content of your app. Learn more about Stacks.

Content Type

Content type lets you define the structure or blueprint of a page or a section of your digital property. It is a form-like page that gives Content Managers an interface to input and upload content. Read more about Content Types.

Entry

An entry is the actual piece of content created using one of the defined content types. Learn more about Entries.

Asset

Assets refer to all the media files (images, videos, PDFs, audio files, and so on) uploaded to Contentstack. These files can be used in multiple entries. Read more about Assets.

Environment

A publishing environment corresponds to one or more deployment servers or a content delivery destination where the entries need to be published. Learn how to work with Environments.

Get Started with Contentstack JavaScript SDK

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

SDK Installation and Setup

For JavaScript (Browsers)

To use the JavaScript SDK, download it from here and include it in the <script> tag:

<script type="text/javascript" src="/path/to/contentstack.min.js"></script>

For Node.js

Open the terminal and install the contentstack module via the ‘npm’ command.

npm install contentstack --save

To use the module in your application, you need to require the ‘contentstack’ module.

import * as Contentstack from 'contentstack';

Note: You need to install Node.js version 4.8.4 or later to use the Contentstack SDK.

Initializing your SDK

You will need to specify the API key, Access token, and Environment Name of your stack to initialize the SDK (for JavaScript or Node.js):

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

Once you have initialized the SDK, you can start getting content in your app with the help of queries.

Querying Content from Your Stack

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

});

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

});

Advanced Queries

You can query for content types, entries, assets and more using our JavaScript API Reference.

Read JavaScript API Reference Guide

Working with Images

We have introduced Image Delivery APIs that let you retrieve images and then manipulate and optimize them for your digital properties. It lets you perform a host of other actions such as crop, trim, resize, rotate, overlay, and so on.

For example, if you want to crop an image (with width as 300 and height as 400), you simply need to append query parameters at the end of the image URL, such as, https://images.contentstack.io/v3/assets/blteae40eb499811073/bltc5064f36b5855343/59e0c41ac0eddd140d5.... There are several more parameters that you can use for your images.

Read Image Delivery API documentation

SDK functions for Image Delivery API coming soon!

Tutorials

To help you get started, we have created some sample applications that are powered by Contentstack JavaScript (Browser) SDK. Click on any of the links below to read the tutorials of the app, view app demo, or download the code from GitHub.

• Build a website using Nuxt.js and Contentstack


• Build a website using Next.js and Contentstack


• Build an ecommerce website using Snipcart and Contentstack


• Build a website using Metalsmith and Contentstack

Helpful Links

• Contentstack Website


• Official Documentation


• API Documentation