Diferencia entre revisiones de «Usuario:Juanda/phonegap/PhoneGap»

De WikiEducator
Saltar a: navegación, buscar
(→‎Instalación de plugins html y javascript para Eclipse)
 
(38 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{Usuario:juanda/phonegap/nav }}
 
{{Usuario:juanda/phonegap/nav }}
−
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}}  
+
{{#widget:Slides}} {{MiTitulo| Curso de PhoneGap}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
  
−
= Empezando con PhoneGap =
+
= Proyecto Android con Eclipse =
 
</div>
 
</div>
−
 
−
 
 
<div class="slide">
 
<div class="slide">
−
=== Arquitectura===
+
====Entorno de desarrollo en Android====
−
[[Archivo:arquitectura_phonegap.png|600px|thumb|center|Arquitectura de una aplicación en PhoneGap]]
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
===Arquitectura javascript===
+
−
*Una aplicación mediante PhoneGap tendrá dos partes bien definidas:
+
−
*JavaScript para la parte de negocio: Interfaz de usuario y funcionalidad
+
−
*Javascript para acceder y controlar el dispositivo
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
 
+
−
===Entorno de desarrollo en Android===
+
 
*JDK (Android se programa en Java)
 
*JDK (Android se programa en Java)
 
*Eclipse
 
*Eclipse
Línea 30: Línea 15:
 
*PhoneGap SDK para Android
 
*PhoneGap SDK para Android
 
*Menos PhoneGap, el resto se pueden obtener mediante una [http://developer.android.com/sdk/index.html descarga única]
 
*Menos PhoneGap, el resto se pueden obtener mediante una [http://developer.android.com/sdk/index.html descarga única]
 +
*Instalación de plugins para desarrollo web con Eclipse
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
−
===Emulador Android===
+
 
−
*[http://www.youtube.com/watch?feature=player_embedded&v=k2Ly6O9LlPw Crear dispositivos AVD] [http://www.media.formandome.es/android/avd.webm Descargar video]
+
====Personalización Eclipse para Web====
−
*Teclas de acceso rápido:
+
*Si tuvieramos instalado el Eclipse de Ubuntu 12.04 (Indigo 3.7) podemos desinstalarlo (no es necesario):
−
:Inicio: Tecla Home.
+
<source lang="bash">
−
:F2: Tecla Menú.
+
sudo apt-get remove eclipse-platform
−
:Esc: Tecla de volver.
+
</source>
−
:F7: Tecla On/Off
+
[http://www.eclipse.org/downloads/ Descargamos Eclipse Classic], la versión actual es la 4.2 (Juno).
−
:Ctrl-F5/Ctrl-F6 óKeyPad +/-: Control de volumen de audio.
+
*Descomprimimos el fichero en el directorio que nos parezca (/home/usuario) es una buena opción).
−
:Ctrl-F11 ó KeyPad 7: Cambia la orientación entre horizontal y vertical.
+
*Si al ejecutarlo nos pide el entorno de java, deberemos instalarlo:
−
:Alt-Intro: Visualiza el emulador a pantalla completa.
+
<source lang="bash">
 +
$ sudo apt-get install openjdk-7-jre
 +
</source>
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Nuevo proyecto Android===
+
*El paquete openjdk-7-jre contiene tan solo el Java Runtime Environment.
−
[[Archivo:new_android_project.png|600px|thumb|center|Arquitectura de una aplicación en PhoneGap]]
+
*Para desarrollar en Java haría falta instalar el paquete openjdk-7-jdk que contiene el Java Development Kit.
 +
*Creamos el enlace al nuevo Eclipse en nuestro sistema:
 +
<source lang="bash">
 +
juanda@juanda-PC:/usr/bin$ cat eclipse
 +
#!/bin/sh
 +
ECLIPSE=/home/juanda/eclipse/eclipse
 +
exec $ECLIPSE
 +
</source>
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Application Name:Es el nombre de la aplicación que aparecerá en el dispositivo Android. Tanto en la barra superior cuando esté en ejecución, como en el icono que se instalará en el menú de programas.
+
*Una vez que podamos ejecutar Eclipse, configuramos un nuevo repositorio de descarga de software, desde el menú ''''Help->Install new software''''
−
*Project Name:Es el nombre del proyecto. Se creará una carpeta con el mismo nombre que contendrá los ficheros del proyecto.
+
http://download.aptana.com/studio3/plugin/install
−
*Package Name:Indicamos el paquete con el espacio de nombres utilizado por nuestra aplicación. Hay que usar las reglas de los espacios de nombre en el lenguaje de programación Java. Las clases que creemos estarán dentro de él. Esto también establece el nombre del paquete donde se almacenará la aplicación generada.
+
 
 +
*Otra opción es instalar plugins específicos (es la que yo prefiero).
 +
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Minimum required SDK:Este valor especifica el mínimo nivel del API que requiere tu aplicación. Por lo tanto, la aplicación no podrá ser instalada en dispositivos con una versión inferior. Procura escoger valores pequeños para que tu aplicación pueda instalarse en la mayoría de dispositivos. Escoger valores pequeños para este parámetro tiene un inconveniente. No podremos utilizar ninguna de las mejoras que aparezcan en los siguientes niveles de API.
 
−
*Target SDK:Indica la versión más alta de Android con la que se han puesto a prueba la aplicación. Cuando salgan nuevas versiones del SDK, tendrás que probar la aplicación con estas versiones y actualizar el valor.
 
−
*Compile With: Es la versión de la plataforma con la que compila la aplicación. Se recomienda indicar la versión más reciente que haya aparecido. Las nuevas versiones no solo añaden funcionalidades al API, también añaden mejoras en el desarrollo. Utilizar un Target SDK alto no está reñido con usar un Minimum requiered SDKpequeño.
 
−
</div>
 
  
−
<div class="slide">
+
====Instalación de plugins html y javascript para Eclipse====
−
[[Archivo:Mobile_development_requirements.png|600px|thumb|center|Requerimientos para desarrollo de programas para dispositivos móviles]]
+
*Help->Install new software
 +
*Seleccionamos en los repositiorios el de Juno: Juno - http://download.eclipse.org/releases/juno e instalamos:
 +
:Web Developer Tools (html, css y javascript)
 +
:JavaScript Development Tools
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
===PhoneGap===
 
−
*Se basa en la parte común de todos los dispositivos móviles: el navegador
 
−
*Los nuevos navegadores se adhieren a estándares como HTML5/CSS3.
 
−
*HTML5 nos da mucha funcionalidad: procesos en background mediante web workers, soporte offline, base de datos...
 
−
*CSS3 permite que nos despidamos de flash para realizar gradientes, bordes redondeados, páginas responsivas, vistas de impresión, etc.
 
−
*Todas las plataformas móviles excepto Windows 7 Phone utilizan un navegador basado en webkit
 
−
</div>
 
  
−
<div class="slide">
+
==== Instalación plugin de jQuery para Eclipse Juno ====
−
[[Archivo:Mobile_os_browser.png|600px|thumb|center|Navegador en dispositivos móviles]]
+
*Instalamos el Marketplace de Eclipse desde Help->Install new Software
 +
*Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
 +
*Configuración:
 +
:Project Explorer->JavaScript Resources
 +
:Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.
 
</div>
 
</div>
−
 
−
<div class="slide">
 
−
===Webviews===
 
−
*Piensa en una aplicación PhoneGap como un navegador embebido dentro de la aplicación y que ejecuta HMTL5/CSS.
 
−
*Estos navegadores embebidos es lo que se conoce como '''webview'''
 
−
*Cada una de las pantallas de nuestra aplicación será un webview.
 
−
*Desde el webview ejecutaremos código JavaScript que comunicará con código nativo del dispositivo.
 
−
*Todos los dispositivos permiten al código en JavaScript hacer llamadas a código nativo en Java/C++/Objective C y al revés.
 
−
</div>
 
−
 
−
 
 
</div>
 
</div>

Última revisión de 11:10 29 may 2013


Proyecto Android con Eclipse

Entorno de desarrollo en Android

  • JDK (Android se programa en Java)
  • Eclipse
  • Android SDK
  • Android ADT Plugin para Eclipse
  • Android AVD (Android Virtual Device)
  • PhoneGap SDK para Android
  • Menos PhoneGap, el resto se pueden obtener mediante una descarga única
  • Instalación de plugins para desarrollo web con Eclipse

Personalización Eclipse para Web

  • Si tuvieramos instalado el Eclipse de Ubuntu 12.04 (Indigo 3.7) podemos desinstalarlo (no es necesario): 
sudo apt-get remove eclipse-platform

Descargamos Eclipse Classic, la versión actual es la 4.2 (Juno).

  • Descomprimimos el fichero en el directorio que nos parezca (/home/usuario) es una buena opción).
  • Si al ejecutarlo nos pide el entorno de java, deberemos instalarlo: 
$ sudo apt-get install openjdk-7-jre
  • El paquete openjdk-7-jre contiene tan solo el Java Runtime Environment.
  • Para desarrollar en Java haría falta instalar el paquete openjdk-7-jdk que contiene el Java Development Kit.
  • Creamos el enlace al nuevo Eclipse en nuestro sistema: 
juanda@juanda-PC:/usr/bin$ cat eclipse
#!/bin/sh
ECLIPSE=/home/juanda/eclipse/eclipse
exec $ECLIPSE
  • Una vez que podamos ejecutar Eclipse, configuramos un nuevo repositorio de descarga de software, desde el menú 'Help->Install new software'

http://download.aptana.com/studio3/plugin/install

  • Otra opción es instalar plugins específicos (es la que yo prefiero).

Instalación de plugins html y javascript para Eclipse

Web Developer Tools (html, css y javascript)
JavaScript Development Tools

Instalación plugin de jQuery para Eclipse Juno

  • Instalamos el Marketplace de Eclipse desde Help->Install new Software
  • Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
  • Configuración:
Project Explorer->JavaScript Resources
Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/phonegap/PhoneGap&oldid=13171»