The Complete React Native and Redux Course - Auth
講師：Stephen Grider
開發環境
Macbook pro 13'
IDE: ATOM 1.13.1
UI
基本上只有兩個頁面，第一是登入畫面，第二是登出畫面。
開啟新專案 auth
在.../prod路徑底下，在terminal輸入react-native init auth。建立完後，eslint也要安裝在這個專案，到albums專案裡找.eslintrc，複製它到auth專案裡。在terminal中，cd到.../prod/auth路徑底下，輸入npm install --save-dev eslint-config-rallycoding，等terminal跑完就安裝完成了。
開始寫程式囉
當然一開始就先把模擬器啟動，在terminal中的.../prod/auth路徑底下，輸入react-native run-ios auth，就啟動完成了。
先把index.ios.js和index.android.js的sample code全部刪除，並且在auth目錄下新增src文件夾.../auth/src，然後在.../auth/src/新增一個app.js 。
因為要把component都統一放在/auth/src/components文件夾底下，所以在src底下新增components文件夾。有些component是可以通用的，所以在components底下新增common文件夾。因此，專案樹狀圖如下：
然後根據上圖來新增各個.js，其程式碼都在最底下。
這邊從各個component來講解程式碼，首先就是Button.js，其功能就是當使用者輸入信箱密碼完畢後，按下Button來檢查是否正確，其登入流程如下：
Card.js跟CardSection.js都是分欄位用的，Card.js是整體大欄位，而CardSection.js是小欄位。
Header.js為UI最上方的標題，基本上就是一個Text物件，只是又有在Text的外圍包一層View，為了客製樣式。
Input.js是要讓使用者輸入帳號跟密碼的地方，RN可以輸入的物件是TextInput，這邊比較特別的地方是，secureTextEntry, placeholder, 和autoCorrect的屬性。現在大部分輸入帳號密碼的UI，都會讓密碼顯示特殊符號，以免有心人士在使用者後方偷看，因此secureTextEntry就可以發揮用處了。placehoder就是提醒使用者該欄位需填入什麼樣的格式。autoCorrect是自動校正使用者填入的字是否正確，但是每個帳號不一定都是正確有意義的文字，所以這邊要關掉。
Spinner.js是當使用者需要等待的時候，所顯示的轉圈圈，有分大跟小。RN的物件是ActivityIndicator，未來應該也會要客製化ActivityIndicator的樣式。
為了讓我們自定義的物件，可以一行就全部import，所以要在common底下新增一個index.js，而程式碼的部分請參考底下。
通用物件講完之後，在.../src/components底下新增LoginForm.js來決定顯示登入或是登出。因為是要檢查信箱密碼的，所以有用到Google的Firebase來當作簡易的伺服器。
那要如何使用Firebase呢？首先要安裝Firebase到專案裡，在terminal輸入npm install --save firebase，然後在LoginForm.js最上方匯入Firebase套件。
開啟瀏覽器，在網址欄位輸入firebase google，或點擊這裡。使用Google的服務，當然一定要有Google的帳號，若沒有就先申請註冊吧！進去網頁之後，其畫面如下：
點擊GET STARTED FOR FREE，進入Dashboard：
點擊CREATE NEW PROJECT，輸入專案名稱(我是輸入auth)，點擊CREATE PROJECT：
回到DashBoard，點擊左邊欄位的Authentication：
點擊Email/Password：
啟用後，儲存：
點擊右上角的WEB SETUP，複製大括弧內的程式碼：
貼到LoginForm.js的componentWillMount的function裡面。（可參考底下程式碼）
完成圖：
然後根據上圖來新增各個.js，其程式碼都在最底下。
這邊從各個component來講解程式碼，首先就是Button.js，其功能就是當使用者輸入信箱密碼完畢後，按下Button來檢查是否正確，其登入流程如下：
那其實React Native沒有Button這個物件，Button是自定義出來的，那RN監測觸碰的物件是TouchableOpacity，然後又在TouchableOpacity物件底下放入Text物件，來顯示Button名稱。
為了模組化，讓Button可以Re-use，所以觸碰的事件以及按鈕名稱都是動態的，從父組件傳下來的，最後再透過style來客製按鈕樣式就完成了，完成圖在最下面可以參考。
Header.js為UI最上方的標題，基本上就是一個Text物件，只是又有在Text的外圍包一層View，為了客製樣式。
Input.js是要讓使用者輸入帳號跟密碼的地方，RN可以輸入的物件是TextInput，這邊比較特別的地方是，secureTextEntry, placeholder, 和autoCorrect的屬性。現在大部分輸入帳號密碼的UI，都會讓密碼顯示特殊符號，以免有心人士在使用者後方偷看，因此secureTextEntry就可以發揮用處了。placehoder就是提醒使用者該欄位需填入什麼樣的格式。autoCorrect是自動校正使用者填入的字是否正確，但是每個帳號不一定都是正確有意義的文字，所以這邊要關掉。
Spinner.js是當使用者需要等待的時候，所顯示的轉圈圈，有分大跟小。RN的物件是ActivityIndicator，未來應該也會要客製化ActivityIndicator的樣式。
為了讓我們自定義的物件，可以一行就全部import，所以要在common底下新增一個index.js，而程式碼的部分請參考底下。
通用物件講完之後，在.../src/components底下新增LoginForm.js來決定顯示登入或是登出。因為是要檢查信箱密碼的，所以有用到Google的Firebase來當作簡易的伺服器。
那要如何使用Firebase呢？首先要安裝Firebase到專案裡，在terminal輸入npm install --save firebase，然後在LoginForm.js最上方匯入Firebase套件。
開啟瀏覽器，在網址欄位輸入firebase google，或點擊這裡。使用Google的服務，當然一定要有Google的帳號，若沒有就先申請註冊吧！進去網頁之後，其畫面如下：
點擊GET STARTED FOR FREE，進入Dashboard：
點擊CREATE NEW PROJECT，輸入專案名稱(我是輸入auth)，點擊CREATE PROJECT：
回到DashBoard，點擊左邊欄位的Authentication：
點擊Email/Password：
啟用後，儲存：
點擊右上角的WEB SETUP，複製大括弧內的程式碼：
貼到LoginForm.js的componentWillMount的function裡面。（可參考底下程式碼）
完成圖：
- 登入畫面
- 登入失敗
- 登入中
- 登入成功
沒有留言:
張貼留言