Help with air quality API

Questions about Thunkable
1

I feel like I get how API data retrieval is supposed to work but I’m just not doing something right. I’m trying to pull air quality data from purpleair.com in this project:

https://x.thunkable.com/copy/d5bd46db1d14d638677b1be3ad4661c3

edit: updated project link: https://x.thunkable.com/copy/c61550417962683dd738ee6c8299fa59

The first screen, “Air Quality” is what I’ve set up. The second screen “Home” is what was shared on another thread here and it’s a sample working weather API retrieval screen.

From what I’ve read on the purpleair.com site, I don’t need an API key for public sensor data. They don’t have a sample API call on their site so I’ve tried it without a key, with a key that I found and “&appid=”, “&APPID=” and “&key=” appended before the key value. In all four cases, I get pretty much the same result:

The app shows me the correct API data (as a JSON record) for a brief second and then it is replaced by this error message:

The website or service provider you are trying to reach does not support HTTPS requests.

That happens whether I use http:// or https:// for the API url. It also happens with other sites I’ve tried such as AirNow.com’s API.

Any suggestions for how to resolve this? Ultimately, I want to pull single data values from the JSON data but I’m not even at that point yet with the API connection not really working.

2

I did manage to pull data from PurpleAir’s API. But it’s not consistent… about 80% of the time, I just see a white screen. It does seem to work a little better previewed a device than when previewed online.

I have a separate, related question:

Is there a way to specify a JSON field that contains special characters? I need to pull data from an API and the JSON object contains a field called "v1"

I tried using v1, “v1” and \“v1\” but all three ways resulted in “undefined” being returned.

Screen Shot 2020-08-24 at 7.21.16 AM
Screen Shot 2020-08-24 at 7.21.16 AM969×244 62.7 KB

In case it’s helpful to have context, this is the JSON object I’m working with and the “v1” field is part of Stats, shown in bold below:

Interestingly, when I pasted it into my post, it removed the backslashes. But the v1 field below is listed online as \“v1\”

{“mapVersion”:“0.17”,“baseVersion”:“7”,“mapVersionString”:"",“results”:[{“ID”:22077,“Label”:“TMout”,“DEVICE_LOCATIONTYPE”:“outside”,“THINGSPEAK_PRIMARY_ID”:“651834”,“THINGSPEAK_PRIMARY_ID_READ_KEY”:“6BLFLVX33137FDF4”,“THINGSPEAK_SECONDARY_ID”:“651835”,“THINGSPEAK_SECONDARY_ID_READ_KEY”:“JXDJKJ4A8D15UEO8”,“Lat”:38.106622,“Lon”:-122.543881,“PM2_5Value”:“64.3”,“LastSeen”:1598249352,“Type”:“PMS5003+PMS5003+BME280”,“Hidden”:“false”,“DEVICE_BRIGHTNESS”:“15”,“DEVICE_HARDWAREDISCOVERED”:“2.0+BME280+PMSX003-B+PMSX003-A”,“Version”:“6.01”,“LastUpdateCheck”:1598245501,“Created”:1544662588,“Uptime”:“1320”,“RSSI”:"-69",“Adc”:“0.0”,“p_0_3_um”:“10539.75”,“p_0_5_um”:“3098.29”,“p_1_0_um”:“617.59”,“p_2_5_um”:“43.54”,“p_5_0_um”:“4.21”,“p_10_0_um”:“1.29”,“pm1_0_cf_1”:“62.04”,“pm2_5_cf_1”:“97.39”,“pm10_0_cf_1”:“100.36”,“pm1_0_atm”:“40.7”,“pm2_5_atm”:“64.3”,“pm10_0_atm”:“72.75”,“isOwner”:0,“humidity”:“46”,“temp_f”:“80”,“pressure”:“1007.85”,“AGE”:1,“Stats”:"{“v”:64.3,“v1”:50.42,“v2”:47.68,“v3”:48.29,“v4”:54.91,“v5”:35.91,“v6”:11.5,“pm”:64.3,“lastModified”:1598249352327,“timeSinceModified”:119968}"},{“ID”:22078,“ParentID”:22077,“Label”:“TMout B”,“THINGSPEAK_PRIMARY_ID”:“651836”,“THINGSPEAK_PRIMARY_ID_READ_KEY”:“3XVY8E7MJ6C4XIBQ”,“THINGSPEAK_SECONDARY_ID”:“651837”,“THINGSPEAK_SECONDARY_ID_READ_KEY”:“E39DOXFOXR1QZ8A9”,“Lat”:38.106622,“Lon”:-122.543881,“PM2_5Value”:“62.93”,“LastSeen”:1598249352,“Hidden”:“false”,“Created”:1544662588,“Adc”:“0.01”,“p_0_3_um”:“10277.89”,“p_0_5_um”:“3120.74”,“p_1_0_um”:“573.98”,“p_2_5_um”:“32.0”,“p_5_0_um”:“4.15”,“p_10_0_um”:“3.09”,“pm1_0_cf_1”:“62.07”,“pm2_5_cf_1”:“95.59”,“pm10_0_cf_1”:“98.98”,“pm1_0_atm”:“40.57”,“pm2_5_atm”:“62.93”,“pm10_0_atm”:“72.11”,“isOwner”:0,“AGE”:1,“Stats”:"{“v”:62.93,“v1”:50.63,“v2”:47.8,“v3”:48.39,“v4”:55.23,“v5”:36.23,“v6”:11.87,“pm”:62.93,“lastModified”:1598249352328,“timeSinceModified”:119968}"}]}

3

pls break the url using join block coz thunkble has some issues

4

did u used web component

6

I’ll try that, thank you.

Edit: it doesn’t seem to make a difference.

7

mark solution if it helps u

8

@eko.devs.apploroceo This post says that the web component is not part of Thunkable X:

So I’m not sure if you’re referring to something that used to be in Thunkable…?

9

May i know how?
:sweat_smile: I’m also stucked here… I made a node.js server and trying to get data from that… but each time i make a request… i get the same error The website or service provider you are trying to reach does not support HTTPS requests.

10

@cttricks I’m not sure this will be very helpful but… the API I was using said it didn’t need a key. But I found an example that included a key value and it seemed to work better for me. I’m not convinced that was the problem but maybe you can try including a key/appid to see if that helps.

Here’s the current state of the project:

https://x.thunkable.com/copy/c61550417962683dd738ee6c8299fa59

1 Like
11

Thanks @tatiang, I found that… when i was trying to get the data from my NODEJS server url using thunkalbe live test { given on website } it wasn’t working… but it was working completly fine in companion.

1 Like
12

Similar observation from my side also. I think it has nothing to do with the API source. Some APIs i was working on won’t work on web app or live test. Same error message from thunk block:
“The website or service provider you are trying to reach does not support HTTPS requests.”

But all worked on the phone app companion. I asked the same questions on another thread but no one has yet to provide any idea what was happening.

13

I’d always recommend testing in the companion app. The previews are nice but they err enough that I tend to stick to the companion unless I’m doing a quick layout check

That said, yesterday I was POSTing API data to my own nodeJS server from the screen preview. Worked just fine.

I made ~3000 api calls yesterday. It does work. Maybe the traffic seems weird to the incoming server when accessed by the previews?

14

Agree that for phone apps, should test on companion which I always do. My issues arise when I am building a web app, one that works on any browser, including desktops. In this case, I will use “Preview as a responsive web app” to test. And this is when I get those HTTPS: … errors.

15

Thunkable is boss for cross platform mobile app development. The web apps have a little way to come but in many cases work great!

Be sure to continue reporting the bugs with specific examples on the github bug Page. If your app just won’t work, there are other great nocode platforms more geared towards webapps.

(Could talk more about that in DM. Need a noCode consultant to branch out to other platforms Or brush up your skills here? Get ahold of me! )

1 Like
16

I’m curious if anyone has been able to test API data retrieval easily using Thunkable? I’ve found that even when I have the JSON parsing commands correct, the web preview doesn’t really work at all (it will flash the correct values for less than a second and then restore the default label values) and the Thunkable app on iPhone will most often display a blank white screen and I’ll need to force quit it.

Is there some trick to getting the Thunkable app to display API data without constantly crashing? Do you open the app and then click Live Test (I’ve tried that) or click Live Test and then open the app (I’ve tried that) or some other timing…? I’ve spent hours just trying to read a value from an API. It seems like either I’m doing something wrong or the coding environment just doesn’t support those yet.

Here are the blocks I’m using:

Screen Shot 2020-08-29 at 8.19.45 PM
Screen Shot 2020-08-29 at 8.19.45 PM2522×1046 296 KB

17

My experiences are the same working with a lot of web APIs when i begin using thunkable… But I have since learned a few things and developed my own procedures, I share here if you don’t mind:

  1. I will study the JSON structure very very carefully, and use another tool to look and the data tree. Most JSON has combination of objects and arrays. Then repeatedly see if the source has consistent results. Because any missing key you are accessing will result in white screen hang.
  2. Not all web returns work on live view/web app. But it worked on Phone companion. if your app is primarily deployed on the phone app, then no point trying too hard to get it work on live view.
  3. Before i use object blocks, I will almost always have a check to see if the key i need in the object is within the Json (using “does __ contain__” block). This will prevent white screen hang if API returns are not as expected. can also use "status or error blocks to ensure the response is correctly returned…
2 Likes
18

I appreciate what you wrote. But I think my problem may be different. I am getting the expected values from the JSON data. If I try to get a property called “temp_f” with a value of 63, when I preview my project on the Thunkable app on my iPhone, I see the 63 appear for less than a second and then disappear to a white/blank screen.

This doesn’t happen every single time but most of the time. A few rare times, the value shows up and stays on the screen of my phone.

19

https://x.thunkable.com/copy/0e624580be3040fc847b131fd83e5662

^^try this

20

Your blocks don’t have any error protection or verification for the correctness of the data received from the server, and you ask why something is not working properly? If you think that all this is not important and any data is always correct , then this is a big misconception that will cause you and your app users huge problems.

1 Like
21

You are referring to waiting for a status 200 before doing any other tasks with the api data, right?