¿Cómo crear una aplicación usando Meteor?

Es una plataforma javascript de pila completa para desarrollar aplicaciones web y móviles. El meteoro utiliza un conjunto de tecnologías para lograr nuestro objetivo junto con Node.js y JavaScript. Espera los menores esfuerzos de desarrollo y proporciona el mejor rendimiento. En este artículo vamos a ver cómo podemos iniciar un proyecto sobre el meteorito.

A continuación se muestra una implementación paso a paso.

Paso 1: Instalación

• Linux y SO: El comando cURL se usa para interactuar con el servidor especificando su ubicación y aquí estamos recibiendo nuestro código para instalar Meteor desde el recurso provisto por Meteor y el comando sh lo está instalando.

curl https://install.meteor.com/ | sh

• Windows: en Windows, necesitaremos el administrador de paquetes de Nodes para instalar Meteor.

npm install -g meteor 

Paso 2:  Crear un proyecto con el meteorito es muy simple, simplemente escriba el comando de creación del meteorito en su terminal junto con algunas configuraciones.

meteor create app-name --option

• Configuraciones:
  app-name – Este será el nombre de nuestra aplicación.
  opción: el nombre de la biblioteca/marco de JavaScript que admite Meteor, es decir, Vue, Svelte, React, Blaze y Angular. Además, Meteor ofrece algunas opciones más.

Por ejemplo, aquí estamos creando una aplicación basada en reacción con   `meteor create hello-world –react `

Estructura del proyecto: en una inicialización exitosa, esta sería nuestra estructura de carpetas. 

Paso 3: Ejecutar la aplicación. Escriba el comando a continuación para ejecutar su aplicación Meteor, después de que Run Meteor mantenga todos los cambios de archivos sincronizados.

meteor run 

Algo como esto se mostrará en su terminal.

Salida: cuando abrimos http://localhost:3000 para ver nuestra aplicación en el navegador, aparecerá algo como la captura de pantalla que se muestra a continuación. Esta es la vista frontal predeterminada de una aplicación Meteor.

Con esto, nuestro proyecto de meteoritos está listo y podemos comenzar a escribir nuestros modelos de base de datos, la lógica del servidor y el diseño de interfaz dentro de él.

Ejemplo 1: en este ejemplo, vamos a reemplazar el contenido de interfaz predeterminado del meteorito. Dentro del directorio imports/ui existe un archivo App.jsx y podemos escribir nuestro código de reacción dentro de él.

Nombre de archivo: App.jsx

import React from 'react';
  
export const App = () => (
  <div>
    <h1>Hello, GFG Learner!</h1>
   </div>
);

Producción:

Ejemplo 2: Este es el ejemplo de cómo obtener datos de la base de datos y representarlos en la interfaz con la ayuda de Meteor. En primer lugar, tenemos que crear la colección mongo, aquí hemos creado una colección llamada gfglinks y la exportamos para que pueda usarse en otros archivos.

Nombre de archivo: enlaces.js

import { Mongo } from 'meteor/mongo';
  
export const LinksCollection = new Mongo.Collection('gfglinks');

Explicación: Después de crear la colección, podemos insertar datos en ella. En el backend, estamos insertando algunos datos en la colección. Meteor.startup ejecuta alguna funcionalidad determinada cuando se inicia el servidor. Tenga en cuenta que estamos importando LinksCollection que hemos exportado desde el archivo links.js . El método de inserción inserta los datos proporcionados en la base de datos.

Nombre de archivo: principal.js

import { Meteor } from 'meteor/meteor';
import { LinksCollection } from '/imports/api/links';
  
function insertLink({ title, url }) {
  LinksCollection.insert({title, url});
}
  
Meteor.startup(() => {
    insertLink({
      title: 'Competitive Programming Guide',
      url: 
'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=shm'
    });
  
    insertLink({
      title: 'Data Structures Tutorial',
      url: 
'https://www.geeksforgeeks.org/data-structures/?ref=shm'
    });
  
    insertLink({
      title: 'Algorithmic Tutorial',
      url: 
'https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm'
    });
});

Explicación: cuando los datos están en nuestra base de datos, podemos obtenerlos en la interfaz. Aquí estamos representando todos los datos que se insertan en la base de datos en el último paso. El useTracker es un gancho en Meteor que se encarga de toda la reactividad de los componentes. LinkCollection es el que hemos exportado desde el archivo link.js, el método de búsqueda encuentra todos los datos dentro de él.

Más adelante simplemente representaremos algunas etiquetas li con la ayuda de la función de mapa.

Nombre de archivo: App.jsx

import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { LinksCollection } from '../api/links';
  
const App = () => {
  const links = useTracker(() => {
    return LinksCollection.find().fetch();
  });
  
  return (
    <div>
      <h1>Hello, GeeksforGeeks Learner</h1>H
      <h2>Explore the Articles provided by GFG</h2>
      <ul>{links.map(
        link => <li key={link._id}>
          {link.title} <a href={link.url} 
            target="_blank"> Click Here!
           </a>
        </li>
      )}</ul>
    </div>
  );
};
export default App;

Salida: después de todo este proceso, nuestra aplicación está lista para ejecutarse, con Meteor Run se mostrará algo como el GIF que se muestra a continuación.