firebase sdk 是什麽

firebase sdk 是 firebase 官方推出和 firebase 互动的套件，支援很多不同语言，像是 Node.js、Java 、Python 、Go 、C# 等各种语言。

angular fire 是什麽

angular fire 则是包装 firebase sdk 套件，支援 typescript 和 rxjs 与整合 angular 的套件，可以使用 angular 的方式去操作 angular

安装 angular fire

安装 angular fire 同样非常简单，使用 ng add 的指令就好了

ng add @angular/fire

安装的过程会询问要与哪个 firebase 专案连结

选完就安装完罗

取得 firebase 金钥与设定托管

接下来要取得 firebase 金钥，将金钥设定到专案里面

左上角的 齿轮点击之後，再点 一般设定 ，移到下面，点击web的按钮

设定托管资讯，同时可以将托管的框框打勾， 启用hosting的功能之後可以将成品部署在上面

下一步可以看到要求你先安装 firebase 套件，但由於已经安装了 angular fire ，所以可以略过不管。只要记住下面的设定就好了

记住，这些都是敏感资讯，只要有这些资讯都可以连线并操控资料库，所以务必要保管好。由於这是示范的，才会这样大方显示出来

接下来打开自己的专案的 environment.ts 与 environment.prod.ts将金钥的内容，写在环境档案当中，让开发的时候与编译成正式产品的时候，都可以连结到同一个位置

会像这样

export const environment = {
  production: false,
  firebase: {
    apiKey: 'AIzaSyDAk9FvgaA7v57orp8SNW9qRKfe3x-VzVA',
    authDomain: 'hello-ironman-2021.firebaseapp.com',
    projectId: 'hello-ironman-2021',
    storageBucket: 'hello-ironman-2021.appspot.com',
    messagingSenderId: '937591667292',
    appId: '1:937591667292:web:facdf1573dee86cd1d4499',
    measurementId: 'G-JVSJ2TK7NQ',
  },
};

安装 firebase CLI

安装firebase CLI ，之後就可以一键部署到 firebase 上面

npm install -g firebase-tools

登入 firebase

打开专案开始为专案设定firebase

firebase login

初始化专案

firebase init

这样就设定完罗，之後如果要部署，只要输入指令，就可以一键部署了

firebase deploy

引入 angular fire 模组

在app.module.ts引入 AngularFireModule ，并且将环境变数档案的firebase设定引入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
		// 引入 angular fire 模组
    AngularFireModule.initializeApp(environment.firebase)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

开启firebase 的firestore 资料库

到firebase 的 Firestore Database 页面点起启动服务，并且以测试模式启动

接下来会问你要将资料库建立在哪个地区，预设会在美国，但是也可以选 asia-east1 ，会建立在google 在台湾的彰化机房

建立完成之後，随意在资料库新增几笔资料

好了，这样设定就大功告成了，接下来来测试一下是否可以成功连接资料库吧

在 app.component.ts

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(firestore: AngularFirestore) {
    this.items = firestore.collection('items').valueChanges();
  }
}

在 app.component.html

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.name}}
  </li>
</ul>

打开页面看，就可以看到刚刚在资料库新增的资料罗