DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > A Feedback App in Minutes With Ionic and Cloudant

A Feedback App in Minutes With Ionic and Cloudant

Perfect for meetups and the like, you can create your own feedback app with the open source Ionic and the DBaaS Cloudant that works on iOS and Android.

Vidyasagar Machupalli user avatar by
Vidyasagar Machupalli
CORE ·
Dec. 23, 16 · Mobile Zone · Tutorial
Like (1)
Save
Tweet
7.06K Views

Join the DZone community and get the full member experience.

Join For Free

An Ionic feedback app using Cloudant NoSQL service on IBM Bluemix is an easy-to-configure mobile app for receiving feedback at meetups, events, etc.,

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 distributed database as a service (DBaaS) built from the ground up to deliver fast-growing application data to the edge.

The app runs on iOS and Android and is built using Ionic Version 1.7.13.

iOS

Image title

Image title


Android

Creating a Cloudant NoSQL DB Service on IBM Bluemix

  • Don’t have Bluemix account? Sign up to create a free trial account.
  • 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 the 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 the LAUNCH button to launch the Cloudant Dashboard 2.0 (powerful querying, analytics, replication, and syncing happens here) in a separate 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 use cases, but with this being a simple mobile app, we're taking this liberty. Check the CORS documentation for more info.

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/VidyasagarMSC/Ionic-Cloudant-FeedbackApp.git


  • Open the unzipped folder in an IDE (I use Brackets) of your choice and navigate to the www/js folder.
  • Create a new JavaScript file — app.config. With the 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 within Dashboard 2.0.
  • For hostname, username, and password: Navigate to the Cloudant Service page on Bluemix and click the Service Credentials tab.
  • Click on View Credentials under Actions. We're looking at Placeholder Cloudant Service

The CLOUDANTDB_CONFIG constant values are utilized 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 the img folder.
  • Customize the feedback fields in feedback.html.
  • There are validations on the fields based on the type. For example, email checks for an @ 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:

  • This sample uses only the POST HTTP API call of Cloudant Service. To understand other HTTP API Verbs, refer to the Cloudant documentation.
  • Cloudant Client Libraries.
mobile app Ionic (mobile app framework) Web Service

Published at DZone with permission of Vidyasagar Machupalli, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • SQL vs. NoSQL: Pros and Cons
  • PermGen and Metaspace
  • Implementing Microservices Architectures
  • Version Number Anti-Patterns

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo