Introducción a Quasar Framework: creación de aplicaciones multiplataforma

1. ¿Qué es el marco Quasar?
2. ¿Por qué Quasar Framework?
3. Empezando
4. Instalación
5. Configuración del proyecto
6. Estructura de carpetas de Quasar
7. Creación de una aplicación de notas
8. Diseño de la aplicación
9. Diseño de aplicaciones
10. Configurar datos locales
    1. Recuperacion de datos
    2. Agregar notas
    3. Eliminar notas
11. base de fuego
    1. Configurar Cloud Firestore
    2. Obteniendo datos de Firebase

Quasar es un marco multiplataforma de código abierto basado en Vue.js que le permite, como desarrollador, crear fácilmente aplicaciones tanto para escritorio como para dispositivos móviles utilizando tecnologías como Cordova y Electron y escribiendo su código una vez. La aplicación que crearemos almacenará y obtendrá sus datos de Firebase, lo que significa que también veremos cómo usar Firebase en Quasar.

En este artículo, explicaré cómo usar Quasar Framework y su interfaz de usuario de última generación (que sigue las pautas de materiales) para crear una aplicación de notas. La aplicación obtendrá sus datos y los almacenará en Firebase. Este tutorial está destinado a cualquier persona interesada en crear aplicaciones multiplataforma que funcionen bien en todos los dispositivos simultáneamente. Al final del artículo, debería tener una comprensión adecuada de qué es Quasar, cómo comenzar a crear aplicaciones con Quasar y también cómo usar Firebase.

Para seguir este artículo, debe tener:

• comprensión de HTML, CSS y JavaScript;
• al menos un poco de experiencia con Vue.js ;
• Node.js versión 10 o superior y npm versión 5 o superior instalados en su máquina.
• conocimiento de cómo funciona la interfaz de línea de comandos (CLI).

La aplicación implementada está disponible para su visualización y el código final está en Github .

¿Qué es el marco Quasar?

Quasar Framework es un marco multiplataforma de código abierto basado en Vue.js cuyo lema es : "escribir código una vez e implementarlo simultáneamente como un sitio web, una aplicación móvil y/o una aplicación Electron". Tiene muchas características que le permiten, como desarrollador web, crear aplicaciones en computadoras de escritorio y dispositivos móviles y crear aplicaciones web progresivas (PWA) utilizando tecnologías como Cordova, Electron y la web (Vue.js).

¿Por qué Quasar Framework?

Quasar es un kit de interfaz de usuario potente pero fácil de usar que comprende muchos componentes de interfaz de usuario, elementos de diseño y ayudas. Juntos, estos elementos proporcionan un conjunto de herramientas con todas las funciones para crear aplicaciones front-end responsivas, sin tener que utilizar muchas bibliotecas de interfaz de usuario diferentes. Hace el trabajo pesado por usted, permitiéndole concentrarse en las funciones y no en lo repetitivo.

En resumen, Quasar ofrece soporte para muchos modos de construcción, incluidos:

• aplicaciones de una sola página;
• aplicaciones web progresivas;
• renderizado del lado del servidor;
• aplicaciones móviles (iOS y Android), usando Cordova o Capacitor;
• aplicaciones de escritorio multiplataforma, utilizando Electron;
• extensiones del navegador.

Empezando

Para comenzar, veamos cómo instalar Quasar en su máquina local y configurar un proyecto.

Instalación

Hay tres formas de empezar a utilizar Quasar:

• incorporarse a un proyecto existente a través de una red de entrega de contenidos (CDN);
• instalación utilizando el complemento Vue.js CLI Quasar;
• instalación utilizando la CLI de Quasar.

Para este tutorial, usaremos el tercer método, que es Quasar CLI. Lo primero que debe hacer es instalar Quasar CLI globalmente en su computadora, o verificar si está instalado ejecutando los siguientes comandos en su CLI:

quasar -v #check if quasar has been installed previouslyyarn global add @quasar/cli# ornpm install -g @quasar/cli

Una vez hecho esto, ahora puede continuar con la configuración del proyecto.

Configuración del proyecto

Ejecute el siguiente comando en su CLI:

quasar create folder_name

Después de esto, se le harán algunas preguntas. Aquí está mi configuración completa para la aplicación que crearemos.

Ahora podemos pasar a la carpeta del proyecto e iniciar la aplicación usando los siguientes comandos:

cd folder_namequasar dev

Una vez completados los pasos anteriores, nuestra aplicación debería ejecutarse en https://localhost:8080 . Esto es lo que deberíamos ver:

Estructura de carpetas de Quasar

La estructura de aplicación predeterminada para Quasar pretende ser un excelente punto de partida para que los desarrolladores creen cualquier tipo de aplicación. Puedes organizar la aplicación como quieras y crear directorios cuando los necesites.

.├── public/ # pure static assets (directly copied)├── src/│ ├── assets/ # dynamic assets (processed by Webpack)│ ├── components/ # .vue components used in pages and layouts│ ├── css/ # CSS/Stylus/Sass/… files for your app│ ├── layouts/ # layout .vue files│ ├── pages/ # page .vue files│ ├── boot/ # boot files (app initialization code)│ ├── router/ # Vue Router│ ├── store/ # Vuex Store│ ├── App.vue # root Vue component of your app│ └── index.template.html # template for index.html├── .editorconfig # editor config├── .gitignore # GIT ignore paths├── .postcssrc.js # PostCSS config├── babel.config.js # Babel config├── package.json # npm scripts and dependencies├── quasar.conf.js # Quasar app config file└── README.md # readme for your app

La carpeta de origen consta de unos siete directorios principales que deberían interesar a un principiante:

• quasar.conf.js
  Este es el cerebro detrás de cualquier aplicación Quasar, porque la mayoría de las configuraciones se realizan en este archivo. Sorprendentemente, Quasar maneja la mayoría de las configuraciones complejas que necesitan las diversas herramientas y paquetes que puede utilizar en una aplicación. Algunas de estas configuraciones son para:
  • Componentes, directivas y complementos de Quasar que serían necesarios en su aplicación;
  • paquetes de iconos;
  • Animación CSS ;
  • Archivo de manifiesto PWA y opciones de Workbox ;
  • empaquetador de electrones y/o constructor de electrones ;
  • y mucho más .
• src/assets
  El assetsdirectorio contiene sus activos no compilados, como archivos, imágenes y fuentes de Stylus o Sass.
• src/components
  Aquí es donde vivirán todos sus componentes reutilizables. Estos componentes constituyen las diferentes partes de la aplicación y pueden reutilizarse e importarse a sus páginas, diseños e incluso otros componentes.
• src/css
  No encontrará esto en Vue.js, pero Quasar lo proporciona para que podamos tener todo nuestro CSS global en formato Sass. Consta de dos archivos: app.sasses donde irán todos nuestros estilos, mientras que quasar.variables.sasscontiene todas las variables reutilizables que querríamos utilizar al diseñar nuestra aplicación. Puede ignorar el directorio CSS si cree que no le sirve de nada.
• src/layouts
  Esto nos ayuda a crear diseños definidos para una aplicación sin repetir código. Esto es útil cuando desea incluir barras laterales o barras inferiores fijas o tener diseños distintos para dispositivos móviles y de escritorio.
• src/pages
  El pagesdirectorio contiene las vistas y rutas de nuestra aplicación. Nuestras páginas se inyectan en la aplicación y se administran a través de Vue Router en formato /src/router/routes.js. Esto significa que es necesario hacer referencia a cada página allí.
• src/router
  Esto contiene la configuración de enrutamiento de nuestra aplicación. Consta de dos carpetas:
  • /src/router/index.jscontiene el código de inicialización del enrutador Vue.
  • /src/router/routes.jsmantiene las rutas de la aplicación, cargando nuestros diseños junto con las rutas o páginas de la aplicación.
    Es posible que no necesite hacer nada con el index.jsarchivo en un proyecto pequeño, pero si su proyecto tendrá rutas, deberá agregarlas al routes.jsarchivo.

Creación de una aplicación de notas

Al crear una aplicación con Quasar, lo primero que queremos hacer es crear un diseño. Quasar ha hecho que este proceso sea mucho más fácil que cualquier otro marco al utilizar un generador de diseño. Para nuestra aplicación de notas, queremos algo como lo siguiente, que es bastante similar al diseño predeterminado pero con algunas modificaciones:

Diseño de la aplicación

En la barra lateral de la documentación de Quasar , verá la opción "Diseño y cuadrícula". Al hacer clic en él, aparecerá un menú desplegable con más opciones, una de las cuales es “ Layout Builder ”. Haga clic en "Creador de diseño", que lo llevará aquí:

Esto nos permite elegir las opciones que queremos y eliminar las que no. Luego, generaríamos el código para pegarlo en el archivo de diseño.

La primera opción nos ayuda a elegir las partes del diseño, mientras que la segunda nos permite configurar las partes del diseño. Finalmente, exportamos el diseño generado.

Si quieres exactamente el mismo diseño que el mío, usa el siguiente código:

template q-layout view="lHh lpR fFf" q-header elevated q-toolbar q-btn dense flat round icon="menu" @click="left = !left" / q-toolbar-title q-avatar img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" / /q-avatar Title /q-toolbar-title /q-toolbar /q-header q-drawer show-if-above v-model="left" side="left" bordered !-- drawer content -- /q-drawer q-page-container router-view / /q-page-container /q-layout/templatescriptexport default { data() { return { left: false }; }};/script

Elimine el diseño predeterminado y pegue el código anterior o el código que generó en src/layouts/MainLayout.vue.

El código anterior se divide en tres secciones: el encabezado (barra de navegación), el cajón (barra lateral) y el contenedor de la página (que contiene la vista del enrutador).

Hemos utilizado la interfaz de usuario de última generación para diseñar toda la página. Como dije antes, cuando uses Quasar, no necesitarás bibliotecas pesadas adicionales como Hammer.js, Moment.js o Bootstrap.

Agregaremos datos a la barra lateral y editaremos la barra de navegación. Una vez que haya guardado, notará que nuestra aplicación ahora se ve así:

Trabajemos en el diseño, agreguemos algunos elementos a la barra lateral y cambiemos el título de la aplicación. Si escanea el código de diseño que agregamos, verá dónde se supone que debemos editar y agregar estos diversos elementos.

Así es como se ve mi diseño después de agregar elementos a la barra lateral y cambiar el título:

Y aquí está el código:

template q-layout view="lHh lpR fFf" q-header elevated q-toolbar q-btn dense flat round icon="menu" @click="left = !left" / q-toolbar-title My Notes /q-toolbar-title /q-toolbar /q-header q-drawer show-if-above v-model="left" side="left" bordered q-list q-item clickable v-ripple to="/" q-item-section avatar q-icon name="home" size="md" / /q-item-section q-item-sectionHome/q-item-section /q-item q-item clickable v-ripple to="/about" q-item-section avatar q-icon name="info" size="md" / /q-item-section q-item-sectionAbout/q-item-section /q-item /q-list /q-drawer q-page-container router-view / /q-page-container q-footer q-toolbar q-toolbar-title Designed and Built For this article. /q-toolbar-title /q-toolbar /q-footer /q-layout/templatescriptexport default { data() { return { left: false }; }};/script

Eliminamos el logotipo en la barra de navegación y editamos el texto, luego agregamos una lista a la barra lateral, utilizando la interfaz de usuario de última generación de Quasar. Consulte los elementos de la lista y copie el código de cualquiera que desee utilizar.

Diseño de aplicaciones

Anteriormente, dije que iba a utilizar la interfaz de usuario de última generación de Quasar (que sigue las pautas de materiales) para crear una aplicación de notas, y eso es lo que haremos ahora. Explicar todo el proceso en un artículo como este es difícil, pero la sección "Estilo e identidad" de la documentación de Quasar lo cubre bien. Curiosidades y tops de internet

Esta será una aplicación de una sola página ( index.vue), y aquí está el código, sin ningún estilo aplicado:

template q-page div q-input bottom-slots v-model="newNoteContent" placeholder="Write your note here..." counter autogrow maxlength="300" template v-slot:after q-btn round dense flat icon="send" / /template /q-input /div q-separator size="10px" / q-list bordered q-item-label headerYou have 3 Note(s)/q-item-label div q-item q-item-section top q-item-label caption He who has imagination without learning has wings but no feet. /q-item-label /q-item-section q-item-section top side div q-btn size="13px" flat dense round icon="delete" / /div /q-item-section /q-item q-separator size="1px" / /div div q-item q-item-section top q-item-label caption He who has imagination without learning has wings but no feet. /q-item-label /q-item-section q-item-section top side div q-btn size="13px" flat dense round icon="delete" / /div /q-item-section /q-item q-separator size="1px" / /div div q-item q-item-section top q-item-label caption He who has imagination without learning has wings but no feet. /q-item-label /q-item-section q-item-section top side div q-btn size="13px" flat dense round icon="delete" / /div /q-item-section /q-item q-separator size="1px" / /div /q-list /q-page/templatescriptimport db from "src/boot/firebase";export default { name: "PageIndex", data() { return { basic: false, fixed: false, newNoteContent: "" }; }};/script

En el código anterior, tenemos un campo de entrada de Quasar. Hemos adjuntado un formulario v-modelpara obtener los datos del campo de entrada una vez que se hace clic en el botón "Enviar". También tenemos una lista de elementos que se usarán para mostrar cada nota, y cada elemento de la lista tiene un ícono que se usa para eliminar ese elemento en particular cuando se hace clic.

Configurar datos locales

En este punto, el diseño de nuestra aplicación ya está implementado. Lo siguiente que haremos será crear una matriz que contendrá todas nuestras notas. Nos aseguraremos de poder agregar y eliminar de esta matriz antes de configurar Firebase.

Aquí está la matriz que usaremos en nuestra aplicación por ahora. Más adelante, eliminaremos esta matriz o comentaremos el código.

notes: [ { id: 1, noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam." }, { id: 2, noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam." }, { id: 3, noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam." }]

Recuperacion de datos

Ahora tenemos nuestra matriz. Agreguemos estos datos a nuestra aplicación. Como entendemos Vue.js, todo lo que haremos será recorrer esta matriz usando la v-fordirectiva, usar los datos obtenidos de la matriz y luego colocar el contenido donde queramos que aparezca.

div v-for="noteContent in notes" :key="noteContent.id" q-item q-item-section top q-item-label caption {{ noteContent.note }} /q-item-label /q-item-section q-item-section top side div q-btn size="13px" flat dense round icon="delete" @click="deleteNote(noteContent)" / /div /q-item-section /q-item q-separator size="1px" //div

También agregamos un controlador de eventos de clic al botón Eliminar, para que cargue esta función cada vez que se crea.

Agregar notas

Veamos cómo agregar notas a nuestra aplicación usando el campo de entrada. Usaremos unShift()los métodos de JavaScript, que agregan uno o más elementos al comienzo de una matriz y devuelven la nueva longitud de la matriz.

Lo primero que debe hacer es agregar un controlador de eventos de clic al botón.

q-btn round dense flat icon="send" @click="addNote" /

Luego, proceda a crear este método en el área del script.

methods: { addNote() { let newNote = { id: this.notes.length + 1, note: this.newNoteContent }; this.notes.unshift(newNote); this.newNoteContent = ""; }}

En el código anterior, creamos un objeto para la nueva nota, que comprende el ID y la nota misma, y ​​luego lo agregamos newNotea la matriz de notesmediante el unShift()método.

Eliminar notas

Finalmente, antes de proceder a utilizar Firebase en nuestra aplicación, veamos cómo eliminar una nota. Lo primero sería agregar un detector de eventos al ícono de eliminar:

q-btn size="13px" flat dense round icon="delete" @click="deleteNote(noteContent)"/

Y luego crearíamos un método:

deleteNote(noteContent) { let noteId = noteContent.id; //doing this to get the real id of the notes let index = this.notes.findIndex(noteContent = noteContent.id === noteId); this.notes.splice(index, 1);}

En este código, obtuvimos la idnota particular que queremos eliminar a través del parámetro pasado al método de evento de clic que se creó. Luego, utilizamos el splicemétodo para eliminar solo ese elemento de la matriz.

base de fuego

Ahora que estas dos funciones funcionan, veamos cómo podemos usar Firebase en Quasar para agregar, recuperar y eliminar datos. Firebase también nos brindará sincronización de datos en tiempo real en todos los dispositivos. Los datos en nuestra aplicación no serán muchos, porque son solo para fines de aprendizaje. En caso de que esté pensando en algo grande que sería utilizado por millones de personas, consulte la página de precios .

Firebase es un software de desarrollo de aplicaciones de Google que nos permite desarrollar aplicaciones web, iOS y Android.

Configurar Cloud Firestore

Para comenzar, visite firebase.google.com y haga clic en el enlace "Ir a la consola" en la esquina superior derecha de la pantalla o en el botón "Comenzar" (asegúrese de iniciar sesión con su cuenta de Google).

Esto nos llevará al área de la consola , donde podremos crear un proyecto. Haga clic en el botón "Agregar un proyecto" y aparecerá un formulario para crear su proyecto. La primera pregunta solicitará el nombre del proyecto, que podría ser cualquier cosa; Para este artículo, la llamaremos “notesApp”. Desactivemos también Google Analytics porque la nuestra es una miniaplicación.

Haga clic en el botón "Crear proyecto" (esto puede tardar unos segundos, así que tenga paciencia). Luego, pulsamos en “Continuar”, para que podamos crear nuestro Firestore en la nube.

En la barra lateral, haga clic en "Firestore" y luego en "Crear base de datos".

Esto abrirá un modal. Pulsamos en “Iniciar en modo prueba”, lo que nos facilitará comenzar a trabajar con nuestra base de datos. Tenga en cuenta que "las reglas de seguridad predeterminadas para el modo de prueba permiten que cualquier persona con referencia a su base de datos vea, edite y elimine todos los datos de su base de datos durante los próximos 30 días".

Haga clic en "Siguiente", deje la ubicación predeterminada de Cloud Firestore y luego haga clic en el botón "Habilitar". Una vez que se cargue, nuestra base de datos estará completamente lista para que la utilicemos.

Nota: La base de datos de Firebase está formada por colecciones, y estas colecciones contienen documentos, y cada documento es un objeto JavaScript que tiene campos.

Comencemos creando una nueva colección para nuestras notas.

Para crear una colección, haga clic en "Iniciar colección". Aparecerá un modal para que ingreses el ID de la colección, es decir, un nombre. Luego, haga clic en el botón “Siguiente”.

Ahora puedes comenzar a crear los documentos y campos para cada nota. Genere automáticamente la ID del documento para garantizar que sea única haciendo clic en "ID automática" al lado del campo del documento.

Haga clic en "Guardar" y continúe creando más documentos. Al final, así es como se ve mi base de datos:

Ahora que hemos terminado, veamos cómo conectar Firebase a nuestra aplicación. Vaya a "Descripción general del proyecto" en la barra lateral y agreguemos esto a una aplicación web haciendo clic en el botón "Web".

Nos aparecerá un formulario para “Agregar Firebase” a nuestra aplicación web. Le daremos el mismo nombre, "notesApp", y registraremos la aplicación (no marque el campo "Firebase hosting").

Una vez que se haya cargado, aparecerá un SDK para ayudarnos a inicializar nuestra base de datos en la aplicación. No lo haremos de esta manera, aunque necesitaremos cierta información del SDK generado. La forma correcta de hacer esto en Quasar es importar los módulos que necesitamos y usar un archivo de arranque.

Entonces, deje esa pestaña abierta y veamos cómo agregar el SDK de Firebase e inicializar Firebase en nuestra aplicación Quasar.

Lo primero que haríamos sería instalar Firebase en nuestro proyecto con npm.

npm install --save firebase

Una vez que se complete la instalación, inicializaremos la conexión de nuestra aplicación a Firebase creando un archivo de inicio, para que tengamos acceso inmediato a la base de datos cuando nuestra aplicación esté lista.

Un archivo de arranque nos ayuda a ejecutar el código antes de crear una instancia del componente raíz Vue.js de la aplicación. La documentación de Quasar tiene más información sobre los archivos de arranque y cuándo usarlos .

Para generar un archivo de arranque, ejecutaremos este comando en nuestra CLI:

quasar new boot firebase

Nota: No es necesario utilizar Firebase como nombre del archivo de inicio.

Una vez hecho esto, notará que el archivo ahora está creado en la bootcarpeta. Para utilizar este archivo de inicio recién creado, necesitaremos agregarlo a la quasar.config.jsmatriz de inicio del archivo.

Volvamos al archivo de inicio recién creado. Elimine todo el código allí porque no lo necesitamos. Importaremos los módulos que necesitemos y configuraremos nuestra base de datos. Pegue el siguiente código:

import firebase from "firebase/app";import "firebase/firestore";const firebaseConfig = { // ...};// Initialize Firebasefirebase.initializeApp(firebaseConfig);

Aquí, hemos importado Firebase y Firestore, y hemos inicializado Firebase, utilizando la configuración, que agregaremos ahora.

En este punto, casi hemos terminado de configurar nuestra aplicación. Necesitamos agregar nuestra configuración única, que se proporcionó en el SDK que se generó cuando agregamos Firebase a nuestra aplicación web. Copie solo la configuración y péguela en nuestra matriz.

Ahora deberíamos tener algo como esto:

import firebase from "firebase/app";import "firebase/firestore";const firebaseConfig = { apiKey: "AIzaSyDRcq5PXJSi5c5C8rl6Q6nudIJqTFaxXeA", authDomain: "notesapp-ffd7c.firebaseapp.com", projectId: "notesapp-ffd7c", storageBucket: "notesapp-ffd7c.appspot.com", messagingSenderId: "18944010047", appId: "1:18944010047:web:ddfb46fc6bc8bba375158a"};// Initialize Firebasefirebase.initializeApp(firebaseConfig);

Una última cosa, ya que estamos utilizando Firestore, es que necesitaremos inicializar Firestore en la nube agregando este código a nuestro archivo de inicio (la última línea):

let db = firebase.firestore();export default db;

Esto dbnos dará acceso a nuestra base de datos de Firestore. También lo exportamos para poder usarlo en cualquier lugar de nuestra aplicación.

En este punto, es posible que todavía estés un poco confundido, pero si has seguido esta guía, habrás inicializado correctamente Firebase para tu aplicación. Puede leer más sobre cómo agregar Firebase a su proyecto JavaScript en la documentación .

Obteniendo datos de Firebase

If you have followed the guide so far, everything should work fine once you launch your app. Now let’s grab the notes created in the database and display them in our app.

For this, we will be making use of the .onSnapshot hook, which will be fired any time the data in our collection changes. This will tell us whether a document has been added, removed, or updated. For this guide, we will only deal with the addition and removal of documents. Using hooks like this makes real-time syncing across devices possible. Let’s get started.

The first thing to do would be for us to get access to the database by importing it into the index page of our app.

import db from 'src/boot/firebase';

Then, create a mounted hook, because we want to fetch our data immediately after the app has loaded.

mounted() { db.collection("notes").onSnapshot(snapshot = { snapshot.docChanges().forEach(change = { let noteChange = change.doc.data(); if (change.type === "added") { console.log("New note: ", noteChange); this.notes.unshift(noteChange); } if (change.type === "modified") { console.log("Modified note: ", noteChange); } if (change.type === "removed") { console.log("Removed note: ", noteChange); } }); });}

In the code above, we are simply grabbing our notes collection, and every time there is a change in the collection, the onSnapShot method will be fired, which will return a snapShot of all our data. All of these data will be objects with type properties. These type properties will tell us the type of change that has happened and give us access to the data that was either added, modified, or removed.

This might sound confusing, but you will understand what we are doing as you read on.

If you save your code and check the console environment, you will notice that each note has been logged out. We can now push these objects to the notes array that we created earlier, so that we can display real-time data in our application.

The first thing to do is delete or comment out the objects in the notes array, so that we have something like this:

notes: []

Then, pass the objects to this array:

this.notes.unshift(noteChange); 
 
 
 
 
 
Tal vez te puede interesar:
 
Creación de su propia biblioteca de validación de React: las características (Parte 2)
 
Creación de un componente de diagrama de Gantt interactivo con Vanilla JavaScript (Parte 1)
 
Creación de un componente web retro que se puede arrastrar con iluminación
 
Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta
 
 
 

Introducción a Quasar Framework: creación de aplicaciones multiplataforma

¿Qué es el marco Quasar?¿Por qué Quasar Framework?EmpezandoInstalaciónConfiguración del proyectoEstructura de carpetas de QuasarCreación de una aplicaci

programar

es

https://aprendeprogramando.es/static/images/programar-introduccion-a-quasar-framework-creacion-de-aplicaciones-multiplataforma-1124-0.jpg

2024-12-03

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente