Aprende Phonegap Build sin dolor
3.9 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
91 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende Phonegap Build sin dolor to your Wishlist.

Add to Wishlist

Aprende Phonegap Build sin dolor

Realiza aplicaciones para iOS, Android y WindowsPhone
3.9 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
91 students enrolled
Last updated 3/2017
Spanish
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • 5 Articles
  • 32 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • El alumno conocerá los principios de Phonegap y su flujo de trabajo
  • El alumno aprenderá a crear los certificados necesarios en el flujo de trabajo de Phonegap
  • El alumno aprenderá a desarrollar una aplicación con jQuery Mobile
  • El alumno creará un archivo config.xml con los parámetros necesarios para crear su aplicación en PhoneGap
  • El alumno aprenderá a utilizar los plugins de Phonegap para desarrollar aplicaciones
View Curriculum
Requirements
  • Conocimientos básicos de JavaScript, HTML y CSS
  • Conocimientos en programación en jQuery (opcional)
Description

Una forma sencilla, pero a la vez muy potente de realizar aplicaciones para dispositivos móviles es la herramienta Phonegap. Uno de los problemas más frecuentes cuando nos enfrentamos al desarrollo de aplicaciones en dispositivos móviles, es que debemos aprender los lenguajes nativos de cada uno de ellos: para Android, JAVA, para iOS, Swift, para WindowsPhone, C#. Con Phonegap podemos aprovechar nuestros conocimientos en JavaScript, HTML y CSS para crear aplicaciones robustas que utilicen la cámara, el video, el audio, los contactos del dispositivo, así como las demás herramientas del dispositivo.

Uno de los problemas que nos enfrentamos al desarrollo de aplicaciones en los dispositivos móviles, es su aspecto, lo cual lo cubriremos con la herramienta jQuery Mobile, que nos permite cerrar el círculo. En el presente curso revisaremos brevemente esta herramientas, y en forma amplia los plugins de Phonegap, como la cámara, el acelerómetro, la brújula, entre muchos otros.

Este curso no es un curso de JavaScript o de HTML/CSS. Usted debe de tener conocimientos básicos sobre desarrollo web, aunque no debe ser un experto. Si usted maneja otras herramientas de desarrollo, verá que las primeras son muy sencillas.

Es deseable contar con un dispositivo móvil, de preferencia Android, ya que es muy sencillo trabajar en esta plataforma. Los objetos de este curso son:

El alumno:

  • Conocerá los principios de Phonegap y su flujo de trabajo.
  • Aprenderá a crear los certificados necesarios en el flujo de trabajo de Phonegap.
  • Aprenderá a desarrollar una aplicación con jQuery Mobile
  • Creará un archivo config.xml con los parámetros necesarios para crear su aplicación en PhoneGap
  • Aprenderá a utilizar los plugins de Phonegap para desarrollar aplicaciones
Who is the target audience?
  • Desarrolladores de aplicaciones para dispositivos móviles
Students Who Viewed This Course Also Viewed
Curriculum For This Course
76 Lectures
06:43:20
+
Bievenida al curso de Phonegap Build sin dolor
1 Lecture 04:37
+
Introducción a Phonegap
4 Lectures 23:27

Introducción al desarrollo con Phonegap

  • 2009: Creado por Nitobi
  • 2011: Comprado por Adobe
  • 2011: Donado por Adobe a Apache Foundation
  • 2011: Renombrado como Cordova

Frameworks para desarrollar en dispositivos móviles:

  • jQuery Mobile

  • AngularJS  

  • Kendo UI

  • PhoneJS

  • DOJO

  • IceNium

  • Sencha  

  • backbond.js

Preview 09:21

  • Tienes que entrar a la página de Phonegap build
  • Entrar al esquema de los planes.
  • Debes tener una cuenta de Adobe.
Crear una cuenta de Phonegap Build
05:47

Primero debes de afiliarte como desarrollador de Apple.

Crear una cuenta de desarrollador en Apple
08:16

En esta sección encontrarás los apuntes a la sección Introducción a Phonegap

Apuntes a la sección: Introducción a Phonegap
00:03

Contesta las siguientes preguntas para poner a prueba tus conocimientos:

Introducción a Phonegap
3 questions
+
Certificados necesarios para Phonegap
9 Lectures 24:35

Una vez que ya tiene su usuarios de desarrollador Apple, ahora necesita crear su certificado en la página de desarrolladores.

Preview 02:34

Ya que tenemos nuestro certificado, debemos crear el certificado P12.

  • Abrir el “Acceso a las llaves”

  • Acceso a llaveros >  Asistente para certificados > Solicitar un certificado  a una autoridad de certificación

Crear el certificado P12
04:04

  • Una vez generado el archivo P12, hay que subirlo a la página para generar el identificador de la aplicación.
  • Creamos un nuevo identificador
  • Usamos la dominio- inversa: com.sitio.aplicación
  • Después de pulsar continúa y verificar la información, la página generará el ID de la aplicación
  • Ya tenemos el identificador de la aplicación
Crear el identificador de la aplicación o id application
02:50

Obtener el identificador del dispositivo o dispositivos que vamos a trabajar o device's unique device identifier o UDID.

Identificar el dispositivo para pruebas
03:04

  • Debemos ahora crear un identificador que liga nuestra aplicación con el dispositivo y almacenarla en el mismo.
  • Permitirá ejecutar la aplicación en modo prueba en el dispositivo.
  • Ahora tenemos el perfil provisional
Crear el perfil provisional de iOS
03:41

Ahora debemos instalar el perfil provisional en el dispositivo por medio de iTunes.

Instalar los perfiles de iOS
02:15

  • El siguiente paso es subir el perfil a PhoneGap Build.
  • Entra a: build.phonegap.com y registrate como ya hemos visto.
  • Entrar a Account Options y seleccionar Edit Profile
Integrar los certificados de iOS es Phonegap Build
03:01

  • Para permitir bajar aplicaciones a su teléfono o tableta Android, sólo debe permitirlo en la configuración, que por omisión está apagada.
  • Vaya a “Settings application”
  • Seleccione “Security menu”
  • Active la opción de instalación por fuentes desconocidas o “Unknown sources”
Iniciar en Android con Phonegap Build
03:03

En esta clase encontrarás los apuntes a la sección 2, Certificados para trabajar con Phonegap

Apuntes sección 2: Certificados para trabajar con Phonegap
00:03

Contesta las siguientes preguntas para comprobar tus conocimientos:

Licencias para trabajar con Phonegap
2 questions
+
El framework jQuery Mobile
13 Lectures 01:45:04

En este video iniciaremos la construcción de una aplicación sencilla para llevar el conteo de un juego de Tenis. Lo realizaremos con jQuery Mobile. Posteriormente lo empaquetaremos con Phonegap y los subiremos a un dispositivo móvil.

Preview 04:05

Una aplicación de Marcador de tenis con JQM
04:46

Creación de la primera página
08:07

Creación de la segunda página: controlar los saques
09:27

Finalizar los elementos gráficos de la aplicación
09:03

Capturar los datos básicos del juego
09:58

El manejo básico de los eventos en jQuery Mobile
09:37

Control del marcador con JavaScript
10:05

El comando "refresh" para los elementos del formulario
06:08

Cambio de página con changePage()
07:38

Pasar parámetros entre páginas: pageinit
08:45

Determinar al ganador y finalizar el juego
14:16

Una vez terminado la aplicación desarrollada con jQuery (es decir, JavaScript) la empaquetamos con Phonegap para instalarlo en un dispositivo.

Empaquetar la aplicación del marcador de tenis con Phonegap
03:09

Contesta las siguientes preguntas para comprobar tus conocimientos

Aplicación con jQuery Mobile
1 question
+
El archivo config.xml
9 Lectures 33:37

El archivo config.xml es un archivo de texto plano en formato xml, bajo el estándar widget de la W3C.

Crear el archivo config.xml

Preview 06:48

Las preferencias son valores adicionales que las configuramos con los parejas “nombre” de la preferencia y su valor.

Las preferencias no son compatibles para todas las plataformas.

<preference name="phonegap-version" value="3.7.0" />

<preference name="orientation" value="portrait" />

<preference name="fullscreen" value="false" />

<preference name="android-installLocation" value="auto" />

Las preferencias en el archivo config.xml
02:39

Para extender las funcionalidades de Phonegap/Cordova requerimos importar librerías externas o “plugins”.

Los plugins pueden ser “core”, de terceros o propios.

Utilizamos en el archivo config.xml la etiqueta <plugin>, por ejemplo:

<plugin name="cordova-plugin-device" spec="~1.1.4" />

El manejo de librerías o plugins dentro del archivo config.xml
04:57

Muy importante: La aplicación (por lo general index.html) debe tener una de las siguientes llamadas:

<script type="text/javascript" src="phonegap.js"></script>

O

<script type="text/javascript" src="cordova.js"></script>

El archivo phonegap.js
03:12

Los iconos dependen de la plataforma que se desarrolle.

Existen dos formas de especificar la plataforma. Primero es como atributo:

<icon src="icon-60@3x.png" platform="ios" width="180" height="180" />

El uso genérico del ícono de la aplicación
04:09

Phonegap soporta classic, retina, iPhone 5 y iPad displays.

iOS 7:

<!-- iPhone 6 / 6+ -->

<icon src="icon-60@3x.png" platform="ios" width="180" height="180" />

El manejo de los iconos para iOS
03:17

Android maneja “calificadores”:

<icon src="ldpi.png" platform="android" qualifier="ldpi" />

<icon src="mdpi.png" platform="android" qualifier="mdpi" />

<icon src="hdpi.png" platform="android" qualifier="hdpi" />

<icon src="xhdpi.png" platform="android" qualifier="xhdpi" />

<icon src="xxhdpi.png" platform="android" qualifier="xxhdpi" />

<icon src="fr-xxhdpi.png" platform="android" qualifier="fr-xxhdpi" />

Manejo de los iconos para Android
02:58

Puedes tener o no tener una pantalla de entrada. Debe ser un “png” y puedes contar con los atributos src, width, height o platform.

<splash src="splash/ios/Default-568h@2x~iphone.png" platform="ios" width="320" height="480" />

Las pantallas de inicio o splashscreen
05:34

En esta sección encontrarás los apuntes a la sección del archivo config.xml

Apunes a la sección 4: el archivo config.xml
00:03

Contesta las siguientes preguntas para comprobar tus conocimientos

El archivo config.xml
5 questions
+
Información del dispositivo
6 Lectures 24:53

El plugin “device” permite obtener información del dispositivo:

En el archivo config.xml hay que incluir la etiqueta:

<plugin name="cordova-plugin-device" spec="~1.1.4" />

El plugin "device"
02:16

Por medio del plugin splashscreen podemos controlar la pantalla inicial desde la aplicación.

Debes incluir dentro del archivo config.xml la siguiente referencia:

<plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />

Preview 03:47

El plugin globalization nos permite obtener datos de la configuración regional del dispositivo.

En el archivo config.xml debe incluir la siguiente etiqueta:

<plugin name="cordova-plugin-globalization" spec="~1.0.5" />

El plugin "globalization"
04:14

Crear una aplicación multilenguaje con Globalization
03:53

Para poder acceder un recurso externo a la aplicación, ubicado en una dirección web. Debemos de incluirla en una “lista blanca”.

En el archivo config.xml hay que incluir la siguiente etiqueta:

<plugin name="cordova-plugin-whitelist" spec="~1.3.1" />

Preview 05:23

Por medio de este plugin puede abrir una ventana del navegador sin abandonar la aplicación.

Para que funcione correctamente el plugin, la aplicación debe estar iniciada.

Para usar el plugin, debe de llamarlo desde el archivo config.xml con la siguiente etiqueta:

<plugin name="cordova-plugin-inappbrowser" spec="~1.6.1" />

El plugin "inAppBrowser": opciones y eventos
05:20
+
Manejo de eventos en Phonegap
9 Lectures 35:40

Este plugin nos brinda el tipo de conexión wifi del dispositivo.

Debe incluir la siguiente etiqueta en el archivo config.xml:

<plugin name="cordova-plugin-network-information" spec="~1.3.1" />

El plugin "Network-information"
04:47

Por medio del plugin battery-status, podemos saber el estado de la batería.

Sus eventos son:

batterystatus

batterycritical

batterylow

El plugin "battery-status"
02:52

Eventos de las teclas del dispositivo:

document.addEventListener("backbutton", onBackButton,false);

document.addEventListener("menubutton", onMenuButton,false);

document.addEventListener("searchbutton",onSearchButton, false);

El manejo de eventos: los botones del dispositivo
03:31

El API network-information nos indica cuando la aplicación está en línea (online) y fuera de línea (offline).

Podemos apagar la conexión de red del dispositivo o seleccionar el “modo avión”.

Desde el archivo config.xml debes de agregar la siguiente etiqueta:

<plugin name="cordova-plugin-network-information" spec="~1.3.1" />

El manejo de eventos: los estados de la conexión
04:28

Eventos de pausa/resume

Eventos de pausa/resume:

Pausa se dispara cuando mandamos la aplicación al background.

Resume se dispara cuando regresamos la aplicación del background.

El manejo de eventos: pausa y reinicio
03:34

Por medio del plugin dialogs podemos enviar ventas de alerta y de confirmación personalizadas.

También podemos hacer que suene el “beep” del equipo y la vibración del mismo.

En el archivo config.xml debe añadir la etiqueta:

<plugin name="cordova-plugin-dialogs" spec="~1.3.1" />

Nota: Hay equipos que no cuentan con la opción de vibración.

El plugin "dialogs": el mensaje de alerta
04:16

Su sintaxis es:

navigator.notification.beep(veces);

Activar el beep

En el archivo config.xml debe añadir la etiqueta:

<plugin name="cordova-plugin-dialogs" spec="~1.3.1" />

El plugin "dialogs": el uso de la campana del dispositivo o beep
02:26

El plugin confirm

Su sintaxis es:

navigator.notification.confirm(

'Eres el ganador!', // mensaje (message)

onConfirm,         // función 'callback'

'Fin del juego',     // titulo (title)

    'Reiniciar,Salir'    // botones (buttonLabels)

);

Activar el confirm

En el archivo config.xml debe añadir la etiqueta:

<plugin name="cordova-plugin-dialogs" spec="~1.3.1" />

El plugin "dialogs": la ventana de confirmación
02:49

La notificación Prompt del plugin Dialogs
06:57
+
Sensores del dispositivo
4 Lectures 23:26

El acelerómetro detecta los cambios (deltas) de los ejes x,y,z.

Necesita estar el dispositivo “disponible” (deviceready).

Hay que instalar la siguiente API en el config.xml:

<plugin name="cordova-plugin-device-motion" spec="~1.2.3" />

El plugin del acelerómetro, getCurrentAceleration()
07:03

watchAcceleration: Regresa los intervalos del movimiento del dispositivo (m/s^2).

Por omisión es cada segundo.

clearWatch: Detiene el refresco del movimiento del dispositivo.

El plugin del acelerómetro, watchAceleration() y clearWatch()
05:09

Por medio del API camera podemos utilizar los recursos de la cámara del dispositivo.

En el archivo config.xml hay que incluir la etiqueta:

<plugin name="cordova-plugin-camera" spec="~2.3.1" />

El plugin "compas" para el manejo de la brújula
05:22

Verificamos si la geolocalización es soportada:

if(navigator.geolocation){

 ...

}

Recuperamos las coordenadas:

navigator.geolocation.getCurrentPosition(muestraCoordenadas, onError, opciones

El plugin "geolocation"
05:52
+
Manejo de los multimedios en Phonegap
4 Lectures 26:05

Por medio del API camera podemos utilizar los recursos de la cámara del dispositivo.

En el archivo config.xml hay que incluir la etiqueta:

<plugin name="cordova-plugin-camera" spec="~2.3.1" />

El plugin "camera": opciones
05:32

Por medio del API camera podemos utilizar los recursos de la cámara del dispositivo.

En el archivo config.xml hay que incluir la etiqueta:

<plugin name="cordova-plugin-camera" spec="~2.3.1" />

El plugin "camera": ejemplo
05:44

Aplicación de filtros a la foto tomada con la cámara
08:12

El plugin "capture": utilizar el audio, el video y las imágenes
06:37
+
Manejo de archivos y directorios en Phonegap
5 Lectures 37:37
El plugin"file"
10:55

Leer el contenido de una carpeta o directorio con PhoneGap
07:58

fileURL: Es la URL completa del recurso a subir.

server: Es la URL del servidor codificado como encodeURI().

successCallback: Función callback que pasa al objeto FileUploadResult.

errorCallback: Es la función de callback que se ejecuta si ocurrió un error al generar el objeto FileUploadResult. Invoca un objeto FileTransferError.

Opciones: objeto con las siguientes principales propiedades:

El plugin "fileTransfer": opciones
04:50

Por medio de este plugin podemos bajar y subir archivos desde y hacia nuestra aplicación.

Este plugin está basado en dos objetos: FileTransfer, FileUploadOptions

Necesita estar el dispositivo listo para que funcione el filetransfer.

Hay que añadir el plugin en el archivo config.xml.

<plugin name="cordova-plugin-file-transfer" spec="~1.6.1" />

El plugin "fileTransfer": ejemplo
05:47

Bajar un recurso del servidor al dispositivo con el plugin File-Transfer
08:07
3 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
986 Reviews
12,882 Students
34 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.