Learn Electron in Less than 60 Minutes - Free Beginner's Course
HTML-код
- Опубликовано: 29 ноя 2017
- Course Page: goo.gl/NiWDq7 (Written version + Project files)
coursetro.com for more.
SUBSCRIBE if you enjoy this!
In this 59 minute course, you're going to learn the basics of the Electron framework. Electron gives you the ability to create native desktop applications using HTML, CSS and Javascript. These apps work on Windows, Mac and Linux.
We will create a Bitcoin price alert app that will allow a user to set a price in order to receive a native desktop notification if the current price of Bitcoin exceeds the specified amount.
You're going to learn a lot in the next 59 minutes!
What you will learn
- Installing Electron
- Working with Electron Menus
- Integrating an HTTP Library for making API Calls
- Communicating between multiple windows with IPC
- Accessing Native Desktop Functionality
- Styling a Electron App
- Deploying your Electron App
Requirements
- Nodejs (Free!)
- Code Editor (Visual Studio Code is Free!)
- A keen willingness to become an awesome developer
/ coursetro
coursetro.com
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi! 
Хобби
Coming soon: Electron + Angular 5 / Electron + Vue.js. -- and intermediate Electron tutorials.
Hey Sorry For my comment , i realize that my timezone is further so im really sorry
No problem, yeah, it's 11 AM here. ;)
thanks for your reply i thought i was rude little bit...
so thank you for the electron .... i am amze to learn more about electron.....
Hey, I am stuck with routing issues with bootstrap 4 and angular5+ electron. It goes freeze for normal route link, not sure what i am doing wrong. I would be happy if you address elements such as navbar, menu and routing on your videos so i can rectify my mistake. Thanks, I am your new subscriber.
Hey , Im trying to do notification but its not working , not showing there not any error in console log and also the btn click is working properly but the notification is not showing on the screen i also followed the written tutorial but it same as early what to do? any suggestions please!
Let me just say that this is the most impressive audio and visuals I have seen in a tutorial. Fantastic work!
Amazing.. I have been meaning to try Electron for more than a year now, and You tutorial has started the fire.. Thanks for laying it all out and answering so many of my question right in the video!! Kudos!!
You made a very nice course, extremely clean, understandable, and very well recorded/ edited.
It was the best beginer course i have ever seen. Thank you gary !!
Great videos! For me the best video-tutor until now, clear voice, excellent content and secondary resources! Many thanks from my side :)
I am writing a custom inventory management and control application for personal use and was banging my head against the desk over the IPC stuff in Electron. I'm a developer of 30+ years and I'm also learning Electron for the first time. This tutorial explained perfectly on how to go about sending those IPC message events back and forth. I just wanted to send you a huge Thank You! I'm now a subscriber and look forward to your courses.
Simply awesome. Gives me a good start with Electron. Thank You.
Thanks for the free, well produced, articulate and informative tutorial. I learned alot.
that was the best tutorial i have seen in months ..it helped so much thank you so much,its great
Short and Excellent. That's what I called a "GREAT TUTORIAL".
Nice montage. No 'emm..', no 'aaa'. Everything is *clean* and *understandable.*
I just love you. Thanks for your work. *Thumbs up from Gogol.*
noice feed back no read more usage !
SIKE!
Found the IPC thing really helpful. Great Work
Thanks Gary! I've been anticipating this video all week!
Awesome!
Very great & concise course, thank you for putting it together and making it available for free!
Awesome high-quality tutorial. Thanks man!
Thank you for sharing your knowledge. Your tutorial is very well built, easy to follow and put into action. Great stuff!!
A bit late to the party here, but this is honestly the best tutorial on Electron I've come across to date.
Thank you very much for the tutorial! It was awesome and helped me to understand a bit more electron :)
loved it! Thank you!!! Tutorial about an app for people communicating, chatting?
interrupt info in this video is cool, great idea 👍
Great tutorial! Thanks for sharing, helped a lot.
Those who're wondering why @35:13 the button is not working, below is the solution:
*Just change*
let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200,
})
*this to*
let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
*After doing the above changes inside index.js file you will find that the close window button is working.*
Thank you so much!!
How to make it like these desktop apps?:
- many Steam Game Launchers have a complete own window appearance, like a custom outer form (f. ex. Paladins shows its logo outside the app) (think Google has a image of the launcher)
Really good explained video! Thanks for that!
Great tutorial!!! Clean and easy. Subscribed right away
Thanks for this. Great tutorial !
OMG this.. is everything i have ever wanted in app development. how had i not heard of this before? if it could run on Powershell code, or .net it would be a dream come true.
You deserve more subs sir, super useful!
This Video is awesome. Thank you Gary!
Waao.... Great one. Saved my life. Thank You :)
Thumbs up Gary! Awesome video!
Thanks Gary! Awesome videos! can you please make a video of how to deploy with gulp?
Great tutorial even after 5 years ❤
Awesome stuff Gary thanks for contributing
This is soo cool, and explained by the best ♥...
Amazing Tutorial. Thanks a lot!
Excellent, thanks!
Got an idea of Electron. THANKS! ;-)
Explain delightfully
Great video! Thanks a lot!
omg, an amazing channel!!
Well done Gary
Respect from EGYPT
Thanks a lot for great tutorials.
very excellent. I learn much from this video
great videos, love the camera, graphics, sound all :)
Awesome, thanks.
Loved your video.
Hi Gary, I think it is better to use require in the main.js file as less as possible... using string interpolation improves performance.
Legit.. with a little tweak,it's working 100% in 2019.
Awesome, loved it!
Thanks!
Hey Gary! Your tutorials are just awesome.
Thanks, means a lot!
Waiting for you Django beginner, intermediate and advance video series.
Very interesting and useful video, thank you :-)
Hey Gary,
A little tip for Visual Studio Code: if you want to quickly create an HTML document layout, simply create the new HTML file and type *"!"* (without quotes) on the first line, followed by pressing the *TAB* key on the keyboard. It will automatically build out a basic HTML structure for you.
Great tip Thank You
good tutorial.. and for me very easly to about first time learning electron js
Awesome job
great video, thanks a lot, (tremendo video, muchas gracias)!!
For enabling *Close Window* in the second window, we need to enable nodeIntegration as it is false by default. Otherwise you get the error: *Uncaught ReferenceError: require is not defined*.
Also, for the latest crypto-compare API, you need to write *res.data.USD* instead of *res.data.BTC.USD*.
how and where nodeIntegration is enabled?
Thanks for pointing that out, saved me time
@@asadullah8640 in the index.html file
const modalPath = path.join('file://', __dirname, 'add.html')
let win = new BrowserWindow({frame: false, transparent: true, alwaysOnTop: true, width:400, height:200, webPreferences: {
nodeIntegration: true
}})
@@sajanmathew7192 Thank you Sajan! It worked. It's in the index.js file,.
Great stuff. I enjoyed your tutorial.
Thanks!
Thank you for this video
Garry, thank you. I am new to Electron and Web in general but experienced in native. I was wondering if you could give some advice. I want to wrap code written in C# into some kind of web wrapper. The wrapper will have to talk to some web service and communicate information (uploads/downloads/changes etc) back to a web or native app. Is Electron built for that and what other technologies are required for something like this?
this is awesome!
hello , Thank you , i am from Colombia very big you helps
Your teaching style is awesome. I like it. waiting for Electron + Angular 5 / Electron + Vue.js tutorial.
I will cover Vue for sure.
Awesome video 👌👍
Just a query... How to pass multiple values through ipc. I mean if i have a form with multiple fields.
Thanks for the great tutorials!
Correct me if I’m wrong, but after reading the quick-start guide on electronjs I thought that MainProcess has to manage all the windows of an app. Does this mean you shouldn’t have created the “add” window in index.js but rather call main.js?
I am only around half-way through the tutorial and wondered the same thing! I'm not sure for the reason why you would want index.js to know anything about add.html... but I am currently just as confused as to why it was called 'add' in the first place. So far, the 'notify' button opens an 'add' window (that doesn't 'add' [yet!]), which is created in 'index'.
I have been watching your videos about electron. They are perfect. Well done.
I have quick question though. I am trying have a small webcam window on the top of the main window. Cam window will stay always on top of main window and can be moved around within the main window. cam window cannot be resized...etc. Where I struggle is to keep the webcam window within the main window.
Could you please help me about it?
Thank you,
Sir, kindly make react and electron videos, it helps us a lot in practical and professional experience as well.
Best content thanks
you are God sent
Hey, thanks for awesome video. I tried this with existing Angular 6 application and I'm getting this error
"Not allowed to load local resource: ". please help me.
Thanks a lot
Gary what framework do you prefer between react and Vuejs?
Nice tutorial. All worked for me except the final build. The packaged app is no longer is able to get the bitcoin price. Any suggestions? Thanks!
Thank u for this video
Welcome!
It's easy to pick when you teach 😊
Pick what?
DesignCourse 😂 The Concepts of Electron
you can toggle your terminal with ctrl+~
also, you can make a new terminal with ctrl+shift+~
At first I was shocked at how low the BTC price was. Then I saw the date this video was uploaded at.
Hey do you know if its possible in electron programming, for it to bring up a window if a mouse cursor is moved towards the edge of monitor?? ie.. similar to Windows "autohide" on the taskbars. Or do you need to use C++ to implement such a feature?
If you have Menu error: ReferenceError: Menu is not defined, do the following:
Add:
const { Menu } = require('electron')
Paste this above the line that states:
var menu = Menu.buildFromTemplate([
Now your menu will work!
Hey Gray i might have asked late but would you please make an electron and vue js tutorial basically setup using vue cli 3 or whatever you can please, but the boilerplate has given me a lot of headache
Hello!
Is it possible to develop an application that will run first a POST command with a header and a body, and then afterwards use the data from here to run a GET command where the previous data is put into the header?
Thank you so much everyone
Thank you
Hey,
I've made a custom HTML/CSS Title Bar - setting the frame to false (frame-less)... the problem is this hides the menu bar (File, Edit etc.) Is there any way to keep the menu bar with the app in frame-less mode?
Thanks,
SImon
Thanks for sharing this video. Do you have a link to the CSS files somewhere that you use around 26:00 in the video?
THANK YPOU SO MAUCH , AWEASOM tutorial!
Thanks!
Loved this tuto ^^, thanks for helping me do my first desktop app! ^^, but I was waiting something to not have the console opened everytime the app opens :/.
Either comment out or delete the line that says "win.webContents.openDevTools()" in main.js! Sorry - 2 years too late I know!
Great tutorial Simon. There were no ";" in 2017?
still no ; in 2020
Superb
Sorry if you already answered this, but does the exe need to be distributed with all those hundreds of dlls (t=58:19)?
Hello, this video was excellent. But I have a terrible problem... I need to list the printers installed in the opertation system, I saw in Electron Documentation the method "contents.getPrinters()", but I don't know how to implement it... I'm a beginner, could you give me a clue please. Thanks. (Sorry my English, I'm from Peru).
If anyone is getting a win not defined error, it's because of the new quick start code uses MainWindow not win so in your Main.js change the ipc to :
ipc.on('update-notify-value', function(event,arg){
mainWindow.webContents.send('targetPriceVal', arg)
})
Thank you!
Can I find a place with the full source code? While typing I made a mistake somewhere and the add window doesn't show up anymore :(
Any recommendation about connect Electron with python, and make a exe softwares?
Just be curious, What markdown editor did you use for "ELECTRON API DEMOS" at 2:12 ? it seems better than Typora.
Great toturial. I also had hard time with formatting once; here is what I got! in settings (Set default Tab to Space and adjust 4 or 2 spaces config) and install marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode and press Alt+Shift+F and vola :-)
Do you have a Tutorial 'Create a web browser with Electron' , using browserView , webcontent (not webview) ?
Thanks
so, if the target price is less than current price of btc, will the notification fire in every 30 seconds?
Thank you Gary, @ 31:00 -> I got, "Uncaught ReferenceError: require is not defined" and I did not get the index box!!! Any idea how to solve this?
Hello +DesignCourse, great introductory course.! I was trying to make the notifications work on my windows 10 machine and it doesn't seem to work, when I used the new Notification syntax exactly as you showed. Any suggestions on it would be great.
t didn't work for me either. I added package "node-notifier" and called it like this in the function getBTC()
if (targetPrice.innerHTML != '' && targetPriceVal < cryptos) {
notifier.notify({
title: 'BTC Alert',
message: 'BTC just beat your target price!',
icon: path.join(__dirname, '../assets/icons/btc.ico'),
sound: true,
wait: false
})
}
This works but I still have to change the logic such that a notification is only sent once
Thanks man. Appreciate it!
Hello! I followed the steps in the video but the one thing that won't work is the icon load. The packager uses the default one despite having a different icon in the path.
Great Video... setup worked nicely on my Mac. However, at 14:38, I am unable to get a menu to show on my MacBook. I'm reading the documentation on Menus but it's not solving my issues. I'd love an updated video and Mac support!
and any help to create a menu. Thanks!
This works on my MacBook:
// Mac App menu - used for styling so shortcuts work
if (process.platform === 'darwin') {
// Create our menu entries so that we can use MAC shortcuts
const template = [
{
label: 'File', submenu: [
{ role: 'quit' },
],
},
{
label: 'Edit', submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ role: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
{ role: 'pasteandmatchstyle' },
{ role: 'delete' },
{ role: 'selectall' },
],
},
{
label: 'Help', submenu: [
{ role: 'reload' },
{ role: 'toggleFullScreen' },
{ role: 'toggleDevTools' },
],
},
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}
Actually on Mac the menu is not on the window itself but on the top of desktop.