Training on Mobile Apps Development for Smart Devices

1. INTRODUCING CLOUD
TECHNOLOGY &
MOBILE APP DEVELOPMENT
FOR SMART DEVICE
Presented by Benny Chan,
Manager, SillyCube Technology Ltd.

2. 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

3. 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

4. INTRO – CLOUD
Using cloud server & the benefits

5. 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)

6. 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

7. Server Architecture
• Support LAMP => Linux, Apache, MySQL, PHP
• Common toolset for Web App Development
• Clustering web server & database to prevent single point
of failure

8. A Sample Clustering Architecture

9. INTRO – MOBILE APP
DEVELOPMENT
iOS app vs Android app development

10. 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

11. Native vs HTML5
• HTML5 (Also known as Hybrid)
• Mix native code with HTML5 code
 Platform independent => “Develop once, Deploy many”
 Flat learning curve
X Relative Slower
More suitable for information app

12. INTRO – WEB
DEVELOPMENT
How we develop a web app?

13. 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

14. How we make Data Exchange?
• Via HTTP request & response, e.g.
http://202.82.25.16/abc/login.jsp?usrID=maggie&usrPwd=t
est
• Submit requests to server to get response
• Server return JSON / XML response, common data
exchange method

15. Sample JSON file
{"imu_ftyprctrm":"FOB
HK","imu_inrqty":"12","imu_mtrqty":"144","imu_basprc":"6.2243","imu_ftycst":"28.33
00","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_tran
trm":"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.330
0","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_tran
trm":"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

16. 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"
}

17. 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

18. You can imagine…

19. 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.

20. Resource needed for mobile apps
development
• Reference mobile app & the hardware
• API instructions & documentation
• Local Web App for testing
• Of course your functional requirement

21. 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

22. Q&A