Plugin-able POS Solutions by Javascript @HDM9 Taiwan

Introduction XULRunner
Javascript Full-Stack Framework
Plugin-able design

Transcript

1. 那些年，我們用 Javascript    
   幹了一套  POS
   Base  on  XULRunner  
    
   Rack  Lin  阿土伯      @HDM9    V2
   

   View Slide

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/      (生小孩後就變癈墟）  
   

   View Slide

3. NOT  Web-­‐Based  POS
   Standalone  Applica.on  
   Running  on  Client  Terminal  
   

   View Slide

4. NOT  Only  POS  So[ware
   POS  SDK  
   

   View Slide

5. What  is  POS
   

   View Slide

6. What  is  POS
   

   View Slide

7. What  is  POS
   

   View Slide

8. POS  Development
   •  Delphi  
   – 曾經王者 ,目前依然是  
   •  Java  
   –   非 Windows  Solu\ons  首選  
    
   •  VIVIPOS  SDK  
   – Javascript  /  html  /  xul        based  on  XULRunner  
   

   View Slide

9. WHY  XULRunner
   •  Cross-­‐Pla_orm  
   •  Update  and  Packages  mechanism  *  
   •  XPCOM  *  
   •  Networking  *  
   •  Storage  -­‐  SQLite  interface  *  
   •  Chrome  Registra\on  *  
   •  Gecko  rendering  engine  *  
   –  HTML5  /  CSS3  
   –  XBL  /  XUL  /  Javascript  1.8  
   –  XML  (XSLT,  XMLHSpRequest,  DOMParser,  etc.)  
   •  Coding  For  Fun  
   

   View Slide

10. Cloc  for  VIVIPOS  SDK
    

    View Slide

11. Cloc  for  VIVIPOS  Exts
    

    View Slide

12. Coding  For  Fun  ?
    •  over  100,000  lines  javascript    
    •  over  300,000  lines  XUL  
    

    View Slide

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  
    

    View Slide

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    
    

    View Slide

15. Start  Hard  Coding  ?
    POS  Applica\on  Look  Simply…  
    

    View Slide

16. 別急著硬幹！！  
     
    除非你想 75 天賣掉整個商業模式!!  
     
    而不是產品！
    

    View Slide

17. Project  or  Product
    •  經常 Branch  /  Code  Generator    
    •  流行名言：你以為在創新、其實是在代工
    Customer  A
    Customer  B
    Customer  C
    

    View Slide

18. Components  Based
    •  Upstream  Core  Components    
    •  Customiza\on  
    – Customer  A  (  SDK  +  POS  +  A1  +  B1  +  C1  ….)  
    – Customer  B  (  SDK    +  POS  +  A1  +  C1  +  D1  …)  
    – Customer  C  (  SDK  +  POS  +  A1  +  E1  +  F1  …)  
    VIVIPOS  SDK
    VIVIECR  (POS  Main  UI)
    

    View Slide

19. 自給自足，豐衣足食
    •  當 POS  主流開發是 WinForm  /  JFrame  /  
    TForm  時，我在 VIM.  
    •  #1：GREU\ls  and  XPCOM    
    •  #2：GeckoJS  
    •  #3：SDK  and  XBLs  
    

    View Slide

20. VIVIPOS  SDK
    

    View Slide

21. VIVIPOS  SDK
    WTF  !    
    Gray  Screen  ?
    

    View Slide

22. 老板:
    SDK  是嗎！！ OK!  
    那你至少告訴我 SDK  怎麼應用！
    

    View Slide

23. Hello  World
    

    View Slide

24. GREU\ls
    •  2007.09  Released  and  open  source  
    •  Object  Namespace  
    •  Charset  Conversion  
    •  Crypto  Hash  U\li\es  –  md5  /  sha1  /sha256  
    •  File  And  Directory  IO    
    •  JSON  encode  /  decode  use  na\ve  C++  
    implemented.  
    •  Threading  –  Na\ve  Mul\-­‐Threading  support  
    •  XPCOM  Helper
    

    View Slide

25. GeckoJS
    •  MVC  Architecture  
    –  Dispatcher  /  Controller  
    –  Model  –  Ac\veRecord  Like  and  Associa.ons  Support  
    –  VIVIPOS  Query  Language  (VQL)    
    •  Database  Adapter  
    –  SQLite  and  JSON  
    •  Configure  /  Registry  System  
    –  Preference  System  
    •  Applica\on  Scope  Session  
    •  Logging  –  Log4js  !?  
    •  i18n  /  l10n  
    •  Event  System  –  NOT  DOM  Event
    

    View Slide

26. C++  XPCOM
    •  On-­‐Screen-­‐Display  (OSD)  
    •  DBUS  No\fica\on  
    •  Matchbox  Virtual  Keyboard  
    •  IO  Control  
    –  Serial  Port  /  USB    
    –  Parallel  Port  
    –  DIO  
    –  GPIO    
    •  JSLoader  
     
    

    View Slide

27. XBL  Components
    •  ACL  /  Config  /  Session  aware  containers  
    •  Data  aware  UI  components  
    – Label    
    – BuSon    
    – BuSons  Group  
    

    View Slide

28. XBL  Components
    •  Scrollable  BuSons  Group  
    
    

    View Slide

29. XBL  Components
    •  Tree  and  scrollable  tree  
    
    

    View Slide

30. Debug  Tools
    •  JS  Console  
    •  JS  Debuger  
    •  DOM  Inspector  
    •  SQLite  Manager  
    •  SDK  Console  #
    

    View Slide

31. Start  Hard  Coding  Now  ?
    Wait!!  SDK  /  Framework  were  tools,  not  core  values.  
    

    View Slide

32. Core  Values
    •  Pla_orm  For  3rd  Party  Developers  
    •  Plugins  Anywhere  
    – User  Interface  /  Layouts  /  Skins  
    – I18n/l10n  
    – Devices  
    – Reports  
    – Promo\ons  Modules  
    – Second  Display  Modules  
    – Inventory  System  
    

    View Slide

33. Core  Values
    •  Services  Registry  
    – Binding  To  UI  
    – Binding  To  Hotkey  
    – Remove  Invoke  (  IPC  /  Protocol)  
    •  NO  Linux  Na\ve  UI  
    •  Open  Source  Addons  
    

    View Slide

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.  
    

    View Slide

35. Promo\on  framework
    •  Cart  is  Simple  !?  
    好的 PM  勝過好的 Programmers  
    – 二件九折 -­‐>  第二件八折  -­‐>  第三件七折 …..  
    (呀不就是全部打九折）  
    •  Promo\on  Modules  *  
    – Base  Condi\ons  
    – Product  Trigger  –  Plugin-­‐able  
    – Discount  Type  –  Plugin-­‐able  
     
    

    View Slide

36. VIVIPOS  Architecture
    VIVIPOS  APP  
    ECR-­‐like  User  Interface  /  Func;ons  
    LINUX  BASE  
    Display  
    Driver  
    USB  
    Driver  
    Keypad  
    Driver  
    Touch  
    Driver  
    Audio  
    Driver  
    LAN  
    Driver  
    Power  
    Management  
    Others  
    LIBRARIES                                                        
    XPCOM  
    GPIO  
    Database  
    Serial  IO   Parallel  IO  
    Network  
    Others  
    VIVIPOS  SDK  
    Core  Libraries  
    Signature  Func.on  
    FRAMEWORK  
    Plug-­‐in  /  Add-­‐on  Manager  
    Network  
    Manager  
    Backup  
    Manager  
    Restore  
    Manager  
    Others  
    Peripheral  
    Manager  
    UI  
    Manager  
    Func.on  
    Manager  
    Language  
    Manager  
    Update  
    Manager  
    Window  
    Manager  
    Content  
    Manager  
    View  
    System  
    Message  
    Dispatch  
    Database  
    Interface  
    Report  
    Module  
    Cart  
    Module  
    APPLICATIONS  
    Clerk  
    Opera.ons  
    Stock  
    Control  
    Repor.ng  
    System  
    Func.on  
    Others  
    Add-­‐on  
     
    -­‐  Member  Management  
    -­‐  SMS  Promo.on  
    -­‐  Special  Discount  
    -­‐  …  etc.  
                   Add-­‐on  
     
                   -­‐  Cash  Flow  Report  
                   -­‐  Gi]  Card  Payment  
                   -­‐  …  etc.  
    

    View Slide

37. VIVIPOS  POS
    

    View Slide

38. Binding  Service  To  UI
    

    View Slide

39. Binding  Service  Hotkey
    

    View Slide

40. I18n  /  l10n
    

    View Slide

41. VIVIPOS  Add-­‐ons  For  Produc\on
    •  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  
    •  Second  Display  Add-­‐on  
     
     Open  Source
    

    View Slide

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
    

    View Slide

43. DEMO  VIVIPOS  
    
    VIDEO:  hSp://youtu.be/-­‐z26mGeynok  
    •  Next  Page  is  DEMO  Descrip\on
    

    View Slide

44. DEMO  Descrip\on
    •  A  Produc\on  POS  Solu\on  is  combina\on  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.
    

    View Slide

45. IPC
    •  DBUS    
    •  Javascript  implemented  HSp  server  
    – Binding  on  localhost:8888  
    •  Dispatch  Command    
    •  No\fy  Observer  
    •  Session  Opera\on  
    •  ...    
    
    

    View Slide

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?ac\on=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  
    

    View Slide

47. Last  Mile  of  the  O2O
    •  Add  a  Protocol  Handler,  ‘vivipos’  scheme.  
    – Proxy  to  exists  JS  HSpd  Services.  
    •  Remote/Local  Website  CAN  
    – Callback  VIVIPOS  Func\ons  
    – Use  VIVIPOS  Hardwares  (  Printer  /  Cash  Drawer)  
    – Use  VIVIPOS  Cart  and  Promo\ons  
    – Use  VIVIPOS  Reports  
     
    

    View Slide

48. VIVIPOS  Scheme  Samples
    •  Remote  website  HTML  
    – AddItem  To  Cart  
    controller=Cart&command=addItemByBarcode&data=123456789”>A
    ddItem  
    – Shutdown  –  Trigger  Event/Observe  
    Shutdown  
    –   Ex.  Installed  HelloWorld.xpi  
     controller=Helloworld&command=sayHello&data=Rack">Hello  
    

    View Slide

49. Open  PCHOME24  Example
    •  Click  ACER  E1-­‐531  Will  Add  Item  to  VIVIPOS  Cart  And  Prin\ng  
    Receipt.
    

    View Slide

50. What  is  Online2OffLine
    •  線上訂位  /  線上團購 ＜＞實體消費  
    •  會員積點 /  折扣  
    •  線上促銷＜＞實體促銷  
    •  線上銷售＜＞實體銷售  
    •  消費分析  
    

    View Slide

51. SDK  -­‐  Last  Mile  of  O2O
    •  Online  Services  開發者不用重覆造輪子，為
    了整合服務而開發陽春 POS 系統.  
    VIVIPOS 是完整的收銀系統且 Open  Source  
    •  除了整合服務，更可開發自己的 POS  系統  
    •  使用您熟悉的平台語言開發 POS    
    JAVA  /  PHP  /  RAILS  /  NODEJS  ……..    
    •  可以不需要學習 VIVIPOS  SDK.  (盡量啦)
    

    View Slide

52. 3rd  Party  interes.ng  Addons
    •  Singapore  Bugis  Street  
    – NetPayment  /  EZLinks  
    •  Microprogram 悠遊卡 and  Life+  
    •  OpenLife  
    •  24卷 （大陸團購－好像掛了 orz  )  
    •  USA  -­‐  KIOSK  
    •  Media  Player  
    

    View Slide

53. About  Cloud?
    •  Running  Web  Based  Applica\on  in  Cloud  
    –  Yes  ,  Simple  Web  Browser  with    
    HTML5  /  CSS3  Supported  
    •  Sending  Data  to  Cloud  real\me  
    –  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.  
    

    View Slide

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  
    

    View Slide

55. Any  Ideas  are  welcome
    POS  or  POS
    

    View Slide

56. Thank  You  
    Coding  For  Fun
    

    View Slide

57. Resources
    •  Slide:    
    hSp://goo.gl/TlHKf    
    •  GREU\ls:  
    hSps://github.com/racklin/greu\ls  
    •  XULRunner  –  MDN  
    hSps://developer.mozilla.org/en-­‐US/docs/
    XULRunner  
    

    View Slide