Copy Coding

전번 글에 Firebase 웹 사이트에서 프로젝트를 생성하고 Android Studio에 연결하는 방법을 알아 보았습니다.  이번에는 Android Studio에서 프로젝트를 진행 하다가 Firebase를 연결 하는 방법을 알아 보려고 합니다.

두가지 방법 모두 결과는 동일한데 수동으로 작업을 하느냐 자동으로 하느냐의 차이만 있습니다.  개인적으로는 두 가지 방법 중 좀더 쉬운 방법은 Assistant를 이용하는 방법 입니다.

먼저 안드로이드 스튜디오에서 프로젝트 하나를 생성 합니다.

Empty Activity를 선택 하고 [Next] 버튼을 클릭 합니다.

프로젝트 명을 적당히 적어 줍니다.

Android Studio 메뉴에서 Tools > Firebase를 선택 합니다.

Firebase 관련 Assistant 창이 나오고 여러가지 접속 방법들이 나오는데 그 중에 Firestore를 선택 하고 확장된 화면에서 [Read and write documents with Cloud Firestore]를 클릭해 줍니다.

그러면 Assistant 팝업 창이 나오는데 Firebase에 연결하는 방법이 순서대로 기술되어 있기 때문에 순서에 맞추어 하나씩 작업을 하면 됩니다.  저는 여기서 2번까지만 진행 합니다.  2번 까지만 진행하면 Android Project와 Firebase의 연결이 완료 되고 바로 프로그램을 진행 할 수 있습니다.

1단계 Connect your app to Firebase

말 그대로 Android Project와 Firebase의 연결 작업을 진행하는 단계 입니다.

[Connect to Firebase]를 클릭 하면 Firebase 사이트 웹 브라우저 창이 뜹니다.

로그인을 안했다면 로그인을 하고 연결 하려는 프로젝트를 선택 합니다.  아니면 프로젝트를 새로 추가해도 됩니다.  저는 기존 CopyCoding 프로젝트를 선택 하였습니다.

Firebase project 콘솔로 넘어가면서 Android app을 생성 합니다. [연결] 버튼을 클릭해서 연결을 진행 합니다.

잠시 작업이 진행 되고 Android Studio Project 와 Firebase가 연결이 되었습니다.

다시 Android Studio로 돌아오면

1단계가 Connected로 변경 되었습니다.

2단계 Add Cloud Firestore to your app

1단계는 Firebase를 연결한 것이고 2단계는 Firestore를 연결하는 것 입니다.

[Add Cloud Firestore to your app] 을 클릭 하면 팝업이 하나 나옵니다.

Android Studio Project에 Firestore를 연결 하기 위해 gradle에 자동으로 소스를 추가 한다고 합니다.  [Accept Changes] 버튼을 클릭 합니다.

2단계도 Dependencies set up correctly로 변경 되었습니다.

좌측 Project 파일에 google-services.json 파일이 추가되어 있습니다.  gradle에도 자동으로 소스를 추가했다고 하는데 확인 들어 갑니다.

build.gradle(Project)

dependencies {
    classpath 'com.android.tools.build:gradle:3.6.3'
    classpath 'com.google.gms:google-services:4.3.3'

    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

build.gradle(Module)

apply plugin: 'com.android.application'

apply plugin: 'com.google.gms.google-services'

dependencies {

    implementation fileTree(dir: 'libs', include: ['*.jar'])



    implementation 'androidx.appcompat:appcompat:1.1.0'

    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

    implementation 'com.google.firebase:firebase-firestore:21.4.3'

    testImplementation 'junit:junit:4.12'

    androidTestImplementation 'androidx.test.ext:junit:1.1.1'

    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

}

필요한 설정들이 모두 자동으로 추가 되었고 Android Studio 와 FIrebase가 연결이 되었습니다.  이제 Firestore Database를 사용하면 됩니다.

- copy coding -

Android app과 Firebase를 연결하는 방법 까지만 테스트 해보려고 합니다. 

먼저 android studio에서 Empty Activity로 앱을 하나 생성 합니다.

Project Name보다는 package name을 잘 기억해 둬야 됩니다.

com.copycoding.firebase 이렇게 미리 복사 해놓고 [Finish] 버튼을 눌러 작업을 진행 합니다.

이제는 웹에서 Firebase에 로그인을 합니다.

연결 하려는 프로젝트를 선택 하고 console로 이동 합니다.

[+앱 추가]를 선택 해서 확장 합니다.

추가할 플랫폼이 확장 되는데 여기에서 안드로이드 아이콘을 클릭 합니다.

Android studio에서 앱을 생성할 때 복사해둔 Package name을 적어주고 닉네입도 입력 합니다.  [앱 등록] 버튼을 클릭해서 2단계로 넘어 갑니다.

구성 파일 다운로드에서 [google-service.json 다운로드]를 클릭하면 파일이 하나 다운로드 되는데 앱에서 firebase에 연결하는데 사용되는 id와 key 정보가 들어 있습니다.

다운받은 파일을 그림에서 처럼 android studio에 붙여넣기를 해주고 [다음] 버튼을 클릭 합니다.

안드로이드에 추가한 모습입니다.

3단계 Firebase SDK 추가에서는 Firebase를 사용하는데 필요한 내용을 gradle에 추가하는 방법을안내 합니다.

gradle에 이미 있는 내용도 있고 추가 해야할 내용도 있습니다. 직접 손으로 입력하는게 아니고 우측 복사 아이콘을 클릭하여 소스에 붙여넣기를 하면 됩니다.

2개의 gradle에 그림처럼 소스에 추가를 했다면 안드로이드 스튜디오 우측 상단에 나타나는 [Sync now]를 클릭해 줍니다.

잠시 후 안드로이드 스튜디오의 씽크가 종료되면 [다음] 버튼을 클릭 합니다.

4단계에서 앱과 Firebase가 연결 되었다는 내용을 볼 수 있습니다.  4단계에서 “수고하셨습니다.”라는 내용이 나오지 않고 계속 맴도는 경우가 있습니다.  그럼 저는 안드로이드 프로젝트를 다시 만들어 샤용 합니다.  아직 코딩을 시작하기 전이니 가능 한 방법이죠.

- copy coding -

Firebase의 기능 중 데이터베이스에 데이터를 밀어넣는 작업을 하려고 합니다.  몇개 되지 않으면 수작업으로 하면 되는데 데이터의 양이 많을 경우에는 하나씩 입력 한다는 건 불가능 하죠.  우리가 지금까지 사용해 오던 oracle이나 mysql 등 처럼 한번에 밀어 넣는 방법이 있으면 좋을 텐데 아직은 좀 귀찮은 작업들이 필요 합니다.  언젠가는 좋은 기능들이 추가되겠죠.

작업 순서

1. json 데이터 생성

2. node.js 준비

3. Firebase 설정

4. account key

5. import.js

6. 데이터 입력

엑셀자료와 csv 데이터도 실제로는 json 형태로 변경을 해야 입력이 가능 합니다.  결론적으론 json 형태로 파일을 만들어 입력 하는 방법을 알아 보려고 합니다.

1. json 데이터 생성

다음과 같은 엑셀 자료가 있고 firestore에 입력 하기위해 json 형태로 변형을 해야 합니다.

먼저 엑셀을 다음과 같이 csv로 저장 합니다.

메모장으로 열어보면 쉼표로 데이터들이 구분이 되어 있는데 이걸 복사해서 인터넷에서 온라인으로 csv를 json으로 변환해주는 사이트를 이용해 변형을 합니다.

변환된 데이터를 확장자가 json으로 해서 저장을 합니다.  저는 member.json으로 저장 했습니다.

붉은색 부분은 firestore의 collection을 member로 생성을 해서 그곳에 입력을 하기 위해 추가를 했습니다.

2. node.js 준비

npm 명령을 사용해야 하기 때문에 먼저 node.js가 설치되어 있어야 합니다.  node.js가 설치되어 있다면 먼저 초기화를 위해

>npm init

명령을 사용 합니다.  그리고 추가 입력 부분은 그냥 엔터로 넘어가도 됩니다.

그리고 제일 중요한 firestore 관련 패키지를 설치 합니다.

>npm install firestore-export-import

명령이 실행되고 아무것도 없던 폴더에 생성된 파일을 보면

이런 식으로 폴더에 파일들이 생성 되었습니다.

3. Firebase 설정

이제 firestore에 접속하기 위한 환경 변수들을 생성해야 합니다.  firebase에 접속해서 프로젝트를 선택 합니다.

여기서 [+앱 추가]를 선택 하고

확장된 아이콘들에서 </>를 선택하여 웹 앱을 추가 합니다.

웹 앱을 만들기 위해 이름을 적당히 입력하고 [앱 등록] 버튼을 클릭 합니다.

웹 앱에 접속하기 위한 설정 값들이 보이는 군요.  복사를 해서 옮겨 놓습니다.

여기에서 var firebaseConfig = {...} 이 부분을 이용해서

config.js 파일을 생성 합니다.

4. Service Account Key 생성

데이터베이스에 접근하기 위한 공개키를 생성하는 단계 입니다.  아무나 와서 디비를 헤집고 다니지 못하도록 하는 키를 생성하는 단계 입니다.  [서비스 계정] 탭을 선택하면 됩니다.

지금 node.js 를 사용하려는 거니 라디오 버튼을 확인 하고 [새 비공개 키 생성] 버튼을 클릭 합니다.

키를 잘 보관하라는 안내가 나옵니다.  [키 생성] 버튼을 클릭 합니다.

[확인] 버튼을 이용해서 키를 저장 합니다.  파일명은 대충 copycoding-bca04-firebase-adminsdk-vdj8s-4728099cc6.json 이렇게 저장 됩니다.

생각보다 키의 내용이 긴데 대충 잘랐습니다.  그리고 serviceAccount.json 이름으로 저장을 했습니다.

5. import.js 작성

firestore에 입력할 데이터와 설정 파일, 키 파일이 준비가 되었으니 실제 데이터를 추가하는 프로그램을 생성 합니다. 물론 파일명은 자유롭게 해서 생성하면 됩니다.

위에서 생성한 3개의 파일이 사용됩니다.  최종적인 폴더 내 파일들의 모습입니다.

이렇게 파일 작업이 완료 되었습니다.

5. 데이터 입력

마지막으로 작성한 import.js 를 실행해 줍니다.

>node import.js

upload가 성공했다고 하는데 진짜인지 함 확인해 봅니다.

예.  데이터들이 잘 입력 되었습니다.

- copy coding -

구글 Firebase는 데이터를 저장 하는데 데이터베이스로 사용하기도 하고 파일 형태의 데이터를 저장하고 사용할 수 도 있습니다. 이번에는 firebase에 Project를 생성 하였다면 데이터를 저장 하는 방법을 알아 봅니다.  

데이터베이스 생성

파이어베이스에서 생성한 프로젝트를 선택하여 콘솔 화면으로 이동 합니다.  

좌측 메뉴에서 Database메뉴를 선택하면 Cloud Firestore에 database를 생성할 수 있는 화면으로 이동 합니다.  데이터베이스를 생성 하기 위해 [데이터베이스 만들기] 버튼을 클릭하여 팝업 창을 오픈 합니다.

데이터베이스 생성은 [프로덕션 모드에서 시작]과 [테스트 모드로 시작] 두 개의 조건이 있는데 라디오 버튼을 클릭해 보면 우측에 어떤 기능인지 설명과 스크립트를 볼 수 있습니다.

자세히 보면 조건에 따른 권한임을 알 수 있는데 일단 [테스트 모드로 시작]을 선택하고 [다음] 버튼을 클릭 합니다.

데이터베이스를 어디에 생성 할 것인가 하는 서버의 위치를 설정하는 화면 입니다.  너무 먼거리에 위치하면 속도가 느리고 과금 문제도 발생할 수 있습니다.

Cloud Firestore 위치는 테스트 할 때는 별로 중요하지 않지만 대한민국은 어디에 있는지 한번 알아 보겠습니다.

각국의 중요 도시가 나오는데 서울은 구글 리스트에 나오지 않는군요.  좀더 찾아 봅니다.

여기 맨 끝에 간신히 붙어 있네요.  서울(asia-northease3)으로 되어 있습니다.

asia-northeast3을 선택 하고 [완료] 버튼을 클릭 합니다.  잠시 작업이 진행되고 

데이터베이스가 생성이 되었습니다.

데이터 추가

이제 생성된 데이터베이스에 데이터를 추가하는데 일반 database와는 다르게 Table로 관리되지 않고 Collection, Document, Field 순으로 입력 하고 관리가 됩니다.  먼저 컬렉션을 만들기 위해 [컬렉션 시작]을 클릭 합니다.

컬렉션 시작 창에서 컬렉션 ID를 입력하고 [다음]버튼을 클릭 합니다. 

문서 ID는 자동 생성되는데 테스트 삼아 한번 입력해 보았습니다.  필드들은 ‘+’, ‘-‘ 버튼을 이용해서 추가 삭제하며 입력 합니다.  대충 입력했으면 [저장] 버튼을 클릭 합니다.

데이터가 하나 추가 되었습니다.  이번에는 문서추가를 클릭하고

문서 ID는 자동으로 하고 데이터를 입력한 후 [저장]버튼을 클릭 합니다.

동일한 방법으로 데이터를 추가해서 사용하면 됩니다.

- copy coding -