Learn Electron in Less than 60 Minutes - Free Beginner's Course
Вставка
- Опубліковано 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!
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!
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 !!
Let me just say that this is the most impressive audio and visuals I have seen in a tutorial. Fantastic work!
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.
Great videos! For me the best video-tutor until now, clear voice, excellent content and secondary resources! Many thanks from my side :)
Thanks Gary! I've been anticipating this video all week!
Awesome!
Simply awesome. Gives me a good start with Electron. Thank You.
that was the best tutorial i have seen in months ..it helped so much thank you so much,its great
Awesome high-quality tutorial. Thanks man!
Thank you very much for the tutorial! It was awesome and helped me to understand a bit more electron :)
Thanks for the free, well produced, articulate and informative tutorial. I learned alot.
Found the IPC thing really helpful. Great Work
Thank you for sharing your knowledge. Your tutorial is very well built, easy to follow and put into action. Great stuff!!
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!!
Great tutorial!!! Clean and easy. Subscribed right away
Very great & concise course, thank you for putting it together and making it available for free!
Great tutorial! Thanks for sharing, helped a lot.
A bit late to the party here, but this is honestly the best tutorial on Electron I've come across to date.
Thanks for this. Great tutorial !
loved it! Thank you!!! Tutorial about an app for people communicating, chatting?
Thumbs up Gary! Awesome video!
This Video is awesome. Thank you Gary!
interrupt info in this video is cool, great idea 👍
Awesome stuff Gary thanks for contributing
Excellent, thanks!
You deserve more subs sir, super useful!
Great video! Thanks a lot!
Thanks Gary! Awesome videos! can you please make a video of how to deploy with gulp?
Amazing Tutorial. Thanks a lot!
great videos, love the camera, graphics, sound all :)
Awesome, thanks.
Waao.... Great one. Saved my life. Thank You :)
Thanks a lot for great tutorials.
Great tutorial even after 5 years ❤
omg, an amazing channel!!
Loved your video.
this is awesome!
This is soo cool, and explained by the best ♥...
Awesome, loved it!
Thanks!
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.
Got an idea of Electron. THANKS! ;-)
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,.
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!
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?
Gary what framework do you prefer between react and Vuejs?
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
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
great video, thanks a lot, (tremendo video, muchas gracias)!!
Well done Gary
Very interesting and useful video, thank you :-)
Explain delightfully
Thank you for this video
Awesome job
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?
very excellent. I learn much from this video
Hey Gary! Your tutorials are just awesome.
Thanks, means a lot!
Waiting for you Django beginner, intermediate and advance video series.
Thanks for sharing this video. Do you have a link to the CSS files somewhere that you use around 26:00 in the video?
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 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'.
how can create an app config file to change the configuration after build
Sorry if you already answered this, but does the exe need to be distributed with all those hundreds of dlls (t=58:19)?
Great stuff. I enjoyed your tutorial.
Thanks!
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 :(
Just be curious, What markdown editor did you use for "ELECTRON API DEMOS" at 2:12 ? it seems better than Typora.
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!
good tutorial.. and for me very easly to about first time learning electron js
Thanks a lot
Best content thanks
hello , Thank you , i am from Colombia very big you helps
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
Respect from EGYPT
Legit.. with a little tweak,it's working 100% in 2019.
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!
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
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!
for anyone who cannot open or close the add window: in index.js change
let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200,
})
to
let win = new BrowserWindow({
frame: false,
alwaysOnTop: true,
width: 400,
height: 200,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
and in main.js change the new "function createWindow()" to this:
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
})
win.loadFile("src/index.html")
in Electron Version "12.0.7" you need this.
Thank you!
thanks!!!
At first I was shocked at how low the BTC price was. Then I saw the date this video was uploaded at.
THANK YPOU SO MAUCH , AWEASOM tutorial!
Thanks!
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.
Thank u for this video
Welcome!
Thank you
you are God sent
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?
Any recommendation about connect Electron with python, and make a exe softwares?
Your teaching style is awesome. I like it. waiting for Electron + Angular 5 / Electron + Vue.js tutorial.
I will cover Vue for sure.
I am sending a mongoose record after lean(converts mongoose object to simple json object) through ipc in electron js. But, on other side (javascript / html side), I am getting _id as object not as string of ObjectId. Can anyone help me regarding the issue?
Hi Gary, I think it is better to use require in the main.js file as less as possible... using string interpolation improves performance.
so, if the target price is less than current price of btc, will the notification fire in every 30 seconds?
stuck at npm install && npm start, cli isn't showing anything, no response, nothing.
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,
For some reason the window.close() is not being called. But it seems like the script file is not running at all. Tried putting the script inside the add.html but it also didn't work at all, like it is being ignored. Anyone had this problem already can give me some pointers?
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!
!!! When i try to make the "notify me.." window transparent, it shows up cropped!!!What might be the issue? guys please help, thanks in advance.
Does anyone had problems deploying the app?
I'm getting this error below even though having the icon.ico file located in the same path as shown in the video:
Packaging app for platform win32 ia32 using electron v2.0.9
rcedit.exe failed with exit code 1. Reserved header is not 0 or image type is not icon for 'a'
Fatal error: Unable to set icon
My package-win script is as follows:
"package-win": "electron-packager . crypto-app-electron --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Crypto App Notifier\"",
Any ideas on how to solve this?
Will large projects (4.5GB) with thousands of files load fast from dvd or usb stick?
you can toggle your terminal with ctrl+~
also, you can make a new terminal with ctrl+shift+~
packaging not working .. stuck post - asarf line
The close window button in add.js is not working. Does anyone have a solution?
In index.js you need to replace the notifyBtn win to this:
let win = new BrowserWindow({ frame: false, transparent: true ,alwaysOnTop: true,width: 400, height: 200, webPreferences: {
nodeIntegration: true
} })
This solve my problem and apparently it has something to do with the electrion version
@@franciscomira6474 I had 1 hour search how to fix this problem.... Thanks you
thank you bazef