Upload
rack-lin
View
4.176
Download
4
Embed Size (px)
DESCRIPTION
Introduction XULRunner Javascript Full-Stack Framework Plugin-able design
Citation preview
那些年,我們用 Javascript 幹了一套 POS
Base on XULRunner
Rack Lin 阿土伯 @HDM9 V2
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/ (生小孩後就變癈墟)
NOT Web-‐Based POS
Standalone 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 Solu\ons 首選
• VIVIPOS SDK – Javascript / html / xul based on XULRunner
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
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 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
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
Start Hard Coding ?
POS Applica\on Look Simply…
別急著硬幹!!
除非你想 75 天賣掉整個商業模式!!
而不是產品!
Project or Product
• 經常 Branch / Code Generator
• 流行名言:你以為在創新、其實是在代工
Customer A
Customer B
Customer C
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)
自給自足,豐衣足食
• 當 POS 主流開發是 WinForm / JFrame / TForm 時,我在 VIM.
• #1:GREU\ls and XPCOM • #2:GeckoJS • #3:SDK and XBLs
VIVIPOS SDK
VIVIPOS SDK
WTF !
Gray Screen ?
老板:
SDK 是嗎!! OK! 那你至少告訴我 SDK 怎麼應用!
Hello World
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
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
C++ XPCOM
• On-‐Screen-‐Display (OSD) • DBUS No\fica\on • Matchbox Virtual Keyboard • IO Control – Serial Port / USB – Parallel Port – DIO – GPIO
• JSLoader
XBL Components
• ACL / Config / Session aware containers • Data aware UI components – Label – BuSon
– BuSons Group
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 / Skins – I18n/l10n – Devices – Reports – Promo\ons Modules – Second Display Modules – Inventory System
Core Values
• Services Registry – Binding To UI – Binding To Hotkey – Remove Invoke ( IPC / Protocol)
• NO Linux Na\ve UI • Open Source Addons
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.
Promo\on framework
• Cart is Simple !? 好的 PM 勝過好的 Programmers – 二件九折 -‐> 第二件八折 -‐> 第三件七折 …..
• Promo\on Modules * – Base Condi\ons – Product Trigger – Plugin-‐able – Discount Type – Plugin-‐able
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.
VIVIPOS POS
Binding Service To UI
Binding Service Hotkey
I18n / l10n
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
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
DEMO VIVIPOS
VIDEO: hSp://youtu.be/-‐z26mGeynok • Next Page is DEMO Descrip\on
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.
IPC
• DBUS • Javascript implemented HSp server – Binding on localhost:8888
• Dispatch Command • No\fy Observer • Session Opera\on • ...
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
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
VIVIPOS Scheme Samples
• Remote website HTML – AddItem To Cart
<a href=“vivipos:dispatch? controller=Cart&command=addItemByBarcode&data=123456789”>AddItem</a>
– Shutdown – Trigger Event/Observe <a href=“vivipos:observer?topic=shutdown”>Shutdown</a>
Open PCHOME24 Example
• Click ACER E1-‐531 Will Add Item to VIVIPOS Cart And Prin\ng Receipt.
What is Online2OffLine
• 線上訂位 / 線上團購 <>實體消費 • 會員積點 / 折扣 • 線上促銷<>實體促銷 • 線上銷售<>實體銷售 • 消費分析
SDK -‐ Last Mile of O2O
• Online Services 開發者不用重覆造輪子,為了整合服務而開發陽春 POS 系統. VIVIPOS 是完整的收銀系統且 Open Source
• 除了整合服務,更可開發自己的 POS 系統 • 使用您熟悉的平台語言開發 POS JAVA / PHP / RAILS / NODEJS ……..
• 可以不需要學習 VIVIPOS SDK. (盡量啦)
3rd Party interes.ng Addons
• Singapore Bugis Street – NetPayment / EZLinks
• Microprogram 悠遊卡 and Life+ • OpenLife • 24卷 (大陸團購-好像掛了 orz ) • USA -‐ KIOSK • Media Player
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.
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
Any Ideas are welcome
POS or POS
Thank You
Coding For Fun
Resources
• Slide: hSp://goo.gl/TlHKf
• GREU\ls: hSps://github.com/racklin/greu\ls
• XULRunner – MDN hSps://developer.mozilla.org/en-‐US/docs/XULRunner