使用 Electron 開發桌面應用程式:完整的開發人員指南

Soft & Share

Udemy 在 Web 前端開發課程熱門講師 Stephen Grider 的最新課程,Electron 是由 Github 開發的開源框架,它允許使用 HTML/Javascript/CSS 開發同時支援 Linux/Windows/Mac 的桌面應用程式,當下許多知名桌面應用程式如 Atom,Slack 都是基於 Electron 所開發,透過這堂課,你將會跟隨著 Stephen 使用 Web 開發技術建立 4 個桌面應用程式,讓你的技術不再侷限於瀏覽器,增加不同的視野。

我會學到些什麼呢?

  • 學習如何使用 Web 開發技術製作像是原生( native )的應用程式
  • 使用 Electron JS 掌握開發的複雜性
  • 使用單一的程式碼基底( codebase ) 開發出在 MacOS 和 Windows 上運行良好的應用程式
  • 開發傳統的單一視窗應用程式和系統列( tray-based) 的應用程式
  • 了解如何將 React 和 Redux 等現有技術整合到 Electron JS 應用程式中
  • 使用桌面應用程式建立可獲利的業務,因為市場競爭激烈 ( 譯註 : 多支援一種平台等於多增取一些用戶)

需求

說明

將你的網頁開發技能從瀏覽器中走出來!本課程將教你製作第一大暢銷桌面應用程式所需的技術主題。


什麼是 Electron?

Electron 是使用你已經知道的現有網頁開發技術(例如 HTML,CSS 和 JavaScript)編寫基於桌面應用程式的優雅解決方案。Electron 已被 AtomSlack 和 Discord 等非常流行的應用程式所採用。

誰建構桌面應用程式?

在過去十年中,從桌面到手機都有巨大的轉變,但是結果是,創建桌面應用程式的機會很大,因為所有其他開發人員已經轉移到建構手機設備上了!,你可以使用花幾天時間建構的應用程式輕鬆地進入 MacOS 商店的首頁 – 這不會在手機設備上發生!你將在本課程中建構的最後一個應用程式可以輕鬆調整後就連到一個首頁的應用程式。

你會建立什麼?

我所有的課程都是“做中學”:沒有無聊的無終止講座與 Powerpoint,只有當場,互動程式設計的範例。在這個課程中,我們將構建四個單獨的應用程式,其複雜程度越來越高,每個應用程式都將配置 Electron 的不同功能。透過將每個概念都放入真實的應用程式中,你將更好地了解何時使用每個獨特而強大的功能。

MacOS 和 Windows 兩個平台都支援!


你將要建立的應用程式

  • 視訊檔案分析器。學習如何使用第一個應用程式操作作業系統的底層,你將在其中建構一個分析視訊檔案的工具,由 FFMPEG CLI 工具支援。此應用程式將讓您熟悉 Electron,以及理解如何建構基本應用程式。
  • 穿越窗戶待辦事項:好的,一個待辦事項應用程式,我知道,但是你會學習如何使用 Electron 操作多個視窗,以及客製化頂端的選單( menu bar )。更多的重點放在 MacOS 和 Windows 之間的跨平台體驗。
  • 系統列定時器。建構一個經典的基於系統列( system-tray )的應用程式 – 這是以桌面上的時鐘作為圖示存在的應用程式類型。你將學習如何為普通的 Electron 應用程式添加許多的優雅介面,這將使你的用戶認為他們使用完全原生應用程式的體驗。
  • 視訊檔案轉換器。製作一個可以將視訊檔案轉換為任何其他格式的應用程式。具有完全相同功能的現有應用程式在 MacOS 商店中售價為10美元。這個工具是非常有用的,是我每天自己使用的工具!

這是我們將要學習的:

  • 學習 Electron 背後的理論和歷史
  • 使用可重複的流程建構複雜的桌面應用程式
  • 組合經典的桌面應用程式和常駐系統工具列 ( tray-based )應用程式
  • 打磨你的 Electron 應用程式介面,使它們感覺更像原生程式
  • 迴避與 Electron 有關的常見陷阱

我已經建立了當時我在學習 Electron 時我想要的課程。一個課程,以最佳順序解釋概念及其實現方式,讓你學習和深入了解他們。

目標受眾

  • 任何誰想要創建引人注目的原生桌面應用程式的人

講師介紹

Stephen Grider一直為舊金山灣區的頂級公司構建複雜的 JavaScript 前端應用程式。他具有簡化複雜主題的天賦,Stephen…

View original post 31 more words

Advertisements

Published by

Engineer IP Dev Crash Browser

Dad #engineering automatic 🚀🚀🚀🚀🚀🚀🚀🚀🇲🇦 https://www.freecodecamp.org/barkinet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s