---
# System prepended metadata

title: 1221_javascript_day07
tags: [5xruby, javascript]

---

# 1221_javascript_day07
- webpacker

[![hackmd-github-sync-badge](https://hackmd.io/31lEDOM6RMmbUo7CJjCacg/badge)](https://hackmd.io/31lEDOM6RMmbUo7CJjCacg)


#### 上課日期：1221
###### tags: `javascript`
###### tags: `5xruby`

---



---
# 相關連結:
- [課程影片](https://campus.5xruby.tw/courses/1136422/lectures/25361517)
 - [工作坊暖身題](https://github.com/shes50103/js-webpacker-workshop-warmup)
 - [工作坊內容說明](https://github.com/shes50103/js-webpacker-workshop)
- [工作坊解答](https://github.com/shes50103/js-webpacker-workshop/tree/completed)
  - step by commit 步驟由commit分開
  - app/javascript/packs/application.js 

---
[TOC]

---
# 0. 綱要/目錄
- [ ] webpacker
  - [ ] Task0：用 Bootstrap 美化頁面（暖身題）
  - [ ] Task1：用 select2 美化頁面
  - [ ] Task2：用 sweetalert2 美化頁面
  - [ ] Task3：用 datetimepicker 美化頁面
  - [ ] Task4：將專案部署到 Heroku


---
# 1. Task0：用 Bootstrap 美化頁面（暖身題）
> 1. 在 Rails 裡面用 Webpack 來安裝、使用前端套件
> 2. 基本上所有內容是 scaffold 一鍵做出來的，然後有搭配 acts-as-taggable-on 這個 gem 做了標籤功能
>  3. 透過 Webpack 裝一些前端套件來優化

- [webpacker(gem@github)](https://github.com/rails/webpacker)
  - [安裝](https://github.com/rails/webpacker#installation)
  - [webpack(docs)](https://github.com/rails/webpacker/blob/master/docs/webpack.md)

## 1.1 安裝bootstrap
- [Bootstrap@4.5.2](https://yarnpkg.com/package/bootstrap) 
- 建議使用 Bootstrap@4.5.3 套件
- 使用yarn add來安裝
- gem 雖然可行，但算是較舊的方式

## 1.2 目標：用 Bootstrap 美化頁面
- [ ]  每次新增商品、編輯商品後，畫面是方會有漂亮的通知視窗
  * 顏色不限，有美化就好
  * 可以按右上角x關掉它
- [ ]  index 頁面美化
  - 風格不限，有美化就好
- [ ]  new/edit 頁面美化
  - 風格不限，有美化就好

## 1.3 提示
- 可以 fork 或直接 git clone 這個 repo
- 可能用到這指令 yarn add bootstrap

## 1.4 參考樣式
- [連結](https://github.com/shes50103/js-webpacker-workshop-warmup#%E5%8F%83%E8%80%83%E6%A8%A3%E5%BC%8F) 
- 原本的index/new
- bootstrap美化後的index/new



---
# 2. Task1：用 select2 美化頁面
- [select2@4.0.13](https://yarnpkg.com/package/select2) 
## 2.1 目標
- [ ]  美化下拉選單，套用在表單的 Currency 欄位
  * 顏色不限，有美化就好
- [ ]  優化表單的 Tag list
  * 可以自訂、新增、刪除標籤
  * 進入編輯頁面可以看到原本的標籤

## 2.2 操作

---
# 3. Task2：用 sweetalert2 美化頁面
- [sweetalert2@10.12.5](https://yarnpkg.com/package/sweetalert2) 
## 3.1 目標
- [ ]  送出表單後跳出提示視窗
  * 按 Cancel 關閉提示視窗
  * 按 OK 進入 Loading 提示視窗，並送出表單

## 3.2 操作
使用按鈕(button)綁定click事件（sweetalert）
目的：form可以被submit出去


---
# 4. Task3：用 datetimepicker 美化頁面
- [datetimepicker@5.39.0](https://yarnpkg.com/package/tempusdominus-bootstrap-4) 
  - tempusdominus
## 4.1 目標
- [ ]  將 datetimepicker 套用在表單的 Start at、End at 欄位上
  * Start at 必須早於 End at
  * End at 必須晚於 Start at

## 4.2 操作
日期無法儲存？ 需注意input那邊的name是否有改到

---
# 5. Task4：將專案部署到 Heroku





---
1. 申請heroku帳號及相關設定
2. 安裝heroku的CLI
3. 將專案推送到heroku
4. 部署



---
# 附錄
- [範例網站](https://js-workshop-0216002.herokuapp.com/)
- [如何在 Rails 使用 Webpacker](https://kaochenlong.com/2019/11/21/webpacker-with-rails-part-1/)
- [Webpack 筆記](https://hackmd.io/10wfeoedToONL7oqd8BLfg?view)