Forums

Overview › Felgo 3 Support (Qt 5) › Get XMLHttpRequest

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
January 13, 2017 at 18:54 #15717
Redouan
Hi everyone, im doing my first app on this plataform Felgo, so im starting to learn.

Im trying to get some weather data from external API. In this case im using Dark Sky API.

Im gonna public my private API for help ^^ after that i will reset secret key 😀

Im trying to get data from the page and then create some labels on the app like

[Image of Sun]

Sunny, 40ºF/C

My private key:
```
https://api.darksky.net/forecast/68719c22555faabee724bc9533b1080a/37.8267,-122.4233
```
I was reading those documents: https://felgo.com/doc/vplay-xmlhttprequest/ and http://doc.qt.io/qt-5/qtqml-javascript-qmlglobalobject.html and https://darksky.net/dev/docs/forecast .

By the way i did this:
```
    function weatherget() {
           var httpRequest = new XMLHttpRequest();
           httpRequest.open("GET", "https://api.darksky.net/forecast/68719c22555faabee724bc9533b1080a/37.8267,-122.4233", true);
           httpRequest.onreadystatechange = function() {
               if (httpRequest.readyState == httpRequest.DONE) {

                   var serverResponse = httpRequest.responseText;
                   console.debug("weatherget() httpRequest result:", serverResponse);

                   if(!serverResponse) {
                       nativeUtils.displayMessageBox("Ooops! Parece que no tienes conexión");
                       return;
                   }

                   var result = JSON.parse(serverResponse);
               }
            }
         }
```
But on my test app i dont get any response, on debugger console or even message or something.

How i get this data example:
```
{
  "latitude": 47.20296790272209,
  "longitude": -123.41670367098749,
  "timezone": "America/Los_Angeles",
  "currently": {
    "time": 1453402675,
    "summary": "Rain",
    "icon": "rain",
    "nearestStormDistance": 0,
    "precipIntensity": 0.1685,
    "precipIntensityError": 0.0067,
    "precipProbability": 1,
    "precipType": "rain",
    "temperature": 48.71,
    "apparentTemperature": 46.93,
    "dewPoint": 47.7,
    "humidity": 0.96,
    "windSpeed": 4.64,
    "windBearing": 186,
    "visibility": 4.3,
    "cloudCover": 0.73,
    "pressure": 1009.7,
    "ozone": 328.35
  },
  "minutely": {
    "summary": "Rain for the hour.",
    "icon": "rain",
    "data": [
      {
        "time": 1453402620,
        "precipIntensity": 0.1715,
        "precipIntensityError": 0.0066,
        "precipProbability": 1,
        "precipType": "rain"
      },
      ...
    ]
  },
  "hourly": {
    "summary": "Rain throughout the day.",
    "icon": "rain",
    "data": [
```
There’s a ton of data, but i only want some fields like actual ºC/ºF, Sunny/Clouds and basic stuff, how i get this data and public it directly to main screen of the app?

Is there any detailed guide for using XMLHttpRequest? For do what im trying i have to use XMLHttpRequest or there’s another way to do this?.

Thanks.
January 13, 2017 at 23:03 #15718
Alex
Felgo Team
Hi Redouan,

you were pretty close, all you missed was calling:
```
httpRequest.send()
```
Then you can use standard JSON notation to navigate through the DOM, like this:
```
console.debug("result: " + result["currently"]["summary"])
```
Full Source:
```
import Felgo 3.0
import QtQuick 2.0

App {
  id: app
  NavigationStack {

    Page {
      title: qsTr("Main Page")
      AppButton {
        anchors.centerIn: parent
        text: "Request"
        onClicked: weatherget()
      }
    }
  }

  function weatherget() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open("GET", "https://api.darksky.net/forecast/68719c22555faabee724bc9533b1080a/37.8267,-122.4233", true);
    httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState == httpRequest.DONE) {
        var serverResponse = httpRequest.responseText;
        //console.debug("weatherget() httpRequest result:", serverResponse);
        if(!serverResponse) {
          nativeUtils.displayMessageBox("Ooops! Parece que no tienes conexión");
          return;
        }
        var result = JSON.parse(serverResponse);
        console.debug("result: " + result["currently"]["summary"])
      }
    }
    httpRequest.send()
  }
}
```
Cheers,
Alex
January 15, 2017 at 16:33 #15722

Redouan

Wow, thanks for the reply @alex it helped a lot!! Actually im gonna start to display that information that gets from API to user with IMAGES and Labels.

Can you please tell me if there’s any guide for learn to use positioning of the items?

I mean this (i did a grid).

https://puu.sh/tndtX/a525a8af27.png

How i can place image on the yellow zone??

Thanks.

January 15, 2017 at 20:32 #15723

Redouan

yusaney@gmail.com said:

Wow, thanks for the reply @alex it helped a lot!! Actually im gonna start to display that information that gets from API to user with IMAGES and Labels.

Can you please tell me if there’s any guide for learn to use positioning of the items?

I mean this (i did a grid).

https://puu.sh/tndtX/a525a8af27.png

How i can place image on the yellow zone??

Thanks.

I found this and i found a way to move my objects as i want:

http://doc.qt.io/qt-5/qtquick-positioning-anchors.html http://doc.qt.io/qt-5/qml-qtquick-item.html#anchors.bottom-prop

Im using x and y for move items on the screen, and learned to do a grid too.

I have one more question:

How i can do the same as you did with your button code, but when app initialitzes, indeed clicking button.

Thanks.

January 15, 2017 at 20:50 #15724
Alex
Felgo Team
Hi,

the best signal to use after the app launches is initTheme:
```
App {
  onInitTheme: {
    // .. place your code here
  }
}
```
This signal is called after the app has launched and everything is set up properly.

Cheers,
Alex
January 17, 2017 at 19:44 #15740
Redouan
Hi @alex again, thanks for you help i really appreciate it but im having some issues on the QML on starting app. I did what you said but i cant make it working >.< It does nothing, when app initializes dont shows message.

https://puu.sh/tpDrl/c2a562a415.png
```
App {
    id:app
    onInitTheme: {
    function weatherget() {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open("GET", "https://api.darksky.net/forecast/68719c22555faabee724bc9533b1080a/37.8267,-122.4233", true);
        httpRequest.onreadystatechange = function() {
          if (httpRequest.readyState == httpRequest.DONE) {
            var serverResponse = httpRequest.responseText;
            //console.debug("weatherget() httpRequest result:", serverResponse);
            if(!serverResponse) {
              nativeUtils.displayMessageBox("Ooops! Parece que no tienes conexión");
              return;
            }
            var result = JSON.parse(serverResponse);
            console.debug("result: " + result["currently"]["summary"])
          }

        }
        httpRequest.send()
      }
    }
```
PD: Im trying to make buttonimage, at first tried this:

https://puu.sh/tpD7x/a0fb907313.png
```
                Image {
                        id: eventos
                        source: "../assets/Icons/christmas-day.png"
                        onclick: dosomething()
                      }
```
So how i can use image with click event?

Thanks in advance.
January 17, 2017 at 22:36 #15741

Alex
Felgo Team

Hi,

please complete this short tutorial (also video available), it covers all your questions: https://felgo.com/doc/vplay-get-started-games/

It’s focused on game creation, however the basic QML principles (functions, property bindings, touch input handling) that are explained there apply to apps as well!

Cheers,
Alex