How-tos

Create a feedback app in minutes with Ionic and Cloudant

Share this post:

bluemix-selfieIn this post, discover an easy-to-configure mobile app for receiving reviews at meetups, events, etc. Put simply: It’s an Ionic feedback app using Cloudant NoSQL service on IBM Bluemix.

Ionic is a complete open-source SDK for hybrid mobile app development. Built on top of AngularJS and Apache Cordova, Ionic provides tools and services for developing hybrid mobile apps using web technologies like CSS, HTML5, and Sass.

Cloudant is a managed NoSQL database service that moves application data closer to all the places it needs to be — for uninterrupted data access, offline or on.

The App Runs on iOS and Android and is built using Ionic Version 1.7.13
iOS:

Android:

Creating a Cloudant NoSQL DB service on IBM Bluemix

  • Don’t have Bluemix account? Sign up for a free trial.
  • Have a Bluemix account? Use this link.

Add a new Cloudant data service in just a few clicks:

  1. Visit your Bluemix dashboard.
  2. Click Catalog.
  3. On the left Pane, Click on Data & Analytics under Services.
  4. Click Cloudant NoSQL DB tile.
  5. Enter a unique descriptive name in the Service name field.
  6. Check Features, Images and Pricing Plans.
  7. Click the Create button.

Cloudant Dashboard 2.0

Once the Cloudant service is created:

  • Click on LAUNCH button to launch the Cloudant Dashboard 2.0 (Powerful querying, analytics, replication, and syncing happens here) on a seperate tab.
  • Create a new database by clicking on Create Database on the top ribbon. Your database is created.
  • From the left Pane, Click on Account -> CORS Tab -> Check All domains ( * ).

*Not recommended for all usecases, this being a simple mobile app taking this liberty. Check CORS Documentation.

Configuring the Ionic app with a configuration file

  • Install Ionic
npm install -g cordova ionic@1.7.13
  • Clone the repo
$ git clone https://github.com/IBM-Bluemix/feedbackapp-ionic-cloudant.git
  • Open the unzipped folder in an IDE (I use Brackets) of your Choice and Navigate to www/js folder.
  • Create a new Javascript file app.config. With extension the file will be app.config.js
  • Paste the below code in app.config.js,
angular.module('app').constant('CLOUDANTDB_CONFIG', {
baseUrl: 'https://',
dbName: '',
userName: '',
password: ''
});
  • DBName – Name of the Cloudant NoSQL DB you created on Dashboard 2.0.
  • For hostname,username and password: Navigate to the Cloudant Service page on Bluemix and Click on Service Credentials tab.
  • Click on View Credentials under Actions.
    placeholder Cloudant Service

The CLOUDANTDB_CONFIG constant values are utilised in controllers.js

// Define the Credentials string to be encoded.
var credentialstobeEncoded = CLOUDANTDB_CONFIG.userName + ":" + CLOUDANTDB_CONFIG.password;

// Encode the String
var encodedString = Base64.encode(credentialstobeEncoded);
console.log("ENCODED: " + encodedString);

$scope.createFeedback = function (feedback) {

$http({
method: 'POST',
url: CLOUDANTDB_CONFIG.baseUrl + "/" + CLOUDANTDB_CONFIG.dbName,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Basic ' + encodedString
},

Customize the App UI

  • Images can be replaced with the same name under img folder.
  • Customize the feedback fields in feedback.html
  • There are validations on the fields based on the type. E.g., Email checks for @ in the entry. Submit will be disabled until the form is completely valid.

Testing the App

Desktop browser Testing

$ ionic serve

On an iOS Simulator or Android Emulator

$ ionic emulate ios
$ ionic emulate android

Note: Follow the Android and iOS platform guides to install required tools for development.

Notes:

Technical Offering Manager & Polyglot Programmer | IBM Cloud

More How-tos stories
April 30, 2019

Introducing IBM Analytics Engine v1.2 and Announcing the Deprecation of IBM Analytics Engine v1.0

We are excited to inform you about the new version of IBM Analytics Engine v1.2 that will be available starting May 15, 2019. Along with this release, Analytics Engine v1.0 will be retired.

Continue reading

April 16, 2019

Announcing the Deprecation of the Decision Optimization Beta Service

The End of Beta date for the Decision Optimization service is May 17, 2019. The End of Beta Support date is June 20, 2019.

Continue reading

April 2, 2019

Data Refinery and Profiling Changes in Watson Studio and Watson Knowledge Catalog

We'd like to announce data refinery and profiling changes related to Watson Studio and Watson Knowledge Catalog that will take effect on May 17, 2019.

Continue reading