The Complete React Native and Redux Course - Auth

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來檢查是否正確，其登入流程如下：

那其實React Native沒有Button這個物件，Button是自定義出來的，那RN監測觸碰的物件是TouchableOpacity，然後又在TouchableOpacity物件底下放入Text物件，來顯示Button名稱。

為了模組化，讓Button可以Re-use，所以觸碰的事件以及按鈕名稱都是動態的，從父組件傳下來的，最後再透過style來客製按鈕樣式就完成了，完成圖在最下面可以參考。

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裡面。（可參考底下程式碼）


完成圖：

• 登入畫面

• 登入失敗

• 登入中

• 登入成功

The Complete React Native and Redux Course - Albums

The Complete React Native and Redux Course - Albums

講師：Stephen Grider

開發環境

Macbook pro 13'

IDE: ATOM 1.13.1

OSX安裝環境

1. 首先到Apple store安裝Xcode，或是更新到最新。
2. 安裝Homebrew。
3. 安裝Node.js，到terminal輸入brew install node，安裝完畢後，可輸入node -v確認是否安裝成功。
4. 安裝Watchman，輸入brew install watchman，Watchman是來自Facebook的檔案監控工具。React Native用來偵測程式碼的變化，以便重新建構。
5. 最後安裝React Native CLI工具，輸入npm install -g react-native-cli。npm是Node Package Manager(Node套件管理員)，是能夠讓你輕易地下載並管理專案所需的任合相依套件。
6. 建立React Native專案，輸入react-native init albums。
7. 輸入react-native run-ios，就會執行跑模擬器來顯示所開發的專案。

Atom安裝

Atom是一個強大的文字編輯器，擁有大量的插件可以使用，且大部分插件都有在持續更新，以下就是推薦必安裝的插件：

• Linter-ESlint: 是一個可以幫你『即時』除錯的好工具。
• file-icons: 美化IDE，會在檔案前面多一個小icon，可以直覺辨別那是什麼檔案。
• 
  

ESLint安裝

開啟Atom，點選左上角的Atom >> Preferences >> Install，搜尋Linter-ESlint，找到之後，就直接點選Install，也要安裝linter。然後回到terminal輸入npm install --save-dev eslint-config-rallycoding，再回到Atom的albums專案，在左邊欄位的專案樹狀圖，右鍵點選albums資料夾，選擇add file來新增檔案，檔名輸入.eslintrc，在該檔案內容裡輸入下段程式：

輸入完後，儲存.eslintrc，再關閉.eslintrc分頁，也關閉index.ios.js分頁，再打開index.ios.js，嘗試把一個分號刪除掉，就可以看到即時的錯誤訊息出現如下圖。

作者其實有分別針對三個文字編譯器(Atom, Sublime Text 3, VScode)說明如何加上ESlint的套件，但是我個人覺得Atom比較好用，Sublime Text 3要錢，所以就不講其他兩個文字編譯器。

練習

先把index.ios.js跟index.android.js兩個檔案裡的程式碼都全部刪除，由於我是使用macbook，所以我就只針對index.ios.js開發。之後，匯入兩個套件，分別是React跟ReactNative，程式碼如下：

React套件是已知一個元件應該要有怎樣的行為，且也已知如何把一群元件，讓他們可以一起工作。React Native套件是知道如何把一個元件輸出，且顯示元件在裝置上的位置。提供預設核心的元件，像是(image, text)。

延續上一個程式碼，建立一個Text component，程式碼如下：

建立一個標題物件，並且使用style來設定標題的格式，程式碼如下：


在ios模擬器上的示意圖如下：

更改標題底色，首先要先建立一個View的母物件，讓TextView被包含在裡面，僅修改header.js程式，程式碼如下：


在ios模擬器上的示意圖如下：

更改標題的位置、高度、使TextView置中、以及增加陰影，僅修改header.js，程式碼如下：



在ios模擬器上的示意圖如下：

為了重複使用header.js，因此header.js裡的TextView的內容不能寫死，直接看程式碼如下：

在ios模擬器上的示意圖如下：

新增Body物件，因為這個例子的主題是專輯清單，所以會顯示很多專輯。一步一步來，先新增Body基底，程式碼如下：

在ios模擬器上的示意圖如下：

延續上述所說，要顯示很多專輯，所以會夠過截取API的方式，來獲取專輯內容。在那之前先說明functional component跟class component的不同，請看下表：

因此，把AlbumList.js裡的程式碼做修改，請看程式碼：

其結果應該要跟上一個示意圖一樣。

為了獲取API，這邊使用的是third party: axios，因此要在albums目錄底下輸入npm install --save axios，如下圖:

接著匯入第三方套件，並且使用它來獲取API資料，程式碼如下：



這邊先插入一個教學，就是如何看log的方法。
因為我是使用Macbook，所以這邊就先以Macbook為主，對著模擬器按下command + D，會顯示menu選單，如下圖：

用滑鼠按下Start Remote JS Debugging，這邊因為我已經正在Debugging狀態，所以顯示是Stop Remote JS Debugging。 之後，會跳出瀏覽器，如下圖：

然後按下鍵盤command + option + J，就會顯示log資訊如下圖：

點擊object展開，可以看到status: 200，代表資料獲取成功，如下圖：

點擊data: Array[5]展開，可以看到五筆資料，如下圖：

state可以用來動態地被用來儲存資料，以下是它的定義規則：

• 一個普通的JavaScript對象通常被用來記錄和回應使用者的觸發事件。
• 當我要更新正在顯示的物件的內容時，要呼叫this.setState。
• 要改變state的值，要使用this.state，而不能直接改變state的值。

以下是state的例子：

對模擬器按下command + R，其結果顯示如下圖：

以前若要顯示陣列的所有值，會使用迴圈的方式來實現。但在React Native是使用map的方式，把植給迭代出來，程式碼如下：

其結果如下圖：

為了要顯示Album的更多資訊，所以新建了一個AlbumDetail.js，並且從父組件傳遞資料過來，因此有使用props來接收傳遞過來的資料，其程式碼如下：

其結果如下圖，基本上是跟上面的結果是一樣的：

若要自定義View的樣式，就新增Card.js，內容如下程式碼，並且匯入到AlbumDetail.js：

其結果如下圖：

更美觀優化，一樣也是自定義，新增CardSection.js，並且匯入到AlbumDetail.js，程式碼如下：

其結果如下圖：

開始佈局專輯標頭資訊，分別有專輯封面、專輯名稱和歌手名稱。因此程式碼排版如下：

因為還沒有載入封面圖像，因此先只有文字排版，模擬器結果如下：

載入專輯縮圖，程式碼如下：

模擬器結果如下：

載入專輯封面，程式碼如下

模擬器結果如下：

Beginner HTML and CSS （上）

Introduction: What is HTML and CSS?

講師：Caleb Curry

HTML是Hypertext Markup Language（超文本標記語言）的縮寫，它是構成Web頁面（Page）的主要工具，是用來表示網上信息的符號標記語言。

層疊樣式表（英語：Cascading Style Sheets，簡寫 CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文件（如 HTML 文件或 XML 應用）添加樣式（字型、間距和顏色等）的電腦語言。

講師使用的是Windows系統，編輯器推薦Notepad++，不過我還是會持續使用vim吧XD，因為沒有字幕，所以很多片段我只能看影片猜測他戲咧公啥米哇糕＠＠。

Tags and Basic Page Outline

講師：Caleb Curry

撰寫一段Hello, world!的程式碼，

結果如下圖：

Paragraphs, Headers, Line Breaks 

段落、標題、斷行表示:
其結果如下圖:

Everything About Lists

各種清單表示:

其結果如下圖:

Everything About Tables

表格表示方式:

表格標籤為<table>，橫行標籤為<tr>是table row的縮寫，表格標題標籤為<th>是table head的縮寫，通常是粗體且擺放是在中間位置，表格內容資料標籤為<td>是table data縮寫。

其程式碼執行結果如下圖:

Comments

註解在程式裡面相當重要，可以讓程式更易讀，使用的方式<!-- comment -->就好了。

Everything About Links

連結在網頁來說是相當之重要，不多說直接看程式碼:

要把index.html跟Another.html放在同一個目錄下。

Creating a FAQ with Page jump Links

也是一種超連結的概念，開啟一本的電子書，通常會有目錄，可以透過點擊某個文章標題直接跳到那頁的畫面，來看程式碼是怎麼作如下:

Everything About Pictures

圖片標籤為<img>，alt是說如果圖片連結失效，則就用這段文字顯示，示意如下:

程式碼如下:

width很直覺的就是限制圖片大小。

Text Inputs

輸入字串最常見的就是登入帳密的地方，像是信箱或是線上遊戲等等。其標籤為<input>，value是預設值，size是輸入框的大小，maxlength是可輸入的最大字母長度。其程式碼如下:

Password Inputs

Well, 有使用者名稱，當然就有使用者密碼囉，其實就跟一般text input差不多，只是輸入的密碼會用特殊符號代替。程式碼如下:

HTML Form Submission

這邊的教學有用到php的部分，所以就要安裝Appserv這套軟體，安裝好之後，把寫好的php放入你安裝的路徑\AppServ\www 之下。
<form>是個表單應用，這邊用來把表單內容傳送到php，以下是表單的簡單架構:

HTML form 表單結構

<form action="送出目的地" method="資料傳送方式">
... 表單內容...
</form>

<fieldset> 為 HTML 文件的表單元素 (element) ，用來設置輸入欄的表單。

<legend> 為fieldset表單的標題。

<label> 為 HTML 文件的表單元素 (element) ，用來設置標籤。

以下為程式碼

Radio

Radio屬於與使用者互動的功能之一，因此標籤也是 <input> 只是type是radio。

參考程式碼如下:

Check Boxes

Check Boxes屬於與使用者互動的功能之一，因此標籤也是 <input> 只是type是checkbox。

參考程式碼如下:

Drop Down Lists

由於這個部分的程式碼太長了，因此請點選這裡開啟。

Textarea

Textarea就是讓使用者可以輸入意見或是評論或是留言的功能。
直接看程式碼吧

Upload Button

就很簡單的一行code: <input name="upload" type="file" />

Div tag

其實這個小屁孩講師很多html的地方也不是很懂...亂教一堆..
根據我問谷哥大神的結果，得到下列的定義:

<div> 可定義文檔中的分區或節（division/section）。

<div> 標簽可以把文檔分割为獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>，那麼該標簽的作用會變得更加有效。

HTML5 Tags

HTML5 有新增一些tags，可以到這個連結參考。

結論

這個講師在一開始講非常基本的HTML還可以，之後稍微深入一點就不行了，他本人也不知道那幾個tags有什麼作用...，這樣不求甚解還敢開教學課程，真不塊是外國人，不知道哪裡來的自信？

此課程雖然我只把HTML上完而已，但是我目前給他的評價如下：
★★☆☆☆

就等CSS課程他是否能扳回一城。