Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

about:me •  ViViPOS  Co.,  Ltd    技術總監   –  利用 javascript  寫 〞收銀機〞(傳統產業,全新感受)   •  CoCo  都可、50嵐、歇腳亭、Yamaha  、星聚點KTV……     •  PHP  /  Javascript  /  Java  Programmer  (目前移情於 Scala  )     •  [email protected]   •  hSps://twiSer.com/racklin   •  hSp://www.plurk.com/racklin   •  hSps://www.facebook.com/racklin1002   •  hSp://racklin.blogspot.tw/      (生小孩後就變癈墟)  

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

NOT  Only  POS  So[ware POS  SDK  

Slide 5

Slide 5 text

What  is  POS

Slide 6

Slide 6 text

What  is  POS

Slide 7

Slide 7 text

What  is  POS

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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  

Slide 10

Slide 10 text

Cloc  for  VIVIPOS  SDK

Slide 11

Slide 11 text

Cloc  for  VIVIPOS  Exts

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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  

Slide 14

Slide 14 text

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    

Slide 15

Slide 15 text

Start  Hard  Coding  ? POS  Applica\on  Look  Simply…  

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

VIVIPOS  SDK

Slide 21

Slide 21 text

VIVIPOS  SDK WTF  !     Gray  Screen  ?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Hello  World

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

XBL  Components •  Scrollable  BuSons  Group  

Slide 29

Slide 29 text

XBL  Components •  Tree  and  scrollable  tree  

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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  

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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.  

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.  

Slide 37

Slide 37 text

VIVIPOS  POS

Slide 38

Slide 38 text

Binding  Service  To  UI

Slide 39

Slide 39 text

Binding  Service  Hotkey

Slide 40

Slide 40 text

I18n  /  l10n

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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  

Slide 47

Slide 47 text

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    

Slide 48

Slide 48 text

VIVIPOS  Scheme  Samples •  Remote  website  HTML   – AddItem  To  Cart   A ddItem   – Shutdown  –  Trigger  Event/Observe   Shutdown   –   Ex.  Installed  HelloWorld.xpi    Hello  

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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.  

Slide 54

Slide 54 text

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  

Slide 55

Slide 55 text

Any  Ideas  are  welcome POS  or  POS

Slide 56

Slide 56 text

Thank  You   Coding  For  Fun

Slide 57

Slide 57 text

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