Build an Ionic-3 news app
Ionic-3 is a popular framework for developing multi-platform (hybrid) mobile applications. This example news app is built on top of Ionic-3 and uses Contentstack’s JavaScript SDK. It uses Contentstack to store and deliver the content of the website.
This content has been changed
Screenshots
Quickstart
Here’s a quick guide on how to create this demo mobile app using Ionic-3 and Contentstack.
Prerequisites
- Apache Cordova
- Contentstack account
Note: For this tutorial, we have assumed that you are familiar with Contentstack and Apache Cordova. If not, then please refer to the docs (Contentstack docs and Apache Cordova 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 hybrid mobile app. 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 example news app, two basic content types are required: News and Category. 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.
Here’s a brief overview of the content types required for this project.
- News : This content type lets you add the news content into your app.
- Category : This content type lets you create the various categories of your news app.
Now that all the content types are ready, let’s add some content for your news app.
Step 4: Adding content
Create and publish entries for the ‘Category’ and ‘News’ content type
Add a few dummy entries for news articles for the ‘News’ content type. Save and publish these entries. Learn how to create and publish entries.
With this step, you have created sample data for your news app.
Step 5: Install Apache Cordova
$ npm install -g ionic cordova
Once that’s done, create your first Ionic app:
$ ionic start Ionic-with-contentstack sidemenu --v3
Now, you can create directory into the folder that was created. To get a quick preview of your app in the browser, use the 'serve' command.
$ cd Ionic-with-contentstack/
$ ionic serve
Step 6: Clone and configure application
To get your app up and running quickly, we have created a sample Ionic app for this project. You need to download it and change the configuration. Download the app using the command given below:
git clone https://github.com/harshalpatel91/Ionic3-with-contentstack.git
Once you have downloaded the project, add your Contentstack API Key and Access Token to the project. (Learn how to find your Stack's API Key and Access Token. Read more about Environments.)
The src/app/app.module.ts file would look something like the following:
Const config = {
'api_key': 'blt1234something'
'access_token': 'blt1234something',
'environment': 'development'
}
Fire up your terminal (command prompt or similar on Windows), point it to your project location, and run the following command lines:
npm install
Ionic serve
This will initiate your project.
To create Ionic projects, you’ll need to install the latest version of CLI and Cordova. Before you do that, you’ll need a recent version of Node.js. Download the installer for Node.js 6 or greater and then proceed to install the Ionic CLI and Cordova for native app development.