React Native 애플리케이션에 MobileFirst Foundation SDK 추가

개요

이 학습서에서는 React Native CLI를 사용하여 작성한 신규 또는 기존 React Native 애플리케이션에 MobileFirst SDK를 추가하는 방법에 대해 학습합니다. 또한 애플리케이션을 인식하도록 MobileFirst Server를 구성하는 방법 및 프로젝트에서 변경된 MobileFirst 구성 파일에 대한 정보를 찾는 방법에 대해서도 학습합니다.

MobileFirst React Native SDK는 react native npm 플러그인으로 제공되며 NPM에 등록됩니다.

사용 가능한 플러그인은 다음과 같습니다.

• react-native-ibm-mobilefirst - 핵심 SDK 플러그인

다음으로 이동:

• React Native SDK 컴포넌트
• MobileFirst React Native SDK 추가
• MobileFirst React Native SDK 업데이트
• 생성되는 MobileFirst React Native SDK 아티팩트
• 다음 학습서

React Native SDK 컴포넌트

react-native-ibm-mobilefirst

react-native-ibm-mobilefirst 플러그인은 React Native의 핵심 MobileFirst 플러그인이며 필수입니다. 아직 설치되지 않은 경우 다른 MobileFirst 플러그인을 설치하면 react-native-ibm-mobilefirst 플러그인도 자동으로 설치됩니다.

전제조건:

• 개발자 워크스테이션에 React Native CLI 및 MobileFirst CLI가 설치되어 있습니다.
• MobileFirst Server의 로컬 또는 원격 인스턴스가 실행 중입니다.
• MobileFirst 개발 환경 설정 및 React Native 개발 환경 설정 학습서를 읽으십시오.

Mobile Foundation React Native SDK 추가

아래 지시사항에 따라 신규 또는 기존 React Native 프로젝트에 Mobile Foundation React Native SDK를 추가하고 MobileFirst Server에 등록하십시오.

시작하기 전에 MobileFirst Server가 실행 중인지 확인하십시오.
로컬로 설치된 서버를 사용하는 경우: 명령행 창에서 서버의 폴더로 이동하고 ./run.sh 명령을 실행하십시오.

SDK 추가

새 애플리케이션

1. react-native init projectName 명령을 사용하여 React Native 프로젝트를 작성하십시오.
   예:

   react-native init Hello
   

   • Hello는 폴더 이름이자, 애플리케이션 이름입니다.

   템플리트된 index.js를 통해 추가 MobileFirst 기능(예: 다국어 애플리케이션 변환 및 초기화 옵션)을 사용할 수 있습니다(자세한 정보는 사용자 문서 참조).

2. cd hello 명령을 사용하여 React Native 프로젝트의 루트로 디렉토리를 변경하십시오.

3. NPM CLI 명령 npm install react-native-plugin-name을 사용하여 MobileFirst 플러그인을 추가하십시오. 예:

   npm install react-native-ibm-mobilefirst
   

   위 명령은 React Native 프로젝트에 MobileFirst Core SDK 플러그인을 추가합니다.

4. 다음 명령을 실행하여 플러그인 라이브러리를 링크하십시오.

   react-native link
   

   참고: 이 명령은 react-native 0.60에 필요하지 않습니다.

5. iOS의 경우에는 Mobilefirst Pod 종속 항목을 설치하십시오.

   cd ios && pod install 
   

기존 애플리케이션

1. 기존 React Native 프로젝트의 루트로 이동하고 MobileFirst 핵심 React Native 플러그인을 추가하십시오.

   npm install react-native-ibm-mobilefirst
   

2. 다음 명령을 실행하여 플러그인 라이브러리를 링크하십시오.

   react-native link
   

   참고: 이 명령은 react-native 0.60에 필요하지 않습니다.

3. iOS의 경우에는 Mobilefirst Pod 종속 항목을 설치하십시오.

   cd ios && pod install 
   

애플리케이션 등록

1. 명령행 창을 열고 프로젝트의 특정 플랫폼(iOS 또는 Android)의 루트로 이동하십시오.

2. MobileFirst Server에 애플리케이션을 등록하십시오.

   mfpdev app register
   

• iOS :

  플랫폼이 iOS인 경우 애플리케이션의 BundleID를 제공하도록 요청됩니다. 중요: 번들 ID는 대소문자를 구분합니다.

  mfpdev app register CLI 명령은 먼저 MobileFirst Server에 연결하여 애플리케이션을 등록한 후에 Xcode 프로젝트의 루트에서 mfpclient.plist 파일을 생성하고 MobileFirst Server를 식별하는 메타데이터에 추가합니다.

• Android :

  플랫폼이 Android인 경우 애플리케이션의 패키지 이름을 제공하도록 요청됩니다. 중요: 패키지 이름은 대소문자를 구분합니다.

  mfpdev app register CLI 명령은 먼저 MobileFirst Server에 연결하여 애플리케이션을 등록한 후에 Android Studio 프로젝트의 [project root]/app/src/main/assets/ 폴더에 mfpclient.properties 파일을 생성하고 MobileFirst Server를 식별하는 메타데이터에 추가합니다.

원격 서버를 사용하는 경우 mfpdev server add 명령을 사용하여 이를 추가하십시오.

mfpdev app register CLI 명령은 먼저 MobileFirst Server에 연결하여 애플리케이션을 등록합니다. 각 플랫폼은 MobileFirst Server에 애플리케이션으로 등록됩니다.

팁: MobileFirst Operations Console에서 애플리케이션을 등록할 수도 있습니다.

1. MobileFirst Operations Console을 로드하십시오.
2. 애플리케이션 옆에 있는 새로 작성 단추를 클릭하여 새 애플리케이션을 등록하고 화면의 지시사항에 따르십시오.

MobileFirst React Native SDK 업데이트

최신 릴리스로 MobileFirst React Native SDK를 업데이트하려면 npm uninstall react-native-ibm-mobilefirst 명령을 실행하여 react-native-ibm-mobilefirst 플러그인을 제거한 후에 npm install react-native-ibm-mobilefirst 명령을 실행하여 이를 다시 추가하십시오.

SDK 릴리스는 SDK의 NPM 저장소에 있습니다.

생성되는 MobileFirst React Native SDK 아티팩트

Android 환경

mfpclient.properties

이 파일은 Android Studio 프로젝트의 ./app/src/main/assets/ 폴더에 있으며, MobileFirst Server에서 Android 앱을 등록하는 데 사용되는 클라이언트 측 특성을 정의합니다.

iOS 환경

mfpclient.plist

이 파일은 프로젝트의 루트에 있으며 MobileFirst Server에서 iOS 앱을 등록하는 데 사용되는 클라이언트 측 특성을 정의합니다.

다음 학습서

이제 MobileFirst React Native SDK가 통합되었으므로 다음을 수행할 수 있습니다.

• Mobile Foundation SDK 사용 학습서 검토
• 어댑터 개발 학습서 검토
• 인증 및 보안 학습서 검토
• 알림 학습서 검토
• 모든 학습서 검토