使用 React Native 與 Amazon Cognito 實作 Google & Facebook 登入的功能

最近開始接觸 React Native 的專案了，能用前端技術跟知識同時開發 iOS/Android App 滿新奇的！雖然缺乏原生 App 的知識讓我踩了不少坑，其中不少還是非常低能的坑 XD！

這次實作的任務是要在 App 加上 Google/Facebook 登入的功能，而會員系統是建構在 Amazon Cognito 上面的，再加上 React Native 的相關套件 – react-native-facebook-login 及 react-native-google-signin 來實作 App 中的登入功能。其中有些設定上的眉角讓我花了不少時間嘗試，所以整理成本篇的筆記備忘囉～

本文大綱

本篇文章滿長的，所以先整理大綱在此，了解一下會介紹到的部份：

本文的套件版本
AWS SDK React Native 與 Amazon Cognito
react-native-facebook-login
react-native-google-signin
繼續未完的 Amazon Cognito 設定
前端程式
疑難排解
用 Amazon Lambda 來做 Serverless API
Amazon API Gateway
在 App 端補上註冊（register）的 function
Source Code
參考資料

Pages: 1 2 3 4 5

淺談使用 Appium 進行 React Native 雙平台（iOS & Android）App 的 E2E 自動化測試

前言

先前在公司的產品流程中導入了單元測試的部份，而最近手上的任務是為 App 產品導入 E2E 測試（End-to-End Test）。由於目前的公司團隊沒有 QA 人員，因此每次產品新版 release 前都必須仰賴工程師自己與產品 Owner 等成員自行手動測試（Manual Testing），隨著產品功能越來越龐大，這個過程越來越曠日費時，也無法確保每次都能測到所有的項目，因此才會有導入 E2E 測試的想法。

本篇文章視角是給像我一樣的非 App 工程師（例如從沒接觸過原生 App 開發、準備踏入 React Native 開發的前端工程師）的經驗分享，又因公司 App 產品是用 React Native 寫的，所以也會提到一些 React Native 在搭配 Appium 測試時需要注意的一些部分（一點點啦）。這也是我首次嘗試 E2E 的測試，著墨不深，有不精確或誤導之處，一樣請偷偷告訴我以便修正文章囉 🙂

自動化測試中的 E2E 測試與比重

自動化測試（Unit test、Integration Test、E2E Test）能為產品的品質帶來更多信心，E2E 測試更是貼近真實使用者的情境下進行整體性的操作測試，「專注在真實使用者情境」－－嗯，聽起來 E2E 是很值得投資的事情！不過 Google Testing Blog 曾在 2015 年的 Just Say No to More End-to-End Tests 中提出一些不同的思路。

淺談 Google App Indexing

App Indexing (圖片取自 App Indexing – Google Developers)

前言

上一篇談到 Facebook 推出的 App Links 標準，為 Apps 之間的連結跳轉帶來解決方案，而 2015 的 Google I/O 大會推出的 Android M，其中一個亮點就是推出它們對於跨 Apps 跳轉的解決方案 — 也叫 App Links — 但它是透過 json 檔設定實現，這邊就不多做介紹了，有興趣可看 HOKO 的這篇介紹。

而這篇要介紹的是關於 Google 的 App Indexing ，在這個行動裝置當道的時代，App Indexing 的出現便是為了讓 Google Search 亦能搜尋到 App 中的內容，甚至點擊搜尋結果就直接讓使用者透過 Deep Link 連到 App 內的特定頁面。

還是有些抽象？那麼先來看看 Google Developers 釋出的這支影片，有趣地介紹了實際應用的情境。

十個行動版網頁（Mobile Web）開發輔助工具

近期筆者執行了滿多行動版網頁（Mobile Web），同時也是 RWD 設計的專案。光測不同的瀏覽器（IE 8-11、Chrome、Firefox、Safari）就夠忙了，而行動平台上的各種尺寸、瀏覽器與其他變因更是耗費不少前端工程師的青春…XD

而有時候光用桌面瀏覽器模擬手機瀏覽器，並無法完全真實呈現在行動裝置的情況，所以在開發的過程中使用了許多工具來輔助，在開發期就力求盡量測到（並進而解決）不同裝置的「近似」真實的情況。

以下列出十項，個人覺得還不錯的行動網頁開發輔助工具：

在 Android 原生瀏覽器上特別模糊的 SVG 圖片與 workaround

最近在執行的手機版網頁專案，針對其中許多 icons，我都使用了 SVG 圖片來取代高解析裝置下表現地慘不忍睹的 PNG 圖片，銳利的向量圖片放大縮小也不怕，真棒。

但在進行不同裝置的測試時，發現在某些 Android 上用原生瀏覽器瀏覽時，某些 SVG 圖片特別模糊，毛邊都相當明顯，但又不是每張 SVG 圖片都是如此，相當詭異。

舉個例子：

（可點圖放大）

左方是正常的情況，SVG 圖檔相當清晰
（Chrome for Android v36）
右方則是在 Android 原生瀏覽器上的情況
可以注意圖片的邊緣都相當模糊、不銳利

經過比較發現，在我這個專案的情境中，只有被套上 transform: rotate 或 position: fixed，且是 background-image 方式使用的 SVG 圖片會有這個問題。

上 stackoverflow 搜尋看看，果然有類似的問題被提出（雖然提問者的情境與我不同），而也有人提出了 workaround 來暫時解決這個問題。

根據討論串，這應是 Android 原生瀏覽器及 Chrome for Android 25 版之前的 issue，這個 issue 會使符合上述情境的 SVG 圖片，以 CSS 像素的密度（density）被繪製出來，但多數高階 Android 手機中，CSS 的 1px 並不等於裝置的 1px，所以會讓它看起來很模糊。

而討論串中被提到的 workaround 雖然也沒有對為何可以這樣解決的原理做太多解釋，但也滿有意思的，是在 SVG 檔案中嵌入一個透明（opacity=0）的文字物件：

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

就可讓 Android 原生瀏覽器/Chrome for Android 正常地繪製符合上述情境的 SVG 圖片，就連 zoom in 也一樣清楚噢。

[Android] Facebook Home 試用，以及修改裝置名稱以安裝至 SAMSUNG S2 (i9100) 的方法

上週 Facebook 發表 Facebook Home，而於美國時間 04/12 已上架至 Google Play，但根據官方網頁消息，目前支援的機型僅有：HTC One X、HTC One X+、Samsung GALAXY S III 以及 Samsung GALAXY Note II 等。不過今天一早已經發現網上有 Facebook Home 的 apk 流出版，便下載來嘗鮮體驗看看。（筆者註：流出版的 apk 無法保證其安全性，請自行斟酌是否要下載安裝）

我使用的是 Samsung GALAXY S II (i9100)，並不在官方宣稱的支援機種內，故就算安裝完 Facebook Home apk 後開啟（同時也請記得從 Google Play 更新 Facebook 與 Facebook 即時通喔！），僅能看到這個畫面：

謝謝你安裝 Facebook Home。目前你的裝置尚未被支援，一旦 Facebook Home 可在你的裝置上使用，你將會收到通知。

還是很想試用看看的話，就得修改 Android 裝置名稱來欺騙應用程式，讓其認為這支手機是支援的機型囉！
不過必須要 root 才能進行系統檔案的修改，至於是否值得為此去 root 與冒修改系統檔案的風險，就留給讀者自己評估囉。

[教學] Samsung i9100 S2 Android 4.0.4 刷機至 4.1.2 步驟

只是做個紀錄。此版本並非官方提供，本文僅供個人研究之用。

2012/11/19 更新：

mobile01 的 mas0n 製作了更完整的繁體中文與修正問題的 ROM 版本：

http://www.mobile01.com/topicdetail.php?f=568&t=2369097&m=f&p=1919#39918262

所以以下就僅供參考囉。

手機：SAMSUNG I9100 S2 (中華電信) Android 4.0.4 LPF 版本

升級目標：Android 4.1.2

ROM 原始出處：http://bbs.gfan.com/android-5376188-1-1.html

刷機成功畫面：

iPhone/iPad 等行動裝置上的 audio 標籤無法自動播放 (autoplay) 與預載 (preload) 的問題

即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作，是使用 Nodejs 來達成，但這篇講的主題跟 Nodejs 無關，而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。

情況描述：Case 中有個互動效果是當使用者開啟手機版網頁後，會進行互動並播放 GIF 動畫（噢，許多舊版本的 Android 裝置是無法播放 GIF 動畫的，這點也要提一下），動畫播放過程中會播放音效。

在 Android 的內建瀏覽器中可自動播放音效，但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放，一點聲音也沒有。而且在桌上型電腦上都可正常地播放。

為什麼呢？

[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能 (Chrome for Android Remote Debugging)

最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器，除了不支援 Flash 外，其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。

其中更包含「開發人員工具」，讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。

[ASP.NET] 在文字控制項上使用 HTML5 input type 的方法

最近的案件在製作手機版網頁時，其中有讓使用者輸入「手機」的欄位，這時想到若能善用 HTML5 文字框中 type 屬性，將之設為 tel，在智慧型手機上就能自動呼叫出電話數字鍵盤，那麼使用者輸入手機時會方便許多。

但由於是用 ASP.NET 3.5 製作，似乎在 4 之前的版本，文字框控制項尚不支援 HTML5 的眾多 type 屬性，若強制更改會造成編譯錯誤。
網上搜尋了一下解法，果真有相關的討論，其實做法就如同在文字框控制項加上 keydown 屬性一樣，在 code behind 那邊加上即可。

以本例來說，就會像這樣：
Continue reading

Partner Studio

patw 的技術筆記

Android