분류 Reactjs

React Native 딥 링크 단순화

컨텐츠 정보

  • 조회 623 (작성일 )

본문

이 블로그의 React Native 앱에서 딥 링크를 추가하는 HOW 부분을 살펴보기 전에 먼저 WHAT 및 WHY를 살펴보고 개념을 더 잘 이해합시다.


딥 링크 란 무엇입니까? 


딥 링크는 사용자가 URL을 사용하여 Android 앱의 특정 활동에 액세스 할 수 있는 인텐트 필터 시스템입니다.


전자 상거래 웹 사이트 (예 : 아마존)에서 특정 제품 (예 : 신발)을 보고 친구와 공유하고 싶다고 가정 해 봅시다. 따라서 딥 링크를 사용하면 수신자가 한 번의 클릭으로 정확한 신발 제품 페이지를 열 수 있는 URL을 공유 할 수 있습니다.


이제 이 정의가 더 명확 해집니다.


딥 링크는 단순히 앱을 시작하지 않고 모바일 앱 내의 특정 위치에 연결하는 URI (Uniform Resource Identifier)를 사용하는 것으로 구성됩니다. 지연된 딥 링크를 사용하면 앱이 아직 설치되지 않은 경우에도 콘텐츠에 딥 링크 할 수 있습니다. 


https://dev.to/iamshadmirza/react-native-deep-linking-simplified-32ni 


왜 딥 링크인가? 


우리는 이미 위의 어떤 부분에서 하나의 예를 살펴 보았지만 딥 링크가 매우 유용 할 수 있는 많은 사용 사례가 있을 수 있습니다. 마케팅 전략, 추천 링크, 특정 제품 공유 등을 생각하십시오.


모바일 딥 링크의 가장 큰 장점은 마케팅 담당자와 앱 개발자가 전용 링크를 사용하여 사용자를 앱 내 특정 위치로 직접 가져올 수 있다는 것입니다. 딥 링크가 웹을 보다 유용하게 사용하는 것처럼 모바일 딥 링크는 모바일 앱에서도 동일하게 작동합니다.


딥 링크를 추가하는 방법? 


마지막으로 하나를 만드는 방법. 간단한 3 단계만 수행하면 됩니다.


관련된 단계 :- 

  1. 프로젝트 만들기
  2. AndroidManifest.xml 편집
  3. 프로젝트 구축

1 단계. 프로젝트 생성 


다음 명령을 실행하여 React Native 프로젝트를 작성하십시오.

react-native init deeplinkdemo


이제 마지막으로 조정할 프로젝트가 있으므로 2 단계로 넘어 갑시다.


2 단계. AndroidManifest.xml 편집 


AndroidManifest.xml에 인 텐트 필터를 추가하여 이 특정 앱을 시작하기 위해 들어오는 링크를 지정해야 합니다.


<activity
 android:name=".MainActivity"
 android:label="@string/app_name"
 android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
 android:windowSoftInputMode="adjustResize">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 <!--Copy & Paste code from here-->
 <intent-filter android:label="@string/app_name">
 <action android:name="android.intent.action.VIEW" />
 <category android:name="android.intent.category.DEFAULT" />
 <category android:name="android.intent.category.BROWSABLE" />
 <data android:scheme="app"
 android:host="deeplink" />
 </intent-filter>
 <!--To here-->
 </activity>


의견이 무엇을 해야 할지 명확하게 지정하기를 바랍니다. 의도 필터를 조금 더 잘 이해합시다.


인 텐트 필터는 구성 요소가 수신하려는 인 텐트 유형을 지정하는 앱 매니페스트 파일의 식입니다. 


<intent-filter> 내부의 <data> 태그를 자세히 살펴보십시오. 우리가 신경 써야 할 두 가지 속성이 있습니다. 들어오는 링크의 유형으로 scheme를 고려하고 URL로 host를 고려하십시오.


우리의 딥 링크는 다음과 같이 보일 것입니다 : app : // deeplink 


자세한 내용은 Google 문서를 읽으십시오. https://developer.android.com/training/app-links/deep-linking


3 단계. 프로젝트 구축 


루트 디렉토리로 이동하여 다음 명령을 실행하십시오.

react-native run-android

프로젝트가 빌드 될 때까지 기다린 다음 딥 링크가 올바르게 작동하는지 테스트합니다.


그것을 테스트 


앱이 백그라운드에 있는지 확인하고 다음 명령을 실행하십시오.


adb shell am start -W -a android.intent.action.VIEW -d app://deeplink com.deeplinkdemo

패키지 이름이 다른 경우 다음과 같이 명령을 편집하십시오.


$ adb shell am start -W -a android.intent.action.VIEW -d <URI> <PACKAGE>

참고 : app : // deeplink를 자세히 살펴보십시오. 앱을 지정하기 위해 intent-filter 안에 추가 된 링크입니다. 


앱이 성공적으로 열리면 딥 링크가 정상적으로 작동하는 것입니다.


URL로 여는 방법 


우리는 이전에 앱 체계를 사용했으며 이제는 https 체계를 사용할 것입니다. 다음과 같이 intent-filter 속성 내에서 <data> 태그를 편집하십시오.

<data android:scheme="https" android:host="www.deeplinkdemo.com" />


이 명령을 실행하십시오 :


 adb shell am start -W -a android.intent.action.VIEW -d https://www.deeplinkdemo.com com.deeplinkdemo

앱이 바로 앞에 나타나면 응원합니다.


노트 : 


intent-filter 내부에 여러 개의 <data> 태그를 사용할 수 있으므로 이와 같은 것이 좋습니다.

<data android:scheme="app" android:host="deeplink" />
<data android:scheme="https" android:host="www.deeplinkdemo.com" />


//deeplink 및 "https://www.deeplinkdemo.com"URI 앱이 이 활동을 해결합니다. 


이 두 링크를 사용하여 HTML 파일을 작성하고 테스트 할 수도 있습니다.

<html>
<a href="app://deeplink">DeepLink with app scheme</a>
<a href="https://www.deeplinkdemo.com">DeepLink with https scheme</a>
</html>


localhost를 통해 파일에 액세스하거나 장치에 배치하십시오. 링크를 클릭하면 앱이 시작됩니다.


이 시리즈는 React Native Deep Linking Simplified 시리즈의 첫 번째 파트였으며 2 부에서는 앱 실행시 들어오는 링크를 처리하고 사용자를 리디렉션 하는 방법을 배웁니다.





React Native