iOS

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

Standard

最近開始接觸 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
  • 參考資料

Continue reading

Pages: 1 2 3 4 5

淺談使用 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 中提出一些不同的思路。

Continue reading

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

Standard

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

 

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

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

 

為什麼呢？

Continue reading