iT邦幫忙

ionic相關文章
共有 40 則文章
鐵人賽 Modern Web DAY 21

技術 [Day 21] Angular 2 + Ionic = Mobile App ( 1 ) 介紹

前言 我是一個前端 (也許全端) 工程師,好不容易學會寫 Angular 2 了耶,但難道我就一輩子只能寫網站嗎?QQ 如果想要寫手機的 App,還要再去學 J...

鐵人賽 Modern Web DAY 22

技術 [Day 22] Angular 2 + Ionic = Mobile App ( 2 ) 建構

上一篇已經介紹 Ionic 搭配 Angular 2 是甚麼了,接下來就來介紹如何建構一個 App。 安裝 首先要確定 Node.js 有安裝 接者安裝 Cor...

鐵人賽 Modern Web DAY 23

技術 [Day 23] Angular 2 + Ionic = Mobile App ( 3 ) 實作 Todo List

建立專案 上回我們已經說明如何建立一個專案,而這次我們用經典的 Todo List (備忘錄) 來做說明 ionic start TODOApp blank -...

鐵人賽 Modern Web DAY 24

技術 [Day 24] Angular 2 + Ionic = Mobile App ( 4 ) 發布 App

前言 我們在電腦上用 ionic serve 測試好我們的 App 之後,最後仍然需要拿到實際裝置上測試,不僅是因為到時候本來就是要給手機使用的,並且很多的 N...

技術 [IONIC 4 + Firebase教學] Cloud Firestore 資料庫

Cloud Firestore 是快速、全代管、無伺服器且雲端原生的NoSQL 文件資料庫. 它不像傳統的Relation Database, 在使用上非常簡...

技術 如何解決IONIC 4 CORS的問題

CORS = Cross origin resource sharing 是跨域分享共享 當我們deploy Ionic 到 Android 或 IOS 是...

技術 [IONIC 4 + Firebase教學] Authentication 身分驗證

Firebase 提供了簡單的Authentication,讓開發者不需要自己Server端開發身分驗證的機制. Firebase 提供了Email/Passw...

技術 Ionic 4 自訂 back 按鈕的 click event

在 ionic 4 中只要加上 就可以很方便的讓我們加上返回鈕,但有的時候我們需要再返回前做一些檢查,例如說頁面上有一些資料變更了,但是使用者還沒有儲存,這時...

鐵人賽 Mobile Development DAY 2

技術 【Day - 2】Ionic開發指南1 - 環境建置和執行

在開發APP前,首要任務就是設定開發環境。在開始建構任何軟體或應用之前,必須先建立一個穩定且可靠的開發環境,這是一個不可或缺的步驟。環境建置完成後,我們還將介紹...

技術 Ionic 4 Events 換 RxJS

本週為了 icon 把 Ionic 4 升級到 5 了,有點吃飽了沒事幹,升級之後才想到 Events 淘汰了,評估過後決定改用 RxJS 的 Subject...

鐵人賽 Mobile Development DAY 8

技術 【Day - 8】Open AI API - 認識GPT和Whisper

經過前幾天的努力,我們的錄音功能已經成功建置完成。終於可以來介紹本次主題的另一個重點:ChatGPT。近年來,隨著AI的劇烈進展,特別是今年可以稱為生成式AI的...

鐵人賽 Mobile Development DAY 1

技術 【Day - 1】開賽前言與工具準備

前言 大家好!今年是我首次參加鐵人賽,以往都有在關注鐵人賽也很想嘗試挑戰看看,可是始終不敢跨出那一步。而今年是我人生中的一個轉捩點,做了很多不一樣的決定和嘗試,...

鐵人賽 Mobile Development DAY 15

技術 【Day - 15】GPT Tokenizer - 計算對話字數

昨天我們完成了和AI對話的功能。然而,由於GPT模型有Token數量的限制,我們無法將無窮無盡的歷史對話上下文訊息全部交給GPT模型處理。這時候,我們就需要借助...

技術 關於ionic4 toast樣式無法更改問題的解決辦法。

就在昨天,項目上遇到一個小問題,其實這個問題在開始搞ionic4的時候就想解決了,由於它自帶的css變數大部分可以完美更改樣式,一直沒有在意。將ionic3整合...

鐵人賽 Mobile Development DAY 5

技術 【Day - 5】Ionic加入Three.js - 在APP中快速建立3D模型

在前幾天的準備之後,我們終於要開始規劃APP的畫面了。首先,根據【Day - 1】所設立的目標,第一步就是要在首頁中央放置一個3D模型機器人。提到3D模型,我們...

鐵人賽 Mobile Development DAY 3

技術 【Day - 3】Ionic開發指南2 - 注意事項與基本元件介紹

在開始開發Ionic專案之前,有一些事項我們需要特別留意。這些細節可能影響到APP的效能、使用者體驗或開發過程中的效率等等。除此之外,為了使大家在接下來的30天...

鐵人賽 Mobile Development DAY 9

技術 【Day - 9】Whisper模型 - 將語音轉成文字

昨天,我們對Whisper模型進行了初步的探索和使用。今天,我們將結合這兩個部分,利用Whisper API將錄製的語音轉成文字。正如【Day - 8】所述,儘...

鐵人賽 Mobile Development DAY 30

技術 【Day - 30】完賽啦!- 總結與心得

開發總結 這30天,我們從環境建置開始,逐步進入Ionic的開發世界。我們使用許多Capacitor套件和原生功能之間的溝通橋樑,學習如何建立自己的ASP.Ne...

鐵人賽 Mobile Development DAY 14

技術 【Day - 14】GPT模型 - 打造流暢自然的英文對話

在昨日的【Day - 13】中,我們對Prompt Engineering有了更深入的理解。今天,我們將運用【Day - 8】所介紹的API,進行實際的串接實作...

鐵人賽 Mobile Development DAY 4

技術 【Day - 4】Ionic搭配Tailwind - 提升開發效率的新策略

在【Day - 2】時,我們已經順利的將專案執行起來,接下來就可以開始開發APP的頁面。但在進行開發之前,我希望在這30天的鐵人賽中,能夠專注在Ionic和Ch...

鐵人賽 Mobile Development DAY 10

技術 【Day - 10】ASP.NET Web API - 用FFmpeg打造音訊轉換服務

在【Day - 9】我花了很多時間嘗試解決音訊轉檔的問題。由於使用的Capacitor套件錄製的音訊格式是aac,我們需要將其轉換成Whisper API可以接...

鐵人賽 Mobile Development DAY 16

技術 【Day - 16】Azure AI Service - 認識Speech Service語音服務

在【Day - 14】我們完成了基本的聊天對話功能,然而,所有的回應都是以文字的形式呈現,於是我想透過Azure AI Service的語音服務,將文字轉成語音...

鐵人賽 Mobile Development DAY 27

技術 【Day - 27】Menu和Alert實戰 - 打造聊天室選單

在【Day - 25】中,我們完成歷史對話的儲存,並且已預先建立了一個聊天室功能的資料表。現在,我們將使用這個資料表,來實現一個與ChatGPT左側聊天室選單相...

鐵人賽 Mobile Development DAY 7

技術 【Day - 7】Gesture & Capacitor Haptics - 建立自定義手勢和觸覺反饋

在【Day - 6】中,我們已經完成了一個基本的錄音功能,目前的操作方式是:按下按鈕開始錄音,再次按下則停止錄音。不過,今天我打算調整一下這種操作方式。我的目標...

鐵人賽 Mobile Development DAY 19

技術 【Day - 19】Function Calling實戰1 - 自定模型輸出格式

在【Day - 18】時,我們面臨了GPT-4模型速度過慢的問題,目前唯一的解決方案似乎是改用GPT-3.5模型。然而,使用GPT-3.5模型它不但沒辦法輸出S...

鐵人賽 Mobile Development DAY 6

技術 【Day - 6】Capacitor Voice Recorder - 實現錄音功能

在【Day - 5】中,我們準備了一個3D模型機器人,下一步是新增核心功能:「錄音」。首先,我計劃設計一個對話用的錄音按鈕。我想讓它位於中心的形狀為大圓形的,提...

鐵人賽 Mobile Development DAY 13

技術 【Day - 13】Prompt Engineering實戰1 - 測試提示工程

在成功完成了語音轉文字的功能後,下一步就是串接ChatGPT。但在進行之前,我們需要先理解並掌握一個重要的概念:「提示工程(Prompt Engineering...

鐵人賽 Mobile Development DAY 25

技術 【Day - 25】Capacitor SQLite - 儲存歷史對話內容

在這24天鐵人賽中,我們經常需要測試多種對話情境。但每次重新啟動APP後,之前所有的對話都消失,必須重新開始。為了解決這一問題,今天我們打算實現歷史對話儲存功能...

鐵人賽 Mobile Development DAY 20

技術 【Day - 20】Function Calling實戰2 - 讓語音重新播放

在【Day - 19】中,我們成功透過Function Calling功能讓GPT-3.5模型按照指定的格式進行輸出,並且保持了良好的回應速度。今天我們將把Fu...

鐵人賽 Mobile Development DAY 26

技術 【Day - 26】Navigation導航 - 瀏覽歷史對話

在【Day - 25】我們成功實現了歷史對話的儲存功能,讓我們每次開啟APP都可以延續先前的對話。今天的目標是實現查看對話記錄的功能。在這之前我們已採用Shee...