How to create the survey app using Angular 2 and CosmicJS backend

In this tutorial I’m going to show you how to build the survey app using Angular 4 and Cosmic JS backend. We’ll take a look how Angular router works and how to use CosmicJS as yourr

Prerequisites

You’ll need the node JS, npm and Angular cli pre-installed. Make sure you already have them before start. Please refer to Angular docs how to do this.

Getting Started

First of all we’ll need to create the Angular project. We’ll use ng cli to do it. So once you’ll have all prerequisites installed, you’ll need to setup the new Angular project:

After you’ll setup this project you’ll be able to run

And play with your app in browser

Doing everything using the existing git repo

First of all, you have to be sure you have node > 6.x installed, than run the following commands:

The most recent ng cli version at the article creation moment was 1.3.2.
Browser window will open automatically once you’ll run the last command

Setting up Cosmic JS library

First of all, install Cosmic JS Angular/JavaScript library

Now you should be able to import Cosmic object and perform Cosmic JS API calls like following:

Setting up object types with Cosmic JS

Create the bucket and remeber the bucket name (cosmic-survey in our case):

We’ll need three object type with the following metafields:

Survey Question

answer_variants – a text field repeater

Survey

questions – a Survey Question reference repeater

Answer

survey – a reference field to Survey object type
answers_list – repeater with two text fields (question and answer)

You’ll also need to create the bucket read and write keys. It’s necessary to allow users get survey data and save answers. Open Settings page and click ‘Generate new key’ on API Write Access Key than copy generated key and save the changes.

Angular environments

Edit the src/environments/environment.ts to match the following:

Configuration service for Angular

We’re planning to use CosmicJS objects in more than one Angular component. In such case makes sense to create a dedicated configuration service and store all Cosmic JS related things such as read and write keys in a single place. Let’s create src/services/cosmic_config.ts with the following contents:

This service has a few methods:

getReadCfg – returns config object for reading data
getWriteCfg – return config object for writing data (with write_key specified)
getWriteKey – returns the write key only

We’ll call these methods from our Angular components.

Building the app – Angular part

We basically need two pages – page with list of surveys and a single survey page. That’s why we need the routing. Please setup in using the src/app/app.module.ts file:

Now we have to create the Survey and SurveyList components.

SurveyList component:

SurveyList template:

This component is very easy – we’re just receiving a list of surveys from CosmicJS servers and display them as list.

Survey component:

and it’s template:

Second component is more complicated, however it also doesn’t have too complicated logic, it:

  • loads the survey according to current route
  • starts the survey from first to last question
  • saves results to CosmicJS server

Concatenating everything together

Now we need to modify our AppComponent to use these newly created components and routes. Modify src/app/app.component.html to look like the following:

This will allow Angular to determine which component show depending on current route.

So now we have the complete app which shows us a list of surveys than takes you through a survey to complete it.

Leave a Reply

Your email address will not be published. Required fields are marked *