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

descargar ionic

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

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?

    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.

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

    驴Qu茅 te pareci贸 este art铆culo?

    Subir

    Este sitio web utiliza cookies para garantizar que obtenga la mejor experiencia en nuestro sitio web. Leer M谩s