परिदृश्य

कल्पना करें कि आपके पास ShopEasy नाम का एक ईकॉमर्स ऐप है, और आप चाहते हैं कि जो उपयोगकर्ता ईमेल, संदेश या सोशल मीडिया में उत्पाद लिंक पर क्लिक करते हैं, उन्हें वेबसाइट के बजाय सीधे ऐप में संबंधित उत्पाद पृष्ठ पर रीडायरेक्ट किया जाए।

चरण 1: लिंक पूर्वावलोकन के लिए नोडज सर्वर में ओपनग्राफ़ कॉन्फ़िगरेशन:

ओपन ग्राफ एक प्रोटोकॉल है जिसका उपयोग वेब डेवलपर्स द्वारा यह नियंत्रित करने के लिए किया जाता है कि फेसबुक, ट्विटर, लिंक्डइन और अन्य जैसे सोशल मीडिया प्लेटफॉर्म पर साझा किए जाने पर यूआरएल का प्रतिनिधित्व कैसे किया जाता है। किसी वेबपेज के HTML में ओपन ग्राफ़ टैग का उपयोग करके, आप यह तय कर सकते हैं कि जब कोई उपयोगकर्ता लिंक साझा करेगा तो पूर्वावलोकन में कौन सी सामग्री दिखाई जाएगी।

रिएक्ट नेटिव ऐप में इन ओपनग्राफ टैग का उपयोग करने के लिए, आप डीप लिंकिंग या यूनिवर्सल लिंक का उपयोग करके अपने सर्वर के लिंक (जैसे https://ShopEasy.com/${type}/${id}) को संभालेंगे। जब उपयोगकर्ता इन लिंक को साझा करते हैं, तो फेसबुक, ट्विटर या आईमैसेज जैसे प्लेटफॉर्म स्वचालित रूप से आपके द्वारा परिभाषित ओपनग्राफ टैग के आधार पर सामग्री पूर्वावलोकन प्रदर्शित करेंगे।

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

चरण 2: iOS सेटअप और कॉन्फ़िगरेशन:

a) (उत्पादन के लिए) ऐप्पल-ऐप-साइट-एसोसिएशन फ़ाइल तैयार करें

एप्पल-ऐप-साइट-एसोसिएशन (AASA) फ़ाइल एक JSON फ़ाइल है जो iOS को बताती है कि कौन से URL पर आपका ऐप खुलना चाहिए। यहां बताया गया है कि आप इसे अपने ईकॉमर्स ऐप के लिए कैसे सेट कर सकते हैं:

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

• ऐपआईडी: । आपके ऐप का पहचानकर्ता, आपकी ऐप्पल टीम आईडी (एबीसीडीई12345) को आपके ऐप के बंडल पहचानकर्ता (com.shopeasy.app) के साथ संयोजित करता है।
• पथ: आपकी वेबसाइट पर वे पथ जो आपके ऐप में खुलने चाहिए।
• /उत्पाद/*: कोई भी उत्पाद पृष्ठ (जैसे https://www.shopeasy.com/product/123) ऐप में खुलना चाहिए।
• /श्रेणी/*: कोई भी श्रेणी पृष्ठ (जैसे https://www.shopeasy.com/category/shoes).
• /कार्ट और /चेकआउट: उपयोगकर्ता के कार्ट और चेकआउट पेज भी ऐप में खुलने चाहिए।

बी) (उत्पादन के लिए) ऐप्पल-ऐप-साइट-एसोसिएशन फ़ाइल होस्ट करें

एसोसिएशन फ़ाइल बनाने के बाद, इसे अपनी साइट की .प्रसिद्ध निर्देशिका में रखें। फ़ाइल का यूआरएल निम्नलिखित प्रारूप से मेल खाना चाहिए:

https:///.well-known/apple-app-site-association(उदाहरण: https://www.shopeasy.com/.well-known/apple-app-site-association )
आपको वैध प्रमाणपत्र और बिना किसी रीडायरेक्ट के https:// का उपयोग करके फ़ाइल को होस्ट करना होगा।

ग) Xcode में एसोसिएटेड डोमेन सक्षम करें

i) Xcode खोलें:
Xcode में अपना ShopEasy प्रोजेक्ट खोलें।

ii) संबद्ध डोमेन क्षमता जोड़ें:
"हस्ताक्षर और क्षमताएं" टैब पर जाएं।
" " बटन पर क्लिक करें और "एसोसिएटेड डोमेन" जोड़ें।

iii) अपना डोमेन जोड़ें:
एसोसिएटेड डोमेन अनुभाग के अंतर्गत, अपना डोमेन पहले ऐपलिंक के साथ जोड़ें:.
उदाहरण के लिए:
:
i) सेवा ऐपलिंक: डीप लिंकिंग और ऐप-टू-वेब इंटरैक्शन के लिए उपयोग किया जाता है, जिससे आपका ऐप सीधे विशिष्ट यूआरएल को संभाल सकता है।
ii) सेवा वेबक्रेडेंशियल्स: क्रेडेंशियल्स के लिए ऑटोफिल को सक्षम करने के लिए उपयोग किया जाता है, जिससे उपयोगकर्ता आपके ऐप और वेबसाइट पर सहेजे गए पासवर्ड का निर्बाध रूप से उपयोग कर सकते हैं।

देव के लिए:

applinks:shopeasy
webcredentials:shopeasy

उत्पादन के लिए:

applinks:shopeasy.com
webcredentials:shopeasy.com

डी)(संदर्भ) Info.plist में यूआरएल योजनाओं को कॉन्फ़िगर करना: (यूआरएल योजनाएं तब उपयोगी होती हैं जब आप अपने ऐप को एक लिंक के माध्यम से खोलना चाहते हैं जो जरूरी नहीं कि एक वेब यूआरएल हो, जो आपके ऐप के भीतर डीप लिंकिंग या इसे किसी अन्य ऐप से लॉन्च करने की अनुमति देता है।)

कहाँ:
CFBundleURLName: URL योजना के लिए एक मानव-पठनीय नाम। यह कोई भी वर्णनात्मक स्ट्रिंग हो सकती है।
CFBundleURLSchemes: वास्तविक URL योजना जो आपका ऐप समर्थन करता है। यह shopeasy/showeasy.com (यदि उत्पादन सेट है) जैसी एक अनूठी स्ट्रिंग होनी चाहिए।

    
...
        CFBundleTypeRoleEditorCFBundleURLNameshopeasyCFBundleURLSchemesshopeasy

घ) 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

ई) डीपलिंक डिवाइस का परीक्षण:

इससे ऐप खुल जाना चाहिए।

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

या

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

चरण 3: Android सेटअप और कॉन्फ़िगरेशन:

i) AndroidManifest.xml में:

    />

ii) एंड्रॉइड में चेक करें:
adb शेल am प्रारंभ -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
या
यदि रूट काम कर रहा है तो एमुलेटर में इस लिंक पर क्लिक करें:
http://localhost:3000/share/product/iphone

चरण 3: रिएक्ट नेटिव ऐप में उपयोग:

नेविगेशन.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 वैकल्पिक है और आवश्यकता के अनुसार हैंडल पास किया जाता है।