[철학과 개발] #15 Firebase 프로젝트 생성

P & D

Research and Development가 아니라 Philosophy and Development의 P & D 입니다. 개발글에 있어서 새로운 시도를 하고 있습니다. 그저 개발기를 적어 내려가는 것이 아니라, 어떤 철학을 가지고 개발을 해나가고 있는지, 어떤 시도를 했는지, 개발은 어떻게 하는지를 적어 내려갑니다. 이번 시리즈는 도움을 주고 받는 방법 - 이타인클럽의 철학과 개발 과정을 다룰 것입니다.

이전글 - [철학과 개발] #14 실시간 도움 주고 받기 프로젝트 생성

철학: 있는 것을 최대한 활용하자

앱을 만들려고 보면, 서버가 필요한 경우가 많습니다. 예를 들어 앱 사용자들에게 메시지를 보낸다고 해보죠. 먼저 사용자들의 정보를 저장할 데이터베이스가 필요합니다. 그다음으로, 사용자들 데이터베이스를 읽어서 메시지를 보내는 함수가 필요합니다.

이것들은 앱이 돌아가는 디바이스에서 구현될 수가 없는 부분입니다. 즉, 서버가 필요한데, 서버를 구축할 것이냐 아니면 뭔가 다른 방법을 찾아볼 것이냐 생각해 봐야 합니다.

요즘은 서버를 구축하는 방법도 매우 다양하고, 여러 업체에서 클라우드 서버도 제공하고 있습니다. 서버를 만들기 쉬운 환경임에는 틀림없습니다. 그렇다고 하더라도 클라우드 서버에 자신에게 필요한 데이터베이스, 메시징 서비스 등 필요한 것을 직접 또는 간접적으로 설치해야 하는 부담이 있습니다.

그럼 서버없이 위와 같은 서비스를 제공할 수 있는 것이 있을까요? 애초에 이와 같은 생각을 하지 않았더라면 클라우드 서버를 구해서 Express와 같은 서버 프로그램을 설치하고, 필요한 기능들을 구축해야만 할 것입니다.

개발: 서버없이 서비스 제공

서버없이 서비스를 제공할 수 있는 것이 있습니다 바로 구글에서 제공하는 Firebase입니다. Firebase는 서버에서 제공해야 하는 대부분의 기능을 쉬운 인터페이스로 제공하고 있습니다. 우리가 직접 서버를 구축할 필요가 없는 것입니다.

Firebase는 모바일 앱 개발에 매우 좋습니다. 홀딱 반해 버렸습니다. Firebase를 택한 보다 중요한 이유는 일정 사용량까지는 비용이 무료입니다. 너무 좋습니다. 아직 helpus 앱 사용자가 100명 조금 넘는 수준이라, 비용 내는 것이 하나도 없습니다. 사용하는 기능은 메시징, 펑션, 데이터베이스, 스토리지, 웹호스팅, in-app messaging 등 너무 너무 많은데도 말이죠!

React Native (RN)앱 개발시 주의점

Firebase를 RN앱에 적용할 때 주의할 것이 있습니다. Firebase에서 RN을 정식으로 지원하지 않고 있기 때문에, 다음 패키지를 사용해야 합니다. 여기서도 버전이 6.x 가 아니라 5.x 입니다. 왜나하면 아직 6.x에서 모든 기능을 지원하지 않기 때문입니다 (2020년 3월 기준)

https://rnfirebase.io/docs/v5.x.x/getting-started

위 패키지를 사용하기 위해서 다음과 같이 패키지를 설치합니다.

$ yarn add react-native-firebase

안드로이드 패키지 이름 변경

React Native 프로젝트를 생성하면 기본 패키지 이름이 com.[프로젝트이름] 입니다. 패키지 이름을 꼭 변경할 필요는 없으나 정식 출시 프로젝트는 변경하는게 좋습니다.
React Native에서 패키지 이름을 변경하는 부분이 좀 번거롭습니다. 아래 내용을 참고하여 변경합니다.

기본 생성하면 패키지가 com.helpus가 된다.
프로젝트 생성 후 패키지 이름을 수동으로 변경한다.
- com.helpus를 검색하여 club.etain.helpus로 모두 변경
- android 소스 폴더으이 com/helpus를 club/etain/helpus로 변경한다. com를 club으로 이름 변경하고, etain폴더를 그 밑에 만들고, 기존의 helpus 폴더를 etain폴더로 드래그 앤 드랍한다.
- 마지막으로 android폴더에서 다음 명령을 실행한다.
  $ ./gradlew clean
- 다음 내용 참고.
  https://stackoverflow.com/questions/37389905/change-package-name-for-android-in-react-native

Firebase 안드로이드 프로젝트 생성

Firebase를 이용하기 위해서는 모바일 플랫폼 별로 프로젝트를 생성해야 합니다. 여기서는 안드로이드 기준으로 설명합니다.
상세한 설명은 생략하겠습니다. 인터넷에 관련 자료가 매우 풍부합니다.
특히 다음 사이트에 스크린샷과 함께 설명이 잘 되어 있습니다.
https://dev-yakuza.github.io/ko/react-native/

Firebase 웹페이지를 방문하고, 가입합니다.
https://firebase.google.com/

프로젝트를 생성할 때, 중요한 점이 React Native로 생성한 안드로이드 프로젝트와 패키지 이름이 일치되어야 합니다.

React Native 안드로이드 소스 파일에서 패키지 이름을 확인합니다.

Android 프로젝트를 선택합니다.

위 화면에서 SHA-1 부부은 지금은 설정하지 않습니다. 나중에 추가로 설정할 것입니다.

다음 단계로 google-services.json 파일을 다운로드 받아서 android/app 폴더에 저장합니다.

!!! 중요: SHA-1 키를 수정하면 다시 google-service.json을 다운로드 받아서 anroid/app 폴더에 저장해야 합니다.

다음으로 Firebase SDK를 설정합니다. 여기에서도 주의해야 합니다.
참고. https://rnfirebase.io/docs/v5.x.x/installation/android

앞에서 말씀드렸듯이 Firebase가 RN앱을 정식으로 지원하지 않아서 위에서 나온대로 하면 안됩니다. 대신에 아래와 같이 패키지 버전을 설정해야 합니다. 아래는 제가 사용하는 모든 패키지가 표시되어 있는데 사용하고자 하는 패키지만 참고하면 됩니다.

// android/app/build.gradle 파일
dependencies {
    implementation project(':react-native-vector-icons')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
    implementation "com.google.android.gms:play-services-base:17.0.0"
    implementation "com.google.firebase:firebase-core:17.0.1"
    implementation "com.google.firebase:firebase-messaging:19.0.0"
    implementation 'me.leolin:ShortcutBadger:1.1.21@aar'
    implementation "com.google.firebase:firebase-auth:17.0.0"
    implementation "com.google.firebase:firebase-firestore:19.0.0"
    implementation "com.google.firebase:firebase-functions:17.0.0"
    implementation "com.google.firebase:firebase-storage:17.0.0"
    implementation 'com.google.firebase:firebase-inappmessaging-display:17.2.0'
//    implementation project(':react-native-geolocation-service')
    implementation('com.crashlytics.sdk.android:crashlytics:2.9.9@aar') {
        transitive = true
    }

다른 부분은 Firebase 페이지에 나온대로 하면 됩니다.

RN 버전이 0.60인 앱에서는 별도의 설정이 필요없습니다. 자동으로 설정됩니다! 0.59 이하의 버전을 사용한다면 설정 방법을 참고하셔서 설정해야 합니다.

도움 주고 받는 앱 helpus

앱 사용자 중 다음과 같은 도움이 가능하 사용자들이 있습니다.

최면 상담, 치료
영어, 일본어 관련 문제
건강 상담, 심리 상담
숙박, 용돈 (미확인)

물론, 저도 명상, 루시드 드림 관련 상담이 가능합니다.

구글 플레이: https://play.google.com/store/apps/details?id=club.etain.helpus
애플 앱 스토어: https://apps.apple.com/us/app/helpus-instant-help-in-town/id1496615309
APK 파일 다운로드설치: https://etain.club/download
소개 영상

사용법

보다 자세한 내용은 홈페이지를 참고해 주세요.
https://etain.club