Share Description
In this course, you will learn :
- How to easily build native desktop applications with HTML, CSS and Javascript.
- Build cross platform desktop applications from scratch.
- How to package and distribute electron desktop applications for macOS, windows and linux.
- How to give your desktop applications a native feel across all operating systems.
- How to build stunning desktop app Interface with Photon Kit.
- How to use the electron documentation when building desktops apps.
- How to go about adding any extra feature you want to a desktop application using Electron.
- How the electron framework works.
Syllabus :
Project 1: Electro Editor
- Installing Electron v5 With npm
- Main.js And Running Electron
- Adding our Renderer Process
- Introduction to Photon UI Kit
- Building Renderer With Photon Kit
- Building Renderer With Photon Kit (Continuation)
- Increasing and Decreasing The Font Size
- Getting The Text Logged
- All About Inter Process Communication (IPC)
- Sending Data to The Main Process
- Node Integration - Watch Out!!!
- Writing Content to File
- Adding The Save Dialog
- Showing The Save Dialog First Time Only
- Sending Data Back to The Renderer Process
- Adding a Save Status Alert to Renderer
- Native Menu in Electron - The Template
- Making Menu Compatible with macOS
- Finishing Up Our Menu
- Adding Menu Keyboard Shortcut
Project 2: Music Player
- Init npm And Install Electron v5
- Setup Main and Renderer Process
- Building The Renderer
- Button Click to Choose Songs
- Get Songs and Intro to mm Package
- Using The mm Package to Get Data From Songs
- Displaying All Songs in Our Renderer Process
- Playing The Song
- Showing Current Playing Song Title
- Making Our Play-Pause Button Work
- The Previous And Next Song Buttons
- Showing The Current Song Time and Total Duration
- Let's Clear The Playlist
- Wrap Up With Music Player
- NEW!!! Adding Volume Control
- NEW!!! Style Your App Challenge
Project 3: Tray Player
- Introduction To Tray Applications
- Demo of Tray Player
- Tray in The Docs and Setup
- Adding The Tray Icon
- Fix Disappearing Icon and Remove App Frame
- Hide App on Blur and Remove From Dock
- Icon And Application Bounds
- Adding a Context Menu and Tooltip
Project 4: Electro News
- npm Init and Install Electron
- Starting The Electron Process
- Building The Renderer Process
- Intro and Installing NewsAPI
- Getting Top Headlines From NewsAPI
- Showing All News In Renderer
- Reading Articles
- Let's Add News Categories
- Some Highlight to The Active Category
- Let's Not Forget The News Search
Project 5: Electro Radio
- Main and Renderer Process
- Finish Renderer and Intro to FM API
- Getting All Radio Stations
- Showing all Stations in the Renderer
- Streaming The Radio Stations
- Some Highlight to Current Station
- Wrap Up With Electro Radio App
Packaging Electron Apps
- Requirements for Windows Operating System
- Requirements for macOS and Linux
- Packaging Electron Apps for Windows Operating System
- Packaging Electron Apps for macOS
- Packaging Electron Apps for Linux
- Shortcuts to Make Everything Simpler
