Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 22, 2021 02:06 am GMT

Configuracin inicial de Ionic 6 y Android Studio (Arctic Fox)

Para empezar con este quisiera dar un concepto de lo que es ionic:

Que es Ionic framework?

Un kit de herramientas mviles de cdigo abierto para crear experiencias de aplicaciones web y nativas multiplataforma de alta calidad. Muvase ms rpido con una nica base de cdigo, que se ejecuta en todas partes con JavaScript y la Web.
He tomado la definicin del sitio oficial: Ionic framework.

Existen algunos frameworks multiplataforma que permiten el desarrollo de aplicaciones mviles como: React Native, Flutter, NativeScript y por supuesto Ionic.

En el mismo sitio de Ionic framework nos proporsiona un documento que habla de aplicaciones Hibridas y Nativas, voy a mencionar los puntos ms importante:

  1. Utilizar React Native permite reutilizar tu conocimiento de la librera React para el desarrollo web pero eso no quiere decir que podamos reutilizar los componentes web en una aplicacin mvil, pero por supuesto el rendimiento se acerca a una aplicacin nativa desarrollada en Java o Kotlin.
  2. Es complicado personalizar la vista en React Native y en ocasiones debemos saber lenguaje nativo de la plataforma.
  3. Por otro lado tenemos Flutter que tiene un rendimiento excelente sin perdida de frames, pero en este se debe aprender Dart como lenguaje.
  4. Para finalizar, Ionic permite reutilizar todo su conocimiento web, puede utilizar Angular, React, Vue para el desarrollo de una aplicacin movil, adems puede utilizar CSS, Sass, Less para personalizar su aplicacin, pero el rendimiento no se puede comparar con React native o Flutter pero es ms que suficiente si nuestra aplicacin no utiliza procesamiento grfico excesivo, con esto no quiero decir que Ionic es superior.

Como todo buen ingeniero debes seleccionar las tecnologas que se ajusten a los requerimientos y realidades del equipo:

  • Si nuestro equipo de desarrollo web conoce typescript, css3 y html5 tambin puede reutilizar el conocimiento de Angular, React y Vue, adems no tiene dinero suficiente para contratar un equipo de desarrollo de android y otro de swift, pude elegir Ionic para el desarrollo si su aplicacin no se necesita uso intensivo de grficas, Ionic seria una magnifica eleccin por lo que la curva de aprendizaje es poco empinada.
  • Si el rendimiento es su prioridad y tiene conocimiento en React su mejor eleccin seria React Native, pero tenga en cuenta que en algn momento deber manipular cdigo de java o swift para personalizar sus componentes dentro de la aplicacin mvil.
  • Por ultimo tenemos a Flutter, este framework hace todo de forma diferente, as que si quiere un excelente rendimiento y tiene el tiempo necesario para capacitar a su equipo puede encantarse por este framework.

No entrare ms en detalle en la arquitectura dentro de Ionic.

Pasos para la configuracin inicial:

  1. Instalar Visual Code: en esta gua se utiliza visual code para el desarrollo de la aplicacin mvil con Ionic. Alt Text

  2. Instalamos nodejs: Existen 3 formas para instalar NodeJs pero en este caso se utiliza instalar Node.js con Apt usando un PPA de NodeSource https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04

    sudo apt-get install curlcd ~curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.shsudo bash nodesource_setup.shsudo apt install nodejsnode -v
  3. Instalar Angular 12: https://angular.io/guide/setup-local

    npm install -g @angular/cli
  4. Instalar Ionic framework: https://ionicframework.com/docs/cli

    npm install -g @ionic/cliionic start
  5. Instalar Android Studio (Arctic Fox): En este enlace nos da todos los pasos Android Studio downloads tambin podemos usar JetBrains Toolbox o descargar desde Snap: paquete snap de Android Studio. Considerar la mejor alternativa de las 3.

    sudo snap install android-studio --classic


    Si su equipo soporta la aceleracin de emulacin por hardware, verifique https://developer.android.com/studio/run/emulator-acceleration#vm-linux, instale los siguientes paquetes

    sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils


    Nota: copiar la ruta o path donde se va instalar Android Studio, es importante para los pasos posteriores de esta guia.

  6. Crear un dispositivo AVDs: Los AVD se gestionan con AVD Manager. En la pantalla de bienvenida de Android Studio, haga clic en Configurar AVD Manager . El AVD Manager tambin se puede abrir dentro de los proyectos de Android en el men Herramientas AVD Manager. Alt Text Nota: https://ionicframework.com/docs/developing/android

  7. Setear las variables de entorno: si no se configura las variables entornos correctamente al cerrar la terminal las variables se eliminan por eso consultar https://www.digitalocean.com/community/tutorials/how-to-read-and-set-environmental-and-shell-variables-on-linux

    cadavi@asusrog:~$ export ANDROID_SDK_ROOT="/home/cadavi/Android/Sdk"cadavi@asusrog:~$ export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bincadavi@asusrog:~$ export PATH=$PATH:$ANDROID_SDK_ROOT/platform-toolscadavi@asusrog:~$ export PATH=$PATH:$ANDROID_SDK_ROOT/emulatorcadavi@asusrog:~$ export CAPACITOR_ANDROID_STUDIO_PATH="/home/cadavi/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7678000/bin/studio.sh"


    Nota: La variable ANDROID_SDK_ROOT y CAPACITOR_ANDROID_STUDIO_PATH deben asignarse la ruta la instalacin de nuestro equipo del SDK y el path de Android Studio respectivamente.
    https://ionicframework.com/docs/developing/android

  8. Construir nuestra aplicacin mvil:

    cadavi@asusrog:~$ ng build


    Tambin puede ejecutar el comando desde la interfaz grfica de Visual Code Alt Text

  9. Aadir la plataforma Android a nuestra aplicacin movil:

    cadavi@asusrog:~$ ionic capacitor add android
  10. Enlazar nuestra aplicacin con el emulador:

    cadavi@asusrog:~$ ionic capacitor run android -l --external
  11. Verificar el correcto funcionamiento: Podemos hacer el cambio en nuestra vista, guardar los cambios y esos cambios sern reflejados en nuestro emulador https://ionicframework.com/docs/cli/livereload image Guardo y los cambios se reflejan de inmediato: Alt Text

  12. Si desea abrir el proyecto Ionic en Android Studio: debemos agregar el path de Android Studio en el archivo capacitor.config.json la propiedad linuxAndroidStudioPath dentro del proyecto Ionic

    {   "appId": "io.ionic.starter",   "appName": "my-ionic",   "webDir": "www",   "bundledWebRuntime": false,   "linuxAndroidStudioPath": "/home/cadavi/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7678000/bin/studio.sh"}


    Por ultimo ejecutamos el siguiente comando:

    cadavi@asusrog:~$ ionic capacitor open android

Tomar en cuenta la variable de entorno de android: https://stackoverflow.com/questions/55481190/how-to-run-ionic-app-on-android-studio-with-capacitor-on-ubuntu


Original Link: https://dev.to/cadavi33/configuracion-inicial-de-ionic-6-y-android-studio-arctic-fox-16en

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To