Devfest Lima2012

1,719 views
1,407 views

Published on

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

Published in: Technology
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,719
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
44
Comments
3
Likes
4
Embeds 0
No embeds

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");
  • Devfest Lima2012

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

    ×