Forums

OverviewFelgo 2 Support (Qt 5) › Get XMLHttpRequest

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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.

    #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

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

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

    #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

     

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

     

     

    #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

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

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support