대본

ShopEasy라는 전자상거래 앱이 있고 사용자가 이메일, 메시지 또는 소셜 미디어에서 제품 링크를 클릭하면 웹사이트 대신 앱의 관련 제품 페이지로 직접 리디렉션되기를 원한다고 가정해 보세요.

1단계: 링크 미리보기를 위한 nodejs 서버의 Opengraph 구성:

오픈 그래프는 웹 개발자가 Facebook, Twitter, LinkedIn 등과 같은 소셜 미디어 플랫폼에서 공유할 때 URL이 표시되는 방식을 제어하기 위해 사용하는 프로토콜입니다. 웹페이지의 HTML에 오픈 그래프 태그를 사용하면 사용자가 링크를 공유할 때 미리보기에 표시될 콘텐츠를 지정할 수 있습니다.

React Native 앱에서 이러한 OpenGraph 태그를 사용하려면 딥 링크 또는 범용 링크를 사용하여 서버에 대한 링크(예: 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 설정 및 구성:

a) (프로덕션용) apple-app-site-association 파일 준비

AASA(apple-app-site-association) 파일은 앱을 열어야 하는 URL을 iOS에 알려주는 JSON 파일입니다. 전자상거래 앱에 설정하는 방법은 다음과 같습니다.

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

• appIDs: . Apple 팀 ID(ABCDE12345)와 앱의 번들 식별자(com.shopeasy.app)를 결합한 앱 식별자입니다.
• 경로: 앱에서 열려야 하는 웹사이트의 경로입니다.
• /product/*: 모든 제품 페이지(예: https://www.shopeasy.com/product/123)가 앱에서 열립니다.
• /category/*: 모든 카테고리 페이지(예: https://www.shopeasy.com/category/shoes).
• /cart 및 /checkout: 사용자의 장바구니 및 결제 페이지도 앱에서 열려야 합니다.

b) (프로덕션용) 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://를 사용하여 파일을 호스팅해야 합니다.

c) Xcode에서 연결된 도메인 활성화

i) Xcode를 엽니다:
Xcode에서 ShopEasy 프로젝트를 엽니다.

ii) 관련 도메인 기능 추가:
"서명 및 기능" 탭으로 이동합니다.
" " 버튼을 클릭하고 "연결된 도메인"을 추가합니다.

iii) 도메인 추가:
연결된 도메인 섹션에서 applinks:.
접두사가 붙은 도메인을 추가합니다. 예를 들어:
:
i) 서비스 앱 링크: 딥 링크 및 앱과 웹 간 상호 작용에 사용되어 앱에서 특정 URL을 직접 처리할 수 있습니다.
ii) 서비스 웹 자격 증명: 자격 증명 자동 완성을 활성화하는 데 사용되며, 이를 통해 사용자는 앱과 웹사이트 전반에 걸쳐 저장된 비밀번호를 원활하게 사용할 수 있습니다.

개발자용:

applinks:shopeasy
webcredentials:shopeasy

제작용:

applinks:shopeasy.com
webcredentials:shopeasy.com

d)(ref) Info.plist에서 URL 구성표 구성: (URL 구성표는 반드시 웹 URL이 아닌 링크를 통해 앱을 열거나 앱 내에서 딥 링크를 허용하거나 다른 앱에서 실행하려는 경우에 유용합니다.)

어디:
CFBundleURLName: 사람이 읽을 수 있는 URL 구성표의 이름입니다. 설명 문자열이면 무엇이든 가능합니다.
CFBundleURLSchemes: 앱이 지원하는 실제 URL 구성표입니다. shopeasy/showeasy.com(생산 설정된 경우)과 같은 고유한 문자열이어야 합니다.

    
...
        CFBundleTypeRoleEditorCFBundleURLNameshopeasyCFBundleURLSchemesshopeasy

d) 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) 딥링크 장치 테스트:

앱이 열립니다.

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

또는

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

3단계: Android 설정 및 구성:

i) AndroidManifest.xml에서:

    />

ii) 안드로이드 체크인:
adb 쉘 오전 시작 -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'));
    };
  }, []);

CLOSE/RESUME은 선택 사항이며 요구 사항에 따라 핸들이 전달됩니다.