Firebase Database NoSDK

# エンドポイントの設定
```javascript
base='https://osaka5-default-rtdb.asia-southeast1.firebasedatabase.app'
```

Realtime Databaseを開き、赤枠内を`base`変数に設定
[Firebaseプロジェクト作成(80秒)](https://www.youtube.com/watch?v=b6gdL_tTZeo) Firebaseは無料で利用できます。クレカは登録してはいけません
![console.firebase.google.com_project_osaka5_database_osaka5-default-rtdb_data_hl=ja2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/41a6ae7f-6d85-5e91-264d-31027ebc8b2e.png)


# データを追加
## curl
```bash
curl $base/users.json -d '{"名前":"山田太郎","出身地":"沖縄"}'
```

## JavaScript
```javascript
await fetch(base+'/users.json', {
  method: 'POST',
  body: '{"名前":"山田花子","出身地":"北海道"}'
})
```

## Google Apps Script
```javascript
UrlFetchApp.fetch(base+'/users.json', {
  method: 'POST',
  payload: '{"名前":"JohnDoe","出身地":"米国"}'
})
```

# データを取得
## curl
```bash
curl $base/users.json
```

## JavaScript
```javascript
await fetch(base+'/users.json').then(r => r.json())
```

## Google Apps Script
```javascript
JSON.parse(UrlFetchApp.fetch(base+'/users.json'))
```

# すべてのデータを取得
## curl
```bash
curl $base/.json
```

## JavaScript
```javascript
await fetch(base+'/.json').then(r => r.json())
```

## Google Apps Script
```javascript
JSON.parse(UrlFetchApp.fetch(base+'/.json'))
```

# データを上書き
## curl
```bash
curl $base/users/1.json -X PUT -d '{"名前":"山田太郎","出身地":"石垣島"}'
```

## JavaScript
```javascript
await fetch(base+'/users/2.json', {
  method: 'PUT',
  body: '{"名前":"山田花子","出身地":"択捉島"}'
})
```

## Google Apps Script
```javascript
UrlFetchApp.fetch(base+'/users/3.json', {
  method: 'PUT',
  payload: '{"名前":"JohnDoe","出身地":"カナダ"}'
})
```

# データを更新
## curl
```bash
curl $base/users/1.json -X PATCH -d '{"出身地":"沖ノ鳥島"}'
```

## JavaScript
```javascript
await fetch(base+'/users/2.json', {
  method: 'PATCH',
  body: '{"出身地":"弁天島"}'
})
```

## Google Apps Script
```javascript
UrlFetchApp.fetch(base+'/users/3.json', {
  method: 'PATCH',
  payload: '{"出身地":"ハワイ"}'
})
```

# データを削除
## curl
```bash
curl $base/users/1.json -X DELETE
```

## JavaScript
```javascript
await fetch(base+'/users/2.json', {method: 'DELETE'})
```

## Google Apps Script
```javascript
UrlFetchApp.fetch(base+'/users/3.json', {method: 'DELETE'})
```

# キャッシュ
## curl
```bash
curl -i $base/users.json -H 'X-Firebase-ETag: true'
```
ETagが付与される
![Screenshot from 2021-08-29 21-05-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/45440b69-e37a-be9e-bcae-35096ac671cc.png)

## JavaScript
```javascript
await fetch(base+'/users.json', {
  headers: {'X-Firebase-ETag': true}
}).then(r => r.json())
```
キャッシュによりデータ転送量が節約できる
![Screenshot from 2021-08-29 21-07-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/b9c9a45d-3e60-025a-bed0-fcea28c23f4b.png)

## Google Apps Script
```javascript
JSON.parse(UrlFetchApp.fetch(base+'/users.json', {
  headers: {'X-Firebase-ETag': true}
}))
```

# 上書き防止
## curl
```bash
curl $base/users.json -H 'X-Firebase-ETag: true' -H 'if-match: u/abcdZ64BrbTEOhyb2V5TWQM2o=' -iX PUT -d '{"名前":"山田太郎","出身地":"石垣島"}'
```
上記`ETag: u/nNaTZ64BrbTEOhyb2V5TWQM2o=`と異なるため上書きできない。データのコンフリクトを回避できる
![Screenshot from 2021-08-29 21-19-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/db5a6613-3b5c-220b-b638-5c8c4b3cd4e5.png)

## JavaScript
```javascript
await fetch(base+'/users.json', {
  method: 'PUT',
  headers: {'if-match': 'u/abcdZ64BrbTEOhyb2V5TWQM2o='},
  body: '{"名前":"山田花子","出身地":"択捉島"}'
})
```
![Screenshot from 2021-08-29 21-24-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/2923d4d1-e893-687d-31d1-d2fb529e997b.png)


## Google Apps Script
```javascript
UrlFetchApp.fetch(base+'/users.json', {
  method: 'PUT',
  headers: {'if-match': 'u/abcdZ64BrbTEOhyb2V5TWQM2o='},
  payload: '{"名前":"JohnDoe","出身地":"カナダ"}'
})
```
![Screenshot from 2021-08-29 21-26-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/d8e05cab-ceb8-82b4-154f-2f0e4e844b6f.png)

# クエリパラメータ
## プリティープリント
### プリティー
```bash
curl $base/.json?print=pretty
```
![Screenshot from 2021-08-29 21-37-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/3af2d82c-c9df-058c-5a22-05edccbbf76b.png)

### Not プリティー
```bash
curl $base/.json
```
![Screenshot from 2021-08-29 21-37-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/d1d5454f-e44e-452f-76ed-9e3d990d0f22.png)

## 一階層目のみ取得(Not再帰的)
```bash
curl $base/.json?shallow=true
```
![Screenshot from 2021-08-29 21-41-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/cdaa59d1-de3b-c651-bee6-3980c11e3b7f.png)

## JSONP
```html
<script>
  function gotData(data) {
    console.log(data);
  }
</script>
<script src="https://osaka5-default-rtdb.asia-southeast1.firebasedatabase.app/.json?callback=gotData"></script>
```
![Screenshot from 2021-08-29 21-43-59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/9c671eac-4cc1-49b9-2294-f193f551af58.png)

## Download
https://osaka5-default-rtdb.asia-southeast1.firebasedatabase.app/.json?download=db.json
`Content-Disposition`が付与され、ダウンロードできます
![Screenshot from 2021-08-29 21-48-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/31e8dd06-bc4f-e375-5b3b-0f090a5db1f0.png)

# Playground
## `Access-Control-Allow-Origin: *`のため、どこからでもAPIを実行可能です
F12を押してQiita上やTampermonkeyでも実行できます。
<p class="codepen" data-height="720" data-default-tab="result" data-slug-hash="OJgyvZo" data-user="04" style="height: 720px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/04/pen/OJgyvZo">
  Firebase Realtime Database</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 引用
https://firebase.google.com/docs/reference/rest/database