Hiểu về stream response

**Như tiêu đề, có lúc bạn làm việc với GCP Cloud Run và mapping domain với a.example.com.
và một lúc nào đó, bạn được yêu cầu khi truy cập vào b.example.com và mong muốn trang 
này phải redicrect toàn bộ từ path cho đến các param, query trên url. 
Bạn đang loay hoay không biết phải xử lý như thế nào thì đây sẽ là giải pháp cho bạn mà chúng tôi 
đã thực hiện thành công thông qua GCP Network services Load Balancing.**

**Chuẩn bị**: 
- Một services cloud run đang chạy ngon lành
- Quyền quản lý domain của bạn, có thể thêm các subdomain và mapping vào bằng thẻ A, CNAME v.v..

**Thực hiện**: 
1. Truy cập vào trang quản lý Load Balancing: https://console.cloud.google.com/net-services/loadbalancing/list/loadBalancers?project=projectId, chọn Create Load Balancer
2. Ở mục Application Load Balancer (HTTP/S), chọn Start Configuration
3. Chọn các thông số như hình và chọn Continue

![Ảnh màn hình 2023-09-25 lúc 17.20.09.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F09%2F25%2Flu%2Fc%2F17%2F20%2F09%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-154534-1695637215352_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-09-25%20lu%CC%81c%2017.20.09.png?alt=media&token=fe3fa7a9-9cd1-4d51-aace-a8582ceec033)

4. **Mục Frontend Configuration**: 

**Load Balancer name**: lb-example

**FE Configuration name**: fe-example

**Protocol**: HTTPS

**Network**: Premium

**IP Address**: Đang là Ephemeral, chọn mũi tên trỏ xuống và chọn Create IP Address -> Điền tên "ip-example" và nhấn Create (bước này sẽ tạo Static IP để mình sử dụng mapping vào domain)

**Certificate**: tạo mới và chọn như hình!

![Ảnh màn hình 2023-09-25 lúc 17.28.24.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F09%2F25%2Flu%2Fc%2F17%2F28%2F24%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-136084-1695637709856_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-09-25%20lu%CC%81c%2017.28.24.png?alt=media&token=33eb77d4-0e64-42b1-bc36-c874948d64f2)

**Hình ảnh tổng thể Front end Configuration**

![Ảnh màn hình 2023-09-25 lúc 17.44.49.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F09%2F25%2Flu%2Fc%2F17%2F44%2F49%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-383314-1695638695269_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-09-25%20lu%CC%81c%2017.44.49.png?alt=media&token=7b42d644-4ec5-4027-8dd8-b20ad8c61d2e)

5. **Mục Backend Configuration**


Tạo mới Backend Service: Các thông số như sau:

![Ảnh màn hình 2023-09-25 lúc 17.32.33.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F09%2F25%2Flu%2Fc%2F17%2F32%2F33%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-243737-1695637958678_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-09-25%20lu%CC%81c%2017.32.33.png?alt=media&token=4154599d-a25b-4c2c-ad59-699ad8143515)

**Lưu ý**: 
- **Khi tạo New Backend**: 

![Ảnh màn hình 2023-09-25 lúc 17.31.49.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F09%2F25%2Flu%2Fc%2F17%2F31%2F49%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-141148-1695637915182_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-09-25%20lu%CC%81c%2017.31.49.png?alt=media&token=fd2bfa97-2ba2-4e69-89b1-096c368efdf1)

Chọn Regions và chọn Server Cloud Runs mong muốn
- Bỏ tích Enable Cloud CDN (sau khi config ổn định có thể bật lại)
- Tích chọn Enable logging

Bước 5 hoàn thành: Nhấn Create new backend

6. **Host and path rules (Quan trọng)**

Chọn Advanced host and path rule (URL redirect, URL rewrite)

Chọn Add host and path rule

Điền host mình muốn redicrects: a.example.com. Nhấn button Edit
Chọn theo các thông số sau

![Ảnh màn hình 2023-09-25 lúc 17.37.47.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F09%2F25%2Flu%2Fc%2F17%2F37%2F47%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-126750-1695638272603_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-09-25%20lu%CC%81c%2017.37.47.png?alt=media&token=efbb9ec6-3280-475c-aa7a-277df6e6126b)

Lưu ý: Tích chọn Enable HTTPS redirect, Bỏ tích chọn Enable Stripe Query để lấy full path + query param nếu có (nếu tích chọn sẽ chỉ lấy đến path, bỏ qua query param)

Kiểm tra lại và nhấn Create để tạo Load balancer "lb-example"

7. **Mapping domain a.example.com và b.example.com vào địa chỉ IP Static đã được tạo ở Mục 4.**

Trong khoảng thời gian domain mapping và quá trình certificate kiểm tra domain của mình mất khoảng 30p, đừng lo lắng nếu bạn đã làm tất cả các bước ở trên nhé. Chờ 30 phút và kiểm tra lại thôi :)


Google Cloud Run - How to redirect domain from a.example.com to b.example.com

Follow https://github.com/swaggo/swag 

Github Example: https://github.com/duongdam/go-swaggo

Step 1: Install swaggo
```bash
	go install github.com/swaggo/swag/cmd/swag@latest
```

Step 2: Install gofiber swagger
```bash
	go get -u github.com/gofiber/swagger
```

Step 3: Add comments to your API source code

Example your go.mod
```go
module go_api

go 1.20
```

Example your main.go

Notice the import ->  _ "go_api/docs", and change info of // @title... if you want.
```go
package main

import (
	"github.com/gofiber/swagger"
	"github.com/gofiber/fiber/v2"

	_ "go_api/docs"
)

// @title GoFiber Example API
// @version 1.0
// @description Golang GoFiber swagger auto generate step by step by swaggo
// @termsOfService http://swagger.io/terms/
// @contact.name API Support
// @contact.email fiber@swagger.io
// @license.name Apache 2.0
// @license.url http://www.apache.org/licenses/LICENSE-2.0.html
// @host localhost:8080
// @BasePath /
func main() {
	app := fiber.New()

	app.Get("/swagger/*", swagger.HandlerDefault) // default
	app.Post("/user/create", userController.HandlerCreateUser) // create new user
	
	app.Listen(":8080")
}
```

Example your function create user
```go
package userController

import (...)

// HandlerCreateUser godoc
//
//	@Summary		Create new user
//	@Description	Create new user
//	@Tags			users
//	@Accept			json
//	@Produce		json
//	@Param			payload	body		userModel.UserModel	true	"UserModel"
//	@Success		200		{string}  string  "OK"
//	@Failure		400		{string}  error  "Bad Request"
//	@Router			/user/create [post]
func HandlerCreateUser(c *fiber.Ctx) error {
...
}

# Notice: Remember line "//	@Router			/user/create [post]" and line "func HandlerCreateUser(c *fiber.Ctx) error {" do not have a newline.
```
 -> Done step 3
 
 Step 4: Run the Swag in your Go project root folder which contains main.go file, Swag will parse comments and generate required files(docs folder and docs/doc.go).
 
 ```bash
 swag init
 ```
 Step 5: Run go project and move to http://localhost:8080/swagger/index.html
 
 ```bash
 go run .
 ```
 
 Results:
![Ảnh màn hình 2023-08-09 lúc 13.34.20.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F08%2F09%2Flu%2Fc%2F13%2F34%2F20%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-66519-1691562866482_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-08-09%20lu%CC%81c%2013.34.20.png?alt=media&token=ab36c934-4251-4d0e-b510-486d8fa2c3bc)

Thanks for reading

Golang gofiber swagger auto generate step by step by swaggo


![cloudrun-build-wf.drawio (2).svg](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-cloudrun%2Fbuild%2Fwf%2Fdrawio%2F2%2Fsvg-1d-1d-1e-10-18-19-1e-image%2Fsvg%2Bxml-45942-1690952635911_cloudrun-build-wf.drawio%20(2).svg?alt=media&token=f05ca879-65e0-4786-b2da-8539c095fc23)


Khi developer báo test chức năng của API khi dev chưa đóng PR (nhánh chưa được merge) thì chúng ta phải làm thế nào?. 

Qua bài này, chúng ta sẽ biết được cách triển khai điều đó bằng [Github Workflow.](https://docs.github.com/en/actions/using-workflows/about-workflows)

Các bước thực hiện:

1. Cấp quyền và cử người đại diện (Service Account)
2. Người đại diện xuất passport(Key) vào Repository, Github và GCP (Google Cloud Plaform) bắt tay nhau
3. Kết nối với anh Repository bằng biên bản workflow
4. Thông báo cho dev và testers bằng link.


Bắt đầu ▶️

**1. Cấp quyền và cử người đại diện (Service Account)**


- Truy cập link https://console.cloud.google.com/iam-admin/iam?project=YOUR_PROJECT_NAME
- Chọn anh bạn 123xx-compute@developr.gserviceaccount.com và cấp cho quyền tạo được accesstoken (Service Account Token Creator) . Nếu không chọn bạn này, bạn có thể tạo bạn khác có quyền này là được.

![Ảnh màn hình 2023-08-02 lúc 12.22.35.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F08%2F02%2Flu%2Fc%2F12%2F22%2F35%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-154145-1690953826724_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-08-02%20lu%CC%81c%2012.22.35.png?alt=media&token=440abac7-84b3-496a-bf24-805c8fd4259d)


**2. Người đại diện xuất passport vào Repository, Github và GCP (Google Cloud Plaform) bắt tay nhau**

- Truy cập vào [GCP Service Account](https://console.cloud.google.com/iam-admin/serviceaccounts)
- Chọn người đại diện ở trên > Keys > Add Key > Xuất 1 key dưới dạng JSON
- Xuất trình Key này vào Github Repository để có quyền truy cập:
- + Vào Repo trên github > Settings > Secret and variables > Actions > New repository secret > 
- + Đặt tên key là `GCP_CREDENTIALS` và điền nội dung JSON vừa download về vào field Secret.


**3. Kết nối với anh Repository bằng biên bản workflow**

Vậy là Passport đã được thông qua, Service Account đã có quyền làm việc với anh Repo. 2 bên có biên bản công việc bằng workflow. Cùng thực hiện nhé. 

- Download các biên bản workflow từ link https://gist.github.com/zerolethanh/5c044593610ed2dc3e13aacb8e868a65
- Đặt dưới thư mục `.github/workflows` (tạo nếu chưa có) của Repo
- Chỉnh các thông số và tên cho phù hợp với văn phong Repo

![Ảnh màn hình 2023-08-02 lúc 12.42.10.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F08%2F02%2Flu%2Fc%2F12%2F42%2F10%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-167696-1690954936341_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-08-02%20lu%CC%81c%2012.42.10.png?alt=media&token=b38945ec-8cd1-474c-be3f-1b9732f50471)

Ví dụ trên nghĩa là:

Khi 1 PR được mở ra nhằm merge vào nhánh `stg` thì thực hiện tạo 1 CloudRun vào GCP Project `githubtube`, region service tại Singapore, dùng Dockerfile-stg để build....


**4. Thông báo cho dev và testers bằng link.**

Sau khi chạy xong phải thông báo kết quả để các dev tự test, và các testers khi nhảy vào test thì biết link test là gì. 
Kết quả chạy ra được viết vào comment của PR đó, kiểu thế này:

![Ảnh màn hình 2023-08-02 lúc 12.58.42.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F08%2F02%2Flu%2Fc%2F12%2F58%2F42%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-169057-1690955927677_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-08-02%20lu%CC%81c%2012.58.42.png?alt=media&token=292002bd-b0be-4e9b-92dc-04cb7ad41a6a)

Nghĩa là PR#27 này đã có link riêng để test, hãy test trên url này nhé ;)

 Khi soi revisions console sẽ thấy 1 revision được tạo ra:


![Ảnh màn hình 2023-08-02 lúc 13.01.57.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F08%2F02%2Flu%2Fc%2F13%2F01%2F57%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-55114-1690956123060_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-08-02%20lu%CC%81c%2013.01.57.png?alt=media&token=15103928-6228-4ed9-bafd-9cb3e0788787)


**Kết luận**

Tương tự, các bạn có thể bổ sung và chỉnh sửa các file cho nhánh `main` để release production, format xuất ra comment trên PR, setting này nằm trong các file .yalm tải về.

Xong rồi, đi uống bia thôi 🍻😃

Deploy CloudRun bằng Github workflow, devs và testers đều vui.

**Sau một thời gian tìm và đọc tài liệu từ ông google thì tạm thời mình đóng gói lại phương pháp này cho mọi người để 
có thể dùng được "https" luôn nhé!**

Step1:

```html
- Create Instance: Vào Compute Engine chọn VM Instances -> Tạo mới
```

Step2:

```html
- Ở mục Instance groups -> Tạo Instance groups
- Vì mình tạo Vm Instance riêng nên chọn "New unmanaged instance group" và tiến hành tạo (lưu ý: Instance Zone nào thì Group Zone đó)
```

Step3:

```html
- Tìm mục Load balancing -> Tạo Load balancing
1. Nhấn "Start Configuration" tại "Application Load Balancer (HTTP/S)".
2. Chọn "From Internet to my VMs or serverless services" và "Global external Application Load Balancer" -> Continues.
3. Đặt tên cho Loadbalance (ví dụ load-balancer-[my-api]).
4. Mục Frontend chọn Protocol "Https" -> Mục IP Address mình thay Ephemeral bằng cách nhấn Create Ip Address -> Đặt tên tuỳ chọn (ví dụ static-ip-my-api). 
5. Mục Certificate chọn "Create A New Certificate" -> Chọn "Create Google-managed certificate" ->
Mục domain -> Điền đúng domain mình định maping (Ví dụ: sd-api.geniam.com) -> Nhấn Create.
6. Tích vào mục Enable Http to Https redirect (hoặc không cũng đc, phải thay Ip Address Ephemeral mới enable phần này) -> Nhấn Done.
7. Mục Backend Configuration -> Create A Backend Service -> Đặt tên tuỳ chọn (ví dụ be-[my-api]).
8. Chọn Instance Group vừa tạo ở trên, Phần Port (Nếu VM của bạn chạy ở port nào bạn điền port đó ví dụ 5000)
9. Phần Health check -> Nhấn Create A Health Check -> Đặt tên -> Protocol chọn http -> Port chọn port ở trên ví dụ 5000
-> Request Path điền path check status của bạn ví dụ /ping, /healthcheck, hoặc /status (đảm bảo GET route này trả về status 200) 
-> Check interval để khoảng 10 đến 60s tuỳ bạn (để sớm nó request lên check sớm như mình để 60s ping 1 lần) -> Save.
10. Routing rules để mặc định.
11. OK Check lại và nhấn Create Load Balancer.

```

Step4:

```html
Sau khi tạo load balancer xong, bạn mapping domain của mình đến địa chỉ ip của load balancer bằng type A là xong nhé.
```

Kết quả: Các bạn để ý mục "Healthy Tích xanh 1 of 1" là kết nối thành công và có thể mapping domain luôn nhé.


![Ảnh màn hình 2023-07-25 lúc 10.30.00.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F07%2F25%2Flu%2Fc%2F10%2F30%2F00%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-282573-1690256002311_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-07-25%20lu%CC%81c%2010.30.00.png?alt=media&token=b679f7f2-4635-47a2-8976-b0c8459a33e3)


Mapping domain to GCP VM Instance by Load Balancing (https)


![Ảnh màn hình 2023-03-02 lúc 16.15.34.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F16%2F15%2F34%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-577704-1677748570499_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2016.15.34.png?alt=media&token=9cb81a5e-ca91-4d12-8921-83189724bbb6)

Chào các bạn,

[GitHub.tube](https://github.tube/) là một công cụ quản lý Issue và PullRequest đa kênh hiệu quả. Hôm nay tôi sẽ giới thiệu về GitHubTube và hi vọng sẽ mang lại nhiều lợi ích cho công việc của các bạn.

### Khi nào và những ai cần đến GitHub.tube:
- Khi Dev cần biết mình và team mình đang commit Issue, PR nào và tiến độ ra sao.
- Khi Quản lý cần biết team mình đang làm những gì và tiến độ thế nào.
- Khi Dev muốn theo dõi sự phát triển của các tài khoản github mình yêu thích (ví dụ GoogleCloudPlatform, gofiber)

Cùng bắt đầu nhé.

### 1: Login
Truy cập trang https://github.tube/login và login bằng tk Google hoặc Github

### 2: Tạo Connection:

- Bấm [Create Connection] , popup hiện lên
- Điền tên tài khoản vào mục `Login`, token vào `GitHub Personal Token` ([cách lấy token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token))

Ví dụ dưới là tạo 1 connection tới tài khoản `kataras` 

![Ảnh màn hình 2023-03-02 lúc 17.14.14.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F17%2F14%2F14%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-73051-1677752096519_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2017.14.14.png?alt=media&token=5c72172a-e8cf-4322-864e-fbac90f2fd98)

![Ảnh màn hình 2023-03-02 lúc 17.18.44.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F17%2F18%2F44%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-64147-1677752351014_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2017.18.44.png?alt=media&token=551878b6-1a6c-4ae0-898f-e31682ba1e44)

![Ảnh màn hình 2023-03-02 lúc 17.21.27.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F17%2F21%2F27%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-66219-1677752531767_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2017.21.27.png?alt=media&token=7a0557ff-a898-4924-8056-69d63bea54a6)


### 3: Thao tác với connection:
Sau khi tạo xong, connection sẽ được list tại màn hình chính

![Ảnh màn hình 2023-03-02 lúc 17.27.04.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F17%2F27%2F04%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-61508-1677752829554_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2017.27.04.png?alt=media&token=a61b7784-d1b3-4907-91ae-14c320a570ea)


### 3.1 Màn hình Activities:
- Là màn hình thông tin của các commit mới nhất của các dự án được update gần nhất. 
- Chúng ta có thể lựa chọn Khoảng thời gian với From:To:, 
- Xem dự án nào bằng danh sách sổ xuống
- Lựa chọn xem PR hoặc Issue nào đang mở hoặc đã đóng.
- Click vào link của các issue, PR đó để biết được tiến độ thế nào.

![Ảnh màn hình 2023-03-02 lúc 17.33.46.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F17%2F33%2F46%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-375143-1677753701007_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2017.33.46.png?alt=media&token=cb1c2903-8d2d-4109-abc6-b19c18009dfd)

### 3.2 Màn hình Assignee:
- Truy cập tình trạng Issue, PR của từng thành viên, từng dự án.
- ❶ Lựa chọn tài khoản cần xem
- ❷ Tên github của thành viên cần xem


![Ảnh màn hình 2023-03-02 lúc 17.39.54.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F17%2F39%2F54%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-146280-1677753717003_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2017.39.54.png?alt=media&token=95411b9e-4c9a-4cf1-bb8c-a304aaedc7ae)

### 3.3 Màn hình Manage:
- Giúp quản lý hoặc cá nhân xem toàn bộ tiến độ của thành viên trong nhóm. 

![Ảnh màn hình 2023-03-02 lúc 17.52.01.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F03%2F02%2Flu%2Fc%2F17%2F52%2F01%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-317579-1677754540854_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-03-02%20lu%CC%81c%2017.52.01.png?alt=media&token=f0e8a5f5-7e6c-47bf-b70c-1baaaf14bbe1)


Chúc bạn quản lý hiệu quả và có nhiều niềm vui trong công việc :>


Quản lý công việc hiệu quả với Github.tube

Chào mừng bạn đến với ClassFunc,

Đây là một số công cụ tôi đề xuất cho các nhà phát triển mới bắt đầu với lập trình:

**1. Trình biên tập mã:** Các trình biên tập mã như WebStorm, Visual Studio Code, Sublime Text hoặc Atom sẽ giúp bạn tạo, chỉnh sửa và kiểm tra mã của mình. Tất cả các trình biên tập này đều có các tính năng hữu ích như cú pháp kiểm tra, lập chỉ mục mã, và các plug-in để tăng cường tính năng và nâng cao trải nghiệm của bạn. ClassFunc đang sử dụng IDE [WebStorm](https://www.jetbrains.com/webstorm/) vì tính tiện dụng và sự thông minh của IDE này.

ClassFunc đề xuất sử dụng GitHubCopilot plug-in để code được nhanh và smart hơn.

**2. GitHub:** GitHub là một dịch vụ lưu trữ mã nguồn cho các dự án phát triển phần mềm. Nó cung cấp một hệ thống quản lý phiên bản và cho phép nhiều nhà phát triển làm việc trên cùng một dự án. 

ClassFunc đang sử dụng GitHub để lưu trữ tài nguyên code của công ty và của khách hàng, hãy sử dụng email của công ty (@classfunc.com) để lập 1 tài khoản GitHub và bắt đầu sử dụng.

**3. Ngôn ngữ lập trình và Framework:** ClassFunc đang sử dụng các Framework liên quan tới lập trình web và mobile, đại biểu cho web như ReactJS, NextJS, Tailwindcss, cho mobile như React-native, Flutter, back-end có Golang (Fiber) và NodeJS (ExpressJS).

ClassFunc sử dụng GoogleCloudPlatform và Firebase (https://firebase.google.com/) để triển khai dự án.

**4. Tài liệu học tập:** Trên mạng có nhiều tài liệu học tập miễn phí như các khoá học trực tuyến, các blog, video hướng dẫn và các tài liệu tham khảo để giúp bạn học lập trình hiệu quả hơn. Dưới đây là một số nguồn tài nguyên miễn phí mà tôi đề xuất cho bạn:

- Stack Overflow: Stack Overflow là một diễn đàn trực tuyến cho các nhà phát triển để đặt câu hỏi và trả lời các câu hỏi của nhau. Nó là một nguồn tài nguyên tuyệt vời để tìm kiếm câu trả lời cho các câu hỏi mà bạn có thể gặp phải trong quá trình phát triển.

- Codecademy: Codecademy là một nơi tốt để bắt đầu học lập trình, với các khoá học miễn phí và các khoá học trả phí. Các khoá học trực tuyến này sẽ giúp bạn học các ngôn ngữ lập trình cơ bản như HTML, CSS và JavaScript.

- W3Schools: W3Schools là một trang web dành cho các lập trình viên, cung cấp các hướng dẫn, tài liệu tham khảo và các ví dụ về các ngôn ngữ lập trình như HTML, CSS, JavaScript, Golang và MySQL.

- YouTube: Nếu bạn thích học hỏi thông qua video hướng dẫn, YouTube là một nơi tuyệt vời để tìm kiếm các video hướng dẫn về lập trình. Các kênh như Firebase, freeCodeCamp và Flutter,... cung cấp các video hướng dẫn miễn phí về nhiều chủ đề liên quan đến lập trình.


Ngoài ra, hãy nhớ tham gia cộng đồng lập trình để kết nối và học hỏi từ các nhà phát triển khác. GitHub và Stack Overflow cũng là nơi tốt để tìm kiếm câu trả lời cho các câu hỏi của bạn và tham gia vào các dự án phát triển phần mềm.

Chúng tôi rất vui mừng khi có bạn làm việc cùng chúng tôi và hy vọng rằng bạn sẽ tìm thấy công việc của mình thú vị và bổ ích. Chúng tôi mong muốn mang đến cho bạn một môi trường làm việc chuyên nghiệp, sáng tạo và thân thiện. Hãy sẵn sàng để học hỏi, thử thách bản thân và đóng góp cho sự phát triển của công ty cũng như bản thân bạn. Chúc bạn thành công và hạnh phúc trong công việc tại ClassFunc!


Tài liệu cho dev mới tại ClassFunc

1 app hoặc 1 thư viện được viết ra phải có version khi release lên chợ. Sau đây là quy tắc của ClassFunc ở thời điểm hiện tại:

### Đối với thư viện:
(ví dụ: [release-cmd](https://www.npmjs.com/package/release-cmd)), quy tắc được đặt như sau:

- Tên phiên bản: `v[major].[minor].[patch]` , ví dụ `v2.3.6`
- Trong đó:
- + `[major]`: update có break-change, chức năng warning deprecated có thể ko dùng được nữa.
- + `[minor]`: có update hoặc thêm mới chức năng, hoặc warning deprecated chức năng.
- + `[patch]`: fix bugs, vẫn tiếp tục dùng thư viện không ảnh hưởng gì.
- Khi `[major]`+1 thì `[minor]` và `[patch]` về 0, ví dụ `v3.2.1` -> `v4.0.0`
- Khi `[minor]`+1 thì `[patch]` về 0, ví dụ `v2.3.4` -> `v2.4.0`

### Đối với app release lên chợ:
Vì sự cải tiến liên tục và không cần quá quy tắc hoá phần nào có deprecated nên quy tắc như sau:

- Tên phiên bản: `v[major].[minor].[patch]` , ví dụ `v3.4.8`
- Trong đó:
- + `[major].[minor]` dùng chung cho cả 2 nền tảng ios, android và nâng theo quy tắc `[minor]+1 và [minor]≤9` ,`[minor]>9` sẽ +1 `[major]`, ví dụ `2.8, 2.9, 3.0`
- + `[patch]`: +1 mỗi lần release cho từng nền tảng, ví dụ khi release chỉ riêng phần fix bugs cho nền tảng android thì: ios là `v2.8.1`, android là `v2.8.2`
- Khi `[major]`+1 thì `[minor]` và `[patch]` về 0, ví dụ `3.2.1` -> `4.0.0`
- Khi `[minor]`+1 thì `[patch]` về 0, ví dụ `v2.3.4` -> `v2.4.0`

Cảm ơn các bạn đã thực hiện.

Quy tắc đặt tên version của ClassFunc



![Ảnh màn hình 2023-01-11 lúc 20.33.39.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F01%2F11%2Flu%2Fc%2F20%2F33%2F39%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-47197-1673444025025_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-01-11%20lu%CC%81c%2020.33.39.png?alt=media&token=ff2b71f8-e5ba-40e5-bdba-bd2ab9cc42a3)

## Mục tiêu của việc tạo Projects:
- Quản lý công việc cho Dev, BA và Tester
- Có cái nhìn toàn diện và trực quan về các pharse hoặc toàn bộ dự án.


## Triển khai:

1. Tạo project với template phù hợp, trường hợp này mình chọn `Team backlog`


![Ảnh màn hình 2023-01-11 lúc 20.37.23.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F01%2F11%2Flu%2Fc%2F20%2F37%2F23%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-249922-1673444248623_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-01-11%20lu%CC%81c%2020.37.23.png?alt=media&token=f1483358-05b7-49ec-b36e-7f62a41908dc)


2. Chọn `Setting > Status` và cài đặt các Options như bên dưới:

![Ảnh màn hình 2023-01-11 lúc 20.43.57.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F01%2F11%2Flu%2Fc%2F20%2F43%2F57%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-41487-1673444643425_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-01-11%20lu%CC%81c%2020.43.57.png?alt=media&token=beb7a5bb-fc43-407e-bf79-53ec5ebf474d)

![Ảnh màn hình 2023-01-11 lúc 20.40.38.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2023%2F01%2F11%2Flu%2Fc%2F20%2F40%2F38%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-60021-1673444444268_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202023-01-11%20lu%CC%81c%2020.40.38.png?alt=media&token=134fb1b2-6498-4bac-bc60-1454c2c88d53)

### Giải thích ý nghĩa từng mục:
 - 🆕 New: Issues mới
 - 📋 Confirm me: (Được bot chạy tự động)
 - + Khi issue hoặc pr bị `re-open`
 - + Khi pr bị `review:changes_requested`
 - + Khi pr được `review:approved`
 - 🔖 TODO, 🏗 In progress, 👀 Please Review: trạng thái được điều chỉnh bởi user
 - ✅ Dev Done: (Được bot chạy tự động)
 - + Khi issue, pull request `closed`
 - + Khi pull request `merged`
 - 👍 Test Done: trạng thái được tester kéo sang nếu kq test là worked

Chúc chúng ta quản lý dự án hiệu quả và thành công. 

Github Projects from 0 to 1

## Firebase deploy hosting with Nextjs 13

## Ai cũng phải cài đặt

```bash
Install firebase tools latest

    npm i -g firebase-tools@latest 

To get started, initialize Firebase for your framework project.

In the Firebase CLI, enable the web frameworks preview:

    firebase experiments:enable webframeworks

Run the initialization command from the CLI and then follow the prompts:

    firebase init hosting

1. Choose your hosting source directory. If this an existing Next.js app, the CLI process completes, and you can proceed to the next section.
2. Choose "Dynamic web hosting with web framework"
3. Choose Next.js.


```

## Điều kiện cơ bản đó là: 
- Enable billing
- Enable API Cloud functions (để firebase tự động deploy các request được tạo ở folder src/pages/api)
Chi tiết: 

```html
Firebase CLI version 11.14.2 or later. Make sure to install the CLI using your preferred method.
Optional: Billing enabled on your Firebase project (required if you plan to use SSR)
Optional: use the experimental ReactFire library to benefit from its Firebase-friendly features
```


## Đối với tạo Next app mới

Ví dụ firebase.json
```json 
{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

```
Thực hiện deploy 
```bash
  firebase deploy //(sẽ install default hosting là firebase project_id)
```

## Đối với migrate deploy multi target

Mình sẽ thay đổi field "public": "out" thành "source": "."

Ví dụ firebase.json
```json
{
  "hosting": [
    {
      "target": "target_2",
      "source": ".", // Thay đổi từ "public": "out"
      "ignore": [
        "firebase.json",
        "*/.",
        "*/node_modules/*"
      ],
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "/",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "index.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=0, no-cache"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        }
      ]
    },
    {
      "target": "target_1",
      "source": ".", // Thay đổi từ "public": "out"
      "ignore": [
        "firebase.json",
        "*/.",
        "*/node_modules/*"
      ],
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "/",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "index.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=0, no-cache"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        }
      ]
    }
  ]
}
```

### Thực hiện deploy 

```bash
		firebase deploy --only hosting:target_1 
		firebase deploy --only hosting:target_2
```

## Links
https://firebase.google.com/docs/hosting/nextjs

Firebase deploy hosting on Nextjs 13

## Public Github Package Private

### Bước 1: Tạo file Github Workflows

```bash
mkdir .github
cd .github
mkdir workflows
cd workflows
touch github-packages.yml
```

Example file github-packages.yml

```bash
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages

name: GlobalNavi Publish Packages

on:
  release:
    types: [ created ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm install
      - run: npm ci

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://npm.pkg.github.com/
      - run: npm install
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

### Ở file này chú ý Github actions này sẽ chạy khi tạo mới 1 bản release trên Github Repository, mình có thể chuyển actions thành "Push to new branch"

```html
on:
  push:
    # Sequence of patterns matched against refs/heads
    branches:    
      - main

```

### Bước 2: Cập nhật file package.json và thêm .npmrc lưu trữ thông tin Authentication to GitHub Packages

### Package.json thêm các thuộc tính:

```html
"repository": "https://github.com/Andom-Geniam/git-globalnavi",
"publishConfig": {
  "@Andom-Geniam:registry": "https://npm.pkg.github.com"
}
```

### .npmrc thêm

```html
//npm.pkg.github.com/:_authToken=Token
@Andom-Geniam:registry=https://npm.pkg.github.com
```

_authToken tạo ở
https://github.com/settings/tokens (dung classic token)
https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry

![Ảnh màn hình 2022-11-02 lúc 17.30.42.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F11%2F02%2Flu%2Fc%2F17%2F30%2F42%2Fpng-o9-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-484545-1667385048317_A%CC%89nh%20ma%CC%80n%20hi%CC%80nh%202022-11-02%20lu%CC%81c%2017.30.42.png?alt=media&token=cc9bd9a0-6af1-4d9b-90d3-2b1cb4474c5a)

### Lưu ý: Cấp các quyền đầy đủ cho Token (Chủ yếu là access to actions, packages, and workflows)

Tham khảo: https://docs.github.com/en/packages/quickstart



Public new npm private package to github package



![fad7cf1a-772f-43e4-9042-e96d5d903b2b.webp](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-fad7cf1a%2F772f%2F43e4%2F9042%2Fe96d5d903b2b%2Fwebp-1d-1d-1d-1d-1e-image%2Fwebp-12678-1661703930474_fad7cf1a-772f-43e4-9042-e96d5d903b2b.webp?alt=media&token=ad030479-2a4a-4b36-870b-ad51ad4c9b41)



Chào các bạn. 


Lại là tôi, ClassFuncer đây.


Với tiêu chí coi hệ thống của khách hàng như hệ thống của công ty, không những chúng tôi chăm chút code đẹp, code chất lượng, mà chúng tôi còn quan tâm những chi tiết nhỏ nhất để hệ thống nhẹ nhất, chạy nhanh nhất, kết quả là người dùng được trải nghiệm tốt nhất, mang lại giá trị cho cộng đồng. 

Hôm nay tôi lại chia sẻ một kiến thức mà đôi khi mình không để ý, đó là size của docker, làm sao giảm được docker size. Chúng ta bắt đầu nhé.

###  Doker là gì?

[Docker](https://www.docker.com/) có thể hiểu nôm na là có chức năng gói cả 1 hệ điều hành, từ đó deploy hệ thống trên hệ điều hành đó vào trong 1 file duy nhất. Docker đã được đóng gói, vì vậy việc di chuyển qua lại giữa các môi trường một cách dễ dàng hơn.

### Tại sao lại phải giảm size docker?

Cũng giống như một file nặng và nhẹ, docker size nhỏ hơn sẽ giúp khởi động hệ thống nhanh hơn, tốn ít ram hơn, ít thải CO2 hơn nên bảo vệ môi trường hơn 😀

### Làm gì để giảm size docker?

Theo kinh nghiệm đang deploy hơn 20 hệ thống khác nhau cho khách hàng, mình có rút ra một số điều như sau:
1. Xác định các file chỉ cần cho image được build ra.
2. Thiết đặt .dockerignore để giảm thiểu file phải copy vào image của docker.
3. Chia việc build docker thành các stage khác nhau, chỉ những file cần thiết sẽ có mặt trong docker image cuối cùng.


### Chúng ta bắt đầu nhé.

Ví dụ tôi build 1 api được viết bằng Golang, phiên bản `chưa tối ưu` có `Dockerfile` như sau:

```bash 

FROM golang:1.19-alpine as builder

WORKDIR /go/src/app
ADD . .
COPY .env.production .env

RUN go get ./
RUN go build -o server

# Run the web service on container startup.
CMD ["./server"]

```
Thực hiện build:
```bash
docker build -t brother-api-alpine .
```

Và 1 `Dockerfile` `được tối ưu` có nội dung như sau:

```sh

FROM golang:1.19-alpine as build-stage

# Stage 1: build distribution files.
WORKDIR /dist
COPY . .
COPY .env.production .env
RUN go get ./
RUN go build -o server

# Stage 2: build the image
FROM alpine
WORKDIR /app
COPY --from=build-stage /dist/.env ./.env
COPY --from=build-stage /dist/server ./server
COPY --from=build-stage /dist/static ./static
CMD ["./server"]
```

Thực hiện build
```sh
docker build -t brother-api-optimize .
```

Và chúng ta có 2 docker được sinh ra với size 1.36GB và 28.63MB, một sự khác biệt quá lớn, phải không các bạn 😅?

![Ảnh chụp Màn hình 2022-08-28 lúc 19.00.32.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F08%2F28%2Flu%2Fc%2F19%2F00%2F32%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-50128-1661688037810_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-08-28%20lu%CC%81c%2019.00.32.png?alt=media&token=ca4e085c-3adb-40e9-94d7-6edf4ea5a662)

### Tại sao lại khác  🤔?

Có lẽ khi các bạn đọc 2 `Dockerfile` trên đã thấy sự khác biệt. Ở file docker optimize, mình chia thành 2 stage, 1 cho việc build, và 1 cho docker sẽ được sinh ra và được deploy.

- Stage 1 mục đích là sinh ra file binary `server`
- Stage 2 là sử dụng file `server` đã được sinh ra ở stage 1

Tại sao? Tại vì tất cả những file trong quá trình build không cần thiết, ví dụ các file trong quá trình `COPY` và trong quá trình `RUN go get ./` ... Mục đích cuối cùng là chúng ta chỉ cần file `server` được go build ra và một số file liên quan.

![Ảnh chụp Màn hình 2022-08-28 lúc 23.05.35.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F08%2F28%2Flu%2Fc%2F23%2F05%2F35%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-81421-1661702740830_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-08-28%20lu%CC%81c%2023.05.35.png?alt=media&token=476ea11b-1ba1-46f3-a91f-13ae6319371b)

 Ảnh trên là khi ta inspect image của Docker image đã được build ra với tên `brother-api-alpine`
 
 So sánh với ảnh dưới (là inspect của Docker image đã được build ra với tên `brother-api-optimize`
 
![Ảnh chụp Màn hình 2022-08-28 lúc 23.10.12.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F08%2F28%2Flu%2Fc%2F23%2F10%2F12%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-91881-1661703020390_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-08-28%20lu%CC%81c%2023.10.12.png?alt=media&token=d22910b9-710c-43e9-85dd-9d8701519968)

#### Sự khác biệt quá lớn phải không các bạn?

Thực chất chúng ta chỉ cần file `server`, file `.env` và folder `static` thôi, đúng không 😄?

----
### Kết luận

Cũng như mình đã viết ở trên thôi, kết luận lại là khi build 1 docker image, chúng ta cần:

1. Xác định các file chỉ cần cho image được build ra.
2. Thiết đặt .dockerignore để giảm thiểu file phải copy vào image của docker.
3. Chia việc build docker thành các stage khác nhau, chỉ những file cần thiết sẽ có mặt trong docker image cuối cùng.

---

ClassFunc đang không ngừng cải tiến chất lượng hệ thống cho khách hàng, cho công ty để cống hiến cộng đồng nhiều hơn.

Nếu các bạn có ý định làm việc về công nghệ thông tin thì đừng ngần ngại liên hệ hello@classfunc.com nhé.

Chúc các bạn buổi tối vui vẻ 😀





Chúng tôi đã giảm size docker khi build api cho khách hàng từ 1.36 GB xuống  28.63 MB như thế nào?

![Image Storager.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-image%2Fstorager%2Fpng-10-1e-image%2Fpng-42125-1647065980692_Image%20Storager.png?alt=media&token=e0841596-9411-49d0-9caa-9ca5d79ed5ce)

[Ở bài trước](https://blogs.classfunc.com/posts/upload-files-voi-firebase-functions-va-cloud-storage/aOqgSzF7ue9NzkP82RU4) chúng ta đã làm quen với `busboy` để thực hiện tác vụ upload files lên firebase storage. Ở bài này mình đã tổng hợp lại thành thư viện [cloud-storager](https://www.npmjs.com/package/cloud-storager) và xin giới thiệu với các bạn tại đây.

# Cloud Storager

### [ExpressJS Middleware] Save uploaded files to bucket for Firebase & Google Cloud Storage

## Install:

```shell
npm i -S cloud-storager
or
yarn add cloud-storager
```

## Usage:

```js
const cloudStorager = require('cloud-storager');
const app = require('express')()

app.post('/', cloudStorager({bucket}), async (req, res) => {
    res.json(req.files);
});
```

## API:

`bucket`: A Bucket (https://cloud.google.com/nodejs/docs/reference/storage/latest/Bucket)

`req.files`: Array of saved files, contains downloadUrl.

```json
[
  {
    "name": "file",
    "filename": "firebaseFunctionsUploadFile.drawio.svg",
    "encoding": "7bit",
    "mimeType": "image/svg+xml",
    "downloadUrl": "http://localhost:9199/v0/b/formzin-uploads/o/2NBb9_firebaseFunctionsUploadFile.drawio.svg?alt=media&token=token_KT0H25x3kmUEEtW76NMx"
  }
]
```

## Link tham khảo:
https://github.com/firebase/functions-samples/tree/main/image-sharp


Upload files nhanh tới firebase storage với `cloud-storager`

![tailwind-pre.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-tailwind%2Fpre%2Fpng-1d-1e-image%2Fpng-4837-1646937654631_tailwind-pre.png?alt=media&token=ecd80f9c-3b3c-4934-812c-f6c8fb052326)



## 1. Install tailwindcss:
Tại project root:
```sh
 yarn add -D tailwindcss
 npx tailwindcss init
```
-> File `tailwind.config.js` được sinh ra
## 2. tailwind.config.js
Watch sự thay đổi của `html,js` trong ./src để re-compile, thêm `jsx,ts,tsx` nếu cần thiết
```js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## 3. Tạo file ./src/tailwind.css với nội dung:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 4. Scripts tailwind:watch và tailwind:build
Thêm vào `scripts` của `package.json`
```json
"scripts": {
	"tailwind:watch": "npx tailwindcss -i ./src/tailwind.css -o ./public/styles/tailwind.build.css --watch",
	"tailwind:build": "npx tailwindcss build -i ./src/tailwind.css -o ./public/styles/tailwind.build.css --minify"
}
```

## 5. Thêm style vào ./public/index.html
Trong vùng thẻ `<head>`, thêm:
 ```html
<link href="%PUBLIC_URL%/styles/tailwind.build.css" rel="stylesheet">
```

## 6. Chạy đồng thời với react-scripts
6.1. Cài đặt `npm-run-all`
```sh
yarn add -D npm-run-all
```
6.2. Script `start:dev` và build
```json
"scripts": {
	"start:dev": "npm-run-all -p tailwind:watch dev",
	"dev": "env-cmd -f .env.development react-scripts start",
	"build:stg": "yarn tailwind:build && env-cmd -f .env.stg react-scripts build",
	"build:prod": "yarn tailwind:build && env-cmd -f .env.production react-scripts build",
}
```

## 7. Ignore file /public/styles/tailwind.build.css
Thêm vào file `.gitignore`
```sh
/public/styles/tailwind.build.css
```

---

# Sử dụng:
## Cài đặt plugins

![Ảnh chụp Màn hình 2022-03-11 lúc 01.46.47.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F11%2Flu%2Fc%2F01%2F46%2F47%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-113620-1646938041830_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-11%20lu%CC%81c%2001.46.47.png?alt=media&token=61f4f22c-cba1-416a-9bec-c9ad76c33b41)

## Bắt đầu sử dụng:


![Ảnh chụp Màn hình 2022-03-11 lúc 01.48.39.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F11%2Flu%2Fc%2F01%2F48%2F39%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-218542-1646938125352_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-11%20lu%CC%81c%2001.48.39.png?alt=media&token=7b353586-8a0a-42ff-9950-c066b4b40b36)

----
Link hữu ích: 
https://tailwindcss.com/
https://tailwindui.com/
https://tailblocks.cc/

😱🍖🍺


Khởi tạo và sử dụng tailwind css cho dự án mới tinh

![firebaseFunctionsUploadFile.drawio.svg](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-firebasefunctionsuploadfile%2Fdrawio%2Fsvg-1e-1e-image%2Fsvg%2Bxml-13081-1646802606144_firebaseFunctionsUploadFile.drawio.svg?alt=media&token=5c3d6edc-b780-4416-93f7-3f39a5cff21e)

# 1. Tạo 1 project functions
- `firebase init functions`  để kết nối với firebase project


![Ảnh chụp Màn hình 2022-03-09 lúc 11.30.31.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F09%2Flu%2Fc%2F11%2F30%2F31%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-115428-1646800237152_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-09%20lu%CC%81c%2011.30.31.png?alt=media&token=ec7a9b7a-26b9-4792-8618-0247e94ade03)

# 2. Sử dụng `busboy-firebase` để nhận files upload

```js

const app = require('express')();
const bb = require('busboy-firebase');
const {functions, bucket} = require('../app');
const genId = require('cf-gen-id');
const {genDownloadUrlFromMetadata} = require(
    '../utils/genDownloadUrlFromMetadata');
const cors = require('cors');

app.use(cors());

app.post('/', bb, async (req, res) => {

    const downloadUrls = await Promise.all(
        //busboy-firebase xử lý với file nhận đc từ client và đưa vào req.files
        req.files?.map(async f => {
            const fname = f.originalname;
            const contents = f.buffer;
            await bucket.file(fname).save(contents); //lưu nội dung file
            // thêm metadata để có thể lấy link download từ storage
            const [meta] = await bucket.file(fname).setMetadata({
                metadata: {
                    firebaseStorageDownloadTokens: genId('token_', 20),
                },
            });
            //trả về link có thể download
            return genDownloadUrlFromMetadata(meta, fname);
        }),
    );
    res.json({downloadUrls});
});

exports.upload = functions.https.onRequest(app);

```


# Setting biến môi trường
**CONSTANTS.js**
```js
const IS_CLI = process.env.IS_FIREBASE_CLI === 'true';
const STORAGE_EMULATOR_HOST = process.env.STORAGE_EMULATOR_HOST;
const BUCKET_NAME = 'tên bucket trên firebase' // ví dụ `formzin-com.appspot.com`
const FUNCTIONS_REGION = 'asia-southeast1'; //singpore

module.exports = {
    IS_CLI,
    STORAGE_EMULATOR_HOST,
    BUCKET_NAME,
    FUNCTIONS_REGION,
};

```
**app.js**

```js
const {initializeApp} = require('firebase-admin/app');
const {getStorage} = require('firebase-admin/storage');
let functions = require('firebase-functions');
const {BUCKET_NAME, FUNCTIONS_REGION} = require('./CONSTANTS');
functions = functions.region(FUNCTIONS_REGION);
const FB_CONFIG = JSON.parse(process.env.FIREBASE_CONFIG);
const app = initializeApp({
    ...FB_CONFIG,
    storageBucket: BUCKET_NAME,
});
const storage = getStorage(app);
const bucket = storage.bucket();
module.exports = exports = {
    app,
    storage,
    bucket,
    functions,
};
```

**genDownloadUrlFromMetadata.js**

```js
const {IS_CLI, STORAGE_EMULATOR_HOST, BUCKET_NAME} = require('../CONSTANTS');
const genDownloadUrlFromMetadata = (meta, fileName) => {
    const firebaseStorageDownloadTokens = meta?.metadata?.firebaseStorageDownloadTokens;
    let url;
    if (firebaseStorageDownloadTokens) {
        const domain = IS_CLI
            ? STORAGE_EMULATOR_HOST
            : 'https://firebasestorage.googleapis.com';

        url = `${domain}/v0/b/${BUCKET_NAME}/o/${encodeURIComponent(
            fileName)}?alt=media&token=${firebaseStorageDownloadTokens}`;
    } else {
        url = meta?.mediaLink;
    }
    return url;
};

exports.genDownloadUrlFromMetadata = genDownloadUrlFromMetadata;

```

# Test local với firebase-emulators
```sh
firebase emulators:start --only functions,storage
```

# Upload thử với Postman


![Ảnh chụp Màn hình 2022-03-09 lúc 12.46.45.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F09%2Flu%2Fc%2F12%2F46%2F45%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-174747-1646804811237_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-09%20lu%CC%81c%2012.46.45.png?alt=media&token=a95b740d-5629-46c6-86c4-f5d0d9ef4f86)


# Deploy functions
```sh
firebase deploy --only functions:upload
```

# Open to the world
- Vào gcloud functions, thêm quyền allUser có thể invoke function `upload` vừa deploy


![Ảnh chụp Màn hình 2022-03-09 lúc 12.51.27.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F09%2Flu%2Fc%2F12%2F51%2F27%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-212995-1646805092699_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-09%20lu%CC%81c%2012.51.27.png?alt=media&token=5d4d4ac3-8df9-4560-be92-9f97b67fcb50)


![Ảnh chụp Màn hình 2022-03-09 lúc 12.51.14.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F09%2Flu%2Fc%2F12%2F51%2F14%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-175021-1646805080170_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-09%20lu%CC%81c%2012.51.14.png?alt=media&token=8cb4c285-5cff-4331-b9e0-bdf5c0a6f946)

# Test lại với Postman


![Ảnh chụp Màn hình 2022-03-09 lúc 12.53.56.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F09%2Flu%2Fc%2F12%2F53%2F56%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-207947-1646805242044_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-09%20lu%CC%81c%2012.53.56.png?alt=media&token=09388077-e130-4dea-8996-1ef2d6d1306e)

---
Done 🤗

*Chúc các bạn thành công 🍻🍺*

Upload files với Firebase Functions và Cloud Storage

[WebStorm](https://www.jetbrains.com/webstorm/) là một công cụ rất phổ biến và hiệu năng trong code Javascript, hôm nay mình sẽ chia sẻ các phím tắt để cải thiện hiệu năng sử dụng Webstorm, giúp chúng ta code và ship nhanh hơn cho sản phẩm của mình. 

# 1. <kbd>⌘ + D</kbd> : Copy 1 dòng. 
> Đặt con trỏ ở dòng muốn copy và nhấn  <kbd>⌘+D</kbd>


![Ảnh chụp Màn hình 2022-03-01 lúc 16.35.12.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F35%2F12%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-39782-1646127314296_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.35.12.png?alt=media&token=c5cee427-95c3-477e-ad44-28e12e234221)


# 2. <kbd>⌘ + K</kbd>: Bật commit dialog

![Ảnh chụp Màn hình 2022-03-01 lúc 16.37.43.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F37%2F43%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-556281-1646127469144_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.37.43.png?alt=media&token=f8213de8-543c-4c88-bf75-31b69e3b48c9)

# 3. <kbd>⌘ + Shift + K</kbd>:  Bật push commits dialog

![Ảnh chụp Màn hình 2022-03-01 lúc 16.45.52.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F45%2F52%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-245970-1646127957985_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.45.52.png?alt=media&token=1512d357-688a-4fec-b143-7e1a20d07f85)

# 4. <kbd>⌘ + Enter</kbd>: Thực hiện commit hoặc push
>  Lệnh này giống với bấm nút [Commit] ở mục 2. ; và nút [Push] ở mục 3. 

# 5. <kbd>⌘ + Shift + A</kbd>: Bật dialog actions

![Ảnh chụp Màn hình 2022-03-01 lúc 16.49.10.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F49%2F10%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-132689-1646128156273_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.49.10.png?alt=media&token=6f0f34f6-59f1-466d-a08a-560e407a6bbd)

# 6. <kbd>⌘ + D</kbd> : Xem sự thay đổi của 1 commit
> Chọn 1 commit và nhấn <kbd>⌘ + D</kbd>  để xem sự thay đổi của commit đó.

![Ảnh chụp Màn hình 2022-03-01 lúc 16.52.02.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F52%2F02%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-68168-1646128327559_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.52.02.png?alt=media&token=cc1808f0-c607-4d7c-8bf7-bce74fc090fe)

![Ảnh chụp Màn hình 2022-03-01 lúc 16.52.17.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F52%2F17%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-566926-1646128343229_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.52.17.png?alt=media&token=9626c2be-d587-4e57-ac19-4f7cc0481604)

# 7. <kbd>⌘ + Shift + O</kbd> : Kết nối nhanh tới 1 file
> Thêm ngăn cách với dấu `:` để muốn nhảy nhanh tới dòng và ô. Rất tiện trọng quá trình debug code như lỗi ở file nào, dòng nào, ký tự số bao nhiêu.


![Ảnh chụp Màn hình 2022-03-01 lúc 16.56.03.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F56%2F03%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-69025-1646128569327_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.56.03.png?alt=media&token=65f68a7f-732b-42a8-9358-5f99131214d7)


# 8. <kbd>⌘ + Shift + L</kbd> :  Bật nhanh cây git

![Ảnh chụp Màn hình 2022-03-01 lúc 16.58.47.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F16%2F58%2F47%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-360983-1646128735334_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2016.58.47.png?alt=media&token=06165fbd-fe63-49a1-a96c-8bd22ea49171)

# 9. <kbd>⌘ + 1</kbd> :  Đóng mở tab Project
> Sử dụng khi cần ẩn hiện cây thông tin file folder của Project


![Ảnh chụp Màn hình 2022-03-01 lúc 17.00.10.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F01%2Flu%2Fc%2F17%2F00%2F10%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-95197-1646128815720_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-01%20lu%CC%81c%2017.00.10.png?alt=media&token=648aedce-b5d6-43fa-9f4e-f802c2e243cf)

# 10. <kbd>option + ↓ / option + ↑</kbd> : Chọn phạm vi code
> Phù hợp cho việc xác định phạm vi của code và chọn nhanh phạm vi đó.



Tối ưu tốc độ code với phím tắt trong Webstorm

[![asciicast](https://asciinema.org/a/whfVGGWZlXwsQVxJePrjDT3dr.svg)](https://asciinema.org/a/whfVGGWZlXwsQVxJePrjDT3dr)

[GitHub Source Code](https://github.com/ClassFunc/release-cmd) | [NPM Package](https://www.npmjs.com/package/release-cmd)

`release-cmd` là một công cụ giúp chúng tôi quản lý dự án và thống kê dựa vào những commit `Merge pull request...` của git, các chức năng của `release-cmd`:
1. Tạo [GitHub Release](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository) giữa 2 branch, commit hash hoặc tag.
2. Report All Member Efforts (.md or .csv file).
3. Report Per Member Efforts.

## Install: 
`npm i -g release-cmd`

and install [gh-cli](https://cli.github.com/) for dependency.

## Usage:
- Mở terminal, gõ vào: `release-cmd`
- Tiếp tục gõ:

* `github` để tạo GitHub Release
* `md` để tạo Report All Member Efforts định dạng .md
* `mdu` để tạo Report Per Member Efforts định dạng .md
* `csv` để tạo Report All Member Efforts định dạng .csv
* `help` for help


---

Cảm ơn thư viện [Vorpal](https://github.com/dthree/vorpal) đã giúp chúng tôi thực hiện dự án này.

Quản lý dự án cho Leader với release-cmd

# 1. Hello bash script
```
: '
Cách viết nhiều dòng comment.
Cách viết nhiều dòng comment.
Cách viết nhiều dòng comment.
'
```

# 2. Khai báo biến
```
NAME="Tuan"
AGE=18
```

# 3. Ghi nội dung ra màn hình
```
echo "Tôi tên là $name, Năm nay tôi $AGE tuổi."
```
# 4. Lấy nội dung nhập vào của người dùng
```
echo "Bạn đang công việc gì ?"
read -r job
echo "$job là một công việc tuyệt vời"
```

# 5. Thực hiện tính toàn
```
echo "Nhập vào X:"
read -r X
echo "Nhập vào Y"
read -r Y

((sum=X+Y))
echo "Sum: $sum"
```

# 6. Điều kiện rẽ nhánh if, else if, else
```
echo "Nhập vào số may mắn của bạn"
read -r n

if [ "$n" -eq 101 ]; then
  echo "Chúc mừng bạn đã đạt giải nhất"
elif [ "$n" -eq 510 ]; then
  echo "Bạn đạt giải nhì"
elif [ "$n" -eq 999 ]; then
  echo "Bạn đạt giải ba"
else
  echo "Chúc bạn may mắn lần sau"
fi
```

# 7. Điều kiện rẽ nhánh case
```
echo "Nhập vào số may mắn của bạn"
read -r n
case $n in
  101) echo echo "Chúc mừng bạn đã đạt giải nhất" ;;
  510) echo "Bạn đạt giải nhì" ;;
  999) echo "Bạn đạt giải ba" ;;
  *) echo "Chúc bạn may mắn lần sau" ;;
esac
```

# 8. Khởi tạo và gọi function
```
function F1() {
  echo 'I like bash programming'
}

F1
```

# 9. Khởi tạo function nhận tham số đầu vào
```
Dien_Tich() {
  area=$(($1 * $2))
  echo "Diện Tích là : $area m2"
}

Dien_Tich 10 20
```

# 10. Khởi tạo function trả về giá trị
```
function greeting() {
  str="Hello, $name"
  echo "$str"
}

echo "Enter your name"
read -r name

val=$(greeting)
echo "Return value of the function is $val"
```

# 11. Vòng lặp while
```
valid=true
count=1
while [ $valid ]; do
  echo $count

  if [ $count -eq 5 ]; then
    break
  fi

  ((count++))
done
```

# 12. Vòng lặp for
```
for (( counter=10; counter>0; counter-- )); do
  echo -n "$counter "
done
printf "\n"
```

# 13. Tạo thư mục
```
echo "Enter directory name"
read -r newdir
mkdir "$newdir"
```

# 14. Kiểm tra sự tồn tại của thư mục
```
echo "Enter directory name"
read -r ndir

if [ -d "$ndir" ]; then
  echo "Directory exist"
else
  mkdir "$ndir"
  echo "Directory created"
fi
```

# 15. Tạo file
```
echo "Enter file name"
read -r newfile
touch "$newfile"
```

# 16. Kiểm tra sự tồn tại của file
```
filename=$1
if [ -f "$filename" ]; then
  echo "File exists"
else
  echo "File does not exist"
fi
```

# 17. Đọc nội dụng một file
```
file='book.txt'
while read line; do
  echo "$line"
done < $file
```

# 18. Thêm nội dung vào file
```
echo "Before appending the file"
cat book.txt

echo "Learning Laravel 5">> book.txt
echo "After appending the file"
cat book.txt
```

# 19. Xoá file
```
echo "Enter filename to remove"
read -r fn
rm -i "$fn"
```

# 20. Truyền tham số cho file bash
Tạo file test.sh và lưu trữ đoạn code dưới vào file
```
#!/bin/bash
echo "Total arguments : $#"
echo "1st Argument = $1"
echo "2nd argument = $2"
```

terminal exec
```
$ bash test.sh Linux Hint
```

# 21. Truyền tham số cho file bash với tham số được gán tên
Tạo file test2.sh và lưu trữ đoạn code dưới vào file
```
#!/bin/bash
for arg in "$@"; do
  index=$(echo $arg | cut -f1 -d=)
  val=$(echo $arg | cut -f2 -d=)
  case $index in
    X) x=$val;;
    Y) y=$val;;
  *)
  esac
done
((result=x+y))
echo "X+Y=$result"
```

terminal exec
```
$ bash command_line.sh Linux Hint
```

# 22. Đọc biến môi trường từ file
```
FILE_ENV="./.env"
if [ -f "$FILE_ENV" ]; then
  . "$FILE_ENV"
fi
echo "$ENV"
```

# 23. Lấy thời gian
```
Year=$(date +%Y)
Month=$(date +%m)
Day=$(date +%d)
Hour=$(date +%H)
Minute=$(date +%M)
Second=$(date +%S)
echo $(date)
echo "Current Date is: $Day-$Month-$Year"
echo "Current Time is: $Hour:$Minute:$Second"
```

# 24. sleep
```
echo "Wait for 5 seconds"
sleep 5
echo "Completed"
```

# 25. send mail
```
Recipient="admin@example.com"
Subject="Greeting"
Message="Welcome to our site"
mail -s $Subject $Recipient <<< "$Message"
```

link source code github: https://github.com/ClassFunc/learn_bash

25 bash script example


![0_EA63O0t-u70jktRr.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-0%2Fea63o0t%2Fu70jktrr%2Fpng-2v-1d-1e-image%2Fpng-23267-1619410152819_0_EA63O0t-u70jktRr.png?alt=media&token=96067136-ac22-4bcb-b04a-984a3fa04525)


**Spread operator là gì ?**

Hiểu một cách đơn giản **spread operator** là nói đến cách sử dụng ký hiệu dấu ba chấm ...

để hiểu rõ hơn về **spread operator** các bạn có thể tham khảo ở [đây](https://https://dev.to/laurieontech/5-uses-for-the-spread-operator-b9i)

ở bài viết này mình muốn nói đến việc sử dụng **Spread operator** để truyền props nhé.

Trong một vài trường hợp bạn phải truyền rất nhiều props từ cha sang con trông nó như thế này .

```js
const Post = () => {
 
    return (
        <Detail 
				title={'Ngày mưa..}
				content={'Hà nội hôm nay mưa to và nhiều sấm chớp...'}
				createdBy={'Thanh Nguyễn'}
				/>
    )
}

const Detail = ({ title, content, createdBy }) => {
    return (
       <div>
           <h1>{title}</h1>
           <p>{content}</p>
           <p>{createdBy}</p>
       </div>
    )
}
```

Bạn có thể thấy rằng props ở trong component Post có rất nhiều thuộc tính, thay vì ta viết hết vào component Detail thì ta có thể sử dụng **Spread operato** trông như thế này.

```js

const Post = () => {
    const props = { title: 'Ngày mưa..', content: 'Hà nội hôm nay mưa to và nhiều sấm chớp...', createdBy: 'Thanh Nguyễn' };
    return (
        <Detail {...props} />
    )
}

const Detail = ({ title, content, createdBy }) => {
    return (
       <div>
           <h1>{title}</h1>
           <p>{content}</p>
           <p>{createdBy}</p>
       </div>
    )
}
``` 

Bây giờ bạn trông lại code có lẽ sẽ gọn hơn đúng ko.

Còn rất nhiều chức năng lợi hại mà  **Spread operato** mang lại bạn hãy tìm hiểu thêm tại đây nhé .

Link:
1. https://dev.to/laurieontech/5-uses-for-the-spread-operator-b9i
2. https://javascript.plainenglish.io/8-ways-to-use-spread-operator-in-javascript-b66fcf016efe
3. https://viblo.asia/p/su-dung-spread-operator-trong-javascript-gDVK24welLj












Tips hữu ích trong React  truyền props với ... [Spread Operator]

Khi code app cho iOS và có chức năng đăng nhập, Apple bắt chúng ta phải có 'Sign in with Apple'. Hôm nay tôi sẽ hướng dẫn làm đăng nhập với Apple với Expo (https://expo.io) và làm sao để liên kết với Firebase backend, cũng là để memo lại kiến thức dùng cho lần sau. 

Videos:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/opNCjxUb8cs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="100%" height="315" src="https://www.youtube.com/embed/YN3Dh8NNLIQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>




![apple-expo.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-apple%2Fexpo%2Fpng-1d-1e-image%2Fpng-11924-1618130662135_apple-expo.png?alt=media&token=86c06796-c33b-4a9d-8ef5-0f5bae944c28)

Khi chúng ta chạy app lúc Dev ở Expo sẽ khác với app khi chạy standalone (app độc lập). Trước tiên ta xử lý với app khi chạy ở Expo. 
# 1. Apple Login với Expo
Trong [ví dụ của Expo](https://docs.expo.io/versions/v40.0.0/sdk/apple-authentication/#usage) chỉ có Login với Apple chứ chưa có liên kết user đăng nhập với Firebase nên [ta có đoạn code sau](https://gist.github.com/zerolethanh/2b9d678d2b3c4e4b8f2a62b203bf4ae8)
# 2. Apple Login với Standalone App
**B1. Cài đặt tại Apple Developer Console**
[Expo hướng dẫn tại đây](https://docs.expo.io/versions/latest/sdk/apple-authentication/#configuration)

**B2. Cài đặt tại Firebase**
1. Vào Firebase Console
2. Đến Project settings
3. Ở tab `General` , kéo xuống mục `Your apps`, click button `Add app` và thêm iOS app với Bundle ID cho standalone app, ví dụ `com.classfunc.rlkntt`, save
4. Download GoogleService-Info.plist về, save vào Project Root, ở `app.json` thêm vào `ios.googleServicesFile` giá trị `./GoogleService-Info.plist`.

![Ảnh chụp Màn hình 2021-04-11 lúc 17.55.37.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F04%2F11%2Flu%2Fc%2F17%2F55%2F37%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-55160-1618138542537_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-04-11%20lu%CC%81c%2017.55.37.png?alt=media&token=6ca53d0e-343e-4fdf-a5a4-653183fe6582)
5. Tham khảo đoạn code khi Apple Login với Expo

Vậy là xong rồi, chúng ta đã có thể login bằng tk Apple trên iOS rồi. 

                              

                              

Giải quyết triệt để Sign in with Apple với Expo và backend Firebase

1. Khi muốn nội dung nằm trên 1 hàng, phần thừa sẽ thay bằng dấu 3 chấm

| Trước | Sau khi xử lý | 
| -------- | -------- | 
| ![Ảnh chụp Màn hình 2021-03-13 lúc 11.34.51.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F11%2F34%2F51%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-63486-1615610099996_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.34.51.png?alt=media&token=68bf8585-2fe7-4915-8ce2-189b19c8e2a9)     | ![Ảnh chụp Màn hình 2021-03-13 lúc 11.45.08.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F11%2F45%2F08%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-73884-1615610713707_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.45.08.png?alt=media&token=fc3ffc7c-039a-42cc-bbe0-cad0d0d89824) | 

Trong đó: 
`white-space: nowrap` để nội dung hiển thị trên cùng 1 hàng.
`overflow: hidden` để phần nội dung thừa ra ngoài bị ẩn đi.
`text-overflow: ellipsis` thay thể phần nội dung đã ẩn đi bằng dầu 3 chấm.

2. Khi muốn nội dung nằm trên nhiều hàng, phần nội dung thừa thay thế bằng dấu 3 chấm

| Trước |  Sau khi xử lý | 
| -------- | -------- | 
|![Ảnh chụp Màn hình 2021-03-13 lúc 11.56.53.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F11%2F56%2F53%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-72672-1615611418806_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.56.53.png?alt=media&token=ba7acf7d-199b-4a7a-9764-c1708f2bd586)|![Ảnh chụp Màn hình 2021-03-13 lúc 11.58.55.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F11%2F58%2F55%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-86608-1615611546212_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.58.55.png?alt=media&token=a819305d-0104-470b-acb5-ec7693625d40) | 

Khi dùng cách này thì phần nội dung không được để padding

3. Xử lý khi nội dung là 1 đường link hay 1 đoạn text quá dài, không có dấu cách, không tự xuống dòng được và bị tràn ra ngoài

![Ảnh chụp Màn hình 2021-03-13 lúc 12.16.25.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F12%2F16%2F25%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-83982-1615612590697_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2012.16.25.png?alt=media&token=e9d95d1f-28e7-4ff3-a10e-3a2b16e88c3e)
Trong trường hợp này mình có thể dùng overflow-wrap để nội dung tự xuống dòng
![Ảnh chụp Màn hình 2021-03-13 lúc 12.20.49.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F12%2F20%2F49%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-90676-1615612855210_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2012.20.49.png?alt=media&token=61aba76c-1a2a-4010-9ba7-fcfcf869243c)

Hoặc sử dụng hyphens để thêm dấu gạch nối và xuống dòng


![Ảnh chụp Màn hình 2021-03-13 lúc 12.24.04.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F12%2F24%2F04%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-88974-1615613050307_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2012.24.04.png?alt=media&token=dc3c23b0-3d56-47ab-a6c5-014ff34b7e9e)


Xử lý css khi nội dung bị tràn ra ngoài

Kể từ phiên bản React v15.5 trở về trước, React.PropTypes đã được chuyển sang phiên bản gói riêng biệt prop-types, là gói package trợ giúp người dùng kiểm tra các props của component hay ngay cả trong package mà chúng ta đang xây dựng, tạo cho người dùng sự tiện dụng khi sử dụng component/package của mình.

Để cài đặt: 

```bash
npm install --save prop-types

yarn add prop-types
```

Ví dụ về Typechecking props.

![typechecking2.gif](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-typechecking2%2Fgif-1e-image%2Fgif-1021797-1615308027863_typechecking2.gif?alt=media&token=612cb195-c73e-4b55-9687-f3b96c4a5671)

Hôm trước khi xây dựng package cho riêng mình, tôi đã gặp phải vấn đề rằng, khi dev và chạy test ở local các props của tôi vẫn typechecking bình thường, nhưng khi publish lên trên npm, sau khi install về sử dụng, tôi đã không thể nào gõ các props của package được, sau khi nhớ đến prop-types tôi đã khắc phục được điều này và chia sẻ cho các bạn nếu có gặp phải sau này.

Để sử dụng , ta sẽ khai báo component với các kiểu props truyền vào bao gồm tên và kiểu của props.

```js
import React from "react";
import PropTypes from "prop-types";

function TestComponent({ name, age, onClick }) {
  return (
    <div onClick={() => {
      if (onClick)
        onClick();
    }}
		>
			Hello, {name} {age} years old
		</div>
  );
}

TestComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  onClick: PropTypes.func
};

TestComponent.defaultProps = {
  name: "Duong",
  age: 18,
  onClick: null
};

export default TestComponent;
```

Ví dụ trên sẽ khởi tạo 3 props truyền vào là name kiểu 'string', age kiểu 'number', và onClick là một callback function, ngoài ra sẽ khởi tạo giá trị mặc định của name, age. vì có giá trị mặc định nên khi run TestComponent lần đầu tiên sẽ hiển thị ra màn hình "Hello, Duong 18 years old".

Sau khi thực hiện như trên thì việc Typechecking props của bạn đã hoàn thành, các bạn có thể ứng dụng ngay vào package của mình nhé :D!

Đọc thêm [Tạo NPM Package React đầu tiên với [create-react-library]](https://blogs.classfunc.com/posts/tao-npm-package-react-dau-tien-voi-create-react-library/BtIpfv9McO3RPlrswj20)

Tài liệu tham khảo: 

1. https://reactjs.org/docs/typechecking-with-proptypes.html
2. https://www.npmjs.com/package/prop-types



Typechecking package với React PropTypes

Như các bạn đã biết, khi sử dụng useState trong react, nếu trong một component ta khai báo quá nhiều useState, khi setState quá nhiều sẽ dẫn đến việc component bị re-render lại nhiều lần, điều này khiến việc sử dụng app, nhập dữ liệu v.v... bị giật lag và không như mong muốn.
Có nhiều cách như sử dụng Form Submit, useContext (trong trường hợp truyền dữ liệu giữa nhiều lớp component), hôm nay mình sẽ giới thiệu cách quản lý state bằng useReducer (ưu tiên khi sử dụng để quản lý state giữa 1-2 component).

Cú pháp sử dụng: 
```js
const [state, dispatch] = useReducer(reducer, initialArg, init);
```

 Cùng xem ví dụ sử dụng useReducer của mình nhé: 
```js
import React, {useReducer} from "react";
import {TextField} from "@material-ui/core";
import Button from "@material-ui/core/Button";

export const reducer = (state, action) => {
    switch (action.type) {
        case 'onUpdate': {
            return {
                ...state,
                id: action.data.id,
                color: action.data.color,
                name: action.data.name
            };
        }
        case 'name': {
            return {...state, name: action.name};
        }
        case 'name2': {
            return {...state, name2: action.name2};
        }
        case 'reset': {
            return {
                id: null,
                color: '#000000',
                name: '',
            };
        }
    }
};

function reducerValues(props) {
    const [state, dispatch] = useReducer(reducer, {
        id: null,
        color: '#000000',
        name: ''
    });

    return (
        <>
            <TextField
                id="outlined-name"
                label="Name"
                value={state.name}
                onChange={(event) => dispatch({type: 'name', name: event.target.value})}
                variant="outlined"
            />
            <TextField
                id="outlined-name"
                label="Name 2"
                value={state.name2}
                onChange={(event) => dispatch({type: 'name2', name2: event.target.value})}
                variant="outlined"
            />

            <Button variant="contained" color="primary" onClick={() => dispatch({type: 'onUpdate'})}>
                Ok
            </Button>
            <Button variant="contained" color="secondary" onClick={() => dispatch({type: 'reset'})}>
                Reset
            </Button>
        </>
    )

}
```


Với một component sử dụng nhiều biến state khác nhau, khai báo nhiều useState trong một component và thực hiện việc thay đổi state nhiều, nên chuyển qua dùng useReducer để giảm lượng re-render của component lại. UseReducer có thể nói là phiên bản cao cấp hơn của useState,  nhận vào input là state để quản lí các state của component, và một hàm action là dispatch, trả về output là một tập hợp các state mới.

Phương thức dispatch phản hồi một hành động của bạn, đã được khai báo trong action của function 'reducer', React qua thuật toán so sánh 
[Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#descriptionhttps://) đảm bảo rằng, nếu không có sự thay đổi thì react sẽ bỏ qua việc rerender lại các phần tử trong component.

Ở ví dụ trên, chúng ta có các phương thức dispatch riêng cho textField 1, textField2, button Ok, button Reset là các action riêng biệt. Chúng ta có thể thêm các acction khác để quản lý state tránh việc component re-render nhiều lần như khi sử dụng useState.

Ngoài ra cũng có thể sử dụng với useContext, useCallback, useMemo, có thể xem thêm tại : [Performance React App Với React.memo , useMemo , useCallback](https://blogs.classfunc.com/posts/performance-react-app-voi-reactmemo-usememo-usecallback/7ICMdkD6hDCPlG5gEfLo)

Tài liệu tham khảo: 

https://reactjs.org/docs/hooks-reference.html

Performance React app với useReducer

Trước khi mình hướng dẫn các bạn lấy **SSH KEY** thì mình cần phải biết nó là gì và hoạt động như thế nào nhỉ .!

**SSH KEY LÀ GÌ ?**

SSH Keys là một phương thức xác thực đăng nhập với máy chủ thông qua truy cập SSH bằng việc đối chiếu giữa một cặp keys, bao gồm một khóa riêng tư (private key) và khóa công khai (public key) tương ứng. SSH Keys sử dụng giao thức xác thực hỏi và trả lời trong đó một bên trình bày một câu hỏi và một bên khác phải cung cấp một câu trả lời hợp lệ để được chứng thực.

	
**HOẠT ĐỘNG CỦA SSH KEY**

**SSH Key** bạn cứ hiểu đơn giản là một phương thức chứng thực người dùng truy cập bằng cách đối chiếu giữa một key cá nhân (**Private Key**) và key công khai(**Public Key**).

 Một cách đơn giản ta có thể so sánh **Private Key** như là chìa khóa còn **Public Key** là ổ khóa.
 
Rồi bây giờ mình sẻ lấy **SSH Key** và thêm vào dự án nhé.!


 1. Lấy **SSH Key**.
	 Đầu tiên các bạn mở *Command* lên và chạy lệnh 

```js
			ssh-keygen
```

Trông như thế này.




![Capture1.PNG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-capture1%2Fpng-1e-image%2Fpng-46018-1614836949364_Capture1.PNG?alt=media&token=e5816f2f-cf01-48ce-84b5-094c6767bc96)

Các bạn để ý xem nó được lưu vào đâu nhé, thường thì nó sẻ lưu vào ổ c:// Giống như thế này (C:Users\ThanhNguyen/.ssh/id_sra)

Bây giờ truy cập theo đường dẫn đó ta đã có **SSH Key**  


	

![Capture2.PNG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-capture2%2Fpng-1e-image%2Fpng-37385-1614837292826_Capture2.PNG?alt=media&token=5127b3ca-f1df-4646-b62c-c1d18b9c0328)

2.Add **SSH Key**. (ở đây mình dùng *gcp: Google Cloud Platform )
- Đầu tiên các bạn đăng nhập vào gcp, trong bảng điều khiển của gcp các bạn chọn **Source Repositories**

![Capture4.PNG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-capture4%2Fpng-1e-image%2Fpng-129534-1614843778633_Capture4.PNG?alt=media&token=20e531ff-916e-40af-a155-ee77c891f793)

Tiếp theo chọn **Manage SSH Keys**

![Capture5.PNG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-capture5%2Fpng-1e-image%2Fpng-19908-1614844002762_Capture5.PNG?alt=media&token=c8411737-7d6f-4315-be6e-7d86afa2766d)

Bây giờ thì thêm **SSH Key** của m vào thôi.~ nhớ nhấn **Register** nhé



![Capture6.PNG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-capture6%2Fpng-1e-image%2Fpng-10355-1614844034561_Capture6.PNG?alt=media&token=e7969091-1601-4bb6-916d-7f51a52f5e90)

![Capture7.PNG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-capture7%2Fpng-1e-image%2Fpng-14346-1614844080874_Capture7.PNG?alt=media&token=fdb2f70a-2589-4681-b9a7-3e2bd8e6aa31)

Như vậy là m đã thêm **SSHKey** thành công rồi 

Link tham khảo thêm tại đây nhé :  https://www.ssh.com/ssh/keygen/






Chia sẻ cách lấy SSH key và add vào dự án

### 1. Re-render và React.memo
`React.memo ` là 1 HOC( higher order component).
`React.memo` là một chức năng cho phép tối ưu hóa cách các component được render .

Ví Dụ:
```js 

function App() {
  const [skill, setSkill] = React.useState('')
  const [skills, setSkills] = React.useState([
    'HTML', 'CSS', 'JavaScript'
  ])

  function handleChangeInput(event) {
    setSkill(event.target.value);
  }

  function handleAddSkill() {
    setSkills(skills.concat(skill))
  }

  return (
    <>
      <input onChange={handleChangeInput} />
      <button onClick={handleAddSkill}>Add Skill</button>
      <SkillList skills={skills} />
    </>
  );
}

const SkillList = React.memo(({ skills }) => {
  console.log('rerendering');
  return (
    <ul>
    {skills.map((skill, i) => <li key={i}>{skill}</li>)}
    </ul>
  )
})

export default App

```

Khi không sử dụng `React.memo` SkillList sẽ bị re-render mỗi lần thay đổi giá trị input.

`React.memo`  thực hiện một quá trình được gọi là memoization giúp ngăn các component re-render khi không cần thiết ( props không thay đổi thì không cần re-render ). 

`React.memo` sẽ chỉ render lại component nếu props thay đổi và sử dụng pattern [shallowly compare](https://reactjs.org/docs/shallow-compare.html).Vì vậy nếu trong component sử dụng useState hay useContent thì component vẫn sẽ re-render khi state hoặc context thay đổi. Shallowly compare chỉ kiểm tra các key , value giữa prevProps và nextProps nên khi component trở nên phức tạp , dữ liệu nhiều tầng bạn có thể custom comparison 

```js
function MyComponent(props) {
  /* render sử dụng props */
}
function areEqual(prevProps, nextProps) {
  /*
	trả về true khi prevProps = nextProps // ko cần re-render
	ngược lại trả về false
  */
}
export default React.memo(MyComponent, areEqual);

```

### 2. useMemo

useMemo để lưu trữ kết quả của các phép tính tốn kém tài nguyên. quá trình này là `Memoization`.
Khi quá trình `Memoization` được thực hiện, nó sẽ tính toán và lưu kết quả cho từng bộ input và khi gặp lại bộ input đã từng thực hiện thì nó sẽ không tính toán nữa mà trả về kết quả có sẵn luôn.

useMemo cho phép chúng ta memoize , hoặc ghi nhớ kết quả của phép tính phức tạp khi phép tính đó đã được thực hiện.

useMemo trả về một giá trị từ phép tính, sau đó được lưu trữ trong một biến.

useMemo tạo ra một memoized value và chỉ tính toán ra value mới khi dependencies thay đổi. Nó nhận vào 2 tham số là function và dependencies. Nó trả về memoized value và chỉ tính toán value mới khi dependencies thay đổi. Nếu dùng empty dependencies thì không bao giờ tính toán lại value mới.

Ví Dụ :
```js

function App() {
  const [skill, setSkill] = React.useState('')
  const [skills, setSkills] = React.useState([
    'HTML', 'CSS', 'JavaScript', ...thousands more items
  ])

  function handleChangeInput(event) {
    setSkill(event.target.value);
  }

  function handleAddSkill() {
    setSkills(skills.concat(skill))
  }

  const handleRemoveSkill = React.useCallback((skill) => {
    setSkills(skills.filter(s => s !== skill))
  }, [skills])
   
  return (
    <>
      <SearchSkills skills={skills} />
      <input onChange={handleChangeInput} />
      <button onClick={handleAddSkill}>Add Skill</button>
      <SkillList skills={skills} handleRemoveSkill={handleRemoveSkill} />
    </>
  );
}

function SearchSkills() {
  const [searchTerm, setSearchTerm] = React.useState('');  
      
  const searchResults = React.useMemo(() => {
    return skills.filter((s) => s.includes(searchTerm);
  }), [searchTerm]);
    
  function handleSearchInput(event) {
    setSearchTerm(event.target.value);
  }
    
  return (
    <>
    <input onChange={handleSearchInput} />
    <ul>
      {searchResults.map((result, i) => <li key={i}>{result}</li>
    </ul>
    </>
  );
}


export default App

```

 #### useMemo được sử dụng như 1 cách tối ưu hoá hiệu suất , không có sự đảm bảo chắn chắn nào các giá trị sẽ không bị tính lại vì React có thể xoá những cặp dữ liệu đã được ghi nhớ để giải phóng bộ nhớ. khi đó những kết quả này cần được tính lại 1 lần nữa
 
 ### 3. useCallback
 
 useCallback là một hook được sử dụng để cải thiện hiệu suất component.

useCallback giúp tạo ra một memoized callback và chỉ tạo ra callback mới khi dependencies thay đổi. Nó nhận vào 2 tham số là "function" và "dependencies". Nó trả về là memoized callback

useCallback chỉ tạo ra function mới khi dependencies thay đổi. Nếu dùng empty dependencies thì chỉ tạo ra 1 callback 1 lần duy nhất. nếu không có dependencies thì callback sẽ dc tạo mới mỗi lần re-render.

useCallback là chức năng theo cách tương tự như React.memo hoạt động. Nó memoize các function callback, vì vậy nó không được tạo lại trên mỗi lần render.

Ví Dụ :
```js

function SearchEvents() { 
    const handleSearch = useCallback(() => {}, [])  
    return <Search onChange={handleSearch} />; }

```
 
Mỗi lần SearchEvents re-render do có useCallback() nó chỉ tạo function một lần đầu và Search không bị re-render.
 ##### Cảm ơn các bạn đã xem bải viết. Chúc các bạn thành công .
 
## Tham khảo thêm : 
1.  https://reactjs.org/docs/hooks-reference.html
2.  https://reactjs.org/docs/react-api.html
3.  https://reactjs.org/docs/shallow-compare.html

Performance React App Với React.memo , useMemo , useCallback


![reCAPTCHA-logo@2x.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-recaptcha%2Flogo%2F2x%2Fpng-1d-20-1e-image%2Fpng-18160-1613810307256_reCAPTCHA-logo%402x.png?alt=media&token=0a57bf61-1a5e-4585-9434-4b6d1adee92f)

Trang chủ: https://www.google.com/recaptcha/about/

### reCAPTCHA là gì?
reCAPTCHA bảo vệ trang web khỏi gian lận và lạm dụng.
reCAPTCHA sử dụng công cụ phân tích rủi ro tiên tiến và các thách thức thích ứng để ngăn phần mềm độc hại tham gia vào các hoạt động lạm dụng trên trang web. Trong khi đó, người dùng hợp pháp sẽ có thể đăng nhập, mua hàng, xem trang hoặc tạo tài khoản và người dùng giả mạo sẽ bị chặn.

### reCAPTCHA Enterprise là gì ?
reCAPTCHA Enterprise cung cấp trải nghiệm người dùng dễ dàng, nơi khả năng bảo vệ chống gian lận dễ dàng được mở rộng trên các trang web thay vì bị giới hạn ở các trang được chọn. Nó có thể được tích hợp vào ứng dụng di động của bạn bằng dịch vụ dựa trên API.
Ảnh chụp reCAPTCHA Enterprise trên web:
![Ảnh chụp Màn hình 2021-02-20 lúc 15.44.38.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F02%2F20%2Flu%2Fc%2F15%2F44%2F38%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-10566-1613810684312_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-02-20%20lu%CC%81c%2015.44.38.png?alt=media&token=9798a9e9-facd-4563-9425-3f82caca3f70)

### Làm gì để sử dụng reCAPTCHA Enterprise?

**B1. Vào trang [recaptcha]( https://console.cloud.google.com/security/recaptcha) tạo 1 key**

**B2. Sử dụng thư viện [react-google-recaptcha-v3](https://www.npmjs.com/package/react-google-recaptcha-v3)**

Thiết đặt Provider
```js
import {GoogleReCaptchaProvider} from 'react-google-recaptcha-v3';
---
        <GoogleReCaptchaProvider
            reCaptchaKey={'6Lf...'} // key vừa tạo
            useEnterprise={true}
            language={'vi'}
        >
				<ChildrenComponent/>
        </GoogleReCaptchaProvider>
```

**B3. Sử dụng trong component (ví dụ form Login, form Contact)**

```js
import {useGoogleReCaptcha} from 'react-google-recaptcha-v3';
---
	const {executeRecaptcha} = useGoogleReCaptcha();

	const token = await executeRecaptcha('contact');
	formData.robotcheck = {
		event: {
			token,
			siteKey: '6Lf...',
		},
	};
	await axios.post('/api/contact', values);
```

**B4. Xử lý `/api/contact` ở trên (xử lý trên server)**

```js
export default async function handler(req, res) {

  if (!req.body?.robotcheck) {
    return res.status(401).send(`UNAUTHENTICATED`);
  }
  const result = await certify(req.body.robotcheck);
  if ((result?.[0]?.riskAnalysis?.score || 0) < 0.5) {
	//giá trị từ 0-1, nếu <0.5 nghĩa là khả năng robot cao.
    return res.status(401).send(`RISK! maybe robot.`);
  }
	// Xử lý tiếp các tác vụ còn lại...
}

// assessment chính là thuộc tính robotcheck trong body gửi lên.
// chuẩn bị firebase admin json để sử dụng RecaptchaEnterpriseServiceClient
async function certify(assessment) {
  // Create the reCAPTCHA client library.
  const {
    RecaptchaEnterpriseServiceClient,
  } = require('@google-cloud/recaptcha-enterprise');
  const client = new RecaptchaEnterpriseServiceClient(
      {credentials: require('./firebase/classfunc-firebase-admin.json')});

  // format the path to the project (it should be prefaced with projects/).
  const formattedParent = client.projectPath('classfunc-com');
  // assessment should contain event with RESPONSE_TOKEN and RECAPTCHA_SITE_KEY:
  // "{'event': {'token': 'RESPONSE_TOKEN', 'siteKey': 'RECAPTCHA_SITE_KEY'}}"

  const request = {
    parent: formattedParent,
    assessment: assessment,
  };

  return await client.createAssessment(request);
}

```

# BÙMMM 💥
**Chúng ta có 1 trang web có bảo vệ bằng reCAPTCHA**


![Ảnh chụp Màn hình 2021-02-20 lúc 16.15.00.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F02%2F20%2Flu%2Fc%2F16%2F15%2F00%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-667795-1613812815595_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-02-20%20lu%CC%81c%2016.15.00.png?alt=media&token=72e7e07e-f976-4e21-9e2b-87621addb584)

---
Bài viết của chúng ta hôm nay  đến đây là hết rồi. 
Chúc các bạn có 1 cuối tuần vui vẻ.

Bảo vệ website, app với reCAPTCHA Enterprise

### Tìm kiếm là một tác vụ cần thiết trong các site hay app như các trang blog, trang tin tức, thông tin. Sau đây mình sẽ chia sẻ kinh nghiệm tìm kiếm dữ liệu ở local với Fuse.js

Trang web chính thức của Fuse.js: https://fusejs.io/

Fuse.js là một công cụ tìm kiếm từ object, array, cụ thể nếu ta truyền vào 1 json dữ liệu, 1 hoặc nhiều từ khoá, nó sẽ cho ta một kết quả gần nhất với cách ta muốn matching kết quả đó. Các cách matching [được viết ở đây](https://fusejs.io/examples.html#extended-search)

Dưới đây là 1 ví dụ về đoạn code ClassFunc sử dụng để tìm kiếm bài viết trong trang viết blog, sử dụng Fuse.js, react, ant-design và reactn:

```js
import {Avatar, Input, Popover} from 'antd';
import React, {useState} from 'react';
import Fuse from 'fuse.js';
import {useGlobal} from 'reactn';

const {Search} = Input;

export default function SearchComponent() {

  const [gPosts] = useGlobal('gPosts');
  const [found, setFound] = useState(null);

  const fuse = React.useMemo(() => {
    return new Fuse(gPosts, {
      keys: ['title', 'content'],
      useExtendedSearch: true,
    });
  }, [gPosts]);

  function onChange(e) {
    const searchText = e.target.value;
    if (!searchText) return;
    const results = fuse.search(`'${searchText}`);
    const items = results.map(result => result.item);
    // console.log(items);
    setFound(items);
  }

  if (!gPosts) return null;

  return (
      <div className={'search-com'}>
        <Popover content={
          found &&
          <ul>
            {
              found.map(p =>
                  <li
                      onClick={() => window.open(`/edit?id=${p.id}`)}
                  >
                    <a>{p.title}</a> by
                    <Avatar
                        src={p.author.photoURL}/>
                    {p.author.displayName}
                  </li>,
              )
            }
          </ul>
        } title="Found" trigger="hover">
          <Search
              // onSearch={onSearch}
              allowClear
              enterButton
              onChange={onChange}
              placeholder={'search'}
          />
        </Popover>

        <style jsx>{
          `
            .search-com {
              display: flex;
              align-items: center;
              margin-right: 20px;
            }
          `
        }</style>

      </div>
  );
}
```

### Và đây là kết quả 

![Ảnh chụp Màn hình 2021-02-10 lúc 20.51.58.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F02%2F10%2Flu%2Fc%2F20%2F51%2F58%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-185528-1612965124475_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-02-10%20lu%CC%81c%2020.51.58.png?alt=media&token=04129757-3f50-4cbd-ab5c-ec803ea91fa8)

### Giải thích cơ chế
1.  `gPosts` là biến lưu trữ dữ liệu (object hoặc array) được truyền vào để Fuse.js xử lý, ở đây sử dụng biến global `gPosts` được set từ một trang khác.
2.  Search text được truyền vào từ component `Search` của `antd`
3.  Fuse.js xử lý search
4.  Kết quả trả về được set vào biến `found` bằng hàm `setFound` và hiển thị.

## Kết luận
### Ưu điểm
- Tìm kiếm được tối ưu hoá tốc độ vì không phải request lên server mà dùng dữ liệu có sẵn ở local.
- Dễ thực hiện: json + từ khoá -> Fuse.js xử lý -> Kết quả.
### Nhược điểm
- Chỉ thực hiện search những gì có trên local nên nếu muốn tìm kiếm trên db có nhiều dữ liệu hơn phải dùng phương pháp khác.

---
p.s ClassFunc đang thực hiện những dự án sáng tạo và hi vọng có ích và giải quyết được nhiều nỗi đau của cộng đồng. Ae bạn bè nào có hứng thú với công nghệ, muốn tìm hiểu và challenge với công nghệ mới thì hãy gửi email về `hello@classfunc.com` hoặc gọi tới sđt 0966510002, mình cùng mang lại nhiều điều có ý nghĩa cho cộng đồng mình.

Cảm ơn các bạn.

Tìm kiếm với Fuse.js

Đây là một thư viện đóng gói mã nguồn của mình nhanh chóng, giúp cho việc tạo npm package thật đơn giản và dễ hiểu, việc còn lại của bạn chỉ là làm thế nào để code của mình chạy cho đúng.
Ta bắt đầu nhé.
Trước tiên cài đặt create-react-library:
```bash
npm install -g create-react-library
or
npx create-react-library
```

Sau khi làm theo các hướng dẫn ta sẽ được thư mục như thế này.
![tree.svg](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-tree%2Fsvg-1e-image%2Fsvg%2Bxml-4541-1612546110993_tree.svg?alt=media&token=2c2a1d8c-6991-4a6f-9f3c-b74ea0267936)

Thư mục example là thư mục để bạn run chạy test package của mình, để start.

```bash
cd example

yarn start
```

Chúng ta đã làm quen với Component của React thì đều biết rằng để sử dụng lại các component thì mình phải truyền Input và xác định xem sẽ xử lý thế nào để đưa ra Output đúng như mình mong muốn, cho nhiều trường hợp cụ thể.

Vậy package hoạt động cũng như vậy, cùng tìm hiểu file "/src/index.js"
```js
import React from 'react'
import styles from './styles.module.css'

export const ExampleComponent = ({ text }) => {
  return <div className={styles.test}>Example Component: {text}</div>
}
```
ở đây, ExampleComponent  sẽ nhận props truyền vào là {text} (ví dụ text = "ClassFunc") và return ra ngoài màn hình textField : "Example Component: ClassFunc". thật đơn giản và dễ hiểu phải không?
Đây là file index mình đã thực hiện: 

```js
import React from "react";
import { Button } from "antd";
import styles from "./styles.module.css";

export const CLFButtonSVG = ({
                               iconComponent,
                               name,
                               onClick,
                               size,
                               disable,
                               loading,
                               width,
                               height,
                               key,
                               margin,
                               padding,
                               block,
                               className,
                               minWidth,
                               minHeight,
                               background = "#1790FF",
                               borderColor = "#1790FF",
                               iconRevert = false
                             }) => {
  return (
    <Button
      className={`${styles.primary} ${iconRevert ? styles.flexRevert : styles.flex} ${className}`}
      icon={iconComponent ?
        {
          ...iconComponent,
          props: {
            ...iconComponent.props,
            className: iconRevert ? styles.iconBtnRevert : styles.iconBtn
          }
        } :
        null}
      size={size}
      onClick={onClick}
      disabled={disable}
      loading={loading}
      style={{
        width,
        height,
        margin,
        padding,
        minWidth,
        minHeight,
        background,
        borderColor
      }}
      key={key}
      block={block}
    >
      <div className={iconRevert ? styles.buttonNameRevert : styles.buttonName}>
        {name}
      </div>
    </Button>
  );
};
```

Mình sử dụng styles modules css để đóng gói, 
```css
@import '~antd/dist/antd.css';
/* add css module styles here (optional) */

.flex {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.flexRevert {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
}

.grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important
}

.primary {
  margin: 5px;
  min-width: 125px;
  min-height: 35px;
  font-weight: 700 !important;
  color: #FFF !important;
  font-size: 1.2rem;
  border-radius: 25px !important;
  position: relative !important;
}

.primary:hover {
  opacity: 0.8 !important;
  border-color: initial !important;
  color: #FFF !important
}

.primary:focus {
  opacity: 0.8 !important;
  border-color: initial !important;
  color: #FFF !important
}

.primary .iconBtn {
  max-width: 31px !important;
  position: absolute !important;
  left: 1px !important;
  margin-right: 10px !important;
}

.primary .iconBtnRevert {
  max-width: 31px !important;
  position: absolute !important;
  right: 1px !important;
  margin-left: 10px !important;
}

.primary .ant-btn-loading-icon {
  position: absolute !important;
  top: 50% !important;
  margin-top: -0.5em !important;
}

.primary .iconBtn span {
  margin-left: 20px !important;
}

.primary .buttonName {
  margin-left: 20px !important;
}

.primary .buttonNameRevert {
  margin-right: 20px !important;
}
```

Sau khi thực hiện và kiểm tra các chức năng xong, có để publish ngay lên NPM bằng tài khoản của mình.
```bash
npm login

npm publish
```

À đừng quên chỉnh sửa file Readme.md để hướng dẫn người dùng sử dụng package của bạn nhé :D.
Đây là thành quả của mình.


![Ảnh chụp Màn hình 2021-02-06 lúc 00.46.46.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F02%2F06%2Flu%2Fc%2F00%2F46%2F46%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-474914-1612547211831_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-02-06%20lu%CC%81c%2000.46.46.png?alt=media&token=293d5ca8-5d68-472a-bdcc-8c3a06d86eea)

Demo link: https://duongdam.github.io/react-antd-button-svg-icons/
Package link: https://www.npmjs.com/package/react-antd-button-svg-icons
Resource: https://github.com/duongdam/react-antd-button-svg-icons

Tài liệu tham khảo: 
1. https://www.npmjs.com/package/create-react-library
2. https://www.npmjs.com/

Tạo NPM Package React đầu tiên với [create-react-library]

Dưới đây là một số hình ảnh thực tế mà [ClassFunc](https://classfunc.com) deploy [Ví Của Tui iOS](https://apps.apple.com/vn/app/v%C3%AD-c%E1%BB%A7a-tui/id1545730083?l=vi) lên AppStore bằng [Expo](https://expo.io/), hi vọng giúp ích cho ae nào đấy đang muốn làm App kiếm thêm vitamin T 😀

![build ios-expo.svg](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-build%2Fios%2Fexpo%2Fsvg-10-1d-1e-image%2Fsvg%2Bxml-206092-1611919020901_build%20ios-expo.svg?alt=media&token=903a8b88-fc67-47d1-9105-6cb117787502)

Bỏ qua bước đăng ký Apple các thể loại thì tóm tắt các bước như sau:
1. Build bằng lệnh ở local
2. Download file .ipa
3. Chuyển giao .ipa lên StoreConnect bằng Transporter
4. TestFlight
5. Submit phiên bản mới. 

## 1. Build bằng lệnh ở local
Chạy lệnh dưới trong thư mục project.
```sh
expo bi -t archive
```
Điền thông tin tài khoản Apple nếu được hỏi. Quá trình có log tương tự như:

```sh

Checking if there is a build in progress...

Accessing credentials for classfunc in project vicuatui
✔ Do you have access to the Apple account that will be used for submitting this app to the App Store? … yes

› Log in to your Apple Developer account to continue
✔ Apple ID: … thanh@classfunc.com
› Using password for thanh@classfunc.com from your local Keychain
  Learn more: https://docs.expo.io/distribution/security#keychain
✔ Logged in, verify your Apple account to continue
Two-factor Authentication (6 digit code) is enabled for thanh@classfunc.com. Learn more: https://support.apple.com/en-us/HT204915

✔ How do you want to validate your account? … device / sms
✔ Please enter the 6 digit code … 860138
✔ Valid code
✔ Logged in and verified
› Team CLASSFUNC SOFTWARES JOINT STOCK COMPANY (98VU36Q5CS)
› Provider CLASSFUNC SOFTWARES JOINT STOCK COMPANY (122472306)
✔ Bundle identifier registered com.classfunc.vicuatui
✔ Synced capabilities
✔ Fetched Apple distribution certificates
✔ Successfully validated Distribution Certificate against Apple Servers
✔ Fetched Apple push keys
✔ Successfully validated Push Key against Apple Servers
The provisioning profile we have on file cannot be validated on Apple's servers.
✔ Successfully performed best effort validation of Provisioning Profile.

Project Credential Configuration:
  Experience: @classfunc/vicuatui, bundle identifier: com.classfunc.vicuatui
    Provisioning profile (ID: ---------)
    Apple Team ID: 98VU36Q5CS,  Apple Team Name: ---------

  Distribution Certificate - Certificate ID: -----
    Apple Team ID: 98VU36Q5CS,  Apple Team Name: ---------
  Push Notifications Key - Key ID: 73U3797KNT
    Apple Team ID: 98VU36Q5CS,  Apple Team Name: ---------

- Expo SDK: 40.0.0
- Release channel: default
- Workflow: Managed

Building optimized bundles and generating sourcemaps...
Starting Metro Bundler
Finished building JavaScript bundle in 118908ms.

Bundle                     Size
┌ index.ios.js          4.94 MB
├ index.android.js      4.93 MB
├ index.ios.js.map      15.8 MB
└ index.android.js.map  15.8 MB

💡 JavaScript bundle sizes affect startup time. Learn more: https://expo.fyi/javascript-bundle-sizes

Analyzing assets
Saving assets
No assets changed, skipped.

Processing asset bundle patterns:
- /Users/thanh/WebstormProjects/vicuatui/assets/**/*

Uploading JavaScript bundles
{"name":"xdl-detach","hostname":"thanh-2.local”,….
Running postPublish hook: expo-postpublish-slack-notify
Running postPublish hook: sentry-expo/upload-sourcemaps
Publish complete

📝  Manifest: https://exp.host/@classfunc/vicuatui/index.exp?sdkVersion=40.0.0 Learn more: https://expo.fyi/manifest-url
⚙️   Project page: https://expo.io/@classfunc/vicuatui Learn more: https://expo.fyi/project-page

Checking if this build already exists...

Posted notification to Slack!
Build started, it may take a few minutes to complete.
You can check the queue length at https://expo.io/turtle-status

You can monitor the build at

 https://expo.io/accounts/classfunc/builds/808d4da1-e789-4783-add8-76705fbfc182

Waiting for build to complete.
You can press Ctrl+C to exit. It won't cancel the build, you'll be able to monitor it at the printed URL.
⠴ Created release 4.4-r.GgOmdU9WS.

⠋ Build in progress...> Found 4 release files
> Analyzing 4 sources
> Rewriting sources
> Adding source map references
> Bundled 4 files for upload
> Uploaded release files to Sentry
> File upload complete

Source Map Upload Report
  Minified Scripts
    ~/index.android.bundle (sourcemap at index.android.bundle.map)
    ~/main.jsbundle (sourcemap at main.jsbundle.map)
  Source Maps
    ~/index.android.bundle.map
    ~/main.jsbundle.map

⠇ Build in progress...Finalized release 4.4-r.GgOmdU9WS.

✔ Build finished.
Successfully built standalone app: https://expo.io/artifacts/640ddfe7-5d78-4d10-9f8b-d230eae6c41f

You can now publish to the App Store with Transporter.app (​https://apps.apple.com/us/app/transporter/id1450874784​) or expo upload:ios. Learn more: https://docs.expo.io/distribution/uploading-apps/

Process finished with exit code 0
```

Chạy xong lệnh này ông [Expo](https://expo.io) sẽ build file .ipa cho mình luôn, chờ tầm 5~phút gì đấy tuỳ độ to của dự án 😁
## 2. Download file .ipa
Lấy file .ipa đã được build ở [Expo](https://expo.io) (nút màu xanh xanh)


![0 ipa-download.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-0%2Fipa%2Fdownload%2Fpng-10-1d-1e-image%2Fpng-66883-1611911583739_0%20ipa-download.png?alt=media&token=7474c788-f9bb-4144-bbeb-b2cd9eadd019)

## 3. Chuyển giao .ipa lên StoreConnect bằng Transporter
Mở [Transporter](https://apps.apple.com/us/app/transporter/id1450874784) và kéo thả file .ipa đã download về vào đó.

![1 transport-ipa.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-1%2Ftransport%2Fipa%2Fpng-10-1d-1e-image%2Fpng-198976-1611911541087_1%20transport-ipa.png?alt=media&token=a936ad1f-76e3-413c-ac12-fb3cc79ac252)


## 4. TestFlight
5~10 phút sau ta sẽ nhận đc email từ Apple bảo là ông có thể test bằng TestFlight rồi đấy

![2 after 5min receive-email.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-2%2Fafter%2F5min%2Freceive%2Femail%2Fpng-10-10-10-1d-1e-image%2Fpng-90635-1611910314312_2%20after%205min%20receive-email.png?alt=media&token=d172b6ae-f482-46b1-9574-6a58ea867b34)

Sau đó mình kiểm tra trong [Apple Store Connect](https://appstoreconnect.apple.com/apps) thôi. 

![3 test-flight.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-3%2Ftest%2Fflight%2Fpng-10-1d-1e-image%2Fpng-203859-1611911489772_3%20test-flight.png?alt=media&token=0c8d2c4c-3a56-4407-a84c-935dc9b4e3be)

## 5. Submit phiên bản mới. 
Trong Connect mình tạo thêm phiên bản trùng với phiên bản mình đã build, xong điền một số thông tin update, mấy cái khác để nguyên nếu ko có thay đổi gì. Xong Save. Đợi 1,2 ngày cho ông Apple review, kết quả sẽ được Apple báo về email 😀

![4 submit new version.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-4%2Fsubmit%2Fnew%2Fversion%2Fpng-10-10-10-1e-image%2Fpng-242559-1611911701861_4%20submit%20new%20version.png?alt=media&token=1d0dd579-15ac-4c47-b0a5-59963df81667)

## Kết luận
Phát triển App là một nghề hot trước đây, bây giờ và tương lai rồi, ae nào chưa có việc thì học code đi, vừa dễ kiếm công ăn việc làm, ổn định lương cao mà còn thông não, ứng dụng vào cuộc sống nhiều nhiều.

ClassFunc release Ví Của Tui cả 3 platform iOS, Android, Web. Bạn nào có hứng thú với code thì vào [ClassFunc](https://classfunc.com) cống hiến nhé 👍

* **[iOS App](https://apps.apple.com/vn/app/v%C3%AD-c%E1%BB%A7a-tui/id1545730083?l=vi)**
* **[Android App](https://play.google.com/store/apps/details?id=com.classfunc.vicuatui)**
* **[Web App](https://vicuatui.com)**



Hình ảnh thực tế khi build iOS app bằng Expo

Fix lỗi eneclor sau khi trả lời Book không tạo được file pdf và tự động đặt hàng sách đến [https://www.seichoku.com/](https://www.seichoku.com/) sau khi trả lời xong.

Lỗi như sau: 

![image.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-image%2Fpng-1e-image%2Fpng-36235-1611750474246_image.png?alt=media&token=9ab14cbe-d771-4b58-b248-fed7a3504ff5)

Project Enecolor sử dụng Phantomjs để tạo crontab thực thi nhiệm vụ tạo file PDF và gửi file tới Seichoku đơn vị đặt sách thông qua API của Seichoku cung cấp.
Kiểm tra file Task Common theo đường dẫn thư mục file: `src/Shell/Task/QueueCommonTask.php`
```php
class QueueCommonTask extends QueueTask
{

  public function runBatch($shell)
  {
    $now = new Time();
    $HH_MM = $now->i18nFormat("HHmm");
    $minute = $now->i18nFormat("mm");

     if ($minute == "00" || $minute == "30") {

        $taskStepClass = 'QueueBatchStep';
        $taskStep = $shell->{$taskStepClass};
        $taskStep->main($HH_MM, $shell);

        $taskAutoClass = 'QueueBatchAuto';
        $taskAuto = $shell->{$taskAutoClass};
        $taskAuto->main($HH_MM, $shell);

        $taskStandardClass = 'QueueBatchStandard';
        $taskAuto = $shell->{$taskStandardClass};
        $taskAuto->main($HH_MM, $shell);
     }

     // 送信結果反映バッチ
     if ($minute == "10" || $minute == "40") {
        $taskSentMailClass = 'QueueBatchGetSentMailResult';
        $taskStep = $shell->{$taskSentMailClass};
        $taskStep->main();
     }

      if ($minute == "45") {
        // PDF生成処理〜原稿登録バッチ
        $taskEnecolorBookClass = 'QueueBatchEnecolorBook';
        $task = $shell->{$taskEnecolorBookClass};
        $task->main($now);
      }

    if ($minute == "00") {
      // 統計バッチ
      // 統計バッチは１時間ごとに実行する。
      $taskStatisticsClass = 'QueueBatchStatistics';
      $task = $shell->{$taskStatisticsClass};
      $task->main($HH_MM, $shell);
    }

    return true;
  }
}
```

Trước tiên cần truy cập vào server "Enecolor-Prod-Batch-env" qua SSH:
```bash
cd .ssh &&
sudo ssh -i "Enecolor-Production.pem" ec2-user@ec2-54-199-180-185.ap-northeast-1.compute.amazonaws.com
```

Sử dụng lệnh để tạo bằng tay setting crontab Phantomjs.
```bash
crontab -e 
```

để kiểm tra thông tin cài đặt của phantomjs, nếu không có dữ liệu tiến hành điền thông số sau và save lại 
```bash 
* * * * * cd /var/www/html && sudo chmod -R 777 /var/www/html/bin/cake && sudo chmod -R 777 /var/www/html/tmp/cache/models && bin/cake mail_queue runworker
```

Nhấn ESC, :x để lưu và thoát.

Restat lại Ec2 "Enecolor-Prod-Batch-env".

Ngoài ra, cần kiểm tra lại việc gọi lên API của Seichoku xem có thành công không?
Các API cần lưu ý: 

```text
Đăng kí in sách với Seichoku
https://www.seichoku.com/user_data/registerDraft.php
```
Sau khi đăng kí thành công, phía Seichoku sẽ tiến hành duyệt đơn đăng kí và sẽ phản hồi kết quả về webhooks : 

```
https://enecolor-batch.geniam.com/api/v1/callback/book
```
Ví dụ request đăng kí đặt sách CURL : 

```js
curl --location --request POST 'https://www.seichoku.com/user_data/registerDraft.php' \
--header 'Content-Type: application/json' \
--header 'Cookie: [Cookie] \
--data-raw '{
    "param": [Param]
}'
```

Với param là Encode ([https://www.base64decode.org/](https://www.base64decode.org/)) từ : 

```json
{
  'testmode': 0,
  'access_key': [AccessKeySeichokuAccount]',
  'secret_key': [SecretKeySeichokuAccount]',
  'customer_id': [ID],
  'list': [
    {
      'path': '[path S3 File]',
      'filename': '[fileNAME].pdf',
      'easy': 0,
      'nocover': 0,
      'page_size': 4,
      'niniwidth': null,
      'niniheight': null,
      'bind_type': 2,
      'bind_direction': 2,
      'paper_type': 11,
      'text_color_type': 1,
      'cover_paper_data': '101,2,1',
      'cover_thick': 0,
      'asobi': 0,
      'uracover': '1',
      'nuritasi': 1,
      'zenmen': 0,
      'rot_num': 1,
      'hyousi_path': '[path S3 File]',
      'hyousi_filename': '[fileNAME]_cover.png',
    }],
}
```
API Document: [製本直送API仕様書1.3.3.pdf](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-%2Fapi%2F1%2F3%2F3%2Fpdf-127t-ppc-tnk-1401-jml-qeo-pno-1e-1e-1e-application%2Fpdf-1265178-1611750316555_%E8%A3%BD%E6%9C%AC%E7%9B%B4%E9%80%81API%E4%BB%95%E6%A7%98%E6%9B%B81.3.3.pdf?alt=media&token=c392c453-879d-46e0-b006-016ba3e42ea3)

Kiểm tra  debug và error logs (cli-debug.log, cli-error.log) trong thư mục logs của thư mục : 
```bash
cd /var/www/html/logs
``` 
Xong crontab sẽ thực hiện task và mỗi phút thứ 45 như trên cài đặt ở "QueueCommonTask.php",
check log để kiểm tra nhé


Fix lỗi Enecolor sau khi trả lời Book không tạo được file pdf và tự động đặt hàng sách đến www.seichoku.com

**Analytics giúp ta đo lường số lượt truy cập vào website, số lượng người dùng, lượt nhấp trang... giúp phát triển business của công ty và hiểu thị hiếu khách hàng.
Bài viết này mình chia sẻ cách cài đặt Google Analytics (GA) vào website thường và NextJS**

Tóm tắt các bước:
1. Đăng  ký GA
2. Cài đặt GA vào website


## 1. Đăng  ký GA

### 1.1 Đăng ký 1 tài khoản nếu bạn chưa có tại link https://analytics.google.com/  

> Vào Phần `Quản trị` và làm theo hướng dẫn.

![Ảnh chụp Màn hình 2021-01-25 lúc 20.33.03.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F01%2F25%2Flu%2Fc%2F20%2F33%2F03%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-234962-1611581708976_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-01-25%20lu%CC%81c%2020.33.03.png?alt=media&token=152db4b7-0882-4c19-a533-0dfe02f45656)

### 1.2 Sau 1.1 ta sẽ lấy được thông tin Mã Đo Lường như hình dưới

![Ảnh chụp Màn hình 2021-01-25 lúc 20.31.54.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F01%2F25%2Flu%2Fc%2F20%2F31%2F54%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-380945-1611582011806_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-01-25%20lu%CC%81c%2020.31.54.png?alt=media&token=fd9af82a-ff33-4398-8c77-39b303a42cd7)

## 2. Cài đặt GA vào website

Làm như `Hướng dẫn gắn thẻ` ở trên, nếu dùng NextJS thì ta đi tiếp xuống dưới.

## Cài đặt cho NextJS

Nếu website của mình dùng NextJS thì hướng dẫn xem tại đây, rất cụ thể và chi tiết https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics

Có thể tóm tắt lại 3 bước như sau.

1/  Tạo file `lib/gtag.js`
```js
export const GA_TRACKING_ID = 'G-...' //mã đo lường vừa tạo

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}
```

2/ Thêm đoạn code này  vào `_app.js`

```js

import {useEffect} from 'react';
import * as gtag from '../lib/gtag'
import {useRouter} from 'next/router';
...
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])
```

3/ Thêm đoạn code này vào `_document.js`

```js
import Document, {Head, Html, Main, NextScript} from 'next/document';
import { GA_TRACKING_ID } from '../lib/gtag'

...

          <Head>
            {/* Global Site Tag (gtag.js) - Google Analytics */}
            <script
                async
                src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
            />
            <script
                dangerouslySetInnerHTML={{
                  __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
                }}
            />
          </Head>
```

## Kiểm tra kết quả.
Sau khi deploy lại website và truy cập vào GA ta sẽ thấy thông số pageview


![Ảnh chụp Màn hình 2021-01-25 lúc 21.09.07.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F01%2F25%2Flu%2Fc%2F21%2F09%2F07%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-565382-1611583752955_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-01-25%20lu%CC%81c%2021.09.07.png?alt=media&token=394c4bee-24f3-4836-a197-b49b36866632)

Cheers 🗽

Cài đặt Google Analytics (GA) cho website

**Cảm ơn OB Đông Du với những người anh em đã thân quen và chưa từng gặp.
Hi vọng năm 2021 chúng ta đến với nhau gần hơn, mang lại nhiều giá trị và trải nghiệm cùng nhau xuất sắc hơn nữa nữa.**

ClassFunc đang không ngừng tuyển dụng những người cùng ăn, cùng ngủ, cùng làm và cùng trải nghiệm. Tạo ra những sản phẩm mang lại lợi lạc cho bạn và xã hội.

Mọi liên hệ xin inbox [Facebook](https://fb.me/bi.katana) hoặc email `thanh@classfunc.com`  (Thành 0966510002)

Vì lợi lạc của bạn và xã hội.

![classfunc.jpg](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-classfunc%2Fjpg-1e-image%2Fjpeg-2377351-1611492774929_classfunc.jpg?alt=media&token=a448d63b-2f82-42a0-b8c3-faf272c25eb0)

![IMG_7391.jpg](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-img%2F7391%2Fjpg-2v-1e-image%2Fjpeg-2319392-1611492921203_IMG_7391.jpg?alt=media&token=a7a87ad5-b151-4e4c-8361-e8bfb939ae5b)


![IMG_7401.JPG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-img%2F7401%2Fjpg-2v-1e-image%2Fjpeg-468451-1611479657000_IMG_7401.JPG?alt=media&token=698d2bf9-c320-4fb7-98ea-f657ea775af2)

![IMG_7400.JPG](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-img%2F7400%2Fjpg-2v-1e-image%2Fjpeg-323874-1611479469000_IMG_7400.JPG?alt=media&token=ec094b23-d5ce-4928-afab-23ee47dc6388)


![1.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-1%2Fpng-1e-image%2Fpng-44628-1611333313000_1.png?alt=media&token=8031aeaf-c8cc-4708-818c-fccbfd934159)

![2.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-2%2Fpng-1e-image%2Fpng-41818-1611333313000_2.png?alt=media&token=b0b9a0b2-9aa0-4e2c-a306-a41240747458)


Lời cảm ơn OB Đông Du Miền Bắc.

![CFAuthProvider.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-cfauthprovider%2Fpng-1e-image%2Fpng-14556-1610775071165_CFAuthProvider.png?alt=media&token=1c64cf84-d39c-4379-8e27-6076f1e19982)

Khi chúng ta làm một app có đăng nhập thì chúng ta phải giữ trạng thái đăng nhập của app nếu người dùng đã login và redirect tới trang login nếu người dùng không ở trạng thái đã login (logout).
Bài viết này mình chia sẻ kinh nghiệm về cách lưu trữ trạng thái login logout của app khi dùng Firebase trong React. Mời các bạn tham khảo. 

Video dưới là cách Ví Của Tui sử dụng [CFAuthProvider](https://gist.github.com/zerolethanh/c56fc309f2628550141f16c5a438b2af) 
<iframe width="100%" height="315" src="https://www.youtube.com/embed/e9ypLLrw7fA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Chuẩn bị:
1. Kiến thức về Context (xem tại https://reactjs.org/docs/context.html)

Tóm tắt các bước:
1. Tạo firebase app (nếu chưa có)
2. Sử dụng [CFAuthProvider](https://gist.github.com/zerolethanh/c56fc309f2628550141f16c5a438b2af)

## 0. CFAuthProvider
```js
import React, {createContext, useEffect, useState} from 'react';
import {useGlobal} from 'reactn';
import {useAuthState} from 'react-firebase-hooks/auth';
import {useDocument} from 'react-firebase-hooks/firestore';

const CFAuthContext = createContext({});

const useUser = ({auth, firestore}) => {
  const [gUser, setGUser] = useGlobal('user');
  const [user, loading, error] = useAuthState(auth);
  const [doc, docLoading, docError] = useDocument(
      user?.uid ? firestore?.doc(`users/${user.uid}`):undefined,
  );
  const [ready, setReady] = useState(false);

  useEffect(() => {
    if (loading || docLoading) return;
    if (!user) {
      setGUser(undefined, () => {
        setReady(true);
      });
      return;
    }

    setGUser({
      ...user.toJSON(),
      docId: doc?.id,
      ...doc?.data(),
    }, () => {
      setReady(true);
    });

  }, [user, loading, doc, docLoading, error, docError]);

  return {
    user: gUser || user?.toJSON(),
    loading: loading || docLoading || !ready,
    error: {error, docError},
  };
};

const CFAuthProvider = ({auth, firestore, children}) => {
  const val = useUser({auth, firestore});
  return (
      <CFAuthContext.Provider value={val}>
        {children}
      </CFAuthContext.Provider>
  );
};

export {
  CFAuthProvider,
  CFAuthContext,
};
```

## 1. Tạo firebase app

1.1 Nếu chưa có firebase config tạo 1 project Firebase ở https://console.firebase.google.com/u/0/

1.2 Tạo file init app Firebase 

**firebaseConfig.js**
```js
const firebase = require('firebase/app');
require('firebase/auth')
require('firebase/firestore')

// config vừa tạo
const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "vicuatui.firebaseapp.com",
  databaseURL: "https://vicuatui.firebaseio.com",
  projectId: "vicuatui",
	...
}
firebase.initializeApp(firebaseConfig);

const db = firebase.firestore()
const auth = firebase.auth()

module.exports = exports = {
  db,
  auth,
}
```

## 2. Sử dụng [CFAuthProvider](https://gist.github.com/zerolethanh/c56fc309f2628550141f16c5a438b2af)

**App.js**
```js
import { auth, db } from "./firebaseConfig";
import { CFAuthContext, CFAuthProvider } from "./CFAuthProvider";

export default function App() {
	return (
		<CFAuthProvider
			auth={auth}
			firestore={db}
		>
			<CFAuthContext.Consumer>
				{
					({ loading }) => {
						if (loading) return 'Loading...'
						return (
							'Màn hình Login hoặc màn hình chính'
						)
					}
				}
			</CFAuthContext.Consumer>
		</CFAuthProvider>
  );
}
```

## Giải thích cơ chế:

Trong `CFAuthProvider.js` mình có:
* `useGlobal` để lưu trữ biến dùng toàn cục (app) (tìm hiểu thêm trong [ReactN](https://github.com/CharlesStover/reactn))

* `useAuthState` của [react-firebase-hooks](https://github.com/CSFrequency/react-firebase-hooks) sẽ lắng nghe trạng thái login logout của người dùng
* `useDocument` lắng nghe sự thay đổi dữ liệu của người dùng đó.

quy trình là `useAuthState`,`useDocument` > set vào biến user để sử dụng trong app.

return trong `useUser` để sử dụng trong `<CFAuthContext.Consumer>`

Chúc các bạn Thành Công 🖖


Giữ trạng thái login logout với CFAuthProvider

Có nhiều cách để custom giao diện khi bạn sử dụng các framworks khác nhau như Material Ui, Antd design.
Mình sẽ đi vào Custom giao diện với React js + Material Ui, cụ thể ở đây là custom các màu chủ đạo cho website của bạn nhé.

Trước tiên tạo Context Provider Theme.

```js
export const UseThemeContext = createContext();

export const ThemeProviderContext = ({children}) => {
  const theme = useThemeConText();
  return (
      <UseThemeContext.Provider value={theme}>
        <ThemeProvider theme={theme}>
          {children}
        </ThemeProvider>
      </UseThemeContext.Provider>
  );
};

export const useThemeConText = () => {
  const [colors] = useGlobal('colors');
  const [theme, setTheme] = useState(createMuiTheme({}));

  console.log(colors);

  useEffect(() => {
    if (!colors?.primary)
      return;

    setTheme(createMuiTheme({
      props: {
        primaryColor: colors.primary,
        secondaryColor: colors.secondary,
      },
      // and more setting to use
    }));
  }, [colors]);

  return theme;
};
```


Sau khi khởi tạo xong mui-theme, tiến hành thực hiện khai báo ThemeProviderContext ở file Index.js của App (Đã bao gồm ThemeProvider của Material Ui)

```js
ReactDOM.render(
    <React.StrictMode>
      <ThemeProviderContext>
        <App/>
      </ThemeProviderContext>
    </React.StrictMode>,
    document.getElementById('root'),
);
```

Sau đó sử dụng props này ở bất cứ đâu bạn muốn với thuộc tính theme.props.primaryColor và  theme.props.secondaryColor: 

```js
const useStyles = makeStyles(theme => ({
  divRoot1: {
    background: theme.props.primaryColor,
    width: '100%',
    height: '40vh',
    position: 'relative',
  },
  divRoot2: {
    background: theme.props.secondaryColor,
    width: '100%',
    height: '40vh',
    position: 'relative',
  },
  Button: {
    width: 250,
    height: 50,
    background: theme.props.primaryColor,
    color: theme.props.secondaryColor,
    marginBottom: 20,
  },
}));
```

Link github demo code tại đây: [https://github.com/duongdam/create-mui-theme-matarial-ui-custom-with-react-js-context-provider](https://github.com/duongdam/create-mui-theme-matarial-ui-custom-with-react-js-context-provider)

Custom giao diện màu trong React

Dev rất thường xuyên phải xử lý những dữ liệu từ API hay server trả về.

Kiểu Date sẽ xuất hiện trong các biến như `created_at`, `updated_at`

Việc xử lý sẽ gặp khó khăn nếu mỗi người lưu một kiểu riêng (int, string, Date, timestamp), nhưng vẫn hợp lệ với kiểu Date. Vậy ta sẽ viết 1 hàm trong JS để xử lý được tất cả những dạng dữ liệu này. 

Phương pháp ở đây là chúng ta sẽ quy mọi  kiểu dữ liệu về mili-seconds, từ dạng này ta sẽ dùng `new Date(mili-seconds)` để tạo kiểu Date; 

Ta có code như sau:

```js dateUtils.js
import moment from 'moment';

function isDate(d) {
  return d instanceof Date && !isNaN(d.valueOf());
}

const toMs = (ts) => {
  if (!ts) return null;
  if (Number.isInteger(ts)) return ts;
  if (isDate(ts)) return ts.getTime();
  if (moment.isMoment(ts)) return ts.valueOf();
  // trường hợp dữ liệu timestamp (ví dụ của firestore)
  // firestore Client SDK trả về ts = {seconds, nanoseconds}
  // firestore Admin SDK trả về ts = {_seconds, _nanoseconds}
  if (ts?.seconds || ts?._seconds) {
    return ((ts?.seconds || ts?._seconds) +
        (ts?.nanoseconds || ts?._nanoseconds || 0) / 1e9) * 1000;
  }

  // trường hợp còn lại sẽ xử lý với Date String;
  const date = new Date(ts);
  return date?.getTime();
};

const toDate = (ts) => {
  return new Date(toMs(ts));
};

export {
  toDate,
  toMs,
};

```

Chúc các bạn có trải nghiệm vui vẻ với Date 💯


xử lý Date trong JavaScript

Thông tin Day.js có thể xem tại https://day.js.org/

Về cơ bản thì Day.js với Moment.js giống nhau về cách sử dụng, nhưng mình bắt đầu dùng nó vì sự nhỏ gọn của nó.

Hiện tại cty mình vẫn đang dùng Moment.js vào nhiều dự án, nhưng cũng đang chuyển dần sang sử dụng Day.js.

Ví dụ thiết đặt tiếng Việt trong React:
```js
import dayjs from 'dayjs';
const localizedFormat = require('dayjs/plugin/localizedFormat');
dayjs.extend(localizedFormat);
//tiếng việt
require('dayjs/locale/vi');
dayjs.locale('vi'); // use locale globally
//timezone
const utc = require('dayjs/plugin/utc'); // dependent on utc plugin
const timezone = require('dayjs/plugin/timezone');
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault(dayjs.tz.guess());


```

Chúc các bạn có 1 ngày làm việc hiệu quả 🤗

p/s:  https://momentjs.com/docs/#/-project-status/



Giới thiệu Day.js


![1_VEXMXDkq01cyq8GTpdcRLA.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Ftest%2Fa8b30b6e-1bae-4f50-b811-e97aba71c65f?alt=media&token=dd40a7f2-4d88-4b8f-a7de-cf87909e66d5)

Như tiêu đề gần đây m mới tìm hiểu **Next.js** thì  **Next.js** hỗ trợ rất nhiều cách tích hợp CSS 

Có một cách rất hay m muốn chia sẻ với các bạn đó là 

**Thêm CSS cấp thành phần**

Cách này rất hay đó là các bạn sử dụng  *[name].module.css*

Ví dụ thực tế luôn đó là trong thư mục *component/* các bạn tạo một component chẳng hạn như

*component/HomeScreen.js*

lúc này để css các bạn chỉ việc tạo thư mục  *component/HomeScreen.module.css* như thế này chẳng hạn .!

```css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
    color: white;
    background-color: red;
}

.redColor {
    color: blue;
    font-size: 40px;
}

.container {
    margin-top: 100px;
}
```

và trong *component/HomeScreen.js* các bạn gọi ra bằng cách 

**import styles from './HomeScreen.module.css'**

như vậy là có thể sử dụng rồi 

```html
 <p className={styles.redColor}>  Hello Work </p>
```
						
Các bạn có thể tham khảo thêm tại đây [https://nextjs.org/docs/basic-features/built-in-css-support](https://nextjs.org/docs/basic-features/built-in-css-support)
	







Css trong Next JS

![bảo vệ password khi sử dụng cloudbuild.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Fba%CC%89o%20ve%CC%A3%CC%82%20password%20khi%20su%CC%9B%CC%89%20du%CC%A3ng%20cloudbuild.png?alt=media&token=470c461d-6f01-4d79-a2c6-524ce713ee24)


> Bạn muốn login vào 1 service nào đó khi build. Service đó yêu cầu mật khẩu nhưng bạn lại  không muốn mọi người biết mật khẩu của mình. KMS là cách bạn bảo vệ mật khẩu khi build với GCP CloudBuild

Tóm tắt nội dung:
1. Sử dụng KMS mã hoá mật khẩu
2. Dùng mật khẩu đã mã hoá vào CloudBuild


# 1. Sử dụng KMS mã hoá mật khẩu
> Thông tin về KMS các bạn có thể xem tại https://cloud.google.com/security-key-management

1.1 Sử dụng câu lệnh sau để tạo `keyring-name` (ví dụ: **password**) :
```sh
  gcloud kms keyrings create password --location global
```

1.2  Sau đó tạo `key-name` (ví dụ: **classfunc-expo-password** ) trong `keyring-name` đã tạo ở 1.1:
```sh
  gcloud kms keys create classfunc-expo-password \
      --location global --keyring password \
      --purpose encryption
```

1.3 Có `key-name` và `keyring-name` rồi mình đi mã hoá password (ví dụ: password=**my_pass_123**)
```sh
 echo -n my_pass_123 | gcloud kms encrypt --plaintext-file=- \
     --ciphertext-file=- --location=global --keyring=password \
     --key=classfunc-expo-password | base64
```
Sau đó trên terminal của bạn sẽ xuất hiện 1 đoạn base64 có dạng như `CiQAlgNzMeYBOrMeZzddaUhyBG0ep...` , **đó chính là mật khẩu đã được mã hoá của bạn.**


# 2. Dùng mật khẩu đã mã hoá vào CloudBuild
2.1 Thêm trường `secrets` vào `cloudbuild.yaml`. Có thể thay `PASSWORD` bằng bất kỳ  tên nào khác.

```yaml
 steps:
...
 secrets:
   - kmsKeyName: projects/project-id/locations/global/keyRings/password/cryptoKeys/classfunc-expo-password
    secretEnv:
      PASSWORD: 'đoạn mã base64 trên'
```

2.2 Sử dụng trong các `steps` như sau:
```yaml
 steps:
   - name: 'gcr.io/cloud-builders/docker'
     entrypoint: 'bash'
     args: ['-c', 'docker login --username=user-name --password=$$PASSWORD']
     secretEnv: ['PASSWORD']
```
Hoặc ví dụ như khi login [expo](https://expo.io/) sẽ có sẵn các biến môi trường mà expo-cli định sẵn thì có thể dùng như sau (giả sử có secrectEnv là `EXPO_CLI_PASSWORD`): 
```yaml
steps:
  - name: 'gcr.io/classfunc-com/expo'
    args: [ 'login','-u','classfunc' ] # expo login
    secretEnv: [ 'EXPO_CLI_PASSWORD' ]
```

Để kiểm tra thành quả của mình:
```sh
gcloud builds submit .
```

Chúc các bạn thành công.  👍

* [Tài liệu tham khảo - Using Cloud KMS](https://cloud.google.com/cloud-build/docs/securing-builds/use-encrypted-secrets-credentials#encrypt_credentials)


Bảo vệ mật khẩu với KMS trong CloudBuild

* **[iOS App](https://apps.apple.com/vn/app/v%C3%AD-c%E1%BB%A7a-tui/id1545730083?l=vi)**
* **[Android App](https://play.google.com/store/apps/details?id=com.classfunc.vicuatui)**
* **[Web App](https://vicuatui.com)**


Chúng tôi đang muốn thực hiện chức năng phân loại của Ví,  mục đích là để biểu thị biểu đồ tròn tốt hơn để người dùng dễ nhìn hơn. 

Cảm ơn các bạn đã đồng hành cùng Ví Của Tui.

![Simulator Screen Shot - iPhone 8 Plus - 2021-01-12 at 17.22.12.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2FSimulator%20Screen%20Shot%20-%20iPhone%208%20Plus%20-%202021-01-12%20at%2017.22.12.png?alt=media&token=9dece30c-6abc-4b4f-a723-9cdd99ee0355)

<iframe width="100%" height="315" src="https://www.youtube.com/embed/dY6XVtBW428" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Ví Của Tui và phân loại Thu Chi

![android.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Fandroid.png?alt=media&token=11e8ab45-bac2-4754-9604-25655aa1f021)

## Ví Của Tui


* **[iOS App](https://apps.apple.com/vn/app/v%C3%AD-c%E1%BB%A7a-tui/id1545730083?l=vi)**
* **[Android App](https://play.google.com/store/apps/details?id=com.classfunc.vicuatui)**

* **[Web App](https://vicuatui.com)**

Ví Của Tui là app quản lý thu chi cá nhân hoặc nhóm.

App bắt nguồn từ nhu cầu quản lý thu chi của bản thân và nhân viên công ty.

Mấy bạn bảo có nhiều app thế này trên thị trường sao ko dùng? À thì khi tôi nhập dữ liệu thấy phải chuyển field, thực ra tôi muốn nhập nội dung và số tiền liền mạch và cuối tuần, tháng, năm tổng kết cho tôi là đủ. Nên chúng tôi đã quyết định tạo lên một ứng dụng mà người dùng chỉ cần nhập và ko cần suy nghĩ gì nhiều. 

Các chức năng Ví Của Tui:

1. Tạo giao dịch:
* Nhập nội dung và số tiền trên cùng một dòng.
* Lưu hình ảnh hoá đơn, giao dịch.
* Tạo nhóm và quản lý theo nhóm (ví dụ Gia Đình, Công Ty)

2. Quản lí giao dịch:
* Thống kê các khoản thu chi theo tuần, tháng, năm.
* Một tài khoản có thể đăng nhập trên nhiều thiết bị khác nhau. Dữ liệu đồng bộ trên tất cả các thiết bị.
* Liên kết Google Sheet, mỗi sheet một tháng giúp có cái nhìn tổng quan về các khoản thu chi.

Ứng dụng của được cập nhật thường xuyên bởi các thành viên của ClassFunc chúng tôi.

Chúc bạn Quản Lý Thu Chi hiệu quả.



Giới thiệu Ví Của Tui

Chụp ảnh màn hình element với html2canvas + file-saver
B1: cài đặt thư viện 
```
yarn add html2canvas file-saver

```

JavaScript  :
```
html2canvas(document.querySelector("#capture")).then(canvas => {
    const dataUrl = canvas.toDataURL("image/png")
     FileSaver.saveAs(dataUrl,"capture.png")
});
```
Lưu ý: div được chụp phải đang được hiển thị trên màn hình. ( nếu scroll qua thì sẽ ko chụp chính xác được. lỗi này đang có ở phiên bản mới nhất - fix: down version to : "html2canvas": "^0.5.0-alpha")

# xem thêm tại : https://html2canvas.hertzen.com/

screenshot element 

Hôm nay, mình sẽ chia sẻ với các bạn về Google Tasks - Tạo các nhiệm vụ hàng đợi thực thi trên đám mây.

Cloud Tasks là một dịch vụ được quản lý hoàn toàn cho phép bạn quản lý việc thực hiện, điều phối và phân phối một số lượng lớn các nhiệm vụ được phân phối. Sử dụng Cloud Tasks, bạn có thể thực hiện công việc không đồng bộ bên ngoài yêu cầu của người dùng hoặc dịch vụ đối với dịch vụ.
Chi tiết cài đặt và sử dụng Cloud Tasks như sau: 

Bước 1:  Truy cập [Cloud Tasks API](https://console.cloud.google.com/apis/library/cloudtasks.googleapis.com) và Enable Cloud Tasks API.

![Ảnh chụp Màn hình 0002-10-19 lúc 08.47.17.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_19_luc_08_47_17_2570eb02cd/Anh-chup-Man-hinh-0002-10-19-luc-08.47.17.png_Anh_chup_Man_hinh_0002_10_19_luc_08_47_17_2570eb02cd.png)

Bước 2:  Tạo một Cloud Tasks Queue

```gcloud tasks queues create [QUEUE_ID]```

Trong đó [QUEUE_ID] là tên định danh bạn tạo cho hàng đợi của mình, ví dụ: "google-tasks-for-myjob" chẳng hạn.

Bước 3:  Khởi tạo HTTP Target Tasks, ở đây các bạn có thể viết trên API để gọi đến, hoặc có thể viết trên HTTP Cloud function để tạo.

Chúng ta sẽ sử dụng Service Account để Authentication với Google Tasks. Tài khoản Service Account phải được thêm 2 quyền đó là: 

- Cloud Tasks: bạn có thể chọn các tác vụ  như **Cloud Tasks Enqueuer**: Giúp tạo tasks mới,  nếu bạn cần thêm các  quyền khác như DELETE task, RUN task , có thể add thêm các role tương ứng của tác vụ **Cloud Tasks**
- Service Accounts: ở đây mình chọn **Service Account User**

![Ảnh chụp Màn hình 0002-10-17 lúc 17.21.52.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_17_luc_17_21_52_e7b862682f/Anh-chup-Man-hinh-0002-10-17-luc-17.21.52.png_Anh_chup_Man_hinh_0002_10_17_luc_17_21_52_e7b862682f.png)

Dưới đây là Setup khi Create Task của mình: 

```const email = 'google-tasks-***@***.iam.gserviceaccount.com'; // Cloud IAM service account
    // const date = new Date(); // Intended date to schedule task
    const project = '***;
    const queue = 'geniam-tasks';
    const location = 'asia-northeast1';
    const {payload} = req.body;
    const url = 'https://asia-northeast1-***.cloudfunctions.net/googleTasksSchedule/sentEmail';
    const client = new CloudTasksClient({
      projectId: projectID,
      keyFilename, // đường dẫn trỏ đến file JSON Services Account của bạn
    });

    // Construct the fully qualified queue name.
    const parent = client.queuePath(project, location, queue);

    // Convert message to buffer.
    const convertedPayload = JSON.stringify({payload: payload});
    const body = Buffer.from(convertedPayload).toString('base64');

    const task = {
      httpRequest: {
        httpMethod: 'POST',
        url,
        oidcToken: {
          serviceAccountEmail: email,
        },
        headers: {
          'Content-Type': 'application/json',
        },
        body,
      },
    };
    // The time when the task is scheduled to be attempted.
    let seconds = moment(payload.start).diff(moment(), 'seconds');

    console.log('Sent email with seconds', seconds);

    // check if event create < 15 minute not create task
    if (seconds <= 60 * 15) {
      return res.status(200).send('No need create google task schedule');
    }
    seconds = seconds - 60 * 15;
    task.scheduleTime = {
      seconds: seconds + new Date() / 1000,
      // seconds: new Date(moment().add(1, 'minutes').format()).getTime() / 1000,
    };

    // Send create task request.
    const [response] = await client.createTask({parent, task});
    console.log(`Created task ${response.name}`);
    // update task queues id to event

    res.send(response.name);
```

**Lưu ý: URL ở ví dụ trên là URL mà khi Task thực thi sẽ gọi đến URL này, với tham số truyền vào body {payload} bao gồm dữ liệu của chúng ta khi gửi lên để tạo Task. Mục Task.ScheduleTime chính là thời gian mà Task sẽ thực thi**

Như vậy các bạn đã có thể tạo được nhiệm vụ hàng đợi trên đám mây rồi! Chúc các bạn thành công!.

Tài liệu  tham khảo: 
- [https://github.com/googleapis/nodejs-tasks#using-the-client-library](https://github.com/googleapis/nodejs-tasks#using-the-client-library)
- [https://medium.com/@rogiervandenberg/google-cloud-task-queues-on-gcp-with-google-cloud-functions-22eb80fe34ba](https://medium.com/@rogiervandenberg/google-cloud-task-queues-on-gcp-with-google-cloud-functions-22eb80fe34ba)
- [https://cloud.google.com/tasks/docs/creating-http-target-tasks](https://cloud.google.com/tasks/docs/creating-http-target-tasks)
- [https://cloud.google.com/tasks/docs](https://cloud.google.com/tasks/docs)
- [https://cloud.google.com/tasks/docs/tutorial-gcf](https://cloud.google.com/tasks/docs/tutorial-gcf)

Google Tasks Schedules - Nhiệm vụ hàng đợi thực thi trên đám mây

Chào các bạn, ở bài trước mình đã hướng dẫn [OAuth 2 cùng với Zoom Apis](https://blog.classfunc.com/post/OAuth-2-cung-voi-Zoom-Apis) hôm nay mình sẽ đi sâu vào việc làm thế nào để nhanh chóng được public Zoom Oauth App của mình lên Zoom Marketplace, giúp cho người dùng Zoom ngoài account của mình có thể truy cập, uỷ quyền và sử dụng được trong ứng dụng của mình.

Các  yêu cầu : Bạn phải xây dựng được app của mình trước đó, và sử dụng được trên môi trường Production, tất cả các yêu cầu hỗ trợ hoặc tài liệu phải viết bằng Tiếng Anh, Zoom sẽ trực tiếp truy cập vào app của bạn để test chức năng, test trải nghiệm người dùng của Zoom tại Apps của bạn.
Lưu ý thêm là cả App và Document của mình, yêu cầu hiển thị bản quyền chữ "Zoom" của họ.

**Giai đoạn 1: Tạo OAuth Apps, cập nhật thông tin và chuẩn bị gửi thông tin để yêu cầu Public App lên Zoom Marketplace**

1. Tạo Oauth App: Truy cập : https://marketplace.zoom.us/, tạo tài  khoản, chọn thẻ Develop / Build App, click chọn tab OAuth và nhấn Tạo. 
![Ảnh chụp Màn hình 0002-10-06 lúc 17.04.24.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_06_luc_17_04_24_26a715b8d7/Anh-chup-Man-hinh-0002-10-06-luc-17.04.24.png_Anh_chup_Man_hinh_0002_10_06_luc_17_04_24_26a715b8d7.png)
2.  Cập nhật Logo của apps, điền các thông tin cần thiết theo hướng dẫn

Lưu ý: Các thông tin về App Name (Tên app của bn, không trùng với các app đã có sẵn trên Zoom Marketplace), Short Description (Thông tin ngắn gọn về chức năng app của bạn), Long Description (Các thông tin chi tiết về apps của bạn, các chức năng của ứng dụng, nhấn mạnh để trả lời câu hỏi tại sao người khác sẽ sử dụng để cài đặt app của bạn).
Dưới đây là một số ví dụ:

![Ảnh chụp Màn hình 0002-10-06 lúc 17.20.44.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_06_luc_17_20_44_32a018c0e5/Anh-chup-Man-hinh-0002-10-06-luc-17.20.44.png_Anh_chup_Man_hinh_0002_10_06_luc_17_20_44_32a018c0e5.png)

![Ảnh chụp Màn hình 0002-10-06 lúc 17.22.25.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_06_luc_17_22_25_3222844a93/Anh-chup-Man-hinh-0002-10-06-luc-17.22.25.png_Anh_chup_Man_hinh_0002_10_06_luc_17_22_25_3222844a93.png)

![Ảnh chụp Màn hình 0002-10-06 lúc 17.21.12.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_06_luc_17_21_12_4a9331b415/Anh-chup-Man-hinh-0002-10-06-luc-17.21.12.png_Anh_chup_Man_hinh_0002_10_06_luc_17_21_12_4a9331b415.png)

![Ảnh chụp Màn hình 0002-10-06 lúc 17.21.49.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_06_luc_17_21_49_4a0f641f36/Anh-chup-Man-hinh-0002-10-06-luc-17.21.49.png_Anh_chup_Man_hinh_0002_10_06_luc_17_21_49_4a0f641f36.png)

**Lưu ý: bạn phải cập nhật link Privacy, Terms, Documents, Support, Configure URL app của bạn.** ( Nếu chưa có phần nào, thì nhanh tay code thêm nhé)

**Giai đoạn 2: Gửi yêu cầu Submited**

Sau khi thực hiện điền đầy đủ các thông tin ở phần mô tả, trước khi gửi yêu cầu. 
Bạn phải kí thoả thuận dành cho nhà phát triển với Zoom, thông tin tại mục "4. Sign the Zoom Marketplace Developer Agreement", tab "Submit",

Sau đó điền các thông tin tại [Zoom Marketplace Security Questionnaire] và gửi biểu mẫu về "marketplace.security@zoom.us".

(https://docs.google.com/spreadsheets/d/1GFnTX7nU5P53sA7hoxIEGcUMzuSDNa1pU18kRaH-S58/edit#gid=2112543736)

Tiếp theo kiểm tra lại xem app của bạn đã thực hiện đầy đủ các bước cần thiết trước khi gửi Request Submit tại đây [Marketplace App : Self-Assessment for Developers](https://docs.google.com/forms/d/e/1FAIpQLSeePsJjBpt852MU8GjOJep2DljbkUEdgLVrwjb-DU0HcoKZPA/viewform)

Hoàn tất các yêu cầu và gửi "Submit" Apps ngay thôi!
Đây là hình ảnh ví dụ một Oauth Zoom Apps mà người dùng sẽ thấy khi muốn cài đặt cho App của bạn.
![Ảnh chụp Màn hình 0002-10-06 lúc 18.06.54.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_06_luc_18_06_54_196024ad71/Anh-chup-Man-hinh-0002-10-06-luc-18.06.54.png_Anh_chup_Man_hinh_0002_10_06_luc_18_06_54_196024ad71.png)

![Ảnh chụp Màn hình 0002-10-06 lúc 18.07.16.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_10_06_luc_18_07_16_d83ced14f2/Anh-chup-Man-hinh-0002-10-06-luc-18.07.16.png_Anh_chup_Man_hinh_0002_10_06_luc_18_07_16_d83ced14f2.png)

Một số lưu ý về việc Zoom sẽ xác thực việc qua việc thực hiện các yêu cầu kiểm tra bảo mật app của bạn.
1.  Không lưu trữ các thông tin nhạy cảm như AccessToken, RefreshToken ở LocalStorage.
2. Thực hiện các  yêu cầu bảo mật request Headers tránh việc bị tấn công "Vulnerable to ClickJacking" 

Tham khảo

[https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet](https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet)

[https://www.owasp.org/index.php/Test_Local_Storage_(OTG-CLIENT-012)](https://www.owasp.org/index.php/Test_Local_Storage_(OTG-CLIENT-012))

[https://www.owasp.org/index.php/JSON_Web_Token_(JWT)_Cheat_Sheet_for_Java#Token_information_disclosure](https://www.owasp.org/index.php/JSON_Web_Token_(JWT)_Cheat_Sheet_for_Java#Token_information_disclosure)

Tham khảo về các tài liệu khi bạn muốn xuất bản Zoom OAuth App

[How to Get Your App Published to the Zoom App Marketplace on Your First Review!](https://medium.com/zoom-developer-blog/how-to-get-your-app-published-to-the-zoom-app-marketplace-on-your-first-review-7d5c97b78d1a)

[Behind the Curtain: Publishable URL Sharing Requests](https://medium.com/zoom-developer-blog/behind-the-curtain-publishable-url-sharing-requests-9093ad903d3e)

[Submission Checklist](https://marketplace.zoom.us/docs/guides/publishing/app-submission/submission-checklist)

[Submission Review](https://marketplace.zoom.us/docs/guides/publishing/app-submission/submission-review)

[Change Publication State](https://marketplace.zoom.us/docs/guides/publishing/app-submission/change-publication-state)

[Sharing Private Apps](https://marketplace.zoom.us/docs/guides/publishing/sharing-private-apps)

[https://marketplace.zoom.us/docs/guides](https://marketplace.zoom.us/docs/guides)

Public Zoom Oauth App lên Marketplace

1. deploy Firebase hosting, xem thêm [tại đây](https://blog.classfunc.com/post/Deploy-Firebase-Hosting-cho-du-an-moi)
2. Add trigger
 [gcp console] -> Cloud Build -> Trigger -> tìm đến repositiries cần tạo -> add

3.  Cấu hình trigger(name, event, banch, source, build configuration…)
4.  Tạo, cài đặt file cloudbuild[…].yaml (tên file trùng với trên Build configuration, hosting mới tạo ở bước 1)
5.  Add variable, lấy firebase token bằng lệnh: ```firebase login:ci```
6.  Submit Create


chúc các bạn may mắn..!


Tạo trigger cloud build .

Chào các bạn hôm nay mình sẽ hướng dẫn Oauth 2 với Zoom Apis.

Bài hướng dẫn để public app OAuth zoom lên Zoom marketplace nhanh chóng qua kinh nghiệm của mình, vui lòng xem tại [Public Zoom Oauth App lên Marketplace](https://blog.classfunc.com/post/Public-Zoom-Oauth-App-len-Marketplace).

Dưới đây là sơ đồ quá trình Client thao tác với Server Zoom Apis để lấy được dữ liệu.
 ![1570826762485.png](https://storage.googleapis.com/dev-classfunc-com-data/1570826762485_15b9c44a8d/1570826762485.png_1570826762485_15b9c44a8d.png)

Trước tiên hãy tạo một OAuth Zoom App, hãy làm theo Flow trong hướng dẫn của Zoom: [Create an OAuth App](https://marketplace.zoom.us/docs/guides/build/oauth-app)

Sau khi tạo xong, trong lúc chờ để app  Oauth của bạn được public lên thị trường Zoom để sử dụng Public ( nếu cần thiết ), bài viết này mình sẽ hướng dẫn ở chế độ Development nhé, bạn dán code này vào project của mình. 

```code block
<a href="https://zoom.us/oauth/authorize?response_type=code&client_id=[clientId]&redirect_uri=https://yourapp.com" target="_blank" rel="noopener noreferrer"><img src="https://marketplacecontent.zoom.us/zoom_marketplace/img/add_to_zoom.png" height="32" alt="Add to ZOOM" /></a>
```

hoặc có thể design Button và thêm code link để mở Login & Consent screen Zoom
```code block
https://zoom.us/oauth/authorize?response_type=code&client_id=[clientId]&redirect_uri=https://yourapp.com
```

Button này có chức năng Login & Consent screen, sau khi thành công sẽ redirect về app của mình với một mã Code.
```code block
https://yourapp.com/?code=obBEe8ewaL_KdyNjniT4KPd8ffDWt9fGB
```

CliendID sẽ lấy từ hình ảnh dưới.
![Ảnh chụp Màn hình 0002-09-21 lúc 10.44.00.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_0002_09_21_luc_10_44_00_fae4d675dc/Anh-chup-Man-hinh-0002-09-21-luc-10.44.00.png_Anh_chup_Man_hinh_0002_09_21_luc_10_44_00_fae4d675dc.png)


Sau khi có Code, chúng ta sẽ thực hiện Request lên server để lấy mã Access_Token và dùng nó thao tác với Server. 

Chi tiết tham khảo: [OAuth with Zoom](https://marketplace.zoom.us/docs/guides/auth/oauth)

VD code lấy dữ liệu token bằng cách gọi lên api của mình: 
```code block
const getZoomOAuth = async (req, res) => {
  const {code, redirect_uri, user} = req.body;
  const userData = getUser(req);
  const {authenticationCodeBase64} = getZoomSecret(req); // Authentication code của owner 

  const config = {
    method: 'post',
    headers: {'Authorization': `Basic ${authenticationCodeBase64}`},
    url: 'https://zoom.us/oauth/token' +
        `/?code=${code}&grant_type=authorization_code&redirect_uri=${redirect_uri}`,
  };

  try {
    const {data} = await axios(config).catch(error => Promise.reject(error));
    if (data) {
    // lưu lại các thuộc  tính gồm refresh_token để lấy lại access_token nếu hết hạn sử dụng (access_token hạn sử dụng 1h)
      const userDocRef = admin.firestore().
          doc(req.Collection + `/${userData.username}`);

      const userZoomId = decoder(data.access_token).uid;
      await userDocRef.set({
        email: user.email,
        id: userData.username,
        userZoomId,
        zoomOAuth: data,
        createdAt: moment().format(),
        updatedAt: moment().format(),
      }, {merge: true});

      return res.status(200).send(data);
    }

    res.status(400).send('Get accessToken Zoom Apps Error');
  } catch (e) {
    console.log('Error', e);
    res.status(500).send(e.toString());
  }
};
```

**Lưu ý, các request này bắt buộc phải request từ server lên server của Zoom, nếu request từ Client sẽ bị thông báo lỗi "Cors Error" 
Xem thêm tại: [https://marketplace.zoom.us/docs/guides/auth/oauth](https://marketplace.zoom.us/docs/guides/auth/oauth)**

OAuth 2 cùng với Zoom Apis

Trước tiên chúng ta đi vào phân biệt Authentication và Authorization.
  - Authentication: Để kiểm tra danh tính của người dùng, tác dụng chủ yếu là để xác thực người dùng.
 - Authorization: Sau khi hệ thống xác thực Authentication của người dùng, người dùng có thể truy cập tài nguyên của hệ thống thông qua các Scopes được bật cho người dùng. Ví dụ: xem thông tin user, thông tin files, tài liệu, giao dịch v.v...

Ta hiểu đơn giản hệ thống Authorization hay OAuth sẽ là trung gian để phía Client người dùng thao tác được với API của hệ thống xác định nào đấy dưới các Scopes được  bật cho người dùng thông qua một mã Access_Token là mã truy cập hợp lệ mà API có thể chấp nhận để trả về dữ liệu.


Chúng ta cùng tìm hiểu đôi chút một ví dụ về sơ đồ hoạt động của OAuth từ Google Server nhé:

Google Servers có 5 tình huống ứng với 5 cách xác thực để lấy mã code khác nhau bao gồm: 
1. Web server applications.
2. Installed applications.
3. Client-side (JavaScript) applications.
4. Applications on limited-input devices.
5. Service accounts.

Ở đây chúng ta cùng tìm hiểu về cách thông  thường Web server applications nhé 
![authorization-code.png](https://storage.googleapis.com/dev-classfunc-com-data/authorization_code_5dfaaf1fcd/authorization-code.png_authorization_code_5dfaaf1fcd.png)
Hình 1. Using OAuth 2.0 for Web Server Applications.

Bước 1: Phía Client, user thông qua màn hình User Login & Consents Screen sẽ đồng ý xác thực trao quyền đăng nhập cho phía App OAuth, Sau khi đăng nhập và xác thực thành công, phía Server sẽ trả về cho Client một mã Code (code này có quyền truy cập vào API và chỉ sử dụng 1 lần duy nhất).

Bước 2: Client tiếp tục cầm code vừa nhận được gửi lại Server, Lúc này, nếu thành công, server sẽ trả về cho bạn một mã JSON gồm: 
```code block
{
   access_token: 'ljaiajdoiasdoad....',
   refresh_token: 'ahdjahskdads....',
   exp: time,
   scopes: []
}
```
Bước 3: Lúc này, client có thể thao tác với server để lấy dữ liệu bằng access_token.

Bước 4:  Khi access_token hết hạn, bạn có thể làm mới access_token bằng cách gửi mã refresh_token đến server và yêu cầu cấp mới lại access_token.

Tham khảo: 
- [https://github.com/google/google-api-javascript-client](https://github.com/google/google-api-javascript-client)
- [https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html](https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html)
- [Using OAuth 2.0 to Access Google APIs](https://developers.google.com/identity/protocols/oauth2?fbclid=IwAR3X8MWb5ugGTHAHvbThw876mmiKc1BCdQhJCJ-yzLrc2TlE1fueqxaprVU#1.-obtain-oauth-2.0-credentials-from-the-dynamic_data.setvar.console_name-.)




OAuth 2, cùng hiểu hơn về ứng dụng để xác thực và uỷ quyền với bảo mật mạnh mẽ

**Mục đích: Sử dụng `curl` để post 1 message tới Slack**

Cú pháp : 
```sh
curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello."}' YOUR_WEBHOOK_URL
```

**Nếu muốn sử dụng output của câu lệnh trước làm biến số thì cú pháp như sau:**
```sh
output=$(echo hello)
curl -X POST -H 'Content-type: application/json' --data "$(cat <<EOF
{
"text": "$output"
}
EOF
)" YOUR_WEBHOOK_URL
```
Chúc các bạn vui vẻ và có thêm kiến thức mới. 

Tham khảo thêm: 

[Sending your first Slack message using Webhook](https://api.slack.com/tutorials/slack-apps-hello-world)

Post Slack bằng curl

b1: enable service worker trong file index.js
```
import * as serviceWorker from './serviceWorker'
....
serviceWorker.register();
```
b2: tạo custom hook để đăng ký service worker
```
import {useEffect} from "react";

import {
    askUserPermission,
    createNotificationSubscription,
    getUserSubscription,
    isPushNotificationSupported,
    registerServiceWorker,
    subscriptionToDb
} from "../notifications/push-notifications";

const pushNotificationSupported = isPushNotificationSupported();

export default function usePushNotifications(user) {

    useEffect(() => {
        if (pushNotificationSupported && user.user_id) {
            onRegisterPubSub(user)
        }
    }, [user]);

    const onRegisterPubSub = async (user) => {
        try {
            // đăng ký calendar service worker
            await registerServiceWorker()
            // xin quyen tu user
            const consent = await askUserPermission()
            if (consent === "granted") {
                // neu dong y
                // kiem tra thong tin cu da co
                let subscription = await getUserSubscription();
                if (!subscription) {
                    subscription = await createNotificationSubscription()
                }
                await subscriptionToDb(JSON.parse(JSON.stringify(subscription)), user.user_id)
            }

        } catch (e) {
            console.log(e);
        }
    }
}
```
file push-notifications.js:
```
import {db} from '../firebaseConfig'
import {CALENDAR_COLLECTION} from "../config/constants";
import firebase from "firebase/app";

const pushServerPublicKey = "your key";

function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
        .replace(/-/g, '+')
        .replace(/_/g, '/');

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}


function isPushNotificationSupported() {
    return "serviceWorker" in navigator && "PushManager" in window;
}

async function askUserPermission() {
    return await Notification.requestPermission();
}


function registerServiceWorker() {
    return navigator.serviceWorker.register("/calendar-service-worker.js");
}

/**
 *
 * using the registered service worker creates a push notification subscription and returns it
 *
 */
async function createNotificationSubscription() {
    //wait for service worker installation to be ready
    const serviceWorker = await navigator.serviceWorker.ready;
    // subscribe and return the subscription
    return await serviceWorker.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(pushServerPublicKey)
    });
}


function getUserSubscription() {
    //wait for service worker installation to be ready, and then
    return navigator.serviceWorker.ready
        .then(function (serviceWorker) {
            return serviceWorker.pushManager.getSubscription();
        })
        .then(function (pushSubscription) {
            return pushSubscription;
        });
}

async function subscriptionToDb(sub, userId) {
    const userRef = db.doc(`${CALENDAR_COLLECTION}/${userId}`)
    await userRef.set({
        subscriptions: firebase.firestore.FieldValue.arrayUnion(sub)
    }, {merge: true})
}

async function subscribeUserToPush(user) {
    try {
        const registration = await navigator.serviceWorker.register('/calendar-service-worker.js')

        let sub = await registration.pushManager.getSubscription()
    } catch (e) {

    }

}

export {
    isPushNotificationSupported,
    askUserPermission,
    registerServiceWorker,
    createNotificationSubscription,
    getUserSubscription,
    subscriptionToDb,
    subscribeUserToPush
};
```
b3: tạo file service work trong thư mục public:
```
function receivePushNotification(event) {
    console.log("[Service Worker] Push Received.");
    const {image, tag, url, title, text} = event.data.json();

    const options = {
        data: url,
        body: text,
        // icon: image,
        vibrate: [200, 100, 200],
        // tag: tag,
        // image: image,
        badge: "https://calendar.geniam.com/favicon.ico",
    };
    event.waitUntil(self.registration.showNotification(title, options));
}

function openPushNotification(event) {
    event.notification.close();
    event.waitUntil(clients.openWindow(event.notification.data));
}

self.addEventListener("push", receivePushNotification);
self.addEventListener("notificationclick", openPushNotification);
```
b4: gọi hook vừa tạo trong file app.js
```
usePushNotifications(user);
```
## xem thêm : https://github.com/nguyenphi990/reactjs-notifications

gửi thông báo với Reactjs and firebase

1.Module not found: Error: Can't resolve

```
[error] ./_dist_/components/Meeting/Home/hooks/useMeeting.js
Step #1:   Module not found: Error: Can't resolve '../../Fullcalendar/Actions/meeting.js' in '/workspace/.build/_dist_/components/Meeting/Home/hooks'
Step #1:   resolve '../../Fullcalendar/Actions/meeting.js' in '/workspace/.build/_dist_/components/Meeting/Home/hooks'
```

Lỗi này snowpack không thể tìm được thư file của bạn, có thể do file được gọi thuộc cấp folder thấp hơn hoặc bằng so với file đích gọi, và thuộc 2 thư mục khác nhau.
Cách xử lý: Đưa file được gọi ra cấp thư mục cha hoặc anh em của file gọi.
ở ví dụ này, tôi move folder Actions ra ngoài thư mục chứa Fullcalendar và thư mục Home, nằm ngang hàng với 2 thư mục trên.

2.Error] [BABEL] Note: The code generator has deoptimised the styling of
```
error] [BABEL] Note: The code generator has deoptimised the styling of /workspace/.build/web_modules/lodash.js as it exceeds the max of 500KB.
Step #1:   [error] [BABEL] Note: The code generator has deoptimised the styling of /workspace/.build/web_modules/firebase/firestore.js as it exceeds the max of 500KB.
```

Lỗi này xuất hiện khi build package vượt quá dung lượng 500kb, không ảnh hưởng đến việc deploy
Cách xử lý: chưa tìm ra, mức độ ưu tiên 

3.Error [404]
```
 [error] [404] /resources/icons/icons-16.woff
    ✘ /Users/DKP090918/Geniam/SnowPackBuild/calendar.geniam.com/public/resources/icons/icons-16.woff
```
Với những lỗi Error [404], kiểm tra lại đường dẫn path của các file. 
Một số lỗi về file css.map error 404, có thể do thư viện không import chuẩn map theo yêu cầu của snowpack, để giải quyết vấn đề này, hãy tạo file `styles.css` và coppy css của thư viện vào file này sau đó `Import "./styles.css"` như thường lệ, remove các tag `/*# sourceMappingURL=[filename].css.map */` nếu có.


4.Uncaught ReferenceError: $RefreshSig$ is not defined

```
Uncaught ReferenceError: $RefreshSig$ is not defined
    at index-da2cf79d.js:7
    at index-da2cf79d.js:1918
    at createCommonjsModule (_commonjsHelpers-955f0934.js:14)
    at index-da2cf79d.js:4
```

Type `snowpack —reload`

5.Uncaught SyntaxError: The requested module ‘/web_modules/XXXXXX.js’ does not provide an export named ‘YYYYYY’

Snowpack tuân theo chiến lược tương tác CJS-ESM của Node.js, trong đó các gói Common.js luôn được xuất sang xuất mặc định ( import react) và không hỗ trợ xuất có tên ( import * as react). Tuy nhiên, nhiều gói ghi lại các bản xuất có tên này trong README của chúng và giả định rằng trình gói của bạn sẽ hỗ trợ nó. Chúng tôi tự động thêm hỗ trợ cho các bản xuất được đặt tên cho một số lượng nhỏ các gói rất phổ biến (như React) sử dụng loại tài liệu này.

Để giải quyết vấn đề này: Thêm gói bị lỗi vào installOptions.namedExportsvà Snowpack sẽ tự động tạo các bản xuất có tên đó cho bạn (lưu ý: bạn có thể cần chạy lại Snowpack có --reloadcờ để áp dụng bản cập nhật này).

```
// snowpack.config.json
{
  "installOptions": {
    "namedExports": ["someModule"]
  }
}
```
Chúng tôi sẽ tiếp tục cập nhật các error mới và cách giải quyết!

Một số lỗi và issue khi chạy snowpack build or dev

Github source code: https://github.com/duongdam/classfunc-react-snowpack

Cách sử dụng snowpack để build dự án react

A. Cài đặt snowpack

Bạn có thể cài đặt snowpack toàn cầu bằng ```npm install -g snowpack``` ( đấy là trang chủ snowpack nói thế, còn mình thử thì khi cài đang có một số lỗi)
Có 2 cách để cài đặt cục bộ như 1 client ở máy trạm thông qua gói script json như sau:

1. Cài đặt bằng npm: `npm install --save-dev snowpack`.
2. Cài bằng yarn: `yarn install --dev snowpack` (cách này mình dùng).
3. Hoặc có thể clone 1 dự án react mới bằng :

`npx create-snowpack-app my-projects --template @snowpack/app-template-react --use-yarn`

Sau khi cài đặt:
Tiến hành chạy lệnh ```snowpack``` để tạo map location mặc định cho file web_module
Sau đó chạy lệnh ```snowpack dev``` để start server snowpack cho dev.
Chạy lệnh `snowpack --reload` nếu muốn làm mới cache và reload lại snowpack

Build product: sử dụng plugin @snowpack/plugin-webpack
```json
// snowpack.config.json
{
  // Optimize your production builds with Webpack
  "plugins": [["@snowpack/plugin-webpack", {/* ... */}]]
  “scripts”: {
	“bundle:*” : “@snowpack/plugin-webpack”
	}
}
Sử dụng lệnh: "snowpack build"
```
Evironment: 
- Sử dụng plugin : ["@snowpack/plugin-dotenv”] 
- Trong file .env có các data cần thiết của mình.
- Để lấy dữ liệu từ môi trường ta sử dụng ```import.meta``` 
ví dụ ```import.meta.env.SNOWPACK_PUBLIC_REACT_APP_LOGIN_URL;```
- Lưu ý phải có tiền tố ```SNOWPACK_PUBLIC_``` vì Snowpack chỉ hỗ trợ các biến môi trường bắt đầu bằng ```SNOWPACK_PUBLIC_*```. Snowpack làm điều này bởi vì mọi thứ trong ứng dụng web của bạn được gửi tới trình duyệt và Snowpack không muốn bạn vô tình chia sẻ các khóa / biến env nhạy cảm với ứng dụng web công cộng của bạn

Một số cấu hình cần thiết của các file:

babel.config.json

```json
{
  "extends": "@snowpack/app-scripts-react/babel.config.json",
  "plugins": [
    ["@babel/plugin-transform-react-jsx"],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ],
  "env": {
    "development": {
      "plugins": ["react-refresh/babel"],
      "compact": false
    },
    "production": {"plugins": ["react-refresh/babel"],
      "compact": false
    }
  }
}
```

snowpack.config.js

```js
const nodePolyfills = require('rollup-plugin-node-polyfills')();

module.exports = {
    "installOptions": {
        "rollup": {
            "plugins": [nodePolyfills]
        },
        "env": {
            "SNOWPACK_PUBLIC_NODE_ENV": true
        }
    },
    "extends": "@snowpack/app-scripts-react",
    "plugins": ["@snowpack/plugin-webpack", "@snowpack/plugin-dotenv", "@snowpack/plugin-babel", "@snowpack/plugin-react-refresh"],
    "scripts": {
        "mount:public": "mount public --to /",
        "mount:src": "mount src --to /_dist_",
        "mount:web_modules": "mount web_modules --to /web_modules",
        "build:js,jsx,mjs,cjs,ts,tsx": "@snowpack/plugin-babel",
        "bundle:*": "@snowpack/plugin-webpack"
    },
    "devOptions": {
        "port": 3023,
        "hostname": "localhost",
        "fallback": "index.html"
    },

};
```

package.json

```json các thông số của devDependencies:
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@snowpack/app-scripts-react": "^1.6.0-alpha.0",
    "@snowpack/babel-plugin-package-import": "^1.0.0",
    "@snowpack/plugin-babel": "^1.4.0",
    "@snowpack/plugin-dotenv": "^1.6.0-alpha.0",
    "@snowpack/plugin-react-refresh": "^1.3.0",
    "@snowpack/plugin-webpack": "^1.6.0-alpha.0",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "babel-plugin-import": "^1.13.0",
    "jest": "^25.4.0",
    "prettier": "^2.0.5",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "snowpack": "^2.6.4"
  }
```
Một số chức năng của plugin: 
- @snowpack/plugin-babel: để build các file js,jsx,ts,tsx,css... tạo web_modules cho snowpack
- @snowpack/app-scripts-react: Extends mặc định khi để build project React, trong đó sẽ có nhiều gói như: ``` @babel/core  @babel/plugin-syntax-import-meta  @babel/preset-react  @babel/preset-typescript  @snowpack/plugin-babel  @snowpack/plugin-dotenv  babel-jestbabel-preset-react-app  react-app-polyfill ```
- @snowpack/plugin-dotenv: hỗ trợ để sử dụng các biến môi trường ```development & production```

Migrating từ một dự án React cũ:

Các bước như sau: 
- Bước 1: install snowpack bằng yarn: ```yarn install --dev snowpack```.
- Bước 2: Tạo các file: .prettierrc, babel.config.json, jest.config.js, jest.setup.js, snowpack.config.js
Cách nhanh nhất bạn install 1 app sử dụng snowpack mới.
copy các file này sang project cũ.
copy phần "devDependencies" trong package.json
- Bước 3: chạy lệnh: ```snowpack```
- Bước 4: chạy lệnh: ```snowpack dev``` và chờ để fix các lỗi về import/export. cho đến khi fix xong.

Hoặc tạo 1 snowpack react app mới, và chuyển dần code từ source cũ sang :)


Tài liệu tham khảo: 

- https://www.snowpack.dev/
- https://www.npmjs.com/package/@snowpack/plugin-dotenv
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-babel
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-react-refresh
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-webpack

Cách sử dụng snowpack để build dự án react

Github source code: https://github.com/duongdam/classfunc-react-snowpack

Hôm nay mình xin chia sẻ cách để tạo 2 môi trường phát triển production và stg khi build 1 dự án bằng snowpack.
Mình mở đầu 1 câu là thằng snowpack build rất nhanh, nhanh lắm luôn ấy.

Trước tiên, các bạn sẽ tạo các file `.env` như sau: 
`.env.production`, `.env.stg`, `.env.development`

Ở snowpack phiên bản cho React hỗ trợ mình Plugin `@snowpack/plugin-dotenv`
Bạn cài đặt bằng `yarn add --dev @snowpack/plugin-dotenv` và thêm vào phần plugins của `snowpack.config.js or snowpack.config.json`.
```js
"plugins": ["@snowpack/plugin-webpack", "@snowpack/plugin-dotenv", "@snowpack/plugin-react-refresh"],
    "scripts": {
        "bundle:*": "@snowpack/plugin-webpack"
    },
```

Để build các môi trường khác nhau, bạn chỉ cần thêm tiền tố `NODE_ENV=['envNAme']` trước `snowpack build`, dưới đây là ví dụ của mình: 

```json package.json
{
"scripts": {
    "start": "snowpack dev",
    "start-stg": "NODE_ENV=stg snowpack dev",
    "build-stg": "NODE_ENV=stg snowpack build",
    "build-prod": "NODE_ENV=production snowpack build"
    }
}
```

Ngoai ra bạn có thể tuỳ biến môi trường ở chế độ development khi thêm tiền tố `NODE_ENV=['envNAme']` trước `snowpack dev`, rất hay và tiện lợi phải không nào!


Biến môi trường và cách sử dụng
```js
// `import.meta.env` - Read process.env variables in your web app
fetch(`${import.meta.env.SNOWPACK_PUBLIC_API_URL}/users`).then(...)

// Supports destructuring as well:
const {SNOWPACK_PUBLIC_API_URL} = import.meta.env;
fetch(`${SNOWPACK_PUBLIC_API_URL}/users`).then(...)

// Instead of `import.meta.env.NODE_ENV` use `import.meta.env.MODE`
if (import.meta.env.MODE === 'development') {
  // ...
  ```
  
Chúc các bạn thành công! cùng nhau chia sẻ thật nhiều kiến thức thú vị nhé.

Tài liệu tham khảo: 
- https://www.snowpack.dev/#environment-variables.
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-dotenv
- https://github.com/motdotla/dotenv


Snowpack environment - Tạo môi trường Product và Stg khi build

Github source code: https://github.com/duongdam/FirebaseFunctions-CallApi

Trước tiên, các bạn tạo 1 Http functions với dạng Http request

```js
exports = module.exports = functions.https.onRequest((req, res) => {
  // ...
});
```

Cài đặt các gói `npm install —save express cors`

Ví dụ về việc cài đặt 

```js
const express = require('express');
const cors = require('cors');
const app = express();

// Automatically allow cross-origin requests
app.use(cors({ origin: true }));

// Add middleware to authenticate requests
app.use(myMiddleware);

// build multiple CRUD interfaces:
app.get('/:id', (req, res) => res.send(Widgets.getById(req.params.id)));
app.post('/', (req, res) => res.send(Widgets.create()));
app.put('/:id', (req, res) => res.send(Widgets.update(req.params.id, req.body)));
app.delete('/:id', (req, res) => res.send(Widgets.delete(req.params.id)));
app.get('/', (req, res) => res.send(Widgets.list()));

// Expose Express API as a single Cloud Function:
exports.widgets = functions.https.onRequest(app);
```

Ví dụ về exports file từ thư mục khác trong môi trường node

```js
const decoder = require('jwt-decode');
const moment = require('moment');
const getTokenFromHeader = require('../Actions/getTokenFromHeader');

const myMiddleware = (req, res, next) => {
  try {
    const accessToken = getTokenFromHeader(req);
    if (!accessToken)
      return res.status(400).send('AccessToken is missing');

    const userData = decoder(accessToken);
    if (moment(userData.exp * 1000).isBefore(moment().format()))
      return res.status(400).send('AccessToken is expired');

    return next();
  } catch (e) {
    console.log(e);
    return res.status(401).send('Login require!');
  }
};

exports = module.exports = myMiddleware;
```

Các request khác các bạn làm tương tự, tuỳ thuộc và api của bạn bảo mật mà thiết kế chức năng của functions myMiddleware theo yêu cầu của bạn nhé.

**Configure hosting behavior:**

`Important: Firebase Hosting supports Cloud Functions in us-central1 only.`

Full flow in firebase.json

```json
{
  "hosting": {

    "public": "dist/app",  // "public" is the only required attribute for Hosting

    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],

    "redirects": [ {
      "source": "/foo",
      "destination": "/bar",
      "type": 301
    }, {
      "source": "/firebase/**",
      "destination": "https://www.firebase.com",
      "type": 302
    } ],

    "rewrites": [ {
      // Shows the same content for multiple URLs
      "source": "/app/**",
      "destination": "/app/index.html"
    }, {
      // Configures a custom domain for Dynamic Links
      "source": "/promos/**",
      "dynamicLinks": true
    }, {
      // Directs a request to Cloud Functions
      "source": "/bigben",
      "function": "bigben"
    }, {
      // Directs a request to a Cloud Run containerized app
      "source": "/helloworld",
      "run": {
        "serviceId": "helloworld",
        "region": "us-central1"
      }
    } ],

    "headers": [ {
      "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers": [ {
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      } ]
    }, {
      "source": "**/*.@(jpg|jpeg|gif|png)",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=7200"
      } ]
    }, {
      "source": "404.html",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=300"
      } ]
    } ],
    "cleanUrls": true,
    "trailingSlash": false,
    // Required to configure custom domains for Dynamic Links
    "appAssociation": "AUTO",
  }
}
```

Tài liệu tham khảo: 
- https://www.npmjs.com/package/express
- https://expressjs.com/en/starter/installing.html
- https://firebase.google.com/docs/functions/http-events
- https://firebase.google.com/docs/hosting/full-config


Tạo Api HTTP Cloud Functions với Express & Cors

1. Nếu bạn chưa có Project Firebase,  hãy tạo 1 project mới tại https://console.firebase.google.com/, click Add project và làm theo hướng dẫn.
2. Khi đã tạo hoặc có Project Firebase rồi, thử gọi tên nó là test-classfunc nhé, 
- Bây giờ bạn tiếp tục tạo 1 folder chứa dữ liệu của cloud function chứ nhỉ, hãy tạo 1 folder có tên “test-cloudfunctions”, 
- Tiếp theo, để chuẩn bị cho quá trình cài đặt và init cloud function, trên terminal bạn chạy:
`npm install --save firebase-functions@latest firebase-admin@latest `
và cài đặt Filebase Tools: `npm install -g firebase-tools`
- Tiếp tục chạy firebse login để tiến hành đăng nhập vào firebase. `firebase login`.
- Truy cập vào folder “test-cloudfunctions” -> `cd test-cloudfunctions`.
- Thực hiện lệnh `firebase init` hoặc `firebase init functions`, chọn javascript để thực hiện.
- Sau khi thực hiện xong, projects cloud functions của bạn sẽ có cấu trúc như sau: 
 
```
json
 +- .firebaserc    # Hidden file that helps you quickly switch between
 |                 # projects with `firebase use`
 |
 +- firebase.json  # Describes properties for your project
 |
 +- functions/     # Directory containing all your functions code
      |
      +- .eslintrc.json  # Optional file containing rules for JavaScript linting.
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- index.js      # main source file for your Cloud Functions code
      |
      +- node_modules/ # directory where your dependencies (declared in
                       # package.json) are installed
```
trong file package.json, nếu muốn cài đặt môi trường cho cloud functions la node 10, hãy thêm `"engines": {"node": "10"}`.

3. Trong file `index.js`, tiến hành thêm các thông tin cài đặt cần thiết.
```js
const admin = require('firebase-admin')

const serviceAccount = require('./firebaseServiceAdmin.json'); 
// fire json services admin account get more: https://console.firebase.google.com/project/[projectId]/settings/serviceaccounts/adminsdk

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: 'https://[projectId].firebaseio.com',
});

```
4. Bây giờ hãy tạo cho mình 1 functions và thực hiện deploy functions đầu tiên của mình thôi.
Dưới đây là 2 ví dụ: 

Tạo AddMessage() functions

```js
// Take the text parameter passed to this HTTP endpoint and insert it into 
// Cloud Firestore under the path /messages/:documentId/original
exports.addMessage = functions.https.onRequest(async (req, res) => {
  // Grab the text parameter.
  const original = req.query.text;
  // Push the new message into Cloud Firestore using the Firebase Admin SDK.
  const writeResult = await admin.firestore().collection('messages').add({original: original});
  // Send back a message that we've succesfully written the message
  res.json({result: `Message with ID: ${writeResult.id} added.`});
});
```
addMessage được gọi là http functions, có thể gửi request lên để lấy dữ liệu về theo các phương thức Get, Post, Put, Delete ....

tạo makeUppercase() functions

```js
// Listens for new messages added to /messages/:documentId/original and creates an
// uppercase version of the message to /messages/:documentId/uppercase
exports.makeUppercase = functions.firestore().document('/messages/{documentId}')
    .onCreate((snap, context) => {
      // Grab the current value of what was written to Cloud Firestore.
      const original = snap.data().original;

      // Access the parameter `{documentId}` with `context.params`
      functions.logger.log('Uppercasing', context.params.documentId, original);
      
      const uppercase = original.toUpperCase();
      
      // You must return a Promise when performing asynchronous tasks inside a Functions such as
      // writing to Cloud Firestore.
      // Setting an 'uppercase' field in Cloud Firestore document returns a Promise.
      return snap.ref.set({uppercase}, {merge: true});
    });
```
Với các functions dạng makeUppercase, hoạt động theo dạng tự động trigger khi có sự thay đổi của collection Messages, ở đây khi tạo mới messages `.onCreate((snap, context)`, ngoài ra còn có các kiểu khác như `.onDelete` `.onUpdate` `.onWrite`

5. Deploy function

Chạy lệnh : `firebase deploy --only functions` 
Hoặc nếu chỉ muốn deploy 1 functions riêng biệt.
chạy lệnh `firebase deploy --only functions:[function name]`, function name => foldername Funtionname  
Ví dụ: folder api có function name test.js
=> `firebase deploy --only functions:apiTest`

Trên đây mình đã hướng dẫn các bạn việc tạo và cài đặt, deploy 1 cloud functions mới, chúc các bạn thành công

6. Tài liệu tham khảo
- https://firebase.google.com/docs/functions/get-started?authuser=0.
- https://firebase.google.com/docs/functions/callable?authuser=0.
- https://firebase.google.com/docs/functions/firestore-events?authuser=0.
- https://firebase.google.com/docs/functions/manage-functions?authuser=0


Create Cloud functions with firebase

1. Chọn hosting bằng lệnh `firebase init`
2. [ ở firebase console ] tới `hosting -> Add another site`
3. 
```sh
firebase target:apply hosting [added-site] [added-site]
``` 
Kiểm tra `.firebaserc/targets` có trường [added-site] chưa.

Ví dụ:
`.firebaserc`
```json
{
  "projects": {
    "default": "classfunc-com"
  },
  "targets": {
    "classfunc-com": {
      "hosting": {
        "blogs-classfunc": [
          "blogs-classfunc"
        ]
      }
    }
  }
}
```

4. Thêm vào `firebase.json/hosting` trường `target` với giá trị `[added-site]` ở trên
Ví dụ: 
`firebase.json`

```json
{
  "hosting": [
    {
      "target": "blogs-classfunc",
      "public": "out",
      "ignore": [
        "firebase.json",
        "*/.",
        "*/node_modules/*"
      ],
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "/",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "index.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=0, no-cache"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        }
      ]
    }
  ]
}
```
5. Deploy
 ```sh
 firebase deploy --only hosting:[added-site]
 ```
 
 6. 🍻
## Xem thêm:
[hosting multisites](https://firebase.google.com/docs/hosting/multisites)

Deploy Firebase Hosting cho dự án mới

Hướng dẫn deploy một repo lên gcp compute engine

### Tạo repo và compute instance

1/ Tạo repo nếu chưa có tại https://source.cloud.google.com/repo/new

2/ 
```sh
git clone https://github.com/zerolethanh/dev-classfunc-demo
cd from-repo-to-gce
```

3/ Thay thế tên repo vừa tạo vào `REPOSITORY=` ở `start-scripts.sh`

```sh start-scripts.sh
REPOSITORY="tên repo vừa tạo"
```

4/ [Cấu hình instance](https://console.cloud.google.com/compute/instancesAdd) , ví dụ như:

![create-instance.png](https://storage.googleapis.com/dev-classfunc-com-data/create_instance_277bee93fb/create-instance.png_create_instance_277bee93fb.png)

5/ Kéo xuống, copy nội dung `start-scripts.sh` rồi paste vào như dưới, Create và đợi instance được tạo xong:

![setting startup-scripts.png](https://storage.googleapis.com/dev-classfunc-com-data/setting_startup_scripts_d327830d06/setting-startup-scripts.png_setting_startup_scripts_d327830d06.png)


### Kiểm tra:

Vào ssh như dưới và nếu check được `node -v` là OK!

![Ảnh chụp Màn hình 2020-08-13 lúc 02.44.33.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_2020_08_13_luc_02_44_33_2544b436a2/Anh-chup-Man-hinh-2020-08-13-luc-02.44.33.png_Anh_chup_Man_hinh_2020_08_13_luc_02_44_33_2544b436a2.png)
![classfunc-4.png](https://storage.googleapis.com/dev-classfunc-com-data/classfunc_4_e7753acd9b/classfunc-4.png_classfunc_4_e7753acd9b.png)
### DEV TODO:
Thêm vào `start-scripts.sh` những câu lệnh cho phù hợp với app của mình.

### Xem thêm:
- [Startup script doc](https://cloud.google.com/compute/docs/startupscript)
- [Cách lựa chọn machine](https://cloud.google.com/compute/docs/machine-types#recommendations_for_machine_types)

Từ Repo tới GCE


## Tổng quan
- Mỗi khi repo có sự thay đổi (developer push...) sẽ thông báo lên slack.

![repo-topic-subscriptions.png](https://storage.googleapis.com/dev-classfunc-com-data/repo_topic_subscriptions_412e43ed0f/repo-topic-subscriptions.png_repo_topic_subscriptions_412e43ed0f.png)

Các bước: 

1. tạo topic
2. tạo slack channel
3. deploy trigger functions

## Thực hành
0. 
```sh
git clone https://github.com/zerolethanh/dev-classfunc-demo
cd slack-on-code-pushed
```

1. Chỉnh 3 biến số cho phù hợp ở file `deploy.sh`
```sh deploy.sh
PROJECT=
TOPIC=
REPOS=
```
2. Thay thế `SLACK_WEBHOOK_URL` ở file `setting.js` bằng slack webhook đã tạo ở https://slack.com/apps/A0F7XDUAZ-incoming-webhooks

3. chạy file deploy bằng lệnh `bash deploy.sh`





## Xem thêm:

- [Configuring Pub/Sub notifications](https://cloud.google.com/source-repositories/docs/configuring-notifications)

- [Notifications for Cloud Source Repositories](https://cloud.google.com/source-repositories/docs/pubsub-notifications)

Cách cài đặt slack notification cho các dự án GCP

**Playwright**.

Playwright  là một thư viện Node.js để tự động hóa Chromium, Firefox và WebKit bằng một API duy nhất. Nó được xây dừng để tự động hóa hầu hết các tính năng trình duyệt web

**Kiểm thử đầu tiên** 

Ở đây mình sẽ dùng playwright tự động login nhé.!

Tạo một thư mục cho project của bạn và khởi tạo một project Node mới bên trong thư mục bằng câu lệnh sau:

```
mkdir playright-test && cd playright-test && npm init -y
```

Sau khi thiết lập xong project,, chúng ta cần cài đặt thư viện **Playwright** và tạo một tệp có tên là **index.js**

chạy câu lệnh sau để cài đặt thư viện 

``yarn add playwright``

hoặc nếu bạn dùng  **npm**

``npm i playwright``

Tiếp theo ta tạo file **index.js**  trong  project Node mà bạn vừa tạo ở trên.

đầu tiên chúng ta cần import các engine của các trình duyệt từ **playwright** chẳng hạn như **chromium**.

`const {chromium} = require('playwright')`

Sau đó bằng cách gọi phương thức *launch* để tạo một đối tượng *browser*, *context*  

tiếp theo đó tạo một *page* bằng cách sử dụng phương thức *newPage* 

 dùng *goto*  để đi đến trang  `http://localhost:3001/login/` hoặc bạn có thể dùng địa chỉ này  `https://github.com/login` 

và cuối cùng là *screenshot* để chụp ảnh màn hình


```
        const browser = await chromium.launch();

        const context = await browser.newContext();

        const page = await context.newPage();

        await page.goto('http://localhost:3001/login/');
  

```

Tiếp theo sử dụng **page.fill**  để  tự động điền *form elements*

```
  await page.fill('input[name="login"]', account.login);
  await page.fill('input[name="password"]', account.password);
```

**page.click** để submit và  **screenshot** chụp ảnh màn hình

```
await page.click('button[type="submit"]');
await page.screenshot({path: `img/example-${chromium.name()}.png`});

// đóng trình duyệt
await browser.close();

```

đây là file **index.js** của mình.Ở đây mình sử dụng kiểm thử trên  **chromium** và  **webkit**

```
const playwright = require("playwright");

const account = {login: 'thanh****.com', password: '*****'};

(async () => {
   
    for (const browserType of ['chromium', 'webkit']) {
        const crBrowser = await playwright[browserType].launch({headless: false, slowMo: 200});
        const crContext = await crBrowser.newContext();
        const crPage = await crContext.newPage();


        // Navigate and auto-wait on the page to load after navigation
        await crPage.goto('http://localhost:3001/login/');

        await crPage.fill('input[id="email"]', account.login);
        await crPage.click('button[type="submit"]');
        await crPage.fill('input[id="password"]', account.password);
        await crPage.click('button[type="submit"]');


        await verifyIsLoggedIn(crPage);
  
        // screenshot 
        await crPage.screenshot({path: `img/example-${browserType}.png`});
        
         // close
        await crBrowser.close();

    }

})();

const verifyIsLoggedIn = async (page) => {
    try {
        await page.waitForSelector("#account")
        console.log('logined')
    } catch (e) {
        console.log(e);
        if (e instanceof playwright.errors.TimeoutError) {
            // Do something if this is a timeout.
        }
    }

}
```
Đây là ảnh màn hình 

**example-chromium.png**

![](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/avatar%2Fchromium.PNG?alt=media&token=f1fab907-c24f-43e0-a426-f09c9128b51b)

**example-webkit.png**
![](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/avatar%2Fwebkit.PNG?alt=media&token=78762eb9-7437-45f3-a195-46f8c4b489b5)

*Còn đây là ảnh chụp mô phỏng iphone-11*

![](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/avatar%2Fwebkit%20iphone.PNG?alt=media&token=1dd54090-f0fa-44eb-afd1-7aba0e0ace8c)


**playwright** còn mang lại rất nhiệu tiện ích khác mà các bạn có thể tìm hiểu ở đây:

Link tham khảo:

1. https://playwright.dev/

2. https://github.com/microsoft/playwright

3. https://testguild.com/what-is-playwright/












"Playwright" và ca kiểm thử đầu tiên với playwright 

Tiếp tục phần login với  **Firebase** hôm nay mình hướng dẫn các bạn *login* bằng **Facebook** nhé.!

**Cài đặt Firebase:**

Như phần cài đặt với **Google** trong   Authentication chọn 'Sign-in method' tab và hãy chắc chắn bạn kích hoạt **Facebook** trong mục provider.

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2F1.PNG?alt=media&token=cd8554a0-8e8a-43bd-83ed-8f1e2e99dddd)

Bây giờ, khi *Enabled*  lên chúng ta sẽ có giao diện như thế này .

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F1.1.PNG?alt=media&token=ba4f9b06-bb2b-4c23-927f-d4cce904643f)

tiếp theo là lấy **App ID** và **App secret**

các bạn truy cập https://developers.facebook.com/ rồi  đăng nhập vào nó..! Truy cập vào **Ứng dụng của tôi**

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F1.2.PNG?alt=media&token=5e3cc13c-32f7-4b43-ae6c-5c000d76fddb)


lúc này nếu chưa có tài khoản bạn hãy tạo tài khoản nhé. Tiếp theo trong **ứng dụng của tôi** bạn tạo mới ứng dụng để lấy **App ID** và **App secret**

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F1.PNG?alt=media&token=1b0b247f-d961-4ac1-91dd-53bdd0da23d1)

Sau khi tạo xong các bạn chọn thiết lập **Đăng nhập bằng Facebook** như hình nhé.

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F2.PNG?alt=media&token=b00d193e-6438-4fa1-b8bc-71e2ebf4f005)


tiếp theo các bạn chuyển tới **Bảng điều khiển**  trong phần cài đặt bạn chọn *Thông tin cơ bản* lúc này **App ID** và **App secret** của chúng ta sẽ trông như này.

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F3.1.png?alt=media&token=9d73f779-353a-4be5-a7b4-a005d3ac372d)

ở phần mình đánh số **1** và **2** các bạn copy rồi quay trờ lại phần cài đặt **Firebase** dán nó vào và nhấn **Save**

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F4.png?alt=media&token=df0404d6-df2b-4925-94d8-6b5b60fac41e)

sau đó trong phần mình khoanh màu vàng bạn copy đia chỉ này rồi quay lại **FACEBOOK for Developers**  trong *Bảng điều khiển* bạ chọn **Đăng nhập bằng Facebook**  => **Cài đăt**

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F64.png?alt=media&token=3f1dcad4-9e93-4479-8873-a860df3a7be2)

rồi dán vào phần *URL chuyển hướng OAuth hợp lệ* và **Lưu thay đổi** 

Như vậy bạn đã xong phần **Cài đặt**

Bây giờ tới phần **code**

Cũng như login **Google** thì mình sẽ để *button* **login facebook firebase**  bạn có thể tham khảo thêm tại  [đây](https://blog.classfunc.com/post/Huong-dan-login-Google-with-Firebase)


Và đây là hàm **onloginFacebook** nhé .

```
 const onloginFacebook = async () => {
    try {
      //cài đặt provider đăng nhập facebook
      const facebookProvider = new firebase.auth.FacebookAuthProvider();

      auth.signInWithPopup(facebookProvider).then(function(result) {
        const user = result.user;
        console.log('User>>Goole>>>>', user);

        // lưu thông tin user vào localStorage
        localStorage.setItem('user', JSON.stringify(user));

        //lưu thông tin user vào global
        rtn.setGlobal({ user: JSON.parse(JSON.stringify(user)) });

      }).catch(function(error) {
        console.error('Error: hande error here>>>', error.code);
      });
    } catch (e) {
      console.log(e);
    }
  };
```

và đây là kết quả:

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ffacebook%2F5.PNG?alt=media&token=5a9d2e96-9ae4-40f5-9e63-1c90708eb4df)

chúc các bạn thành công .!

Link tham khảo thêm: https://firebase.google.com/docs/auth/web/facebook-login

Link Facebook for Developers   : https://developers.facebook.com/

Link tham khảo login Google: https://blog.classfunc.com/post/Huong-dan-login-Google-with-Firebase





Hướng dẫn login Facebook with Firebase

Như ở  [đây](https://blog.classfunc.com/post/Huong-dan-login-Google-with-Firebase) mình có chia sẽ cách login firebase với **Google**. Hôm nay mình sẽ hướng dẫn các bạn login với  **Email & Password**.

Mình sẽ bỏ qua bước cài đặt firebase nhé (bạn nào chưa biết có thể xem lại bài trước tại  [đây](https://blog.classfunc.com/post/Huong-dan-login-Google-with-Firebase) 

**Phần code**

Trước khi để **login** thì chúng ta cần phải có tài khoản đúng không nào. Bây giờ ta tạo giao diện để người dùng đăng ký tài khoản.

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Fdangky.PNG?alt=media&token=dfee8799-1650-4552-9b35-cd836d17dd31)

Tiếp theo ta viết hàm đăng kí tài khoản thôi.! ở đây hàm của mình viết sẽ là **onRegister**.
Mình sẽ dùng *createUserWithEmailAndPassword*  bạn có thể xem ở  [đây](https://firebase.google.com/docs/auth/web/password-auth?authuser=0) 

```
const onRegister = async () => {
    try {
      await firebase.auth().createUserWithEmailAndPassword(email, password);

      alert(`Chúc mừng bạn đăng ký thành công với Email:${email}`);

    } catch (e) {
      console.log(e);
    }
  };
```

Sau khi add sự kiện cho button đây là kết quả khi ta đăng ký thành công


![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2F2.2.2.PNG?alt=media&token=e07b66ae-975f-4b68-a2ed-1bf292d56911)


Bây giờ quay lại **firebase console** Trong *Authentication* ở tab **Users** bạn đã nhìn thấy tài khoản mà bạn vừa đăng ký.

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Fcuoi%2011.PNG?alt=media&token=caa21480-c3de-4606-96e7-201721ed28c4)

như vậy là bạn đã đăng ký thành công rồi bây giờ ta tiếp tục với đăng nhập nhé.!.

Tương tự đăng ký , phần đăng nhập bạn cũng tạo giao diện người dùng .

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Fdang%20nhap.PNG?alt=media&token=b2b1a22f-75dc-411b-ae32-824170fceaee)

để đăng nhập ta dùng *signInWithEmailAndPassword*  thảo khảo thêm tại  [đây](https://firebase.google.com/docs/auth/web/password-auth?authuser=0) 

```
const onLogin = () => {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(results => {
        console.log(results);

      })
      .catch(function(error) {
        console.log(error);
      });
  };

```

và đây là kết quả khi ta đăng nhập thành công.

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2F2.3.PNG?alt=media&token=761b3e1c-f8b4-4789-aa74-dfcb46b72b56)

Link tham khảo thêm tại đây: https://firebase.google.com/docs/auth/web/password-auth?authuser=0

Hướng dẫn  register và login Email & Password

**Cài đặt Firebase:**

Nếu bạn chưa có 1 project Firebase nào hãy tạo cho riêng mình 1 project tại [đây](https://console.firebase.google.com/u/0/?pli=1)

Tiếp theo, di chuyển đến trang Authentication chọn 'Sign-in method' tab và hãy chắc chắn bạn kích hoạt Google trong mục provider.

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2F1.PNG?alt=media&token=cd8554a0-8e8a-43bd-83ed-8f1e2e99dddd)

Cuộn xuống dưới và  Authorized Domain bạn hãy để localhost là *Default*

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Ftempsnip.png?alt=media&token=43c59146-44e9-4e44-b519-e8f0a29bfc50)

Tiếp theo trong Setting, chọn Web apps  và copy phần config

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2F3.png?alt=media&token=90ea0442-a7d1-4a04-a711-4941c252e911)


Bây giờ quay lại project của bạn, trong *src* tạo mới file **firebaseConfig.js** và copy phần config ở trên vào . Hãy nhớ export nó để mình sử dụng. nó sẽ trông như thế này .

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2F1%20thay%20the.png?alt=media&token=954499a7-8ebf-4a31-920f-8627fa920e50)

Trong project của mình bạn mở Terminal và chạy lệnh sau để cài đặt thư viện Firebase:

```npm install --save firebase```

 hoặc nếu dùng *yarn*

 ```yarn add firebase```

**Bây giờ đến phần code**

Đầu tiên mình sẽ tạo một màn hình có giao diện như thế này ( hiển thị thông tin user trả về khi login Google nhé) 

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2Fscreen%201.PNG?alt=media&token=6934623a-d471-44e9-89c6-4bb61b755f59)

Mình sẽ để 2 button **Login google** và **Logout google** ,*follow* là khi chưa có **user** mình sẽ hiển thị button  **Login google** và có **user**  sẽ là  **Logout google** như hình bên trên 


Bây giờ ta viết hàm **onLoginGoogle** nhé 

```
   const onLoginGoogle = async () => {
    try {
      //cài đặt provider đăng nhập google
      const ggProvider = new firebase.auth.GoogleAuthProvider();

      auth.signInWithPopup(ggProvider).then(function(result) {
        // const token = result.credential.accessToken;
        const user = result.user;
        // let id = 'doc_' + uuidv4();

        console.log('User>>Goole>>>>', user);

        // lưu thông tin user vào localStorage
        localStorage.setItem('user', JSON.stringify(user));

        //lưu thông tin user vào global
        rtn.setGlobal({ user: JSON.parse(JSON.stringify(user)) });

      }).catch(function(error) {
        console.error('Error: hande error here>>>', error.code);
      });
    } catch (e) {
      console.log(e);
    }
  };

```

Tiếp theo ta thêm sự kiện **onClick** cho button **Login google** và đây là kết quả trả về khi **login** thành công 

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/demo%2F4.PNG?alt=media&token=524f1bf3-bb3c-4a98-b7da-67a2ea416d5c)

như vậy là ta đã **login** thành công google với firebase rồi.

Có **login** thì phải có **logout** chứ nhỉ
```
firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});
```



 để giữ trạng thái đăng nhập bạn sử dụng **onAuthStateChanged** bạn có thể tham khảo tại  [đây](https://firebase.google.com/docs/reference/js/firebase.auth.Auth) .

```
 useEffect(() => {
    const sub = auth.onAuthStateChanged(
      (user) => {
        if (!user) return;
        console.log('Auth state change');
        setUser(user);
      },
    );
    return () => {
      sub();
    };
  }, []);
```

Link tham khảo thêm : https://firebase.google.com/docs/auth/web/google-signin?hl=vi













Hướng dẫn login Google with Firebase

Rect context API là một cách cơ bản để tạo các biến toàn cục có thể được truyền qua trong ứng dụng React
Context gồm 2 phần là Provider (  cung cấp giá trị ) và Consumer ( sử dụng giá trị )
 Tạo context 
sử dụng `createContext` để tạo context và giá trị mặc định
```js
import React from 'react'
export const UserContext = React.createContext({})
```

Tiếp theo viết  Provider và truyền dữ liệu xuống 

```js
export const UserProvider = ({children}) =>{
    const [user, setUser] = useState({})

    //  lấy thông tin user từ api
    useEffect(()=>{
        fetch("https://randomuser.me/api")
            .then(res=>res.json())
            .then(data=>{
                console.log(data);
                setUser(data.results[0])
            })
            .catch(console.log)
    },[])

    return(
        <UserContext.Provider value={user}>
            {children}
        </UserContext.Provider>
    )
}
```

sử dụng UserProvider trong file index.js

```js
ReactDOM.render(
    <UserProvider>
        <App/>
    </UserProvider>,
    document.getElementById('root')
);

```

trong các component con ta lấy giá trị value user bằng useContext
ví dụ: 
```js
import React , {useContext} from 'react';
import './App.css';
import { UserContext} from "./context/userContext";

function App() {

  const user = useContext(UserContext)
    if(!user.id)
        return <div>loading...</div>
  return (
    <div className="App">
        <p>
          Hi {user.name.title} {user.name.first} {user.name.last }
        </p>

    </div>
  );
}

export default App;

```

### xem thêm :
- https://vi.reactjs.org/docs/context.html
- https://github.com/nguyenphi990/reactjs-useContext




useContext trong Reactjs (hooks)

Để lấy **Client ID** và **Client Secret** từ Google

Đầu tiên bạn truy cập vào đường dẫn sau:[https://console.developers.google.com](https://console.developers.google.com)

(** *Nếu chưa có project nào bạn hãy tạo mới project bằng cách chọn vào **NEW PROJECT** nhé*)

Tiếp theo trong dashboard  bạn nhìn thấy  *Credentials* hãy nhấn vào nó.

![alt](https://firebasestorage.googleapis.com/v0/b/test-first-data-to-firebase.appspot.com/o/1-1.PNG?alt=media&token=e2467154-5b2f-4734-89b0-31d7620d0ad0) 



Bây giờ trong *Credentials* nhấn vào * + CREATE CREDENTIALS* và chọn *OAuth client ID* như hình.



![alt](https://firebasestorage.googleapis.com/v0/b/test-first-data-to-firebase.appspot.com/o/2.PNG?alt=media&token=42be3718-50a9-450d-8882-a474fe85b4f7) 


*Lưu ý: bạn sẽ nhận được cảnh báo nếu chưa cấu hình ‘Consent’ , tiếp tục nhấn Configure consent screen và điền đầy đủ các thông tin theo yêu cầu & nhấn nút Save để quay về màn hình Credentia*

![alt](https://firebasestorage.googleapis.com/v0/b/test-first-data-to-firebase.appspot.com/o/3.PNG?alt=media&token=e121701d-eead-4145-bbd9-5424abe2a80f) 

Bước tiếp theo bạn hãy chọn *Web application* 

![alt](https://firebasestorage.googleapis.com/v0/b/test-first-data-to-firebase.appspot.com/o/5.PNG?alt=media&token=eca2388c-6d93-47df-ae40-656952bc9143) 


Bây giờ hãy điền thông tin và nhấn **CREATE**   nhé

![alt](https://firebasestorage.googleapis.com/v0/b/test-first-data-to-firebase.appspot.com/o/7.PNG?alt=media&token=7936701d-2724-4865-970e-769506a47afc) 


Sau khi nhấn tạo xong, lúc này bạn sẽ nhận được **Client ID** và **Client Secret** như này 


![alt](https://firebasestorage.googleapis.com/v0/b/test-first-data-to-firebase.appspot.com/o/6.png?alt=media&token=6b4eb5b2-a2fd-4dec-b21b-cf9bed03ca9c) 



TÀI LIỆU THAM KHẢO THÊM: https://developers.google.com/adwords/api/docs/guides/authentication








Hướng dẫn lấy Client ID và Client secret từ Google


Thiết lập  **Trigger Email Extension**

1. Trong bảng điều khiển Firebase của bạn hãy nhấp vào

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/test%2F4.png?alt=media&token=d3123881-3988-4fdf-a23f-abe4fc2f2a59) 


2. Chọn Trigger Email

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/test%2F1.PNG?alt=media&token=3c6c25c6-3efd-4d36-aac3-59862dfde7f9) 

Bây giờ hãy làm theo hướng dẫn nhé và đây là phần thiết lập của mình

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/9.png?alt=media&token=c9337ca4-12ae-4974-ba22-ba1778d30250) 

3. Sau khi thiết lập trigger Email bạn hãy quay lại bảng điều khiển Firebase của mình hãy tạo collection "mail" và  "mailTemplates"

4. Trong collection "mailTemplates" hãy tạo document với mẫu :

```
{
 subject: ‘Chào mừng bạn’,
 html: ‘<div class=”body”> Welcome{username}} to my app</div>’
}
```

trông như thế này

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/7.PNG?alt=media&token=e6fc3f8d-1c8a-4232-b706-b3b667a49de6) 



Bây giờ hãy gửi Email đầu tiên của bạn nhé. 

```
db.collection("mail")
  .doc("id")
  .set({
      to:'thanhnguyen123@classfunc.coml',  //email người nhận
      template:{
        name: 'sendMail'   //tên document bạn vừa tạo
        data:{     //data gửi đi
            userName:'Thanh Nguyen'

                }
            }
      }  
)
```

Hãy kiểm tra mail của bạn và xem kết quả nhé !!

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/10.png?alt=media&token=8a98ff01-4cbc-4d7f-9895-28d7839cc271) 


Tham khảo thêm tại đây :https://firebase.google.com/products/extensions/firestore-send-email




Gửi email từ Firebase với  Trigger Email Extension

1. Tạo project react 
```
npx create-react-app my-app
cd my-app
npm start
```
2. Cài đặt tailwindcss 
```
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
```
3. Tạo tệp cấu hình tailwind
```
npx tailwind init --full
```
Lúc này sẽ xuất hiện file  *tailwind.config.js* trong thư mục gốc. 
Tạo file tailwind.css trong thư mục src 

4. Add tailwind vào file tailwind.css mới tạo
```
@tailwind base;
@tailwind components
@tailwind utilities
```
5. Trong file package.json. Cài đặt để build css từ tailwind. Đoạn scripts trong package.json sẽ có dạng 
```code block``` 

```
 "scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "npx tailwindcss build src/tailwind.css -o src/index.css "
  },
```
Như vậy là xong, khi chạy npm start, file index.css sẽ chứa tất cả các className mà tailwind cung cấp

Cài đặt tailwindcss cho project react

![Ảnh chụp Màn hình 2020-09-20 lúc 11.32.59 CH.png](https://storage.googleapis.com/dev-classfunc-com-data/Anh_chup_Man_hinh_2020_09_20_luc_11_32_59_CH_78421621ac/Anh-chup-Man-hinh-2020-09-20-luc-11.32.59-CH.png_Anh_chup_Man_hinh_2020_09_20_luc_11_32_59_CH_78421621ac.png)

## xem thêm tại : https://www.npmjs.com/package/@welldone-software/why-did-you-render


Chia sẻ  thư viện why-did-you-render

##Đầu tiên sẻ tạo mới  *Strapi prject* bằng lệnh sau:

`yarn create strapi-app my-project --quickstart`

* Initial commit: commit đầu tiên
```
cd my-project
git init
git add .
git commit -m first
```
* Cài đặt **CLOUD SDK CLI tool**

(Note: *Bạn phải có project trên gcl nhé)

gcl*: Google Cloud Platform 

* Tạo một App Engine bạn có thể tham khảo tại [đây](https://console.cloud.google.com/appengine/)

* Kiểm tra gcloud danh sách project.

để kiểm tra xem *cgloud*  đã có  trong dự án của mình hay  chưa ta  cách chạy lệnh

``gcloud projects list``

tiếp theo ta đăng ký auth và cli:

``gcloud init``

rồi làm theo hướng dẫn nhé .!

* Tạo cơ sở dữ liệu (ở đây ta dùng  *PostgreSQL*)
Bạn có thể tham khảo ở [đây](https://cloud.google.com/sql/docs/postgres/create-manage-databases) nhé

* Tạo app.yaml và .gcloudignore

file *app.yaml* có dạng như thế này 

```
runtime: nodejs10

instance_class: F2

env_variables:
  HOST: '0.0.0.0'
  NODE_ENV: 'production'
  DATABASE_NAME: 'strapi'
  DATABASE_USERNAME: 'postgres'
  DATABASE_PASSWORD: '<password>'
  INSTANCE_CONNECTION_NAME: '<instance_identifier>'

beta_settings:
  cloud_sql_instances: '<instance_identifier>'
```

coppy paste và custom theo database của bạn nhé còn đây là  file *app.yaml* của mình


![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/test%2Fstrapi1.PNG?alt=media&token=6f9db789-365a-4eb5-aa41-b68fd6a45b8d) 

file * .gcloudignore* có dạng như này

```
app.yaml
.gcloudignore
.git
.gitignore
node_modules/
#!include:.gitignore
```

của mình

![alt](https://firebasestorage.googleapis.com/v0/b/vicuatui.appspot.com/o/test%2Fstrapi2.PNG?alt=media&token=0de5cd48-4315-4677-a73f-3b790fa511b7) 

*Tiếp theo ta cấu hình *database*

chạy lệnh sau 

``yarn add pg``

bây giờ hãy chỉnh sửa database.js theo đường dẫn  *config/database.js*

thay đoạn code sau vào database.js

```
module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: `/cloudsql/${env('INSTANCE_CONNECTION_NAME')}`,
        database: env('DATABASE_NAME'),
        username: env('DATABASE_USERNAME'),
        password: env('DATABASE_PASSWORD'),
      },
      options: {},
    },
  },
});
```
* Tiếp theo trong pakage.json bạn thêm 

```{
  "scripts": {
    "gcp-build": "strapi build"
  }
}
```
Bây giờ ta deploy nhé

```
gcloud app deploy app.yaml --project <project-name>
```

Hãy xem thành quả của bạn nhé..!!!!


## Link tham khảo :https://cloud.google.com/sql/docs/postgres/create-manage-databases






Deploy strapi to google app Engine

1. tải về browser google script

```
export default function GoogleAuth() {

    const src = "https://apis.google.com/js/platform.js"
    let script = document.createElement('script')
    script.src = src
    script.async = true
    script.addEventListener('load', onScriptLoad)
    script.addEventListener('error', onScriptError)
    document.body.appendChild(script)


}

function onScriptError() {
    console.log('error !!!')
}

function onScriptLoad() {
    window.gapi.load('client:auth2', function () {
        window.gapi.client.load('calendar', 'v3', function () {
            const params = {
                client_id: "clientId của bạn",
                scope: 'profile  email',
                fetch_basic_profile: true,
                prompt: 'select_account',
                access_type: "offline",
                response_type: "code",
            }
            window.gapi.auth2.init(params)
        })


    })

}
```
- thay đổi clientId bằng clientId của dự án của bạn 
- gọi hàm GoogleAuth vào `index.js`
- khi user cần đăng nhập gọi hàm ```window.gapi.auth2.getAuthInstance().grantOfflineAccess()```


## Xem thêm:
- https://developers.google.com/identity/sign-in/web/reference

đăng nhập google react app

###### khi bạn thêm 1 scope mới vào ứng dụng mà google yêu cầu cần phải xác thực.( ví dụ : https://www.googleapis.com/auth/spreadsheets)

1. cập nhật trang chủ:
	- trang chủ của bạn phải có hướng dẫn người dùng đến trang có Privacy Policy hoặc có link đến trang Privacy Policy ( ví dụ : https://classfunc.com/privacy-policy.html)
    - google yêu cầu nhất quán thương hiệu vì vậy mục Application name và Application logo phải được thể hiện trên trang chủ.
    sau khi cập nhật các thông tin đầy đủ click submit và nhập đầy đủ những mô tả app của bạn sẽ sử dụng dữ liệu của scope đó như thế nào bằng tiếng anh.
2. sau khi những thông tin trên được  google xác nhận, bước tiếp theo là test account bạn cần làm 1 video gửi cho google mô tả chính xác việc bạn sử dụng dữ liệu đó. cần chú ý: 
	- sub các bước bằng tiếng anh
	- màn hình đăng nhập hiện thị lên là bằng tiếng anh

    ![Sign in - Google Accounts.png](https://storage.googleapis.com/dev-classfunc-com-data/Sign_in_Google_Accounts_06b986eb33/Sign-in-Google-Accounts.png_Sign_in_Google_Accounts_06b986eb33.png)
￼
	- người dùng phải nhìn thấy được clientId app của bạn trên màn hình này. ví dụ bôi đen clientId của app 
![Sign in - Google Accounts.png](https://storage.googleapis.com/dev-classfunc-com-data/Sign_in_Google_Accounts_dc5ac4d72e/Sign-in-Google-Accounts.png_Sign_in_Google_Accounts_dc5ac4d72e.png)￼

	- cho thấy các loại bỏ quyền đã được cho phép. có thể xoá trực tiếp từ : https://myaccount.google.com/permissions


OAuth App verification request những điều cần chú ý

# Cài đặt
* Node js 
* Npm
* Firebase CLI
	* `npm install -g firebase-tools`
    
 
 Chạy ` firebase login ` để login và xác thực firebase tool.

 Chạy `firebase init functions` để cài đặt functions firebase cho project của bạn.
  
  Cấu trúc thư mục sau khi cài đặt như sau.

```
myproject
 +- .firebaserc    #hidden file giúp bạn chuyển đổi nhanh chóng giữa các project
 |                 
 |
 +- firebase.json  # Mô tả các thuộc tính cho porject 
 |
 +- functions/     # thư mục chứa function code
      |
      +- package.json  # npm package file khai báo các dependence dùng cho Cloud Functions
      |
      +- index.js      # file code chính của Cloud Functions
      |
      +- node_modules/ # thư mục chứa các source dependence đã đc cài đặt (khai báo trong package.json)
```
      
- Trong `index.js` coppy đoạn code sau.
```js
exports.helloWorldTest = functions.https.onRequest((request, response) => {
 response.send("<p>Hello from Firebase!</p>");
});
```

- onRequest(non-null express.Request, non-null express.Response) tham số 1 là request gửi lên, 2 là response trả về(Request,Response) 
- Để deploy functions:

   `firebase deploy --only functions`
- Đây là kết quả khi deploy
   
   ![alt](https://images.viblo.asia/1b8b36f3-70f3-4f02-a56f-cd2abbfb0c2b.png)
   
  
- function url chính là endpoint để truy cập tới function mà bạn vừa viết, hãy dán nó vào trình dyệt và đây là kết quả.
   
   ![alt](https://images.viblo.asia/b6069cc7-a4b4-44d4-8d61-266a0c38fa9e.png)
   
   Tài liệu tham khảo:[https://firebase.google.com/docs/functions/get-started](https://firebase.google.com/docs/functions/get-started)

Cloud Functions trong firebase

*Author*: **Thanh Nguyễn**

Trong bài viết này mình sẻ hướng dẫn các bạn "newber" về việc
 
 *Deploy firebase Hosting một dự án mới*.


*(hướng dẫn này đối với người chưa biết gì về firebase Hosting nhé..! )*


Hãy bắt đầu thôi nhỉ .~~

 **Deploy firebase Hosting một dự án mới**.


Đầu tiên để thiết lập Firebase Hosting bạn phải tạo một project trên firebase, bạn có thể tham khảo ở [đây](https://firebase.google.com/docs/web/setup) có hướng dẫn bạn thêm mới một project lên Firebase nhé..!

*Rồi chúng ta tiếp tục nào*

Bước 1:Cài đặt Firebase CLI

`npm install -g firebase-tools`

Bước 2:Trong project của bạn hãy chạy lệnh sau để kết nối dự án cục bộ với dự án Firebase

`firebase init`

* Nhấn Y và `enter` nhé.

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/1.PNG?alt=media&token=4ca269ba-6f3d-4462-ad43-19349b9e091c)

* Chọn `Hosting: Configure and deploy Firebase Hosting sites` bằng nút `space` sau đó nhấn `enter`

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/2coppy.PNG?alt=media&token=69a1de97-4af8-42d6-866b-6beff8b0b5c9)



* Tiếp theo lựa chọn project firebase của bạn

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/3.PNG?alt=media&token=396fe0ae-d604-4add-adcd-4c512803ac34)

*- chọn project của bạn tiếp theo hãy nhấn `enter`*

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/5.PNG?alt=media&token=351045e2-16ea-4115-96fc-cdcd0d0f9943)

* Tiếp theo hãy nhấn `enter`

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/6.PNG?alt=media&token=ff8ffcf2-67d3-46d8-a766-3328854acdc2)

* Chọn N và nhấn `enter`
![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/7.PNG?alt=media&token=4d60642b-2811-49e4-ac41-8d6c55ece26c)

* Tiếp nhé chọn N và nhấn `enter`
![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/8.PNG?alt=media&token=2cea9344-0428-45e2-987e-e41c4251b2b2)

*Ta sẻ có 2 file được tạo tự động `.firebaserc` và `firebase.json`*

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/9.PNG?alt=media&token=db7c84ce-62ac-461e-b063-373fdde5b6e5)

*Sau khi hoàn thành các bước trên ta sẻ có 2 file `.firebaserc` và `firebase.json`*
![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/10.PNG?alt=media&token=1766ae5f-de18-47a4-b1ac-9beab0eb95d7)

*Lúc này `firebase.json` của chúng ta sẻ trông như thế này.bạn có thể tham khảo thêm tại [đây](https://firebase.google.com/docs/hosting/full-config)*

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/11.PNG?alt=media&token=95c919f2-17a7-4640-9c18-c0b1456a23b5)

còn đây là `firebase.json` của mình:

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/12.PNG?alt=media&token=a8550c81-d49f-4e85-b784-52c7518a3aa4)

* Tiếp theo chạy `yarn build` lúc này ta sẻ có file `build`như thế này

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/13.PNG?alt=media&token=e6e78b2b-ff7f-45fd-bfe1-c243a8953d1c)

* Cuối cùng ta deploy hosting chứ nhỉ hãy chạy lệnh 
`firebase deploy --only hosting` và đây là kết quả

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/14-1.PNG?alt=media&token=480a16db-a1a9-4218-8a77-2cf5d8c3faab)

Chúc mừng bạn, vậy là bạn đã deploy hosting thành công rồi bây giờ ta kiểm tra nhé .!

Truy cập vào `firebase console` hoặc bạn có thể click vào [Project Console](https://console.firebase.google.com/project/my-blog-93906/overview) như trong hình

Và đây là kết quả của chúng ta

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/15.PNG?alt=media&token=823a63f7-d6f0-4165-9297-1500c1468589)

*vùng khoanh tròn là link mặc định khi chúng ta deploy hosting  hãy click vào và xem thành quả nhé*


Như vậy là mình đã hướng dẫn các bạn deploy firebase Hosting bằng hình ảnh rồi nhỉ tiếp theo là phần [Tạo cloudbuild lên google cloud platform](https://dev3.classfunc.com/2020/08/05/Huong-dan-Cloud-build-bang-hinh-anh/) các bạn xem tại [đây](https://dev3.classfunc.com/2020/08/05/Huong-dan-Cloud-build-bang-hinh-anh/).



**Các bạn có thể xem thêm hướng dẫn ở đây**

*Hướng dẫn hosting : [https://dev.classfunc.com/2020/07/23/deploy-firebase-hosting-cho-du-an-moi/](https://dev.classfunc.com/2020/07/23/deploy-firebase-hosting-cho-du-an-moi/)*

*Tài liệu tham khảo : [https://firebase.google.com/docs/hosting/quickstart](https://firebase.google.com/docs/hosting/quickstart)*

Hướng dẫn đầy đủ từ việc deploy firebase hosting một dự án mới bằng hình ảnh

Ở bài [trước](https://dev.classfunc.com/2020/08/04/Huong-dan-day-du-tu-viec-hosting-mot-du-an-moi-va-tao-Cloudbuild-len-Goog/) mình đã hướng dẫn các bạn `deploy firebase Hosting` bây giờ mình sẻ hướng dẫn các bạn đưa code của mình lên google cloud 

 ** Note: Google Cloud Platform : mình gọi tắt là `gcp` nhé.
 
Để đưa code lên ta cần một nới chứa vì thế ta sẻ tạo một Repositories

Trong gcp bạn thêm một `Repositories` hiểu đơn giản là `kho` chứa code của mình
 
 ![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/21.PNG?alt=media&token=93b4d9ed-ecb3-424e-b49c-26efe6341d8d)
 
*Nếu chưa có project bạn hãy nhấn vào `Create project` ở bài này mình chỉ hướng dẫn bạn đưa code lên,bạn có thể tham khảo thêm  ở  [đây](https://cloud.google.com/) *

Sau khi tạo xong, lúc này repository của chúng ta trông như thế này:

 ![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/22.PNG?alt=media&token=398e3e18-d962-43d3-8d1d-accf90126959)
 
Hãy clone về và mở nó lên sau đó các bạn tạo một file `cloudbuild.yaml` và thêm đoạn code sau
```
steps:
  - name: 'node:12'
    entrypoint: yarn
    args:
      - install
  - name: 'node:12'
    entrypoint: yarn
    args:
      - run
      - build
  - name: 'gcr.io/classfunc-com/firebase'
    args:
      - deploy
      - --only
      - hosting
      - --token
      - ${_FIREBASE_TOKEN}
    
```


![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/23.PNG?alt=media&token=308cddd8-b0e2-4d45-8ba8-14fb8dce139a)

Bây giờ hãy push code của mình lên :

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/24.PNG?alt=media&token=f364b3b1-d2c8-4062-bd4e-79bb7532cdf1)

Rồi ta quay lại Repositories f5 và xem kết quả.


![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/25.PNG?alt=media&token=8063e229-4c91-45d7-be68-33ab71524618) 

Vậy là kho `Repositories` của mình đã có code mình vừa push lên rồi đó

* Tiếp theo ta truy cập `Cloud console` tìm đến *Cloud Build* nhé



![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/26.PNG?alt=media&token=b2571b21-e1b4-4386-8d4a-2151a53352f8) 


*Tạo Triggers :* Các bạn setup giống mình nhé.!


![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/27.PNG?alt=media&token=4021c2da-244d-46d3-92b4-c4100402c04a) 

Bạn nhìn thấy `_FIREBASE_TOKEN` chứ phần Value mình đang để trống, bây giờ chúng ta sẽ lấy token nhé

các bạn quay lại project của mình chạy lệnh `firebase login:ci` và đây là `token` của mình

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/28.PNG?alt=media&token=86619b2b-8be3-4084-8bce-8a6cebbb6bb3) 

các bạn coppy và dán nó vào phần `Value` để trống ở trên sau đó `CREATE`

Bây giờ quay lại project các bạn hãy push code của mình một lần nữa và xem `Cloud Build` làm việc nhé

Trong `History` các bạn để ý `code` của mình đang được push nè..~

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/30.PNG?alt=media&token=188953e7-7e77-4c65-b8c4-744d1278d5ca) 

Khi chạy xong và có dấu tích xanh như thế này là bạn đã thành công rồi...!

![alt](https://firebasestorage.googleapis.com/v0/b/my-blog-93906.appspot.com/o/31.PNG?alt=media&token=2040990c-13d2-40b0-ba44-6c40092c0948) 


Bài hướng dẫn của mình đã xong rồi, còn sơ sài lắm các bạn có thể tham khảo thêm ở đây nhé:

*Tài liệu tham khảo: [https://cloud.google.com/cloud-build/docs/quickstart-build](https://cloud.google.com/cloud-build/docs/quickstart-build)*

*Tài liệu tham khảo: [https://cloud.google.com/cloud-build/docs/quickstart-deploy](https://cloud.google.com/cloud-build/docs/quickstart-deploy)*

Hướng dẫn Cloud build bằng hình ảnh

Cloud Firestore là một Database được phát triển từ Firebase và Google Cloud Platform. Nó giúp cho việc đồng bộ dữ liệu giữa các ứng dụng phía Client một cách nhanh chóng (Realtime) và hỗ trợ lưu offline data trong ứng dụng của bạn.

Cloud Firestore lưu dữ liệu theo mô hình dữ liệu NoSQL. Dữ liệu được lưu trữ trong các file tài liệu chứa các trường được ánh xạ vào các giá trị, gồm 3 thành phần chính là: Collection, document, field. Các file tài liệu này được lưu trữ có thể sử dụng nó để tổ chức và truy vấn. Cloud Firestore hỗ trợ nhiều kiểu dữ liệu: string, array, date-time, ...

 Thêm dữ liệu vào Database:
Đầu tiên cần tạo Database:
- Ở Firebase project Click: 
```
Database → Create database → Start collection → Add document (auto ID) → Add field
```
    
Ví dụ:
```js
    firestore.collection("users").add({
           first: "Nguyen",
    	   last: "Tung",
    	   born: 1994
      })
	.then(function(docRef) {
             console.log("Document written with ID: ", docRef.id);
	})
	.catch(function(error) {
             console.error("Error adding document: ", error);
	});
```

Ở ví dụ trên chúng ta đã truy cập vào Collection ‘users’ với Document bất kỳ và thêm dữ liệu:
```js
	First: ‘Nguyen’,
	Last: ‘Tung’,
	Born: 1994
```
Chúng ta cũng có thể thêm dữ liệu trong các Collection lồng nhau,
Ví dụ:
```js
	firestore.collection("users’).doc(‘idUser’)
	        .collection(‘nickname’).add({
   	 	  first: "Nguyen",
    		  last: "Hoang",
    		  street: 6
		  })
	        .then(function(docRef) {
 	   	  console.log("Document written with ID: ", docRef.id);
	        })
	        .catch(function(error) {
    		  console.error("Error adding document: ", error);
	        });
```
Ở ví dụ trên ta đã thêm dữ liệu vào Collection ‘nickname’ thuộc phần nhánh của Collection ‘users’



Firebase Cloud Firestore - Giới thiệu và hướng dẫn Cloud Firestore

Thêm Firebase vào JavaScript project của bạn

1.Tạo Firebase project.
Trước khi bạn có thể thêm Firebase vào ứng dụng JavaScript của bạn, bạn cần tạo 1 Firebase project để kết nối tới ứng dụng của bạn

Truy cập 

    https://console.firebase.google.com/
    và Click (+ Add project)
    
•Nhập tên project của bạn →Continue

•Continue

•Select an account → Default Account for Firebase → Create project

2.Đăng ký ứng dụng của bạn với Firebase.
Sau khi bạn có Firebase project, bạn có thể thêm ứng dụng web của bạn đến nó
Tại project bạn vừa tạo:

•Click Web icon (</>) để khởi chạy quy trình thiết lập

•Nhập APP nickname

•Continue to console

3.Thêm Firebase SDKs và khởi tạo Firebase.
Cài đặt Firebase JavaScript SDK:

•Nếu bạn chưa có tệp package.json, tạo bằng cách chạy lệnh sau từ thư mục gốc của JavaScript project:

      ~$  npm init

•Cài đặt gói firebase và lưu nó vào tệp package.json của bạn bằng cách chạy:

      ~$ npm install --save firebase

Sử dụng một trong các tuỳ chọn sau để sử dụng module Firebase trong ứng dụng của bạn:
Bạn có thể yêu cầu các module từ bất kỳ tệp JavaScript nào
```js
	var firebase = require('firebase/app')
	require('firebase/auth')
	require('firebase/firestore')
```
và các sản phẩm Firebase mà bạn muốn sử dụng

Khởi tạo Firebase trong ứng dụng của bạn:
```js
	var firebaseConfig = {
  		apiKey: "api-key",
 		 authDomain: "project-id.firebaseapp.com",
  		databaseURL:"https://projectid.firebaseio.com",
  		projectId: "project-id",
  		storageBucket: "project-id.appspot.com",
  		messagingSenderId: "sender-id",
  		appId: "app-id",
  		measurementId: "G-measurement-id",
        };

	firebase.initializeApp(firebaseConfig);
```

Thay thế phần tương ứng bằng cấu hình dự án Firebase của ứng dụng của bạn trong:

`Project Setting → Your apps → Config`



4.Cài đặt CLI và triển khai Firebase Hosting
Nếu bạn đã liên kết ứng dụng web Firebase của mình với trang web Firebase Hosting, bạn có thể triển khai nội dung và cấu hình trang web của mình.
Chạy lệnh sau từ thư mục gốc của thư mục ứng dụng cục bộ của bạn:

```sh
firebase init
```

Triển khai nội dung và cấu hình lưu trữ của bạn lên Firebase Hosting

```sh
firebase deploy
```