Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
278 lines (240 sloc) 18.3 KB
---
layout: tutorial
title: Developing for Ionic
show_disqus: false
use_dropdown: false
print_pdf: false
show_in_nav: false
indexed: false
---
<!-- NLS_CHARSET=UTF-8 -->
<head>
<style>
.tab-pane {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}
</style>
</head>
<br/>
Develop your Ionic applications by following the tutorials below: set-up your development environment, experience the product and add value by integrating with {{ site.data.keys.product }} 8.0 offerings.<br/><br/>
<div class="container-fluid">
<ul class="nav nav-pills" id="quickstartTab">
<li class="nav-item">
<a class="nav-link active" id="basic-tab" data-toggle="tab" href="#basic" role="tab" aria-controls="basic" aria-selected="true"><h2 class="no-anchor">Basic Setup</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" id="quick-start-tab" data-toggle="tab" href="#quick-start" role="tab" aria-controls="quick-start" aria-selected="false"><h2 class="no-anchor">Quick Start</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" id="advanced-tab" data-toggle="tab" href="#advanced" role="tab" aria-controls="advanced" aria-selected="false"><h2 class="no-anchor">Advanced</h2></a>
</li>
</ul>
<div class="tab-content" id="quickstartTabContent">
<div class="tab-pane fade in active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
<p>Ionic is a framework that is built on <a target="_blank" href="https://angularjs.org/">AngularJS</a> and <a target="_blank" href="https://cordova.apache.org/">Apache Cordova</a>. Ionic helps you to rapidly build hybrid mobile and web platform apps using web technologies such as HTML, CSS, and Javascript. </p>
<p>If you are a developer who has chosen Ionic as the framework to develop your mobile or web app, the following sections help you get started with <a target="_blank" href="https://console.bluemix.net/catalog/services/mobile-foundation">IBM Mobile Foundation</a> SDK in your Ionic app. </p>
<p>You can use your preferred code editor such as Atom.io, Visual Studio Code, Eclipse, IntelliJ or any other editor for writing your applications. </p>
<!--<p><b>Prerequisite:</b> As you setup your Ionic development environment, make sure to also read the <a target="_blank "href="https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/installation-configuration/development/mobilefirst">Setting up the MobileFirst development environment</a> tutorial.</p>-->
<p>Follow the steps below to get quickly started with development using Ionic on MobileFirst Platform Foundation.</p>
<h2><font color="DodgerBlue">Step 1:</font> Installing the Ionic CLI</h2>
<p>To get started with Ionic development the first step required is to install the <a target="_blank" href="https://ionicframework.com/docs/cli/">Ionic CLI</a>. </p>
<p>To install Cordova and Ionic CLI:</p>
<p>Download and install <a target="_blank" href="https://nodejs.org/en/">NodeJS</a>.</p>
<p>From a Command-line window, run the following command:</p>
<pre>
npm install -g ionic
</pre>
<h2><font color="DodgerBlue">Step 2:</font> Setting up the MobileFirst development environment</h2>
<p>After you have installed the Ionic CLI, set up the MobileFirst development environment. For detailed information, refer to the tutorial <a target="_blank" href="{{site.baseurl}}/tutorials/en/foundation/8.0/installation-configuration/development/mobilefirst">Setting up the MobileFirst development environment</a> to set up your MobileFirst development environment. </p>
<!-- <h2><font color="DodgerBlue">Step 3:</font> Adding the Mobile Foundation SDK to your Ionic app</h2>
<p>To continue with MobileFirst development in Ionic applications, the MobileFirst Cordova SDK/plug-ins need to be added to the Ionic application.</p>
<p>Learn how to add the MobileFirst SDK to Ionic applications, refer to the tutorial <a target="_top" href="{{site.baseurl}}/tutorials/en/foundation/8.0/application-development/sdk/ionic">Adding the Mobile Foundation SDK to Ionic applications</a>.</p>-->
<br/>
<blockquote>Go to <font color="DodgerBlue">Quick Start</font> tab, to learn how to quickly get started with development using Ionic SDK.</blockquote>
</div>
<div class="tab-pane fade" id="quick-start" role="tabpanel" aria-labelledby="quick-start-tab">
<p>The purpose of this quick start tutorial is to explain a simple end-to-end flow.</p>
<!--<p>A sample application that is pre-bundled with the {{ site.data.keys.product_adj }} client SDK is registered and downloaded from the {{ site.data.keys.mf_console }}. The provided adapter (or a new adapter) is deployed to the {{ site.data.keys.mf_console }}. The application logic is changed to make a resource request.</p>-->
<p>A sample application is provided in <a target="_blank" href="https://github.ibm.com/MFPSamples/MFPStarterReactNative">Github</a>, the sample is downloaded and registered with {{ site.data.keys.mf_server }}. The provided adapter (or a new adapter) is deployed to the {{ site.data.keys.mf_console }}. The application logic is changed to make a resource request.</p>
<p><b>Expected result: </b>To successfully ping the {{ site.data.keys.mf_server }} and to successfully retrieve data using an adapter.</p>
<!-- <h3><font color="DodgerBlue">Step 1:</font> Get the prerequisites</h3>
<ul>
<li>Xcode for iOS, Android Studio for Android or Visual Studio 2015 or greater for Windows 10 UWP</li>
<li>Ionic CLI</li>
<li><i>[Optional]</i> {{ site.data.keys.mf_cli }} <a target="_blank" href="{{site.baseurl}}/downloads">(download)</a></li>
<li><i>[Optional]</i> Stand-alone {{ site.data.keys.mf_server }} <a target="_blank" href="{{site.baseurl}}/downloads">(download)</a></li>
</ul>-->
<h3><font color="DodgerBlue">Step 1:</font> Starting the {{ site.data.keys.mf_server }}</h3>
<p>Make sure you have <a target="_blank" href="../bluemix/using-mobile-foundation">created a Mobile Foundation instance</a>, or
if you are using the <a target="_blank" href="../installation-configuration/development/mobilefirst">{{ site.data.keys.mf_dev_kit }}</a>, navigate to the server's folder and run the command: <code>./run.sh</code> in Mac and Linux or <code>run.cmd</code> in Windows.</p>
<h3><font color="DodgerBlue">Step 2:</font> Registering an application</h3>
<p>Open the {{ site.data.keys.mf_console }} by loading the URL: <code>http://your-server-host:server-port/mfpconsole</code> in a browser. </p>
<ul><li>If the server is running locally, use: <code>http://localhost:9080/mfpconsole</code>. The <i>username/password</i> is <b>admin/admin</b>.</li>
<li>If the server is running on IBM Cloud as Mobile Foundation service instance, use: <code>https://bluemix-mfp-server-hostname:443/mfpconsole</code>. The <i>username/password</i> can be obtained from the IBM Cloud Mobile Foundation Service Credentials.</li>
</ul>
<h4><font color="DarkTurquoise">Step 2.1:</font> Click the <b>New</b> button next to <b>Applications</b></h4>
<ul>
<li>Select a platform from the list of platforms: <b>Android, iOS, Windows, Browser</b></li>
<li>Enter <b>com.ibm.mfpstarterionic</b> as the <b>application identifier</b></li>
<li>Enter <b>1.0.0</b> as the <b>version</b></li>
<li>Click on <b>Register application</b></li>
</ul>
<!--<img class="gifplayer" alt="Register an application" src="{{site.baseurl}}/assets/tutorials/all-tutorials/register-an-application-cordova.png"/>-->
<h4><font color="DarkTurquoise">Step 2.2:</font> Downloading the Ionic sample from <a target="_blank" href="https://github.com/MobileFirst-Platform-Developer-Center/MFPStarterIonic">Github</a>.</h4>
<h4><font color="DarkTurquoise">Step 2.3:</font> Adding the Ionic SDK to the downloaded Ionic sample application</h4>
<ol><li>Navigate to the root of your downloaded Ionic project and add the {{ site.data.keys.product_adj }} core Ionic Cordova plug-in.</li>
<li> Change directory to the root of the Ionic project: <code>cd MFPStarterIonic</code></li>
<li> Add the MobileFirst Plugins by using the Ionic CLI command: <code>ionic cordova plugin add cordova-plugin-name</code><br/>
For example:
<pre>
ionic cordova plugin add cordova-plugin-mfp
</pre>
<blockquote>The above command adds MobileFirst Core SDK Plugin to the Ionic project.</blockquote>
</li>
<li>Add one or more supported platforms to the Cordova project by using the Ionic CLI command: <br/>
<code>ionic cordova platform add ios|android|windows|browser</code><br/>
For example:
<pre>
cordova platform add ios
</pre>
</li>
<li>Prepare the application resources by running the <code>ionic cordova prepare</code> command:
<pre>
ionic cordova prepare
</pre>
</li>
</ol>
<h4><font color="DarkTurquoise">Step 2.4:</font> Editing the application logic</h4>
<ol>
<li>Open the Ionic project in your code editor of choice.</li>
<li>Select the <b>src/js/index.js</b> file and paste the following code snippet, replacing the existing <code>WLAuthorizationManager.obtainAccessToken()</code> function:
{% highlight javascript %}
WLAuthorizationManager.obtainAccessToken("").then(
(token) => {
console.log('--> pingMFP(): Success ', token);
this.zone.run(() => {
this.title = "Yay!";
this.status = "Connected to MobileFirst Server";
});
var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",
WLResourceRequest.GET
);
resourceRequest.setQueryParameter("name", "world");
resourceRequest.send().then(
(response) => {
// Will display "Hello world" in an alert dialog.
alert("Success: " + response.responseText);
},
(error) => {
alert("Failure: " + JSON.stringify(error));
}
);
}, (error) => {
console.log('--> pingMFP(): failure ', error.responseText);
this.zone.run(() => {
this.title = "Bummer...";
this.status = "Failed to connect to MobileFirst Server";
});
}
);
{% endhighlight %}
</li>
</ol>
<h3><font color="DodgerBlue">Step 3: </font>Deploying an adapter</h3>
<p>Download <a href="../quick-start/javaAdapter.adapter">this prepared .adapter artifact</a> and deploy it from the {{ site.data.keys.mf_console }} using the <b>Actions → Deploy adapter</b> action.</p>
<h4><font color="DarkTurquoise">Step 3.1: </font>Select the <b>Actions → Download sample</b> option. Download the <i>Hello World</i> <b>Java</b> adapter sample</h4>
<p>Alternatively, click the <b>New</b> button next to <b>Adapters</b>. </p>
<p><blockquote> If Maven and {{ site.data.keys.mf_cli }} are not installed, follow the on-screen <b>Set up your development environment</b> instructions.</blockquote></p>
<h4><font color="DarkTurquoise">Step 3.2: </font>From a <b>Command-line</b> window, navigate to the adapter's Maven project root folder and run the command:</h4>
<pre>
mfpdev adapter build
</pre>
<h4><font color="DarkTurquoise">Step 3.3: </font>When the build finishes, deploy it from the {{ site.data.keys.mf_console }} using the <b>Actions → Deploy adapter</b> action. The adapter can be found in the <b>[adapter]/target</b> folder.</h4>
<!--<img class="gifplayer" alt="Deploy an adapter" src="{{site.baseurl}}/assets/tutorials/all-tutorials/create-an-adapter.png"/>-->
<!--<img src="{{site.baseurl}}/assets/tutorials/all-tutorials/cordovaQuickStart.png" alt="sample application" style="float:right"/>-->
<h3><font color="DodgerBlue">Step 4: </font>Testing the application</h3>
<h4><font color="DarkTurquoise">Step 4.1: </font>From a <b>Command-line</b> window, navigate to the Ionic project's root folder.</h4><br/>
<h4><font color="DarkTurquoise">Step 4.2: </font>Run the command: <br/><code>ionic cordova platform add ios|android|windows|browser</code><br/> to add a platform.</h4><br/>
<h4><font color="DarkTurquoise">Step 4.3: </font>In the Ionic project, select the <b>config.xml</b> file and edit the <code><mfp:server ... url=" "/></code> value with the <b>protocol</b>, <b>host</b> and <b>port</b> properties with the correct values for your {{ site.data.keys.mf_server }}.</h4>
<ul>
<li>If using a local {{ site.data.keys.mf_server }}, the values are typically <b>http</b>, <b>localhost</b> and <b>9080</b>.</li>
<li>If using a remote {{ site.data.keys.mf_server }} (on IBM Cloud), the values are typically <b>https</b>, <b>your-server-address</b> and <b>443</b>.</li>
<li>If using a Kubernetes cluster on IBM Cloud Private and if the deployment is of type <b>NodePort</b>, the value of the port would typically be the <b>NodePort</b> exposed by the service in Kubernetes cluster.</li>
</ul>
<p>Alternatively, if you have installed the {{ site.data.keys.mf_cli }}, then navigate to the project root folder and run the command <code>mfpdev app register</code>. If a remote {{ site.data.keys.mf_server }} is used, <a target="_blank" href="../application-development/using-mobilefirst-cli-to-manage-mobilefirst-artifacts/#add-a-new-server-instance">run the command</a> <code>mfpdev server add</code> to add the server, followed by for example: <code>mfpdev app register myIBMCloudServer</code>.</p>
<p>If a device is connected, the application is installed and launched in the device. Otherwise the simulator or emulator will be used.</p>
<blockquote>For detailed instructions on quick start steps, see <a target="_blank" href="{{site.baseurl}}/tutorials/en/foundation/8.0/quick-start/ionic/">here</a>.</blockquote>
<h3>Results</h3>
<ul>
<li>Clicking the <b>Ping {{ site.data.keys.mf_server }}</b> button will display <b>Connected to {{ site.data.keys.mf_server }}</b>.</li>
<li>If the application is able to connect to the {{ site.data.keys.mf_server }}, a resource request call using the deployed Java adapter takes place. The adapter response is then displayed in an alert.</li>
</ul>
</div>
<div class="tab-pane fade" id="advanced" role="tabpanel" aria-labelledby="advanced-tab">
<h2><a href="../application-development">Developing Applications</a></h2>
Learn to use {{ site.data.keys.product_adj }} APIs: WLResourceRequest, Client-side translation, debugging applications, Developer CLI and more...
<ul>
<li><a href="../application-development/using-mobilefirst-cli-to-manage-mobilefirst-artifacts/">Using {{ site.data.keys.mf_cli }} to manage {{ site.data.keys.product_adj }} artifacts</a></li>
<li><a href="../application-development/sdk/ionic/">Adding the MobileFirst Foundation SDK to Ionic Applications</a></li>
<li><a href="../application-development/resource-request/ionic/">Resource request from Ionic applications</a></li>
</ul>
<h2><a href="../authentication-and-security">Authentication and Security</a></h2>
Add various layers of protection to your applications.
<ul>
<li><a href="../authentication-and-security/">Authorization concepts</a></li>
<li><a href="../authentication-and-security/creating-a-security-check/">Creating a Security Check</a>
<ul>
<li><a href="../authentication-and-security/creating-a-security-check/contract">The Security Check Contract</a></li>
</ul>
</li>
<li><a href="../authentication-and-security/credentials-validation/">CredentialsValidationSecurityCheck</a>
<ul>
<li><a href="../authentication-and-security/credentials-validation/security-check/">Implementing the security check</a></li>
<li><a href="../authentication-and-security/credentials-validation/ionic/">Implementing the challenge handler in Ionic applications</a></li>
</ul>
</li>
</ul>
<h2><a href="../adapters/">Developing Adapters</a></h2>
Develop server-side code to integrate with enterprise back-end systems and cloud services.
<ul>
<li><a href="../adapters/">Adapters overview</a></li>
<li><a href="../adapters/creating-adapters/">Creating Java and JavaScript adapters</a></li>
<li><a href="../adapters/javascript-adapters/">JavaScript adapters</a>
<ul>
<li><a href="../adapters/javascript-adapters/js-http-adapter/">JavaScript HTTP Adapter</a>
<ul>
<li><a href="../adapters/javascript-adapters/js-http-adapter/using-ssl">Using SSL in JavaScript HTTP Adapters</a></li>
</ul>
</li>
<li><a href="../adapters/javascript-adapters/js-sql-adapter/">JavaScript SQL Adapter</a></li>
<li><a href="../adapters/javascript-adapters/using-java-in-javascript-adapters/">Using Java in JavaScript Adapters</a></li>
</ul>
</li>
<li><a href="../adapters/java-adapters/">Java Adapters</a>
<ul>
<li><a href="../adapters/java-adapters/java-http-adapter/">Java HTTP adapter</a></li>
<li><a href="../adapters/java-adapters/java-sql-adapter/">Java SQL adapter</a></li>
</ul>
</li>
<li><a href="../adapters/developing-adapters/">Developing Adapters in IDEs</a></li>
<li><a href="../adapters/testing-and-debugging-adapters/">Testing and debugging adapters</a></li>
<li>Server-side log collection
<ul>
<li><a href="../adapters/server-side-log-collection/">Overview of server-side log collection</a></li>
<li><a href="../adapters/server-side-log-collection/java-adapter/">Log collection in Java adapters</a></li>
<li><a href="../adapters/server-side-log-collection/javascript-adapter/">Log collection in JavaScript adapters</a></li>
</ul>
</li>
<li><a href="../adapters/advanced-adapter-usage-mashup/">Advanced adapter usage and mashup</a></li>
<li><a href="../adapters/cloudant/">Integrating with Cloudant using an adapter</a></li>
</ul>
</div>
</div>
</div>
You can’t perform that action at this time.