Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Electron Desktop Apps

Electron Desktop Apps

JavaScript CodeLabs
Develop Desktop Apps with Electron
http://eueung.github.io/js-stuff/electron

Eueung Mulyana

December 27, 2015
Tweet

More Decks by Eueung Mulyana

Other Decks in Programming

Transcript

  1. package.json { " n a m e " : "

    e l e c t r o n - q u i c k - s t a r t " , " v e r s i o n " : " 1 . 0 . 0 " , " d e s c r i p t i o n " : " A m i n i m a l E l e c t r o n a p p l i c a t i o n " , " m a i n " : " m a i n . j s " , " s c r i p t s " : { " s t a r t " : " e l e c t r o n m a i n . j s " } , " r e p o s i t o r y " : { " t y p e " : " g i t " , " u r l " : " g i t + h t t p s : / / g i t h u b . c o m / a t o m / e l e c t r o n - q u i c k - s t a r t . g i t " } , " k e y w o r d s " : [ " E l e c t r o n " , " q u i c k " , " s t a r t " , " t u t o r i a l " ] , " a u t h o r " : " G i t H u b " , " l i c e n s e " : " C C 0 - 1 . 0 " , " b u g s " : { " u r l " : " h t t p s : / / g i t h u b . c o m / a t o m / e l e c t r o n - q u i c k - s t a r t / i s s u e s " } , " h o m e p a g e " : " h t t p s : / / g i t h u b . c o m / a t o m / e l e c t r o n - q u i c k - s t a r t # r e a d m e " " d e v D e p e n d e n c i e s " : { " e l e c t r o n - p r e b u i l t " : " ^ 0 . 3 6 . 0 " } } main.js ' u s e s t r i c t ' ; c o n s t e l e c t r o n = r e q u i r e ( ' e l e c t r o n ' ) ; c o n s t a p p = e l e c t r o n . a p p ; c o n s t B r o w s e r W i n d o w = e l e c t r o n . B r o w s e r W i n d o w ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - l e t m a i n W i n d o w ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' w i n d o w - a l l - c l o s e d ' , f u n c t i o n ( ) { i f ( p r o c e s s . p l a t f o r m ! = ' d a r w i n ' ) { a p p . q u i t ( ) ; } } ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' r e a d y ' , f u n c t i o n ( ) { m a i n W i n d o w = n e w B r o w s e r W i n d o w ( { w i d t h : 8 0 0 , h e i g h t : 6 0 0 } ) ; m a i n W i n d o w . l o a d U R L ( ' f i l e : / / ' + _ _ d i r n a m e + ' / i n d e x . h t m l ' ) ; m a i n W i n d o w . w e b C o n t e n t s . o p e n D e v T o o l s ( ) ; m a i n W i n d o w . o n ( ' c l o s e d ' , f u n c t i o n ( ) { m a i n W i n d o w = n u l l ; } ) ; } ) ; 5 / 27
  2. Electron Quick Start package.json + main.js + index.html < !

    D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > H e l l o W o r l d ! < / t i t l e > < s c r i p t > < / s c r i p t > < / h e a d > < b o d y > < h 1 > H e l l o W o r l d ! < / h 1 > W e a r e u s i n g n o d e < s c r i p t > C h r o m e < s c r i p t > < / a n d E l e c t r o n < s c r i p t > < / b o d y > < / h t m l > d o c u m e n t . w r i t e ( p r o c e s s . v e r s i o n s . d o c u m e n t . w r i t e ( p r o c e s s . v e r s i o n s . c h r o m e ) d o c u m e n t . w r i t e ( p r o c e s s . v e r s i o n s . e l e c t 6 / 27
  3. package.json { " n a m e " : "

    a p p " , " p r o d u c t N a m e " : " A p p " , " v e r s i o n " : " 0 . 0 . 0 " , " d e s c r i p t i o n " : " " , " l i c e n s e " : " M I T " , " r e p o s i t o r y " : " u s e r / r e p o " , " a u t h o r " : { " n a m e " : " " , " e m a i l " : " " , " u r l " : " " } , " e l e c t r o n V e r s i o n " : " 0 . 3 6 . 0 " , " s c r i p t s " : { " t e s t " : " x o " , " s t a r t " : " e l e c t r o n . " , " b u i l d " : " e l e c t r o n - p a c k a g e r . $ n p m _ p a c k a g e _ p r o d u c t N a m e - - o u t = d i s t - - i g n o r e = ' ^ / d i s t $ ' - - p r u n e - - a s a r - - a l l - - v e r s i o n = $ n p m _ p } , " f i l e s " : [ " i n d e x . j s " , " i n d e x . h t m l " , " i n d e x . c s s " ] , " k e y w o r d s " : [ " e l e c t r o n - a p p " , " e l e c t r o n " ] , . . . } . . . " d e p e n d e n c i e s " : { " e l e c t r o n - d e b u g " : " ^ 0 . 5 . 0 " } , " d e v D e p e n d e n c i e s " : { " e l e c t r o n - p a c k a g e r " : " ^ 5 . 0 . 0 " , " e l e c t r o n - p r e b u i l t " : " ^ 0 . 3 6 . 0 " , " x o " : " ^ 0 . 1 2 . 0 " } , " x o " : { " e s n e x t " : t r u e , " e n v s " : [ " n o d e " , " b r o w s e r " ] } 9 / 27
  4. index.js ' u s e s t r i c

    t ' ; c o n s t e l e c t r o n = r e q u i r e ( ' e l e c t r o n ' ) ; c o n s t a p p = e l e c t r o n . a p p ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - r e q u i r e ( ' c r a s h - r e p o r t e r ' ) . s t a r t ( ) ; r e q u i r e ( ' e l e c t r o n - d e b u g ' ) ( ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - l e t m a i n W i n d o w ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - f u n c t i o n o n C l o s e d ( ) { m a i n W i n d o w = n u l l ; } / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - f u n c t i o n c r e a t e M a i n W i n d o w ( ) { c o n s t w i n = n e w e l e c t r o n . B r o w s e r W i n d o w ( { w i d t h : 8 0 0 , h e i g h t : w i n . l o a d U R L ( ` f i l e : / / $ { _ _ d i r n a m e } / i n d e x . h t m l ` ) ; w i n . o n ( ' c l o s e d ' , o n C l o s e d ) ; r e t u r n w i n ; } / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' w i n d o w - a l l - c l o s e d ' , ( ) = > { i f ( p r o c e s s . p l a t f o r m ! = = ' d a r w i n ' ) { a p p . q u i t ( ) ; } } ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' a c t i v a t e ' , ( ) = > { i f ( ! m a i n W i n d o w ) { m a i n W i n d o w = c r e a t e M a i n W i n d o w ( ) ; } } ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' r e a d y ' , ( ) = > { m a i n W i n d o w = c r e a t e M a i n W i n d o w ( ) ; } ) ; 10 / 27
  5. { " n a m e " : " a

    p p - 0 3 " , " v e r s i o n " : " 1 . 0 . 0 " , " d e s c r i p t i o n " : " A m i n i m a l E l e c t r o n a p p l i c a t i o n " , " m a i n " : " m a i n . j s " , " d e v D e p e n d e n c i e s " : { " e l e c t r o n - p r e b u i l t " : " ^ 0 . 3 6 . 0 " } , " d e p e n d e n c i e s " : { " l o w d b " : " ^ 0 . 1 1 . 2 " } } package.json main.js ' u s e s t r i c t ' ; c o n s t e l e c t r o n = r e q u i r e ( ' e l e c t r o n ' ) ; c o n s t a p p = e l e c t r o n . a p p ; c o n s t B r o w s e r W i n d o w = e l e c t r o n . B r o w s e r W i n d o w ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - l e t m a i n W i n d o w ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' w i n d o w - a l l - c l o s e d ' , f u n c t i o n ( ) { i f ( p r o c e s s . p l a t f o r m ! = ' d a r w i n ' ) { a p p . q u i t ( ) ; } } ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' r e a d y ' , f u n c t i o n ( ) { m a i n W i n d o w = n e w B r o w s e r W i n d o w ( { w i d t h : 8 0 0 , h e i g h t : 6 0 0 } ) ; m a i n W i n d o w . l o a d U R L ( ' f i l e : / / ' + _ _ d i r n a m e + ' / a n g u l a r - o f f l i n e m a i n W i n d o w . s e t M e n u ( n u l l ) ; m a i n W i n d o w . o n ( ' c l o s e d ' , f u n c t i o n ( ) { m a i n W i n d o w = n u l l ; } ) ; } ) ; 14 / 27
  6. ( f u n c t i o n (

    ) { ' u s e s t r i c t ' ; a n g u l a r . m o d u l e ( ' t o d o A p p ' , [ ] ) . c o n t r o l l e r ( ' t o d o L i s t C o n t r o l l e r ' , [ T o d o L i s t C o n t r o l l e r ] ) ; f u n c t i o n T o d o L i s t C o n t r o l l e r ( ) { v a r t o d o L i s t = t h i s ; t o d o L i s t . t o d o s = [ ] ; v a r l o w = r e q u i r e ( ' l o w d b ' ) ; v a r s t o r a g e = r e q u i r e ( ' l o w d b / f i l e - s y n c ' ) ; t o d o L i s t . d b = l o w ( ' a p p - 0 3 / d b . j s o n ' , { s t o r a g e } ) ; g e t A l l T o d o s ( ) ; t o d o L i s t . a d d T o d o = f u n c t i o n ( ) { v a r v a r i d = t o d o L i s t . d b ( ' t o d o s ' ) . s i z e ( ) ; w h i l e ( t o d o L i s t . d b ( ' t o d o s ' ) . f i n d ( { i d : v a r i d } ) ) { v a r i d + = v a r d a t a = { i d : v a r i d , t e x t : t o d o L i s t . t o d o T e x t , d o n e : t o d o L i s t . d b ( ' t o d o s ' ) . p u s h ( d a t a ) ; t o d o L i s t . t o d o s . p u s h ( d a t a ) ; t o d o L i s t . t o d o T e x t = ' ' ; } ; t o d o L i s t . r e m a i n i n g = f u n c t i o n ( ) { v a r c o u n t = 0 ; a n g u l a r . f o r E a c h ( t o d o L i s t . t o d o s , f u n c t i o n ( t o d o ) { c o u n t + = t o d o . d o n e ? 0 : 1 ; } ) ; r e t u r n c o u n t ; } ; angular-offline-todo.js t o d o L i s t . a r c h i v e = f u n c t i o n ( ) { v a r o l d T o d o s = t o d o L i s t . t o d o s ; t o d o L i s t . t o d o s = [ ] ; a n g u l a r . f o r E a c h ( o l d T o d o s , f u n c t i o n ( t o d o ) { i f ( ! t o d o . d o n e ) t o d o L i s t . t o d o s . p u s h ( t o d o ) ; } ) ; } ; t o d o L i s t . u p d D o n e = f u n c t i o n ( i d x ) { v a r d a t a = t o d o L i s t . d b ( ' t o d o s ' ) . c h a i n ( ) . f i n d ( { i d : t o d o L i s t . t o d o s [ i d x ] . i d } ) . a s s i g n ( { d o n e : t o d o L i s t . t o d o s [ i d x ] . d . v a l u e ( ) ; } ; f u n c t i o n g e t A l l T o d o s ( ) { t o d o L i s t . t o d o s = t o d o L i s t . d b ( ' t o d o s ' ) . c l o n e D e e p ( ) ; } ; } } ) ( ) ; 15 / 27
  7. < ! d o c t y p e h

    t m l > < h t m l n g - a p p = " t o d o A p p " > < h e a d > < s c r i p t s r c = " b o w e r _ c o m p o n e n t s / a n g u l a r / a n g u l a r . m i n . j s " > < / < ! - - < s c r i p t s r c = " a n g u l a r - o f f l i n e - t o d o - s e r v i c e . j s " > < / s c r i p t > - - > < s c r i p t s r c = " a n g u l a r - o f f l i n e - t o d o . j s " > < / s c r i p t > < l i n k r e l = " s t y l e s h e e t " h r e f = " a n g u l a r - o f f l i n e - t o d o . c s s " > < / h e a d > < b o d y > < h 2 > T o d o < / h 2 > < d i v n g - c o n t r o l l e r = " t o d o L i s t C o n t r o l l e r a s t o d o L i s t " > < s p a n > { { t o d o L i s t . r e m a i n i n g ( ) } } o f { { t o d o L i s t . t o d o s . l e n g t h } } r e m a i n i n g [ < a h r e f = " " n g - c l i c k = " t o d o L i s t . a r c h i v e ( ) " > a r c h i v e < / a < u l c l a s s = " u n s t y l e d " > < l i n g - r e p e a t = " t o d o i n t o d o L i s t . t o d o s t r a c k b y $ i n d e x " < i n p u t t y p e = " c h e c k b o x " n g - m o d e l = " t o d o . d o n e " n g - c l i c k < s p a n c l a s s = " d o n e - { { t o d o . d o n e } } " > { { t o d o . t e x t } } < / s p a n < / l i > < / u l > < f o r m n g - s u b m i t = " t o d o L i s t . a d d T o d o ( ) " > < i n p u t t y p e = " t e x t " n g - m o d e l = " t o d o L i s t . t o d o T e x t " s i z e p l a c e h o l d e r = " a d d n e w t o d o h e r e " > < i n p u t c l a s s = " b t n - p r i m a r y " t y p e = " s u b m i t " v a l u e = " a d d " < / f o r m > < / d i v > < / b o d y > < / h t m l > angular-offline-todo.html 16 / 27
  8. Photon Template App { " n a m e "

    : " p r o t o n - t e m p l a t e - a p p " , " v e r s i o n " : " 1 . 0 . 0 " , " d e s c r i p t i o n " : " A s i m p l e t e m p l a t e a p p f o r P r o t o n " , " m a i n " : " a p p . j s " , " a u t h o r " : " C o n n o r S e a r s " , " s c r i p t s " : { " s t a r t " : " e l e c t r o n . " } } package.json app.js v a r a p p = r e q u i r e ( ' a p p ' ) ; v a r B r o w s e r W i n d o w = r e q u i r e ( ' b r o w s e r - w i n d o w ' ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - v a r m a i n W i n d o w = n u l l ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' w i n d o w - a l l - c l o s e d ' , f u n c t i o n ( ) { i f ( p r o c e s s . p l a t f o r m ! = ' d a r w i n ' ) { a p p . q u i t ( ) ; } } ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a p p . o n ( ' r e a d y ' , f u n c t i o n ( ) { m a i n W i n d o w = n e w B r o w s e r W i n d o w ( { w i d t h : 8 0 0 , h e i g h t : 6 0 0 , ' m i n - w i d t h ' : 4 8 0 , ' m i n - h e i g h t ' : 3 6 0 , ' a c c e p t - f i r s t - m o u s e ' : t r u e , ' t i t l e - b a r - s t y l e ' : ' h i d d e n ' } ) ; m a i n W i n d o w . l o a d U R L ( ' f i l e : / / ' + _ _ d i r n a m e + ' / i n d e x . h t m l ' ) ; m a i n W i n d o w . s e t M e n u ( n u l l ) ; m a i n W i n d o w . o n ( ' c l o s e d ' , f u n c t i o n ( ) { m a i n W i n d o w = n u l l ; } ) ; } ) ; 19 / 27
  9. Photon Template App package.json + app.js index.html + js/menu.js v

    a r r e m o t e = r e q u i r e ( ' r e m o t e ' ) v a r M e n u = r e m o t e . r e q u i r e ( ' m e n u ' ) v a r M e n u I t e m = r e m o t e . r e q u i r e ( ' m e n u - i t e m ' ) / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - v a r m e n u = n e w M e n u ( ) m e n u . a p p e n d ( n e w M e n u I t e m ( { l a b e l : ' D e l e t e ' , c l i c k : f u n c t i o n ( ) { a l e r t ( ' D e l e t e d ' ) } } ) ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - m e n u . a p p e n d ( n e w M e n u I t e m ( { l a b e l : ' M o r e I n f o . . . ' , c l i c k : f u n c t i o n ( ) { a l e r t ( ' H e r e i s m o r e i n f o r m a t i o n ' ) } } ) ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - w i n d o w . a d d E v e n t L i s t e n e r ( ' c o n t e x t m e n u ' , f u n c t i o n ( e ) { e . p r e v e n t D e f a u l t ( ) ; m e n u . p o p u p ( r e m o t e . g e t C u r r e n t W i n d o w ( ) ) ; } , f a l s e ) ; js/menu.js 20 / 27
  10. index.html < ! D O C T Y P E

    h t m l > < h e a d > < t i t l e > P h o t o n < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " . . / c s s / p h o t o n . m i n . c s s " > < s c r i p t s r c = " j s / m e n u . j s " c h a r s e t = " u t f - 8 " > < / s c r i p t > < / h e a d > < b o d y > < d i v c l a s s = " w i n d o w " > < h e a d e r c l a s s = " t o o l b a r t o o l b a r - h e a d e r " > < h 1 c l a s s = " t i t l e " > P h o t o n < / h 1 > < / h e a d e r > < d i v c l a s s = " w i n d o w - c o n t e n t " > < d i v c l a s s = " p a n e - g r o u p " > . . . < / d i v > < / d i v > < / d i v > < / b o d y > < / h t m l > < h t m l > < d i v c l a s s = " p a n e p a n e - s m s i d e b a r " > < n a v c l a s s = " n a v - g r o u p " > < h 5 c l a s s = " n a v - g r o u p - t i t l e " > F a v o r i t e s < / h 5 > < s p a n c l a s s = " n a v - g r o u p - i t e m " > < s p a n c l a s s = " i c o n i c o n - h o m e " < s p a n c l a s s = " n a v - g r o u p - i t e m a c t i v e " > < s p a n c l a s s = " i c o n i c o < s p a n c l a s s = " n a v - g r o u p - i t e m " > < s p a n c l a s s = " i c o n i c o n - d o w n l < s p a n c l a s s = " n a v - g r o u p - i t e m " > < s p a n c l a s s = " i c o n i c o n - f o l d e < s p a n c l a s s = " n a v - g r o u p - i t e m " > < s p a n c l a s s = " i c o n i c o n - w i n d o < s p a n c l a s s = " n a v - g r o u p - i t e m " > < s p a n c l a s s = " i c o n i c o n - s i g n a < s p a n c l a s s = " n a v - g r o u p - i t e m " > < s p a n c l a s s = " i c o n i c o n - m o n i t < / n a v > < / d i v > < d i v c l a s s = " p a n e " > < t a b l e c l a s s = " t a b l e - s t r i p e d " > < t h e a d > < t r > < t h > N a m e < / t h > < t h > K i n d < / t h > < t h > D a t e M o d i f i e d < / t h < / t h e a d > < t b o d y > < t r > < t d > b a r s . s c s s < / t d > < t d > D o c u m e n t < / t d > < t d > O c t 1 3 , 2 0 . . . < t r > < t d > b a s e . s c s s < / t d > < t d > D o c u m e n t < / t d > < t d > O c t 1 3 , 2 0 < / t b o d y > < / t a b l e > < / d i v > 21 / 27
  11. # a n g u l a r - o

    f f l i n e - t o d o . c s s . m a r g i n 1 0 { m a r g i n : 1 0 p x ; w i d t h : i n h e r i t ! i m p o r t a n t ; } # a p p . j s m a i n W i n d o w . l o a d U R L ( ' f i l e : / / ' + _ _ d i r n a m e + ' / a n g u l a r - o f f l i n e - t o d o . h t m l ' # a n g u l a r - o f f l i n e - t o d o . j s t o d o L i s t . d b = l o w ( ' a p p - 0 5 / a p p / d b . j s o n ' , { s t o r a g e } ) ; Minor Changes app.js angular-offline-todo.js angular-offline-todo.css 24 / 27
  12. angular-offline-todo.html < ! d o c t y p e

    h t m l > < h t m l n g - a p p = " t o d o A p p " > < h e a d > < s c r i p t s r c = " b o w e r _ c o m p o n e n t s / a n g u l a r / a n g u l a r . m i n . j s " > < / < s c r i p t s r c = " a n g u l a r - o f f l i n e - t o d o . j s " > < / s c r i p t > < l i n k r e l = " s t y l e s h e e t " h r e f = " a n g u l a r - o f f l i n e - t o d o . c s s " > < l i n k r e l = " s t y l e s h e e t " h r e f = " . . / c s s / p h o t o n . m i n . c s s " > < s c r i p t s r c = " j s / m e n u . j s " c h a r s e t = " u t f - 8 " > < / s c r i p t > < / h e a d > < b o d y > < d i v c l a s s = " w i n d o w " n g - c o n t r o l l e r = " t o d o L i s t C o n t r o l l e r a s t o d o L i s t " < h e a d e r c l a s s = " t o o l b a r t o o l b a r - h e a d e r " > < h 1 c l a s s = " t i t l e " > P h o t o n A n g u l a r T o d o . A p p < / h 1 > < / h e a d e r > . . . < / d i v > < / b o d y > < / h t m l > < d i v c l a s s = " w i n d o w - c o n t e n t " > < d i v c l a s s = " p a n e - g r o u p " > < t a b l e c l a s s = " t a b l e - s t r i p e d " > < t h e a d > < t r > < t h > D O N E < / t h > < t h > T o d o < / t h > < / t r > < / t h e a d > < t b o d y > < t r n g - r e p e a t = " t o d o i n t o d o L i s t . t o d o s t r a c k b y $ i n d e x " < t d > < i n p u t t y p e = " c h e c k b o x " n g - m o d e l = " t o d o . d o n e " n g - c < t d > < s p a n c l a s s = " d o n e - { { t o d o . d o n e } } " > { { t o d o . t e x t } } < / t r > < / t b o d y > < / t a b l e > < / d i v > < / d i v > < f o o t e r c l a s s = " t o o l b a r t o o l b a r - f o o t e r " > < d i v c l a s s = " t o o l b a r - a c t i o n s " > < f o r m n g - s u b m i t = " t o d o L i s t . a d d T o d o ( ) " > < s p a n c l a s s = " p u l l - l e f t m a r g i n 1 0 " > { { t o d o L i s t . r e m a i n i n g ( < i n p u t c l a s s = " f o r m - c o n t r o l b t n b t n - p r i m a r y p u l l - r i g h t < i n p u t t y p e = " t e x t " c l a s s = " f o r m - c o n t r o l p u l l - r i g h t m a r g p l a c e h o l d e r = " a d d n e w t o d o h e r e " > < / f o r m > < / d i v > < / f o o t e r > 25 / 27