iT邦幫忙

angular相關文章
共有 687 則文章
鐵人賽 Mobile Development DAY 14

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

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

鐵人賽 Mobile Development DAY 13

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

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

鐵人賽 Mobile Development DAY 12

技術 【Day - 12】串接Azure服務 - 完成語音轉文字功能

【Day - 11】我們成功將服務運行並部署在雲端,今天我們會將服務與我們的APP進行完整串接,以完成整個語音轉文字的功能。除此之外,今天我們也會在APP上加入...

鐵人賽 Modern Web DAY 1

技術 D0 從0開始的的Angular站台架設-Stnadalone

首先我必須開宗明義地說,本次的Angular@16-Standalone開發模式分享更加傾向於一種實戰心得分享舉個例子來說就是一個新兵幸運蛋子分享自己如何在戰場...

鐵人賽 Mobile Development DAY 11

技術 【Day - 11】Azure + Docker - 建置和部署服務

在【Day - 10】,我們成功建置了一個能處理語音轉檔的API,並且已經順利與Whisper API整合。然而,目前的服務僅能在本地運行。因此,今天我們將會把...

鐵人賽 Mobile Development DAY 10

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

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

鐵人賽 Mobile Development DAY 9

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

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

鐵人賽 Mobile Development DAY 8

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

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

鐵人賽 Mobile Development DAY 7

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

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

鐵人賽 Mobile Development DAY 6

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

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

鐵人賽 Mobile Development DAY 5

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

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

鐵人賽 Mobile Development DAY 4

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

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

鐵人賽 Mobile Development DAY 3

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

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

鐵人賽 Mobile Development DAY 2

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

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

鐵人賽 Mobile Development DAY 1

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

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

技術 如何在Angular裏引用自造字(EUDC)

今天工作期間有遇到一個問題:因公司是醫療體系,所以系統裡有很多病患的名字,而人的名字就會有一些特殊的字。當時公司的解決辦法就是建了自己的造字,並一直沿用到現在,...

鐵人賽 Modern Web DAY 30
angular專案開發指南 系列 第 30

技術 Angular 還有什麼有趣的東西

結語 終於完成 Angular 專案開發指南 系列文章的撰寫,本以為可以輕鬆完成,卻剛好碰上許多事情同時發生,幸好平時就有寫一些研究成果來作為對內分享的文件,幫...

鐵人賽 Modern Web DAY 29
angular專案開發指南 系列 第 29

技術 Gitlab自動化部署 - Pipeline

前言 GitLab Workflow內容包括,git 版本控制系統、CI/CD Pipeline,以及專案管理的功能,像 Wiki、Issue Tracking...

鐵人賽 Modern Web DAY 28
angular專案開發指南 系列 第 28

技術 Gitlab工作流程介紹

前言 GitLab 最初是 MIT 授權的免費開源軟體。現在則有 GitLab CE(社群版) 和 GitLab EE(企業版),而兩者的核心程式碼是相同的,但...

鐵人賽 Modern Web DAY 27
angular專案開發指南 系列 第 27

技術 E2E 自動測試 - Cypress

前言 專案開發後期會進入 QA 測試階段,其中免不了各種手動點擊切換頁面或迴歸測試等,每個功能都要人工進到畫面中看一遍有沒有問題,這樣不僅工作量大重複性高,且當...

鐵人賽 Modern Web DAY 26
angular專案開發指南 系列 第 26

技術 Angular 單元測試 - Karma

前言 透過自動化測試取代人工測試,降低測試成本,自動化測試帶來速度快、可重複與自動化的測試工程。 程式寫完之後,通常會需要做測試,可能就是跑跑看看東西或 log...

鐵人賽 Modern Web DAY 25
angular專案開發指南 系列 第 25

技術 路由守衛與登入模組實作

前言 登入功能也是一個網站應用專案中很重要的一部分,由於一般情況下只有在使用者登出或者登入的 token 過期的時候才會回到登入頁面,因此我們選擇用 延遲載入...

鐵人賽 Modern Web DAY 24
angular專案開發指南 系列 第 24

技術 探討路由模組載入策略

前言 大型網站應用程式專案由於功能較多,如果一開始就把全部的頁面或功能模組引入根模組,使用者體驗會因為初次進入畫面時間過久而降低,為了解決這個問題,延遲載入模組...

鐵人賽 Modern Web DAY 23
angular專案開發指南 系列 第 23

技術 Angular 路由模組

前言 路由是 Angular 裡很重要的部分,以前的網頁技術 MPA 透過改變 url 對 server 發起頁面需求來達到換頁的效果,而所謂的 SPA 單頁應...

鐵人賽 Modern Web DAY 22
angular專案開發指南 系列 第 22

技術 共用元件的動態載入(2)

前言 上一篇使用 *ngComponentOutlet 的方式來動態產生元件,本篇要跟大家分享的是 ViewContainerRef,在程式中產生元件實體後再嵌...

鐵人賽 Modern Web DAY 21
angular專案開發指南 系列 第 21

技術 共用元件的動態載入(1)

前言 租賃代管業務中除了租戶管理,租賃物件本身宣傳廣告也是很重要的需求,為了吸引顧客上門,客戶要求提供一個元件給他們維護物件的資訊,廣告格式有, 文字敘述 -...

鐵人賽 Modern Web DAY 20
angular專案開發指南 系列 第 20

技術 i18n 多國語系 - Ngx-Translate

前言 國際化 (i18n) 是一個過程,用於對你的應用進行設計和準備以便在全球不同地區使用。本地化是指為不同的本地環境建構應用版本的過程,包括提取用於翻譯成不同...

鐵人賽 Modern Web DAY 19
angular專案開發指南 系列 第 19

技術 製作共用指令與管道

前言 Angular 雖然內建許多的指令 @Directive 與管道 @Pipe,但專案開始進行後,就難免遇到需要自訂一些服務的時候,針對一些可以共用的方法或...

鐵人賽 Modern Web DAY 18
angular專案開發指南 系列 第 18

技術 Angular 組件間資料的傳遞方式

前言 所有前端框架都會遇到一個共同的問題,就是資料與狀態如何在組件之間傳遞,根據元件之間不同的組合關係,大致可分類為父子,兄弟與沒有關係,在 Angular 中...

鐵人賽 Modern Web DAY 17
angular專案開發指南 系列 第 17

技術 Angular 專業圖表套件 - Ngx-Echarts

前言 回到網站的首頁,為了量化租戶管理的效能,通常會將資料數據透過圖表的方式呈現,在網路上可以找到許多套件與 Angular 搭配完成各種任務,今天要跟大家介紹...