# How to create nutrition app with ocr scanner?

**URL:** https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955
**Category:** Questions about Thunkable X
**Created:** [February 21, 2021, 5:28pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955 "2021-02-21T17:28:00Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 26, 2021, 1:14am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/22 "2021-02-26T01:14:14Z")

</div>

I’m not really sure how to parse the information. Are there any examples I can refer to?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 26, 2021, 1:39am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/23 "2021-02-26T01:39:08Z")

</div>

There’s the [documentation](https://docs.thunkable.com/web-api). [This topic](https://community.thunkable.com/t/json-help-for-dictionary/1041946/8) is also helpful.

I usually start by pasting the entire JSON response into a JSON Formatter. I like this one best: [https://jsonformatter-online.com](https://jsonformatter-online.com).

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 26, 2021, 1:39am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/24 "2021-02-26T01:39:46Z")

</div>

Okay! Thank you  
What do I add in the “property name” for the blocks?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 26, 2021, 2:12am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/25 "2021-02-26T02:12:32Z")

</div>

The property is the JSON field that you want data for. It is followed by a colon (:).

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 26, 2021, 10:12pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/26 "2021-02-26T22:12:12Z")

</div>

How do I get the updated software on thunkable?

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 26, 2021, 10:22pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/27 "2021-02-26T22:22:56Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6de5d9a96a99b1feae208fdc45461638fd12f770.png)

This is what I have so far. Should I add or remove anything?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 26, 2021, 10:34pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/28 "2021-02-26T22:34:14Z")

</div>

You don’t need a : after nutrition. I just meant that that’s what properties look like when they are part of a JSON response.

You’ll also need a Web\_API1 URL block right above the Get block.

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 26, 2021, 10:55pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/29 "2021-02-26T22:55:15Z")

</div>

Okay thank you!

What steps would I have to do after adding the web api?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 27, 2021, 12:29am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/30 "2021-02-27T00:29:16Z")

</div>

At some point, you need to spend time with the documentation and tutorial videos.

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 27, 2021, 1:35am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/31 "2021-02-27T01:35:34Z")

</div>

Are there any specific videos that would be helpful for the next step?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 27, 2021, 1:42am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/32 "2021-02-27T01:42:29Z")

</div>

Personally, when I want to learn something new in Thunkable, I just Google _thunkable [search term]_ and find pretty good results. So you could try _thunkable API_ or _thunkable JSON_ for example.

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 28, 2021, 3:30pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/33 "2021-02-28T15:30:04Z")

</div>

I looked at the videos and added some more code.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/b/2b2c7784372c8378b9a70040c4cb9da08abad5c5.png)  
What other components do I have to add?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 28, 2021, 4:34pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/34 "2021-02-28T16:34:09Z")

</div>

Looking pretty good so far!

You’ll want to use the barcode scanner’s “value” block in your Web API Get call. Do this by assigning a variable to the green “value” block. Then, join the new variable to the URL text.

According to [this page](https://world.openfoodfacts.org/data), the format for the barcode url is:

```auto
https://world.openfoodfacts.org/api/v0/product/[barcode].json

```

So you can join “[https://world.openfoodfacts.org/api/v0/product/](https://world.openfoodfacts.org/api/v0/product/)” with the new variable and then with “.json”

Just out of curiosity, I tried this with a product I have: [https://world.openfoodfacts.org/api/v0/product/856904000376.json](https://world.openfoodfacts.org/api/v0/product/856904000376.json).

When I put the results in the JSON formatter page, I get this:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/e/4e52f404ec9699c2ae7fc88dd41abfc10f585ef7.png)

If, for example, you wanted to get the “nutrition\_data\_per” field (value of 100g), you would take the “nutrition\_data\_per” property of the “product” property of the object. That’s working my way back up from that field in the formatted list of properties.

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 28, 2021, 5:41pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/35 "2021-02-28T17:41:06Z")

</div>

It gives me an error when I join them both:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/b/8b95e33973d4a78f031b9880cb7462f292f77cb3.png)

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 28, 2021, 9:08pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/36 "2021-02-28T21:08:02Z")

</div>

No, you don’t initialize the value to that. You do it in the “set Web\_API1’s URL” block.

Also, it looks like you included “[barcode]”. That’s just a placeholder in the API’s documentation. You would just do it as I suggested above:

> So you can join “[https://world.openfoodfacts.org/api/v0/product/”](https://world.openfoodfacts.org/api/v0/product/%E2%80%9D) with the new variable and then with “.json”

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 28, 2021, 9:14pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/37 "2021-02-28T21:14:28Z")

</div>

It should look like this:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/4/042f1f373e9999520d61f0d750cb014ebdf75fb8.png)

There’s some error checking you should be doing with the two green “error” blocks that I didn’t include but assuming everything works correctly, this should do it.

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 28, 2021, 10:06pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/38 "2021-02-28T22:06:16Z")

</div>

Thank you! I fixed the error.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/1/51b671bb54cb3a0f79bd594a52cb70cb49e9553d.png)  
What else would I have to add?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 1, 2021, 12:48am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/39 "2021-03-01T00:48:32Z")

</div>

> [@celebytes20212iy4](#):
>
> What else would I have to add?

I don’t know. What are you trying to do, exactly? That is, which property/field of the JSON response are you wanting to display?

What happens when you click the “scan” button? Does the label’s text get set to the value you are expecting from the API?

---

<div class="post-metadata">

### Author: ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [March 1, 2021, 3:01am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/40 "2021-03-01T03:01:55Z")

</div>

Yes. I want the label’s text to set the value from the web api.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 1, 2021, 4:01am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/41 "2021-03-01T04:01:49Z")

</div>

I would need to know the specifics I asked you about in order to provide more suggestions.

[Previous page](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955.md?page=1)

[Next page](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955.md?page=3)
