Foqus AI (React-Native)

Description

The mobile Icon for Foqus AI visual search application to integrate in your mobile e-commercce apps to provide your client the opportunity to search fror products within your app with images and icrease conversion rate.

How to use?

1. Register to https://developers.trynfit.com/ and follow the steps to create an account (choose mobile as CMS and enter whished billing plan).
2. Verify your email and pay for the plan (if you chose a non-free one).
3. Create a new project under visual search tab https://developers.trynfit.com/en/similars_project/
4. choose a file: enter a JSON file structured as the example below:

If your app contains categories as (Home-page / hats / trousers, etc.): custoer name: your chosen customer name in sign-up customer type: your chosen domain in sign-up (example: shopping/commerce/textile)

{
    "CUSTOMER NAME_CUSTOMER TYPE": [
        {
            "Categorie": "CATEGORY1",
            "Photos": [
                {
                    "IDProduit": "Product ID if you use a Web CMS and you have a database else, leave it empty",
                    "UrlImage": "PRODUCT_IMAGE_URL (should be public not secured with credentials)",
                    "ImageName": "IF YOU HAVE IMAGE NAME, ELSE LEAVE IT EMPTY",
                    "UrlProduitMobile": "PRODUCT COMPONENT ROUTE USED BY NAVIGATOR INSIDE MOBILE APP (example: /shop/chairs/big-bowl-lounge-chair)",
                    "UrlProduit": "IF YOU HAVE A WEB APP ENTER PRODUCT URL HERE ELSE LEAVE IT EMPTY"
                },
                {
                    "IDProduit": "Product ID if you use a Web CMS and you have a database else, leave it empty",
                    "UrlImage": "https://cdn.shopify.com/s/files/1/0085/8488/8425/products/84424_101_M2.jpg?v=1553595551",
                    "ImageName": "IF YOU HAVE IMAGE NAME, ELSE LEAVE IT EMPTY",
                    "UrlProduitMobile": "PRODUCT COMPONENT ROUTE USED BY NAVIGATOR INSIDE MOBILE APP (example: /shop/chairs/big-bowl-lounge-chair)",
                    "UrlProduit": "IF YOU HAVE A WEB APP ENTER PRODUCT URL HERE ELSE LEAVE IT EMPTY",
                }
                ...
            ]
        },
        {
            "Categorie": "CATEGORY2",
            "Photos": [
                {
                    "IDProduit": "Product ID if you use a Web CMS and you have a database else, leave it empty",
                    "UrlImage": "PRODUCT_IMAGE_URL (should be public not secured with credentials)",
                    "ImageName": "IF YOU HAVE IMAGE NAME, ELSE LEAVE IT EMPTY",
                    "UrlProduitMobile": "PRODUCT COMPONENT ROUTE USED BY NAVIGATOR INSIDE MOBILE APP (example: /shop/chairs/big-bowl-lounge-chair)",
                    "UrlProduit": "IF YOU HAVE A WEB APP ENTER PRODUCT URL HERE ELSE LEAVE IT EMPTY"
                }
                ...
            ]
        }
        ...
    ]
}

If your app doesn't have categories or all your products are in only one category:

{ 
    "CUSTOMER NAME_CUSTOMER TYPE": 
    [ 
        { 
            "Photos": [ 
                {
                    "IDProduit": "Product ID if you use a Web CMS and you have a database else, leave it empty",
                    "UrlImage": "PRODUCT_IMAGE_URL (should be public not secured with credentials)",
                    "ImageName": "IF YOU HAVE IMAGE NAME, ELSE LEAVE IT EMPTY",
                    "UrlProduitMobile": "PRODUCT COMPONENT ROUTE USED BY NAVIGATOR INSIDE MOBILE APP (example: /shop/chairs/big-bowl-lounge-chair)",
                    "UrlProduit": "IF YOU HAVE A WEB APP ENTER PRODUCT URL HERE ELSE LEAVE IT EMPTY"
                }, 
                {
                    "IDProduit": "Product ID if you use a Web CMS and you have a database else, leave it empty",
                    "UrlImage": "PRODUCT_IMAGE_URL (should be public not secured with credentials)",
                    "ImageName": "IF YOU HAVE IMAGE NAME, ELSE LEAVE IT EMPTY",
                    "UrlProduitMobile": "PRODUCT COMPONENT ROUTE USED BY NAVIGATOR INSIDE MOBILE APP (example: /shop/chairs/big-bowl-lounge-chair)",
                    "UrlProduit": "IF YOU HAVE A WEB APP ENTER PRODUCT URL HERE ELSE LEAVE IT EMPTY"
                }
                ...
            ]
        }
    ]
}

Example of json file with categories

4. Click on "Start training", if you see no errors, Foqus engine will begin to extract images from the file you entered and train it's model to be able to detect similar products. The operation could take long, so you will be notified with an email when training finishes.
5. Now you can use this package inside your app by providing it with your credentials inside https://developers.trynfit.com/en/dashboard/ and https://developers.trynfit.com/en/updateprofile/. other prorieties (props) / variables you will use in this package will be explained in the Properties (props) section. If you can't understand a step or you have an issue please inform us on: [email protected] and we will reply in a minute

Example of using this package

//HOME COMPONENT
import React from 'react';
import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import FoqusAI from "foqusai";
import axios from "axios";


const Home = ({ route }) => {
    const navigation = useNavigation();
    //function that will get product details from resulting similar products' IDs
    const getProducts = (idsArray) => {
        var result = []
        return axios.get("whatever/api/that/gives/all/products/in/database")
        .then(resultt => {
            const db = resultt.data
            idsArray.forEach(id => {
            db.products.forEach(prod => {
                if (prod.id == id) {
                var obj = {}
                obj["id"] = prod.id
                obj["title"] = prod.name
                obj["price"] = prod.variants[0].price
                obj["url_image"] = prod.variants[0].image.url
                obj["url_produit_mobile"] = prod.path
                result.push(obj)
                }
            })
            });
            return result
        })
    }
    return (
    <View>
        <FoqusAI
            customerName="customerX"
            customerType="textile"
            apiKey="3648da2b-407c-4375-a13b-5..."
            projectName="Project"
            style={{ top: 25, margin: 0, padding: 0, right: 0 }}
            mainColor="rgba(18,30,116,1)"
            resultProductInMobile={true}
            navigationObject={navigation}
            resultProductStackScreenName="Product"
            resultProductNavigateKey="path"
            getProductDetails={(ids) => getProducts(ids)}
          />
    </View>
    );
};
export default Home;

//ROOT COMPONENT (App.js)
import * as React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './src/home/index';
const Stack = createStackNavigator();

//define app navigation to help navigate to result product similar to the product enterd in search
const AppNavigation = () => (
  <Stack.Navigator
    options={{
      headerTransparent: true,
    }}>
    <Stack.Screen
      name="Home"
      component={Home}
      options={{ headerShown: false, ...stackStyling }}
    />
    </Stack.Navigator>
);
const App = () => {
  return (
    <>
          <NavigationContainer>
            {/* rest goes here.. */}
          </NavigationContainer>
    </>
  );
};
export default App;

Screenshots


Foqus icon on an e-commerce app.


Select if you want to capture or browse image.


Results page.

Properties (props)

| Prop | Description | Return | Default value | | :------------ | :------------ | :------------ | :------------ | | customerName | Legal name chosen when signing-up to https://developers.trynfit.com, you can find it in the Profile page. | read-only prop | "" | | customerType | Domain chosen when signing-up to https://developers.trynfit.com, you can find it in the Profile page. | read-only prop | "" | | apiKey | API key generated when creating an account on https://developers.trynfit.com, you can find it in the Dashboard page. | read-only prop | "" | | projectName | Project name chosen when creating a visual search project, you can find it in the Visual search page. | read-only prop | "" | | style | For styling Foqus under your React-Native app (Use it to well position Foqus Icon in your store). | read-only prop | {{ top: 25, margin: 0, padding: 0, right: 0 }} | | mainColor | For the main color of foqus (put a color that matches your template). | read-only prop | "rgba(18,30,116,1)" | | resultProductInMobile | Choose whearher to navigate to web (browser) or inside your app when clicking on a resulted similar product to the one entered for search. | read-only prop | true | | navigationObject | The navigation object you initialized inside the component which you called Foqus (const navigation = useNavigation();). | read-only prop | null | | resultProductStackScreenName | The screen you identified in the root component to call the component that displays the product with the navigator. | read-only prop | "Product" | | resultProductNavigateKey | The key of which the value is UrlProduitMobile entered in the JSON file to help navigate to the product page, this key is used inside navigation.navigate({ Key: Value }) function. | read-only prop | "path" | | getProductDetails | function that takes an array of IDs of similar product resulted by Foqus engine AI server and gives the developer the hand to search within (his Database, API or whatever) to search for those products' details, the important thing is that this function should return an array of objects, each object should have fields: id, title, price, url_image, url_produit_mobile. You can refer to the exaample above for more details. | read-only prop | undefined |

Changelog

• Earlier versions: Not stable.
• Version 0.0.6: First stable version.
• Version 0.0.10: Product price and title and navigate within app
• Next version: sort by menu, filters and search from resulting product will be added in results modal.