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

Devfest Lima2012

1,031

Published on

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

Published in: Technology
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,031
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
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(&quot;file:///android_asset/www/index.html&quot;); } @Override public booleanonCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.activity_main, menu); return true; }}
  • &lt;supports-screensandroid:largeScreens=&quot;true&quot;android:normalScreens=&quot;true&quot;android:smallScreens=&quot;true&quot;android:resizeable=&quot;true&quot;android:anyDensity=&quot;true&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.CAMERA&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.VIBRATE&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.ACCESS_COARSE_LOCATION&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.ACCESS_FINE_LOCATION&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.ACCESS_LOCATION_EXTRA_COMMANDS&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.READ_PHONE_STATE&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.INTERNET&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.RECEIVE_SMS&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.RECORD_AUDIO&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.MODIFY_AUDIO_SETTINGS&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.READ_CONTACTS&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.WRITE_CONTACTS&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.WRITE_EXTERNAL_STORAGE&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.ACCESS_NETWORK_STATE&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.GET_ACCOUNTS&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.BROADCAST_STICKY&quot; /&gt;
  • &lt;activity android:configChanges=&quot;orientation|keyboardHidden&quot; android:label=&quot;@string/app_name&quot;android:name=&quot;.HolaMundoActivity&quot; &gt; &lt;intent-filter &gt; &lt;action android:name=&quot;android.intent.action.MAIN&quot; /&gt; &lt;category android:name=&quot;android.intent.category.LAUNCHER&quot; /&gt; &lt;/intent-filter&gt; &lt;/activity&gt; &lt;activity android:name=&quot;org.apache.cordova.DroidGap&quot; android:label=&quot;@string/app_name&quot; android:configChanges=&quot;orientation|keyboardHidden&quot;&gt; &lt;/activity&gt;
  • &lt;!doctype html&gt;&lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt;&lt;/html&gt;
  • &lt;div data-role=&quot;page&quot;&gt; &lt;div data-role=&quot;header&quot;&gt; &lt;/div&gt; &lt;div data-role=&quot;content&quot;&gt; &lt;/div&gt;&lt;/div&gt;
  • &lt;div id=&quot;gmap-3&quot; data-role=&quot;page&quot;&gt; &lt;div data-role=&quot;header&quot;&gt; &lt;h1&gt;GeoPhotos&lt;/h1&gt; &lt;/div&gt; &lt;div data-role=&quot;content&quot;&gt; &lt;div class=&quot;ui-bar-c ui-corner-all ui-shadow&quot; style=&quot;padding:1em;&quot;&gt; &lt;div id=&quot;map_canvas&quot; style=&quot;height:350px&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt;
  • &lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?sensor=false&amp;libraries=places&quot;&gt;&lt;/script&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css&quot; /&gt;&lt;script src=&quot;http://code.jquery.com/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;ui/jquery.ui.map.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;ui/jquery.ui.map.services.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;ui/jquery.ui.map.extensions.js&quot;&gt;&lt;/script&gt;
  • &lt;script type=&quot;text/javascript&quot;&gt; $(&apos;#gmap-3&apos;).live(&quot;pageshow&quot;, function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( locationSuccess,function(){}, {enableHighAccuracy: true }); } }); &lt;/script&gt;
  • &lt;script type=&quot;text/javascript&quot;&gt; function locationSuccess(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; $(&apos;#map_canvas&apos;).gmap({ &apos;center&apos;: new google.maps.LatLng(lat, lng), &apos;zoom&apos;: 15}); getPhotos(); }&lt;/script&gt;
  • var latlng = $(&apos;#map_canvas&apos;).gmap(&apos;get&apos;, &apos;map&apos;).getCenter(); $(&apos;#map_canvas&apos;).gmap(&apos;clear&apos;, &apos;markers&apos;); var lat = latlng.lat(); var lng = latlng.lng();
  • var client_id = &quot;fc8041d4af1544a2939c3f5a9a1ef8cf&quot;; var url = &quot;https://api.instagram.com/v1/media/search?lat=&quot; + lat + &quot;&amp;lng=&quot; + lng + &quot;&amp;client_id=&quot; + client_id + &quot;&amp;callback=?&quot;;
  • $.getJSON(url, function(data){ var data_elements = data[&quot;data&quot;]; var count = 0;});
  • var lat = current_element[&quot;location&quot;][&quot;latitude&quot;]; var lng = current_element[&quot;location&quot;][&quot;longitude&quot;]; var position = new google.maps.LatLng(lat,lng) var thumbnail = current_element[&quot;images&quot;][&quot;thumbnail&quot;][&quot;url&quot;]; var caption = &quot;ver&quot;; if (current_element[&quot;caption&quot;] != null) { caption = current_element[&quot;caption&quot;][&quot;text&quot;]; } var link = current_element[&quot;link&quot;]; var info_window = &quot;&lt;img src=\\&quot;&quot; + thumbnail + &quot;\\&quot;/&gt;&lt;br/&gt;&lt;a href=\\&quot;&quot; + link + &quot;\\&quot;&gt;&quot; + caption + &quot;&lt;/a&gt;&quot;;
  • $(&apos;#map_canvas&apos;).gmap(&apos;addMarker&apos;, {&apos;position&apos;: position}).click( function(){ $(&apos;#map_canvas&apos;).gmap(&apos;openInfoWindow&apos;, {&apos;content&apos;: info_window}, this); $(&apos;#map_canvas&apos;).gmap(&apos;getMap&apos;).panTo(position);});
  • $.each(data_elements, function(index, current_element) { count++; var lat = current_element[&quot;location&quot;][&quot;latitude&quot;]; var lng = current_element[&quot;location&quot;][&quot;longitude&quot;]; var position = new google.maps.LatLng(lat,lng) var thumbnail = current_element[&quot;images&quot;][&quot;thumbnail&quot;][&quot;url&quot;]; var caption = &quot;ver&quot;; if (current_element[&quot;caption&quot;] != null) { caption = current_element[&quot;caption&quot;][&quot;text&quot;]; } var link = current_element[&quot;link&quot;]; var info_window = &quot;&lt;img src=\\&quot;&quot; + thumbnail + &quot;\\&quot;/&gt;&lt;br/&gt;&lt;a href=\\&quot;&quot; + link + &quot;\\&quot;&gt;&quot; + caption + &quot;&lt;/a&gt;&quot;; $(&apos;#map_canvas&apos;).gmap(&apos;addMarker&apos;, {&apos;position&apos;: position}).click(function(){ $(&apos;#map_canvas&apos;).gmap(&apos;openInfoWindow&apos;, {&apos;content&apos;: info_window}, this); $(&apos;#map_canvas&apos;).gmap(&apos;getMap&apos;).panTo(position); });});
  • &lt;div id=&quot;gmap-3&quot; data-role=&quot;page&quot;&gt; &lt;div data-role=&quot;header&quot;&gt; &lt;h1&gt;GeoPhotos&lt;/h1&gt; &lt;/div&gt; &lt;div data-role=&quot;content&quot;&gt; &lt;a href=&quot;javascript:getPhotos();&quot; data-role=&quot;button&quot; data-icon=&quot;refresh&quot; data-inline=&quot;true&quot; id=&quot;refresh-button&quot;&gt;Refresh data&lt;/a&gt; &lt;div id=&quot;result-count&quot; style=&quot;display:inline&quot;&gt;&lt;/div&gt; &lt;br/&gt; &lt;div class=&quot;ui-bar-c ui-corner-all ui-shadow&quot; style=&quot;padding:1em;&quot;&gt; &lt;div id=&quot;map_canvas&quot; style=&quot;height:350px&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt;
  • $(&quot;#refresh-button&quot;).addClass(&apos;ui-disabled&apos;); $(&quot;#result-count&quot;).html(&quot;loading...&quot;);… $(&quot;#refresh-button&quot;).removeClass(&apos;ui-disabled&apos;); $(&quot;#result-count&quot;).html(&quot;Showing &quot; + count + &quot; results&quot;);
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×