Plugin-able POS Solutions by Javascript @HDM9 Taiwan
4 likes5,045 views
This document discusses the author's experience developing point-of-sale (POS) systems using JavaScript and XULRunner. It describes building a POS SDK called VIVIPOS using JavaScript, XUL, and XPCOM to provide a cross-platform solution. Key components of the SDK included GREUTLs for utilities, GeckoJS for an MVC framework, and XBL components for reusable UI elements. The document emphasizes building a flexible, component-based system to facilitate customization for different customers rather than a single monolithic product.
![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](https://image.slidesharecdn.com/possolutionbyjavascript-121206034905-phpapp01/85/Plugin-able-POS-Solutions-by-Javascript-HDM9-Taiwan-36-320.jpg)
Plugin-able POS Solutions by Javascript @HDM9 Taiwan
- 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
- 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