29

Crea tu primera aplicación en Ionic

15799Puntos

hace 2 años

Curso de Ionic Avanzado 2017
Curso de Ionic Avanzado 2017

Curso de Ionic Avanzado 2017

Desarrolla aplicaciones móviles híbridas con Ionic: un framework basado en Angular que te permite escribir tu base de código una sola vez y compilar para iOS, Android y web con una tecnología sencilla e intuitiva. Aprender a usarlo y conoce todas sus ventajas en este curso de IONIC avanzado.

Ionic es un framework MVC (Modelo Vista Controlador) de código libre para desarrollar aplicaciones híbridas, compuestas por HTML5, CSS3 y JavaScript, para sistemas operativos Android e iOS. Con Ionic podrás crear grandes aplicaciones con un solo código base, lo cual te permitirá acelerar el proceso de desarrollo de una aplicación. Empresas como IBM, CISCO y Microsoft confían en este framework para crear aplicaciones.

Antes de todo, ¿qué es una Aplicación Híbrida?

Las aplicaciones híbridas utilizan tecnologías web para su construcción y funcionan sobre una vista web que se ejecuta de forma nativa en el sistema operativo del dispositivo, lo cual también les permite acceder a los recursos propios del sistema como procesador, cámara, GPS o algún otro periférico. Las principales tecnologías con las que están construidas son HTML5, CSS3 y JavaScript.

Configuración básica

Ionic cuenta con un potente CLI (Command Line Interface) con el que podemos trabajar directamente desde nuestra terminal enviando las instrucciones para crear o configurar nuestros proyectos y el cual vamos a utilizar para la configuración de nuestro primer proyecto en Ionic.

Instalar Ionic CLI

Antes de esta instalación debemos contar con la última versión estable de Node.js, si ya lo tenemos instalado en nuestra terminal ejecutamos:

npm install -g ionic

Creando nuestra primera aplicación híbrida

En Ionic CLI podemos crear de forma automatizada tres tipos de proyectos base:

  1. Instalación Limpia: ionic start myApp blank

  2. Instalación con Pestañas: ionic start myApp tabs

  3. Instalación con Menú Lateral: ionic start myApp sidemenu

Para este ejemplo vamos a crear una aplicación con pestañas, por lo tanto ejecutamos el siguiente comando en la terminal:

ionic start hola-ionic tabs

Este comando puede tardar un poco ya que nos prepara todo un proyecto base sin preocuparnos por las configuraciones necesarias y enfocarnos en desarrollar nuestra aplicación. Una vez terminada la configuración de nuestro proyecto base entramos en el directorio creado.

cd hola-ionic

Procedemos a abrir el contenido en nuestro editor de código, en mi caso utilizo VSCode.

Cómo esta constituido nuestro proyecto

node_modules/ Contiene todos los módulos y dependencias de nuestro proyecto.
resources/ Contiene todos los recursos gráfícos de nuestra aplicación.
src/ Es donde se encuentra todo nuestro código fuente.
src/app/ Es el código base de nuestra aplicación
src/assets/ Son los recursos gráficos e imágenes
src/pages/ Es el código de cada una de las pestañas de nuestra aplicación
src/theme/ Es el tema por defecto en Sass (preprocesador CSS)

Son archivos de configuración de nuestro proyecto: .editorconfig, .gitignore, config.xml, ionic.config.json, ionic.starter.json, package.json, tsconfig.json y tslint.json, los cuales te recomiendo inspeccionarlos para entender cómo está construido.

estructura ionic

Probando nuestra aplicación

Ionic CLI nos provee de un comando con el cual podemos crear un servidor local para probar nuestras aplicaciones en el navegador o en nuestros dispositivos móviles antes de compilar la aplicación para Android o iOS. Para esto necesitamos ejecutar el siguiente comando:

ionic serve

Cuando termine su ejecución nos abrirá una pestaña nueva en nuestro navegador con la siguiente url: http://localhost:8100/ en la cual probaremos nuestra aplicación.

localhost ionic

Ahora tienes los conocimientos básicos para crear sorprendentes aplicaciones móviles con Ionic. Si quieres seguir aprendiendo te recomiendo tomar el Curso de Ionic Avanzado que lanzaremos en unas horas.

Curso de Ionic Avanzado 2017
Curso de Ionic Avanzado 2017

Curso de Ionic Avanzado 2017

Desarrolla aplicaciones móviles híbridas con Ionic: un framework basado en Angular que te permite escribir tu base de código una sola vez y compilar para iOS, Android y web con una tecnología sencilla e intuitiva. Aprender a usarlo y conoce todas sus ventajas en este curso de IONIC avanzado.
Oscar
Oscar
@gndx

15799Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2

MIl gracias por este post! Estoy a punto de desarrollar una app para un cliente y estoy decidiendo con que framework desarrollarla

0
15799Puntos
2 años

Si te animas a utilizar Ionic, cuéntanos como te fue…

1
8004Puntos

Excelente post, Dios te bendiga…

0
15799Puntos
2 años

Gracias 😃

1
9137Puntos

Excelente post!! quiero probar ionic ❤️

0
15799Puntos
2 años

Te va a gustar.

1
5895Puntos

Hola, tengo una duda, voy a realizar una web que tiene blog y tiene una parte que muestra productos con filtros pero no hay necesidad de carrito de compras.
No sé si ionic sea buena idea para esto, para que me funcione de paso en web, androoid e ios…

0
15799Puntos
2 años

Si puedes desplegar el recurso sin problemas. Es cuestión de mostrar la información según sea necesaria.

1
1701Puntos

Hola, gracias por tu post…
Yo he creado aplicaciones sencillas con ionic donde utilizo firebase para traer unos cuantos datos. El problema que le encuentro a Ionic es que tarda mucho en cargar una aplicación, las aplicaciones que he creado tardan al rededor de 20 segundo en abrirse, cuando las pruebo en el navegador de mi pc funcionan bastante rapido, pero cuando creo una apk y la pruebo en el celular tardan bastante en iniciar…

Tienes alguna idea de porque sucede eso? o como se puede solucionar?

1
4451Puntos
2 años

Quizas sea por el dispositivo que estas utilizando, en que celular abres tus aplicaciones?

1

Hola, excelente post.
Seguí los pasos correctamente para crear el proyecto y me sale el siguiente error en la consola de Windows.

Anotación 2019-09-02 175902.jpg

Apenas estoy comenzando a aprender Ionic y siempre me sale el mismo error.

1
181Puntos
6 meses

Yo tb tengo ese mismo error. Por favor alguien que pueda ayudar… 🙏🏻🙏🏻🙏🏻