Introduction XULRunner Javascript Full-Stack Framework Plugin-able design

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

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. NOT
Web-­‐Based
POS
Standalone
Applica.on
Running
on
Client
Terminal

4. NOT
Only
POS
So[ware
POS
SDK

5. What
is
POS

6. What
is
POS

7. What
is
POS

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

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. Cloc
for
VIVIPOS
SDK

11. Cloc
for
VIVIPOS
Exts

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

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. 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. Start
Hard
Coding
?
POS
Applicaon
Look
Simply…

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

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

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. 自給自足，豐衣足食
• 當 POS
主流開發是 WinForm
/
JFrame
/
TForm
時，我在 VIM.
• #1：GREUls
and
XPCOM
• #2：GeckoJS
• #3：SDK
and
XBLs

20. VIVIPOS
SDK

21. VIVIPOS
SDK
WT F
!
Scree n
?
Gray

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

23. Hello
World

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. 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. C++
XPCOM
• On-­‐Screen-­‐Display
(OSD)
• DBUS
Noficaon
• Matchbox
Virtual
Keyboard
• IO
Control
– Serial
Port
/
USB
– Parallel
Port
– DIO
– GPIO
• JSLoader

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

28. XBL
Components
• Scrollable
BuSons
Group

29. XBL
Components
• Tree
and
scrollable
tree

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

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

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. Core
Values
• Services
Registry
– Binding
To
UI
– Binding
To
Hotkey
– Remove
Invoke
(
IPC
/
Protocol)
• NO
Linux
Nave
UI
• Open
Source
Addons

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. Promoon
framework
• Cart
is
Simple
!?
好的 PM
勝過好的 Programmers
– 二件九折 -­‐>
第二件八折
-­‐>
第三件七折 …..
• Promoon
Modules
*
– Base
Condions
– Product
Trigger
–
Plugin-­‐able
– Discount
Type
–
Plugin-­‐able

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. VIVIPOS
POS

38. Binding
Service
To
UI

39. Binding
Service
Hotkey

40. I18n
/
l10n

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. 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. DEMO
VIVIPOS
VIDEO:
hSp://youtu.be/-­‐z26mGeynok
• Next
Page
is
DEMO
Descripon

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. IPC
• DBUS
• Javascript
implemented
HSp
server
– Binding
on
localhost:8888
• Dispatch
Command
• Nofy
Observer
• Session
Operaon
• ...

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. 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. 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. Open
PCHOME24
Example
• Click
ACER
E1-­‐531
Will
Add
Item
to
VIVIPOS
Cart
And
Prinng
Receipt.

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

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

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

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. 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. Any
Ideas
are
welcome
POS
or
POS

56. Thank
You
Coding
For
Fun

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