Archivo de la etiqueta: tutorial en espa帽ol

Tutorial de Ionic – Hola Mundo en Ionic

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el capitulo anterior vimos como instalar ionic y las herramientas de desarrollo que necesitamos para crear aplicaciones multiplataforma con ionic 2.

Ahora vamos a crear nuestra primera aplicaci贸n con Ionic 2, el famoso “hola mundo” que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programaci贸n o framework.

Para crear聽nuestro proyecto “hola mundo” iremos a la consola de comandos o terminal y escribimos el siguiente comando:

ionic start hola-mundo blank

Tras un rato descargando los paquetes necesarios para crear nuestra aplicaci贸n ya estar谩 listo nuestro proyecto.

El comando start de ionic cli (commandline interface) 聽se utiliza 聽para crear (iniciar) un nuevo proyecto, el siguiente par谩metro es el nombre del proyecto, en este caso hola-mundo, el siguiente par谩metro es el tipo de plantilla que vamos a utilizar, en este caso blank que indica que utilizaremos una plantilla vac铆a.

Existen tres tipos de plantillas:

  • blank : Crea una plantilla vac铆a.
  • sidemenu: Crea una plantilla con men煤 lateral.
  • tabs: Crea una plantilla con Tabs (Pesta帽as).聽

Para ver el resultado en el navegador debemos entrar dentro de la carpeta del proyecto ‘hola-mundo’ que se acabamos de crear con ionic start y escribimos el siguiente comando:

ionic serve -l

Con el par谩metro -l nos muestra como queda nuestra app en las tres plataformas soportadas, es decir, IOS, Android 聽y Windows.

captura-de-pantalla-2016-12-13-a-las-19-21-19
Vista de como quedar铆a nuestra primera App con plantilla Blank en el navegador.

Si no utilizamos -l mostrar谩 solo una plataforma.

Para ver las posibilidades de ionic podemos crear un proyecto de prueba con plantilla tabs 聽y otro con sidemenu:

ionic start appTabs tabs
Aplicaci贸n con plantilla tabs
Aplicaci贸n con plantilla tabs
ionic start appSide sidemenu
Aplicaci贸n con plantilla sidemenu
Aplicaci贸n con plantilla sidemenu

Como podemos ver sin nosotros hacer nada tenemos creada la estructura de una app que podremos modificar para a帽adir lo que necesitemos.

En el pr贸ximo capitulo profundizaremos en la estructura de carpetas de una aplicaci贸n con ionic 2 y modificaremos nuestro hola mundo.

 

Tutorial de Ionic – Instalar ionic y las herramientas necesarias para el desarrollo

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 2/3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

En el post anterior hicimos una introducci贸n sobre ionic 2 y sus caracter铆sticas.

Hoy vamos a ver como instalar ionic 2 y todas la herramientas necesarias para empezar a desarrollar tus aplicaciones con Ionic 2.

Para instalar ionic debemos instalar primero nodejs 聽para ello descargamos聽聽el paquete mas reciente de http://nodejs.org/聽y lo instalamos.聽

Una vez instalado nodejs abrimos un terminal (consola del sistema) e instalamos ionic y cordova con el siguiente comando:

npm install -g cordova ionic

Si lo est谩s ejecutando en linux o en mac debes utilizar sudo por delante, es decir:

sudo npm install -g cordova ionic

Al utilizar sudo ejecutamos el comando con privilegios de administrador (root) por lo que nos pedir谩 la contrase帽a de usuario.

Una vez instalado ya podr铆amos crear aplicaciones con ionic y ejecutarlas en el navegador, sin embargo para poder ejecutarlas en un dispositivo o emulador Android debemos instalar las herramientas de desarrollo de Android, as铆 mismo para poder ejecutar la app para IOS necesitaremos instalar Xcode.

Cabe mencionar que aunque Android Studio lo podemos instalar en cualquier plataforma, es decir podemos desarrollar para Android desde un pc con Windows, Linux o MAC, Para poder compilar las Apps para IOS necesitamos un MAC con Xcode instalado.

Para instalar Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito.

Existen soluciones en la nube como Phonegap Build para poder compilar una App para IOS si no disponemos de un MAC.

Ahora vamos a ver como instalar android studio en Ubuntu (Linux), Mac OS y Windows:

Como instalar Android Studio en Ubuntu

Primero debemos instalar聽Java SE Development Kit 8:

Desde consola ejecutamos los siguientes comandos:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer

Para verificar la versi贸n de java instalada escribimos:

java -version

Ahora para configurar las variables de entorno escribimos lo siguiente:

sudo apt-get install oracle-java8-set-default

Para versiones de 64 bits tenemos que instalar los siguientes paquetes:

sudo dpkg --add-architecture amd64
sudo apt-get update
sudo apt-get install libncurses5:amd64 libstdc++6:amd64 zlib1g:amd64

Por ultimo聽Instalamos Android studio via ppa con los siguientes comandos:

sudo apt-add-repository ppa:paolorotolo/android-studio
sudo apt-get update
sudo apt-get install android-studio lib32stdc++6 mesa-utils
cd /opt/android-studio/bin
./studio.sh

 

Como Instalar Android Studio en Mac

Instalamos java SE

Descargamos la 煤ltima versi贸n de aqui:

http://www.oracle.com/technetwork/es/java/javase/downloads/index.html

La instalamos y despu茅s descargamos e instalamos android studio

https://developer.android.com/studio/index.html

Despu茅s de descargar el paquete seguimos los siguientes pasos:

  1. Ejecuta el archivo DMG de Android Studio.
  2. Arrastra Android Studio y su茅ltalo en la carpeta Applications. Luego inicia Android Studio.
  3. Elige si deseas importar configuraciones previas de Android Studio y luego haz clic en OK.
  4. El asistente de configuraci贸n de Android Studio te guiar谩 en el resto de la configuraci贸n. Esto incluye la descarga de componentes del Android SDK que se necesiten para el desarrollo.

Como instalar android studio en windows

Instalamos java SE

Descargamos la 煤ltima versi贸n de aqui:

http://www.oracle.com/technetwork/es/java/javase/downloads/index.html

Buscamos variables de entorno en el panel de control, le damos a帽adir nueva y le damos el nombre de JAVA_HOME.

Despues le damos a examinar directorio y buscamos donde esta la carpeta del jdk, en mi caso en C:\Program Files\Java\jdk1.8.0_101

Le damos a aceptar y listo.

Ahora descargamos android studio de aqu铆:

https://developer.android.com/studio/install.html

Una vez descargado lo ejecutamos el instalador y ya tendr铆amos Android studio funcionando.

Instalar un editor de c贸digo compatible con聽TypeScript

Para finalizar de instalar las herramientas necesarias, como 煤ltimo paso necesitaremos un editor de c贸digo que nos coloree typescript para facilitarnos el trabajo. En realidad podr铆amos editar el c贸digo con cualquier editor de texto plano, pero personalmente recomiendo utilizar Visual Studio Code de Microsoft que es multiplataforma y pod茅is descargarlo desde el siguiente enlace:聽 https://code.visualstudio.com/

Este editor nos marcara los errores de sintaxis mientras introducimos el c贸digo lo que no ayuda bastante. Si prefieres otros editores聽eres libres de utilizar el que m谩s te guste.

Puedes dejar en los comentarios que editor con soporte para typescript utilizas y as铆 ampliamos el abanico de posibilidades.

En el pr贸ximo post veremos como crear por fin nuestro primer hola mundo con Ionic 2.

 

Tutorial de Ionic – Construye Apps m贸viles multiplataforma con ionic desde cero

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 2/3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos, hoy voy a comenzar con la聽serie de entradas destinadas a aprender a crear aplicaciones m贸viles multiplataforma utilizando Ionic.

Introducci贸n

Aunque este tutorial est谩 destinado a aprender ionic desde cero si que es recomendable tener un conocimiento b谩sico de javascript, html y css, por lo que si eres desarrollador web podr谩s reciclar tus conocimientos.

Aunque los puristas tal vez piensen que es mejor aprender una base te贸rica solida antes de empezar a programar nada, creo que esto puede hacer que muchos desistan 聽por el camino. En cambio es mucho m谩s motivador ver que nada m谩s empezar se puede hacer cosas que funcionan aunque sean sencillas y ir sobre la marcha aprendiendo conceptos a medida que los vamos necesitando.

Es probable que se queden cosas en el tintero pero aprender谩s lo suficiente para empezar a desarrollar 聽tus propias apps y podr谩s investigar por tu cuenta cuando te encuentres con alguna necesidad que no este explicada en este tutorial.

Iremos aprendiendo las cosas sobre la marcha seg煤n las vayamos necesitando en los ejemplos de aplicaciones que vamos a realizar.

Voy a intentar separar el tutorial en entradas relativamente cortas para que se haga m谩s ameno el aprendizaje.

Vamos a ver una peque帽a introducci贸n sobre que es ionic y que nos aporta en el desarrollo de aplicaciones m贸viles.

驴Ques es ionic?

Ionic es un framework que nos permite crear de una manera r谩pida y sencilla aplicaciones m贸viles multiplataforma (Android, IOS, Windows) utilizando tecnolog铆as web (HTML, JAVASCRIPT, CSS).
Para poder utilizar elementos web en la app utiliza lo que se conoce como una 聽Webview.
A este tipo de aplicaciones se las conoce como aplicaciones h铆bridas.聽El resultado final es una app “nativa”聽que puedes subir a las tiendas de apps.

Ionic 2 esta basado en Apache Cordova y Angular 2, por lo que ser谩n necesarios unos conocimientos b谩sicos de estas tecnolog铆as para sacar mayor provecho al desarrollo.

Adem谩s ionic 2 utiliza TypeScript como lenguaje de programaci贸n, si no dominas las anteriores tecnolog铆as mencionadas no te preocupes, tratare de ir explicando las cosas b谩sicas necesarias seg煤n las vayamos necesitando en los ejemplos que realizaremos.

No profundizare en cada tecnolog铆a, es decir no voy a hacer un tutorial 聽completa de Angular 2, seguro que puedes encontrar con facilidad muchos en la web, solo aprenderemos una peque帽a base que nos permita saber lo suficiente para realizar las cosas m谩s comunes de una app, sin embargo podr谩s investigar por tu cuenta si en alg煤n momento necesitas saber algo m谩s sobre Angular.

Al terminar sabr谩s lo suficiente para defenderte y crear tus propias aplicaciones.

Ventajas de utilizar ionic para desarrollar apps

La principal ventaja de utilizar Ionic es que es multiplataforma, es decir que con un mismo c贸digo podemos generar apps para Android, IOS y Windows, por lo que tiempo y coste de desarrollo y mantenimiento de una app se reduce sensiblemente.

Otra ventaja es que si dispones de conocimientos previos en desarrollo web frontend ya tienes medio camino andado ya que la curva de aprendizaje ser谩 mucho menor.

Adem谩s Ionic dispone de muchos componentes ya creados para que sin apenas esfuerzos puedas desarrollar una app de apariencia profesional聽sin necesidad de ser un gran dise帽ador.

Desventajas de utilizar ionic para desarrollar apps

La principal diferencia con las apps puramente nativas es que estas utilizan los elementos de la interfaz nativa de la plataforma en lugar de correr en una webview, lo que supone una mayor fluidez en el funcionamiento de la app a la hora de cambiar de pantalla, hacer scroll, etc, sin embargo con los dispositivos cada vez m谩s potentes que existen en el mercado y la mejora en el rendimiento de las webview que incorporan las versiones modernas de los sistemas operativos m贸viles, 聽esta diferencia en el rendimiento es cada vez menos notoria y en la mayor铆a de los casos la experiencia de usuario de una aplicaci贸n h铆brida desarrollada con ionic bien dise帽ada聽ser谩 muy similar a la de una aplicaci贸n nativa.

Diferencia entre Ionic 2 e Ionic 1

En ionic 1 la apariencia de la App era igual para cada plataforma salvo que modificases elementos en funci贸n de la聽plataforma lo que hace m谩s engorroso聽el dise帽o si queremos diferenciar el dise帽o聽seg煤n la聽plataforma.
Con聽ionic 2 sin tener que modificar nada tendremos un dise帽o con el estilo propio de cada plataforma (con material design en caso de Android) dando una 聽apariencia de app nativa.

La estructura del proyecto y la organizaci贸n del c贸digo esta mejor estructurada y es m谩s modular, lo que nos permite un desarrollo mas organizado y f谩cil de mantener.

Ionic 2 dispone del comando Ionic generator que nos permite desde consola crear diferentes elementos como p谩ginas, tabs, providers etc, ahorrandonos tiempo de desarrollo. Veremos Ionic generator y m谩s adelante.

Ionic 2 se basa en Angular 2 por lo que incorpora las mejoras en cuanto a rendimiento que ha incorporado AngularJs en su nueva versi贸n.

Como ya he mencionado Ionic 2 utiliza typescript, lo que nos permite utilizar toda la potencia de la programaci贸n orientada a objetos, tipado est谩tico, adem谩s nos permite utilizar todos los elementos de EcmaScript 6 y muchos del futuro EcmacScript 7. Veremos esto con m谩s profundidad en pr贸ximos cap铆tulos.