API JSON Tutorial (Video)

I’ll consider it for sure. A few questions for you:

Usually this is stored in a variable as a text string. The main concern is whether or not other Thunkable users can see your key if you share the project. Is that what you’re referring to?

Can you say a little more about what you mean?

This would be a good addition to the tutorial.

Can you say a little more about this as well?

I would also add:

  • Displaying API data in a list viewer

I also store it in a variable as a text and I initialize it on the very first screen. I thought maybe it could be better to put it let say after authorization or store it in DB.

I mean some best practices. Probably one of them could be to request data from API once and then store it in a variable so after that you don’t need to request it again. But is it a good way to store it in app var or better to do it in stored var or even cloud var? And many more other questions :slight_smile:

This is also more about efficiency in applying. For eg I need to display information from API call but based on user data stored in DB. So I need to make a request to my DB and then to API what might work very slow.

2 Likes

I probably should have mentioned that a good starting point for a call to an API is to check for an error and then display either the error or the response:

I would do this before worrying about the “get property of object” blocks which can be very complicated.

1 Like

This is an amazing tutorial @tatiang! Great job, and kudos to you for putting in the hard work to make it!

3 Likes

Interesting… I just got an email from Thunkable about a new feature available within text boxes, related to APIs and JSON parsing:

https://docs.thunkable.com/objects#nested-values-and-values-from-arrays

So, if you wanted to replace the blocks I show at the 21:52 mark in the video above:

You could do that with these blocks:

:warning: This could easily confuse some people if they’ve been following along in my video so please only use this new feature if you already feel very comfortable working with JSON data.

In this case, we’re no longer working backwards to first get the object, then take a property from it, then get a list item from that, and finally get a property from that… instead, we’re specifying a path to a particular property.

For a deeply-nested JSON property, this would cut the required number of blocks significantly. It also allows for much more dynamic referencing of properties (you can use the “join” block as well as all the other Text drawer blocks to construct a path rather than having to connect the right blocks).

Just as an example of how quick this can be for figuring out a property path, I used Best JSON Viewer and JSON Beautifier Online to view some sample JSON data using the Tree Viewer button and then clicked on “Mustang”:

image

That site provides the path to a property when you click on it. For “Mustang”, it shows object–>cars–>0–>models–>2 at the top of the screenshot. Because JSON arrays use 0 as the first item index, you have to add 1 to any array index values you see there. So adding one to each index in the path gives me this path for Thunkable:

“cars[1].models[3]”

5 Likes

The thing is result[2].value is fine but limited to fix index number. It would be challenging to have the property name in the block to reference a variable as an index. For example result[app variable myCounter].value

@tatiang thank for sharing this. we need more tutorial on this subject.

Have you tried it? I would assume it would work with a variable. But maybe not?

1 Like

Ever since I got the email I was wondering if this works. Now that you mentioned it with an example I thought of throwing the question. But no, I have not tried it.

[Edit]
I tested it and it seems to work but you need to parse the text. I made this sample code

https://x.thunkable.com/projectPage/6089074124e9f00011fb36a3

1 Like

Specifying an array/list index by variable works, too… in this case, I’ve randomized the index:

https://x.thunkable.com/copy/1989faaff9acb8828f95489edaa4e817

1 Like

Hi, bro. I want to get data from any API, ie: input is website url, output is information table. My API are investing.com, finance.yahoo… Pls, help me! Thanks

Watch my video and you should be able to figure it out. If you need help, start a new topic and provide details about what you’ve tried including screenshots (see the first post for a list of information you need to include).

1 Like

Hi Tatiang, Thank you for the WebAPI intro. I hope you can elaborate on security.
I watched all of @darren videos on this topic and the 10 or so videos by @simran that popped up here: Any tips for working with the WebAPI component? - #11 by domhnallohanlon
In one video (the Yelp one) the key is pasted in the WebAPI form. It’s not clear if that form is encrypted in the compiled app.
I am trying to understand if Thunkable supports methods to hide API keys and other portions of the URL string.
You briefly touch on this in the video (around the intro to JSON), but didn’t finish the thought.

I want to make an app that does not require login, nor firebase. I am thinking of using a stored variable.
The user would enter the key the first time the app runs.
From what I have read, the stored variable is local to the device and does not travel with the shared app.
In other words, I don’t want someone decompiling my app and find the key in the code.
I tried decompiling my own app, but I cannot find my code in the myriad folders of the APK file.

I am still learning about security and started reading about Bearer and OAuth stuff… very convoluted.
It seems that stored variables would avoid me getting into complicated topics on Bearer, OAuth… my head hurts.

Thanks,
Pescatore

1 Like

Dear @pescatore
Thunkable allows the use of Bearer authorization in the header. Bearer keys are actually encrypted versions of the actual name and password which will provide a level of security if all what you are worried about is seeing the key in the decompiled version.

1 Like

Thank you for the response, @muneer . Yes, I am trying to eliminate any easily discoverable key or token in my code.
Do you know of an example/video for adding the Bearer header? I guess I would add additional text blocks to the WebAPI object, where I build up the URL.

1 Like

The Bearer Authorization goes in the Headers section either in the Web API component settings or in the Headers coding block.

It is not usual to be part of the URL.

1 Like

I’m curious exactly what you’re trying to do. Are you trying to hide the keys/tokens from other developers on these forums who might view your project? Or from end users who download your app and use it as intended? Or from people who might try to reverse engineer your app?

1 Like

Hello Tatiang, I am trying to add as much protection from hackers without making the app too complex for my skill level.
I am new to Thunkable and security in general, so I may be asking the wrong questions. I have a simple app in Thunkable classic that pings a URL that contains an access token. I was able to easily find the token in the APK file, after decompiling.
I am testing the same app (converted) in Thunkable X and I haven’t been able to find the source code. There are so many folders in the APK file that I gave up looking.
So, I am trying to understand if Thunkable X protects this data in the source code.

I am also looking into how Bearer Authorization works, but first I have to figure out what the API is expecting (the one I ping, not Thunkable).

Thanks for asking!
Pescatore

@tatiang …i watched your video on API and trying to work on it to retrieve a currency expansion for a 3-letter symbol of the currency. When i tried it on chrome to retrieve the json file using the api key, am successful, but when am trying to do the same in thunkable, it throws an error…am i doing something wrong here. Here are the screenshots
Chrome :

Blocks in thunkable:

Error message from response:

Can you kindly help.

Thanks in advance