NutriScan - Decode Food with Your Mobile Browser

I like mobile web apps more than smartphone apps. A while ago, I discovered Minhaz's amazing HTML5 QR Code & Barcode Scanner JavaScript library. Using that I built a minimal web page that can scan a product barcode through a smartphone's mobile browser and then redirects user to the equivalent product's Open Food Facts web page to display its nutrition information.

I have now extended that sample to scan an EAN-13 barcode off a packaged food product and then fetch just its name, image, Nutri-Score & Nova details using the Open Food Facts REST API.  

Screenshot of the output in the Microsoft Edge browser on an Android phone

Try out the no-frills NutriScan 🥫🔍 web app and please let me know what you think. Here's the code if you're interested -

Typically, the JSON returned by an API call looks like this -

{

    "code": "8906005504395",

    "product": {

        "image_thumb_url": "https://images.openfoodfacts.org/images/products/890/600/550/4395/front_en.5.100.jpg",

        "nova_group": 4,

        "nutriscore_grade": "e",

        "product_name": "Tana-bana"

    },

    "status": 1,

    "status_verbose": "product found"

}

However, there were cases when neither the fields & values nova_group & nutriscore_grade didn't show up at all. 

{

"code":"8906047529578",

"product":{

   "image_thumb_url":"https://images.openfoodfacts.org/images/products/890/604/752/9578/front_en.3.100.jpg",

    "product_name":"DiSano Apple Cider Vinegar with Mother of vinegar"

    },

    "status":1,

    "status_verbose":"product found"

}

I identified this issue after remote debugging live content on my Android device from my development machine.

I did not style the output in the deployed version to keep the code sample lean and to see what is the least amount of code it would take to build a functional app. The total data that is transferred to and fro therefore is < 400kb.

Screenshot of the output in Chrome browser on an Android phone

Also see - 

Comments

Post a Comment

Popular posts from this blog

GitHub Copilot Q&A - 1

Image
Key takeaways from the talk in Q&A format - What is GitHub Copilot and how does it work? GitHub Copilot is a suite of tools designed for code completion. It works by analysing the code and comments you type in your IDE and sending that context to GitHub. Copilot then uses OpenAI's language model (in December 2024, it is GPT 4o by default and you can also choose the preview versions of o1-mini & o1-preview if you like) to understand your intent and generate suggestions for code completion. You can then accept, reject, or modify these suggestions. What context does GitHub Copilot consider when making suggestions? Copilot considers the entirety of the file you are currently working on, not just the code from your cursor position upwards. It also analyses the content of other open tabs in your IDE, starting with those closest to the current tab. This helps Copilot focus on the most relevant information. Is it necessary to meticulously manage open tabs for Copilot to work effect...
Read more

Maven Crash Course - Learn Power Query, Power Pivot & DAX in 15 Minutes

Image
In the Maven Crash Course " Learn Power Query, Power Pivot & DAX in 15 Minutes ", Chris Dutton walks through a hypothetical business case while showcasing the power of modern Excel tools like Power Query, Power Pivot and DAX. Power Query is used to extract, transform, and load data from external sources like SQL databases, PDF and CSV files. A relational model is created to join the tables without writing a single formula. Exploratory analysis is done using Power Pivot and Data Analysis Expressions (DAX). Data Analysis Expressions is the language that we can use to define new calculated columns and measures to enhance our Data Model instead of the traditional cell formulas that we'd typically use if our data was stored in worksheets. Pivot Charts and slicers are used to design a simple interactive report that the sales managers can use to analyze revenue trends and product performance.
Read more

"Data Prep & Exploratory Data Analysis" course by Maven Analytics

Image
The Maven Analytics course on " Data Prep & Exploratory Data Analysis " by Alice Zhao is a beginner-friendly introduction to machine learning with Python. It covers the key steps of the data science workflow, including: Gathering Data Scoping a Project Modeling Data Sharing Insights Cleaning Data Exploring Data Modeling Data  Sharing Insights The presentation deck which is available as a download crisply summarizes the essential details and is a great reference to keep going back to. The course is well-suited for aspiring data scientists looking to get hands-on experience with the data prep and EDA stages of the machine learning workflow using Python and Jupyter Notebook. 
Read more