Cómo instalar Ionic y crear aplicaciones o proyectos desde 0 con este Framework

31 enero 2021

Puedes desarrollar aplicaciones Ionic en cualquier sistema operativo que prefieras, debes saber que esta no es más que gestos y herramientas de interfaz de usuario optimizados para dispositivos móviles para crear aplicaciones rápidas y altamente interactivas. Ionic se ha desarrollado en varias ocasiones en Mac OS X, Linux y Windows. ¿Cómo Desarrollar de aplicaciones Móviles con Ionic Framework?

Cómo Desarrollar Aplicaciones Móviles con Ionic Framework

Ver este vídeo en YouTube

Primero, debemos comenzar con una nota sobre los requisitos mínimos para crear su aplicación con la versión actual de Ionic. Apunta a dispositivos iPhone y Android (actualmente). Soporta hasta iOS 7+, y Android 4.1+.

Sin embargo, ahora mismo necesitará usar la línea de comandos para seguir esta guía y debe tener OS X para desarrollar e implementar aplicaciones de iPhone, por lo que se recomienda OS X si es posible.

Ejecutará los comandos de esta guía en las ventanas de Git Bash o Console2. Primero, instalaremos la versión más reciente de Apache Cordova y aprende a crear y desarrollar aplicaciones de Android con Apache Cordova y SQlite.

SQLite es una biblioteca en proceso que implementa un motor de base de datos transaccional de SQL autocontenido, sin servidor, de configuración cero. Conoce todo sobre la Programación QT y la base de Datos SQLite.

No dejes de descargar SQLite Android Studio, con el propósito de obtener cursos, hacer consultas, mostrar datos, ver bases de datos, entre otros. Que tomará nuestra aplicación y la agrupará en un contenedor nativo para convertirla en una aplicación nativa tradicional.

creador aplicaciones ionic

Índice()

¿Cómo desarrollar aplicaciones móviles con Ionic Framework?
1. Instalar Ionic
2. Crear el proyecto
Configurar plataformas

¿Cómo desarrollar aplicaciones móviles con Ionic Framework?

Para Instalar Cordova, aegúrese de tener instalado Node.js

$ sudo npm install -g cordova

Instalar Ionic

Ionic viene con una práctica utilidad de línea de comandos para iniciar, crear y empaquetar aplicaciones Ionic. Para instalarlo, simplemente ejecuta:

$ sudo npm install -g ionic

Crear el proyecto

Ahora, necesitamos crear un nuevo proyecto de Cordova en algún lugar de la computadora para el código de nuestra aplicación:

$ ionic start todo blank --type ionic2

Eso creará una carpeta llamada todo en el directorio donde se ejecutó el comando. A continuación, entraremos en ese directorio y listaremos los contenidos.

Aquí es cómo se verá la estructura externa de su proyecto Iónico:

$ cd todo && ls

├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.

instalar ionic pc

Configurar plataformas

Ahora, debemos decirle a ionic que queremos habilitar las plataformas iOS y Android:

$ ionic cordova platform add ios
$ ionic cordova platform add android

Probarlo

Solo para asegurarse de que el proyecto predeterminado funcionó, intente compilar y ejecutar el proyecto (en su lugar, sustituya iOS por Android para compilar por Android):

$ ionic cordova build ios
$ ionic cordova emulate ios

Iniciando tu aplicación

Ahora que tenemos todo instalado y un nuevo proyecto de Cordova creado, comencemos a construir una aplicación real.

Dado que cada aplicación Ionic es básicamente una página web, necesitamos tener un archivo index.html en nuestra aplicación que defina la primera página que se carga en la aplicación.

Vamos a crear www / index.html e inicializarlo con esto:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

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

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

<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body>
</body>
</html>

ionic framework pc
En el Shell anterior, estamos incluyendo el Ionic CSS y tanto el núcleo Ionic JS como el Ionic AngularJS en el archivo ionic.bundle.js.

Ionic viene con ngAnimate y ngSanitize incluidos, pero para usar otros módulos Angular deberá incluirlos desde el directorio lib / js / angular.

Para crear menús laterales en Ionic, podemos usar los menús de ion-side. Siéntase libre de leerlo, pero el marcado necesario es simple. Edite el archivo index.html y cambie el contenido de <body> para que se vea así:

<body>
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
</body>

En el código anterior, hemos agregado nuestro controlador <ion-side-menus> que controlará el arrastre y la exposición del menú lateral.

Dentro del controlador tenemos un <ion-side-menu-content> que es el área de contenido central de la aplicación, y un <ion-side-side side = "left"> que es un menú lateral izquierdo, inicialmente oculto.

Inicializando la aplicación

Primero, necesitamos crear un nuevo módulo AngularJS y decirle a Angular que lo inicialice. Vamos a crear un nuevo archivo ubicado en www / js / app.js. Ponga este código en el archivo:

angular.module('todo', ['ionic'])

Esta es la forma Angular de crear una aplicación y le estamos diciendo a angular que incluya el módulo iónico que incluye todo el código jónico que procesará las etiquetas anteriores y hará que nuestra aplicación cobre vida.

Ahora, vuelva a index.html y justo antes de la línea <script src = "cordova.js"> </script>, agregue:

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

Esto incluye el script que acabamos de crear.

Y para hacer que nuestra nueva aplicación se ejecute, debemos agregar el atributo ng-app a la etiqueta del cuerpo:

<body ng-app="todo">

Probando tu aplicación

Hay cuatro formas de probar su aplicación a medida que desarrolla: en un navegador WebKit de escritorio, en el simulador de iOS o Android, en un navegador móvil en su teléfono o como una aplicación nativa en el teléfono.