lundi 23 juillet 2018

Web service and Azure - How do I consume the web service with React?

I wrote a web service in Visual Basic using Visual Studio Community 2015. The code I wrote will make a mySql connection to a mySql data base hosted on the cloud by mySql. The code works correctly and pulls the required data from the mySql database. I tested it locally on my development machine.

I them published the code using the publish wizard. When the wizard first opened, I selected a publish target (Microsoft Azure Web Apps) and clicked ok. The next screen asked me to enter a web app name, app service plan, resource group, region, and database server. I entered all the information and clicked create.

After a while, I got a message that said something to the effect that my subscription type is not allowed in the region I selected. However, when I log into my Azure account, and go to my portal, I see an entry called appServicewmcw (which is the name of the app I entered when publishing) and to the right is says App Service Plan.

When I click on the app, I get a page which gives me the following information:

Resource group: resourceGroupwmcw

Status: Running

Location: East US

Subscription: Free Trial

Subscription ID: xxxxxxxxxxxxxx

URL: https://webservicewmcw.azurewebsites.net

App Service plan/pricing tier: appServicewmcw

FTP/deployment username: No FTP/deployment user set

FTP hostname: ftp://waws-prod-blu-099.ftp.azurewebsites.windows.net

FTPS hostname: ftps://waws-prod-blu-099.ftp.azurewebsites.windows.net

So, my question is, how do I call (consume?) this web service and display the data the service is returning? I am trying to write the code in React to display on a page. The code I am using would be something like this:

import React from 'react';
import ReactDOM from 'react-dom';

let appTitle_literal = "Title Not Found";
let appDescription_literal = "Description Not Found";

{
    call the web service
    if the web service returns data then
        let returned_data = web_service_returned_data
        let rData = returned_data.split("|")
        appTitle_literal = rData[0]
        appDescription_literal = rData[1]
}

const appTitle_element = React.createElement('div', null, appTitle_literal);
const appDescription_element = React.createElement('div', null, appDescription_literal);

ReactDOM.render(appTitle_element, document.getElementById('appTitle'));
ReactDOM.render(appDescription_element, document.getElementById('appDescription'));    




Aucun commentaire:

Enregistrer un commentaire