Master Electron Framework And Build 5 Advanced Desktop Apps
Build stunning and advanced desktop applications that matters - with web technologies you already know or heard of (HTML, CSS and Javascript). Desktop applications is a billion dollar business and it's only going to keep on growing as companies like WhatsApp, Skype, Adobe, Microsoft, GitHub among other top companies are still pushing a lot into desktop application development. The only down side is that, there are fewer desktop developers than web developers and that is where you come in.
More
Now is the best time for you to learn desktop application development and put yourself at the forefront of this billion dollar industry.
Whether you want to get a job as a desktop application developer or build the next billion dollar desktop application that matters. Whether you’re an advanced web developer or you’re now starting out.
Now is your best time to enroll in this electron course and learn everything you need, from setup to building traditional desktop applications, all the way to building system tray applications and even packaging and distributing your desktop apps on all operating systems including windows, macOS and linux.
What you’ll build in this course
A Fully Fledged Text Editor: We're going to cover the moving parts of an electron application by building this very first app. We’ll cover concepts like main and renderer process, Inter process communication (IPC), Dialogs among others, which should get you familiar with how electron apps are built.
A Complex Music Player: We will take things a step further by building a complex music player which has playlist, can pause, play next, play previous etc.
A System Tray Music Player: We will then convert our music player from a traditional desktop application to a system tray app. At the end, we should be able to start and stop our music player from the system tray.
A Top Headlines News Reader: We will then have some fun with a news reader application which also has the complexity of multiple categories and article search. We will learn how to launch multiple “pages” in our app.
A Radio Streaming App: I can now stream my favourite radio stations with this app almost every time I code. We’ll build this radio streaming app from scratch, which you can also use.
Packaging: We will package and distribute the music player app we built in this course for windows, macOS and Linux. After this section, you should know how to package and distribute your application for all operating systems.
We’re Going To Cover Topics Like:
Setting up your PC for building electron apps
Packaging and distributing your electron applications for all operating systems
Designing stunning and native interface for your desktop apps
Creating traditional desktop applications
Creating desktop applications that run in the system tray
Building applications with multiple “pages”
The history behind electron and what it's all about
Using the electron documentation
After Taking This Course You Should Be Able to:
Design and Build electron applications that matters.
Package and distribute your electron application for windows, linux and macOS
Secure an electron desktop application developer position
Use the electron documentation for any desktop app feature that isn’t covered in this course
This is a hands-on practical electron course that get's you up to speed with building cross platform native desktop applications with web technologies you're already familiar with. Learn everything you need to become a master electron desktop application developer
Watch Online Master Electron Framework And Build 5 Advanced Desktop Apps
| # | Title | Duration |
|---|---|---|
| 1 | What You Have to Know About Electron | 06:05 |
| 2 | Recommended Resources For Learning HTML, CSS, JS | 04:19 |
| 3 | What is Node JS? | 02:17 |
| 4 | Installing Node JS on macOS and Linux | 03:25 |
| 5 | Installing Node JS on Windows | 04:19 |
| 6 | Summary | 00:20 |
| 7 | Demo of Electro Editor | 02:54 |
| 8 | Installing Electron v5 With npm | 05:47 |
| 9 | Main.js And Running Electron | 09:51 |
| 10 | Adding our Renderer Process | 05:44 |
| 11 | Introduction to Photon UI Kit | 04:22 |
| 12 | Building Renderer With Photon Kit | 13:14 |
| 13 | Building Renderer With Photon Kit (Continuation) | 05:09 |
| 14 | Increasing and Decreasing The Font Size | 05:52 |
| 15 | Getting The Text Logged | 05:11 |
| 16 | All About Inter Process Communication (IPC) | 07:26 |
| 17 | Sending Data to The Main Process | 08:09 |
| 18 | Node Integration - Watch Out!!! | 03:59 |
| 19 | Writing Content to File | 07:21 |
| 20 | Adding The Save Dialog | 13:33 |
| 21 | Showing The Save Dialog First Time Only | 08:00 |
| 22 | Sending Data Back to The Renderer Process | 06:47 |
| 23 | Adding a Save Status Alert to Renderer | 05:19 |
| 24 | Native Menu in Electron - The Template | 09:08 |
| 25 | Making Menu Compatible with macOS | 15:14 |
| 26 | Finishing Up Our Menu | 08:46 |
| 27 | Adding Menu Keyboard Shortcut | 07:32 |
| 28 | Wrap Up With Electro Editor Desktop App | 03:47 |
| 29 | Demo of Electron Music Player | 05:30 |
| 30 | Init npm And Install Electron v5 | 04:59 |
| 31 | Setup Main and Renderer Process | 05:42 |
| 32 | Building The Renderer | 02:49 |
| 33 | Button Click to Choose Songs | 06:51 |
| 34 | Get Songs and Intro to mm Package | 07:53 |
| 35 | Using The mm Package to Get Data From Songs | 10:04 |
| 36 | Displaying All Songs in Our Renderer Process | 06:14 |
| 37 | Playing The Song | 11:46 |
| 38 | Showing Current Playing Song Title | 02:31 |
| 39 | Making Our Play-Pause Button Work | 09:38 |
| 40 | The Previous And Next Song Buttons | 08:24 |
| 41 | Showing The Current Song Time and Total Duration | 11:08 |
| 42 | Let's Clear The Playlist | 06:14 |
| 43 | Wrap Up With Music Player | 01:41 |
| 44 | NEW!!! Adding Volume Control | 09:23 |
| 45 | NEW!!! Style Your App Challenge | 04:42 |
| 46 | Introduction To Tray Applications | 03:25 |
| 47 | Demo of Tray Player | 01:52 |
| 48 | Tray in The Docs and Setup | 04:05 |
| 49 | Adding The Tray Icon | 04:06 |
| 50 | Fix Disappearing Icon and Remove App Frame | 04:49 |
| 51 | Hide App on Blur and Remove From Dock | 04:29 |
| 52 | Icon And Application Bounds | 13:19 |
| 53 | Adding a Context Menu and Tooltip | 05:54 |
| 54 | We're Almost There | 01:09 |
| 55 | DESKTOP NOTIFICATIONS!!! - Adding notification to our App | 08:51 |
| 56 | Demo of Electro News App | 02:20 |
| 57 | npm Init and Install Electron | 04:02 |
| 58 | Starting The Electron Process | 05:54 |
| 59 | Building The Renderer Process | 02:51 |
| 60 | Intro and Installing NewsAPI | 05:44 |
| 61 | Getting Top Headlines From NewsAPI | 06:33 |
| 62 | Showing All News In Renderer | 09:18 |
| 63 | Reading Articles | 04:41 |
| 64 | Let's Add News Categories | 09:24 |
| 65 | Some Highlight to The Active Category | 02:39 |
| 66 | Let's Not Forget The News Search | 08:57 |
| 67 | Wrap Up With Electro News App | 01:17 |
| 68 | Demo of Electro Radio | 02:04 |
| 69 | Let's Setup | 04:10 |
| 70 | Main and Renderer Process | 03:52 |
| 71 | Finish Renderer and Intro to FM API | 05:44 |
| 72 | Getting All Radio Stations | 06:51 |
| 73 | Showing all Stations in the Renderer | 04:23 |
| 74 | Streaming The Radio Stations | 05:34 |
| 75 | Some Highlight to Current Station | 05:25 |
| 76 | Wrap Up With Electro Radio App | 01:06 |
| 77 | Let's Package Our Music Player | 01:21 |
| 78 | Requirements for Windows Operating System | 01:24 |
| 79 | Requirements for macOS and Linux | 03:06 |
| 80 | Packaging Electron Apps for Windows Operating System | 12:16 |
| 81 | Packaging Electron Apps for macOS | 04:42 |
| 82 | Packaging Electron Apps for Linux | 04:30 |
| 83 | Shortcuts to Make Everything Simpler | 08:19 |
| 84 | Electron Docs: Everything Else You Need | 02:30 |
| 85 | Bonus Lecture | 00:51 |
Similar courses to Master Electron Framework And Build 5 Advanced Desktop Apps
Desktop apps with Angular, Firestore and Electron
