Skip to content

refactor: readme updated #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 17, 2020
Merged

refactor: readme updated #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ apidocs-templates/*
test/smtpconfig.js/*
test/config.js/*
test/sync_config.js/*
test/report.json/*
test/report.json/*
package-lock.json
218 changes: 121 additions & 97 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
[![Contentstack](https://www.contentstack.com/docs/static/images/contentstack.png)](https://www.contentstack.com/)
## JavaScript SDK for Contentstack

Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. [Read More](https://www.contentstack.com/).
Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. [Read More](https://www.contentstack.com/).

Contentstack provides JavaScript SDK to build application on top of JavaScript. Given below is the detailed guide and helpful resources to get started with our JavaScript SDK.

The JavaScript SDK can also be used to create Node.js and React native applications.
The JavaScript SDK can also be used to create Node.js and React native applications.

### Prerequisite

Expand All @@ -17,40 +17,55 @@ You need Node.js version 4.4.7 or later installed to use the Contentstack JavaSc

To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest) and include it in the <script> tag:

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

To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.

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

#### For Node.js

Node.js uses the Javascript SDK to create apps. To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest), OR install it via npm:

npm -i contentstack
```bash
npm -i contentstack
```

To import the SDK in your project, use the following command:

import contentstack from ‘contentstack’
```javascript
import contentstack from ‘contentstack’
```

To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.

const Stack = contentstack.Stack("api_key","access_token","environment_name");
```javascript
const Stack = contentstack.Stack("api_key","access_token","environment_name");
```

#### For React Native

React Native uses the Javascript SDK to create apps. To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest), OR install ist via npm:

npm -i contentstack
```bash
npm -i contentstack
```

To import the SDK in your project, use the following command:

import contentstack from `contentstack/react-native`
```javascript
import contentstack from `contentstack/react-native`
```

To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.

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

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

### Key Concepts for using Contentstack

Expand All @@ -64,62 +79,64 @@ Content type lets you define the structure or blueprint of a page or a section o

#### Entry

An entry is the actual piece of content created using one of the defined content types. Learn more about [Entries](https://www.contentstack.com/docs/guide/content-management#working-with-entries).
An entry is the actual piece of content created using one of the defined content types. Learn more about [Entries](https://www.contentstack.com/docs/guide/content-management#working-with-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](https://www.contentstack.com/docs/guide/content-management#working-with-assets).
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](https://www.contentstack.com/docs/guide/content-management#working-with-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](https://www.contentstack.com/docs/guide/environments).


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](https://www.contentstack.com/docs/guide/environments).

### Contentstack JavaScript SDK: 5-minute Quickstart

#### Initializing your SDK
#### Initializing your 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", "environment_name");
```javascript
const Stack = Contentstack.Stack("api_key", "access_token", "environment_name");
```

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



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

const Query = Stack.ContentType('blog').Entry("blt123something");

Query.fetch()
.then(function success(entry) {
```javascript
const Query = Stack.ContentType('blog').Entry("blt123something");

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) {
}, 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.

const Query = Stack.ContentType('blog').Query();

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

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

#### Cache Policies

Expand All @@ -129,114 +146,121 @@ You can set a cache policy on a stack and/or query object.

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)
```javascript
//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 queryobject
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)
```javascript
// setting a cache policy on a queryobject
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)
```

### Advanced Queries

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

[JavaScript API Reference Doc](https://contentstack.com/docs/platforms/javascript-browser/api-reference/)

### 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/59e0c41ac0eddd140d5a8e3e/download?crop=300,400. There are several more parameters that you can use for your images.
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/59e0c41ac0eddd140d5a8e3e/download?crop=300,400. There are several more parameters that you can use for your images.

[Read Image Delivery API documentation](https://www.contentstack.com/docs/apis/image-delivery-api/).
[Read Image Delivery API documentation](https://www.contentstack.com/docs/apis/image-delivery-api/).

Following are Image Delivery API examples.

// set the quality 100
imageUrl = Stack.imageTransform(imageUrl, {
'quality': 100
})

// set the quality to 100, auto optimization, width and height
imageUrl = Stack.imageTransform(imageUrl, {
'quality': 100,
'auto': 'webp',
'width': 100,
'height': 100
})
```javascript
// set the quality 100
imageUrl = Stack.imageTransform(imageUrl, {
'quality': 100
})

// set the quality to 100, auto optimization, width and height
imageUrl = Stack.imageTransform(imageUrl, {
'quality': 100,
'auto': 'webp',
'width': 100,
'height': 100
})
```

### Using the Sync API with JavaScript SDK

The Sync API takes care of syncing your Contentstack data with your app and ensures that the data is always up-to-date by providing delta updates. Contentstack’s JavaScript SDK supports Sync API, which you can use to build powerful apps. Read through to understand how to use the Sync API with Contentstack JavaScript SDK.
[Read Sync API documentation](https://www.contentstack.com/docs/platforms/javascript-browser#using-the-sync-api-with-javascript-sdk).
[Read Sync API documentation](https://www.contentstack.com/docs/platforms/javascript-browser#using-the-sync-api-with-javascript-sdk).

##### Initial sync

The Initial Sync process performs a complete sync of your app data. It returns all the published entries and assets of the specified stack in response.

To start the Initial Sync process, use the syncStack method.

let data = Stack.sync({"init": true})
data.then(function(sync_data, err) {
//error for any error description
//sync_data.items: contains sync data
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
//sync_token.syncToken: for performing subsequent sync after initial sync
if (err) throw err
})

The response also contains a sync token, which you need to store, since this token is used to get subsequent delta updates later, as shown in the Subsequent Sync section below.
```javascript
let data = Stack.sync({"init": true})
data.then(function(sync_data, err) {
//error for any error description
//sync_data.items: contains sync data
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
//sync_token.syncToken: for performing subsequent sync after initial sync
if (err) throw err
})
```

You can also fetch custom results in initial sync by using advanced sync queries.
The response also contains a sync token, which you need to store, since this token is used to get subsequent delta updates later, as shown in the Subsequent Sync section below.

You can also fetch custom results in initial sync by using advanced sync queries.

##### Sync pagination

If the result of the initial sync (or subsequent sync) contains more than 100 records, the response would be paginated. It provides pagination token in the response. You will need to use this token to get the next batch of data.
If the result of the initial sync (or subsequent sync) contains more than 100 records, the response would be paginated. It provides pagination token in the response. You will need to use this token to get the next batch of data.


let data = Stack.sync({"pagination_token" : "<pagination_token>"})
data.then(function(result, err) {
//error for any error description
//result.items: contains sync data
//result.paginationToken: For fetching the next batch of entries using pagination token
//result.syncToken: For performing subsequent sync after initial sync
if(err) throw err
})
```javascript
let data = Stack.sync({"pagination_token" : "<pagination_token>"})
data.then(function(result, err) {
//error for any error description
//result.items: contains sync data
//result.paginationToken: For fetching the next batch of entries using pagination token
//result.syncToken: For performing subsequent sync after initial sync
if(err) throw err
})
```

##### Subsequent sync

You can use the sync token (that you receive after initial sync) to get the updated content next time. The sync token fetches only the content that was added after your last sync, and the details of the content that was deleted or updated.


let data = Stack.sync({"sync_token" : “<sync_token>”})
data.then(function(sync_data, err) {
//error for any error description
//sync_data.items: contains sync data
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
//sync_token.syncToken: for performing subsequent sync after initial sync
if(err) throw err
})
```javascript
let data = Stack.sync({"sync_token" : “<sync_token>”})
data.then(function(sync_data, err) {
//error for any error description
//sync_data.items: contains sync data
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
//sync_token.syncToken: for performing subsequent sync after initial sync
if(err) throw err
})
```

##### Advanced sync queries

You can use advanced sync queries to fetch custom results while performing initial sync.
[Read advanced sync queries documentation](https://www.contentstack.com/docs/guide/synchronization/using-the-sync-api-with-javascript-sdk#advanced-sync-queries)



### Helpful Links

- [Contentstack Website](https://www.contentstack.com)
- [Official Documentation](https://contentstack.com/docs)
- [Content Delivery API Docs](https://contentstack.com/docs/apis/content-delivery-api/)
- [Contentstack Website](https://www.contentstack.com)
- [Official Documentation](https://contentstack.com/docs)
- [Content Delivery API Docs](https://contentstack.com/docs/apis/content-delivery-api/)

### The MIT License (MIT)

Copyright © 2012-2019 [Contentstack](https://www.contentstack.com). All Rights Reserved
Copyright © 2012-2020 [Contentstack](https://www.contentstack.com). All Rights Reserved

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@
"babel-runtime": "6.26.0",
"compression-webpack-plugin": "1.0.1",
"es3ify-loader": "0.2.0",
"jsdoc": "^3.5.5",
"jshint": "2.9.5",
"jsdoc": "3.5.5",
"jshint": "2.11.0",
"nodemailer": "^4.3.1",
"request": "^2.83.0",
"string-replace-loader": "1.3.0",
Expand Down