# 微程式-前端技術交流
## 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
```suggestion
# 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
```suggestion
# 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
```jsx
// 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 大寫
```suggestion
// 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
```package.json
"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
```
```json
"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 渲染
參考資料(原生):
```javascript=
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)
---
{"metaMigratedAt":"2023-06-15T02:21:52.592Z","metaMigratedFrom":"YAML","title":"微程式-前端技術交流","breaks":true,"contributors":"[{\"id\":\"0a5b6fd1-e6ff-4488-8873-51370327f616\",\"add\":14595,\"del\":4932},{\"id\":\"691e58d6-be6f-4d58-a07e-3a8a492c846f\",\"add\":4158,\"del\":1028},{\"id\":\"449dea32-9a9b-47b2-b9fd-23139bcc8195\",\"add\":180,\"del\":6},{\"id\":\"c94d6bee-5667-4118-951c-18b1911ba0f1\",\"add\":181,\"del\":0},{\"id\":\"04437a5d-c1f3-4ef1-9176-b3d5330bd32c\",\"add\":332,\"del\":106},{\"id\":\"1a130ed7-1551-41fb-b067-575f030606e0\",\"add\":253,\"del\":5},{\"id\":\"22134bc9-22ad-43b4-b5b6-446946349749\",\"add\":8468,\"del\":6832}]"}