openfoodfacts/smooth-app

The new Open Food Facts mobile application for Android and iOS, crafted with Flutter and Dart

Smooth App: The new Open Food Facts mobile app for Android and iPhone

Weekly meetings

• We e-meet Thursdays at 17:30 Paris Time (16:30 London Time, 22:00 IST, 08:30 AM PT)
• Video call link: https://meet.google.com/gnp-frks-esc
• Join by phone: https://tel.meet/gnp-frks-esc?pin=1110549945262
• Add the Event to your Calendar by adding the Open Food Facts community calendar to your calendar
• Weekly Agenda: please add the Agenda items as early as you can. Make sure to check the Agenda items in advance of the meeting, so that we have the most informed discussions possible, leading to argumented decisions.
• The meeting will handle Agenda items first, and if time permits, collaborative bug triage.
• We strive to timebox the core of the meeting (decision making) to 30 minutes, with an optional free discussion/live debugging afterwards.
• We take comprehensive notes in the Weekly Agenda of agenda item discussions and of decisions taken.

User interface

• Mockups on the current app and future plans to discuss

Feature Sprint

• We use feature-based sprints, tracked here

Code documentation

Code documentation on GitHub pages.

Current Release

• Latest commit deployed to Apple App Store: Released on Nov 29th as Build 835
• Latest commit deployed to PlayStore: 792 from Nov 6th 11AM

Presentation

• This new mobile application aims to showcase Open Food Facts's power to a broad range of users through a smooth user experience and sleek user interface. It is a Flutter application by Open Food Facts.
• We pioneered the collaborative scanning app in 2012. With this experimental app, we’re reinventing it from the ground up.
• Install it on Android (Google Play, F-Droid or Amazon App Store) or iPhone/iPad. Note that a internal development build (Android or iPhone/iPad (App Store) if you'd like to use the results of your PRs quicker.

• Smooth-app is developed in parallel to the openfoodfacts-dart plugin, which provides a high level interface with the Open Food Facts API and openfoodfacts_flutter_lints which provides specific linting
• Every new interaction with the API should be implemented in the plugin in order to provide these new features to other developers.
• We support desktop platforms (Linux, macOS and Windows), but only for development

Features of the app

Features

• a scan that truly matches who you are (Green: the product matches your criteria, Red: there is a problem, Gray: Help us answer you by photographing the products)
• a product page that's knowledgeable, building on the vast amount of food facts we collect collaboratively, and other sources of knowledge, to help you make better food decisions

You can

• scan and compare in 15 seconds the 3 brands of tomato sauces left on the shelf, on your terms.
• get a tailored comparison of any food category
• set your preferences without ruining your privacy

Criteria you can pick

• Environment: Eco-Score
• Health: Additives & Ultra processed foods, Salt, Allergens, Nutri-Score

About this Repository

How to run the project

• Make sure you have installed flutter and all the requirements
  • Official flutter installation guide
• Currently, the app uses the latest stable version of Flutter (3.19.x).

We have predefined run configurations for Android Studio and Visual Studio Code

In order to run the application, make sure you are in the packages/smooth_app directory and run these commands:

• flutter pub get .

• On Android 🤖: flutter run -t lib/entrypoints/android/main_google_play.dart

• On iOS/macOS 🍎: flutter run -t lib/entrypoints/ios/main_ios.dart

• Troubleshooting🚀: If you get an error like App depends on scanner shared from path which depends on camera_platform_interface from git, version solving failed. then run

  • flutter pub cache clean or manually delete the
  • C:\Users\~\AppData\Local\Pub\Cache file. Then redo the above procedure to run the app.

• Contributing Guidelines

Thanks

The app was initially created by Primael. The new Open Food Facts app (smooth_app) was then made possible thanks to an initial grant by the Mozilla Foundation in February 2020, after Pierre pitched them the idea at FOSDEM. A HUGE THANKS 🧡 In addition to the core role of the community, we also had the support from several Google.org fellows and a ShareIt fellow that helped us eventually release the app in June 2022.

Contributors

smooth-app's Issues

The settings wheel for "My Personalized ranking" screen (top right) is white on white in light mode

The settings wheel for "My Personalized ranking" screen (top right) is white on white in light mode.

Implement dark mode

• Implement initial dark mode support in the app.
• Add a toggle to ensure people can go back to light mode regardless of their system settings

Allow the user to find alternatives products on a scan even if (s)he has scanned only 1 product

Allow the user to find alternatives products on a scan even if (s)he has scanned only 1 product

Allow to filter search results based on one country and one or several stores

What

• Allow to filter search results based on one country and one or several stores. Add an onboarding screen to confirm that country (guess based on phone locale), propose stores based on country using
• https://static.openfoodfacts.org/data/taxonomies/stores.json

Part of

• #991

Load attributes from the API

For the moment the list of attributes for the preferences is loaded from an asset file, in English, as a default mode.

There are 2 cases where we should reload that list:

• if we want to match the end-user's language
• if there are new attributes

The methods that loads the lists from json files already exist. (cf. #30)

Unable to Join Slack Channel

I want to contribute to this project, I have more than 2 years of experience with flutter but I am unable to join the slack channel. HELP!!

Compute the match score of a Product vs. Preferences

The result should be something like YES, NO, MAYBE.
Once done we can work on #33, #35 and possibly #36.

Search yields 0 results

Search yields 0 results

Theme refactoring using a ColorScheme

It would make sense to refactor the themes by using a ColorScheme as recommended in theme_data.dart:

  /// Create a [ThemeData] based on the colors in the given [colorScheme] and
  /// text styles of the optional [textTheme].
  ///
  /// The [colorScheme] can not be null.
  ///
  /// If [colorScheme.brightness] is [Brightness.dark] then
  /// [ThemeData.applyElevationOverlayColor] will be set to true to support
  /// the Material dark theme method for indicating elevation by applying
  /// a semi-transparent onSurface color on top of the surface color.
  ///
  /// This is the recommended method to theme your application. As we move
  /// forward we will be converting all the widget implementations to only use
  /// colors or colors derived from those in [ColorScheme].

In addition to that, there shouldn't be that many references to Theme.of(context) in the code, as the correct colors are supposed to be automatically computed from the Theme.

Load possible attributes that can have preferences from the API and cache them

Smoothie currently shows preferences that are hardcoded (Vegan, Vegetarian, Gluten Free etc.).

They should be loaded from the API instead:

List of all attributes:
https://world.openfoodfacts.org/api/v2/attribute_groups?lc=fr (lc indicates the language for the preferences names, descriptions, warnings etc.)

Possible values for each attribute, with translations:
https://world.openfoodfacts.org/api/v2/preferences?lc=fr

In order to be able to set / change preferences even if there is no network, the app should cache the possible preferences.*

Try to use CrowdIn GitHub action for Smoothie instead of the CrowdIn GitHub integration

We can try to use this for Smoothie: https://github.com/crowdin/github-action

It seems that it can automate the translations PR, and there is also an option to have CrowdIn load the translations from master whenever there are new ones (and not just during initialization).

Once #45 is merged, we should try it.

All .arb translations files from CrowdIn have an invalid "@@locale": "en" and are not loaded

e.g.
l10n/intl_fr_FR.arb:
{
"@@Locale": "en",
[..]

If this cannot be fixed in the CrowdIn setup, one option could be to have a script to fix the files, that we would run whenever we check-in new translations.

Bottom overflow in contribution mode

Bottom overflow in contribution mode

Deploy automatically Smoothie to the App Store and PlayStore

Deploy automatically Smoothie to the App Store and PlayStore using Fastlane. This will save us considerable amount of time, and allow us to be more agile and have faster feedback loops.

Display logos of attributes for selected preferences in product card

The product cards in the "Choose" view should display the logos of the attributes corresponding to the preferences selected by the user, similar to how they are shown on the OFF web site for personal search.

(the personal search feature is currently in alpha-testing on the OFF web site, to have access to it, please send me your OFF username so that I can turn it on for you).

Current product cards show Nutri-Score, NOVA, CO2 (harcoded):

Need to be replaced by the attributes corresponding to the preferences:

The logos should come in the order of the preferences: mandatory preferences first, then very important, then important. For items of equal importance, use the order of preferences from the API (see #30).

The background color indicates if the product matches the user preferences (#33)

Display logos, warnings and descriptions when selecting preferences

After retrieving the attribute names, logos, warnings etc. (see #30 ), use them in the preferences selection page.

The preferences selection should be the same as on the OFF web site (except we should keep the range sliders we already have in the Flutter app instead of having radio buttons like on the web site).

(the personal search feature is currently in alpha-testing on the OFF web site, to have access to it, please send me your OFF username so that I can turn it on for you).

Smoothie needs an icon

Smoothie needs an icon. Currently we use the Flutter standard.

Implement a points system with gamification

What

• #922
• Implement a points system with gamification when the user contributes images for a new product.
  • Let's say 5 points per image.
  • Blocked on openfoodfacts/openfoodfacts-dart/issues/349

Mockup

Part of

• #503

Switch from the localizely Flutter Intl plugin to the new Flutter internationalization / localization

The app currently use the Flutter Intl plugin from localizely to manage translations:
https://github.com/localizely/flutter-intl-plugin-sample-app

Flutter 1.22 announce https://medium.com/flutter/announcing-flutter-1-22-44f146009e5f#f2cb has a section "New internationalization and localization support" with a link to a Flutter Internationalization Guide in a google doc: https://docs.google.com/document/d/10e0saTfAv32OZLRmONy866vnaw0I2jwL8zukykpgWBc/edit

The 2 approaches look very similar (using .arb files to automatically generate dart code), but if there is now an official way, we probably should use it. The differences seem to be mostly in the name of the directories for the arb files and the generated code, as well as the name of the function to access the localized strings.

Refactor the use of database

For the moment, user preferences are stored in SharedPreferences, which is appropriate, and products are stored in a Sembast database in full_products_database.dart.

I'm not 100% convinced by Sembast, my personal taste is rather SQLite (with a bit of JSON in it), but this can be challenged, of course.

My concern is rather what we do with the database.
For the moment, not that much: we populate the database when we download products, but we never query the database.

I think it would be interesting to actually use the database:

• being able, every time we store a product in it, to know when it happened and in which context (barcode, keywords, category search)
• with that, we could implement the use of cached data - I downloaded category "breakfast cereals" yesterday, I don't need to download it again today - with the user being able to say "I want a systematic refresh, a refresh when the data is considered stale, let me decide each time" (with parameters in the preferences) (possibly with an AlertDialog #51 "we already have this data, do you want to reuse it or refresh it?")

Silent crash when saving preferences

How to replicate:

1. open the app
2. "Profile" / "Configure my preferences"
3. "Save"
4. No visible crash in the UI, but crash in the logs

The reason is that class UserPreferencesView has an optional Function callback constructor parameter that is called when you save the preferences. Even when callback was not populated, or populated with null.
Solution: check if callback is null before calling it.
For the record, the preferences are saved anyway, as they are saved before that crash.

I can create a PR if needed.

Preferences changes are not taken into account immediately

For some reason, preferences changes are not taken into account immediately into the ranking.
Saving a second time works.

Product names are not visible (white on white) when using the category explorer in dark mode

Product names are not visible (white on white) when using the category explorer in dark mode

Ensure the app can be navigated on iPhone

Ensure the app can be navigated on iPhone. The iPhone does not have a back button.

How to handle donations

What

In the current Android app (I suspect exactly the same on IOS), simple the the OFF website gets opened to donate, where the donations are processed via the donor box.
Which surprised me because the stores don't actually like to see it (see Apple vs EpicGames).

With the new app, I see potential to improve this. Both Apple and Google offer a non-profit program where 100% of the price goes to the non-profit company. Google offers even more advanced features with this program.
There is also an official plugin that offers in-app purchases.

What do you think about this idea

Part of

• openfoodfacts/openfoodfacts-server#5720

📶 🤳 Offline scanning (Tracker)

What

Tasks

Beta Give feedback

1. Server-side support for Offline scanning mode openfoodfacts-server#6988
   P2 offline mode timeouts ⏰ Stale +4
2. Allow to select several countries to download for offline scanning #4067
   Offline - Browsing ✨ enhancement +2
3. Replace the current server call for offline products to something more scalable #4066
   Offline - Browsing 🐛 bug +2
   
4. Add a local product cache
5. Investigate how much space offline mode would take on the client #2452
   Offline Offline - Browsing +2
6. Ensure the offline database stays fresh #2450
   Offline Offline - Browsing +2
7. Add a offline data manager #2446
   Offline Offline - Browsing 🎯 P1 +3
   
8. Client-side support for Offline scanning mode #2444
   Offline Offline - Browsing +2
9. Add support for Offline images #2445
   Offline Offline - Browsing 🎯 P1 +3
10. Study the effect of compression algorithms on storage space required for offline products #2447
    Offline Offline - Browsing +2
    
11. Implement a double-response mechanism in the scan screen (first offline, then online refresh if network is available) #2451
    Offline Offline - Browsing +2
    
12. Make the "Offline data" screen fully translatable #4025
    Offline - Browsing i18n translations ⚙️ Settings +4
    

Why

• No network or slow in supermarkets
• Add offline scanning with a reduced local copy of the database so that users can scan offline.
• This feature has been documented - Design document

Part of

• #526

Suggestion: more visible slider colors for preferences

Currently, the preference sliders are in white on light grey: not very visible in itself, and even with a black on white contrast the whole list would be boring to read.

We would be better off if the sliders' color was the same as the value they are supposed to display:

• not important: black
• important: green
• very important: orange
• mandatory: red

Or something like that.

For the record, current display:

Less disruptive design for caching

Less disruptive design for caching: instead of having a popup before results, how about an inline message on top of results ?

Refactor photos upload photos for new product addition

We currently propose to take 3 pictures when the product is missing, and we pretend they are sent, which is currently a lie.

• Actually upload photos for new product addition
• Use a programming book or a non food object which is likely not in Open Food Facts

Color product cards in light green / red / white to show if it matches selected preferences

The background color of the product cards should indicate if the product matches the preferences selected by the user: light green = ok, light grey = maybe / missing information, light red = does not match (e.g. contains an allergen you are allergic to).

This is similar to how product cards are shown on the OFF web site for personal search.

(the personal search feature is currently in alpha-testing on the OFF web site, to have access to it, please send me your OFF username so that I can turn it on for you).

"Ingredient analysis" is named "Nutrition levels" by mistake

"Ingredient analysis" is named "Nutrition levels" by mistake

Nutri-Score is cropped in My personalized ranking

Nutri-Score is cropped in My personalized ranking

Rank all product lists according to user preferences

All lists of products in "choose" mode in Smoothie should be ranked and filtered according to the selected user preferences, with tabs ( #35 ) to separate matching and non-matching products, with colored product cards ( #33 ) and logos of the selected preferences ( #32 ).

This should apply in particular to:

1. List of scanned products (when accessing "my personalized ranking)"
2. Any saved list of products (e.g. products scan history)
3. Search results
4. List of products in a category (e.g. from category browser).

Roadmap update

Could someone please revise the roadmap and what is still needed and what the next development steps look like. That would make the development process much easier.

General thoughts from a first time user

My thoughts:

1. I'm not convinced by the home page goal - obviously it's about food, but I would rather start with a list of filters (organic, eco score, Nutriscore). Don't show me all the foods on the planet, filter them first according to my tastes
2. the order of the foods is somehow hidden
3. as a vegan/vegetarian, there's no way I'm going to tolerate to see everyday meat, fish and so on - I wish I could be able to exclude categories in the home page, with preferences
4. I'm not a big fan either of the horizontal scroll (list 1) + vertical scroll (list 2) in the home page: it brings confusion. I guess a vertical scroll on list 1 where a click shows a vertical scroll on list 2 would be better

Deploy automatically a web version of Smoothie to GitHub pages

Just saw this:
Deploy automatically a web version of Smoothie to GitHub pages
https://medium.com/flutter-community/flutter-web-github-actions-github-pages-dec8f308542a

pubspec.yaml references uncommited forks for smooth_ui_library and openfoodfacts

pubspec.yaml has a default path which does not exist:
openfoodfacts:
path: ../../../openfoodfacts-dart

Delete the hack in category explorer

Delete the hack in category explorer
It uses the PNNS name to search, but it does not work in all cases, leading to empty results.
For more details, please comment
@stephanegigandet @PrimaelQuemerais @teolemon on this

Show Eco-score details for a product

On the product page, it should be able to see the details of the Eco-score, in a similar way to the OFF web site:

ML Kit scan page starts camera after use

Today I noticed a bug when using the ML Kit scanner, when I opened the scan page once with the appropriate settings, (regardless of how long and whether there was a scan result or not), I get after closing the page (back button) at regular intervals 3-4 times per minute these three comments in the log.

I/CameraManagerGlobal(17991): Camera 1 facing CAMERA_FACING_FRONT state now CAMERA_STATE_ACTIVE for client com.samsung.adaptivebrightnessgo API Level 2
I/CameraManagerGlobal(17991): Camera 1 facing CAMERA_FACING_FRONT state now CAMERA_STATE_IDLE for client com.samsung.adaptivebrightnessgo API Level 2
I/CameraManagerGlobal(17991): Camera 1 facing CAMERA_FACING_FRONT state now CAMERA_STATE_CLOSED for client com.samsung.adaptivebrightnessgo API Level 2

I noticed after a short time that my phone also quickly became hotter, just as the performance was worse, but this also only imperceptible.

Test phone is from Samsung

Suggestion: additional local word filter

What

• Currently, when I run a keyword query with "apple", I get about 500 products.
• Use case: "that's too many products, and finally I'm only interested in 'apple sauce'". That would be nice to type in an additional local filter "apple sauce" (or "sauce").

Part of

• #991

Display logos and descriptions of attributes for selected preferences in top of product page

The top of the product page should show a summary of how well the product matches the preferences of the user. It is similar to the logos shown on the product cards ( #32 ), but with more detailed information. See the personal search feature on the OFF web site for a sample implementation.

(the personal search feature is currently in alpha-testing on the OFF web site, to have access to it, please send me your OFF username so that I can turn it on for you).

On first use of the app, no clear path to customize settings

Current flow

Brainstorm

• Onboarding screen that proposes customisation ?
• Inline nudges to customize ?

Display tabs for matching / maybe matching / non-matching products in products lists

Lists of products should use tabs to display:

• all products in the list
• products matching the user preferences
• products that may match the user preferences (but we may be missing some data)
• products that do not match the user preferences

See the personal search feature on the OFF web site for a sample implementation.

(the personal search feature is currently in alpha-testing on the OFF web site, to have access to it, please send me your OFF username so that I can turn it on for you).

Offline first / cache for svg files

When we go to the preferences, the svg icons are loaded from the internet.
What if I run my app offline: very bad impression indeed!

1. We could afford default svg icons for all attributes in the app
2. We could also cache svg icons - I know svg icons are somehow cached by SvgPicture.network but I don't know how often the cache is refreshed, which could mean either "there's something in the cache, so we will never care about updated internet svg files" or "let's try every 5 minutes to see if the svg file changed"

Implement a list system (also enabling a scan history)

Principles
Lists should be:

• private to your device
• exportable
• optionally syncable across your devices using built-in system mechanisms such as iCloud or Google Drive app backup
• importable

Lists should be:

• very flexible although we can prepopulate with popular assumptions (eaten list, shopping list)
• prevent 2 lists with the same name
• sortable by date, nutriscore, brand, quantity, product name
• History should be a special list

Issues with sqflite upserts and transactions

Apparently sqflite has not 100% the same syntax as SQLite, therefore the upsert statements must be slightly changed.

There's also something fishy about transactions, at least on Android: Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction

Working on it...

Add Sentry to Smoothie

https://docs.sentry.io/platforms/flutter/

Deploying Flutter iOS apps with fastlane and GitHub Actions

Deploying Flutter iOS apps with fastlane and GitHub Actions
Flutter is a framework designed by Google for building cross-platform applications, including iOS, Android and web apps. It enables us to…
Reading time
8 min read
https://medium.com/flutter-community/deploying-flutter-ios-apps-with-fastlane-and-github-actions-2e87465e056e

Get the Eco-Score into smoothie

Implementation

• Clone the system that displays Nutri-Score on the scan card
• Change the server request url to ecoscore (server-side issue: openfoodfacts/openfoodfacts-server#4262)
• If (and only if) the server sends back a proper value (a, b, c, d or e), hide the classic CO2 value and display the new score
  https://world.openfoodfacts.org/api/v0/product/3414280980209.json?fields=ecoscore_grade (Here it shows null)
• Please use the Eco-Score visuals placeholders until we have the final visuals.

Placeholders with the right size

https://static.openfoodfacts.org/images/icons/ecoscore-a.svg
https://static.openfoodfacts.org/images/icons/ecoscore-b.svg
https://static.openfoodfacts.org/images/icons/ecoscore-c.svg
https://static.openfoodfacts.org/images/icons/ecoscore-d.svg
https://static.openfoodfacts.org/images/icons/ecoscore-e.svg
https://static.openfoodfacts.org/images/icons/ecoscore-unknown.svg

https://static.openfoodfacts.org/images/icons/ecoscore-a.png
https://static.openfoodfacts.org/images/icons/ecoscore-b.png
https://static.openfoodfacts.org/images/icons/ecoscore-c.png
https://static.openfoodfacts.org/images/icons/ecoscore-d.png
https://static.openfoodfacts.org/images/icons/ecoscore-e.png
https://static.openfoodfacts.org/images/icons/ecoscore-unknown.png