Skip to main content

WeatherApp with MAF using MCS

Pre-requisites/Assumptions :
  1. MAF version : 2.1.3
  2. mafmcsutility.jar exists in the classpath of the application.
  3. Two REST API build and exposed from Oracle Mobile Cloud Service(MCS).
    • This application is available on GitHub and can be downloaded and run from your own machine.
    • This application uses 2 APIs created and exposed in MCS
      • /mobile/custom/WeatherAPI/getweather?country=<CCC>&city=<AAA>
      • /mobile/custom/WeatherAPI/getCities?country=<CCC>
  4. Part 1 : talks about creating the Mobile Backend on MCS : http://adfjava.blogspot.in/2015/10/weatherapp-with-maf-using-mcs-part-1.html
GitHub application can be found on :

https://github.com/sohamda/WeatherApp/

 Following sections, I will talk a bit about

  • maf-application.xml
  • Datacontrol 
  • Taskflow
  • Javascript to enable device back button
You can download the Github project and check the whole source code in JDeveloper 12.1.3

maf-application.xml:

I have defined the MCS connection details in this xml.


Datacontrol : WeatherAppDC.java


getMobileBackend() : Reads the preferences declared in maf-application.xml and prepares an MBE object to communicate with MCS.
MBE object comes from mafmcsutility.jar. It is a single point entry for all MCS communication.

anonymousLogin() :  Logs the mobile app user to the MCS backend, so that the app can call the API defined/exposed via MCS.
Uses MBE object and the MBE Anonymous Key defined in the maf-application.xml.

invokeGetCitiesAPI() : This is the first method invoked from the app, so this one does the "anonymousLogin" first. Then it invokes "getCities" MCS API in a thread.
The JSON response of the API contains XML data as well, so it also uses a SAX Parser to parse the XML content and populate the "citiesForCountry" List.

invokeGetWeatherAPI() : This invokes "getWeather" MCS API in a thread. The JSON response from API contains the information in XML, so it uses a SAX Parser to parse and populate the "currentWeather" object.

TaskFlow : cities-task-flow

 

First taskFlow of the app. SearchCities is an AMX page to search for cities for a country.
The filter button on the below image calls "invokeGetCitiesAPI()".



ShowWeather : is a taskFlow call. It looks like :



invokeGetWeatherAPI : Is a method call activity and it calls  "invokeGetWeatherAPI()".
showCurrentWeather : Is an AMX page to display the current weather details.



Javascript to enable device back button :

I have also added a custom JS to make use to Android device's back button. It has been added as a file to the taskflow defined in maf-feature.xml


That's it. Please feel free to comment if you have any questions.

A small video on how the app works runtime :







Labels:

Comments

  1. AnonymousOctober 15, 2015 at 7:47 PM

    Excellente!

    ReplyDelete
  2. UnknownOctober 20, 2015 at 2:15 PM

    This comment has been removed by the author.

    ReplyDelete
  3. UnknownOctober 20, 2015 at 2:17 PM

    Hi,
    I wanted to consume a dummy rest service created in MCS admin console in MAF app . For that i am trying to create rest client and proxy from new wizard in JDEV.
    I gave the WADL url but it is giving error that 'The specified WADL URL doesn't return a WADL for either a GET or an OPTIONS.'

    Thanks in advance.

    ReplyDelete
    Replies
    1. Soham DasguptaOctober 21, 2015 at 5:28 PM

      I am not sure what you mean by "new wizard in JDev". The only way I know to consume MCS published rest api is to use "mafmcsutility.jar". You need 4 details, e.g. backend id, anonymous key etc and you can connect to the rest api you want on MCS.

      Delete
  4. AnonymousFebruary 28, 2016 at 9:02 PM

    Hello,
    I tried to build the app available in GitHub but had errors because all the imports of the mafmcsutility library were on error. I checked that the mafmcsutility.jar exists in the projet properties classpath.
    Is there anything that I should do before building the app that might help jdeveloper recognize the library ?

    Thanks in advance.

    ReplyDelete
    Replies
    1. Soham DasguptaFebruary 29, 2016 at 12:41 PM

      Hi Yosra,

      Not sure why, but the imports and usages of classes from mafmcsutility shows error in Jdev, I have updated the sources and references to the latest MAF version. Please do a fresh check out from Github. And change the path of mafmcsutility in jws/jpr.

      - Soham

      Delete
    2. AnonymousFebruary 29, 2016 at 5:58 PM

      Hi,
      Thanks for your answer. I updated the path to all the libraries used in the project according to where they are on my jdev home.
      The weather app works fine. This will help me work on my own application.
      Thanks for your help again.

      Yosra

      Delete
  5. Soham DasguptaFebruary 29, 2016 at 11:17 AM

    This comment has been removed by the author.

    ReplyDelete

Post a Comment

Popular posts from this blog

Chatbots and Oracle Cloud Services

Thanks to Oracle A-Team, I had a chance to work with Chatbots. 3 pure NodeJS applications, on couple of Oracle Cloud platforms and Facebook messenger, and my chatbot was running. Let me explain, the architecture a bit. To start with, following is the simple representation of how it works. Message Platform Server : Is a NodeJS application, deployed on Oracle Application Container cloud, acts as a channel between Facebook Messenger and the chatbot engine. It simply converts the incoming messages from Facebook and sends it to chatbot readable format. Also, when chatbot replies, it converts to Facebook readable formats and passes it to messenger. Chatbot Engine : Is a NodeJS application, which communicate with some REST APIs based on a conversation flow document and moves the flow of the conversation from one state to another. Flow JSON : Where we document, every state of a conversation and which APIs to call to generate a response. For example, at the beginning of the con
23 comments
Read more

Create Micro CRUD services for Oracle Database Cloud using NodeJS

I will try to explain, how you can use NodeJS to create mirco services for the tables in your Oracle Database Cloud or on-premise Database. Complete Github project : https://github.com/sohamda/LeasifyAPIs You need to do "npm install" to download the node_modules. Step by Step guide : 1. NodeJS : either 32 or 64 bit. If you already have NodeJS installed, please check whether it is 64 or 32. Use below command to figure that out : C:\>node > require('os').arch() If you get : 'ia32' , then it is 32 bit installation. 2. Install oracle-db node module .  This was a lengthy and time consuming installation for me, because for Windows, it has a lot of pre-requisites. If you are a Mac user, you are lucky. :) I followed : https://community.oracle.com/docs/DOC-931127 There is also a detailed one in github : https://github.com/oracle/node-oracledb/blob/master/INSTALL.md 3. Config your DB Cloud Create a user and couple of tables on which we'
25 comments
Read more

Layout Management & CSS Classes with Oracle JET

Oracle JET provides automatic responsive layout using CSS classes. So that, from large screens to small screens the application fits itself the best possible way. JET’s layout management are based on 2 types of CSS classes “Responsive Grid” and “Flex”. Responsive grid classes which deals with size, number of columns and functions of a particular <div>. Naming convention of these classes are oj- size - function - columns sizes can be: sm, md, lg, xl functions can be: hide, only-hide columns can be: any number between 1 to 12.   Just like Bootstrap, JET also divides the width of the available space into 12 columns, so for example, if you want a section of your page should take up atleast 5 columns if you divide the available screen into 12 columns, you need use : oj- size -5. Now comes the size part, you need to define that for each size of the screen, from hand-held mobile devices to large or extra large desktop screens. With combination with theses grid c
2 comments
Read more