Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

Running MobileFirst Platform Foundation 7.1 Cordova app with Ionic2

This sample will show you how to add Ionic2 to an MFP 7.1 Cordova app. The app in this sample calls a MobileFirst Blog RSS adapter protected with a login form.

##Demo MFP 7.1 + Ionic2

Prerequisites

Link to MobileFirst 7.1 + Angular2 sample in the following link

Running the sample

  • Clone this repository
$ git clone https://github.com/mfpdev/mfp71-with-ionic2.git
  • Add the SecurityTest to Ionic2AndMFP/server/conf/authenticationConfig.xml file

    • Add the customSecurityTest AuthSecurityTest:
    <!-- Add it under securityTests node -->
    <customSecurityTest name="AuthSecurityTest">
      <test isInternalUserID="true" realm="SampleAppRealm"/>
    </customSecurityTest>
  • Deploy the MFRSSAdapter

    • Copy the MFRSSAdapter Copy the MFRSSAdapter folder to the Ionic2AndMFP/adapters folder on your MFP 7.1 server.

    • Build and deploy the adapter:

      • From the terminal window, navigate into the adapter folder and run the following:
      $ mfp push
  • Install and run the Sample app

    • From the terminal window, navigate into MyApp and run:
    $ npm install
    • Transpile the TypeScript code in the app folder with gulp commands:

      $ gulp build
      • Or run watch to let gulp transpile the TypeScript code on every time you change something in the app folder.
      $ gulp watch
    • Add your platform (ios/android):

      $ mfp cordova platform add ios
    • Add the cordova-plugin-mfp plugin :

      $ mfp cordova plugin add cordova-plugin-mfp
    • Deploy the application:

      $ mfp push
    • Run the application:

      $ mfp cordova emulate

    How to create a blank template of an MFP 7.1 Cordova app that uses Ionic2

    The main challenges are:

    • Ionic2 uses a later version of Cordova than MFP 7.1 (Cordova 3.7.0) - to deal with this you need to create Ionic2 project without Cordova and then merge it into an MFP 7.1 Cordova app.
    • Ionic2 currently works with TypeScript and MFP 7.1 is not built to call from TypeScript - to deal with this you need to add the .d.ts files into the typings folder and use gulp commands

    Guidelines:

    • Create the MFP 7.1 Cordova app by running the following commands in a terminal window:
    $ mfp cordova create myapp -p ios,android
    $ cd myapp
    $ npm install
    • Create an empty Ionic2 app by running the following commands in a terminal window:
    $ ionic start -v2 --no-cordova ioniccode blank
    • Copy Ionic2 Into an MFP 7.1 Cordova app by running the following command in a terminal window:
    $ cp -a ./ioniccode/. ./myapp/
    • Add wlInit.js into ./myapp/www/js/ by running the follow command in a terminal window:
    $ curl -o ./myapp/www/js/wlInit.js https://raw.githubusercontent.com/mfpdev/mfp71-with-ionic2/master/MyApp/www/js/wlInit.js
    • Add the reference to wlInit.js in ./myapp/www/index.html:
    <script src="js/wlInit.js"></script>
    • Add the .d.ts files by running the follow command in a terminal window:
    $ curl -o ./myapp/typings/jquery/jquery.d.ts https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/jquery/jquery.d.ts --create-dirs
    $ curl -o ./myapp/typings/ibm-mobilefirst/ibm-mobilefirst.d.ts https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/ibm-mobilefirst/ibm-mobilefirst.d.ts --create-dirs
    • Add reference to ibm-mobilefirst.d.ts in ./myapp/index.d.ts:
    /// <reference path="ibm-mobilefirst/ibm-mobilefirst.d.ts" />
    • Run npm install

    • Run gulp build or gulp watch

    • Preview / Run the app by running one of the commands in a terminal window:

    mfp cordova emulate
    mfp cordova preview

    Caution: Always run Cordova commands using the mfp CLI (e.g mfp cordova emulate). Running Cordova directly will cause the app to stop working since MFP 7.1 does not work with Cordova version beyond 3.7

    Supported Levels

    IBM MobileFirst Platform Foundation 7.1

    License

    Copyright 2016 IBM Corp.

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

About

No description, website, or topics provided.

Resources

Releases

No releases published

Packages

No packages published