Course info
Aug 22, 2016
1h 50m

Previously, creating an desktop application may have been hard or would use some foreign technology. Now, using Electron, it is easy, straightforward, and fun. In this course, Electron Fundamentals, you're going to learn all about Electron and how it can help you create desktop applications, using the web tech skills you already possess. First, you'll going to learn all about the features and the APIs Electron offers and see how you can make them work for you. Next, you'll bring everything you know and have learned together by creating a project that you can turn into a compelling desktop application. Finally, you'll learn how to package up what you've made and share it with others. By the end of this course, you'll feel comfortable starting your own Electron project and using its features to bring your ideas to life.

About the author
About the author

He's a creator at heart, making art, music and software. He's been privileged to work with talented teams and contribute to great causes and useful products and hopes to do more of it.

More from the author
Styling React Components
1h 23m
Mar 13, 2019
Flowtype Fundamentals
1h 45m
Jun 29, 2018
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Welcome to this course on Electron Fundamentals. I'm Jake Trent, and I'm super excited that you're here. This course will be a fantastic start as you investigate and acquire skills in this new tool, Electron. You'll get a clear picture of what Electron is as a platform for using web tech to create native desktop applications. You'll have some quick wins by trying out Electron for yourself in a simple project. We'll have a look at many highlight features and APIs that Electron offers, and see how they can work for us. We'll bring it all together in an interesting project that combines what we've learned, to create a compelling desktop application. And finally, we'll learn how to package up what we've made to share with others. By the end of this course, you'll feel comfortable starting a new Electron project, and will have experiences with some of the main features so that you can bring your own ideas to life. So come on, let's learn more about this together. It's going to be awesome.

Learn About Electron
Welcome to this introduction on Electron. I'm so happy you're here, and I hope you're ready to have fun learning with me. At the end, I hope there's a great tool in your pocket for creating desktop applications. It's going to be a good time, and you're going to learn a lot. Let's get started. Electron is a technology made by GitHub. It's now open source as well, so there are hundreds of other contributors. Previously it was called Atom Shell. Today it is a great option for using web technologies such as HTML, CSS, and JavaScript, to create native desktop applications. In order to get this job done, Electron is the melding of two great technologies into a new, interesting combination. It bundles the Chromium content module for UI display, this is the open source part of Chrome, and it bundles Node. js and its via JavaScript runtime. When building with Electron, the output is a native binary that uses these two tools internally and runs just like another native application. Electron allows you to create applications that run on Mac, Windows, and Linux platforms.

Experiment with Native APIs
Now that first taste of Electron was pretty good, right? These next bits will be even better, because we're going to take a look at what makes Electron uniquely special. These are the desktop APIs that this platform allows us to use. We're going to take a look at each in turn, and see how we might use it to our creative benefit. Let's have a look. We're going to create five quick projects where we can try out some Electron APIs in turn. Each of these projects will be standalone. A couple of the later projects will reuse some knowledge gained about particular APIs in earlier projects. First we'll try out the application menu. Next, we'll place our app in the system tray of the OS. Next, we'll demonstrate our ability to access the system clipboard programmatically. Next, we'll take a screenshot from the desktop. Finally, we'll demonstrate the ability for Electron to use other binaries on the host machine.

Make an Electron App
At this point, we've had good exposure to a wide range of Electron APIs. They've all been fun, they've all been pretty good, and in turn we've seen the flavor of each, but now we're going to take them and combine them into something new and interesting that we might actually want to download and install this new project on our computer later. Let's try it out and see. Our project is a photo booth app. It will utilize the web cam on our computer to show us a live feed of the camera subject. We'll also be able to capture a snapshot and store them in the filesystem. We'll be able to add live filters to our image to show different image effects. There will be a nice countdown to help us prep our cheese. We'll be able to browse recent pics and jump to them on the filesystem. We should be able to use the strengths of the Electron platform and API to make a fun project to work through together.

Package Native Apps
Now we've done the work to build out our entire photobombth application. Now we want to share it. We want to package it up and send it off for mom to use at home. We want to go through those last few steps that will get it ready for others to use. We want to share it, so let's do it. Let's create an icon for our application. I'm a succor for logos, so this part is quite fun for me. You're free to produce your own logo here. I have one produced already that's in the course material. If you make your own, make sure that it's at least 512 x 512 pixels square. This is the largest size that will be eventually exported. I started with a 1200-pixel square composition in Affinity Designer, which is similar to Adobe Illustrator. I'd recommend you use your own favorite vector art program, if you're making your own logo. When you're happy with your creation, we need to export a png file. We're going to upload that png file to a site called iconverticons. com/online. This tool will help us easily convert this png to a couple of other formats that different platforms expect for their icons. As long as we use the online tool, this is free. You can also export your own if you have the means, this is just easier. Mac uses the. icns file, Windows uses the. ico file, and Linux will use the. png. We'll export each one of these we need, and place each file in the root of our project.