Develop Desktop Apps with Electron
2 likes1,199 views
This document describes how to build an AngularJS todo application using Electron and Photon. It includes code snippets and explanations for setting up the necessary package.json, main process file, and renderer files. Key steps shown include initializing the Electron app and main window, connecting the AngularJS controller and templates, integrating a LowDB database for data persistence, and adding Photon CSS styling and a custom context menu using remote.
![package.json
{
"name":"electron-quick-start",
"version":"1.0.0",
"description":"AminimalElectronapplication",
"main":"main.js",
"scripts":{
"start":"electronmain.js"
},
"repository":{
"type":"git",
"url":"git+https://github.com/atom/electron-quick-start.git"
},
"keywords":[
"Electron","quick","start","tutorial"
],
"author":"GitHub",
"license":"CC0-1.0",
"bugs":{
"url":"https://github.com/atom/electron-quick-start/issues"
},
"homepage":"https://github.com/atom/electron-quick-start#readme"
"devDependencies":{
"electron-prebuilt":"^0.36.0"
}
}
main.js
'usestrict';
constelectron=require('electron');
constapp=electron.app;
constBrowserWindow=electron.BrowserWindow;
//--------------------------------------
letmainWindow;
//--------------------------------------
app.on('window-all-closed',function(){
if(process.platform!='darwin'){
app.quit();
}
});
//--------------------------------------
app.on('ready',function(){
mainWindow=newBrowserWindow({width:800,height:600});
mainWindow.loadURL('file://'+__dirname+'/index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed',function(){
mainWindow=null;
});
});
5 / 27](https://image.slidesharecdn.com/electron-151227102427/85/Develop-Desktop-Apps-with-Electron-5-320.jpg)
![package.json
{
"name":"app",
"productName":"App",
"version":"0.0.0",
"description":"",
"license":"MIT",
"repository":"user/repo",
"author":{"name":"","email":"","url":""
},
"electronVersion":"0.36.0",
"scripts":{
"test":"xo",
"start":"electron.",
"build":"electron-packager.$npm_package_productName--out=dist--ignore='^/dist$'--prune--asar--all--version=$npm_p
},
"files":["index.js","index.html","index.css"
],
"keywords":["electron-app","electron"
],...
}
...
"dependencies":{
"electron-debug":"^0.5.0"
},
"devDependencies":{
"electron-packager":"^5.0.0",
"electron-prebuilt":"^0.36.0",
"xo":"^0.12.0"
},
"xo":{
"esnext":true,
"envs":["node","browser"]
}
9 / 27](https://image.slidesharecdn.com/electron-151227102427/85/Develop-Desktop-Apps-with-Electron-9-320.jpg)
![(function(){
'usestrict';
angular.module('todoApp',[])
.controller('todoListController',[TodoListController]);
functionTodoListController(){
vartodoList=this;
todoList.todos=[];
varlow=require('lowdb');
varstorage=require('lowdb/file-sync');
todoList.db=low('app-03/db.json',{storage});
getAllTodos();
todoList.addTodo=function(){
varvarid=todoList.db('todos').size();
while(todoList.db('todos').find({id:varid})){varid+=
vardata={id:varid,text:todoList.todoText,done:
todoList.db('todos').push(data);
todoList.todos.push(data);
todoList.todoText='';
};
todoList.remaining=function(){
varcount=0;
angular.forEach(todoList.todos,function(todo){
count+=todo.done?0:1;
});
returncount;
};
angular-offline-todo.js
todoList.archive=function(){
varoldTodos=todoList.todos;
todoList.todos=[];
angular.forEach(oldTodos,function(todo){
if(!todo.done)todoList.todos.push(todo);
});
};
todoList.updDone=function(idx){
vardata=todoList.db('todos')
.chain()
.find({id:todoList.todos[idx].id})
.assign({done:todoList.todos[idx].d
.value();
};
functiongetAllTodos(){
todoList.todos=todoList.db('todos').cloneDeep();
};
}
})();
15 / 27](https://image.slidesharecdn.com/electron-151227102427/85/Develop-Desktop-Apps-with-Electron-15-320.jpg)
Develop Desktop Apps with Electron
- 1. JS - Electron Eueung Mulyana http://eueung.github.io/js/electron JS CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 27
- 2. Agenda Electron Quick Start, Boilerplate Angular.JS Todo @ Electron Electron + Photon Photon Angular Todo-App 2 / 27
- 3. Electron Quick Start atom/electron-quick-start 3 / 27
- 4. package.json + main.js + index.html 4 / 27
- 6. Electron Quick Start package.json + main.js + index.html <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>HelloWorld!</title> <script></script> </head> <body> <h1>HelloWorld!</h1> Weareusingnode<script> Chrome<script> </ andElectron<script> </body> </html> document.write(process.versions. document.write(process.versions.chrome) document.write(process.versions.elect 6 / 27
- 8. package.json + index.js + index.html + index.css 8 / 27
- 11. Angular.JS Todo @ Electron 11 / 27
- 12. 12 / 27
- 13. 13 / 27
- 17. Electron + Photon 17 / 27
- 18. 18 / 27
- 20. Photon Template App package.json + app.js index.html + js/menu.js varremote=require('remote') varMenu=remote.require('menu') varMenuItem=remote.require('menu-item') //--------------------------------- varmenu=newMenu() menu.append(newMenuItem({ label:'Delete', click:function(){ alert('Deleted') } })); //--------------------------------- menu.append(newMenuItem({ label:'MoreInfo...', click:function(){ alert('Hereismoreinformation') } })); //--------------------------------- window.addEventListener('contextmenu',function(e){ e.preventDefault(); menu.popup(remote.getCurrentWindow()); },false); js/menu.js 20 / 27
- 22. Photon Angular Todo-App 22 / 27
- 23. 23 / 27
- 26. References 1. Electron 2. sindresorhus/awesome-electron 3. Photon · Components 26 / 27
- 27. END Eueung Mulyana http://eueung.github.io/js/electron JS CodeLabs | Attribution-ShareAlike CC BY-SA 27 / 27