Creating an Ionic 3/Mobile Foundation 8 App: Setup

This multi-part tutorial will demonstrate how to build a simple CRUD Ionic 3 and IBM Mobile Foundation Application.

Imagem de capa

Setup: Ionic 3 & IBM Mobile Foundation Crud Tutorial

This section of the tutorial will cover the setup and installation of necessary software required for creating a mobile application using Ionic 3 and Mobile Foundation.

It is meant for someone who is just getting started developing Mobile Applications and wants to take a hybrid approach. That doesn’t mean there are not an valuable nuggets of information, however if you are an experienced developer and the required tools installed already, you can skip this part of the tutorial - although you will want to make sure have installed the Mobile Foundation Components.

Subsequent tutorials will cover the process of creating the application, see the introduction for more information.

What is needed for this Tutorial

To building a mobile application using Ionic 3 and Mobile Foundation you will need the following:

Optional installations

Software I have Installed

Software Version
macOS Sierra 10.12.6
Java JDK 1.8.0_121-b13
nodejs 6.11.3
npm 3.10.10
git 2.8.1
Ionic CLI 3.12.0
Mobile Foundation CLI 8.0.0-2017091111
Mobile Foundation Server  
json-server 0.12.0
Maven 3.5.0

Installing Java JDK

You will need to have either version 7 or version 8 of the Java Developer Kit (JDK) installed for the Mobile Foundation Developer Kit to run and for the ability to run Maven commands. Below are links to instructions for installing Java Developer Kit version 8.

Check your installation to ensure that Java has been installed by opening a terminal or command prompt (if not already open) and type the following:

java -version

Installing nodejs

If you already have node or are unsure if you have node, open a terminal or command prompt and type node --version. If nodejs is installed, then you should see the version echoed back.

If you do not have nodejs installed, it is a fairly simple process. Open a browser and visit nodejs.org. On the front page is a button to download the LTS, or Long Term Support, version of nodejs.

nodejs Download

Note: As of the time of writing this article LTS is for version 6.11.3.

After you have completed the installation steps for nodejs, you can confirm the installing by checking your nodejs version as mentioned above.

Installation of nodejs also includes the installation of node package manager (npm). npm is a software registery that contains millions of software products and components and is essential for installing Ionic Framework, Cordova and the Mobile Foundation Command Line Utility.

Alternative: Node Version Manager

You may at some point in your development career require the ability to have multiple versions of nodejs installed. This can be handle by installing Node Version Manager and using it to install node for you. Installing Node Version Manager is beyond the scope of this article, however I wanted to mention it as an option.

Installing Git

Git is one of the most widely used version control systems used today. The source that I provide throughout this tutorial will be available via Git. So if you run into trouble you can always pull from git to catch up.

Installing Git is as straightforward as installing nodejs. Visit the Git Download Site and download the appropriate version for your operating system. Follow the instructions to install.

Git Download

Installing the Ionic Framework Command Line Utility

The Ionic Command Line Utility is used to create, build and test mobile applications. To install the Ionic Command Line Utility you will use the freshly installed Node Package Manager (npm) that came with the nodejs installation.

Open a terminal or command prompt and type the following:

npm install -g ionic

Note: You may need adminstrator permissions. Under Windows you will need to open the command prompt As Administrator. For a Mac or Unix, in the terminal session you would prefix the command with sudo. For example sudo npm install -g ionic.

The version of Ionic CLI that will be used for this tutorial is 3.12.0. To install this particular version you can type npm install -g ionic@3.12.0

What the -g parameter does is instructs npm to install the Ionic Command Line Utility such that it is accessible anywhere or globally.

For more information on installing the Ionic Command Line Utility please visit Ionic Installation Docs.

Alternative: Using Ionic Creator

Ionic Creator has recently been updated to support Ionic 3, however at the time of writing this tutorial it is still in an alpha release. You can read more about it on the Ionic Blog: Announcing Creator Ionic 3 support! (And what’s coming next).

Typically I will use Creator to create my screens with it’s WYSIWYG drag-drop interface. Then I create a project using the command line utility (CLI) as well use the CLI to create each of the pages. Once that is down, I download the project Ionic Creator to a temporary area, unzip it, and then copy over the HTML and CSS.

This process is a little more complex than simply downloading the project from Creator and using that project. But the reason I do that is because I like using the Lazy Page Loading. Lazy Page Loading helps with performance by only loading pages when they are needed.

There is a blog Upgrade to Ionic 3 Lazy Loading (With Script!) that you could use to update a project downloaded from Creator to generate the files necessary to use Lazy Page Loading. I have added it here simply as a reference.

Installing Cordova

As with the installation of Ionic , you will use npm to install Cordova. Cordova is the component that makes your app an app. It is a bridge between the device and the JavaScript/HTML you write your application with. Visit the Cordova site for an Architectural Overview of Cordova

Open a terminal or command prompt (if not already open) and type the following:

npm install -g cordova

To confirm that Cordova has been installed, go to your command prompt or terminal session and type:

cordova -version

Note: You may need adminstrator permissions. Under Windows you will need to open the command prompt As Administrator. For a Mac or Unix, in the terminal session you would prefix the command with sudo. For example sudo npm install -g cordova. In addition you could have installed Ionic and Cordova at the same time by typing sudo npm install -g ionic cordova

Installing Typescript

Typescript adds strong typing to Javascript. This feature and ECMAScript 6 (or ECMA-262/ECMAScript 2015 for you purists out there), in my opinion, are what makes Javascript a viable and effective programming language. Many editors now support Typescript including the editors mentioned below.

As with the installation of Ionic and Cordova, you will use npm to install Typescript.

Open a terminal or command prompt (if not already open) and type the following:

npm install -g typescript

To confirm that Typescript has been installed, go to your command prompt or terminal session and type:

tsc --version

Note: You may need adminstrator permissions. Under Windows you will need to open the command prompt As Administrator. For a Mac or Unix, in the terminal session you would prefix the command with sudo. For example sudo npm install -g typescript.

Installing the IBM Mobile Foundation Command Line Interface (CLI)

As with the installation of Ionic and Cordova, you will use npm to install the IBM Mobile Foundation Command Line Interface (CLI).

Open a terminal or command prompt (if not already open) and type the following:

npm install -g mfpdev-cli

The CLI is updated on a fairly regular basis and you can confirm the latest available release by visiting the npm site for mfpdev-cli. At the time of writing this blog the current version of the CLI is 8.0.2017091111.

To confirm that the IBM Mobile Foundation Command Line Interface (CLI) has been installed, go to your command prompt or terminal session and type:

mfpdev --version

Note: You may need adminstrator permissions. Under Windows you will need to open the command prompt As Administrator. For a Mac or Unix, in the terminal session you would prefix the command with sudo. For example sudo npm install -g mfpdev-cli.

Installing json-server

json-server is a tool that allows you to quickly mock up data as JSON documents and provides full REST support. What I like about it is that I can mock up my application data structures for developing my user interface without the need for creating a full-blown database. This is great for prototyping your application. I travel a lot and the server runs locally so I can always work on my app.

Again you will use npm to install the json-server

Open a terminal or command prompt (if not already open) and type the following:

npm install -g json-server

Note: json-server is also available via Docker Hub

Installing your Favorite Editor

Hopefully you already have a favorite editor installed. But if you do not or would like to try something new, you can visit one or more of the following sites and follow the download/installation instructions.

For the remainder of this tutorial series I will use Visual Studio Code

Visual Studio Code Home Page

Installing the Mobile Foundation Developer Kit

The Mobile Foundation Developer Kit includes a ready to run server environment based on the IBM Websphere Liberty Profile. The Mobile Foundation application is deployed to the Liberty Profile. Mobile Foundation is an application itself and runs on various flavors of IBM Websphere as well as Tomcat.

For development purposes the Developer Kit is great as it can be used in situations where you may not have internet access. You can download the Mobile Foundation Developer Kit from the IBM Mobile Foundation Developer site.

Note: An alternative to installing the Developer Kit would be to start an instance of Mobile Foundation on Bluemix. If you have a Bluemix Account, instructions for starting Mobile Foundation on Bluemix can be found here

Download the installation option that best supports your operating system. The installer will guide you through the installation process. Once the installation is complete you can start the server to ensure that it is installed correctly.

To start the server, open a terminal or command prompt and navigate to the directory where the Mobile Foundation Developer Kit was installed.

For Mac and linux type

./run.sh

For Windows run the batch file (run.bat) by typing

run

Once the server is started, you will know that the server is ready when you see the line ‘The server mfp is ready to run a smarter planet.’, you can open the server console by opening a second terminal or command prompt and typing

mfpdev server console

This is a Mobile Foundation CLI command that will open the server console in your default browser. If you are shown a login page, the username and password are admin and admin respectively.

Mobile Foundation Server Console

To verify the version of the server you are running, Click the Settings icon in the upper right corver of the page, then Click About.

About the Mobile Foundation Server Console

NOTE: More of the Mobile Foundation CLI commands will be covered in future sections of the tutorial. However if you are interested in learning more about the commands now, you can type mfpdev help from a terminal or command prompt.

Installing Maven

Maven is a build process management open source project managed by the Apache Foundation. Mobile Foundation uses Maven as the basis for building a deploying adapters. The Maven respository contains a number of Mobile Foundation projects that can be found here. The advantage of having adapters as Maven projects is that you can extend adapters to meet you specific needs such as creating an adapter for a third party product that is not supported.

Maven requires Java Development Kit 1.7 or above. You can review additional requirements here.

Installing Maven is relatively simple. Visit the Maven Download page and select the appropriate archive file, Windows users will most likely download the Binary zip archive while Unix (including Mac) users will download the Binary tar.gz archive.

Maven Install

Once the download is complete, uncompress the archive and copy/move to an accessible location on your hard disk. Add the location of the Maven bin directory to your path and restart as necessary. Full instructions for installing Maven can be found here.

Optional installations

Xcode for Mac Developers

If you have a Mac, the easiest way to install Xcode is via tha App Store. Once you have installed Xcode you will also want to get an Apple Developer License so you can test using a device.

Install Xcode

Android Studio

An alternative to using Xcode or as a supplement, you can install Android Studio by visiting the Android Studio Home page. Click the DOWNLOAD ANDROID STUDIO button. Once the download is complete start the installer and follow the instructions.

Android Studio Home Page

After the installation you will need to install sdks and configure emulator devices.

Google Chrome

I like Google Chrome’s Debugging capabilities. I think the developer tools are hard to beat when building hybrid mobile and web based applications. Another very simple install as it is a download and install all in one. Visit https://www.google.com/chrome/browser/desktop/index.html and follow the instructions.


Next Up: The Article App