React Native 푸시 설정

 

 

1. 프로젝트 생성

1.1 프로젝트 생성

react-native init ElcantoDeepp –package=com.elcanto.deepp

 

1.2 프로젝트 실행

1) 안드로이드

cd ElcantoDeepp

react-native run-android

 

2) IOS

cd ElcantoDeepp

react-native run-ios

 

1.3 Vscode에서 프로젝트 열기

 

파일 > 열기.. 선택후 해당 디렉토리인 ElcantoDeepp폴더를 선택

 

 

1.4 Webview 컨트롤 추가

Vscode의 터미널에서 아래 명령으로 webview 컨트롤을 추가한다.

npm install –save react-native-webview

2. 관련 API 설정

2.1 파이어베이스

가. 파이어베이스 로그인

https://console.firebase.google.com/

나. 프로젝트 생성

프로젝트명 : DEEPP

 

다. Android 앱 추가

1) 아래 아이콘에서 안드로이드 아이콘 클릭

2) 앱등록

3) 설정파일 다운로드

google-service.json파일 다운로드하여 React-Native 프로젝트의 android/app밑에 추가한다.

 

4) 프로젝트에 설정파일 추가

5) 안드로이드앱에 파이어베이스 설정 추가

Vscode를 열어 React Native 프로젝트에서 다음과 같이 추가한다.

– android/build.gradle 수정

classpath ‘com.google.gms:google-services:4.3.8’ 추가

 

–   android/app/build.gradle 파일 수정

apply plugin: ‘com.google.gms.google-services’ 추가

 

Dependencies에 implementation”com.google.firebase:firebase-core:19.0.0″ 추가

 

라. IOS앱 추가

1) iOS 아이콘을 클릭하여 앱 추가

 

2) 앱등록

IOS 번들 ID : kr.co.deepp.app으로 등록

위 화면에서 IOS번들
ID는Xcode로 프로젝트를 열었을 때 나오는 Bundle Identifier와 동일해야 한다.

3) 설정파일 다운로드

 

4) 프로젝트에 설정파일 추가

ElcantoDeep/ios/ElcantoDeepp에 GoogleService-info.plist 파일복사

 

XCode의 info.plist와 동일한 위치로 GoogleService-info.plist 드래그앤드랍으로 끌어서 추가한다.

 

 

5) Podfile 수정

ElcantoDeep/ios/Podfile을 열어 “pod ‘Firebase/Analytics’” 추가

 

6) POD로 종속파일 설치

pod install

 

간혹 에러가 나는경우가 있는데 Podfile.lock 파일과 Pods 폴더를 지우고 다시 하면 된다.

 

7) AppDelegate.m 파일에 Firebase설정 추가

 

–   헤더추가

#import<Firebase.h>

 

–   Filebase 설정추가

[FIRApp configure]

 

2.2 APN(Apple Push Notificatation) 구성 및 파이어베이스연동

IOS는 푸시를 보내기 위해서는 파이어베이스에서 APN을 연동해야 한다. 따라서 다음과 같은 절차에 의해 APN을 구성한다.

가. 인증서 발급

1) Launchpad > 기타 선택

2) 키체인 접근 클릭

 

3) 인증기관에서 인증서 요청

“키체인 접근 >인증서 지원 > 인증 기관에서 인증서 요청…” 클릭

4) 인증서 생성

–   “디스크에 저장됨”을 선택

–   “본인이 키 쌍 정보 지정”을 체크


–   계속을 눌러 인증서를 저장할 폴더를 지정하고 인증서 생성

 

나. 인증서 생성

1) 애플 개발자 사이트(https://developer.apple.com )로그인

 

2) Certificates, IDs & Profiles 메뉴 선택

 

3) Keys 메뉴 클릭하여 키 등록화면으로 이동

Keys + 버튼을 클릭하여 키 등록

 

–   Key Name : Elcanto Deepp Push Notification Key

–   Apple Push Notification service(APNs) 체크

4) 키 등록

“Register”버튼을 이용하여 키 등록

5) 키파일 다운로드

키파일은 나중에 파이어베이스에서 푸시를 보낼 때
사용되므로 안전한 장소에 보관해놓는것이 좋다.또한 아래 Key ID도
파이어베이스에서 등록할 때 입력해야하므로 기록기 놓는 것이 좋다.

 

키파일은 아래 경고처럼 두 번 다시 다운로드를 받을 수 없으므로 잘 보관해야함.

 

다. 앱ID 등록

1) Identifiers 메뉴에서 + 버튼을 클릭

2) App IDs 선택

3) App를 선택

4) App ID 등록

–   Description : Elcanto Deepp

–   Bundle ID : kr.co.deepp.app (참고: kr.co.deep로 할려고 하였으나, App ID로 활용할수 없다고 나와 kr.co.deepp.app로 함)

–   Push Notifications을 체크

 

 

5) 등록처리

Register버튼 클릭

 

6) Push Notifications 설정

위에서 등록한 App
ID를 클릭하여 들어가면 아래와 같이 Push Notifications 에 “Configure” 버튼이 활성화 되어 있는 것을 볼수 있다. 버튼을 클릭하면 인증서를
등록할수 있는 팝업이 나타난다.

7) 인증서 등록

아래 화면에서 Development
SSL Certificate(개발용)과 , Production
SSL Certificate(프러덕션용) 둘다 인증서를 등록하면 된다.

 

방법은 둘다 동일하게 아래처럼 진행하면 된다.

–   “Create Certificate” 버튼을 클릭

Choose File에 위에서 등록한 인증서 파일 인

CertificateSigningRequest.certSigningRequest 파일을 선택하여 등록

–   다시
App ID 등록화면의 Configure 버튼을 클릭하여 동일하게 인증서 등록을 진행하면 된다.

–   최종적으로
아래 화면처럼 Certificates(2)가 되도록 한다.

 

 

라. 파이어베이스 연동

위에서 설정한 파이어베이스를 IOS와 연동한다.

1) iOS 아이콘 클릭

2) 프로젝트 설정 > 클라우드 메시징 화면으로 이동

 

3) APN 인증키 업로드

애플개발자 사이트에서 등록한 .p8 형식의 APN 키 파일 및 키 ID를 등록한다.

키 ID는
아래와 같이 Keys 항목에서 찾으면 되고, TeamID는 Membership메뉴를 클릭하면 확인할수 있다.

업로드중 아래와 같이 “이 앱에 저장된 팀가 없습니다.”라고 나오는경우에는 한번더 업로드 버튼을 클릭하면
등록된다.

업로드가 되면 아래와 같이 나타난다.

 

마. XCode 설정

Capabilities 설정

1) Signing & Capabilities 클릭

2) “+ Capability
” 클릭

3) Push Notifications를 선택하여 추가

 

4) Background Modes 를 선택하여 추가

5) Background Modes에서 Remote notifications 를
체크

 

 

 

3.  React Native 설정

3.1 WebView

 

3.2 푸시

가. 라이브러리 설치

npm install –save @react-native-firebase/app

npm install –save @react-native-firebase/messaging

npm install –save react-native-push-notification

npm install –save @react-native-community/push-notification-ios

 

나. 푸시관련 코딩

내용이 많아 생략, 소스를 참조

 

다. 테스트 메시지 전송

파이어베이스 콘솔에서  참여 > Cloud Messaging을 클릭한후 “Send your first message” 버튼을 클릭

  제목과
내용을 입력한후 “테스트 메시지 전송” 버튼을 클릭

React Native에서 Fcm 서비스를 등록하면 token이 리턴되는데 콘솔에 찍어있는 토큰을 복사하여 등록

 

 

  React Native 콘솔에 찍힌 수신된 메시지

 

react native 버전업시 발생하는 트러블슈팅

스마트폰 SDK가 최신버전으로 업그레이드시 npm 을 통해 받은 node_modules들이 예전에 작성하고 업데이트가 안되어 있는 경우 아래처럼 직접
수정해야 하는경우가 발생하여 간단히 정리해봄.

1. 타이머(react-native-background-timer)
1) 위치

node_modules\react-native-background-timer\android\src\main\java\com\ocetnik\timer\

2) 에러내용
Error: Tag name should use a unique prefix followed by a colon …
3) 수정사항

this.wakeLock = powerManager.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "rohit_bg_wakelock");

에서

this.wakeLock = powerManager.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, " ocetnik:rohit_bg_wakelock");

로 수정

2. 비콘(react-native-beacons-manager)
1) 위치

node_modules\react-native-beacons-manager\android\build.gradle

2) 에러내용
Error: Google Play requires that apps target API level 26 or higher.

3) 수정사항
컴파일버전, 타겟버전 26(최소버전)으로 수정

compileSdkVersion 26
targetSdkVersion 26
compile 'com.facebook.react:react-native:0.12.+'

을 아래와 같이 수정

compile "com.facebook.react:react-native:+"

3. 오리엔테이션(react-native-orientation)
1) 위치

node_modules\react-native-orientation\android\build.gradle:9: 

2) 에러내용
Error: Google Play requires that apps target API level 26 or higher.

3) 수정사항

   [ExpiredTargetSdkVersion]
      targetSdkVersion 22

커파일버전, 타겟버전 28(최소버전)으로 수정

compileSdkVersion 28
targetSdkVersion 28

4. 폰 깨우는기능(react-native-wakeful)
1) 위치
node_modules\react-native-wakeful\android\src\main\java\com\ironsmile\RNWakeful\RNWakefulModule.java:25:

2) 에러내용
Error: Tag name should use a unique prefix followed by a colon (found RNWakeful). For instance myapp:mywakelocktag. This will help with debugging [InvalidWakeLockTag]

3) 수정사항

this.wakeLock = pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "RNWakeful");
…
this.wifiLock = wm.createWifiLock(WifiManager.WIFI_MODE_FULL, "RNWakefulWifi");

에서

this.wakeLock = pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "ironsmile:RNWakeful");
…
this.wifiLock = wm.createWifiLock(WifiManager.WIFI_MODE_FULL, "ironsmile:RNWakefulWifi");

로 수정

5. 폰 깨우는기능(react-native-wakeful) Gradle에러
1) 위치
node_modules\react-native-wakeful\android\build.gradle

2) 에러내용
Error: Google Play requires that apps target API level 26 or higher.

3) 수정사항

   [ExpiredTargetSdkVersion]
      targetSdkVersion 23
      ~~~~~~~~~~~~~~~~~~~

커파일버전, 타겟버전 26으로 수정

compileSdkVersion 28
targetSdkVersion 28
compile 'com.facebook.react:react-native:0.12.+'

을 아래와 같이 수정

compile "com.facebook.react:react-native:+"

6. 폰 깨우는기능(react-native-wakeful) React Native Plugin 에러
1) 위치
node_modules\react-native-wakeful\android\src\main\java\com\ironsmile\RNWakeful\RNWakefulPackage.java

2) 에러내용

3) 수정사항

@Override
public List> createJSModules() {
    return Collections.emptyList();
  }

에서 @Override 를 주석처리

// @Override
public List> createJSModules() {
    return Collections.emptyList();
  }

7. 메트로 관련(blacklist.js)
이 항목은 react-native를 먼저 업데이트 하면 안나오지만, 업데이트 안한경우 아래처럼 수정해서 해결
1) 위치
node_modules\metro-config\src\defaults\blacklist.js

2) 수정사항

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

에서

var sharedBlacklist = [ /node_modules[\/\\]react[\/\\]dist[\/\\].*/, /website\/node_modules\/.*/, /heapCapture\/bundle\.js/, /.*\/__tests__\/.*/ ];

로 수정

8. 디바이스정보
React-native-device-info는 최신버전이 나와 있어 업데이트 하면 되지만 업데이트를 안할경우 아래를 수정
1) 위치
node_modules\react-native-device-info\android\src\main\java\com\learnium\RNDeviceInfo\RNDeviceModule.java:270:

2) 에러내용
Error: Exception requires API level 21 (current min is 16): android.hardware.camera2.CameraAccessException, and having a surrounding/preceding version check does not help since prior to API level 19, just loading the class will cause a crash. Consider marking the surrounding class with RequiresApi(19) to ensure that the class is never loaded except when on API 19 or higher. [NewApi] } catch (CameraAccessException e) {
~~~~~~~~~~~~~~~~~~~~~

3) 수정사항
“react-native-device-info”: “^2.3.2” 를 제거하고

npm uninstall react-native-device-info

최신버전 설치(5.5.4 버전으로 체인지)

npm install react-native-device-info --save

9. build.Gradle 환경
1) 수정사항
컴파일오류로 인하여 아래처러 수정

플레이서비스와 Firebase의 버전이 동일해야 하므로 동일하게 맞춤

implementation "com.google.android.gms:play-services-location:17.0.0"
implementation "com.google.android.gms:play-services-base:16.1.0"
implementation "com.google.firebase:firebase-core:16.0.9"

implementation "com.google.android.gms:play-services-location:17.0.0"
implementation "com.google.android.gms:play-services-base:17.0.0"
implementation "com.google.firebase:firebase-core:17.0.0"

로 수정

10. react-native 최신버전 업데이트
1) 에러내용
아래 에러로 인하여 업데이트 처리

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
  - react-native-device-info (to unlink run: "react-native unlink react-native-device-info")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, 
you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. 
If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.

2) 수정사항
– 캐시 클린

npm cache clean --force

– react-native 버전 0.60.4을 제거

npm uninstall react-native

– 신버전 설치(0.62.0)

npm install react-native --save

11. async-storage 최신버전 업데이트
1) 에러내용
메소드 사용방법변경으로 오류

2) 수정사항
신버전 업데이트

– 제거

npm uninstall @react-native-community/async-storage

– 신버전설치(1.8.1)

npm install @react-native-community/async-storage –save

12. react-native 업데이트후 앱 크래쉬 나온경우
1) 에러내용

2020-04-01 15:06:38.177 12257-12285/? E/AndroidRuntime: FATAL EXCEPTION: create_react_context
    Process: kr.co.transhub, PID: 12257
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libfbjni.so caused by: Didn't find class "com.facebook.jni.NativeRunnable" on path: DexPathList[[zip file "/data/app/kr.co.transhub-VszmjqWt0xirxB8bmxGG2A==/base.apk"],nativeLibraryDirectories=[/data/app/kr.co.transhub-VszmjqWt0xirxB8bmxGG2A==/lib/arm64, /data/app/kr.co.transhub-VszmjqWt0xirxB8bmxGG2A==/base.apk!/lib/arm64-v8a, /system/lib64]]
        at com.facebook.soloader.SoLoader.a(Unknown Source:325)
        at com.facebook.soloader.SoLoader.a(Unknown Source:104)
        at com.facebook.soloader.SoLoader.a(Unknown Source:108)
        at com.facebook.soloader.SoLoader.a(Unknown Source:1)
        at com.facebook.soloader.j.a(Unknown Source:0)
        at com.facebook.soloader.o.a.a(Unknown Source:10)
        at com.facebook.jni.HybridData.(Unknown Source:2)
        at com.facebook.react.bridge.WritableNativeMap.initHybrid(Native Method)
        at com.facebook.react.bridge.WritableNativeMap.(Unknown Source:0)
        at com.facebook.react.jscexecutor.a.create(Unknown Source:2)
        at d.b.m.r$e.run(Unknown Source:58)
        at java.lang.Thread.run(Thread.java:764)

2) 수정사항
proguard-rules.pro파일의 하단에 아래를 추가

-keep class com.facebook.jni.** { *; }

– 참고: https://stackoverflow.com/questions/60927048/react-native-app-release-build-crashes-on-start-works-fine-in-debug-why

node.js 서버와 react native 클라이언트 간의 암호화 정리

1. React Native
1) react-native-crypto-js 추가

 npm install react-native-crypto-js --save

2) 사용방법
전화번호를 비밀키를 이용하여 암호화한다.

import CryptoJS from "react-native-crypto-js";

let strPhoneNo = "01012345678";
let strSecretKey ="1234";
let strEncrypt = CryptoJS.AES.encrypt(strPhoneNo , strSecretKey).toString();

3) 전송
위의 strEncrypt를 이용하여 Node.js 서버로 전송

2. node.js 서버
1) crypto-js 추가

 npm install crypto-js --save

2) 사용방법
수신된 전화번호를 비밀키를 가지고 복화화한다.

let strPhoneNo = "01012345678"; // 수신받은 전화번호
let strSecretKey = "1234";
var strEncrypt = CryptoJS.AES.encrypt(strPhoneNo , strSecretKey);
console.log(" -Encrypt:"+ strEncrypt);

mac에 cordova(PhoneGap)을 이용한 IOS용 간단한 inapp brower 만들기

1. cordova(PhoneGap)을 이용하기 위해서는 nodejs를 설치해야된다.
https://nodejs.org 에 접속하여 최신 nodejs를 설치한다.

2. nodejs를 이용하여 cordova를 설치한다
mac에서 터미널을 이용 다음을 입력하여 cordova를 설치한다

sudo npm install -g cordova

3. mac에서 작업할 폴더위치를 생성한다 임시로 workspace로 정함

4.mac터미널에서 해당 작업폴더로 이동한 후, cordova를 이용하여 신규프로젝트를
생성한다. com.moramcnt.mosaicadm라는 ID의 mosaicadm라는 프로젝트 생성

cordova create mosaicadm com.moramcnt.mosaicadm "MosaicAdmin"

5. xcode용 프로젝트 자동생성을 위하여 platform 명령을 사용하여 생성한다.
생성된 디렉토리로 이동하여 터미널로 다음을 입력한다.

cordova platform add ios

6. in app 브라우저를 위해서 플러그인을 설치한다.
기본적으로 특정외부 url로 이동하게 되면 ios에서는 safari브라우저를 이용하여 이동하게 된다.
이를 생성된 앱안에서 이동하게끔 하려면 inappbrowser 플러그인을 설치해야된다.
생성된 디렉토리로 이동하여 터미널로 다음을 입력한다.

cordova plugin add cordova-plugin-inappbrowser

7. app가동시 특정 url로 바로 접속하기 위해서 index.html파일을 변경한다.
생성된 디렉토리의 www/index.html 파일이 있다 이를 변경한다.
해당 url은 네이버 모바일 홈으로 임시 지정한다.

<!DOCTYPE html>
<html>
  <head>
    <title>moram admin</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        // external url
        var ref = window.open(encodeURI('http://m.naver.com'), '_blank', 'location=no,toolbar=no');
    }
    </script>
  </head>
  <body>
  </body>
</html>

8. 아이콘및 앱 가동시 초기로딩 화면(splash) 파일을변경한다.
초기 디폴트 아이콘은 cordova로 지정된 디폴트 아이콘밖에 없다 이를 변경하기 위하여 다음을 처리한다.
8-1. imagemagick을 설치한다.
변경을 위해서는 imagemagick 라는 프로그램이 필요로 한데.
home-brew라는 프로그램이 필요하다 이를 먼저설치힌다.
터미널을 이용하여 다음을 입력한다.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

imagemagick을 설치한다.

brew install ghostscript imagemagick

8-2. 아이콘 자동배포및 splash의 자동배포를 위해서는 cordova-icon, cordova-splash nodejs를 통하여
각각 설치힌다. 터미널을 통하여 다음을 입력한다.

npm install -g cordova-icon cordova-splash

8-3. 변경할 아이콘 및 초기로딩 파일을 프로젝트 루트에 등록
생성된 디렉토리로 이동후 지정할 아이콘및 splash파일은 png 파일 중 싸이즈가 가장 큰 파일을
icon.png, splash.png로 각각 이름을 변경하여 등록한다.

8-4. cordova-icon cordova-splash를 실행하여 각각 필요한 싸이즈에 맞는 이미지를 자동등록 한다.
생성된 디렉토리로 이동후 cordova의 명령어를 이용하여 cordova-splash, cordova-icon 을 입력한다.

cordova-splash
cordova-icon

9. ios프로젝트에 신규변경된 항목들을 적용한다.
index.html파일이나 config.xml파일 및 이미지들이 변경될 경우, 해당 데이터를 적용시키기 위하여
다음과 같은 명령을 입력한다.
생성된 디렉토리로 이동후 cordova명령어를 입력한다.

cordova prepare ios

10. 생성된 프로젝트로 이동하여 xcode로 프로젝트를 로드한다.
해당 platform 폴더로 이동하여 프로젝트를 더블클릭한다.

11. xcode 프로젝트에서 특정폰에 빌드하기 위해서 Singnig정보를 설정한다.
설정할 Singnig 파일이 없을경우 생성은 다른 구글링을 통하여 알아본다.

12. xcode에서 컴파일 하여 확인 한다.

Android SDK Update 시 Eclipse Android S/W 대체 방법

Android SDK 에서 Tool 을 Update 한 뒤에 이클립스를 재시작시 

Android S/W 23.0.0 이상의 버전 또는 그 이상의 버전을 설치요구와 업데이트 확인을 요하는 경고 문구가 나오는 경우

 

이클립스

Help > Install New Software.. 메뉴로 이동하여

우측 하단에 already Installed 를 클릭하여 이미 설치된 S/W를 확인한다.

 

-Android DDMS

-Android Development Tools

-Android Hierarchy Viewer

-Android Native Development Tools

-Android Traceview

-Tracaer for OpenGL ES

 

위 6개의 항목을 선택한 뒤 Uninstall.. 해준다.

 

————————————————————————————————————–

이클립스 재시작이 완료되면

Help > Install New Software.. 메뉴로 이동하고

우측 상단에 Add 버튼을 클릭하고

Name : Android

Location : https://dl-ssl.google.com/android/eclipse/

위 내용을 입력하고

모든 항목을 설치한다.