Learn how to build amazing Mobile Apps using HTML5, CSS#, and JavaScript in MeeGo - Rajesh Lal

1. Presented by:
Build Amazing Mobile Apps
using HTML5, CSS3 and JavaScript
Rajesh Lal, Nokia

2. 2
Why Mobile Apps
3 Types of Apps
How to Build Apps
3 Demos N900
When to Use Each
Agenda

3. Why Mobile Apps
€ 4.5 Billion: Consumers will spend in Mobile App Stores in 2010
Source Gartner: http://www.gartner.com/it/page.jsp?id=1282413
0
5000
10000
15000
20000
25000
"2009" "2010" "2013"
Mobile App Store Worldwide
Downloads in M Revenue in €M
€ 4.5 Billion

4. 4
Why Mobile Apps
3 Types of Apps
How to Build Apps
3 Demos N900
When to Use Each

5. 5
REACH
RICH
Web
Apps
Hybrid
Apps
Native
Apps
(on Web)
(on device)

6. Why Mobile Apps
3 Types of Apps
How to Build Apps
3 Demos N900
When to Use Each
6

7. 7
Native Web
Hybrid
free content
Update is Difficult
High development cost
Easy to develop
Self distribution
maintain
Difficult monetization
Connection required
wider market
lower development cost
No DRM
App store billing
Better functionality
Robust
Device APIs
Paid Content offline
Secure
Size limit

8. 8
Native App Web AppHybrid App
Content Heavy
Free Service
Low cost
Easy Maintenance
Example Web Apps
Bank apps
Social Networks
Search Apps
Content Heavy
Want to Monetize
Low cost
Example
- Specialized Medical Apps
- Map Apps
Feature Heavy
Premium content
Paid Customers
Privacy is important
Examples
- Games
- Location services
- App using device data
- Premium Media
When to Use Each Type

9. Why Mobile Apps
3 Types of Apps
How to Build Apps
3 Demos N900
When to Use Each
9

10. 10
How to Build Mobile Apps
MeeGo is fully compatible to HTML5 & Qt
• Nokia Qt SDK For Maemo/MeeGo
• Works on Linux, Windows and Mac
• Cross Compilation
• MADDE
(Maemo App. Development & Debugging Env.)
Start Developing on N900 NOW !

11. 11
HTML5 for Web App
CSS3 in Hybrid
JavaScript
{

12. Why Mobile Apps
3 Types of Apps
How to Build Apps
3 Demos N900
When to Use Each
12

13. 13
Demo 1
HTML5 Web App

14. 14
HTML 5 Powers Web App
HTML5
Video
Canvas
Local Storage
Geolocation
form controls
describe contentcontenteditable
Audio header, footer, nav
Validation
HTML4 / XHTML
threads

15. 15
Demo 1: HTML 5 Web App
Demo Time

16. 16
Demo 2
Hybrid App with CSS3
(In 3 steps)

17. 17
CSS3 = Amazing styles and Animations
CSS3
Gradients
Animation
Opacity
RGBA Colors
@font face
Box shadow
Rounded Corners Text Shadow
Multiple Background Images
Border with Images

18. 18
Hybrid App using CSS3 and QtWebkit
CSS3 Web App
Qt Webkit
Qt
Container

19. 19
Hybrid App with CSS3
Create new
Mobile Qt
Application
1

20. 20
Hybrid App with CSS3
Select
N900 PR1.3
1

21. 21
Hybrid App with CSS3
1

22. 22
Hybrid App with CSS3
QT += webkit networkIn Project.pro file add2
3 In mainwindow.ui , in design view add QWebView
Add location of your web app in url property
In our case add this to
HybridAppCSS3.pro

23. 23
Hybrid App with CSS3
Demo Time

24. 24
Demo3
Native App with JavaScript and QML
(In 5 steps)

25. 25
QML = Powerful Declarative Language
QML
Shapes
Based on JavaScript
Audio Video
Transitions
property bindings
JavaScript expressions
States
Image
Qt Declarative runtime
C++ Binding
Animation

26. 26
Native App using JavaScript and QML
Qt Container
QMLJavaScript
C++ is not Required

27. 27
JavaScript file

28. 28
QML file

29. 29
Native App with JavaScript and QML
Create new Mobile Qt Application NativeQMLJS1
Select N900 PR1.3
Remove files
• mainwindow.ui
• mainwindow.h
• mainwindow.cpp

30. 30
Native App with JavaScript and QML
QT += declarativeIn Project.pro file add2
In our case add this to
NativeQMLJS.pro
3 In main.cpp, include QtDeclarative and add the code

31. 31
Add QML file and JavaScript File as resources4
Native App with JavaScript and QML
* Make sure your JavaScript file name is lowercase
Add the binding in QML file and call JavaScript5
import "clock.js" as MyClock
…
Text {
id:txttime
text: MyClock.gettime()
}

32. 32
Native App with QML & JavaScript
Demo Time

33. 33
Mobility QML Plug-ins
QML Plug-ins Qt Mobility API
Gallery Document Gallery API
Location Location API
Multimedia API includes audio and video
Service
Framework
Discovering and connecting to
services
Messaging Messaging , email ,sms etc

34. 34
Multimedia QML Plugins
import Qt 4.7
import QtMultimediaKit 1.1
...
Audio {
id: myMedia
source: “beethoven.wav"
}
MouseArea {
id: playArea
anchors.fill: parent
onPressed: { myMedia.play() }
}

35. 35
Location QML Plugins
import Qt 4.7
import QtMobility.location 1.1
Rectangle {
width: 500
height: 500
focus: true
Map {
id: myMap
size.width: parent.width
size.height: parent.height
zoomLevel: 5
center: Coordinate {
latitude: 101
longitude: 202
}
}
}

36. Presented by:
Thank You
email rajesh.lal@nokia.com
MADDE
http://wiki.maemo.org/MADDE/QtCreator_integration_for_windows
Qt SDK
http://qt.nokia.com/downloads/
Qt Mobility API
http://doc.qt.nokia.com/qtmobility-1.1.0/qml-plugins.html
Build on N900 Now !