# 20200116 Firebaseをウェブアプリで使う

これは2020年1月16日（木曜日）の授業のノートです。今日はFirebase の Realtime Database と Authentication を使うウェブアプリを作ってみます。

###### tags: `firebase` `web`

# 関連資料
[Github](https://github.com/TakashiSasaki/Android2019/blob/master/README.md) / [Glitch](https://glitch.com/~hello-kbc-sasaki)

# 関連サイト
[完成したウェブアプリ hello-kbc-sasaki-webapp](https://hello-kbc-sasaki.glitch.me/)
[Firebase Console](https://console.firebase.google.com/u/0/)
[Firebase を JavaScript プロジェクトに追加する](https://firebase.google.com/docs/web/setup)
[ウェブでのデータの読み取りと書き込み](https://firebase.google.com/docs/database/web/read-and-write)
[mini.css](https://minicss.org/docs)

# Firebase コンソールでウェブアプリを登録

# 初期化に必要な情報を確認
ウェブアプリではFirebaseのJavaScriptライブラリを読み込んで初期化する必要がある。Firebase SDK snippetでCDNやConfigを選択すると初期化に必要な情報を確認することができる。
ウェブアプリがFirebase Hostingにデプロイされている場合はAutomaticで表示されるコードを使うと便利。

# Glitchでウェブアプリを作る

Glitchで公開しているサンプル hello-kbc-sasaki-webapp を参考にして、同じ動きをするウェブアプリを作成してください。

動作確認したら次の5つの機能を追加してください。

1. メッセージを書いた人が分かるように表示する
2. メッセージを削除できるようにする
3. メッセージを書いた人だけが削除できるようにする
4. パスワードを再発行する
5. アカウントを削除する

---
**これ以降は下書きですので無視してください。**

# Firebase
---

> This note is yours, feel free to play around. :video_game:
> Type on the left :arrow_left: and see the rendered result on the right. :arrow_right:

## :memo: Where do I start?

### Step 1: Change the title and add a tag

- [x] Create my first HackMD note (this one!)
- [ ] Change its title
- [ ] Add a tag

:rocket:

### Step 2: Write something in Markdown

Let's try it out!
Apply different styling to this paragraph:
**HackMD gets everyone on the same page with Markdown.** ==Real-time collaborate on any documentation in markdown.== Capture fleeting ideas and formalize tribal knowledge.

- [x] **Bold**
- [ ] *Italic*
- [ ] Super^script^
- [ ] Sub~script~
- [ ] ~~Crossed~~
- [x] ==Highlight==

:::info
:bulb: **Hint:** You can also apply styling from the toolbar at the top :arrow_upper_left: of the editing area.

:::

> Drag-n-drop image from your file system to the editor to paste it!

### Step 3: Invite your team to collaborate!

Click on the <i class="fa fa-share-alt"></i> **Sharing** menu :arrow_upper_right: and invite your team to collaborate on this note!


- [ ] Register and sign-in to HackMD (to use advanced features :tada: )
- [ ] Set Permalink for this note
- [ ] Copy and share the link with your team

:::info
:pushpin: Want to learn more? ➜ [HackMD Tutorials](https://hackmd.io/c/tutorials)
:::

---

## BONUS: More cool ways to HackMD!

- Table

| Features | Tutorials |
| ----------------- |:----------------------- |
| GitHub Sync | [:link:][GitHub-Sync] |
| Browser Extension | [:link:][HackMD-it] |
| Book Mode | [:link:][Book-mode] |
| Slide Mode | [:link:][Slide-mode] |
| Share & Publish | [:link:][Share-Publish] |

[GitHub-Sync]: https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github
[HackMD-it]: https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it
[Book-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book
[Slide-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck
[Share-Publish]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note

- LaTeX for formulas

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$

- Code block with color and line numbers：

var s = "JavaScript syntax highlighting";
alert(s);

- UML diagrams

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?

- Auto-generated Table of Content
[ToC]

> Leave in-line comments! [color=#3b75c6]

- Embed YouTube Videos

{%youtube PJuNmlE74BQ %}

> Put your cursor right behind an empty bracket {} :arrow_left: and see all your choices.

- And MORE ➜ [HackMD Tutorials](https://hackmd.io/c/tutorials)