2 minute read

Tags: , , ,

痛心! 難過! 日子還是要過! 該做的事還是做! :) 兄弟快拿總冠軍了 笑一個吧 :)


Understand Firebase projects

  1. 創建一個 Firebase Porject
  2. 基本介紹
  3. 拿 Firebase SDK snippet (firebaseConfig)
    • 想這個 點子的時候 我自己跟自己大哉問: 可以把 Firebase apiKey json (firebaseConfig) 公開出來嗎? (如果我要玩 github pages的話)

    • 答案 是 可以的兒~
      • Only the database security rules can protect your data
  4. 前端 code 吃 firebaseConfig 開始玩瞜~

Firebase 價目表

挑幾個我有興趣的來看 XD

Product / Free / Pay as you go

Choose a Database: Cloud Firestore or Realtim Database

  • Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing:

    • Cloud Firestore is Firebase’s newest database for mobile app development. It builds on the successes of the Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales further than the Realtime Database.

    • Realtime Database is Firebase’s original database. It’s an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.

Cloud Storage

  • Cloud Storage is built for app developers who need to store and serve user-generated content, such as photos or videos.

Firebase Security Rules

  • For Cloud Firestore and Cloud Storage, Rules use the following syntax:

     service <<name>> {
       // Match the resource path.
       match <<path>> {
         // Allow the request if the following conditions are true.
         allow <<methods>> : if <<condition>>
  • For Realtime Database, JSON-based Rules use the following syntax:

      "rules": {
        "<<path>>": {
        // Allow the request if the condition for each method is true.
          ".read": <<condition>>,
          ".write": <<condition>>

Github pages + Angular app

  • https://github.com/angular-schule/angular-cli-ghpages
  1. 去 GitHub 開一個 repo
  2. 自己電腦 ng new 一個 Angular app
  3. cd 進 剛剛 new 的 Angular app
  4. git remote add origin <剛剛在 github 開的 repo EX: https://github.com/<username>/<repositoryname>.git>
  5. ng add angular-cli-ghpages
  6. ng deploy --base-href=/<repoName>/
  7. https://<usernam>.github.io/<repositoryname> 看有沒有可愛 Angular defalut 的 畫面
  • AngularFire Quickstart

    1. cd 到剛剛創的 Angular Project ng add @angular/fire
      • 會跑出 Allow Firebase to collect CLI usage and error reporting information? 選 N
    2. 把 firebase config 加到 /src/environments/environment.ts 裡面
      •    export const environment = {
         production: false,
         firebase: {
           apiKey: '<your-key>',
           authDomain: '<your-project-authdomain>',
           databaseURL: '<your-database-URL>',
           projectId: '<your-project-id>',
           storageBucket: '<your-storage-bucket>',
           messagingSenderId: '<your-messaging-sender-id>'
    3. 加 AngularFireModule & AngularFirestoreModule 到 /src/app/app.module.ts
         import { BrowserModule } from '@angular/platform-browser';
         import { NgModule } from '@angular/core';
         import { AppComponent } from './app.component';
         import { AngularFireModule } from '@angular/fire';
         import { AngularFirestoreModule } from '@angular/fire/firestore';
         import { environment } from '../environments/environment';
           imports: [
           declarations: [ AppComponent ],
           bootstrap: [ AppComponent ]
         export class AppModule {}
    4. 使用 AngaulrFirestore 吃 資源

      • /src/app/app.component.ts:
           import { Component } from '@angular/core';
           import { AngularFirestore } from '@angular/fire/firestore';
           import { Observable } from 'rxjs';
             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();
      • /src/app/app.component.html:

            <li class="text" *ngFor="let item of items | async">

同廠家硬!! 硬起來~ Github pages + React app

  1. npx create-react-app your-app-name
  2. cd 進剛剛的專案
  3. 開一個 Github repo
  4. git remote add origin <剛剛在 github 開的 repo EX: https://github.com/<username>/<repositoryname>.git>
  5. npm install gh-pages --saev-dev
  6. 在專案中 paackage.json 裡面 最上/外層(name, version, private) 加上 "homepage":"http://gitname.github.io/<repositoryname>"
    • 注意唷! 是github 上面 repo 的名稱喔!
  7. 在專案中 paackage.json 裡 的 scripts 中加上
    "scripts": {
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
  8. npm run deploy
  9. https://<usernam>.github.io/<repositoryname> 看有沒有可愛 React defalut 的 畫面

讀書會後紀錄! 我川感動