Scénario

Imaginez que vous disposez d'une application de commerce électronique nommée ShopEasy et que vous souhaitez que les utilisateurs qui cliquent sur les liens de produits dans les e-mails, les messages ou les réseaux sociaux soient redirigés directement vers la page du produit concerné dans l'application, au lieu du site Web.

Étape 1 : Configuration d'Opengraph dans le serveur nodejs pour l'aperçu du lien :

Open Graph est un protocole utilisé par les développeurs Web pour contrôler la façon dont les URL sont représentées lorsqu'elles sont partagées sur des plateformes de médias sociaux telles que Facebook, Twitter, LinkedIn et autres. En utilisant les balises Open Graph dans le code HTML d'une page Web, vous pouvez dicter le contenu qui sera affiché dans l'aperçu lorsqu'un utilisateur partage le lien.

Pour utiliser ces balises OpenGraph dans une application React Native, vous devez gérer les liens vers votre serveur (tels que https://ShopEasy.com/${type}/${id}) à l'aide de liens profonds ou de liens universels. Lorsque les utilisateurs partagent ces liens, des plateformes comme Facebook, Twitter ou iMessage afficheront automatiquement l'aperçu du contenu en fonction des balises OpenGraph que vous avez définies.

/routes/share.js

const express = require('express');
const app = express();
const path = require('path');

// Serve static files (e.g., images, CSS, JavaScript)
app.use(express.static(path.join(__dirname, 'public')));

// Route to serve the OpenGraph meta tags
app.get('/:type/:id', (req, res) => { // type: product/category
    const productId = req.params.id;

    // Fetch product details from a database or API (placeholder data for this example)
    const product = {
        id: productId,
        name: 'Sample Product',
        description: "'This is a sample product description.',"
        imageUrl: 'https://ShopEasy.com/images/sample-product.jpg',
        price: '$19.99',
    };

    // Serve HTML with OpenGraph meta tags
    res.send(`
        
        
        
            
${product.name}
            
${product.description}
            
Price: ${product.price}
        
        
    `);
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Étape 2 : Installation et configuration iOS :

a) (Pour la production) Préparez le fichier apple-app-site-association

Le fichier apple-app-site-association (AASA) est un fichier JSON qui indique à iOS quelles URL doivent ouvrir votre application. Voici comment vous pouvez le configurer pour votre application de commerce électronique :

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appIDs": ["ABCDE12345.com.shopeasy.app"],
                "paths": [
                    "/product/*",
                    "/category/*",
                    "/cart",
                    "/checkout"
                ]
            }
        ]
    }
}

• appIDs : . Identifiant de votre application, combinant votre identifiant d'équipe Apple (ABCDE12345) avec l'identifiant du bundle de votre application (com.shopeasy.app).
• chemins : les chemins de votre site Web qui doivent s'ouvrir dans votre application.
• /product/* : toute page de produit (comme https://www.shopeasy.com/product/123) devrait s'ouvrir dans l'application.
• /category/* : n'importe quelle page de catégorie (comme https://www.shopeasy.com/category/shoes).
• /cart et /checkout : les pages de panier et de paiement de l'utilisateur doivent également s'ouvrir dans l'application.

b) (Pour la production) Hébergez le fichier apple-app-site-association

Après avoir construit le fichier d'association, placez-le dans le répertoire .well-known de votre site. L'URL du fichier doit correspondre au format suivant :

https:///.well-known/apple-app-site-association (par exemple : https://www.shopeasy.com/.well-known/apple-app-site-association )
Vous devez héberger le fichier en utilisant https:// avec un certificat valide et sans redirection.

c) Activer les domaines associés dans Xcode

i) Ouvrez Xcode :
Ouvrez votre projet ShopEasy dans Xcode.

ii) Ajouter une fonctionnalité de domaines associés :
Accédez à l'onglet "Signature et capacités".
Cliquez sur le bouton " " et ajoutez "Domaines associés".

iii) Ajoutez votre domaine :
Dans la section Domaines associés, ajoutez votre domaine préfixé par applinks :.
Par exemple:
 :
i) Liens d'application de service : utilisés pour les liens profonds et l'interaction entre l'application et le Web, permettant à votre application de gérer directement des URL spécifiques.
ii) Informations d'identification Web du service : utilisées pour activer la saisie automatique des informations d'identification, permettant aux utilisateurs d'utiliser de manière transparente les mots de passe enregistrés sur votre application et votre site Web.

Pour les développeurs :

applinks:shopeasy
webcredentials:shopeasy

Pour la production :

applinks:shopeasy.com
webcredentials:shopeasy.com

d)(ref) Dans Info.plist, configuration des schémas d'URL : (les schémas d'URL sont utiles lorsque vous souhaitez ouvrir votre application via un lien qui n'est pas nécessairement une URL Web, permettant des liens profonds au sein de votre application ou de la lancer à partir d'une autre application.)

où:
CFBundleURLName : un nom lisible par l'homme pour le schéma d'URL. Il peut s'agir de n'importe quelle chaîne descriptive.
CFBundleURLSchemes : le schéma d'URL réel pris en charge par votre application. Il doit s'agir d'une chaîne unique telle que shopeasy/showeasy.com (si la production est définie).

    
...
        CFBundleTypeRoleEditorCFBundleURLNameshopeasyCFBundleURLSchemesshopeasy

d) Dans AppDelegate.mm :

#import 

// ...
// Add Below Code for DeepLinks

- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}


- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}

//DEEP LINKS TILL HERE

@end

e) Test du périphérique Deeplink :

Cela devrait ouvrir l'application.

npx uri-scheme open "shopeasy://product/mobile" --ios

ou

xcrun simctl openurl booted "shopeasy://product/mobile"

Étape 3 : Installation et configuration d'Android :

i) Dans AndroidManifest.xml :

    />

ii) Enregistrez-vous dans Android :
adb shell suis start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
ou
Cliquez sur ce lien dans l'émulateur si la route fonctionne :
http://localhost:3000/share/product/iphone

Étape 3 : Utilisation dans l’application React Native :

Navigation.jsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './MainNavigator';
import { navigationRef } from '../utils/NavigationUtil';

const config = {
  screens: {
    ProductScreen: '/product/:id',
    CategoryScreen: '/category/:name',
  },
};

const linking = {
  prefixes: ['shopeasy://', 'https://shopeasy.com', 'http://localhost:3000'], 
  config,
};

const Navigation: React.FC = () => {
  return (
    
  );
};

export default Navigation;

App.jsx

  useEffect(() => {
    // Retrieve the initial URL that opened the app (if any) and handle it as a deep link.
    Linking.getInitialURL().then(url => {
      handleDeepLink({ url }, 'CLOSE'); // Pass the URL and an action ('CLOSE') to handleDeepLink function.
    });

    // Add an event listener to handle URLs opened while the app is already running.
    Linking.addEventListener('url', event => handleDeepLink(event, 'RESUME'));
    // When the app is resumed with a URL, handle it as a deep link with the action ('RESUME').

    // Cleanup function to remove the event listener when the component unmounts.
    return () => {
      Linking.removeEventListener('url', event => handleDeepLink(event, 'RESUME'));
    };
  }, []);

CLOSE/RESUME est facultatif et est transmis selon les exigences.