Skip to main content

WeatherApp with MAF using MCS : Part 1

This is the part 1 of : How to consume SOAP service using Oracle Mobile Cloud Service(MCS) into a MAF application.

This Part 1 talks about :
  1. Create SOAP Connector using MCS.
  2. Create custom API and do some minor modifications on retrieved data.
  3. Create Mobile Backend and associate the custom API.
 Login to MCS and go to Connectors :



Select "New SOAP Connector" :




I am going to use a public SOAP service which publishes current weather based on cities.
http://www.webservicex.net/globalweather.asmx?WSDL



Once you press Create, it will take you to the configuration screen. Click on "Port" and you will see 2 exposed services from that WSDL


Click "Save and Close" .
And your connector is ready!!

Now we will create the custom API on top of it.
Click on  "Development" on top right part of the page. And then click on "APIs"

Click on "New API" and enter details


 On the configuration screen of this API, go to "Security" and switch on Anonymous access.


Then go to "Endpoints" and click on "New Resource". Add 2 new resources like below.



Now click on "Methods" for "getCities" and "Add Method" : GET




Add one parameter "country" and make it required.


 Do the same actions for "getWeather", but for this add 2 parameters.
 

 Save your work.

Now go to : "Implementations" and download the "Javascript Scaffold"


Unzip the downloaded file and open weatherapi.js in a text editor, add the following code in there :
I had to do some string manipulation on the REST response, as the SOAP service returns an XML as CDATA, which MCS doesn't convert to JSON. The manipulation is for the MAF application, so that the mobile app can use a SAX parser on the XML content of the JSON response.
==========================================
module.exports = function(service) {
        /**
     *  The file samples.txt in the archive that this file was packaged with contains some example code.
     */


    service.get('/mobile/custom/WeatherAPI/getweather', function(req,res) {
        var optionsList={uri: '/mobile/connector/GlobalWeather/GetWeather'};

        optionsList.headers={'content-type' : 'application/json;charset=UTF-8'};

        // the details of the request are provided in a javascript object
        var outgoingMessage = {Header: null, Body: {"GetWeather": {
                                     "CityName": req.query.city,
                                     "CountryName": req.query.country
                                  }}};         
        optionsList.body=JSON.stringify(outgoingMessage);
       
                var handler=function(error,response,body) {
                            var responseMessage=body;
                            if(error){
                                    responseMessage=error.message;
                            }
                            var newLine = /(\\n)/g;
                            var escapeChar = /(\\")/g;
                            responseMessage = responseMessage.replace(newLine, '');
                            responseMessage = responseMessage.replace(escapeChar, '\'');
                            res.status(response.statusCode).send(responseMessage);
                            res.end();
                    };
               
        var r=req.oracleMobile.rest.post(optionsList,handler);
    });
       
        service.get('/mobile/custom/WeatherAPI/getCities', function(req,res) {
        var optionsList={uri: '/mobile/connector/GlobalWeather/GetCitiesByCountry'};

        optionsList.headers={'content-type' : 'application/json;charset=UTF-8'};

        // the details of the request are provided in a javascript object
        var outgoingMessage = {Header: null, Body: {"GetCitiesByCountry": {
                                     "CountryName": req.query.country
                                  }}};         
        optionsList.body=JSON.stringify(outgoingMessage);
        var handler=function(error,response,body) {
                            var responseMessage=body;
                            if(error){
                                    responseMessage=error.message;
                            }
                            var newLine = /(\\n)/g;
                            responseMessage = responseMessage.replace(newLine, '');
                            res.status(response.statusCode).send(responseMessage);
                            res.end();
                    };
        var r=req.oracleMobile.rest.post(optionsList,handler);
    });

};
=======================================

Now zip the directory again. Navigate to the API on MCS and drop the zip file.



Your custom API is ready to use.

We'll now create a MCS backend to expose this APIs.

Goto Development > Mobile Backends and click on "New Mobile Backend".
After you create it, go to APIs by clicking on the left hand side link. Select "Select APIs". Search for your API there and click +








Now go back to the settings page. This page contains a few important info which the MAF application requires, in order to successfully talk to MCS.
  1. Base URL
  2. Mobile Backend ID
  3. Anonymous Key
  4. Application Key



Your MCS is ready to be consumed by any Mobile App now.

Part 2 : How to build MAF application for this MCS backend.

Comments

Popular posts from this blog

Rich Text Editor - Oracle JET

Oracle JET has a lot of excellent UI components, but according to Murphy's law, client always comes up with something which you don't have at your disposal. So, driven by one of my client's requirements, I created a Rich Text Editor or WYSIWYG editor for Oracle JET. This is based on Quill JS and fully customizable. Github project download: https://github.com/sohamda/JET-Web-Components/tree/master/rich-text-editor I will explain in this blog, on how to integrate it in your own Oracle JET project. 1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder. 2. Once copied update your viewModel first. Add a snippet for passing the default content to be displayed by the editor after load. 3. Update view to load this editor Above you can see the "toolbar-options" property, that controls which options you should display to user on the editor. Those are basically the forma

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'

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