ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
PhoneGap Mobile web Framework for JavaScript and HTML5
2
Understanding Cross-Platform Mobile Application Development There are many smartphone platforms on the market: Android, iPhone, BlackBerry, Nokia, the Windows 7 Phone, and WebOS. Newer platforms are on the rise as well, such as Samsung’s Bada and Meego. In the year 2000, we saw a similar situation in the desktop world Microsoft Windows, Apple’s Mac, and various versions of Linux and UNIX Sun’s Java came to the rescue and provided us with a common platform on which to build. With Java’s build– once–and–run–anywhere strategy
3
Types of Mobile Applications – Standalone mobile applications – Mobile applications (based on web services) Understanding Web Services Web applications that are accessible via browsers (meant for human interfacing) Web services that are accessible via protocols like RESTful web services (meant for programmatic interfacing)
4
Mobile Applications
5
Mobile feature != web application feature
6
Input method
7
Location Awareness Push Notification
9
Challenges in Cross-Platform Mobile Application Development 1.OS Fragmentation
10
First, you have to set up different environments for each platform. Second, you need a bit of expertise with each respective OS. For a mobile developer, the learning curve may be long. Different programming languages are required for different mobile platforms. You need to be familiar with the features supported by each mobile platform;
11
Multiple Teams/Products
12
Consistent User Experience
13
Feature Fragmentation the fact is the same application will have some features turned off on some mobile platforms is a reality; the application’s logic needs to be written in that manner
14
Development Environment Fragmentation xx
16
PhoneGap
17
Cross-Platform Mobile Application Browser Component As the Common Platform
18
Mobile Browsers cv
19
Mobile Application Webviews All of these mobile platforms support embedding browsers in applications. This means one of the screens of your mobile application can actually be a browser that shows an HTML page. HTML5 and CSS3: The Standards for Writing Applications
20
PhoneGap Architecture
21
Required Installations for PhoneGap Android Project Install ADT Create AVD for the Emulator. Install the PhoneGap libraries.
22
Setting up an Environment on the Android ADT JRE PhoneGap API http://vimeo.com/album/2173109
23
ADT : Android Development Tools ติดตั้ง ADT โดยดาวน์โหลดได้จาก http://developer.android.com/sdk/index.html
24
PhoneGap API
25
Create AVD
26
Emulator Windows > Android SDK & AVD Manager Virtual Devices > New
27
Android SDK Manager
28
Emulator
29
Start Emulator
30
Create a New Android Project
31
First Step File>New> Android Project ApplicationName:HelloAndroid ProjectName:HelloAndroid Packagename: com.training.helloandroid Finish
32
Create new application
35
Project
36
Step 3 : Add PhoneGap Libraries to the Project Create www
37
Modify Android Permissions <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
38
Step 4: Modify the Main Activity package org.examples.phonegap.helloworld; import android.os.Bundle; import com.phonegap.DroidGap; public class HelloWorld extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html") ; } }
39
Write the HelloWorld Application PhoneGap /** Called when phonegap javascript is loaded */ function onDeviceReady(){ document.getElementById("helloworld").innerHTML ="Hello World! Loaded PhoneGap Framework!"; } /** Called when browser load this page*/ function init(){ document.addEventListener("deviceready", onDeviceReady, false); }...
40
Deploy to Simulator c
41
HTML5 HyperText Markup Languages......
42
body {background-color:yellow} p {color:blue}
43
function greeting(){ alert("hello world"); }
44
Body This sentence consists of the bold, italic, and under line word.
45
ul,ol,li AAA BBB CCC AAA BBB CCC 1.AAA 2.BBB 3.CCC
46
Jquery Jquery.com
47
ไวยากรณของ jQuery ไวยากรณของ jQuery ประกอบไปดวยสองส วนไดแก – ส่วนของการเลือก (selection) และการกระทํา (action) สําหรับสมาชิกตางๆของแท็ก html ซึย่งเข ยีนไวในรปูแบบของ $(selector).action() โดยท่ี $ เป็น การกําหนดใหตัวแปลภาษาเขาใจวา เป นสวนของ jQuery –(selector) เปนสวนสําหรับการคนหาแทก html ที่สนใจ – action() เป็น ฟงกชั่น ที่กระทําตอแทก html ที่กําหนดใน selector
48
ตัวอย่าง $(this).hide()- สําหรับซอนแท็กปจจุบันที่ กำลังชี้อยู่ $("p").hide()- ซอนแท็ก ที่ที่วัตถุปรากฎ ในเอกสาร $(".test").hide() - ซ่อนเท็กทุกตัวที่มีคลาสเป น test (class = “test”) $("#test").hide()- ซ่อนเท็กทุกตัวที่มี id เป็น test(id=“test”)
49
DocumentReady เปนเหตุการณ์หรือฟงกชั่นที่จะถูกเรียกใช งานหากเว็บเบราเซอรไดโหลดไฟลเว็บ นั้น จนเสร็จสมบูรณไวยากรณของฟังกชั่น เขียนได้ดังนี้ $(document).ready(function(){ alert(“hello world”); });
50
jQuery Selectors click me line 1 line 2 -------------------------------------------------- $(function(){ $("button").click(function(){ $("#test").hide(); }); });
51
ตัวอย่าง selector
52
การจัดการเหตุการณ เมื่อผู้ใช้กระทําการใดๆกับวัตถุตางๆบนจอภาพ แลวสิ่งท่ีเกิดขึ้นตามมาคือเหตกุารณ (event) ซึ่ง เหตุการณตางๆนั้นจะเป็นจดุที่ ใชสําหรับการตรวจสอบและอ้างอิงวาเกิด อะไรกับหนาเว็บแลวสิ่งท่ีจะเกิดขึ้น ตามมา คืออะไร
53
Event $("p").click(function(){ // action goes here!! }); $("p").dblclick(function(){ alert(“this button is dblclicked”); }); $("button").mouseenter(function(){ console.log("mouse enter"); }); $("button").mouseleave(function(){ console.log("mouse leave"); });
54
การอานคาแทกผานทาง jQuery click me Line 1 Line 2 $("button").click(function(){ var myname = $("input#name").val(); $("p.line1").text(" "+ myname +" "); $("p.line2").html(" "+ myname +" "); $("input#name").val(”TEST2"); });
55
GET และ POST $("button").click(function(){ $.get("get.php?name=TEST",function(data,st){ $("p").html("Data: " + data + " Status: " + st); }); }); <?php print "Hello ". $_GET["name"]; ?>
57
Using PhoneGap with jQuery Mobile
58
Not all browsers are same; you need a cross-browser framework to be successful. Even if most mobile browser are webkit based, its best to use a framework that abstracts the browser differences from a developer. If you were coding by hand, most of your code would be of drawing the UI, modifying the DOM, and making Ajax calls. A framework that lets you write less and do more would help you actually focus on the business logic. Creating an aesthetically good-looking HTML UI requires designer skills. At the same time, most mobile clients have predefined themes or schemas. It would help a developer if a framework provides good-looking UI out of the box. That way, the developer could focus on the business logic.
59
JQM open source cross-platform UI framework. It is built using HTML5, CSS3, and the very popular jQuery JavaScript library
60
First JQM Welcome Welcome! The jQuery Mobile Cookbook Enjoy reading the book...
62
Pages and Dialogs Header of Main Page Open Custom Dialog Footer of Main Page
64
Exploring PhoneGap Features 1.The accelerometer API of PhoneGap enables the application to sense change in the device’s orientation, therefore, it is able to act accordingly. This can be useful in creating applications that have a bubble level (making sure the phone is aligned horizontally to the ground). There is an option to fetch one reading of change in device orientation or to continuously receive the changes in device orientation. 2.The camera API of PhoneGap allows applications to retrieve a picture from either the camera (which is very useful for Facebook and Picasa applications) or fetch the images from already existing photo galleries.
65
The compass API of PhoneGap helps the applications know the bearing of the phone. This proves to be useful for map and navigation applications, since the map rotates as the user changes the bearing of the phone There is an option to fetch one reading of change in device heading or to continuously receive the changes in device heading. The contacts API of PhoneGap is a way for applications to read and write contacts. Many social applications can benefit from syncing phone contacts with contacts on social channels.
66
The file API of PhoneGap allows applications to read, write, and list directories and file systems. This is handy if the application is planning to change the contents of a file in the file system of the phone. This API can also help write file explorer applications. The geolocation API helps to retrieve the device’s geolocation. This is good for many applications, including map-based applications, and applications like foursquare, where the user can check-in to a place by using their GPS location. There is an option to fetch one reading of change in device geo location or to continuously receive the changes in device geo location.
67
The media API allows applications to control the media sensors and applications on the device. This API allows applications to record and playback audio and video recordings. The network API of PhoneGap provides the applications with the ability to see the state of the network. Instead of this state being just online and offline, this tells the application whether the device is on a 2G/3G/4G network or a Wi-Fi network. Such information often helps the application decide when to retrieve certain kinds of information.
68
The notification API allows applications to notify the user that something has occurred, by making a beep, vibration, or providing a visual alert. The storage API of PhoneGap provides a built-in SQL database for the applications. An application can insert, retrieve, update, and delete data through SQL statements. Applications can query data in the database, and search for a specific e- mail in a locally stored list of e-mails.
69
Example PhoneGap /** Called when phonegap javascript is loaded */ function onDeviceReady(){ document.getElementById("deviceName").innerHTML = device.name; document.getElementById("version").innerHTML = device.phonegap; document.getElementById("mobilePlatform").innerHTML = device.platform; document.getElementById("platformVersion").innerHTML = device.version; document.getElementById("uuid").innerHTML } = device.uuid; /** Called when browser load this page*/ function init(){ document.addEventListener("deviceready", onDeviceReady, false); } Device Info Device Name PhoneGap Version Mobile Platform Platform Version UUID
70
Example s
งานนำเสนอที่คล้ายกัน
