Cargando

Ir a contenido


 


Desarrollo de aplicaciones móviles con Ionic Framework

El desarrollo de aplicaciones móviles se encuentra en auge y distintas empresa investigan la manera de facilitar a los usuarios y desarrolladores la creaciones y mantenimiento de aplicaciones móviles.


Escrito por el jun 08 2015 08:14 framework ionic html5 css


El framework Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Además respeta una estructura de código MVC (Modelo, Vista, controlar)

Ionic es un marco de desarrollo de aplicaciones móviles híbridas con HTML5. Las aplicaciones híbridas son esencialmente sitios web que se ejecutan en forma nativa en Android o IOS. Anteriormente habíamos publicado dos tutoriales tratando el tema de aplicaciones híbridas ellas son: Crear aplicaciones web nativas en Android con Apache Cordova y Aplicaciones para Android con Apache Cordova y Sqlite.

Ionic Framework contiene todo lo que necesitamos para empezar la construcción de aplicaciones y establece una base para el desarrollo más avanzado. Iconic Framework nos ayuda con CSS y Js tiene mucha parte del diseño visual resuelto y además un entorno visual IDE producido por Intel que se denomina Intel XDK. Todo esto nos facilita el trabajo sobre Apache Cordova para crear aplicaciones.


Las aplicaciones híbridas tienen muchas ventajas sobre las aplicaciones nativas puras, específicamente en términos de soporte de la plataforma, la velocidad de desarrollo, y el acceso al código reutilizable. Ya que las aplicaciones Ionic son HTML5 y Jquery, mientras las puras son Java o C#, por lo que un diseñador web, pero no programador se le facilita la creación de aplicaciones híbridas y funcionan igual que una nativa.
  • Ionic incorpora los elementos de interfaz de usuario móviles nativas, es como Boostrap pero para móviles con estilos css y diseños predefinidos para utilizar.
  • Ionic se encarga del diseño y Apache Cordoba de ejecutar y compilar como una aplicación nativa.
  • Ionic se inspira en Apache Cordova y los SDK de desarrollo móviles nativos, por lo que resuelve muchos problemas sin necesidad de crear código para una aplicación nativa para iOS o Android. Lo importante es que el código es valido para cualquier plataforma y dispositivo.
Este tutorial esta pensado para Linux pero con muy pocas modificaciones de instalación se puede adaptar a Windows. Lo primero sera contar con Node.js

Node.js es un conjunto de herramientas y para hacer uso de estas herramientas o paquetes en Node.js se instala el gestor de paquetes npm y luego la herramienta que desea utilizar, esto se hace desde linea de comandos en cualquier sistema operativo.

En Linux desde la terminal ejecutamos el siguiente comando:
sudo apt-get install npm
A continuación instalamos Apache Cordova:
sudo npm install -g cordova
Si utilizamos linux de 64 bit, deberemos instalar el soporte de librerias 32 bit con el siguiente comando:
sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0
A continuación instalamos Ionic desde la línea de comandos:
sudo npm install -g ionic
Comenzando un proyecto sencillo con Ionic

Creamos una carpeta, en nuestro caso ionicproy en donde podamos acceder facilemnte desde la terminal y escribimos el siguiente comando:
ionic start testBlank blank



Para crear el proyecto escribimos ionic start nombre-proyecto tipo-proyecto. Los tipos de proyecto que podemos iniciar son:
  • Blank: genera toda la estructura de una aplicación pero con contenido vacío. El código sera:
ionic start nombre-proyecto blank
  • Tabs: inica una estructura de un proyecto con la estructura de menú inferior.
ionic start nombre-proyecto tabs
  • Sidemenu: inicia la estructura de un proyecto con menú lateral.
ionic start myApp sidemenu



Luego de terminado el proceso de configuración por defecto podemos ver la estructura de la aplicación que no es más que un sitio web. Podemos identificar la carpeta www, donde se alojan los archivos web y otras carpetas para plugin y código que desarrollemos.


Si abrimos ahora index.html y modificamos entre las etiquetas body
<!DOCTYPE html>


<html>


  <head>


    <meta charset="utf-8">


    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">


    <title></title>


    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script -->

    <script src="cordova.js"></script>

    <!-- Mis archivos para codigo propio Jquery -->

    <script src="js/app.js"></script>

    <script src="js/controllers.js"></script>

    <script src="js/services.js"></script>

  </head>

  <body ng-app="starter">

         <ion-header-bar class="bar-dark">

        <h1 class="title">Desarrollando con Ionic</h1>

      </ion-header-bar>

      <ion-content>

<div class="button-bar bar-positive">

  <a class="button">Comenzar</a>

  <a class="button">Herramientas</a>

  <a class="button">Ayuda</a>

</div>

      </ion-content>

    </body>

</html>
Crearemos un título y una barra de navegación, grabamos el archivo index.html y podremos ejecutar desde la terminal en la carpeta del proyecto invocando el comando:
ionic serve
Esto abrirá nuestro navegador por defecto y tomará un puerto libre para mostrar nuestra aplicación.


El servidor de ionic, nos permite una rápida prueba de cómo funciona nuestra aplicación.


Cada vez que cambiamos algo en el código html el servidor Ionic lo detecta y automáticamente refresca el navegador.

Podemos observar sobre Chrome nuestra aplicación ejecutándose con apenas 10 lineas de código html y Ionic framework que se encarga del diseño y estilo, además es reponsible, por lo que se adapta a cualquier dispositivo.
La especificación de estilos css y componentes a utilizar se puede ver en las especificaciones CSS onic Framework.
También podemos utilizar HTML tradicional y crear nuestras propias hojas de estilo, como por ejemplo un radiobutton.

Por ejemplo añadimos debajo de la barra de navegación el siguiente código
<h4> RadioButton Ionic </h4>


<label class="item item-radio">


    <input type="radio" name="group">


    <div class="item-content">


     Opcion A


    </div>


    <i class="radio-icon ion-checkmark"></i>


  </label>


<label class="item item-radio">


    <input type="radio" name="group">


    <div class="item-content">


     Opcion B


    </div>


    <i class="radio-icon ion-checkmark"></i>


  </label>



<h4> RadioButton HTML </h4>


<div align="center"><br>


<input type="radio" name="grupoH"> Opcion A<br>


<input type="radio" name="grupoH" checked> Opcion B<br>


<input type="radio" name="grupoH"> Opcion C


</div>
Si el servidor Ionic sigue ejecutándose habrá refrescado los cambios y podemos observar los cambios:


Compilar nuestro proyecto para crear una aplicación móvil

Ahora deberemos decirle a Ionic sobre que plataforma va a correr nuestra aplicación si android o IOS o ambas, para ello deberemos añadirlo de la siguiente manera desde la carpeta del proyecto, accedemos con permisos de administrador:
sudo su
A continuación añadimos la plataforma en que vamos a compilar
ionic platform add android
La plataforma Apache Cordova se encargara de descargar e instalar todos los plugins necesarios.


En nuestra carpeta de proyecto veremos que se ha creado una nueva carpeta plataforms que contiene todo lo necesario para convertir nuestro código en una aplicación Android nativa.

Deberemos tener instalado el Android SDK que soporte la versión de API 22 o Lolliop 5.1 y ejecutarlo en el AVD Manager, el administrador de AVD proporciona una interfaz gráfica de usuario en el que se pueden crear y gestionar dispositivos virtuales Android (AVDS), que son requeridos por el emulador de Android.

En los tutoriales mencionados al principios explicamos como instalarlo y utilizarlo, si no queremos instalar Android Studio podemos instalar solo el Android SDK y ADV Manager

Para probar nuestra aplicación debemos tener ejecuntandose el emulador Android y desde la terminal ejecutamos el siguiente comando:
ionic emulate android



Si queremos compilar nuestra aplicación solo deberemos ejecutar el siguiente comando con el nombre de nuestro proyecto
ionic build android
En la carpeta de nuestro proyecto en este caso testBlank/platforms/android/build/outputs/apk encontraremos la aplicación compilada lista para instalar en nuestro móvil.


¿Qué es Ionic?
Ionic es una potente herramienta que le permite a cualquier persona con conocimientos de HTML, CSS y Jquery utilizar unos pocos comandos para comenzar crear, programar, probar y compilar aplicaciones en cualquier plataforma. Incluso si tenemos un sitio web podemos convertir algunas partes que necesitemos en una aplicación móvil.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jun 08 2015 08:14
  •   Visitas 1.9K
  •   Nivel
    Avanzado



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse