Curso Apache Cordova

bien vamos a empezar a esta acción formativa mediante la cual vamos a aprender a desarrollar aplicaciones móviles multiplataforma tanto para android como para jesse y lo vamos a utilizar y lo vamos a hacer utilizando apache córdoba que es una de las herramientas más utilizadas actualmente para crear aplicaciones como digo que sirvan para múltiples plataformas a la vez en primer lugar necesitamos descargar una aplicación llamada no de punto js así que vamos a buscarla en internet vamos a descargar uno de js descargamos no de js en este caso estoy en el sistema operativo mac da igual lo instalamos para él para el sistema en el que estemos trabajando ahora mismo así que bueno descargamos o bien la versión long time support o bien la versión con las últimas características mi recomendación es que descarguemos la versión long time support porque es la que es más estable en un momento dado así que hago clic me descargo el no de en este caso la versión long time support y abro el instalador le voy a continuar afecto instalo y mi contraseña y descargo los archivos en este caso de no de js bien una vez que lo tengo tengo 9 y tengo n pm npm realmente es lo que necesito para esta parte traslado a la papelera cierro por aquí y a continuación voy a abrir un terminal voy a abrir un terminal si estoy en windows san si estoy en linux estoy en mac y si estoy en windows abriré un símbolo de sistema en definitiva voy a abrir vamos a poner por aquí terminal voy a abrir esto voy a abrir un símbolo de comandos donde pueda introducir comandos con libertad así que sí estoy aquí estoy en la carpeta jose vicente de hecho voy vamos a pulsar ls vale para comprobar que estoy para listar los elementos que hay dentro de la carpeta jose vicente voy a poner n pm simplemente para comprobar que reconoce el comando y que estoy dentro del comando n pm hago un clic para borrar la pantalla y ahora voy a escribir n pm install y en este caso y voy a poner córdoba recordemos que córdoba de apache córdoba es con v y no como la ciudad española por ejemplo la ciudad argentina que es con b en este caso lo ponemos con v así que vamos a poner npm install menos g córdoba y simplemente lo que tenemos que hacer ahora es esperar a que finalice el proceso de descarga y de instalación vemos que lo que está haciendo es descargar una serie de elementos y una serie de librerías y mediante este sistema lo que estamos haciendo es descargar aparece córdoba bien ya lo tenemos por aquí ya lo tenemos por aquí vamos a verlo bien tengo una serie de warnings y una serie de errores no pasa nada tengo algunos premios os denegados vale muy bien bien otra cosa que puedo hacer si tengo errores es ejecutar esto pero con el sudor delante es decir sudo npm e insta al menos que de córdoba sobre todo tendría que hacer el sudo si estoy en mac o estoy en linux ya que es donde puedo tener permisos de administrador pongo la contraseña y ahora inició el proceso de instalación y el proceso de descarga pero con permiso de administración con lo cual ahora no debería dar ningún problema ni ningún error de permisos bien y ahora si tenemos ya instalados una serie de paquetes dentro de nuestro equipo ahora lo que tengo que hacer es lo siguiente vamos a por ello voy a crear voy a crear dentro del escritorio una carpeta llamada no no no no no bien ahora esta carpeta la voy a llamar córdoba por dentro de esta carpeta voy a hacer una nueva carpeta llamada por ejemplo proyecto 1 y ahora esta carpeta está vacía aquí dentro dentro de la interfaz de comandos dentro de la terminal voy a listar los los archivos que tengo las carpetas que tengo tengo la carpeta de esto así que efe de texto veo que tengo por ahí tendré por aquí córdoba ahí lo tengo así que sé de córdoba veo que tengo una carpeta vamos a hacer un clear vamos a hacer un listado tengo la carpeta proyecto 1 así que cede proyecto 1 para meterme dentro de esa carpeta listo y no tengo nada es decir no tengo nada porque efectivamente la carpeta proyecto 1 como podemos ver allí está vacía así que ahora lo que voy a hacer es crear aquí mi nuevo proyecto voy a decir me voy a hacerle córdoba create y en este caso lo que voy a hacer es decirle que quiero por llamarlo proyecto uno probablemente se va a crear una carpeta proyecto uno dentro de la carpeta proyecto uno pero no hay ningún problema por ello así que hago así dice que está creando un nuevo proyecto de córdoba comprobamos cómo efectivamente se me ha creado una nueva en su carpeta llamada proyecto 1 pero lo más interesante lo más interesante es que vemos que ha creado una serie de archivos por defecto que son los archivos con los cuales o son los archivos los cuales necesita córdoba para poder empezar a trabajar ahora a continuación para continuación lo que vamos a hacer es crear una nueva plataforma para este proyecto entonces vengo por aquí y digo córdoba con un bed platform y añado y voy a decir en este caso android quiero añadir la plataforma android así que vamos a ver ok voy a decirle browser para este primer ejemplo añado ok cuidado nos dice que no es un córdoba habéis proyecto entonces voy a entrar dentro vamos a ver feve proyecto 1 ahora si estoy dentro de ese proyecto ahora sí le digo córdoba platform browser me dice ahora sí que está utilizando el browser para este primer proyecto ok ahí tenemos por tanto la configuración para navegador para este proyecto y ahora y ahora vemos cómo ha creado una serie de carpetas y subcarpetas y ahora voy a decir córdoba run y en este caso le digo browser entonces comprobamos en este caso comprobamos que se ha activado un navegador en este caso estoy trabajando con un puerto local y acabo de crear y acabo de arrancar mi primer proyecto córdoba dentro de este navegador esto que acabamos de hacer no es más que una demostración porque lo que queremos hacer a continuación evidentemente es crear un proyecto dentro de una aplicación de teléfono móvil pero ahora para empezar lo que queremos hacer en primer lugar es arrancar un proyecto vía navegador y a través de este navegador comprobamos que tenemos córdoba funcionando y ahora el siguiente ejercicio en el segundo ejercicio es cuando vamos realmente a crear un proyecto para dispositivos móviles bien pues vamos a crear un segundo proyecto por tanto aquí dentro de esta carpeta a córdoba voy a crear una nueva carpeta llamada proyecto 2 y esta carpeta esto lo puedo cerrar ya vale esta carpeta llamada proyecto 2 va a contener los siguientes ponemos algo de aquí cierro el córdoba salgo de aquí salgo de proyecto uno listo los proyectos voy a hacer un killer listo de nuevo los proyectos veo que tengo proyecto 1 y proyecto 2 así que voy a entrar dentro de proyecto 2 y dentro del proyecto 2 ahora mismo está vacío vemos que hacemos un ls y está vacío lo que voy a hacer es crear una nueva aplicación entonces voy a hacer una cosa voy a poner esto así se aprende esto así bien y entonces a continuación voy a decir córdoba create voy a decir proyecto 2 y a continuación tengo que poner dos cosas en primer lugar especialmente si va a ser una aplicación móvil el nombre identificador único de la aplicación en formato de dominio inverso esto quiere decir que voy a poner por ejemplo si yo tengo el dominio o carsa puntocom o josé vicente carratalá puntocom pues tengo que poner como punto jose vicente catalá entonces es como jo suficiente cara de la puntocom con punto josé vicente carratalá la primera pregunta que nos lo hacer todo el mundo estas alturas es es obligatorio que tenga un dominio comprado o alquilado a mi nombre para poder crear un dominio inverso no yo podría poner aquí cualquier nombre de dominio pero es interesante que pues lo ponga digamos de un dominio del cual disponga porque si no si yo un día lanzó esta aplicación pues alguien que tenga el dominio con punto josé vicente carro de la podría reclamar la propiedad de ese proyecto así que no es obligatorio pero desde luego sí que es recomendable que vaya a un proveedor de dominios y compre un dominio que luego utilice para aquí si yo he comprado el dominio suficiente carratalá puntocom pues aquí pondré con punto josé vicente carretera y ahora a continuación voy a poner el nombre del proyecto voy a poner por ejemplo córdoba 2 y ahora le voy a decir que el nombre del proyecto es proyecto 2 entonces tengo córdoba para llamar alá a apache córdoba create para crear un nuevo proyecto proyecto 2 para decir que quiero crear un nuevo proyecto con punto jose vicente catalá punto lo que sea es el nombre único que tendrá el proyecto el identificador en las tiendas de aplicaciones móviles y luego el nombre del proyecto en formato humano digamos así que si tengo esto voy a darle a enter y comprobar como el sistema acaba de crear aquí dentro los archivos correspondientes a un nuevo proyecto bien ahora quiero añadir plataformas entonces voy a entrar dentro de proyecto 2 vamos a hacer un listado y ahora quiero añadir las dos plataformas principales para aplicaciones móviles quiero córdoba platform ar y ese quiero añadir la plataforma esait para hacer aplicaciones para apple vamos a ver plataforma no plataforma he puesto ahí una además ahora sí añadimos s vamos a esperar es normal que la primera ejecución hay tarda un poquito muy bien ya creado ya en la configuración para ello s ahora voy a hacer lo mismo para android entonces voy a poner córdoba platform y android antes en el primer proyecto hemos creado una plataforma browser pues ahora vamos a crear un proyecto para dos plataformas móviles en este caso me dice que voy a añadir el target android 29 el que sea actual en ese momento bien pues ya lo tenemos y ahora bueno añadimos un plugin más adelante hablaremos de plugins evidentemente y ahora lo que quiero es comprobar qué plataformas ha incluido voy a hacer un clic y voy a decir córdoba platform ls y me dice que este proyecto ahora mismo tiene instalado android 91 y 62 y nos dice que las plataformas disponibles son browser en la versión 6 electrón en formato 1x también puedo construir para s x en formato 6 bien ahora a continuación lo que quiero es instalar una serie de prerrequisitos para poder realmente construir aplicaciones es decir yo ahora he dicho que voy a hacer aplicaciones para ello ese y para y para android pero realmente probablemente no lo sé no tengo el sistema preparado realmente para compilar para esas plataformas entonces voy a hacer lo siguiente voy a decir córdoba córdoba requerimentos y nos dice qué se requieren en este caso en mi caso para cómo voy a compilar y también para ello s se requieren las herramientas para desarrolladores de línea de comandos quiero instalarlas ahora sí tengamos en cuenta una cosa y es que cuando estoy en mac puedo hacer aplicaciones para android para ios sin ningún problema cuando estoy en windows hacer aplicaciones para ello ese pues es más complejo cuando estoy en cuando estoy en linux hacer aplicaciones para ios es más complejo en definitiva no pasa nada porque lo que voy a hacer en este caso es construir para android y así en definitiva da igual que estés en windows en mac o linux vas a ver cómo vas a poder hacer las mismas aplicaciones que hago yo y luego eventualmente en un momento dado pues también realizaré compilaciones para ello ese para que también veamos cómo hacer aplicaciones para la tienda de apple pero en un primer momento sobre todo las primeras aplicaciones que voy a hacer las voy a hacer para android y así pues esto podrás hacer exactamente lo mismo que yo independientemente de en qué plataforma estés bien en este caso vamos a ver momento estamos instalando el software necesario para realizar algunas compilaciones germán así que vamos a esperar un mentir vamos a esperar un momento quedan dos minutos a menos de un minuto y vamos a por ello vale el software ha sido instalado vale entonces vamos a ejecutar otra vez córdoba y recoger mentz ok vale muy bien aquí vale en este caso no pasa nada y vamos a por ello vamos allá vamos a hacer un clic y vamos a ver si podemos ya arrancar el emulador de android así que voy a decir córdoba es muy light android vamos a verlo vale y nos dice en este caso pues que nos falta el android sdk root es decir tenemos que descargar las herramientas de android dentro de nuestro ordenador para poder ejecutar el emulador de android así que vamos a por ello nos dice que de momento no ha no ha reconocido el android sdk pero no pasa nada porque a continuación lo vamos a descargar vamos a descargar como digo si nos dice que no encuentra el android sdk pues digo android sdk me descargo el android sdk en este caso quiere que me descargué tanto el androide estudio como el androide séneca bien vale descargar daño no me van a hacer así que he leído descargo androide estudio para mac y vamos a descargarlo en unos cuantos segundos y vamos a instalarlo sobre todo sobre todo lo que quiero no quiero usar de momento al menos todavía no quiero usar de momento el androide estudio lo que quiero usar es el android sdk y el androide estudio lo que hace es instalar los dos componentes así que de los dos componentes del androide estudio y de android sdk voy a usar realmente el android sdk y bueno ya tengo instalado el androide estudio para cualquier otra cosa para lo que lo pueda necesitar así que quedan tres o cuatro segundos de instalación vamos a ejecutar la imagen de instalación y vamos allá cierro esta ventana lanzamos android studio voy a descargarme también el sdk android sbk platform tools me lo descargo también [Música] descargar para mí en este caso he leído descargo hasta esto vamos a hacer android tools y plazos va muy bien ya tengo esto por aquí y ahora a continuación voy a arrancar androide estudio voy a ver la lista de aplicaciones voy a android estudio tal que es la primera ejecución la está validando ok quiero abrir este archivo no quiero importar settings y vamos a hacer un primer arranque bueno quiero enviar información estadística voy a seguir el wizard para crear un primer proyecto aunque sea vacío standard ok vale y esto es lo que quiero esto es lo que realmente voy a hacer que es descargarse la serie de cavill tools descargarse el sdk y en definitiva descargar la máquina virtual asistir le voy a finish y esto es lo que quería llegar esto es lo que aunque no vaya a usar él el androide estudio pero el androide estudio es el que me gestiona al instalarlo la descarga de las ‘becas que es lo que va a utilizar córdoba y así también lo tengo ya instalado para android estudio ya que está 2 entonces ahora simplemente tengo que acabar de instalar tengo que esperar primero a que se descargue y luego a que se instale y una vez que lo tenga instalado será muy recomendable muy recomendable que reinicie el equipo para asegurarme que actualiza las rutas que actualiza el android sdk root y el android home y una vez que acabe la instalación y una vez que reinicie el ordenador es cuando volveremos a esta carpeta de córdoba y volveremos a decir que quiero emular android vamos a verlo primero sería bueno también que en cuanto se instalen las herramientas entraré en android estudio y haré una primera máquina virtual y así se queda ya hecha luego porque las máquinas virtuales y en definitiva la gestión del sdk de android se hace más fácil desde android estudio que desde córdoba entonces voy a usar cada componente para lo que me convenga vamos a por ello bien ahora está descargando las imágenes y ahora podemos hacer poco más que esperar vamos a esperar y simplemente simplemente lo que tenemos que hacer es esperar a que finalice vamos a esperar a que finalice no quiero parar la grabación más que nada porque si para la grabación y en cualquier momento cambia la pantalla pues te habrás perdido lo que aparezca en mi pantalla y cuando estamos instalando pues muchas veces la pantalla cambia muy rápidamente entonces por eso sigo grabando y no quiero para la instalación para que en todo caso pues no pierdas nada de lo que ocurre en mi pantalla vamos descargando instalando cosas muy bien ponemos y contraseña en este caso está instalando el instalador de intel ya que ayuda a que las máquinas virtuales corran más rápido no es obligatorio tenerlo instalado pero pues sí que es recomendable especialmente si tenemos un procesador intel en nuestro equipo y una vez más tenemos que esperar y vamos allá sigo grabando esperamos a que la instalación acabe voy a cambiar de vídeo ataque bien el inicio de nuevo la grabación y en este caso bueno ya están los comprenden descargados le voy a finalizar voy a crear un nuevo proyecto existo aunque sólo sea para crear la máquina virtual le digo que quiero una basic activity afecto todo esto como viene por defecto ok y como digo lo único que quiero es la excusa para poder crear una máquina virtual y poder empezar a trabajar entonces vamos a añadir configuración momento que está ahí acabando vale y vamos a vd manager y en este caso muy bien tenemos una máquina virtual que es el una pixel 3a con android 11 vale y con una cpu x86 entonces puedo en acciones puedo darle a play vale no tenemos la dre ahora vamos a crear un virtual device vamos a por ello valenti chéreau un teléfono y aquí parece que está ya arrancando el teléfono que he pedido antes el segundo y nos parece que le falta realmente el abb valen parece que está vacío así que voy a crear uno nuevo vamos a ver un segundo porque tengo el sistema un poco sobrecargado vamos a dejar que acabe cierro por aquí esta máquina no quiero guardar su estado voy a crear una nueva máquina quiero un teléfono pixel xl vamos a ver vale quiero trabajar con un nexus 4 algo que sea pequeñito le digo next pero vamos a ver quiero android 11 no vamos a por uno menor quiero un android 7 por ejemplo vamos a descargarlo y aceptamos y lo que estoy haciendo en definitiva es descargar una máquina virtual de una android que no sea la última versión más que nada porque si luego quiero crear la aplicación implementar la aplicación solo poder implementarlas y lo instaló en una android que sea esa última versión no quiero eso lo que he hecho por tanto es descargar una android 7 y así pues podemos probar mejor esta versión también quiero también quiero en este caso dado que tengo por aquí un teléfono android quiero averiguar qué versión tiene un poco con la idea de que coincidan y tengo aquí vale un teléfono conversión de android 10 así que bueno vamos a ver 10 es la q vale pues estoy descargando una 7 que es todavía muy anterior pero así lo prefiero vamos a esperar a que acabe de e instalar ahora hay que esperar a que finalice la instalación [Música] bien finita tenemos por aquí ya tenemos un hogar está instalado no me previews quiero lugar ok una pantalla más o menos pequeña perfecto finish y ahí tenemos el virtual device vamos a esperar a que acabe de crearlo y ya lo tenemos ahí voy a ver si puedo eliminar esta máquina virtual para que no cause confusión ok bien voy a ver si la puedo arrancar no puede localizar la helada pero ahora la arrancará todas formas también lo que voy a hacer ahora es y reiniciar y está arrancando ya y la máquina de android y ahora como digo a continuación lo que voy a hacer es reiniciar el sistema para que córdoba y todos los componentes actualicen su información de dónde está el sdk este este android puede tardar un poquito en arrancar ya que es el primer arranque de la máquina virtual pero no paso vamos a esperar y ahora a continuación veremos que en ese teléfono móvil virtual pues aparecerán aparecerá el sistema operativo vamos a verlo y ahora en un momento ahora mismo la máquina está cogiendo muchos recursos del sistema y ahora en un momento arrancar esas máquinas virtuales son exigentes el sentido de que vemos como el procesador lo está usando extensamente muy bien pues ya estamos de vuelta entonces voy a arrancar un terminal en este terminal voy a entrar dentro de la carpeta de stop voy a entrar dentro de córdoba voy a entrar dentro del proyecto 2 voy a entrar dentro del proyecto 2 y ahora es cuando ahora si lo que voy a hacer es emular digamos el procesador vamos a ver voy a decirle al sistema que quiero realizar una emulación de android ya que ahora así pues ya tengo mi máquina virtual instalada vamos a por ello así que digo córdoba android si todo va bien debería arrancar la máquina virtual que ya he creado vamos a verlo y nos dice en este caso que vamos a ver vale no puede instalar en este caso grave no puede instalar en este caso pues bueno lo que sea vamos a verlo entonces entonces vamos a instalar travel y para instalar graves y cerraremos en primer lugar androide estudio ya lo tenemos instalado vamos a ver para que el programa lo pueda reconocer sí no vamos a ver vamos a descargar a ver instó al grave vamos a descargar el binario bueno no crees descargamos gravel vamos a descomprimirlo aquí y ahora vamos allá bueno mantenerlo allí si no voy a hacer una cosa voy a ponerlo en mí carpeta voy a crear una carpeta llamada grave y dentro de esa carpeta voy a poner toda esta información ahora a continuación ahora a continuación vamos a configurar el sistema cuál es esta carpeta cuál es esta carpeta me voy a inicio me voy a gravel cuál es la carpeta pues la carpeta vamos a ver es esta de aquí y sacar una nueva ventana de terminal feve y users cd jose vicente y se ve grave esa es la ruta entonces ahora lo que voy a hacer es esto export y le digo que la ruta es la siguiente la ruta es users jose vicente graves grande el 711 bueno voy a mantener esa carpeta la tenía en descargas grande el 711 todos los archivos los meto aquí dentro y entonces ahora sí en grave el del 711 viene ya lo tenemos y ya lo tenemos y ahora por tanto ya puedo voy a poner graves en principio ya lo tenemos esta inicial izando con lo cual como nos dice aquí va a ser vil fail vale aunque yo no pasaba porque en este caso tengo que ejecutarlo del proyecto así que voy a decirle otra vez córdoba de munita android igual tendría que cerrar la terminal y volverla a abrir pero bueno no pasa nada vamos a probarlo ok vale y nos dice que no puede encontrar una versión de graves como decía voy a cerrar la terminal y voy a volver a abrirla para que la terminal se dé cuenta de los cambios y entonces cede de stop córdoba cd proyecto 2 fede proyecto 2 y ahora si ahora si le decimos en este caso córdoba en mulegé android vamos a verlo ok bueno tenemos todavía una versión instalada de graves y a continuación es raro porque si yo aquí pongo grave muy bien ahora me dice que no ahora me dice que no ahora me dice que no voy a volverlo a hacer voy a decirle que esto si users jose vicente graves y voy a comprobar si la ruta es la misma exactamente egipcio grabé el 711 es correcto y bean y grave él va lento es decir que lo reconoce ahora sí para después si todo va bien está descargando sé el grado para córdoba lid vamos a esperar a que acabe de arrancar ahora simplemente tenemos que esperar a que el proceso finalice bien vamos a ver vale no se ha especificado emulador así que se está cargando el emulador por defecto que es el nexus 4 por eso antes he eliminado el otro y he dejado únicamente este volvemos a sacar el monitor porque en el momento en el que arrancamos una máquina virtual pues es interesante saber cómo vamos en principio parece que va más o menos bien aquí tenemos la máquina virtual muy bien y una vez que tenemos esto una vez que tenemos esto ahora es cuando lo que quiero es ejecutar la máquina virtual quiero ejecutar la aplicación dentro de android vamos a verlo nos vamos aquí nos vamos aquí que tengas no estoy echándole un vistazo que no me coge correctamente el ratón aquí y tenemos el proyecto 2 es decir al emular lo que ha hecho es cargar el proyecto 2 dentro del teléfono móvil android con lo cual por fin tenemos nuestra aplicación en marcha pinchamos proyecto 2 y al pinchar proyecto 2 aparece nuestra primera aplicación córdoba instalada dentro del sistema operativo vamos a comprobar qué es cierto que podemos hacer modificaciones sobre el sistema entonces cierro por aquí cierro el emulador le digo que no quiero guardar el estado actual con lo cual cerramos el emulador vamos a verlo y ahora que está guardando el estado aunque yo le había dicho que no quería guardar el estado pero bueno y ahora a continuación voy a hacer una modificación sobre el proyecto para comprobar cómo podemos realmente modificar lo que queramos vamos al escritorio y ahí se ha cerrado la aplicación [Música] ok recuperamos con control ce el control del proyecto entramos a córdoba entramos a proyectos entramos a www cogemos el archivo index.hr ml lo abrimos con un editor de código el que sea y a continuación donde pone vamos a ver aquí donde pone devices ready creo que ponía devices re de acuerdo vale pues voy a poner voy a poner hola cuando estoy aquí entonces si todo va bien cierro esto de aquí le vuelvo a dar córdoba me late android y como ahora veremos ahora veremos pues arranca la aplicación bien vamos a ver se ha cerrado inesperadamente no pasa nada el cómo cierro por aquí puedo ser la terminal arrancó de nuevo la terminal proyecto 2 fede proyecto 2 arrancó de nuevo creo que me ha cogido un refugio córdoba muleta androide otra cosa que puedo hacer es y reiniciar el sistema bien otra vez de nuevo bueno exportó grave y básicamente al exportar grave aunque el exportadora del se tendría que quedar hecho pero bueno es puerto grave esto en principio debería [Música] debería quedarse hecho news arts jose vicente graves y ahora córdoba muley de android que ahora arranca nada cargando estado yo juraría que antes le he dicho que no quería guardar el estado pero bueno cargamos por aquí momento cargamos aplicaciones nos vamos a proyectos 22 es la wta actualizado espero que sí y si todo va bien ahora pone hola mundo demostración de que realmente podemos cargar nuestra aplicación es decir tenemos la demostración de que podemos crear proyectos y de momento podemos lanzarlos en el emulador pero por supuesto ahora a continuación veremos cómo también vamos a ser capaces de lanzarlos en una máquina física y real de verdad

Deja una respuesta

Tu dirección de correo electrónico no será publicada.