Intergrate jade into typescript expressjs
Tags: typescript, node, googleapi, darksky
Published: 2020-03-30 15:13:56

## Mục lục
0. Vấn đề
1. Jade là gì ?
2. Cài đặt thư mục static (express) và dùng **jade** trong **typescript** và 
3. Cài đặt package coppyfiles
4. Tạo Key api trong google và chèn map google vào html của bạn
5. Embed map dark-sky vào html của bạn
6. Kết bài


## 0. Vấn đề

***Heyzo what's up***

Xin chào mọi người hôm này mình sẽ demo thằng **Jade** một **template engines** dùng cho **Nodejs** để render **html, css, js** nhé

> Khi bạn cài đặt được thằng **Jade** này rồi thì những thằng **Pug, handlebars, ejs** tương tự thôi nhé

Nào cùng bắt đầu thôi :v 

## 1. Jade là gì?

> Jade is a template engine for Node.js. Jade syntax is easy to learn. It uses whitespace and indentation as a part of the syntax.

Trên là định nghĩa nha (đọc thêm ở [đây](https://www.tutorialsteacher.com/nodejs/jade-template-engine)), nếu bạn nào dùng **Pug** (đọc thêm ở [đây](https://pugjs.org/api/getting-started.html)) rồi thì hai thằng này khá giống nhau đó

Dưới đây là cú pháp của thằng **Jade** nha

**index.jade**
```
doctype html
html
    head
        title Jade Page
    body
        h1 This page is produced by Jade engine
        p some paragraph here..
```

html dưới đây sau khi chuyển thành jade thì nó ra ở trên nha 

**index.html**
``` html
<!DOCTYPE html>
<html>
<head>
    <title>Jade Page</title>
</head>
<body>
    <h1>This page is produced by Jade engine</h1>
    <p>some paragraph here..</p>
</body>
</html>
```

Lúc code mình cứ code **html** như thường. Code xong coppy hết đống code đó dán vào [đây](https://html2jade.org/). Như vậy là chạy ngon luôn

## 2. Cài đặt thư mục static (express) trong **typescript**

Khi bạn code một trang **html** thông thường bạn sẽ có file .css hay .js phải không nào, vậy thì khi sài express bạn sẽ để chúng ở đâu để các file **.jade** có thể sử dụng được. Câu trả lời là sử dụng **express.static** một middle function trong **expressjs**

Cách cài đặt trong **typescript** dưới đây nhé, giờ mình bỏ hết các file **.js, .css** vào thư mục **public**

**app.ts**

``` typescript
   this.app.use(express.static(path.join(__dirname, 'public')));

   this.app.set('views',path.join(__dirname, 'views')); // Các template engine khác tương tự nhé
   this.app.set("view engine","jade");
   // Mà nhớ là thằng expressjs nó sẽ đi tìm mặc định thư mục views nên nhớ nhét đống file .jade đúng chỗ coi chừng không chạy được đâu :V
```

Mọi người chú ý là dùng **__dirname** để lấy đường dẫn tuyệt đối nhé chứ không có khi code không chạy không biết tại sao đâu :v, xong rồi

## 3. Cài đặt package coppyfiles

Thông thường thì thằng **tsc** nó chỉ nhận diện các file **.ts** và chuyển vào thư mục hết đống code **..ts** đó ra **.js**. Vì thế nếu trong thư **src (Thư mục chứa code)** có file định kiểu **.html, .js, .jade** thì chúng ta phải coppy bằng tay khá là lằng nhằng. Vì vậy mình xài một package chuyên làm việc này nhá đó là **coppyfiles** (Đọc thêm ở [đây](https://www.npmjs.com/package/copyfiles))

Làm tuần tự theo dưới đây nhé

Gõ vào **command line**
```
npm i -d copyfiles 
```

Giờ vào file **package.json** để cấu hình như sau

```
"jade": "copyfiles -u 1 src/**/*.jade build/" // Cái này cấu hình cho em .jace mà mình đang sài nè
```

```
"public": "copyfiles -u 1 src/**/**/*.css src/**/**/*.js src/**/*.html build/" // Cái cuối cùng cấu hình cho nguyên cái thư mục static mình cài ở trên nè :v
```

Xong rồi, mà nhớ lúc chạy, sau khi cho thằng **tsc** đưa hết các file **.ts** sang **js** rồi, thì gõ lệnh mình đã cài ở trên

```
npm run jade
npm run public
```


## 4. Tạo Key api trong google và chèn map google vào html của bạn

Cái bước này thì cũng dễ thôi vì api của anh **google** là dễ xài nhất rồi (Các bước ở [đây](https://developers.google.com/maps/documentation/embed/get-api-key)) nhưng có vài chú ý anh em để ý hộ mình nha.

- Search **Maps JavaScript API** để check xem nó đã **enable** chưa nhé vì mình sài **google maps** mà không bật nó lên không sài được đâu

- Vào mục **Credentials** của phần **API và Services**, chọn **api_key** vừa tạo => **Application restrictions** => **HTTP referrers(web site)** => Thêm địa chỉ mà mình dùng để dev nhé

```
http://127.0.0.1:5500 // Cái này chạy live server khi code html, css

http://127.0.0.1:9001 // Cái này chạy web app với express nè
```

Cuối cùng anh em đọc bài [này](https://developers.google.com/maps/documentation/embed/get-api-key) là show lên được rồi á nha (Mà hình như chỉ dev được thôi chứ không dùng product với dạng free này)


## 5. Embed map dark-sky vào html của bạn

Thằng **dark-sky** (đọc thêm ở [đây](https://darksky.net/forecast/40.7127,-74.0059/us12/en)) này rất hay đó :v, ai muốn làm ứng dụng dự báo thời tiết thì cực ngon rồi, có hỗ trợ API và dùng free cho dev luôn

> Mà mình lúc đầu không tích hợp được map nó vào trong website của mình (Đọc được chính sách nó không cho sài luôn :v), search hồi thấy người khác sài được nên mình mạng phép lấy cái **embed** này share cho anh em nha, cứ thả vào là chạy quá ngon

```
  <iframe style="height: 100%;" src="https://maps.darksky.net/@temperature,34.595,20.013,undefined?embed=true&amp;timeControl=true&amp;fieldControl=true&amp;defaultField=temperature&amp;defaultUnits=_f" width="100%" height="150" frameborder="0"></iframe>
```
## 6. Kết bài

Bài viết này mình viết theo xu hướng là giữ lại kiến thức cho bản thân và share cho nhưng ai đã làm được phần nào project **expressjs** có sài **template engines** rồi nha có gì khó hiểu mong mọi người bỏ qua cho cảm ơn mọi người rất nhiều


#### Link tham khảo:
- https://www.tutorialsteacher.com/nodejs/jade-template-engine
- https://html2jade.org/
- https://www.npmjs.com/package/copyfiles
- https://developers.google.com/maps/documentation/embed/get-api-key
- https://developers.google.com/maps/documentation/embed/get-api-key
- https://darksky.net/forecast/40.7127,-74.0059/us12/en
- https://geoawesomeness.com/darksky-launched-weather-website-really-cool-maps/https:/geoawesomeness.com/darksky-launched-weather-website-really-cool-maps/