---
tags: mp
---

# 微程式-前端技術交流

## Pigs team aim !

Make website about cash flow + 聊天室 + 後台登入 + google auth
https://www.youtube.com/watch?v=-edmQKcOW8s

## 置入-無障礙共筆
https://hackmd.io/7TCNhtAfR3aLpUl28fvSZg

<!-- ## **<font color="violet">[THEME-11]</font>** React Native x Form Validation with Yup x React Navigation 08/25~
-->

## **<font color="violet">[THEME-11]</font>** Docker + Nginx + Node Process + Docker Compose 9/29~
### 10/13

參考文章： [Set up Docker and NGINX for a Next.js app](https://steveholgado.com/nginx-for-nextjs/)

### 10/6 作業 首座 hello world node server

Dockerfile

# docker 流程

# https://hub.docker.com/_/httpd
# FROM 取 image
# WORKDIR 指定工作目錄
# COPY 檔案複製到主機
# RUN 執行 shell script

FROM httpd:2.4
COPY ./index.html /usr/local/apache2/htdocs/
RUN

# 使用 WORKDIR 指定工作目錄
FROM httpd:2.4
WORKDIR /usr/local/apache2/htdocs/
COPY ./index.html ./
RUN 

# 將 DockerFile 打包成自定義的 image
# $ docker build -t <IMAGE_NAME> .

# 建立 container 執行 imagae
# $ docker run -dit --name <CONTAINTER_NAME> -p 8080:80 <IMAGE_NAME>



# 文件
https://docs.docker.com/engine/reference/builder/


compose

# 目標、成果
project
- Next  8000 
- Nuxt  8001


Docker Nginx

### 9/29

Dockerfile

# docker 流程

# https://hub.docker.com/_/httpd
# FROM 取 image
# WORKDIR 指定工作目錄
# COPY 檔案複製到主機
# RUN 執行 shell script

FROM httpd:2.4
COPY ./index.html /usr/local/apache2/htdocs/
RUN

# 使用 WORKDIR 指定工作目錄
FROM httpd:2.4
WORKDIR /usr/local/apache2/htdocs/
COPY ./index.html ./
RUN 

# 將 DockerFile 打包成自定義的 image
# $ docker build -t <IMAGE_NAME> .

# 建立 container 執行 imagae
# $ docker run -dit --name <CONTAINTER_NAME> -p 8080:80 <IMAGE_NAME>



# 文件
https://docs.docker.com/engine/reference/builder/


compose

# 目標、成果
project
- Next  8000 
- Nuxt  8001


Docker Nginx

FROM

docker版本: 19.03.1

node server

// index.js

var http = require('http');

var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
});

server.listen(8000);

console.log('Server running at http://127.0.0.1:8000/');

Dockerfile 大寫

// Dockerfile

FROM mhart/alpine-node
COPY index.js .
EXPOSE 8000
CMD node index.js

docker build -t myserver .
docker run -it -p 7777:8000 --name=demo myserver 

server: 127.0.0.1:7777/

### React Native 環境 * Hello World 08/25
交流時間: 08/18
Deadline: 08/25
Host: Baron、Tom、Kelvin
- [environment-setup](https://reactnative.dev/docs/environment-setup)

| 姓名 | ui draft | html | demo |
|:------- |:---------:|:-------------:|:------:|
| Richard | [ui](https://img.uxfree.com/wp-content/uploads/2016/08/freebies-k2.png) | [codesandbox] | [demo] |
| Baron | [chat ui] | [codesandbox] | [demo] |
| Mok | [chat ui] | [codesandbox] | [Demo] |
| Sid | [chat ui] | [codesandbox] | [demo] |
| Tom | [chat ui] | [codesandbox] | [demo] |

## **<font color="violet">[THEME-10]</font>** React component video player 8/4~8/18

| 姓名 | ui draft | html | demo|
| -------- | -------- | ---| --- |
|Richard|[ui](https://www.pinterest.com/pin/697635798519171761/)| [codesandbox](https://codesandbox.io/s/3pigs-day10-custom-video-hook-g0zq2) | [demo]|
|Baron|[chat ui](https://www.pinterest.com/pin/795166877948072950/)| [codesandbox](https://codesandbox.io/s/sharp-water-s70ld?file=/src/components/ControlBar.js) | [demo]|
|Mok|[chat ui](https://i.imgur.com/5lcJaQi.png)|[codesandbox](https://codesandbox.io/s/media-player-practice-db5ci?file=/src/App.js) |[Demo]|
|Sid|[chat ui](https://www.pinterest.com/pin/636907572293750404/?nic_v1=1a2LBX18J)|[codesandbox](https://codesandbox.io/s/videoplayer-y2fxm) |[demo]|
|Tom|[chat ui](https://www.pinterest.com/pin/795166877948072950/) |[codesandbox](https://codepen.io/chin-han-tang/pen/rNeBqpv?editors=0110) |[demo] |

MDN video 文件: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

找 ui draft
https://www.pinterest.com/search/pins/?q=media%20player%20ui&rs=typed&term_meta[]=media%7Ctyped&term_meta[]=player%7Ctyped&term_meta[]=ui%7Ctyped

video style document
-
[Mok](http://mrbool.com/how-to-style-the-html-5-video-element-with-javascript-and-css/27683)、[Tom](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics)、[Baron](https://github.com/sampotts/plyr)、[Richard](https://codepen.io/blackjacques/pen/bgamaj?editors=0010)、[Sid](https://codepen.io/yasinburakkalkan/pen/BjbKrV?editors=1100)

## **<font color="violet">[THEME-9]</font>** Chat Room 全端 3/3~4/3

| 姓名 | ui draft | html | heroku|
| -------- | -------- | ---| --- |
|Richard|[chat ui](https://dribbble.com/shots/5922457--Chat-Room/attachments)| [codesandbox](https://codesandbox.io/s/3pigs-day9-react-chatroom-kmi8i) | [demo](https://chatroom-richard.herokuapp.com/)|
|Mega|[chat ui](https://https://codepen.io/kelvin9314/pen/QWbQBpQcodepen.io/mega_jh/pen/BaNmXWe)|[codesandbox](https://codesandbox.io/s/chatroom-mega-95jbt)| [demo](https://chatroom-mega.herokuapp.com/)|
|Mok|[whatsapp web ](https://addons.cdn.mozilla.net/user-media/previews/thumbs/216/216771.png?modified=1553271563)|[codepen](https://codepen.io/kelvin9314/pen/QWbQBpQ) |[Demo](https://chatroom-prototype-kelvin9314.herokuapp.com/), [github Repo](https://github.com/kelvin9314/socketio-chatroom)|
|Yuan|[chat ui](http://collectui.com/designers/HussamYousef/direct-messaging)|[codesandbox](https://codesandbox.io/s/chatroom-lyc-11nkt) |[Demo](https://chatroom-lyc.herokuapp.com/), [github Repo](https://github.com/lyccccc17/chatroom-lyc/tree/express-react)|

### 20200323

20200408 下次作業: [demo](https://socket.io/demos/chat/)

> package.json config for heroku

"engines": {
    "node": "",
    "yarn": ""
  },

---

### 20200317 看 socket io [DOCS](https://socket.io/docs/server-api/)
==socket server api== & ==client api==

#### 下次作業：
串接以下api
- socket.on()
- socket.emit()
- socket.broadcast.emit()

---

### 20200312 chat 聊天室轉 React 接 socket.io use express 3/12~3/26
[heroku](https://www.heroku.com/)
[how-to-deploy-a-create-react-app-with-an-express-backend-to-heroku](https://medium.com/@chloechong.us/how-to-deploy-a-create-react-app-with-an-express-backend-to-heroku-32decfee6d18)

git rm -r --cached client

"scripts": {
    "start": "node ./bin/www",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "client-install": "npm install --prefix client",
    "server": "nodemon ./bin/www",
    "client": "npm start --prefix client",
    "heroku-postbuild": "cd client && npm install && npm run build"
},

### 20200310 chat 聊天室切版 /一個月完成

- [chat ui](https://www.pinterest.com/search/pins/?q=chat%20room%20ui&rs=typed&term_meta[]=chat%7Ctyped&term_meta[]=room%7Ctyped&term_meta[]=ui%7Ctyped)
- 切版 html + scss 一個禮拜
- 後端 [socket.io use express](https://dotblogs.com.tw/explooosion/2018/01/27/170320) 二個禮拜
- 前端 react context mobx or next 一個禮拜
- 放到伺服器 server heroku 一個禮拜

https://github.com/websockets/ws

---

## **<font color="violet">[THEME-8]</font>** Redux Context 相關
### 文件
- [redux 官方](https://chentsulin.github.io/redux/docs/basics/index.html)
- [redux 生態系]( https://chentsulin.github.io/redux/docs/introduction/Ecosystem.html)
- [redux-saga Docs](https://redux-saga.js.org/)
- [redux-saga 中文文件](https://neighborhood999.github.io/redux-saga/docs/introduction/BeginnerTutorial.html)
- [前端九部](https://www.yuque.com/fe9/select/miya5f)
- [MP-前端交流網站](https://codepen.io/bnmghjtyu/pen/qBEbjRd?editors=1010)
- [[Redux] Saga | PJCHENder 私房菜](https://pjchender.github.io/2018/12/22/redux-saga/)

Frontend-Study-Group
<div style="display:flex">

<div style="position:relative;margin-right:10px;padding-top:60px">

<img
src="https://miro.medium.com/max/2406/0*c9HBMW0byk5LRouy" />
<div style="position:absolute;top:0;">
<h4 style="font-size:25px;color:black;font-weight:normal">
Frontend-Study-Group 前端</h4>
</h4>
<a href="https://github.com/bnmghjtyu0/Frontend-Study-Group.git" target="_blank">
<span>github</span>
</a>
<br/>
<a href="https://bnmghjtyu0.github.io/Frontend-Study-Group/" target="_blank">
<span>github-pages</span>
</a>

<br/>

<a href="https://travis-ci.org/" target="_blank">
<span>travis ci</span>
</a>

<br/>
<a href="https://docs.google.com/spreadsheets/d/1FhhHVWGvNedvMzvz7h3uWkyWlcXeZNUqqTvaz4YB6mc/edit#gid=0" target="_blank">
<span>sheet</span>
</a>

</div>
</div>

<div style="position:relative;padding-top:60px">

<img
src="https://i.imgur.com/1sMXhyO.jpg" />
<div style="position:absolute;top:0;">
<h4 style="font-size:25px;color:black;font-weight:normal">
Frontend-Study-Group 後端</h4>
</h4>
<a href="https://github.com/bnmghjtyu0/Frontend-Study-Group-Backend" target="_blank">
<span>github</span>
</a>

<a href="https://dashboard.heroku.com/apps/three-pigs/deploy/github">heroku</a>
<a href="https://three-pigs.herokuapp.com/">api</a>
<a href="https://three-pigs.herokuapp.com/backend/articles">api articles</a>
<a href="https://three-pigs.herokuapp.com/backend/testing2">api 測試 fork 用</a>

</div>
</div>
</div>

### 20200303 使用 Context + Mobx 串接 api
MobX 支持單向數據流，也就是動作改變狀態，而狀態的改變會更新所有受影響的視圖。


#### :sake: TDMb 電影 api
- [註冊 key](https://www.themoviedb.org/documentation/api)
- api 範例

    const key = '<Your_key>';
    https://api.themoviedb.org/3/movie/now_playing?api_key=${key}&language=zh-TW&page=1

#### :sake: DEMO Kent C :i_love_you_hand_sign: 實作 context + mobx
- [YouTube](https://www.youtube.com/watch?v=3yiialslPbc)
- [codesandbox](https://codesandbox.io/s/kent-usecontext-tn780)

#### :sake: 作業區
- | 姓名 | 作業連結 |
| -------- | -------- |
|Richard|[codesandbox](https://codesandbox.io/s/3pigs-day8-context-api-mobx-i23lo)|
|Mega|[codesandbox]()|
|Mok|[codesandbox]()|
|Yuan|[codesandbox]()|

### 20200218 討論 context api
作業 context api + 接電影 api
下次作業 context api + mobx 接電影 api

[kent.C useCntext + mobx 測試影片](https://www.youtube.com/watch?v=3yiialslPbc)

##### Example for useReducer、useContext by mega ：
- [useReducer](https://codesandbox.io/s/ch5-hooks-usereducer-in81h)
- [useContext](https://codesandbox.io/s/ch4-hooks-usecontext-number--pbio5)

| 姓名 | 作業連結 |
| -------- | -------- |
|Richard|[codesandbox](https://codesandbox.io/s/3pigs-day6-context-api-2w0q4)|
|Mega|[codesandbox](https://codesandbox.io/s/ch6-context-api-movie-list-zunlp)|
|Mok|缺作業 :-1:[github](https://github.com/kelvin9314/react-context-movie-list), [demo link](https://kelvin9314.github.io/react-context-movie-list/)|

### 20200121 學習 context，用 mobx 接 api
context use mobx
https://mobx.js.org/best/actions.html

| 姓名 | 作業連結 |
| -------- | -------- |
|Richard|[codesandbox](https://codesandbox.io/s/3pigs-day6-context-api-2w0q4)|
|Mega|缺作業 :-1:[codesandbox]()|
|Mok|[codesandbox](https://codesandbox.io/s/react-context-hooks-practice-lsx1s)|

### 20200121 交 context 作業
練習用 react context 接 movie api

context 相關
> [useReducer + useContext for easy global state without libraries](https://swizec.com/blog/usereducer-usecontext-for-easy-global-state-without-libraries/swizec/9182)

> [Using React hooks to asynchronously make API requests](https://medium.com/@audisho.sada/using-react-hooks-to-asynchronously-make-api-requests-1fdf52f797ce)

| 姓名 | 作業連結 |
| -------- | -------- |
|Richard| 無 |
|Mega|無|
|Mok|無|

### 20200114 context 練習

demo: https://codesandbox.io/s/charming-lamarr-9cy86
redux vs context: https://www.youtube.com/watch?v=OvM4hIxrqAw&feature=youtu.be

NodeJS 十大框架 [掘金](https://juejin.im/post/5e1c5a2c5188254c3806dd6b?utm_source=gold_browser_extension)

## **<font color="violet">[THEME-5]</font>** 20200107 saga race fork

| 姓名 | 作業連結 |
| -------- | -------- |
|Richard|[codesandbox](https://codesandbox.io/s/redux-day5-saga-virtualize-k8mnv)|
|Mega|缺作業 :-1: [codesandbox]()|
|Mok|[codesandbox](https://codesandbox.io/s/react-redux-sage-practice-cwigg)|

Next: Learn to race and fork
[[Redux] Saga | PJCHENder 私房菜](https://pjchender.github.io/2018/12/22/redux-saga/)

## **<font color="violet">[THEME-4]</font>** 20191231 saga-電影api virtualize list

主題: 討論上次 redux-saga-api virtualize 的作業
下次作業: redux-saga-virtualize + scroll
繳交上次作業: redux-saga-virtualize

| 姓名 | 作業連結 |
| -------- | -------- |
|Richard|[codesandbox](https://codesandbox.io/s/redux-day4-saga-virtualize-4iqfe)|
|Mega|缺作業 :-1: [codesandbox]()|
|Mok|[codesandbox](https://codesandbox.io/s/react-redux-sage-practice-cwigg)|

:see_no_evil: 研究 fork ```import {fork} from 'saga/effects'```

✎下次作業: Redux 串接 API ( 電影表單 virualized list ) 使用 scroll 渲染

參考資料(原生):

var stationListScroll = document.getElementsByClassName('cd-selected')[1];
function scrollList () {
    var scrollHeight = stationListScroll.scrollHeight;
    var scrollTop = stationListScroll.scrollTop;
    var clientHeight = stationListScroll.clientHeight;
    if ( Math.ceil(scrollTop) >= scrollHeight-clientHeight-500){
        MapStation.scrollStation();
    }
}
stationListScroll.addEventListener('scroll',scrollList);

#### 說說 fork

<font size="3">*The joy is in the journey.*</font>

> [name=提姆庫克(Tim Cook)-蘋果執行長]

<font size="3">*The fork is non blocking.*</font>

> [name=Richard-Liaoberg]

## **<font color="violet">[THEME-3]</font>** 20191223 繳交 redux-saga-api 作業
| 姓名 | 作業連結 |
| -------- | -------- |
|Richard|[codesandbox](https://codesandbox.io/s/redux-day3-saga-getapi-4rudi)|
|Mega|[codesandbox](https://codesandbox.io/s/redux-saga-api-usjtx)|
|Mok|[codesandbox](https://codesandbox.io/s/redux-saga-pratice-7pl93)|

✎下次作業: Redux 串接 API ( 電影表單 virualized list )

:video_camera: 參考影片: [Learn Redux Saga - Setting up redux saga](https://www.youtube.com/watch?v=juJDsA56QcA&list=PLMV09mSPNaQlWvqEwF6TfHM-CVM6lXv39&index=7)

## **<font color="violet">[THEME-2]</font>** 20191217 繳交 redux-api 作業

| 姓名 | 作業連結 |
| -------- | -------- |
| Richard | [codesandbox](https://codesandbox.io/s/redux-day2-getapi-4xppt) |
| Mega | [codesandbox](https://codesandbox.io/s/redux-api-pi1p5) |
| Mok | [codesandbox](https://codesandbox.io/s/react-redux-thunk-5gd8c) |

-[redux-devtools-extension](https://juejin.im/post/5c35cf00e51d45522665134b)

-[redux saga ](https://github.com/redux-saga/redux-saga)



---
## **<font color="violet">[THEME-1]</font>** 20191209 繳交 redux-todolist 作業、學習 redux 串接 api
###### Hook Redux
> [`import {useSelector useDispatch} from 'react-redux'`](https://react-redux.js.org/next/api/hooks) 7.11^

| 姓名 | 作業連結 |
| -------- | -------- |
| Richard | [codesandbox](https://codesandbox.io/s/happy-redux-hook-todolist-r5bqj) |
| Mega | [codesandbox](https://codesandbox.io/s/redux-to-do-list-707b9) |
| Mok | [codesandbox](https://codesandbox.io/s/react-redux-todo-list-bnv8y), [github-page](https://kelvin9314.github.io/react-redux-todo-list/)|

✎下次作業: Redux 串接 API (電影表單)
[themoviedb api]( https://www.themoviedb.org/documentation/api)
- API範例 現正熱映電影表單：
https://api.themoviedb.org/3/movie/now_playing?api_key=____&language=zh-TW&page=1

---

### 20191202 討論 redux 基礎篇
1. Action
2. Action Creater
3. Reducer
4. Store
5. redux 生命週期

- [Redux之Mega會長大密技](https://hackmd.io/@IhNLySKtQ7S1tkRpRjSXSQ/BJBBgDD0H)

---