Plugin-able POS Solutions by Javascript @HDM9 Taiwan

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 ) •  racklin@gmail.com •  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 •  Conﬁgure / 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\ﬁca\on •  Matchbox Virtual Keyboard •  IO Control –  Serial Port / USB –  Parallel Port –  DIO –  GPIO •  JSLoader

Slide 27

Slide 27 text

XBL Components •  ACL / Conﬁg / 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 ﬂow. •  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 Online2OﬀLine •  線上訂位 / 線上團購＜＞實體消費 •  會員積點 / 折扣 •  線上促銷＜＞實體促銷 •  線上銷售＜＞實體銷售 •  消費分析

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