IBM MobileFirst Foundation 8.0 integration with Weather Service offered on Bluemix in combination with Facebook's ReactJS
Chevy Hungerford May 07, 2018MobileFirst_Foundation
This is a sample app that was created to show off how versatile MobileFirst Foundation 8.0 is with UI Frameworks. If you are an on-premise 8.0 customer or Mobile Foundation service customer, then read further to learn how to integrate your app on Mobile Foundation with Weather service on Bluemix. In this example I demonstrate the ease of using Facebook’s ReactJS with MobileFirst Foundation 8.0. For this purpose a Cordova app was implemented using ReactJS and the MobileFirst SDK, using the Weather Services API from Bluemix.
View the app and its adapter on GitHub.com.
What you should know
It is important to understand Facebook’s ReactJS Framework and how to create classes that render the appropriate objects. You can learn about ReactJS here.
What you need
- MobileFirst Foundation DevKit or an instance of the Mobile Foundation Bluemix service. Read this tutorial
- An instance of Weather Services from Bluemix with the password and host. Follow these instructions..
npm install -g cordova
- MobileFirst CLI:
npm install -g mfpdev-cli
npm install -g webpack
Before you begin
Start your MobileFirst Server. Navigate to the root directory of your MobileFirst Server and execute the
From your Weather Services API, gather the host and password for your adapter. Place those values inside the
weatherAPIPassword variables in
Starting the App
To get the app running on an Android device, navigate to the MFPReactApp root folder and run the following commands:
cordova add platform android
Register your application with the MobileFirst Foundation 8.0 server:
mfpdev app register
Run your application:
cordova run android
Deploying the Adapter
Navigate to the root folder of the adapter JavaHttp.
First build the adpter:
mfpdev adapter build
Then, Deploy the adapter:
mfpdev adapter deploy
MobileFirst needs to call
wlCommonInitat the beginning of the application start. To achieve this I created a
wlinit.jsfile in my common
www/jsdirectory and injected the script in my
<script>tag. I was not able to include this in my JSX because the babel complining did not externalize this function for MFP to call.
I am working off babel
stage-0because the ease of binding functions to
thiswith the fat arrow syntax (
These inscructions are for unix machines, they may differ on a windows machine.
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.