Devfest Lima2012
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Devfest Lima2012

  • 1,245 views
Uploaded on

https://github.com/ykro/devfestlima2012-phonegap

https://github.com/ykro/devfestlima2012-phonegap

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,245
On Slideshare
1,213
From Embeds
32
Number of Embeds
2

Actions

Shares
Downloads
35
Comments
3
Likes
4

Embeds 32

https://twitter.com 31
https://fr.twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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");

Transcript

  • 1. Aplicaciones multiplataforma conPhoneGap y jQuery Mobile Adrián Catalán adriancatalan@elementalgeeks.com @ykro
  • 2. ¿quénecesitamos?
  • 3. Código enhttps://github.com/ykro/devfestlima2 012-phonegap
  • 4. • 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
  • 5. • PhoneGap –http://phonegap.com/download
  • 6. Creamos un nuevoproyecto de Android dentro de Eclipse
  • 7. Podemos agregar unícono personalizado y editarlo con algunas opciones
  • 8. Creamos una actividad nueva ydependiendo de laversión puede ser más complejo
  • 9. Colocamos los valores deseadospara los datos de laactividad y el layout
  • 10. Dentro de la estructura delproyecto debenexistir 2 carpetas
  • 11. /assets/www /libs
  • 12. Si no existe alguna de ellas es necesario crearla
  • 13. De la carpeta descargada deCordova buscamos la carpeta /lib/android
  • 14. Copiamos el archio cordova-2.1.0.js a /assets/www
  • 15. Repetir el proceso para el archivocordova-2.1.0.jar a /libs
  • 16. Y también para lacarpeta /xml con destino a /res dentro del proyecto
  • 17. Es necesariomodificar el archivo de la actividad dentro de la carpeta /src
  • 18. En vez de heredarde Activity se hará de DroidGap(requiere import)
  • 19. ReemplazarsetContentView(R.layo ut.main); porsuper.loadUrl("file:///android_asset/www/i ndex.html");
  • 20. Si Eclipse muestra algún error de referencias esnecesario limpiar el proyecto
  • 21. Si el errorpermanece agregar la librería (.jar) al Build Path
  • 22. Click derecho en el proyecto y luego “Configure Build Path”
  • 23. De la pantalla de configuracióntomar la opción “Add JARs”
  • 24. Y luego elegir elJAR de Cordova
  • 25. Luego editar el archivoAndroidManifest.x ml
  • 26. Haga click derecho sobre elarchivo, seleccione “Open With” yluego “Text Editor”
  • 27. En la parte que dice <!-- agregar permisos -->agregar el siguiente contenido
  • 28. En el mismo archivo modificar la actividad creada y agregue una nueva actividad comose indica a continuación
  • 29. En la carpeta/assets/www agregar un archivo nuevollamado index.html ycolocar contenido de prueba
  • 30. <html> <body><h1>Hello World</h1> </body> </html>
  • 31. Ejecutar y ver elresultado en el emulador
  • 32. Usando el API de Instagram http://instagram.com/developer/
  • 33. Usando jQuerymobile y mapas http://code.google.com/p/jquery-ui-map/
  • 34. Código enhttps://github.com/ykro/devfestlima2 012-phonegap
  • 35. ¿preguntas?
  • 36. Aplicaciones multiplataforma conPhoneGap y jQuery Mobile Adrián Catalán adriancatalan@elementalgeeks.com @ykro