[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.

[AlexFelgo 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

[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.

[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.

[AlexFelgo 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

 

[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.

 

 

[AlexFelgo 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