Lab 6678A - Mobile App Development Using the IBM MobileFirst Platform Foundation Command Line Interface (MFP-CLI)
- Click Download ZIP above or click ibm.biz/lab6678zip
- During this Lab you will build a Mobile Chat App that leverages the MFP Server and NodeJS using IBM Bluemix.
- Login into bluemix.net and verify that you have at least 128MB free for Cloud Foundry Apps
- Click this button
- This will deploy the nodejs branch
- Select a unique hostname for your new App, like:"mychat"
- Your app will be assigned a https unique URL like:https://mychat.mybluemix.net
- Click
to see the chat app running on the browser and verify the URL like https://mychat.mybluemix.net
- Leave the browser window open since we are going to need the URL and use the website for testing our mobile App.
- Verify that your Lab workstation has the MFP-CLI installed by running the following commands in a Terminal window
$ mfp help
$ mfp -v
- If you don't have the MFP-CLI installed you can download the MFP-CLI from the MFP Developer Center
- Change directory to MFP backend project
$ cd MFPBackend
- Use the MFP-CLI to start the MFP Server
$ mfp start
- You can use other MFP-CLI commands to manage the MFP Server
$ mfp status
$ mfp stop
$ mfp restart
-
Edit
MFPBackend/adapters/ChatService/ChatService-impl.js
-
Set the variable chatUrl to the url of your new Chat Service deployed in Step 1
var chatUrl = 'https://mychat.mybluemix.net';
- Change directory to the adapter directory
$ cd adapters/ChatService/
- Use the MFP-CLI to push only the adapter changes
$ mfp push
- Use the MFP-CLI to open the console and verify adapter is deployed
$ mfp console
- Test the adapter and verify that returns the correct chat url
$ mfp adapter call ChatService/getChatServiceInfo
- The command will return a response with the url of your nodejs app
Calling GET '/MFPBackend/adapters/ChatService/getChatServiceInfo?params=[]'
Response:
{
"isSuccessful": true,
"chatUrl": "https://chatservice.mybluemix.net"
}
- Change directory to the app directory
$ cd ../../../MFPApp
- Use the MFP-CLI to add the Cordova Platform iOS
$ mfp cordova platform add ios
- Use the MFP-CLI to push the app to the running MFP Server
$ mfp push
- Use the MFP-CLI to verify that the app is registered on the correct server
$ mfp server info local
- The command will return a list of adapters and apps
Connecting to server 'local'
Profile name: local
URL: http://localhost:10080
MFP version: 7.1.0.00-20160125-0742
Is default: true
------------------------------------------------------------
Runtime: MFPBackend
Bound apps
IC2016Chat, v1.0.0 - Hybrid (iphone)
Adapters
ChatService
------------------------------------------------------------
- You can also open the Console and verify that the IC2016Caht app is registered
$ mfp console
- Preview the App on the Browser
$ mfp cordova preview --type browser
- Run the App on the Simulator using the MFP-CLI
$ mfp cordova emulate
-
When prompted select an iPhone Simulator from the list
-
To run a specific Simulator you can pass
--target
argument
$ mfp cordova emulate --target iPhone-6s-Plus
-
Visit the Chat Service on Bluemix (i.e. https://mychat.bluemix.net)
-
Now test the chat service between the Browser and the iPhone Simulator
-
If the Keyboard doesn't show up in the Simulator, then press Command (โ) + K
-
You can share the Bluemix URL to a friend located in any part of the world and have a conversation.
-
This demo App is not configured with Login Authentication, this is something you can easily add using MobileFirst Platform check MFP Developer Center for more information on security related topics.
-
If you finish the Lab in less than 15 minutes you can go ahead and continue
-
Enable the App to send photos using the camera or photo library
-
Open
MFPApp/platforms/ios/IC2016Chat.xcodeproj
-
You can also open from Terminal
$ open platforms/ios/*.xcodeproj
- Change directory to MFPApp if not already
$ cd MFPApp
- Use the MFP-CLI to add the camera plugin
$ mfp cordova plugin add camera
-
Edit
MFPApp/www/templates/chat.html
-
Add a camera icon to call Camera Plugin as the first child of the
<form id="footer-input">
<i class="icon ion-camera" ng-click="takePicture()" ng-show="isWebView"></i>
- Use the MFP-CLI to prepare your changes
$ mfp cordova prepare
- Click Play Button in XCode to run Simulator
- Touch the Camera button
- Select Photo Library (Real device supports Selfie and Picture buttons)
- Select a Photo to share
- Check the other clients and see the picture you just share
- If you want to be able to run the App on your iPhone and take it for a spin, you will need to deploy the MFP Server on a public IP Address that your iPhone can reach.
- The easiest way to run MFP Server on the Cloud is using Bluemix Containers.
-
Login into Bluemix and make sure you have at least 1GB of memory and 1 Public IP Address for Containers.
-
Click Containers on your Dashboard
-
Select the ibm-mobilefirst-starter docker image
-
Enter the following minimum information:
- Container name: MFPServer
- Size: Medium 2GB
- Public IP Address: Request and Bind IP
-
Click Create
-
Wait for a public IP address to be assigned, and the container to be running
-
Click the public IP address to open a new Browser window
-
Enter a password to register the user admin for example admin and click Register
-
Save and bookmark the base URL for the MFP Server (i.e. http://169.x.x.x:9080)
-
Click Open Console to open the MFP Server Console
-
In the MFP Server Console Click Add new Adapter button at the top right
-
Browse to the location of ChatService.adapter for example Downloads/IC2016-MFP-Hello-Lab-master/MFPBackend/bin/ChatService.adapter
- Use the MFP-CLI to add a new server profile with the name bluemix located using the public IP address on bluemix, and the admin credentials you enter in Step 5.1
$ mfp server add bluemix -l admin -p admin -u http://169.x.x.x:9080
Notice to replace 169.x.x.x with the correct public IP address of your docker container
- Use the MFP-CLI to verify the list of server profiles
$ mfp server info
- The bluemix profile will show up
Name URL Description
------------------------------------------------------------
local http://localhost:10080 Local Dev Server [Default]
bluemix http://169.x.x.x:9080 Remote Server
------------------------------------------------------------
- Change directory to MFPApp if not already
$ cd MFPApp
- Use the MFP-CLI to register the App with the docker container on bluemix
$ mfp push bluemix
Notice that the name of the runtime on the remote MFP Server is MobileFirstStarter, This is different from the local runtime MFPBackend on the local MFP Server
- Plug your iPhone with a USB cable
- Open XCode
$ open platforms/ios/*.xcodeproj