那些年,我們用 Javascript	  	     幹了一套	  POS          Base	  on	  XULRunner	                           	    Rack	  Lin	  阿土伯	  	 ...
about:me•  ViViPOS	  Co.,	  Ltd	  	  技術總監	      –  利用 javascript	  寫 〞收銀機〞(傳統產業,全新感受)	               •  CoCo	  都可、50嵐、歇腳亭、...
NOT	  Web-­‐Based	  POSStandalone	  Applica.on	  Running	  on	  Client	  Terminal	  
NOT	  Only	  POS	  So[ware       POS	  SDK	  
What	  is	  POS
What	  is	  POS
What	  is	  POS
POS	  Development•  Delphi	      –  曾經王者 ,目前依然是	  •  Java	      –  	  非 Windows	  Soluons	  首選	      	  •  VIVIPOS	  SDK	 ...
WHY	  XULRunner•    Cross-­‐Pla_orm	  •    Update	  and	  Packages	  mechanism	  •    XPCOM	  *	  •    Networking	  *	  • ...
Cloc	  for	  VIVIPOS	  SDK
Cloc	  for	  VIVIPOS	  Exts
Coding	  For	  Fun	  ?•  over	  100,000	  lines	  javascript	  	  •  over	  300,000	  lines	  XUL	  
WHY	  NOT	  blablabla…•  Before	  2010	      –  Why	  not	  Delphi	  /	  VB	  /	  Java	  •  A[er	  2010	      –  Why	  not...
About	  VIVIPOS	  (2008) 	  •    Hardware:	  Via	  Eden	  1G	  512MB	  Ram	  	  •    OS:	  Ubuntu	  Linux	  8.04	  •    DB...
Start	  Hard	  Coding	  ?POS	  Applicaon	  Look	  Simply…	  
別急著硬幹!!	            	  除非你想 75 天賣掉整個商業模式!!	            	         而不是產品!
Project	  or	  Product•  經常 Branch	  /	  Code	  Generator	  	                            Customer	  A                     ...
Components	  Based•  Upstream	  Core	  Components	  	                                         VIVIPOS	  SDK               ...
自給自足,豐衣足食•  當 POS	  主流開發是 WinForm	  /	  JFrame	  /	     TForm	  時,我在 VIM.	  •  #1:GREUls	  and	  XPCOM	  	  •  #2:GeckoJS	...
VIVIPOS	  SDK
VIVIPOS	  SDK   WT     F	  !	  	           Scree           n	  ?Gray	  
老板:   SDK	  是嗎!! OK!	  那你至少告訴我 SDK	  怎麼應用!
Hello	  World
GREUls•  2007.09	  Released	  and	  open	  source	  •  Object	  Namespace	  •  Charset	  Conversion	  •  Crypto	  Hash	  U...
GeckoJS•  MVC	  Architecture	        –  Dispatcher	  /	  Controller	        –  Model	  –	  AcveRecord	  Like	  and	  Assoc...
C++	  XPCOM•    On-­‐Screen-­‐Display	  (OSD)	  •    DBUS	  Noficaon	  •    Matchbox	  Virtual	  Keyboard	  •    IO	  Contr...
XBL	  Components•  ACL	  /	  Config	  /	  Session	  aware	  containers	  •  Data	  aware	  UI	  components	      –  Label	 ...
XBL	  Components•  Scrollable	  BuSons	  Group	  
XBL	  Components•  Tree	  and	  scrollable	  tree	  
Debug	  Tools•    JS	  Console	  •    JS	  Debuger	  •    DOM	  Inspector	  •    SQLite	  Manager	  •    SDK	  Console	  #
Start	  Hard	  Coding	  Now	  ?Wait!!	  SDK	  /	  Framework	  were	  tools,	  not	  core	  values.	  
Core	  Values•  Pla_orm	  For	  3rd	  Party	  Developers	  •  Plugins	  Anywhere	     –  User	  Interface	  /	  Layouts	  ...
Core	  Values•  Services	  Registry	     –  Binding	  To	  UI	     –  Binding	  To	  Hotkey	     –  Remove	  Invoke	  (	  ...
Reports•  Reports	     –  CSV	  –	  Template	  Engine	     –  HTML	  –	  Template	  Engine	     –  PDF	         •  Print	 ...
Promoon	  framework•  Cart	  is	  Simple	  !?	     好的 PM	  勝過好的 Programmers	     –  二件九折 -­‐>	  第二件八折	  -­‐>	  第三件七折 …..	 ...
VIVIPOS	  Architecture                                                                           ECR-­‐like	  User	  Inter...
VIVIPOS	  POS
Binding	  Service	  To	  UI
Binding	  Service	  Hotkey
I18n	  /	  l10n
VIVIPOS	  Add-­‐ons	  For	  Producon•  Main	  POS	  Add-­‐on	  	  -­‐	  VIVIECR	         –  690	  pages	  PDF	  Manual	  	...
Simple	  Web	  Browser	  Add-­‐on•  Embedded	  Firefox	  browser	  •  Gecko	  1.9.2	  Engine	     –  HTML5	  Support	     ...
DEMO	  VIVIPOS	                  VIDEO:	  hSp://youtu.be/-­‐z26mGeynok	    •  Next	  Page	  is	  DEMO	  Descripon
DEMO	  Descripon•  A	  Producon	  POS	  Soluon	  is	  combinaon	  of	     many	  add-­‐ons	  not	  ONE	  App.	  •  Every	 ...
IPC•  DBUS	  	  •  Javascript	  implemented	  HSp	  server	       –  Binding	  on	  localhost:8888	  •    Dispatch	  Comma...
IPC	  Samples•  AddItem	  To	  Cart	       –  curl	  hSp://localhost:8888/dispatch?        controller=Cart&command=addItem...
Last	  Mile	  of	  the	  O2O•  Add	  a	  Protocol	  Handler,	  ‘vivipos’	  scheme.	         –  Proxy	  to	  exists	  JS	  ...
VIVIPOS	  Scheme	  Samples•  Remote	  website	  HTML	     –  AddItem	  To	  Cart	        <a	  href=“vivipos:dispatch?	    ...
Open	  PCHOME24	  Example•  Click	  ACER	  E1-­‐531	  Will	  Add	  Item	  to	  VIVIPOS	  Cart	  And	  Prinng	     Receipt.
What	  is	  Online2OffLine•    線上訂位	  /	  線上團購 <>實體消費	  •    會員積點 /	  折扣 	  •    線上促銷<>實體促銷	  •    線上銷售<>實體銷售	  •    消費分析	  
SDK	  -­‐	  Last	  Mile	  of	  O2O•  Online	  Services	  開發者不用重覆造輪子,為   了整合服務而開發陽春 POS 系統.	     VIVIPOS 是完整的收銀系統且 Open	  S...
3rd	  Party	  interes.ng	  Addons•  Singapore	  Bugis	  Street	       –  NetPayment	  /	  EZLinks	  •    Microprogram 悠遊卡 ...
About	  Cloud?•  Running	  Web	  Based	  Applicaon	  in	  Cloud	       –  Yes	  ,	  Simple	  Web	  Browser	  with	  	     ...
JS	  Loader•  Javascript	  Encoder	  For	  3rd	  party	  Developer	      –  NOT	  obfuscator	  •  Add	  Trial	  Version	  ...
Any	  Ideas	  are	  welcome         POS	  or	  POS
Thank	  You	  Coding	  For	  Fun
Resources•  Slide:	  	     hSp://goo.gl/TlHKf	  	  •  GREUls:	     hSps://github.com/racklin/greuls	  •  XULRunner	  –	  M...
Upcoming SlideShare
Loading in …5
×

Plugin-able POS Solutions by Javascript @HDM9 Taiwan

4,897 views

Published on

Introduction XULRunner
Javascript Full-Stack Framework
Plugin-able design

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,897
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Plugin-able POS Solutions by Javascript @HDM9 Taiwan

  1. 1. 那些年,我們用 Javascript     幹了一套  POS Base  on  XULRunner     Rack  Lin  阿土伯      @HDM9    V2
  2. 2. about:me•  ViViPOS  Co.,  Ltd    技術總監   –  利用 javascript  寫 〞收銀機〞(傳統產業,全新感受)   •  CoCo  都可、50嵐、歇腳亭、Yamaha  、星聚點KTV……    •  PHP  /  Javascript  /  Java  Programmer  (目前移情於 Scala  )    •  racklin@gmail.com  •  hSps://twiSer.com/racklin  •  hSp://www.plurk.com/racklin  •  hSps://www.facebook.com/racklin1002  •  hSp://racklin.blogspot.tw/      (生小孩後就變癈墟)  
  3. 3. NOT  Web-­‐Based  POSStandalone  Applica.on  Running  on  Client  Terminal  
  4. 4. NOT  Only  POS  So[ware POS  SDK  
  5. 5. What  is  POS
  6. 6. What  is  POS
  7. 7. What  is  POS
  8. 8. POS  Development•  Delphi   –  曾經王者 ,目前依然是  •  Java   –   非 Windows  Soluons  首選    •  VIVIPOS  SDK   –  Javascript  /  html  /  xul        based  on  XULRunner  
  9. 9. WHY  XULRunner•  Cross-­‐Pla_orm  •  Update  and  Packages  mechanism  •  XPCOM  *  •  Networking  *  •  Storage  -­‐  SQLite  interface  *  •  Chrome  Registraon  *  •  Gecko  rendering  engine   –  HTML5  /  CSS3   –  XBL  /  XUL  /  Javascript  1.8   –  XML  (XSLT,  XMLHSpRequest,  DOMParser,  etc.)  •  Coding  For  Fun  
  10. 10. Cloc  for  VIVIPOS  SDK
  11. 11. Cloc  for  VIVIPOS  Exts
  12. 12. Coding  For  Fun  ?•  over  100,000  lines  javascript    •  over  300,000  lines  XUL  
  13. 13. WHY  NOT  blablabla…•  Before  2010   –  Why  not  Delphi  /  VB  /  Java  •  A[er  2010   –  Why  not  Nodejs   •  v0.1.102.zip  —  2010.07.25,  Version  0.1.102     –  Why  not  Chrome   •  0.2.149    2008.09.08  •  VIVIPOS  Start  at  2008  
  14. 14. About  VIVIPOS  (2008)  •  Hardware:  Via  Eden  1G  512MB  Ram    •  OS:  Ubuntu  Linux  8.04  •  DB:  SQLite3  /  JSON  •  XULRunner  1.8.1  •  Languages:  C(vala)  /  Javascript    
  15. 15. Start  Hard  Coding  ?POS  Applicaon  Look  Simply…  
  16. 16. 別急著硬幹!!    除非你想 75 天賣掉整個商業模式!!     而不是產品!
  17. 17. Project  or  Product•  經常 Branch  /  Code  Generator     Customer  A Customer  B Customer  C•  流行名言:你以為在創新、其實是在代工
  18. 18. Components  Based•  Upstream  Core  Components     VIVIPOS  SDK VIVIECR  (POS  Main  UI)•  Customizaon   –  Customer  A  (  SDK  +  POS  +  A1  +  B1  +  C1  ….)   –  Customer  B  (  SDK    +  POS  +  A1  +  C1  +  D1  …)   –  Customer  C  (  SDK  +  POS  +  A1  +  E1  +  F1  …)  
  19. 19. 自給自足,豐衣足食•  當 POS  主流開發是 WinForm  /  JFrame  /   TForm  時,我在 VIM.  •  #1:GREUls  and  XPCOM    •  #2:GeckoJS  •  #3:SDK  and  XBLs  
  20. 20. VIVIPOS  SDK
  21. 21. VIVIPOS  SDK WT F  !     Scree n  ?Gray  
  22. 22. 老板: SDK  是嗎!! OK!  那你至少告訴我 SDK  怎麼應用!
  23. 23. Hello  World
  24. 24. GREUls•  2007.09  Released  and  open  source  •  Object  Namespace  •  Charset  Conversion  •  Crypto  Hash  Ulies  –  md5  /  sha1  /sha256  •  File  And  Directory  IO    •  JSON  encode  /  decode  use  nave  C++   implemented.  •  Threading  –  Nave  Mul-­‐Threading  support  •  XPCOM  Helper
  25. 25. GeckoJS•  MVC  Architecture   –  Dispatcher  /  Controller   –  Model  –  AcveRecord  Like  and  Associa.ons  Support   –  VIVIPOS  Query  Language  (VQL)    •  Database  Adapter   –  SQLite  and  JSON  •  Configure  /  Registry  System   –  Preference  System  •  Applicaon  Scope  Session  •  Logging  –  Log4js  !?  •  i18n  /  l10n  •  Event  System  –  NOT  DOM  Event
  26. 26. C++  XPCOM•  On-­‐Screen-­‐Display  (OSD)  •  DBUS  Noficaon  •  Matchbox  Virtual  Keyboard  •  IO  Control   –  Serial  Port  /  USB     –  Parallel  Port   –  DIO   –  GPIO    •  JSLoader    
  27. 27. XBL  Components•  ACL  /  Config  /  Session  aware  containers  •  Data  aware  UI  components   –  Label     –  BuSon     –  BuSons  Group  
  28. 28. XBL  Components•  Scrollable  BuSons  Group  
  29. 29. XBL  Components•  Tree  and  scrollable  tree  
  30. 30. Debug  Tools•  JS  Console  •  JS  Debuger  •  DOM  Inspector  •  SQLite  Manager  •  SDK  Console  #
  31. 31. Start  Hard  Coding  Now  ?Wait!!  SDK  /  Framework  were  tools,  not  core  values.  
  32. 32. Core  Values•  Pla_orm  For  3rd  Party  Developers  •  Plugins  Anywhere   –  User  Interface  /  Layouts  /  Skins   –  I18n/l10n   –  Devices   –  Reports   –  Promoons  Modules   –  Second  Display  Modules   –  Inventory  System  
  33. 33. Core  Values•  Services  Registry   –  Binding  To  UI   –  Binding  To  Hotkey   –  Remove  Invoke  (  IPC  /  Protocol)  •  NO  Linux  Nave  UI  •  Open  Source  Addons  
  34. 34. Reports•  Reports   –  CSV  –  Template  Engine   –  HTML  –  Template  Engine   –  PDF   •  Print  To  PDF  By  Gecko   – Export  about  100  pages  PDF  more  than  30mins   •  Print  To  PDF  By  WebKit  (libwkhtmltox)   – Export  about  100  pages  PDF  less  than  3mins   – But  Buggy  –  NOT  Support  thead/tbody/_oot.  
  35. 35. Promoon  framework•  Cart  is  Simple  !?   好的 PM  勝過好的 Programmers   –  二件九折 -­‐>  第二件八折  -­‐>  第三件七折 …..  •  Promoon  Modules  *   –  Base  Condions   –  Product  Trigger  –  Plugin-­‐able   –  Discount  Type  –  Plugin-­‐able    
  36. 36. VIVIPOS  Architecture ECR-­‐like  User  Interface  /  Func;ons   APPLICATIONS   Clerk   Stock   System   Repor.ng   Others   Opera.ons   Control   Func.on   VIVIPOS  APP   FRAMEWORK   Plug-­‐in  /  Add-­‐on  Manager   Update   Content   Message   Report   Peripheral   UI   Func.on   Language   Manager   Manager   Dispatch   Module   Manager   Manager   Manager   Manager   Window   View   Database   Cart   Network   Backup   Restore   Others   Manager   System   Interface   Module  Add-­‐on   Manager   Manager   Manager                  Add-­‐on      -­‐  Member  Management                  -­‐  Cash  Flow  Report  -­‐  SMS  Promo.on   LIBRARIES                                                         VIVIPOS  SDK                  -­‐  Gi]  Card  Payment  -­‐  Special  Discount                  -­‐  …  etc.  -­‐  …  etc.   XPCOM   Network   Core  Libraries   Database   GPIO   Serial  IO   Parallel  IO   Signature  Func.on   Others   LINUX  BASE   Display   Keypad   Audio   Power   Driver   Driver   Driver   Management   USB   Touch   LAN   Others   Driver   Driver   Driver  
  37. 37. VIVIPOS  POS
  38. 38. Binding  Service  To  UI
  39. 39. Binding  Service  Hotkey
  40. 40. I18n  /  l10n
  41. 41. VIVIPOS  Add-­‐ons  For  Producon•  Main  POS  Add-­‐on    -­‐  VIVIECR   –  690  pages  PDF  Manual     –  En  /  zhTW  /  zhCN  /  Jp  /  Thai  /  Fr    •  Taiwan  Invoice  Add-­‐on  •  Customer  Management  Add-­‐on  •  Taiwan  Receipts  Format  Add-­‐on  •  Simple  Browser   u rc e•  Second  Display  Add-­‐on   p en  So    O
  42. 42. Simple  Web  Browser  Add-­‐on•  Embedded  Firefox  browser  •  Gecko  1.9.2  Engine   –  HTML5  Support   –  CSS3  Support  •  Binding  To  BuSon  •  Binding  To  Hotkey  •  Disable  Popup  Window
  43. 43. DEMO  VIVIPOS   VIDEO:  hSp://youtu.be/-­‐z26mGeynok   •  Next  Page  is  DEMO  Descripon
  44. 44. DEMO  Descripon•  A  Producon  POS  Soluon  is  combinaon  of   many  add-­‐ons  not  ONE  App.  •  Every  individual  Add-­‐ons  CAN  online  update.  •  Add-­‐on  can  hook  the  event  and  change  the   shopping  flow.  •  EX.  ONLY  ONE  Customer  Need  BEEP  when   product  not  found  !?   Add  a  add-­‐on  for  him,  Not  add  BEEP  feature  in   upstream  version.
  45. 45. IPC•  DBUS    •  Javascript  implemented  HSp  server   –  Binding  on  localhost:8888  •  Dispatch  Command    •  Nofy  Observer  •  Session  Operaon  •  ...    
  46. 46. IPC  Samples•  AddItem  To  Cart   –  curl  hSp://localhost:8888/dispatch? controller=Cart&command=addItemByBarcode&data=123456789  •  Get  Current  Login  Clerk   –   curl  hSp://localhost:8888/session?acon=get&key=user.username  •  Shutdown  –  Trigger  Event/Observe   –   curl  hSp://localhost:8888/observer?topic=shutdown  •  Ex.  Installed  HelloWorld.xpi   –   curl  hSp://localhost:8888/dispatch? controller=Helloworld&command=sayHello&data=Rack  
  47. 47. Last  Mile  of  the  O2O•  Add  a  Protocol  Handler,  ‘vivipos’  scheme.   –  Proxy  to  exists  JS  HSpd  Services.  •  Remote/Local  Website  CAN   –  Callback  VIVIPOS  Funcons   –  Use  VIVIPOS  Hardwares  (  Printer  /  Cash  Drawer)   –  Use  VIVIPOS  Cart  and  Promoons   –  Use  VIVIPOS  Reports    
  48. 48. VIVIPOS  Scheme  Samples•  Remote  website  HTML   –  AddItem  To  Cart   <a  href=“vivipos:dispatch?   controller=Cart&command=addItemByBarcode&data=123456789”>A ddItem</a>   –  Shutdown  –  Trigger  Event/Observe   <a  href=“vivipos:observer?topic=shutdown”>Shutdown</a>
  49. 49. Open  PCHOME24  Example•  Click  ACER  E1-­‐531  Will  Add  Item  to  VIVIPOS  Cart  And  Prinng   Receipt.
  50. 50. What  is  Online2OffLine•  線上訂位  /  線上團購 <>實體消費  •  會員積點 /  折扣  •  線上促銷<>實體促銷  •  線上銷售<>實體銷售  •  消費分析  
  51. 51. SDK  -­‐  Last  Mile  of  O2O•  Online  Services  開發者不用重覆造輪子,為 了整合服務而開發陽春 POS 系統.   VIVIPOS 是完整的收銀系統且 Open  Source  •  除了整合服務,更可開發自己的 POS  系統  •  使用您熟悉的平台語言開發 POS     JAVA  /  PHP  /  RAILS  /  NODEJS  ……..    •  可以不需要學習 VIVIPOS  SDK.  (盡量啦)
  52. 52. 3rd  Party  interes.ng  Addons•  Singapore  Bugis  Street   –  NetPayment  /  EZLinks  •  Microprogram 悠遊卡 and  Life+  •  OpenLife  •  24卷 (大陸團購-好像掛了 orz  )  •  USA  -­‐  KIOSK  •  Media  Player  
  53. 53. About  Cloud?•  Running  Web  Based  Applicaon  in  Cloud   –  Yes  ,  Simple  Web  Browser  with     HTML5  /  CSS3  Supported  •  Sending  Data  to  Cloud  realme   –  Yes,  Using  AJAX  •  Packing  Data  to  Cloud  when  Day-­‐End   –  YES  ,  VIVIConnect  Add-­‐on  support  Client-­‐Side  ETL  to  packing   Databases  to  your  own  Back-­‐End  Server.   –  HTTP/HTTPs   –  FTP   –  S3  •  Running  your  own  scripts   –  PHP  /  Python    installed  on  every  VIVIPOS  Terminal.  
  54. 54. JS  Loader•  Javascript  Encoder  For  3rd  party  Developer   –  NOT  obfuscator  •  Add  Trial  Version  to  your  Add-­‐on  •  Add  Expire  Date  to  your  Add-­‐on  •  Lock  your  Add-­‐on  on  a  special  Terminal  
  55. 55. Any  Ideas  are  welcome POS  or  POS
  56. 56. Thank  You  Coding  For  Fun
  57. 57. Resources•  Slide:     hSp://goo.gl/TlHKf    •  GREUls:   hSps://github.com/racklin/greuls  •  XULRunner  –  MDN   hSps://developer.mozilla.org/en-­‐US/docs/ XULRunner  

×