Devfest Lima2012
Upcoming SlideShare
Loading in...5
×
 

Devfest Lima2012

on

  • 1,164 views

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

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

Statistics

Views

Total Views
1,164
Views on SlideShare
1,132
Embed Views
32

Actions

Likes
4
Downloads
33
Comments
3

2 Embeds 32

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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; }}
  • <!doctype html>
  • GeoPhotos
  • 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 = "<a href="\\&quot;&quot;">" + caption + "</a>";
  • $(&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["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 = "<a href="\\&quot;&quot;">" + caption + "</a>"; $(&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); });});
  • GeoPhotos <a>Refresh data</a>
  • $("#refresh-button").addClass(&apos;ui-disabled&apos;); $("#result-count").html("loading...");… $("#refresh-button").removeClass(&apos;ui-disabled&apos;); $("#result-count").html("Showing " + count + " results");

Devfest Lima2012 Devfest Lima2012 Presentation Transcript

  • Aplicaciones multiplataforma conPhoneGap y jQuery Mobile Adrián Catalán adriancatalan@elementalgeeks.com @ykro
  • ¿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/ installing/index.html• ADT Plugin –http://developer.android.com/sdk/ installing/installing-adt.html
  • • 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 @ykro