"Swift 2.0 Collections and Control Flow" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a Cross-Platform Desktop Application with Electron!
You have completed Build a Cross-Platform Desktop Application with Electron!
Preview
Learn how to create an Electron application using a Quick Start project from the folks behind Electron.
Links
- Electron - http://electron.atom.io/
Git Repositories
- Quick start
git clone https://github.com/electron/electron-quick-start
- Front End
git clone https://github.com/treehouse-projects/draw_pro_front_end
Next Steps
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Here we are on the electron home page.
0:00
And at the bottom of the page, it will
show the current version of electron, and
0:02
all the things that get bundled with it.
0:07
Included Node Jess, chromium,
and the V8 JavaScript runtime.
0:09
All these versions get bundled together
with this version of electron.
0:14
Further down the page here,
we have a quick start supplication.
0:19
With all the boilerplate code for
a minimal electron application.
0:22
If we copy and
paste this get clone command here and
0:28
type in the name of
the application we want to create,
0:32
I'm gonna draw_pro because we're
gonna create a drawing application.
0:35
The frond end code for
this application has already been written.
0:42
Check the teachers notes to
the link to this repository
0:45
if you want to follow along.
0:48
So, we should have two directories,
0:57
one with the boilerplate code that we
just cloned from the electron home page,
1:00
and the finished front-end code for
our application.
1:05
Let's take a look at the front end
up location working in a browser.
1:10
So, you can select any one of these
colors here and then draw on this campus.
1:16
You can even save an image here.
1:23
What would be cool is if we
could include this application
1:25
all bundled up in an executable that
will run on Windows, Mac, and Linux.
1:29
Let's do that now.
1:34
Let's go back into our boilerplate
code and open it up in a text editor.
1:37
These are all the files
that we cloned down.
1:45
Let's take a look in
the package.Json file.
1:48
We have a main key that points to main.js.
1:51
We have the start script that
runs the electron executable
1:55
in the current directory.
2:01
Electron will look for the package.json
file, and the main key and run main.js.
2:03
The dependencies for
this application are electron, and
2:11
the license is public domain.
2:15
In other words,
you can use these projects for
2:19
commercial and non-commercial purposes.
2:21
Let's take a look in the main .js file.
2:24
At the top here,
we require the electron module, and
2:27
get a reference to the module that
handles the applications lifecycle.
2:31
Here we get a reference to
the browser window type
2:37
that we can create new
instances of browser Windows.
2:40
Applications can have any number of
browser windows, but we've just got one,
2:45
the main window with the width of
800 pixels and height 600 pixels.
2:49
Once we've created an instance
of a browser window,
2:54
we need to tell it which URL to go to.
2:58
In this case, is the file system,
the index.html file.
3:01
This line of code here opens
up DevTools programmatically.
3:08
Browser windows have events, like closed.
3:13
Once it's closed, we assign
the value of null to main window.
3:17
The Application Lifecycle also has events,
too.
3:22
Ready, for
3:27
example, calls the create window
function which creates the main window.
3:27
When all the windows are closed,
the application will quit.
3:34
Except if you're burning MacOS.
3:40
If you click on the icon in MacOS and
3:45
the window is set to no,
it will create a new window.
3:47
This is the default behavior for MacOS X.
3:51
You can change that behavior by
deleting these lines of code here.
3:55
Let's take a look at the index.html file.
4:03
And at first glance, it looks like
a regular HTML file, cuz it is.
4:06
But it's got access to the Node APIs,
4:11
including the process where you can get
the versions of Node, Chrome and Electron.
4:16
And it uses JavaScript to
print them out to the page.
4:21
At the bottom here, you can see we're also
using require which is another node API.
4:25
This will require all the JavaScript
from the rendered.js file.
4:31
You could include this as a source a
tribute like this, but you don't have to.
4:37
Now, in the renderer.js file,
4:46
you include all the drive script that
you want to run in the browser window.
4:48
This brings us to
an important distinction.
4:53
There are two processes in Electron.
4:56
There's the main process that
handles all the window lifecycle and
4:58
any background tasks, and
the renderer process which is
5:02
executed in the browser window,
where the JavaScript file is required.
5:07
This file is called render.js, but
it could be named anything you want.
5:13
So, let's see this application in action.
5:18
As npm install to install any
dependencies, and then run npm start.
5:21
And here's the application running
with the dev tool is open.
5:36
I'm just gonna undock this like that
5:40
So, we still got full access
to the development tools, and
5:51
the window is open full.
5:55
And as you can see, is printed out
the note version, the chromium version and
5:58
the electron version,
that this application is bundled with.
6:02
Let's disable the death tolls here.
6:12
And refresh our app using command r or
control r.
6:18
And we can always toggle
the developer tools manually here.
6:24
Now let's integrate our frontend
code into our electron application.
6:32
So, I'm going to copy the frontend
code into a directory called frontend.
6:38
Then head over to the main .js file and
6:52
type in front-end.
6:57
And delete the old renderer and
indexed.HTML file.
7:01
And you can see our front-end
directory with our index,
7:11
and the app.js that will get
ran in the renderer instance.
7:17
So, let's start our application again.
7:23
And this time,
our drawing application is loaded.
7:34
However, you've got to resize
the window in order to see the button.
7:37
So, what would be good is to get
an idea of how big this is, and
7:42
then programmatically put
that into our code, so
7:46
when the application opens,
we can see everything on the page.
7:50
So, if we toggle the developer tools, and
we just stop moving around like this.
7:56
We can see we're about
660 pixels by 660 pixels.
8:02
So, let's head back to our
code editor In main.js.
8:10
660 by 660,
8:15
And then start it up again.
8:24
And it started at the right size, cool.
8:32
So, I'm just going to say hello.
8:36
And then save the file to my desktop.
8:37
They're not going to open it up.
8:42
And there we have the png saved
with a transparent background.
8:45
Cool, for more inspiration on what you
can do with Electron, head over to
8:50
the electron website and download
this electron API demos application.
8:55
I've downloaded it here, and
9:01
it shows you all these examples
on what you can do with Electron.
9:02
Open up new windows.
9:07
Access native user interface elements,
9:11
like the error dialog or file browser.
9:16
You can also tap into the tray.
9:22
For example, up here, I don't have
anything associated with Electron.
9:24
If I click on View Demo, it's up there,
and I can remove it, cool.
9:29
Once you're ready to
deploy your application,
9:38
you'll probably want to use
this electron-packager here,
9:41
this bundles up executables for
the Windows, Mac and Linux platforms.
9:45
So, what's exciting desktop applications
are you going to build with Electron?
9:52
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up