포스트
소개
이력서
ReactNativeTypeScriptCocoapodsArduinoIOT

방 불을 껐다 켜주는 앱을 만들어보았다.

2021.02.27


Arduino 모듈 개발

Arduino - Bluetooth, Relay 모듈을 사용해서 스마트폰과의 블루투스 통신으로 전등을 껐다 키는 장치를 만들었다.

#include <SoftwareSerial.h>

int state=0;
int Tx=2;
int Rx=3;
SoftwareSerial bt(Tx,Rx);
int relaypin =8;

void setup() {
  Serial.begin(9600);
  bt.begin(9600);
  pinMode(relaypin, OUTPUT);
}

void loop() {
  while(bt.available()) {
    state=(int)bt.read();
    Serial.println(state);
    if(state==48) {
      Serial.println("on!!");
      digitalWrite(relaypin, HIGH);
    }
    else if(state==49) {
      Serial.println("off!!");
      digitalWrite(relaypin, LOW);
    }
    delay(15);
  }
  if(state!=0) {
    state=0;
  }
}

단순히 0, 1 데이터를 전송하면서 전기신호를 줬다 안 줬다 하는 시스템이다.

 

React Native Project 초기화를 위한 여정

sudo gem install cocoapods
pod --version // 1.10.1
npm --version // 6.14.8
npx react-native init ble --template react-native-template-typescript

npx react-native run-ios

 

아래와 같은 오류가 발생한다.

The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.2.99. (in target 'Flipper-Glog' from project 'Pods')
  • xcode로 ble.xcodeworkspace을 열고, deploy target version 9.0 으로 직접 변경
    • Pods - Targets 에서 deployment version 9.0 밑에있는 애들을 다 10.0 으로 올려주었다.

하지만 계속 오류가 난다.

 

  • 무언가 변경할 때마다 pod을 지우고 다시 설치하는 과정을 반복했다.
cd ios
rm -rf pods
pod install

 

  • 계속 되지 않았고... typescript 없이 그냥 하면 어떨까 하는 생각이 었다.

    https://reactnative.dev/docs/typescript

    ''타입스크립트 설정은 나중에 하지 뭐. 어차피 엄청 간단한 설정이니까."

 

  • "내 핸드폰에서 돌려보면 되려나?"
npx react-native init ble
npx react-native run-ios --device

  • xcode 버전이 안 맞단다. app store가서 xcode update

    진행 속도를 보니 엄청난 시간이 걸릴 것 같다. wifi 해제하고 LAN 케이블을 연결했다. 99Mbps 속도가 나온다.

    한 2시간 정도 업데이트만 한 것 같다.

 

하지만 계속 오류가 난다.

 

  • Podfile 내용 일부를 수정하였다.
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
    end
  end
end

  • XCode workspace Team 등록이 되어있지않아 내 계정으로 로그인했다.

  • Podfile 내용에서 platform :ios, '14.4' 변경해보았다. (쓸모없는 짓이었다.)

 

버전을 다시한번 확인해보았다.

  • npx version 체크는... 할 필요 없다..
npx react-native --version # 4.14.0
node --version # 10.16.3
  • 일단 node version이 LTS가 아닌지 오래되었다는 것을 발견하고 업데이트 했다.

 

  • 프로젝트 폴더를 완전히 지우고 다시 생성해보았다.
npx react-native init ble --template react-native-template-typescript

  • 여전히 되지 않았지만....

  • 이 글에서의 방법으로 조치하여 일단... Simulator로 프로젝트를 띄울 수 있었다.

 

Bluetooth 패키지 선정 과정

react-native-ble-plx / react-native-ble-manager 둘 중 뭐를 사용할까 하다가, 단순히 google 검색순위 상위에 있는 전자를 먼저 시도해봤다.

 

React-Native-BLE-PLX

npm install --save react-native-ble-plx
npx react-native link react-native-ble-plx
cd ios && pod update

  • Bluetooth 기기 목록을 띄우는것이 Mac Simulator 에서 안 된다.

  • 핸드폰으로 앱을 띄워서 테스트해야한다.

    • xcode에서 Team에 개인 팀을 지정해주고,
    • bundle identifier가 unique 하지 않다고 불평하길래, org.reactjs.native.example.ble -> org.reactjs.native.lee.ble 그냥 이렇게 바꿔주었다.

  • 개발을 계속 하다보니, 블루투스 모듈만 가져오려고 하면 계속 앱이 팅긴다.

  • 몇번 더 시도하다, 해당 라이브러리는 Unlink 하고 다른 library로 옮겨갔다.

 

React-Native-BLE-Manager

React-Native에서 수동으로 link하면 불평을 하는데, 이 라이브러리는 auto link가 implement 되어있다.

추가적으로 설정해줘야할 것은 React-Native-BLE-PLX 와 마찬가지로 Info.plist 에서 NSBluetoothAlwaysUsageDescription key를 추가하고, 값은 string으로 해주는 것이다. (빈 string 가능)

# ...
 <key>NSBluetoothAlwaysUsageDescription</key>
  <string></string>
</dict>
</plist>

 

이 라이브러리로는 개발이 수월하게 진행되었고, 내 방에서만 사용할 앱이기에 블루투스 모듈에 관한 값을 직접 constant로 입력해놓았다.

Peripheral_ID : 779F20CE-B9C2-F2E6-577F-2347A93055E9
Service_ID : FFE0
Characteristic_ID : FFE1

 

app icon

10초만에 만든 아이콘도 집어넣고... release 모드로 내 핸드폰에 배포하여 사용중이다.

npx react-native run-ios --configuration Release --device "이성빈의 iPhone"

 

 

코드 보러가기