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

Standard

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

這次實作的任務是要在 App 加上 Google/Facebook 登入的功能,而會員系統是建構在 Amazon Cognito 上面的,再加上 React Native 的相關套件 – react-native-facebook-loginreact-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
  • 參考資料

繼續閱讀…

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

Standard

前言

先前在公司的產品流程中導入了單元測試的部份,而最近手上的任務是為 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

Standard

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)開發輔助工具

Standard

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

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

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

繼續閱讀…

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

Standard

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

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

舉個例子:


(可點圖放大)

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

經過比較發現,在我這個專案的情境中,只有被套上 transform: rotateposition: 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) 的方法

Standard

上週 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 步驟

Standard

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

 

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) 的問題

Standard

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

 

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

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

 

為什麼呢?

繼續閱讀…

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

Standard

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

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

繼續閱讀…

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

Standard

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

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

以本例來說,就會像這樣:
繼續閱讀…