Angular Animation添加UI活潑的互動性
App增添一些動畫效果不只是讓畫面變得好看,它還能幫助使用者更直覺地理解您的應用程式在做什麼。透過漸變、滑動、縮放等動畫效果,使用者可以感受到操作的回饋,讓介面看起來更自然、更有互動性。這一篇文章將透過一個簡單的範例,教您如何在Angular中使用Animation API做一個可開關顯示區塊的動畫元件。
App增添一些動畫效果不只是讓畫面變得好看,它還能幫助使用者更直覺地理解您的應用程式在做什麼。透過漸變、滑動、縮放等動畫效果,使用者可以感受到操作的回饋,讓介面看起來更自然、更有互動性。這一篇文章將透過一個簡單的範例,教您如何在Angular中使用Animation API做一個可開關顯示區塊的動畫元件。
作者:許薰尹 精誠資訊/恆逸教育訓練中心資深講師
在《【讓GitHub Copilot更強大】GitHub Copilot擴充功能簡介-1》一文,介紹了GitHub Copilot 擴充功能,它是一個能讓 GitHub Copilot Chat 增加許多功能的工具,適合用於程式開發、查詢文件、AI輔助程式設計、資料檢索和執行特定操作等。這些擴充功能可以依據使用需求設為私有、公開並可分享,或在 GitHub Marketplace 上公開列出供大家下載。對於保護客戶資料的企業而言,可以選擇私有擴充功能來保障資訊僅在內部使用。若是小規模合作則可選擇公開並可分享的擴充功能,或將擴充功能上架至 GitHub Marketplace 以擴展影響力。
開發者可以使用 GitHub 提供的資源來自行設計 Copilot 擴充功能,其中包含程式碼範例、除錯工具、SDK 等。GitHub Codespaces 也支援在雲端設置和運行開發環境,並提供預先配置的工具如 Visual Studio Code,方便在不同設備上隨時隨地開發和協作。使用者可以建立一個簡單的 HTTP 伺服器,設定擴充功能的基本回應格式,並利用 createTextEvent 和 createDoneEvent 函數來控制回應流程。整合完成後,開發者可以進行測試,並調整連接埠的可見度設定為「Public」,確保外部應用程式可以正常訪問。
本篇文章將延續《【讓GitHub Copilot更強大】GitHub Copilot擴充功能簡介-1》文章的情境,介紹如何設計一個簡單的GitHub Copilot擴充功能。
GitHub Copilot Chat是一個超級聰明的聊天機器人,它可以幫你做很多程式開發相關的事情,而GitHub Copilot 擴充功能(GitHub Copilot Extensions)可以讓這個機器人裝上各種不同的工具,讓它變得更厲害!您可以使用 Copilot 擴充功能來擴展Copilot Chat 的能力!
☑UI((User Interface):專注於視覺設計和互動設計
☑UX(User Experience)使用者體驗:專注於使用者的整體體驗和感受
例如,一個銀行App的 UI 可能設計得非常漂亮,但如果需要點擊多個頁面才能完成轉帳操作,那麼這樣的UX就不會很好!
文/顏怡宏 Bob Yen
只要是參訪過Apple官方網站的朋友,應該都會對Apple眾多產品的各式各樣網頁動態呈現方法感到驚豔,並且想要一窺究竟,但卻不得其門而入。例如在Apple的迷你喇叭HomePod mini頁面中,就會出現一個有趣的動畫,就是一開始只有一個橘色的HomePod mini在畫面中,如下圖。

但是接著產生了動畫,有四個不同顏色的HomePod mini竟然從後面向兩側竄出,形成立體排列的視覺效果,如下圖。

在現代軟體開發中,建立可靈活擴展且易於維護的應用程式是一個關鍵挑戰。為了滿足這些需求,許多開發者轉向微服務架構,並使用Web API/Minimal API作為開發和部署應用程式的實作手段。
Minimal API是一種以簡單、直觀的方式建立輕量級Web API的方法。相較於傳統的Web API,Minimal API更加精簡,減少了冗餘程式碼和配置,使開發者能夠專注於實現核心商業邏輯。
本文將介紹如何使用REST Client來測試Minimal API。REST Client是一個強大的工具,可以幫助開發人員模擬HTTP請求和回應,從而驗證API的正確性和可靠性。
當前,人工智慧的進步正在全面改變科技界的格局,並重新塑造世界運轉的模式,影響著各個組織和團隊的運作方式。若能充分善用這些人工智慧的進步,將如同催化劑般顯著提升全球開發人員的生產力。對於開發人員而言,將人工智慧的功能融入他們所熟悉的開發工具中,不僅能夠加強協同作業、開發、測試和部署產品的能力,更能以更快速、更有效率的方式完成這些任務。
GitHub Copilot 是由GitHub和OpenAI合作開發的AI程式設計助手,旨在協助開發者更快、更高效地編寫程式碼。它支援多種程式語言和開發工具,並能自動生成程式碼建議。儘管它不斷學習並提供最新語法,程式設計師仍需檢視和調整生成的程式碼。
GitHub Copilot 是一項服務,能夠與所有熱門的程式設計語言搭配使用。在啟動不到兩年的時間內,已有46%的新程式碼是由人工智慧撰寫的,這顯著提高了整體開發人員的生產力,增加了55%。同時,有74%的開發人員表示能夠更專注於帶來滿足感的工作上。
GitHub Copilot 使用公開來源的自然語言和數十億行原始程式碼 (包括公用 GitHub 存放庫中的程式碼) 進行訓練,以了解您的專案之複雜細節,這可讓 GitHub Copilot 提供更多的內容感知建議。在使用 GitHub Copilot 的提示工程簡介中,您可以建置提示以讓GitHub Copilot生成實用的建議。這些提示是指導生成程式碼的指引或建議集合,有助於Copilot產生特定的回應。因此,GitHub Copilot輸出的品質取決於您如何建構這些提示,學習如何正確地下提示將會是一個相當重要的課題。
如果您有興趣使用GitHub Copilot,可參考本文的步驟開始使用。
作者:李啟宏 精誠資訊 恆逸教育訓練中心 資深講師
作者:羅慧真 精誠資訊/恆逸教育訓練中心資深講師
隨著雲端服務需求日增,各大企業迫切需要Azure技術人才以協助導入雲端服務。下面的企業成功案例專訪,可以幫助您了解Azure培訓能為企業與受訓員工帶來的綜效。
面對數位轉型的巨大改變與需求,任職友達光電數位技術開發處/數位生態發展部,主要負責智慧電網、水網、材料網開發/推導,同時擔任Microsoft ESI(Enterprise Skills Initiative)教育訓練窗口的許哲男表示,「我們需要收集各式各樣數據資料,經過一連串資料處理(清洗、補值…),進行資料融合,利用工具萃取出資訊。但是傳統運作方式從採買主機、架設、開發程式,完全無法跟上前述需求。
舉例來說,我們嘗試用AI模型去解決現場問題,就需要主機高度計算力,若傳統作法可能幾個小時還在進行採購聯繫,但是若採用Azure雲端解決方案,直接開啟資源選擇各種工具去分析,使用後立即關閉,幾個小時已經嘗試數十種可能。
因此,這次不採用在公司內機房自建地端資料倉儲與擴充主機算力方式,而是導入Azure雲端環境與其多元工具,包括Azure IoT Edge、Azure Databricks、Azure Synapse等,用以提供更多元、即時、數量更豐富的數據中台,做為資料分析、開發演算法模型及訓練模型…等數據分析的基礎。」
不過,雲端環境很複雜、工具選擇很多,尤其Azure雲端新架構包含了各式各樣多元工具,如何透過有系統、完整的教育訓練,快速改變同仁觀念與培養相關技能,更讓DT部門(Digital Technology)外的生產製造同仁也能參與其中,快幫助同仁快速了解Azure雲端架構與工具,是優先的考量。
首先,會透過Azure 900系列課程,例如『AZ 900:Microsoft Azure基礎知識』課程來幫助同仁對於雲端環境特性,成本最佳化、彈性與可擴縮性、合規性、備份/復原與容錯移轉、簡化管理與監視與工具特性(例如時時啟動計費或是Event–Driven時啟動計費)有基礎的認識。
後續,再根據受訓同仁的背景與所負責職務不同,給予不同的訓練課程建議。
例如DT單位會使用到Databricks協助彙整/建置雲端數據中台,或是部分先進製造同仁會用數據中台分析求解,會安排上『DP090:使用Microsoft Azure Databricks來實作機器學習解決方案』課程。
而生產製造同仁因人數較多且背景差異大,如果對應用工具和解決問題有興趣,會安排AI系列課程的訓練,例如『AI 102:設計和實作Azure AI的解決方案』。
如果生產製造同仁本身對動手Coding、資料彙整分析有興趣,則可以參加DP系列課程,例如『DP100:在Azure上設計和實作資料科學解決方法』。
至於需要在Azure雲端開發新的應用服務的DT部門或先進製造同仁,則透過『AZ204:Microsoft Azure開發解決方案』課程訓練,開發適用於Microsoft Azure的解決方案,了解如何在雲端環境進行開發同時進行部署。
許哲男表示,會選擇透過恆逸教育訓練中心來協助同仁具備上述Azure相關技能,除了恆逸本身是Microsoft ESI Program的良好合作夥伴外,擁有專業的課程設計、學習環境、師資素質外,在協助整個課程安排上,從了解我們的上課需求開始、與服務人員溝通規劃課程、到參訓完成的整個過程中,恆逸都是基於服務概念出發,包括如何安排課程時間、軟硬體配合、總複習執行…等,都隨時考量如何讓上課同仁都能充分吸收,並因應狀況進行調整。
「以我自己參加AZ900、AZ204課程的學習經驗來說,當疫情影響無法進行面對面實體教學時,為避免教育訓練的中斷只能轉為線上教學,且課程還包含動手實作部分,恆逸方面會跟我們溝通透過制式化登入社群軟體(Teams),遇到困難時在聊天室內發問,講師就可以清楚知道哪一位學員遭遇什麼問題,也提供每位學員遠端虛擬主機進行實際動手操作,實作過過程中講師也可以透過遠端登入學員使用主機解決,讓線上授課效果不受影響。
另外,參加恆逸Azure認證課程結束後,會安排總複習課程,幫助精簡整個課程重點,以及考試題目類型、考試方向歸納、對於認證考試及觀念掌握都很有幫助!」
許哲男表示,Azure雲端解決方案相較於傳統作法的優勢,雲端儲存空間遠大於自建,同時資源取得速度大幅躍進,從以月為單位進步到以分鐘為單位。目前數位轉型的概念已經在製造體系萌芽,新的合作專案都會考慮以雲端開發/建置。
「值得一提的是,目前同仁們在恆逸接受完Azure課程訓練後,帶來最大的改變與課程綜效是Azure考證通過人數真的是非常多,整體拿到Azure認證數量,從原本約50張到目前約有600張(包含DT與生產製造同仁),很開心透過一系列教育訓練,讓數位轉型這樣概念在每個同仁心裡開展,後續更期待同仁將學習到的相關技術充分應用到各個場域,幫助公司有更大幅度躍進。」
<註:目前AUO IT(Information
Technology)部門配合公司數位轉型目標,改為DT(Digital Technology) >
有想過撰寫一次代碼,遊走四大平台(Android、iOS、macOS、Windows)的實現嗎?
.NET MAUI實現了這樣的願景,它的前身是由 Xamarin.Forms 演進而來。它的完整英文是.NET Multi-platform App UI (官方中文翻譯是.NET多平台應用程式 UI)。這是使用C#撰寫代碼、XAML定義UI,經過編譯便可生成執行於 Android、iOS、macOS、Windows平台上的應用程式。
文:顏怡宏 恆逸教育訓練中心專任講師
Sass(Syntactically Awesome Style Sheets) 與 SCSS(Sassy CSS) 都是CSS的預處理器 (CSS preprocessor),所謂CSS的預處理器就是一種可以提升撰寫CSS網頁效率的處理機制,也可以說是一種程式語言。因此要介紹Sass與 SCSS之前必須先了解CSS(Cascading Style Sheets)階層樣式表目前面臨到的問題。
異軍突起的專業UI設計整合工具-Figma,不但是免費使用,而且是只要連上網就可以隨時設計UI的工具。
Figma以瀏覽器為載體,依靠網路,全程在網頁瀏覽器線上操作,並且Figma 可將所有設計檔案儲存在雲端隨開隨用,透過 Figma 的線上協作功能,隨時皆可讓團隊成員都能參與設計流程,在國內外已是非常熱門的介面設計工具,許多大公司的設計團隊皆已正式採用 Figma 為主力設計工具。
請至Figma首頁(https://www.figma.com/)按下右上角的Sign up註冊按鈕。可以選擇google帳戶登入,或填寫E-mail,接著填入暱稱及選擇常使用類別,建立Figma帳戶,即可開始免費使用。
n 快速上手的設計繪圖工具
為了要讓所有使用者均可完成UI設計,因此在繪圖工具與編排功能上,均以直覺方式操作,絕對可以讓非設計相關使用者也可以輕鬆開始繪圖與設計,而對於專業設計師更可以與其他設計軟體完整整合。
n 超有效率的編排工具
Figma在編排上,提供了【對齊Align】、【編排框架Frame】、【群組Group】、【遮罩Mask】、【樣式style】,善用這些編排功能就更能仔細做好UI設計的精準對齊與編排設計。
而進一步的響應式約束(Constraints)內容定位、自動佈局(Auto layout)物件編排,各個都是讓你眼睛為之一亮的功能,讓繁瑣的UI畫面設計編排超有效率快速完成。
響應式約束功能以建立編排框架Frame為前提,即當設計師將編排框架Frame尺寸進行變更時,編排框架Frame內的元素會自動按照預先設定的規則固定位置,另外還可同時進行拉伸與縮放物件。
自動化佈局工具是製作複雜元件的核心技巧,可隨時由物件、群組、畫框建立自動佈局,即可構建出高自由度,且能夠根據真實填充資料自動佈局的超級元件,這樣構建的元件一方面還原了真實場景下的設計效果,一方面大大減少了設計師重複性工作。
自動佈局按照常規佈局空隙規則劃分為三個屬性,分別是【元素間空隙】、【左右空隙】、【上下空隙】。調整大小包括【適應內容Hug Contents】【填充容器Fill Container】【固定寬度Fixed Width】等。
n 全域性組件管理
設計組件化的概念是從程式的開發模式中演變而來,是將介面拆分成更小部分組件使之易於管理的方式,是為【組件(Components)】。原始定義的組件是【父組件】,複製出來的組件是【子組件】。以父子關係比喻是因為,在組件邏輯中,【父組件】有變化,【子組件】們會繼承,同步變化,這絕對是在設計UI時必須要的設計內容物件管理方式。
組件(Components)是Figma在UI編排提供的進階功能,可以重複利用設計中的現有部分,從而節省了其他重複而繁瑣的工作。
n 高保真可互動原型設計
開發者對於產品一定有各式各樣的想法,並盡力讓使用者覺得產品「好用」。但開發者該如何確定目前產品設計走向能讓使用者覺得好用?
我們可以透過【可互動原型設計 Prototype】測試使用者想透過產品完成某項任務時,需經過哪些頁面的切換流程;觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。透過實際操作介面給其他人具體了解你的想法。跟工程師溝通時可以展示轉場效果細節、操作邏輯,有了實際討論的素材,工程師可以在可行性評估上做出更好的判斷。
Figma可製作高保真的互動原型,無縫完成從設計到原型演示的切換。包括【互動操控方式】、【畫面切換方式】、【動畫類型】、【滾動時固定位置】、【區域內容捲動】、【智能動畫切換】、【滑上與疊加】,均能輕鬆完成,完成最完整專業的UI設計與可互動原型。
📌Figma專業UI設計實作
📌Canva入門到進階零基礎輕鬆做設計
📌最推薦AI圖片生成工具Recraft-功能深度解析
📌Microsoft Designer AI 生成設計應用