How to create nutrition app with ocr scanner?

Hi! I wanted help creating a nutrition app. I want my app to use an ocr scanner but instead of giving a decription i want the ocr scanner to read the image and let the user know if it is healthy or not.

The FDA provides a REST API which you can access via the Thunkable Web API component. The app would be complex, but the fundamentals would be

  1. Read the bar code
  2. Look up the code using the web API
  3. Evaluate the nutritional information and assign healthy/not healthy
  4. Display results to user.

Happy Thunking!

2 Likes

I’m curious why you need OCR. I would also recommend using the product’s bar code instead. One of my students made a food allergy scanner app using the Open Fast Food API.

3 Likes

It probably because it needs to recognize the bar-code.

I’ve always thought of OCR as a way to convert a photo of text to editable text. But maybe OCR also applies to barcodes?

Either way, Thunkable provides bar code support via the device’s camera.

Okay thank you! Are there any project examples I can view as a reference?

I am also making a nutrition app that requires OCR scanner, and you can use Open OCR API. It’s works well.

Thanks, but I’m going to try to make it with the barcode scanner but I’m not sure how to insert the database.

Okay thank you! Are there any project examples I can view as a reference? I’m also not sure how to insert the database.

I might be able to share something. If you’re not familiar with JSON/APIs, it’s a learning curve!

You can start with this in-depth tutorial:

2 Likes

Thank you!

What blocks would I use to look up the code using the web API?

@celebytes20212iy4 Please don’t post a question more than once. If you don’t receive a reply immediately, it may be for a variety of reason but someone will likely respond at some point.

If you feel the need to re-post, at least provide additional information about what you’ve found, what you’ve tried, and what you need.

1 Like

To get started with APIs, Google api thunkable. The documentation and videos there are going to provide you with examples. The specific blocks are usually – but not limited to – the Web API URL and Web API Get blocks.

Note that with the new drag-and-drop interface, you no longer add an API component from the Design tab. You add it from the Blocks tab:

I already got the scanner arranged. But how do I do step #2. Look up the code using the web API?

I put in the url for the web api. But what do I need to put in for the rest, like the query parameters and the headers?

Sorry my bad.

That all depends on the API you’re using and what the documentation specifies. But many APIs can be accessed in Thunkable using the URL block with all of the parameters, API key, etc. included… without the query or header or body blocks. What is the url you’re using?

I’m using the url from the fast food api https://world.openfoodfacts.org/api/v0/product/737628064502.json

It’s really helpful to have the full JSON response. Thanks for posting a url that provides that.

Since that particular url doesn’t require any API key, it’s actually fairly simple to set up in Thunkable.

In the Web API URL block, paste the url you shared above. In the Web API Get block, you’ll want to check the green error block and if it’s empty, you can then parse the information from the green response block.

Parsing JSON is difficult but there are lots of good examples on the forums. If there’s a specific data field you want to access, let me know and I can provide a screenshot of the blocks that would return that data.