Guión

Imagine que tiene una aplicación de comercio electrónico llamada ShopEasy y desea que los usuarios que hacen clic en enlaces de productos en correos electrónicos, mensajes o redes sociales sean redirigidos directamente a la página del producto correspondiente en la aplicación, en lugar del sitio web.

Paso 1: Configuración de Opengraph en el servidor nodejs para vista previa del enlace:

Open Graph es un protocolo utilizado por los desarrolladores web para controlar cómo se representan las URL cuando se comparten en plataformas de redes sociales como Facebook, Twitter, LinkedIn y otras. Al utilizar etiquetas Open Graph en el HTML de una página web, puedes dictar qué contenido se mostrará en la vista previa cuando un usuario comparta el enlace.

Para usar estas etiquetas OpenGraph en una aplicación React Native, debe manejar los enlaces a su servidor (como https://ShopEasy.com/${type}/${id}) mediante enlaces profundos o enlaces universales. Cuando los usuarios comparten estos enlaces, plataformas como Facebook, Twitter o iMessage mostrarán automáticamente la vista previa del contenido según las etiquetas OpenGraph que hayas definido.

/rutas/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}`);
});

Paso 2: Instalación y configuración de iOS:

a) (Para producción) Prepare el archivo apple-app-site-association

El archivo apple-app-site-association (AASA) es un archivo JSON que le indica a iOS qué URL deben abrir su aplicación. Así es como puedes configurarlo para tu aplicación de comercio electrónico:

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

• appIDs: . El identificador de su aplicación, que combina su ID de equipo de Apple (ABCDE12345) con el identificador del paquete de su aplicación (com.shopeasy.app).
• rutas: Las rutas de tu sitio web que deberían abrirse en tu aplicación.
• /product/*: cualquier página de producto (como https://www.shopeasy.com/product/123) debe abrirse en la aplicación.
• /category/*: cualquier página de categoría (como https://www.shopeasy.com/category/shoes).
• /cart y /checkout: las páginas de carrito y pago del usuario también deberían abrirse en la aplicación.

b) (Para producción) Alojar el archivo apple-app-site-association

Después de crear el archivo de asociación, colóquelo en el directorio .well-known de su sitio. La URL del archivo debe coincidir con el siguiente formato:

https:///.well-known/apple-app-site-association(por ejemplo: https://www.shopeasy.com/.well-known/apple-app-site-association )
Debes alojar el archivo usando https:// con un certificado válido y sin redirecciones.

c) Habilitar dominios asociados en Xcode

i) Abrir Xcode:
Abre tu proyecto ShopEasy en Xcode.

ii) Capacidad para agregar dominios asociados:
Vaya a la pestaña "Firma y capacidades".
Haga clic en el botón " " y agregue "Dominios asociados".

iii) Agregue su dominio:
En la sección Dominios asociados, agregue su dominio con el prefijo applinks:.
Por ejemplo:
:
i) Enlaces de aplicaciones de servicio: se utilizan para enlaces profundos e interacción de aplicación a web, lo que permite que su aplicación maneje URL específicas directamente.
ii) Credenciales web del servicio: se utiliza para habilitar el autocompletar de credenciales, lo que permite a los usuarios usar sin problemas contraseñas guardadas en su aplicación y sitio web.

Para desarrolladores:

applinks:shopeasy
webcredentials:shopeasy

Para producción:

applinks:shopeasy.com
webcredentials:shopeasy.com

d)(ref) En Info.plist, configuración de esquemas de URL: (los esquemas de URL son útiles cuando desea abrir su aplicación a través de un enlace que no es necesariamente una URL web, lo que permite realizar enlaces profundos dentro de su aplicación o iniciarla desde otra aplicación).

dónde:
CFBundleURLName: un nombre legible por humanos para el esquema de URL. Puede ser cualquier cadena descriptiva.
CFBundleURLSchemes: el esquema de URL real que admite su aplicación. Debe ser una cadena única como shopeasy/showeasy.com (si está configurada en producción).

    
...
        
            CFBundleTypeRole
            Editor
            CFBundleURLName
            shopeasy
            CFBundleURLSchemes
            
                shopeasy
            
        
    

d) En 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) Prueba del dispositivo de enlace profundo:

Esto debería abrir la aplicación.

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

o

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

Paso 3: Instalación y configuración de Android:

i) En AndroidManifest.xml:

    

    

   
        
        
        
        
    

        
        
          
          
          
          
          
          
        
   

/>

ii) Registrar en Android:
adb shell am start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
o
Haga clic en este enlace en el emulador si la ruta funciona:
http://localhost:3000/share/product/iphone

Paso 3: Uso en la aplicación React Native:

Navegación.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;

Aplicación.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'));
    };
  }, []);

CERRAR/RESUME es opcional y se pasa el identificador según el requisito.