Your SlideShare is downloading. ×
0
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
Devfest Lima2012
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,019

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,019
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

    ×