INTRODUCING CLOUD TECHNOLOGY &MOBILE APP DEVELOPMENT FOR SMART DEVICE

Presented by Benny Chan,

Manager, SillyCube Technology Ltd.

About Us• Since 2009 we provide mobile solutions and web

development service to our customers

• Supported by Hong Kong Gov between 2010 – 2013

• Hand on exp on NFC, Audio, Wifi data transfer

Overview• Intro – Cloud

• Cloud server hosting• Server architecture, LAMP

• Intro – Mobile app development• Native vs HTML5

• Intro – Web development• PHP, JSP (Java), HTML, Ajax, jQuery

• Data exchange using JSON / XML• Case Study – iFarm, Smart Hydroponics device

• How we can get started• Resource needed• Points to Note

• Q & A

INTRO – CLOUD Using cloud server & the benefits

Cloud server hosting (IAAS)• Renting virtual server space rather than renting or

purchasing physical servers.

• Paid for by the computing hours depending on the capacity required at any particular time

• Popular service providers in US: Amazon, Rackspace, SoftLayer (under IBM)

Advantages• No need to maintain server such as harddisk failure,

hardware upgrade

• Easily Scalable, capacity can be easily upgraded

• Flexible cost & Low initial setup time

Server Architecture• Support LAMP => Linux, Apache, MySQL, PHP

• Common toolset for Web App Development

• Clustering web server & database to prevent single point of failure

A Sample Clustering Architecture

INTRO – MOBILE APP DEVELOPMENTiOS app vs Android app development

Native vs HTML5• Native SDK for iOS and Android

Fast performance Easily Access hardware features like GPS, NFC, Camera, etc. X Platform dependent => high development cost

Native vs HTML5• HTML5 (Also known as Hybrid)

• Mix native code with HTML5 codePlatform independent => “Develop once, Deploy many”Flat learning curveX Relative Slower

More suitable for information app

INTRO – WEB DEVELOPMENTHow we develop a web app?

Development Framework• Framework:

• Server side language: PHP, JSP (Java)• Client side: HTML, Ajax, jQuery, javascript, etc• Hosted in Apache HTTP server

• Responsive Web Design• Support desktop, mobile browsers at once• Adapt to different browsers automatically• We can try now

How we make Data Exchange?• Via HTTP request & response, e.g.

http://202.82.25.16/abc/login.jsp?usrID=maggie&usrPwd=test

• Submit requests to server to get response

• Server return JSON / XML response, common data exchange method

Sample JSON file{"imu_ftyprctrm":"FOB HK","imu_inrqty":"12","imu_mtrqty":"144","imu_basprc":"6.2243","imu_ftycst":"28.3300","imu_hkprctrm":"FOB HK","imu_bcurcde":"USD","imu_ftycstPack":".0000","imu_expdat":"2014-08-31 23:59:00.990","imu_pckunt":"PC","imu_ftycstC":".0000","imu_effdat":"2010-03-18 00:00:00.000","imu_ftycstD":".0000","imu_curcde":"HKD","imu_cus2no":"","imu_trantrm":"FCL","imu_ttlcst":"40.8800","imu_prdven":"A","imu_conftr":"1","imu_cus1no":"","imu_ftycstTran":".0000","imu_ftycstA":".0000","imu_ftycstB":".0000"},

{"imu_ftyprctrm":"FOB HK","imu_inrqty":"12","imu_mtrqty":"144","imu_basprc":"1.6566","imu_ftycst":"8.3300","imu_hkprctrm":"FOB HK","imu_bcurcde":"USD","imu_ftycstPack":".0000","imu_expdat":"2014-08-31 23:59:00.990","imu_pckunt":"PC","imu_ftycstC":".0000","imu_effdat":"2010-03-18 00:00:00.000","imu_ftycstD":".0000","imu_curcde":"HKD","imu_cus2no":"","imu_trantrm":"LCL","imu_ttlcst":"10.8800","imu_prdven":"A","imu_cus1no":"","imu_conftr":"1","imu_ftycstTran":".0000","imu_ftycstA":".0000","imu_ftycstB":".0000"}

• mobile apps / website can parse data from this response

JSON – tree structure text file (indented)• {• "imu_ftyprctrm" : "FOB HK",• "imu_inrqty" : "12",• "imu_mtrqty" : "144",• "imu_basprc" : "6.2243",• "imu_ftycst" : "28.3300",• "imu_hkprctrm" : "FOB HK",• "imu_bcurcde" : "USD",• "imu_ftycstPack" : ".0000",• "imu_expdat" : "2014-08-31 23:59:00.990",• "imu_pckunt" : "PC",• "imu_ftycstC" : ".0000",• "imu_effdat" : "2010-03-18 00:00:00.000",• "imu_ftycstD" : ".0000",• "imu_curcde" : "HKD",• "imu_cus2no" : "",• "imu_trantrm" : "FCL",• "imu_ttlcst" : "40.8800",• "imu_prdven" : "A",• "imu_conftr" : "1",• "imu_cus1no" : "",• "imu_ftycstTran" : ".0000",• "imu_ftycstA" : ".0000",• "imu_ftycstB" : ".0000"• }, {• "imu_ftyprctrm" : "FOB HK",• "imu_inrqty" : "12",• "imu_mtrqty" : "144",• "imu_basprc" : "1.6566",• "imu_ftycst" : "8.3300",• "imu_hkprctrm" : "FOB HK",• "imu_bcurcde" : "USD",• "imu_ftycstPack" : ".0000",• "imu_expdat" : "2014-08-31 23:59:00.990",• "imu_pckunt" : "PC",• "imu_ftycstC" : ".0000",• "imu_effdat" : "2010-03-18 00:00:00.000",• "imu_ftycstD" : ".0000",• "imu_curcde" : "HKD",• "imu_cus2no" : "",• "imu_trantrm" : "LCL",• "imu_ttlcst" : "10.8800",• "imu_prdven" : "A",• "imu_cus1no" : "",• "imu_conftr" : "1",• "imu_ftycstTran" : ".0000",• "imu_ftycstA" : ".0000",• "imu_ftycstB" : ".0000"• }

Case Study - iFarm• Smart device for hydroponics

• Hardware developed by our customer, we develop mobile app

• Mobile apps can read farming data in real-time like temperature, humidity, pH, etc

You can imagine…

How we get started?

1. Customer provides us with a hardware prototype

2. The prototype is embedded in Linux, running http server

3. A web app is hosted in the http server. The web app can be accessed with browser in a local network, say http://ifarm.local

4. After login we can check the data read from sensor

5. The data can be fetched by JSON when we can submit a request to this server.

Resource needed for mobile apps development

• Reference mobile app & the hardware

• API instructions & documentation

• Local Web App for testing

• Of course your functional requirement

Points to Note• The setup procedure need to be well defined, e.g. how to

switch to the user Wifi network, how to do pairing between smart devices and mobile app

• OTA firmware update is needed.

• How to resolve virtual IP from the domain

• The response time may be slow

Q & A