Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Ionic Desde Cero: Comenzando Con Ionic

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

¿Así que has escuchado sobre Ionic y te estás preguntando cómo comenzar? En este tutorial aprenderás cómo configurar un entorno de desarrollo Ionic en tu computadora, así como cómo crear un proyecto Ionic.

Requerimientos para Codificar una App Ionic

Bueno, felicidades, si estás viendo este artículo vía una computadora tienes uno de los pre-requisitos más importantes para desarrollar aplicaciones Ionic: requerirás una computadora personal física (PC) para hacerlo. Esta puede ser una computadora ejecutando Windows, Mac o Linux.

Ya que construimos aplicaciones Ionic usando tecnologías web, también necesitarás herramientas de desarrollo web instaladas. Esto incluye un navegador web (preferiblemente Google Chrome) para ejecutar o depurar nuestras aplicaciones, y un editor de texto (tal como Sublime, Atom, o Visual Studio Code) para escribir o editar nuestro código. Si eres nuevo en desarrollo, te recomendaría Visual Studio Code ya que es comúnmente usado y gratuito.

Con estos requerimientos básicos instalados en tu computadora, continuemos e instalemos la dependencias que necesitamos para construir aplicaciones Ionic.

Configurando dependencias e Instalando Ionic

Desafortunadamente, no hay un paquete instalador sencillo que instale automáticamente un entorno de desarrollo Ionic en tu computadora. Independientemente de tu sistema operativo, tienes que instalar cada una de las dependencias requeridas de manera manual. Así que continuemos y comencemos configurando nuestro entorno de desarrollo Ionic.

Instala Node.js

La primera dependencia que necesitamos instalar es Node.js, la cual es un marco de trabajo JavaScript del lado del servidor. Estaremos usando Node.js por su administrador de paquetes node (npm), el cual nos permitirá instalar todos los paquetes y herramientas que necesitamos para nuestros proyectos. También usaremos Node.js para ejecutar un servicio de desarrollo de servidor que nos permitirá previsualizar aplicaciones en el navegador.

Ionic download page

Ionic recomienda qué, cuando se instale Node.js, deberías seleccionar la versión más reciente Long Term Support (LTS). En mi caso, como puedes ver arriba, esta es la versión 8.9.1 LTS. Ionic recomienda usar versiones LTS ya que son más estables.

Así que simplemente descarga la versión LTS, recorre las instrucciones del instalador, y una vez que la instalación termine estarás listo para continuar con el siguiente paso.

Instalando Cordova y Ionic

Con Node.js instalado, ahora estás listo para instalar Cordova y Ionic. Aquí es donde las cosas podrías volverse un poco truculentas para algunos, especialmente para aquellos que nunca han trabajado con la Interfaz de Línea de Comando (CLI) antes. Podría lucir un poco retador al principio, ¡ya que podrías sentir como si fueras a descomponer algo en tu amado computadora! Bueno, no lo harás, así que solo relájate e interna seguir a la par.

En Mac y Linux, busca la Terminal, la cuál es el CLI que estaremos usando para instalar Cordova y Ionic. En Windows, busca Command Prompt. Este es el equivalente a la Terminal en una PC Windows.

Instalando en Mac y Linux

Con la Terminal abierta en Mac o Linux, teclea el siguiente comando y ejecútalo presionando Enter en tu teclado.

Enseguida, podría ser requerido ingresar una contraseña, si es así, ingresa la contraseña que usas para iniciar sesión en tu computadora y presiona Enter de nuevo.

Installing Cordova and Ionic on Mac

Instalando en Windows

Desde la línea de comando en Windows, teclea el siguiente comando y ejecútalo presionando Enter en tu teclado.

Installing Ionic and Cordova on Windows

Como podrías haber notado, estamos usando el Administrador de Paquete Node (npm) para instalar Ionic y Cordova arriba, ¡así que es de suma importancia instalar Node.js primero! También podrías haber notado que en Mac y Linux estamos usando sudo en frente de nuestro comando. Esto es necesario para permitir la instalación de Ionic y Cordova de manera global en estos sistemas.

El proceso de instalación puede tomar unos cuántos minutos, dependiendo de tu conexión a internet, pero una vez que termina deberías ver algo como esto:

Successful install of Ionic and Cordova

Genial, así que con Ionic y Cordova instalados, pasemos a la siguiente sección e instalemos software adicional que necesitaremos para construir exitosamente nuestras aplicaciones iOS y Android desde nuestros proyectos Ionic.

Configuración de Plataforma Específica

No necesariamente tienes que instalar estas herramientas de software justo ahora; puedes continuar construyendo aplicaciones Ionic usando tecnologías web que discutimos anteriormente. Así que siéntete libre de omitir esta parte si deseas comenzar y crear tu primer proyecto Ionic.

Sin embargo, si quieres ejecutar tus aplicaciones en un dispositivo móvil real como un teléfono Android o iPhone, eventualmente tendrás que instalar herramientas de plataforma específica para esas plataformas. Veremos más de cerca el desarrollo para dispositivos Android y iOS en futuros tutoriales.

Configuración para Aplicaciones Android

Si quieres poder compilar aplicaciones Android desde tu proyecto Ionic, necesitar primero instalar el Kit de Desarrollo Java (JDK) 8 o superior. Ve al sitio web de JDK, acepta el acuerdo de licencia, y selecciona la opción de descarga relevante basado en tu sistema operativo. Después sigue las instrucciones de instalación.

Java Development Kit download options

Después de que hayas instalado el JDK exitosamente, necesitas también instalar Android Studio, el IDE Android (Entorno Integrado de Desarrollo).

Android Studio download

Con estos dos paquetes instalados, podrás compilar y empaquetar una aplicación Android desde tu proyecto Ionic.

Configuración para Aplicaciones iOS

Construir aplicaciones iOS desde tus proyectos Ionic solo es posible en una computadora con Mac OS, desafortunadamente, lo que significa que no podrás compilar o construir aplicaciones iOS desde una computadora ejecutando Windows o Linux. (aunque puedes codificar tu aplicación ahora en una computadora Windows, y después construirla para iOS desde una Mac.)

Para poder compilar aplicaciones iOS en tu Mac OS, necesitarás instalar Xcode. Simplemente dirígete a la AppStore en tu Mac y busca Xcode. Esta es una descarga gratuita.

Xcode download page

Después de que has instalado exitosamente Xcode, también necesitarás instalar herramientas de línea de comando adicionales para Xcode. Para poder hacer esto, abre la Terminal y ejecuta el siguiente comando.

Esto instalará herramientas adicionales que Cordova usará para construir tus proyectos iOS.

Installing the Xcode command line tools

Para poder construir tus proyectos iOS desde la línea de comando, también necesitarás ejecutar el siguiente comando.

Installing ios-deploy

Con todo configurado, estás listo para construir aplicaciones iOS desde tus proyectos Ionic.

Creando Tu Primer Proyecto Ionic

Ionic usa la línea de comando---y en particular el CLI de Ionic, el cual fue instalado de forma automática durante nuestro proceso de configuración---para crear, probar y construir tus aplicaciones Ionic. Así que ten el valor para abrir de nuevo la Terminal o Línea de Comando (Dependiendo de tu sistema operativo).

Un consejo rápido antes de que continuemos: aprende a adoptar la herramienta CLI de Ionic. Ahora se ha convertido oficialmente en tu nuevo amigo, ¡así que aprende a amarlo!

La primera cosa que necesitamos hacer es especificar en dónde queremos guardar nuestro proyecto Ionic. Para el propósito de este ejercicio, simplemente lo guardaremos en nuestro escritorio. Así que navega al escritorio con el siguiente comando.

Navigate to the desktop

Tenemos unas cuantas opciones para el tipo de aplicación Ionic que nos gustaría crear, y estas son categorizadas como plantillas de proyecto Ionic. Para el principiante, existen tres tipos de plantillas: una plantilla Vacía, una plantilla de Pestañas, y una plantilla de Menú Lateral. Estaremos usando la plantilla de pestañas en este ejemplo, así que continua y crea nuestro proyecto.

Vamos a estar nombrando a nuestro proyecto Ionic DemoApp. Así que crea nuestro proyecto DemoApp usando la plantilla de pestañas y guárdalo en nuestro escritorio, necesitamos ejecutar el siguiente comando en nuestro CLI.

Ready to run ionic start

Este comando tomará un tiempo para ejecutar ya que descarga todos los paquetes de plantilla y dependencias de aplicación de tu proyecto. Durante la instalación podría ser requerido si quieres instalar el SDK Pro gratuito y conectar tu aplicación. Responde No y presiona Enter de nuevo para continuar con la instalación. Una vez que la instalación esté completa, deberías ver algo como esto:

A successfully created Ionic project

¡Felicidades! Haz creado exitosamente tu primer proyecto Ionic.

Ejecuta tu Aplicación Ionic

Con la configuración del proyecto completa, ahora estamos listos para ver nuestra aplicación Ionic. Para hacerlo, navega a la carpeta de tu recién creado proyecto vía CLI ejecutando cd ./DemoApp y una vez dentro de esta carpeta, ejecuta ya sea ionic serve o ionic lab.

Ready to run ionic serve

ionic serve y ionic lab son comando CLI Ionic que compilaran tu aplicación e iniciarán un servidor local de desarrollo, permitiéndote ver tu aplicación Ionic dentro de un navegador web en tu computadora.

The app in action

En la imagen de arriba, he ejecutado el comando ionic lab, y como puedes ver, puedo ver mi proyecto Ionic compilado como una aplicación web. Aún no hemos logrado compilar como una aplicación nativa aún, pero lo haremos en próximos tutoriales.

Conclusión

Recuerdo que cuando comencé a desarrollar aplicaciones Ionic, fue muy confuso al principio, especialmente teniendo que hacer mucho del trabajo inicial vía CLI. Como alguien que no está acostumbrado a trabajar con CLI en absoluto, este fue un viaje tenebroso para mí---así que puedo imaginar cómo se podrían sentir algunos de ustedes. Mi consejo es que lo adoptes---te sentirás más cómodo y acostumbrado mientras sigues a la par, así que no te preocupes, ¡no descompondrás nada en tu amada computadora!

Hemos cubierto mucho territorio en este artículo, pero con este conocimiento estás por encima de los retos más grandes para codificar aplicaciones Ionic. ¡Mantente pendiente del siguiente artículo en la serie!

Hasta entonces, revisa algunos de nuestros grandiosos artículos sobre codificar aplicaciones Ionic, ¡o prueba algunos de nuestros exhaustivos cursos en video sobre desarrollo de aplicaciones Ionic!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.