Learn Japanese Project

所以從去年底開始就 Follow 了一些 Youtuber 學習影片中的日文。學習的過程中覺得沒有絕佳的筆記方式，再加上往往要回去找該句是在哪個影片老是找不到。

所以打算開發一個可以對應 Youtube video ID 做筆記的工具。

目標是包含完成：

1. Android APP
2. Website
3. Chrome 插件可以直接在 Youtube 畫面做筆記

開發環境與資料處理：

1. Database 是使用 Firebase
2. Website 部份希望使用 Webpack 搭配 React Language

Android APP

目前算是開發的最完整的，進入 APP 可以選擇要瀏覽 Video Notes 還是 Quick Notes，Quick Notes 是沒有綁定影片的我個人筆記，於 APP 可以手動新增筆記。

App UI

開發過程中因為有小馬可以幫忙，所以還蠻快就可以建構出 Recyclerview 去處理 Data，另外在處理日文標音的部分也找到 github 的工具 可以直接使用。

Ｗebsite

之前已經寫過可以用的版本，但打算打掉重做一個 UI Redesign 而且搭配 webpack 與 React 的版本。

Version 1.0

主要原因是因為公司內部最近在推新的 Webpack 開發環境，但是我完全沒用過，而且之後可能會幫忙維護某些使用該環境建置的網站。

所以只好趁的開發自己的作品時，也搭上順風車，不過目前非常苦手中：不僅是對 Webpack 不熟悉，前端 Router 也不懂，再加上同事提供的 React Sample Code 跟我之前寫的官網教學版本不同。有點不太理解其中怎麼運作。

先在這邊備份最近看的資料，覺得同事應該是這個這些寫 React 的：
1. https://camjackson.net/post/9-things-every-reactjs-beginner-should-know
2. https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components

0718 詢問了一下同事，React 在 ES6 的寫法跟 ES5 不同，所以我才會很多地方都看不懂。可以參考：
- https://toddmotto.com/react-create-class-versus-component/
- http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8
- https://babeljs.io/blog/2015/06/07/react-on-es6-plus

UI New Design, 開發中

總之我還在努力中。