سيناريو

تخيل أن لديك تطبيقًا للتجارة الإلكترونية يسمى ShopEasy، وتريد إعادة توجيه المستخدمين الذين ينقرون على روابط المنتج في رسائل البريد الإلكتروني أو الرسائل أو وسائل التواصل الاجتماعي مباشرةً إلى صفحة المنتج ذات الصلة في التطبيق، بدلاً من موقع الويب.

الخطوة 1: تكوين Opengraph في خادم Nodejs لمعاينة الرابط:

Open Graph هو بروتوكول يستخدمه مطورو الويب للتحكم في كيفية تمثيل عناوين URL عند مشاركتها على منصات التواصل الاجتماعي مثل Facebook وTwitter وLinkedIn وغيرها. باستخدام علامات Open Graph في HTML لصفحة الويب، يمكنك تحديد المحتوى الذي سيتم عرضه في المعاينة عندما يقوم المستخدم بمشاركة الرابط.

لاستخدام علامات OpenGraph هذه في تطبيق React Native، يمكنك التعامل مع الروابط إلى خادمك (مثل https://ShopEasy.com/${type}/${id}) باستخدام الارتباط العميق أو الروابط العامة. عندما يشارك المستخدمون هذه الروابط، ستعرض منصات مثل Facebook أو Twitter أو iMessage تلقائيًا معاينة المحتوى استنادًا إلى علامات OpenGraph التي حددتها.

/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:

أ) (للإنتاج) قم بإعداد ملف رابطة موقع تطبيق Apple

ملف apple-app-site-association (AASA) هو ملف JSON يخبر نظام التشغيل iOS عن عناوين URL التي يجب أن تفتح تطبيقك. إليك كيفية إعداده لتطبيق التجارة الإلكترونية الخاص بك:

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

• معرفات التطبيق: . معرف تطبيقك، يجمع معرف فريق Apple الخاص بك (ABCDE12345) مع معرف حزمة تطبيقك (com.shopeasy.app).
• المسارات: المسارات الموجودة على موقع الويب الخاص بك والتي يجب فتحها في تطبيقك.
• /product/*: يجب فتح أي صفحة منتج (مثل https://www.shopeasy.com/product/123) في التطبيق.
• /category/*: أي صفحة فئة (مثل https://www.shopeasy.com/category/shoes).
• /cart و/checkout: يجب أيضًا فتح صفحتي سلة التسوق والخروج للمستخدم في التطبيق.

ب) (للإنتاج) استضافة ملف apple-app-site-association

بعد إنشاء ملف الاقتران، ضعه في دليل .well-known الخاص بموقعك. يجب أن يتطابق عنوان URL للملف مع التنسيق التالي:

https:///.well-known/apple-app-site-association(على سبيل المثال: https://www.shopeasy.com/.well-known/apple-app-site-association )
يجب عليك استضافة الملف باستخدام https:// مع شهادة صالحة وبدون عمليات إعادة توجيه.

ج) تمكين المجالات المرتبطة في Xcode

i) افتح Xcode:
افتح مشروع ShopEasy الخاص بك في Xcode.

ii) إضافة إمكانية المجالات المرتبطة:
انتقل إلى علامة التبويب "التوقيع والإمكانات".
انقر فوق الزر " " وأضف "المجالات المرتبطة".

ثالثًا) أضف المجال الخاص بك:
ضمن قسم النطاقات المرتبطة، أضف نطاقك مسبوقًا بروابط التطبيقات:.
على سبيل المثال:
:
ط) روابط تطبيقات الخدمة: تُستخدم للربط العميق والتفاعل بين التطبيق والويب، مما يسمح لتطبيقك بالتعامل مع عناوين URL محددة مباشرةً.
2) بيانات اعتماد الويب الخاصة بالخدمة: تُستخدم لتمكين التدوين التلقائي لبيانات الاعتماد، مما يسمح للمستخدمين باستخدام كلمات المرور المحفوظة بسلاسة عبر تطبيقك وموقعك على الويب.

للمطورين:

applinks:shopeasy
webcredentials:shopeasy

للإنتاج:

applinks:shopeasy.com
webcredentials:shopeasy.com

د)(المرجع) في Info.plist تكوين أنظمة URL: (تعد أنظمة URL مفيدة عندما تريد فتح تطبيقك عبر رابط ليس بالضرورة عنوان URL على الويب، مما يسمح بالارتباط العميق داخل تطبيقك أو تشغيله من تطبيق آخر.)

أين:
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:

ط) في AndroidManifest.xml:

    />

ii) تحقق في android:
adb Shell am start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
أو
انقر على هذا الرابط في المحاكي إذا كان المسار يعمل:
http://localhost:3000/share/product/iphone

الخطوة 3: الاستخدام في تطبيق 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'));
    };
  }, []);

الإغلاق/الاستئناف اختياري ويتم تمريره وفقًا للمتطلبات.