Build a Native Desktop App with Electron (YouTube Stats App)
Вставка
- Опубліковано 7 жов 2024
- Today's Question: Have you ever built a SaaS before? If so, what was it?
-- In today's lengthy little crash course, I'm going to show you how to build a native desktop app that will pull UA-cam channel info from an API. We'll do this with the help of Electron, which allows you to use web tech (HTML/CSS/JS) to create native desktop apps. We will also use Angular for the frontend.
Github Repo for this project:
github.com/des...
I have 2 existing beginner's courses for both Angular 6 and Electron. It's worth watching both of them if you're confused at all in this tutorial:
Angular 6 Crash Course:
• Learn Angular 6 in 60 ...
Electron Crash Course:
• Learn Electron in Less...
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
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!
Be sure to Subscribe! My answer for today's question: Outside of my course site(s), I've built a SaaS which served as a Photoshop extension and PSD templates that allowed people to quickly create display banners for advertising. I sold it at $80 a pop and sold several hundred copies. I definitely want to get my hands dirty again with something in the near future. How about you?
YES I DID IT !!! I love you - such a great nice tool as a first Deskapp - awesome!!!! I thank you so much :-)
Great video great idea. Thanks for the indirect shoutout 😊. You have some cool project based tutorials which you dont see much on youtube. So many channels where people “talk” about coding and thats it. I appreciate others that put in the work to actually create and teach. It takes a lot of time and effort. Great job with the channel. If i ever decide to collab with anyone maybe we can do something
Thanks! Same goes to your chan. You know where to find me in the dev hangouts discord!
Hey Brad, you and Gary have to do something together. I love your contents. For Gary, I love his presentation, you guys will make sense.
You two collaborating will be immense for community !!!!!
woow my favourite instructor is also here, so cool
Is this cross over episode?
You and Brad both are my favorite UA-cam channels.
Whenever I surf your channel on UA-cam I disable my Adblock, just for you Guys
I think you are the only ones did this tutorial about this seamless updated app! Thank you! make another app!
Sure, I won't need this, but amazing work. I would never know how to make something like this. I just enjoy seeing other people create things. Loved it.
Sir I really like your videos, but this is the first time I have ever commented on any of your videos, but literally I learned a lot from your videos, thanks for all your effort, I really appreciate your hard work.
A lot to take in but a lot that can be taken away for a current project. Many thanks.
Yes Gary. Been waiting for this for sometime. After going through your Angluar courses I should be up and running 1st quarter of 2019 with awesome app/s that can change my life. You are amazing
you know a lot of frameworks , you are a very strong developer
Thank you! Was really looking for a video like this!
Awesome tutorial man. Had Angular experience but none in Electron and this was absolutely perfect. Used it to create an app with different features but nonetheless was an awesome introduction to Electron.
Mr Jeremy Renner, this is awesome. Thank you
Watching this at over 3x the subscribers. Congrats!
thank you for this i just got a new dev job and have to build a desktop app that lets people put and pull data from a server and this will work im a c# guy but dont know much about desktop application im a web applications man
so this helps a lot
Please make a collaboration with Brad, im such a fan o his work
Brad is boss
Great video. I enjoy all your courses. It would be awesome if you can make a course for developing app with electron and Vuejs
Another great video. Thanks very much!
This is awesome, you're awesome too man and thanks for doing this.
You and Brad are so good, im very like your vid and brad about make application with youtube api, cool, thank for that :*
Just to remove any confusion, Brad had nothing to do with this app. We didn't do a collab or anything. I'm just a fan of his channel and decided to use his channel ID in the app. ;)
Please make a series on Web Scrapping, and downloading stuff from website with Scrapping and analyzing and getting useful information from any website , Using Nodejs
Good job.
Although after having gone through this directly after going through your angular 6 tutorial, I realise that this is really learning by rote. I need to find teachings with diagrams pointing out just how all the bits and pieces of angular come together and the roles that the various critical files play - the file naming conventions, what they mean, and the directory layout conventions. How do all the important data structures like @NgModule play a role in the overall approach of angular app development, and the general approach one typically takes for a typical SPA.
Anyway, you do good work. I will check out your other courses on your website.
Such a great tutorial :) Thank you
Thanks Gary
This is awesome. Thanks a lot.
Hey Gary. Great video as always, but I have a question. Do you think that maybe Angular was a bit of overkill for this specific application? As you know, the idea of Angular is to make complex applications easier to develop and understand. I think developing simple applications like this using Angular is actually the opposite. I would love to see this as a series maybe, where you develop a more complex application to show the benefits of using Angular, rather than teaching the nuances like in your other videos. Anyway, keep it up!
Great video. I wish you way more subscreebers! hahah
Thank you for a good tutorial!
Great! Thank you!
Great video.
Thanks for this.
I want this video again with angular 7 and electron, as i am facing some problem with ng serve
Thank you
@ 0:39 you sound like you are rapping. Your voice is perfectly matched with the beat lol
Fun fact. I just did this totorial. Your current subscriber count is 441,000. In the video it is 220,505. If you get 10 more subscribers your subscriber count will have doubled since making this video.
Great
I have it on my computer but how do i start it i tried with the commands from the github in the video in cmder but it doesnt work
nice video quality
Very Helpful! can you please give us an idea of how to connect this app with mysql/sql server?
How can i install mysql database while installing electron application?
Hey Sir, I have a quick question. Are we using all the files from angular-electron repository? If not are we building the final exe file including the files which we didn't use? Thanks a lot for making this video even though you were sleepy. Thanks again :)
I want to make a Photoshop software using Electron. Is it possible? If not, then what do you suggest? I need it to be connected to the internet for logging and image validation purposes.
Thanks for another great course! There is a chance to get more premium in-depth content like on your website? I prefer to pay a few bucks and learn the subject from top to bottom and also support you on the way (;
Can anyone give an answer to my problem:
@DesignCourse
This is the error thrown by console:
core.js:6456 ERROR TypeError: Cannot read property 'default' of undefined
at HomeComponent_ng_container_14_Template (template.html:19)
at executeTemplate (core.js:9575)
at refreshView (core.js:9441)
at refreshEmbeddedViews (core.js:10566)
at refreshView (core.js:9465)
at refreshComponent (core.js:10612)
at refreshChildComponents (core.js:9238)
at refreshView (core.js:9491)
at refreshEmbeddedViews (core.js:10566)
at refreshView (core.js:9465)
And also nothing is showing up... But the API results are being console logged fine.
720p50Fps the absolute madman
Do you have a tutorial where you don't use Angular but just electronJs to do remote call to an api & get the response? If it is possible can you tell how to do it?
hello sir..
i need your help..
please make a small video with angular 2+, sqlite3 and electron..
with in one week i researching and not find a batter way to make a desktop app with sqlite3..
have you any other suggestion please suggest me..
Este curso está desactualizado y usa elementos que están deprecated o incluso han sido eliminados.
Hello! program for tracking CPU temperature. Very intresting!
Please show us how to add the drop down option, those ID's do not look very professional
I am using sqlite3 database with electron js app but when I am using sqlite3 and I refresh the page then suddenly blank page appears and it's shows like devtools was disconnected from the page when the Page is reloaded
If anyone have the solution then kindly give me solution
Thanks
ow to install a 3rd party software with electron? Like MySql
This is one of the most complicated things I've ever seen.
NOOOO, THE BLOATWARE CONTINUES!
Hi I am getting this error in the channel function " Type 'Subscription' is missing the following properties from type 'PushSubscription': endpoint, expirationTime, options, getKey, toJSONts(2739) "
NVM I found my mistake and fixed it
Can anyone please tell me the prerequisite for this video to follow along. Thanks😄
what kind of technologies needed to build a web app like figma ? can anyone guide me ?
Am new to angular . Currently using Angular 8 , developed an app which contain prompt. Everything works fine with electron , but prompt didnt works.After that i found few packages for electron prompt, but the problem am facing is "couldnt find the module fs" . i resolved the issue by window.require. but again its giving error for window.require. i found a link help me to solve this by adding to typings.d,ts. but latest version doesnt have that file , can some one help me in this issue. dev.to/michaeljota/integrating-an-angular-cli-application-with-electron---the-ipc-4m18
Can you create register users using usb fingerprint scanner in electron js.
Help us if possible
Please how can i debug this project or any angular electron project
When i went to put " code . " my terminal , because I'm on mac , and it said that there was no commands like that ? bash: code: command not found
For channel.statistics.subscriberCount UA-cam now returns a flat number for pages with more than 1k subscribers...
Is it necessary to use electron in conjunction with angular or can I just use the bare back electron as it is?
Whether it's linux, mac or pc, after building the app to an .exe, does the end-user have to install electron or anything else for it to work?
Or is the .exe file itself an install file rather than a portable .exe, that will install any server software needed to run?
Is it possible to design a desktop app that would clone the github code into pc and run that application which is cloned ?
Hello Sir, at 44:41 i type in ng g s data - or the full names, and nothing happens. Do have have to install something before? Because it says that its an unknown order. I work with win 7. So far everything worked but here i am on an point where i dont know what to do. Can you help me please? Thanks in advance :-)
I found it out - search by google for Angular because i saw it in your video after the typed order .... " the local angular cli version is used. " so i searched for angular and typed in before "npm install -g @angular/cli" and after it "ng g s data" then it workd :-) Sry for the stupid qeustion but its my first time that i code :-)
It helped me! Thanks :D
@Sharp Programmer you are welcome :-)
@@DPBGaming you are welcome :-)
electron doesn't build native programs... it's just a packager for an os, that bundles chromium/node/js/css/html/and art assets into a program that can be ran via it's own launcher (that is renamed like your app called: e.g. bla.exe is underneath an os specific launcher renamed..which fires the node and chromium etc etc.
A native compiled program would not have the source bundled because it would be compiled down to native code, like C++ e.g. does
In 33:48 when I write in my project window: BrowserWindow; I get error Cannot find name 'BrowserWindow'. What is wrong? I did
import { ipcRenderer, webFrame, remote, BrowserWindow } from 'electron';
App work good in develop mode, but with error I can't build exe file. How fix that?
stackoverflow.com/questions/52647009/cannot-find-name-browserwindow
Problem is solved. Thanks to stackoverflow. There are must
window: Electron.BrowserWindow;
@@olegmaz3969 Thanks man!
and for use a native electron the app crash......
Is it javascript
Hi, i have this error "unable to obtain configuration from file:///Library/Preferences/com.apple.ViewBridge.plist"
Solved it by replacing, in appsettings.json :
"AzureAd": {
"Instance": "",
...
}
To
"AzureAd": {
"Instance": "login.microsoftonline.com/",
...
}
👍👏
Very interseting video....we are near by to make one window app.
PLEASE show how to make a music steaming app. Please
Steamed music is the best, lol
must say you are good looking guy
Good video - but why do you need the annoying music?!!
As this is one of the top hits, I feel the need to acknowledge: This is NOT native development, in fact, it is the exact opposite of a native application. "Native" means using a low-level language "at home" on the OS, using the same or similar tools built-in applications on the system were built with, following the same UI and UX guidelines, not cross-platform by design.
Angular created confusion for me. Seems unnecessary.
May you recommend me a program for web designing like Adobe XD.
Adobe xd
Check out Solbox for YT stats directly to your Telegram :
Solbox.io/monitor?ref=agsoundtrax
this is not native is just webview wrapped on a window
Native in the sense that you can use native OS API's in conjunction with JS.
I'd be grateful if it is just all about webview. Instead, we got chromium -- more than 5 million lines of code -- shipped with our tiny winy trivial apps here. Now build DSP-related program and you got a free stove!
Who the hell drinks wine while coding?
It's not a native app :/
Hello sir I am new subscriber
Never Saas Before
Good video. But you could have used Vue.
vijairam ganeshmoorthy why ?
Please make video on electron with nodejs for offline
no,
Haha native
Euhm
Firt viewer
it is not native... never will be... it's a browser that runs the app.. with some node interpretation behind it... so nothing like native!