Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Devfest Lima2012
Semelhante a Devfest Lima2012 (20)
Mais de ykro
Mais de ykro (20)
Último
Último (11)
Devfest Lima2012
- 1. Aplicaciones multiplataforma con PhoneGap y jQuery Mobile Adrián Catalán adriancatalan@elementalgeeks.com @ykro
- 3. Código en https://github.com /ykro/devfestlima2 012-phonegap
- 5. • Eclipse Classic 4.2.1 –http://www.eclipse.org/downloads / • Android SDK –http://developer.android.com/sdk/ installing/index.html • ADT Plugin –http://developer.android.com/sdk/ installing/installing-adt.html
- 7. Creamos un nuevo proyecto de Android dentro de Eclipse
- 9. Podemos agregar un ícono personalizado y editarlo con algunas opciones
- 11. Creamos una actividad nueva y dependiendo de la versión puede ser más complejo
- 13. Colocamos los valores deseados para los datos de la actividad y el layout
- 15. Dentro de la estructura del proyecto deben existir 2 carpetas
- 16. /assets/www /libs
- 17. Si no existe alguna de ellas es necesario crearla
- 21. De la carpeta descargada de Cordova buscamos la carpeta /lib/android
- 22. Copiamos el archio cordova-2.1.0.js a /assets/www
- 24. Repetir el proceso para el archivo cordova-2.1.0.jar a /libs
- 26. Y también para la carpeta /xml con destino a /res dentro del proyecto
- 28. Es necesario modificar el archivo de la actividad dentro de la carpeta /src
- 30. En vez de heredar de Activity se hará de DroidGap (requiere import)
- 31. Reemplazar setContentView(R.layo ut.main); por super.loadUrl("file:/ //android_asset/www/i ndex.html");
- 33. Si Eclipse muestra algún error de referencias es necesario limpiar el proyecto
- 35. Si el error permanece agregar la librería (.jar) al Build Path
- 36. Click derecho en el proyecto y luego “Configure Build Path”
- 38. De la pantalla de configuración tomar la opción “Add JARs”
- 40. Y luego elegir el JAR de Cordova
- 43. Luego editar el archivo AndroidManifest.x ml
- 44. Haga click derecho sobre el archivo, seleccione “Open With” y luego “Text Editor”
- 47. En la parte que dice <!-- agregar permisos --> agregar el siguiente contenido
- 49. En el mismo archivo modificar la actividad creada y agregue una nueva actividad como se indica a continuación
- 51. En la carpeta /assets/www agregar un archivo nuevo llamado index.html y colocar contenido de prueba
- 54. <html> <body> <h1>Hello World</h1> </body> </html>
- 55. Ejecutar y ver el resultado en el emulador
- 58. Usando el API de Instagram http://instagram.com/developer/
- 61. Usando jQuery mobile y mapas http://code.google.com/p/jquery-ui-map/
- 78. Código en https://github.com /ykro/devfestlima2 012-phonegap
- 79. ¿preguntas?
- 80. Aplicaciones multiplataforma con PhoneGap y jQuery Mobile Adrián Catalán adriancatalan@elementalgeeks.com @ykro
Notas do Editor
- package com.elementalgeeks.geophotos;import org.apache.cordova.DroidGap;import android.os.Bundle;import android.view.Menu;public class MainActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html"); } @Override public booleanonCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.activity_main, menu); return true; }}
- <supports-screensandroid:largeScreens="true"android:normalScreens="true"android:smallScreens="true"android:resizeable="true"android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
- <activity android:configChanges="orientation|keyboardHidden" android:label="@string/app_name"android:name=".HolaMundoActivity" > <intent-filter > <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> </activity>
- <!doctype html><html lang="en"> <head> </head> <body> </body></html>
- <div data-role="page"> <div data-role="header"> </div> <div data-role="content"> </div></div>
- <div id="gmap-3" data-role="page"> <div data-role="header"> <h1>GeoPhotos</h1> </div> <div data-role="content"> <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:350px"></div> </div> </div></div>
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script type="text/javascript" src="ui/jquery.ui.map.js"></script><script type="text/javascript" src="ui/jquery.ui.map.services.js"></script><script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
- <script type="text/javascript"> $('#gmap-3').live("pageshow", function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( locationSuccess,function(){}, {enableHighAccuracy: true }); } }); </script>
- <script type="text/javascript"> function locationSuccess(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; $('#map_canvas').gmap({ 'center': new google.maps.LatLng(lat, lng), 'zoom': 15}); getPhotos(); }</script>
- var latlng = $('#map_canvas').gmap('get', 'map').getCenter(); $('#map_canvas').gmap('clear', 'markers'); var lat = latlng.lat(); var lng = latlng.lng();
- var client_id = "fc8041d4af1544a2939c3f5a9a1ef8cf"; var url = "https://api.instagram.com/v1/media/search?lat=" + lat + "&lng=" + lng + "&client_id=" + client_id + "&callback=?";
- $.getJSON(url, function(data){ var data_elements = data["data"]; var count = 0;});
- var lat = current_element["location"]["latitude"]; var lng = current_element["location"]["longitude"]; var position = new google.maps.LatLng(lat,lng) var thumbnail = current_element["images"]["thumbnail"]["url"]; var caption = "ver"; if (current_element["caption"] != null) { caption = current_element["caption"]["text"]; } var link = current_element["link"]; var info_window = "<img src=\\"" + thumbnail + "\\"/><br/><a href=\\"" + link + "\\">" + caption + "</a>";
- $('#map_canvas').gmap('addMarker', {'position': position}).click( function(){ $('#map_canvas').gmap('openInfoWindow', {'content': info_window}, this); $('#map_canvas').gmap('getMap').panTo(position);});
- $.each(data_elements, function(index, current_element) { count++; var lat = current_element["location"]["latitude"]; var lng = current_element["location"]["longitude"]; var position = new google.maps.LatLng(lat,lng) var thumbnail = current_element["images"]["thumbnail"]["url"]; var caption = "ver"; if (current_element["caption"] != null) { caption = current_element["caption"]["text"]; } var link = current_element["link"]; var info_window = "<img src=\\"" + thumbnail + "\\"/><br/><a href=\\"" + link + "\\">" + caption + "</a>"; $('#map_canvas').gmap('addMarker', {'position': position}).click(function(){ $('#map_canvas').gmap('openInfoWindow', {'content': info_window}, this); $('#map_canvas').gmap('getMap').panTo(position); });});
- <div id="gmap-3" data-role="page"> <div data-role="header"> <h1>GeoPhotos</h1> </div> <div data-role="content"> <a href="javascript:getPhotos();" data-role="button" data-icon="refresh" data-inline="true" id="refresh-button">Refresh data</a> <div id="result-count" style="display:inline"></div> <br/> <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:350px"></div> </div> </div></div>
- $("#refresh-button").addClass('ui-disabled'); $("#result-count").html("loading...");… $("#refresh-button").removeClass('ui-disabled'); $("#result-count").html("Showing " + count + " results");