使用 Gitlab cicd 佈署 React Native專案

現在大部分公司的專案都會放在自己的機台,並安裝 Gitlab 做管理,其實身為一個前端工程師,一定會在各種時候需要略懂一些其他領域的知識,就像這篇我要記錄的自動化部署 ,讓每個協作者開發完成後,發佈新版本時候確保專案有適時載入所有 package 與成品有正確上傳到線上環境。只需要額外撰寫 .gitlab-ci.yml 放在根目錄,Gitlab Runner 就可以自動去跑部署流程囉!

因為每間公司的流程跟限制不同,以我自己的例子,我們公司只會有兩種環境 : developmentproduction。另外在 Gitlab Runner 那端由 IT 人員處理,所以這邊無法多作說明,這邊主要就是以前端的角度去實踐。

要做到自動化部署,會經歷以下幾件事 :

  1. 撰寫package.jsonscript
  2. 撰寫deploy.sh
  3. 撰寫.gitlab-ci.yml
閱讀更多
2+

React Native Remote Notification

如何使用 react native + react-native-push-notification + firebase cloud messaging 傳送遠端測試通知到 android emulator

本篇使用的設備跟環境:

  1. windows電腦
  2. 已安裝android studio並且依照RN官網做好設定
  3. npm

要在電腦上的emulator上收到遠端通知,需要準備以下幾件事 :

  1. 創建一個firebase專案
  2. 為firebase專案加入android applications
  3. RN專案安裝react-native-push-notification套件
  4. RN專案設定firebase相關依賴
  5. RN專案訂閱channel
  6. 檢查android emulator是否符合FCM設備要求
  7. 從firebase cloud messaging發送測試通知
  8. 查看是否收到通知

如果你有自己的後端 server(像是 express),似乎你還是需要創建 firebase 專案,差別只在於你可以不用進行第7步驟,其他步驟一樣都是必須的。

閱讀更多
0

React Native Push Local Notification

在react native中的通知有分兩種,一種是本地通知(自己寫按鈕就可以觸發通知),一種是遠程通知。

遠程通知需要一個firebase帳號,並且創建firebase專案,這部分之後再更新(茶

因為新公司只有提供windows電腦,所以本篇只示範android平台的local通知…QQ

安裝步驟可以參考這裡,但是你懶得看,所以我寫了這篇。

閱讀更多
0

React Native using Socket.io

我們在 App 中如果 App 是在背景狀態,可以使用手機原生的 notification 進行即時通知,但是如果App目前是打開的狀態,想要及時通知,就需要使用 websocket

在前台RN專案訂閱後端的 socket 服務,必須要跟後端配合,才能順利接收到資料,下一篇文章會分享如何使用 express + socket.io 發送訊息。

package版本 :

  • React Native 0.63.3
  • socket.io-client 2.3.1
閱讀更多
0

React Native 使用免費Icon ( ios )

如果你要寫 react native,又沒有使用ui框架的話,想要使用 icon,可以安裝react-native-vector-icons,他提供幾乎所有大家會用的 icon 字型。

閱讀更多
0

React Native 使用 alias,不用寫很多相對路徑。

在React Native 版本0.61.5 ,使用 npx react-native init 建立的專案,自動會幫你安裝 metro-react-native-babel-preset ,並且產生 babel.config.js 這隻檔案
所以只需額外安裝 babel-plugin-module-resolver

$ yarn add babel-plugin-module-resolver -D
閱讀更多
0