firebase 튜토리얼 => firebase 시작하기

비고

Firebase 는 Backend as a Service (Baas)로서 모바일 앱 개발에 매우 유용합니다.

그것은 인증 및 보안 , 실시간 데이터베이스 및 파일 저장소 , 분석 , 푸시 알림 , AdMod 및 기타 많은 기능을 제공 합니다

Android, iOS, Web, NodeJS, C ++ 및 Java Server 용 SDK 를 제공합니다.

버전

플랫폼 SDK	번역	출시일
Firebase JavaScript SDK	3.7.0	2017-03-01
Firebase C ++ SDK	3.0.0	2107-02-27
Firebase Unity SDK	3.0.0	2107-02-27
Firebase iOS SDK	3.14.0	2017-02-23
Firebase Android SDK	10.2	2017-02-15
Firebase Admin Node.js SDK	4.1.1	2017-02-14
Firebase Admin Java SDK	4.1.2	2017-02-14

Android 프로젝트에 Firebase 추가하기

다음은 Firebase 프로젝트를 만들고 Android 앱과 연결하는 데 필요한 단계입니다.

앱에 Firebase 추가하기

Firebase 콘솔 에서 Firebase 프로젝트를 생성하고 Create New Project를 클릭 하십시오 .
Android 앱에 Firebase 추가를 클릭하고 설정 단계를 따르십시오.
메시지가 나타나면 앱의 패키지 이름을 입력하십시오.
앱이 사용하는 패키지 이름을 입력하는 것이 중요합니다. 이 설정은 Firebase 프로젝트에 앱을 추가 할 때만 설정할 수 있습니다.
Auth에서 동적 링크, 초대 및 Google 로그인 지원에 필요한 디버그 서명 인증서 SHA1을 추가하려면 Android Studio에서 프로젝트로 이동하고 창의 오른쪽에있는 Gradle 탭을 클릭하고 Refresh 버튼을 클릭 한 다음 이동 project(root) -> Tasks -> android -> signingReport . Run 탭에 MD5 와 SHA1이 둘 다 생성됩니다. SHA1을 firebase 콘솔에 복사하십시오.
결국 google-services.json 파일을 다운로드하게됩니다. 이 파일은 언제든지 다시 다운로드 할 수 있습니다.
아직 수행하지 않았다면 프로젝트의 모듈 폴더 (일반적으로 app /)에 복사하십시오.

다음 단계는 SDK를 추가하여 Firebase 라이브러리를 프로젝트에 통합하는 것입니다.

SDK 추가

Firebase 라이브러리를 자신의 프로젝트 중 하나에 통합하려면 Android Studio 프로젝트를 준비하기위한 몇 가지 기본 작업을 수행해야합니다. 앱에 Firebase를 추가 할 때 이미이 작업을 수행했을 수도 있습니다.

루트 수준 build.gradle 파일에 google-services 플러그인 을 포함하도록 규칙을 추가하십시오.

buildscript {
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:3.0.0'
    }
}

그런 다음 모듈 Gradle 파일 (일반적으로 app/build.gradle )에서 Gradle 플러그인을 사용하도록 파일 맨 아래에 적용 플러그인 행을 추가합니다.

apply plugin: 'com.android.application'

android {
  // ...
}

dependencies {
  // ...
  compile 'com.google.firebase:firebase-core:9.4.0'
}

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'

마지막 단계는 다양한 Firebase 기능에 사용할 수있는 하나 이상의 라이브러리를 사용하여 Firebase SDK에 대한 종속성을 추가하는 것입니다.

Gradle Dependency Line	서비스
com.google.firebase : firebase-core : 9.4.0	해석학
com.google.firebase : firebase-database : 9.4.0	실시간 데이터베이스
com.google.firebase : firebase-storage : 9.4.0	저장
com.google.firebase : firebase-crash : 9.4.0	오류보고
com.google.firebase : firebase-auth : 9.4.0	입증
com.google.firebase : firebase-messaging : 9.4.0	클라우드 메시징 / 알림
com.google.firebase : firebase-config : 9.4.0	원격 구성
com.google.firebase : firebase-invites : 9.4.0	초대 / 동적 링크
com.google.firebase : firebase-ads : 9.4.0	AdMob
com.google.android.gms : play-services-appindexing : 9.4.0	앱 색인 생성

IOS 용 Firebase 설정하기

첫째, firebase 대시 보드로 가서 'Create New Project'버튼을 사용하여 새 프로젝트를 만들고 싶습니다.

예를 들어 광산을 '멋진 앱 이름'으로 지정한 다음 지역을 선택하고 '프로젝트 만들기'를 눌러 앱의 이름을 추가하여 새 프로젝트를 만들고 싶습니다.

프로젝트를 생성 한 후 대시 보드 인이 페이지로 이동하게됩니다. 여기에서 firebase를 설치하려는 플랫폼을 선택해야합니다.이 예제에서는 IOS를 선택합니다.

IOS를 선택하면 IOS Bundle 및 앱 스토어 ID를 묻는 이미지와 동일한 팝업이 표시됩니다. 앱이 앱 스토어에 아직 없기 때문에 IOS 번들 만 제공하면됩니다.

어쨌든 xcode 프로젝트를 만든 후에 xcode에서 번들 ID를 얻으십시오. 어쨌든 앱에서 번들 ID를 얻을 수 있습니다. xcode의 Genral보기는 상단의 첫 번째 필드가되고 일단 붙여 넣으면 가져옵니다. 예를 들어 firebase의 Bundle 필드는 'MauginInc.KIKOO'가 될 것입니다.

'Next'를 누르면 'GoogleService-Info.plist'파일이 다운로드되고 xcode 내에서 앱의 루트 폴더로 이동해야합니다.

포드를 초기화하고 파이어베이스 포드를 설치하려면 터미널에 가서 xcode 프로젝트 폴더로 이동하여 firebase이 제공하는 지침을 따르십시오.

마지막으로, 신속하게 최선을 다하도록 앱을 구성하여 앱 개발을 훨씬 쉽고 효율적으로 수행하는 것만으로도 팝업과 동일한 AppDelegate.swift 파일을 편집 할 수 있습니다.

이제 IOS 용 xcode 프로젝트에 firebase가 설치되었습니다.

자바 스크립트로 간단한 Hello World 웹 앱으로 Firebase 시작하기

이 예제는 자바 스크립트로 웹 애플리케이션에서 Firebase를 시작하는 방법을 보여줍니다.

파이어베이스 데이터베이스에 텍스트 하위 를 추가하고 웹 애플 리케이션에 실시간으로 표시 할 것입니다.

시작하자.

Firebase 콘솔 ( https://console.firebase.google.com)으로 이동하여 새 프로젝트를 만듭니다. 프로젝트 이름, 국가 / 지역을 입력하고 프로젝트 생성을 클릭하십시오.

이제 컴퓨터에 index.html 파일을 만듭니다. 그리고 다음 코드를 추가하십시오.

  <body>
      <p>Getting started with Firebase</p>
      <h1 id="bigOne"></h1>
      <script>
            // your firebase JavaScript code here
      </script>

  </body>

이제 Firebase Console에서 프로젝트로 가면이 것을 볼 수 있습니다.
이제 웹 응용 프로그램에 Firebase 추가를 클릭하십시오. 다음 팝업 창이 나타나면 복사 버튼을 클릭하십시오.

이제 index.html 파일로 이동하여 다음과 같이 스크립트 섹션에 스 니펫을 추가하십시오.

  <body>

    <p>Getting started with Firebase</p>
    <h1 id="bigOne"></h1>

    <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);
    </script>
  </body>

이제 Firebase 초기화 코드를 추가했습니다. 이제 데이터베이스에서 텍스트 값을 가져와야합니다.

이 작업을 수행하려면 index.html 의 스크립트 안에 다음 코드 (마지막 단계에서 이미 추가 된 Firebase 초기화, 다시 추가하지 않음)를 추가하십시오.

  <script>

      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);
  
      // getting the text value from the database
      var bigOne = document.getElementById('bigOne');
      var dbRef = firebase.database().ref().child('text');
      dbRef.on('value', snap => bigOne.innerText = snap.val());

  </script>

이제 우리는 모두 index.html 파일로 끝났습니다. 이제 Firebase 콘솔에서 데이터베이스 로가 봅시다.
지금 빈 공간이 비어있는 것을 볼 수 있습니다. 텍스트 하위 를 데이터베이스에 추가하고 값을 추가하십시오.
이제 ADD 버튼을 클릭하십시오.
이제 데이터베이스의 RULES 섹션으로 이동하십시오.
현재 개발 목적으로 모든 읽기 및 쓰기 쿼리를 사용할 수 있습니다.
```
  {
    "rules": {
        ".read": "true",
        ".write": "true"
      }
  }
```
이제 브라우저에서 index.html을 엽니 다.
다음과 같이 페이지에 텍스트 값이 표시됩니다.
이제 데이터베이스로 돌아가서 텍스트 하위 값을 다른 것으로 변경하면 새로 고침이나 다시로드하지 않고 브라우저의 텍스트도 변경됩니다. 이것이 실시간 데이터베이스 가 Firebase에서 작동하는 방법입니다.