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.
Creative and imaginative to the core, Jake loves software as a medium for malleable creation. It has been his great privilege to create software with talented teams for worthy causes. At the speed of technology, he has been happy to be always learning.
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.
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.