Your SlideShare is downloading. ×
Devfest Lima2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Devfest Lima2012

1,013

Published on

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

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

Published in: Technology
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,013
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
3
Likes
4
Embeds 0
No embeds

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

    ×