Ann Chou Coding
0%

發表於 更新於 分類於 ，

使用 UI 庫能節省大量視覺設計和操作流程的前置設定，縮短開發時間，更重要的是在後續維護中也仍能保持一致性。想想不用自己刻頁碼省略邏輯，做 OTP 也會自動焦點下一個欄位，是不是很開心？😉
這是【套件筆記】開出的新系列 React UI 庫，我想針對幾項常見的 UI 庫做介紹與比較。結尾也會附上 Page 讓大家感受在電腦網頁與手機操作的差異。

cover

閱讀全文 »

發表於 分類於 ，

在上一篇 中，我們完成了：

  • 初始化 Firebase 與 Azure Notification Hub
  • 成功從 Firebase 取得 FCM token
  • 註冊裝置至 Azure Notification Hub（使用 FCM v1 註冊格式）

這篇我們的目標是：

  • 如何顯示 前景通知
  • 如何 請求 Android 13+ 的通知權限
  • 如何處理 通知點擊事件（背景與關閉狀態）
  • 打包 APK

先來認識手機中的 App 通知類型！

閱讀全文 »

發表於 更新於 分類於 ，

Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。我的 Vue3 專題中也有使用這套套件呈現，但因為 Swiper.js Vue 版是由 Composition API 寫成，但我當時只會 Options API，花了很多時間了解撰寫方式。今天目標就是介紹 Swiper.js 在 Vue3 Options API 的用法和元件化小撇步。
VueSwiper_00

閱讀全文 »

發表於 更新於 分類於 ，

以下流程是針對 Android 推播通知設定，請在 windows 電腦上執行！
這次的主題是 Expo 串接 Firebase 和 Azure，Azure 運行流程、編譯 App 和除錯會放在之後的文章。

前置準備

在這篇文章中，你需要事先準備

  • Google 帳號
  • Firebase 帳號
  • Azure 帳號
  • 一個 React Native / Expo 專案（安裝方法參考）
    • 安裝指令 npx create-expo-app@latest
    • 使用 npx expo prebuild 生成 android 資料夾
    • 修改專案 app.json 檔案中的 android package 名稱
  • 安裝 Android Studio

Firebase 設定

1. 建立 Firebase Android 應用程式

在 Firebase 建立一個新專案後，新增 Android 應用程式
Firebase_CreateAndroid

閱讀全文 »

發表於 更新於 分類於 ，

在進入與 Firebase 和 Azure 串聯之前，這篇文章會先做知識前導。

React Native / Expo 推播通知

Expo 本身就存有自己的推播通知模組 Expo Notifications，但我們也可以串聯其他具推播功能的平台。兩種做法也關乎我們要使用哪一種 Workflow，關於 Workflow 可以閱讀文章 「React Native / Expo Workflow」。

功能 / 能力 Managed Workflow
（EAS + Expo Notifications）		 Bare Workflow
（原生整合 FCM / APNs）
工具 Expo API 內建支援
不須再分 FCM / APNs		 自行串接 SDK，例如 Firebase
工具運作方式 使用 ExponentPushToken 第三方 SDK 產生的 Device Token
基本推播通知
（標題、內文、點擊導頁）		 支援 支援
富通知
（圖片、大圖、互動按鈕）		 支援有限 支援
靜默通知
（Silent / Background Data）		 部分支援 支援
整合第三方服務
（Azure / OneSignal）		 不支援 可串接 REST API / SDK
原生推播設定控制
（頻道、分類、優先級）		 部分支援，依 JS 設定 支援
整合與開發難度 最簡單、快速 較高，需原生知識
閱讀全文 »

發表於 更新於 分類於 ，

本篇主題是 React Native 小介紹。
因為先前在測試 Ionic + PWA 開發，對相機功能實在太失望，結果現在我開始用 React Native / Expo 了。
如果還不清楚 Ionic 和 Reac Native 能做不同種類的 App，可以先閱讀 App 種類概述 。

React Native & Expo 概述

  • React Native 是一個由 Facebook 開發的 開源框架，讓開發者可以使用 JavaScript（通常是搭配 React）來開發 原生 iOS 和 Android App。它會將 JS/React 程式碼轉換為原生的 UI 元件。
  • Expo 是一個基於 React Native 的應用程式開發平台，提供即時預覽（Expo Go）和線上建置（EAS build）、原生模組功能（推播、相機、GPS）等好用功能。

安裝 React Native & Expo

  1. 開啟 VS code 終端機輸入安裝指令
1
npx create-expo-app@latest
閱讀全文 »

發表於 更新於 分類於 ，

此篇作為 此部落格 App 技術文 的前導介紹，概述 App 種類差異。

App 種類比較

開發 App 的軟體有很多種，例如 Ionic、React Native、Flutter…。
不過我們在決定要使用哪一套工具前，可以先了解 App 要使用多少手機原生功能、人力技術、效能等資訊。

項目 Native Cross-platform Hybrid Web App / PWA
使用技術 原生語言 JS/Dart + 框架 Web 技術 + WebView 純 Web 技術
使用框架／平台 Xcode、
Android Studio		 React Native、
Flutter、Xamarin		 Ionic、Cordova、Capacitor Vue.js、React.js、Angular
以上搭配 PWA 支援
原生功能支援 完整 高 有限 有限
安裝方式 App Store、
Google Play		 App Store、
Google Play		 App Store、
Google Play		 免安裝，直接開啟
效能 ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐ ⭐
推播通知支援 支援 支援 需設定 plugin 限支援 PWA 瀏覽器
離線功能 支援 支援 視 plugin 支援 僅部分瀏覽器支援
學習曲線 高 中 相對低 低

關於 PWA 對原生功能支援的「有限」程度，請閱讀 PWA介紹 (Progressive Web App)，優、缺點及範例介紹。

相關文章

因為我是 Web 開發者，最近才開始接觸 App 開發，知識認知上還是有限度。
附上更深入比較的文章提供參考。

更多關於我的研究，可藉由 tag: App 主題閱讀。