Everybody knows about Electron, it's one of those open-source tools that the community is really grateful for as it gives us the liberty to develop amazing things such as the text editor I'm currently using: Atom.
In this blog post, we'll be coding a small app to track accomplishments (a glorified to-do application).
Since Angular is my framework of choice to discover Electron, I'll be using the awesome bootstrapping project angular-electron in order to get started as quickly as possible. This project offers great features, such as packaging my app into executables for Linux, Windows & Mac as easily as running
npm run electron:os.
So I clone the repository, install the dependencies & run it:
Which opens the following window:
Note the inspection tool on the right, that's because Electron uses Chromium to render my project, therefore I have access to the usual inspection tool.
Tweaking everything to my liking
There are two things that I wish to change:
- I'll use Sass instead of Scss
- I want to use the CSS framework Bulma
Scss to Sass
All I need to do is tell
angular-cli that I'm using Sass instead of Scss, change the existing file extensions and change a line in the
I first run
ng set defaults.styleExt sass, then I change the extensions of the following files:
home.component.scss without forgetting to adjust the syntax of their contents.
And finally, I head to
webpack.config.js and update the following block:
I can now use Sass in my Angular project.
npm install bulma
Then head to
styles.sass and add the following lines:
Now that everything is ready, I can start coding my application.
Step 1: The initial requirements
My application will contains a navigation bar to move from one list to another and a content panel to display the TODOs (and their status).
Therefore I'll need two distinct components, let's generate the nav with
angular-cli and use the existing
home component as our content panel:
ng g component nav
Which generates a
nav folder containing my template, style sheet, component and test files.
As my navigation is independent to the currently existing routing, I'll add it parallel to my
router-outlet like such:
Note the little "nav works!" on top of the window.
Let's now make it look like an actual navigation bar:
As you can see, I have made some changes:
- The navbar is now a section with a
fixedposition, containing several Lists that will allow our user to navigate through the application.
- I have added a background picture I find pretty, if you know where it is, please let me know :-)
Step 2: The essential feature
I now want to add actual Todos for each list and display them. Here is the current model for a
And the model for a Todo element:
All I have to do, is to add a button to create a new Todo, once clicked, I'll simply push a newly created
Todo into my currently displayed
Lists array and display said array with an
ngFor. With all of that said, here is the result:
Note the undocumented changes such as the ability to create a new List (which uses the same concept applied to create a new Todo), the ability to mark a Todo as done and the ability to edit the name of a List. All of this is very basic and doesn't really need to be detailed.
To be continued
Next steps will involve having a clean and professional design, saving the TODOs locally (in order to retrieve them from one session to another) and many more steps to make this little application as perfect as it can be.