CursosPago

Master Electron Framework And Build 5 Advanced Desktop Apps

08:13:06 Inglés Premium 30/10/2023 85 videos

Descripción del curso

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.
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
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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

Curriculum

Section 1: Module 1

  • 02 - What You Have to Know About Electron 06:05
  • 03 - Recommended Resources For Learning HTML, CSS, JS 04:19
  • 04 - What is Node JS? 02:17
  • 05 - Installing Node JS on macOS and Linux 03:25
  • 06 - Installing Node JS on Windows 04:19
  • 07 - Summary 00:20
  • 08 - Demo of Electro Editor 02:54
  • 09 - Installing Electron v5 With npm 05:47
  • 10 - Main.js And Running Electron 09:51
  • 11 - Adding our Renderer Process 05:44
  • 12 - Introduction to Photon UI Kit 04:22
  • 13 - Building Renderer With Photon Kit 13:14
  • 14 - Building Renderer With Photon Kit (Continuation) 05:09
  • 15 - Increasing and Decreasing The Font Size 05:52
  • 16 - Getting The Text Logged 05:11
  • 17 - All About Inter Process Communication (IPC) 07:26
  • 18 - Sending Data to The Main Process 08:09
  • 19 - Node Integration - Watch Out!!! 03:59
  • 20 - Writing Content to File 07:21
  • 21 - Adding The Save Dialog 13:33
  • 22 - Showing The Save Dialog First Time Only 08:00
  • 23 - Sending Data Back to The Renderer Process 06:47
  • 24 - Adding a Save Status Alert to Renderer 05:19
  • 25 - Native Menu in Electron - The Template 09:08
  • 26 - Making Menu Compatible with macOS 15:14
  • 27 - Finishing Up Our Menu 08:46
  • 28 - Adding Menu Keyboard Shortcut 07:32
  • 29 - Wrap Up With Electro Editor Desktop App 03:47
  • 30 - Demo of Electron Music Player 05:30
  • 31 - Init npm And Install Electron v5 04:59
  • 32 - Setup Main and Renderer Process 05:42
  • 33 - Building The Renderer 02:49
  • 34 - Button Click to Choose Songs 06:51
  • 35 - Get Songs and Intro to mm Package 07:53
  • 36 - Using The mm Package to Get Data From Songs 10:04
  • 37 - Displaying All Songs in Our Renderer Process 06:14
  • 38 - Playing The Song 11:46
  • 39 - Showing Current Playing Song Title 02:31
  • 40 - Making Our Play-Pause Button Work 09:38
  • 41 - The Previous And Next Song Buttons 08:24
  • 42 - Showing The Current Song Time and Total Duration 11:08
  • 43 - Let's Clear The Playlist 06:14
  • 44 - Wrap Up With Music Player 01:41
  • 45 - NEW!!! Adding Volume Control 09:23
  • 46 - NEW!!! Style Your App Challenge 04:42
  • 47 - Introduction To Tray Applications 03:25
  • 48 - Demo of Tray Player 01:52
  • 49 - Tray in The Docs and Setup 04:05
  • 50 - Adding The Tray Icon 04:06
  • 51 - Fix Disappearing Icon and Remove App Frame 04:49
  • 52 - Hide App on Blur and Remove From Dock 04:29
  • 53 - Icon And Application Bounds 13:19
  • 54 - Adding a Context Menu and Tooltip 05:54
  • 55 - We're Almost There 01:09
  • 56 - DESKTOP NOTIFICATIONS!!! - Adding notification to our App 08:51
  • 57 - Demo of Electro News App 02:20
  • 58 - npm Init and Install Electron 04:02
  • 59 - Starting The Electron Process 05:54
  • 60 - Building The Renderer Process 02:51
  • 61 - Intro and Installing NewsAPI 05:44
  • 62 - Getting Top Headlines From NewsAPI 06:33
  • 63 - Showing All News In Renderer 09:18
  • 64 - Reading Articles 04:41
  • 65 - Let's Add News Categories 09:24
  • 66 - Some Highlight to The Active Category 02:39
  • 67 - Let's Not Forget The News Search 08:57
  • 68 - Wrap Up With Electro News App 01:17
  • 69 - Demo of Electro Radio 02:04
  • 70 - Let's Setup 04:10
  • 71 - Main and Renderer Process 03:52
  • 72 - Finish Renderer and Intro to FM API 05:44
  • 73 - Getting All Radio Stations 06:51
  • 74 - Showing all Stations in the Renderer 04:23
  • 75 - Streaming The Radio Stations 05:34
  • 76 - Some Highlight to Current Station 05:25
  • 77 - Wrap Up With Electro Radio App 01:06
  • 78 - Let's Package Our Music Player 01:21
  • 79 - Requirements for Windows Operating System 01:24
  • 80 - Requirements for macOS and Linux 03:06
  • 81 - Packaging Electron Apps for Windows Operating System 12:16
  • 82 - Packaging Electron Apps for macOS 04:42
  • 83 - Packaging Electron Apps for Linux 04:30
  • 84 - Shortcuts to Make Everything Simpler 08:19
  • 85 - Electron Docs: Everything Else You Need 02:30
  • 86 - Bonus Lecture 00:51

About the Instructor

Instructor

udemy

Course

$0.00

$8.00
Que esta incluido?
  • Streaming Multiplataforma
  • Acceso de por vida
  • Soporte al cliente
  • Actualizaciones gratuitas