Creación de una aplicación en 45 minutos con Meteor

 

 

 

  • ¡Registro!
  • Taller de diseño conductual, con Susan y Guthrie Weinschenk

  • Índice
    1. Presentando Meteoro
      1. Paso 0: Instale Meteor (5 minutos)
      2. Paso 1: crea la aplicación (1 minuto)
      3. Paso 2: Agregar paquetes (1 minuto)
    2. Cliente vs. Servidor
      1. Paso 3: cree el marcado (10 minutos)
      2. Paso 4: Configurar el inicio de sesión en Twitter (3 minutos)
      3. Paso 5: divídalo en plantillas (5 minutos)
      4. Paso 6: conecte nuestra plantilla (5 minutos)
      5. Paso 7: arregle nuestras etiquetas (5 minutos)
    3. Una base de datos sobre el cliente
      1. Paso 8: Haga que la aplicación sea segura (1 minuto)
    4. Más sobre seguridad
      1. Paso 9: agregue botones de seguimiento (8 minutos)
      2. Paso 10: Implementación (1 minuto)
    5. Ir más lejos
      1. Otras lecturas

    Si algo ha aprendido Sacha Greif en sus años como diseñador es que la gente es vaga. En cambio, ¿qué pasaría si creara una aplicación que permitiera al usuario agregar su cuenta de Twitter a una lista con un solo clic? Este no será un tutorial tradicional. En cambio, será un recorrido paso a paso de cómo codificó la aplicación en una hora, incluidos los habituales errores tontos y giros equivocados.

     

    El otro día, finalmente logré uno de mis objetivos de larga data: pasar de una de esas ideas de "¿No sería genial?" a una aplicación funcional y en vivo en menos de 1 hora. 45 minutos, en realidad.

    Todo empezó con una reunión de diseño en San Francisco . Honestamente puedo decir que esta fue la mejor reunión a la que he asistido: aunque se anunció solo con dos días de anticipación, más de 200 personas confirmaron su asistencia y un buen número de ellas se presentó. Fue una gran oportunidad para poner caras a nombres conocidos, así como para hacer nuevos amigos.

    Pero comencé a hablar con tanta gente que no tuve la oportunidad de obtener información de contacto de todos. Entonces, al día siguiente, pregunté a los organizadores al respecto y sugirieron que todos los asistentes dejaran un enlace a su cuenta de Twitter en un documento de Google compartido.

    Eso funcionaría, pero temía que supusiera demasiado esfuerzo. Si algo he aprendido en mis años como diseñador es que la gente es vaga . En cambio, ¿qué pasaría si creara una aplicación que permita al usuario agregar su cuenta de Twitter a una lista con un solo clic?

    La aplicación funcionaría así:

    1. El usuario inicia sesión en Twitter,
    2. En la página aparece un enlace a su perfil de Twitter.
    3. ¡Eso es practicamente todo!

    Una vez completada mi lista de requisitos, me puse a trabajar para ver qué tan rápido podía construir esto y pensé que sería interesante guiarte a través del proceso.

    Al principio, eche un vistazo a cómo se veía la aplicación final:

    Nuestra última aplicación básica (¡pero funcional!).

    También puede ver una demostración del producto terminado y encontrar el código en GitHub . ( Nota: Espere algo de tiempo para que se cargue. Las aplicaciones alojadas en el servicio de alojamiento gratuito de Meteor a menudo se ralentizan cuando hay mucho tráfico).

    Una advertencia: este no será un tutorial tradicional. En cambio, será un tutorial paso a paso de cómo codifiqué la aplicación en una hora, incluidos los habituales errores tontos y giros equivocados.

     

    Presentando Meteoro

    Decidí crear la aplicación con Meteor . Meteor es un marco de JavaScript bastante joven que funciona sobre Node y tiene algunas características interesantes.

    La página de inicio de Meteoro

    Primero, es todo JavaScript , por lo que no es necesario lidiar con un idioma en el navegador y otro en el servidor. Así es: ¡el mismo lenguaje que usas para configurar los complementos del control deslizante de jQuery también puedes usarlo para consultar la base de datos de tu aplicación! El beneficio adicional de esto es que su aplicación ahora tiene una única base de código, lo que significa que puede hacer que el mismo código sea accesible tanto desde el cliente como desde el servidor si es necesario.

    Meteor también es reactivo , lo que significa que cualquier cambio en sus datos se refleja automáticamente en toda la aplicación (incluida la interfaz de usuario) sin necesidad de devoluciones de llamada. Esta es una característica poderosa. Imagínese agregar una tarea a una lista de tareas pendientes. Con reactividad, no necesita una devolución de llamada para insertar el nuevo elemento HTML en la lista. Tan pronto como Meteor recibe el nuevo elemento, propaga automáticamente el cambio a la interfaz de usuario, ¡sin ninguna intervención de tu parte!

    Es más, Meteor es en tiempo real , por lo que tanto tus cambios como los realizados por otros usuarios se reflejan instantáneamente en la UI.

    Como muchos otros marcos modernos, Meteor también acelera su aplicación web transformándola en una aplicación web de una sola página. Esto significa que en lugar de actualizar toda la ventana del navegador cada vez que el usuario cambia la página o realiza una acción, Meteor modifica solo la parte de la aplicación que realmente cambia sin recargar el resto, y luego usa la API HTML5 pushState para cambiar la URL. apropiadamente y haga que el botón Atrás funcione.

    No tener que actualizar toda la página habilita otra característica muy poderosa. En lugar de enviar código HTML a través de la red, Meteor envía los datos sin procesar y deja que el cliente decida cómo renderizarlos.

    Finalmente, una de mis características favoritas de Meteor es simplemente que automatiza muchas tareas aburridas , como vincular y minimizar hojas de estilo y código JavaScript. También se encarga de las cosas rutinarias en el back-end, permitiéndole agregar cuentas de usuario a la aplicación con una sola línea de código.

    He estado experimentando con Meteor durante los últimos seis meses, usándolo primero para construir Telescope (una aplicación de noticias sociales de código abierto) y luego, a su vez, usando Telescope como base para crear Sidebar (un sitio web de enlaces de diseño), y Acabo de publicar un libro al respecto. Creo que, más que cualquier otro marco, Meteor te ayuda a pasar de la idea a la aplicación en el menor tiempo posible. Entonces, si todo esto te ha despertado la curiosidad, te recomiendo que lo pruebes y sigas este breve tutorial.

    Paso 0: Instale Meteor (5 minutos)

    Primero, instalemos Meteor. Si estás en Mac o Linux, simplemente abre una ventana de Terminal y escribe:

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

    Instalar Meteor en Windows es un poco más complicado; Puede consultar esta práctica guía para comenzar.

     

    Paso 1: crea la aplicación (1 minuto)

    Crear una aplicación Meteor es bastante fácil. Una vez que hayas instalado Meteor, todo lo que necesitas hacer es volver a la Terminal y escribir esto:

    meteor create myApp

    Luego podrás ejecutar tu nueva aplicación localmente con esto:

    cd myAppmeteor myApp

    En mi caso, decidí llamar a mi aplicación twitterList, ¡pero tú puedes llamar a la tuya como quieras!

    Una vez que ejecute la aplicación, podrá acceder a ella https://localhost:3000/en su navegador.

    Paso 2: Agregar paquetes (1 minuto)

    Como quiero que los usuarios puedan iniciar sesión en Twitter, el primer paso es configurar cuentas de usuario. Afortunadamente, Meteor también hace que esto sea trivialmente fácil. Primero, agregue los paquetes Meteor requeridos accounts-uiy (ya que queremos que los usuarios inicien sesión con Twitter) accounts-twitter.

    Abra una nueva ventana de Terminal (ya que su aplicación ya se está ejecutando en la primera) e ingrese:

    meteor add accounts-uimeteor add accounts-twitter

    Ahora podrá mostrar un botón de inicio de sesión simplemente insertándolo {{loginButtons}}en cualquier lugar de su código de manillar.

    Una versión más compleja del accounts-uiwidget, como se ve en Telescope .

    No quería preocuparme por el estilo, así que decidí incluir también Twitter Bootstrap en mi aplicación.

    Fui al sitio web de Twitter Bootstrap, descargué el marco, extraje el archivo ZIP, lo copié en el directorio Meteor de mi aplicación y luego conecté los archivos CSS necesarios en el encabezado del archivo principal de mi aplicación.

    Ja, ja, en realidad no. ¿Qué es esto, 2012? No es así como funciona con Meteor. En lugar de eso, simplemente regresamos a la Terminal y escribimos:

    meteor add bootstrap

    Cliente vs. Servidor

    Supongo que llegados a este punto debería contaros brevemente más sobre cómo funcionan las aplicaciones Meteor. Primero, ya hemos establecido que el código de una aplicación Meteor es todo JavaScript. Este JavaScript se puede ejecutar en el navegador como el código JavaScript normal (piense en un complemento jQuery o un alert()mensaje), pero también se puede ejecutar en el servidor (como el código PHP o Ruby). Es más, ¡el mismo código se puede ejecutar incluso en ambos entornos!

    Entonces, ¿cómo se hace un seguimiento de todo esto? Resulta que Meteor tiene dos mecanismos para mantener separados el código del cliente y del servidor: los directorios booleanos Meteor.isClienty Meteor.isServery los directorios /clienty ./server

    Me gusta mantener las cosas limpias; entonces, a diferencia de la aplicación Meteor predeterminada que se genera meteor create(que usa valores booleanos), prefiero usar directorios separados.

    Además, tenga en cuenta que todo lo que no esté en los directorios /cliento /serverse ejecutará en ambos entornos de forma predeterminada.

     

    Dado que nuestra aplicación es bastante simple, en realidad no tendremos ningún código personalizado del lado del servidor (lo que significa que Meteor se encargará de esa parte por nosotros). Así que puedes seguir adelante y crear un nuevo /clientdirectorio y mover twitterList.htmly twitterList.js(o como se llamen tus archivos) a él ahora. Código P0300: Solución y Causas | Actualizado 2023

    Paso 3: cree el marcado (10 minutos)

    Me gusta comenzar con una plantilla estática y luego llenar los huecos con datos dinámicos, así que eso es lo que hice. Simplemente escriba su plantilla como si fuera HTML estático, excepto que reemplace cada "parte móvil" con etiquetas de manillar . Entonces, algo como esto…

     a href="https://twitter.com/SachaGreif"Sacha Greif/a/p

    … se convierte en esto:

     a href="https://twitter.com/{{userName}}"{{fullName}}/a

    Por supuesto, esas etiquetas no harán nada todavía y aparecerán en blanco. Pero muy pronto los compararemos con datos reales. A continuación, eliminé el contenido twitterlist.htmly me puse a trabajar en mi HTML. Este es el código que tenía después de este paso:

    head titleWho Was There?/title/headbody div div div div h4Did you go to the a href="https://www.meetup.com/Meteor-SFBay/events/115875132/"Designer Potluck/a? Sign in with Twitter to add your name./h4 {{loginButtons}} /div table trtd a target="_blank" href="https://twitter.com/{{userName}}"img src="{{image}}"/ {{fullName}}/a/td/tr /table /div /div/div/body

    Paso 4: Configurar el inicio de sesión en Twitter (3 minutos)

    Habrás notado la {{loginButtons}}etiqueta Manubrios, que inserta un botón de inicio de sesión en tu página. Si intenta hacer clic en él ahora mismo, no funcionará y Meteor le pedirá información adicional.

    Deberá completar las credenciales de Twitter de su aplicación. Vista más grande .

    Para obtener esta información, primero debemos informarle a Twitter sobre nuestra aplicación. Siga los pasos en pantalla y cree una nueva aplicación de Twitter; Una vez que hayas terminado, intenta iniciar sesión. Si todo ha funcionado correctamente, ¡ahora deberías tener una cuenta de usuario en la aplicación!

    Creando una nueva aplicación de Twitter. Vista más grande .

    Para probar esto, abra la consola de su navegador (en el inspector de WebKit o en Firebug) y escriba esto:

    Meteor.user()

    Esto recuperará el usuario actualmente conectado y, si todo ha ido bien, le dará a cambio su propio objeto de usuario (algo así como Object {_id: “8ijhgK5icGrLjYTS7”, profile: Object, services: Object}).

    Paso 5: divídalo en plantillas (5 minutos)

    Habrá notado que nuestro HTML tiene espacio para mostrar solo un usuario. Necesitaremos algún tipo de bucle para recorrer toda la lista. Afortunadamente, Manillar nos proporciona el {{#each xyz}}... {{/each}}ayudante (dónde xyzestán los objetos sobre los que desea iterar, generalmente una matriz), que hace precisamente eso.

    También dividiremos el código en algunas plantillas para mantener todo organizado. El resultado es algo como esto:

     

    head titleWho Was There?/title/headbody div {{ content}} /div/div/bodytemplate name="content" div div div {{loginButtons}} /div table {{#each users}} {{ user}} {{/each}} /table /div/templatetemplate name="user" trtd a target="_blank" href="https://twitter.com/{{userName}}"img src="{{image}}"/ {{fullName}}/a/td/tr/template

    Paso 6: conecte nuestra plantilla (5 minutos)

    Nuestra plantilla está toda configurada, pero está iterando sobre el aire. Necesitamos decirle qué es exactamente esta usersvariable en el {{#each users}}bloque. Este bloque está contenido en la contentplantilla, por lo que le daremos a esa plantilla un asistente de plantilla .

    Elimina el contenido de twitterlist.jsy escribe esto en su lugar:

    Template.content.users = function () { return Meteor.users.find();};

    Lo que estamos haciendo aquí es definirlo Template.content.userscomo una función que devuelve Meteor.users.find().

    Meteor.userses una colección especial creada para nosotros por Meteor. Las colecciones son el equivalente de Meteor a las tablas MySQL. En otras palabras, son una lista de elementos del mismo tipo (como usuarios, publicaciones de blog o facturas). Y find()simplemente devuelve todos los documentos de la colección.

    Ahora le hemos dicho a Meteor dónde encontrar esa lista de usuarios, pero todavía no sucede nada. ¿Qué está sucediendo?

    Paso 7: arregle nuestras etiquetas (5 minutos)

    ¿Recuerdas cuando escribimos esto?

    a target="_blank" href="https://twitter.com/{{userName}}"img src="{{image}}"/ {{fullName}}/a

    Los {{userName}}y son solo marcadores de posición {{image}}aleatorios {{fullName}}que elegí por conveniencia. ¡Tendríamos mucha suerte si correspondieran a propiedades reales de nuestro objeto de usuario! (Pista: no lo hacen).

    Descubramos las propiedades "reales" con la ayuda de nuestro amigo, la consola del navegador. Ábrelo y una vez más escribe esto:

    Meteor.user()

    El objeto devuelto tiene todos los campos que necesitamos. Al explorarlo, podemos descubrir rápidamente que las propiedades reales son en realidad estas:

    • {{services.twitter.screenName}}
    • {{services.twitter.profile_image_url}}
    • {{profile.name}}

    Hagamos las sustituciones en nuestra plantilla y veamos qué sucede.

    ¡Funciona! Nuestro primer y único usuario (¡tú!) debería aparecer ahora en la lista. Sin embargo, todavía nos faltan algunos campos y solo aparece el nombre completo del usuario. Necesitamos profundizar en Meteor para entender por qué.

    Una base de datos sobre el cliente

    Realmente aún no hemos tocado lo que hace Meteor detrás de escena. A diferencia de, digamos, PHP y MySQL, con los cuales sus datos residen sólo en el servidor (y permanecen allí a menos que los extraiga de la base de datos), Meteor replica los datos del lado del servidor en el cliente y sincroniza automáticamente ambas copias.

     

    Esto logra dos cosas. En primer lugar, la lectura de datos se vuelve muy rápida porque se lee desde la propia memoria del navegador y no desde una base de datos en algún lugar de un centro de datos.

    En segundo lugar, la modificación de datos también es extremadamente rápida, porque simplemente puede modificar la copia local de los datos y Meteor replicará los cambios en el lado del servidor en segundo plano. Pero este nuevo paradigma viene con una advertencia: tenemos que ser más cuidadosos con la seguridad de los datos.

    Paso 8: Haga que la aplicación sea segura (1 minuto)

    Abordaremos la seguridad de los datos tanto en términos de escritura como de lectura. Primero, evitemos que las personas escriban lo que quieran en nuestra base de datos. Esto es bastante simple porque todo lo que necesitamos hacer es eliminar el insecurepaquete de Meteor:

    meteor remove insecure

    Este paquete viene incluido con cada nueva aplicación Meteor para acelerar el desarrollo (lo que le permite insertar datos del lado del cliente sin tener que configurar primero todos los controles y equilibrios necesarios), pero obviamente no está diseñado para producción. Y como nuestra aplicación no necesitará escribir nada en la base de datos (excepto para crear nuevos usuarios, pero ese es un caso especial del que Meteor ya se ocupa), ¡ya hemos terminado!

    Más sobre seguridad

    Ya que estamos en el tema de la seguridad, las aplicaciones Meteor también vienen con un segundo paquete predeterminado, autopublishque se encarga de enviar todos los datos contenidos en sus colecciones del lado del servidor al cliente.

    Por supuesto, para una aplicación más grande, probablemente no querrás hacer eso. Después de todo, se supone que parte de la información de su base de datos permanece privada, e incluso si todos sus datos son públicos, enviarlos todos al cliente puede no ser bueno para el rendimiento.

    En nuestro caso, esto realmente no importa porque queremos “publicar” (es decir, enviar desde el servidor al cliente) a todos nuestros usuarios. Pero no te preocupes: Meteor sigue siendo lo suficientemente inteligente como para no publicar información confidencial, como contraseñas y tokens de autenticación, incluso con autopublishla opción activada.

    Paso 9: agregue botones de seguimiento (8 minutos)

    Si bien los visitantes ahora pueden hacer clic en un nombre para ir a su perfil de Twitter, sería mucho mejor simplemente mostrar botones de seguimiento para cada usuario. Este paso requirió algunos retoques para hacerlo bien. Resulta que el código del botón de seguimiento predeterminado de Twitter no funciona bien con Meteor.

    Después de 15 minutos de intentos fallidos, recurrí a Google y rápidamente descubrí que para aplicaciones de una sola página, Twitter sugiere usar un iframe.

    Esto funcionó muy bien:

    iframe src="https://platform.twitter.com/widgets/follow_button.html?screen_name={{services.twitter.screenName}}" frameborder="0" scrolling="no"/iframe

    Paso 10: Implementación (1 minuto)

    El último paso es implementar nuestra aplicación y probarla en producción. Una vez más, Meteor lo pone fácil. No es necesario buscar un servicio de alojamiento, registrarse, iniciar una instancia y realizar una inserción de Git. Todo lo que necesitas hacer es regresar a la Terminal y escribir esto:

     

    meteor deploy myApp

    Aquí myApphay un subdominio único que usted elige (no tiene que ser el mismo que el nombre de la aplicación). Una vez que la hayas implementado, tu aplicación estará disponible en . Continúe y pida a algunas personas que se registren: ¡verá sus perfiles de Twitter agregados a la lista en tiempo real!

    Ir más lejos

    Por supuesto, tuve que pasar por alto muchos conceptos clave de Meteor para mantener este tutorial ligero. Apenas mencioné colecciones y publicaciones, y ni siquiera hablé del concepto más importante de Meteor: la reactividad. Para obtener más información sobre Meteor, aquí hay algunos buenos recursos:

    • Documentación , Meteor Esta es una referencia obligatoria para cualquier desarrollador de Meteor. Y está almacenado en caché, lo que significa que incluso puedes acceder a él sin conexión.
    • EventedMind Chris Mather publica dos screencasts de Meteor todos los viernes. Son de gran ayuda cuando quieres abordar las funciones más avanzadas de Meteor.
    • Descubra Meteor Obviamente soy parcial, pero creo que nuestro libro es uno de los mejores recursos para comenzar con Meteor. Le llevará paso a paso a través de la creación de una aplicación de noticias sociales en tiempo real (piense en Reddit o Hacker News ).
    • Blog, Descubre Meteor También ponemos a disposición mucha información de forma gratuita en nuestro blog. Sugerimos consultar "Comenzando con Meteor" y "Recursos útiles de Meteor".
    • “ Creación de prototipos con Meteor ” Un tutorial que escribimos para NetTuts que le guiará en la creación de una aplicación de chat sencilla.

    Realmente creo que Meteor es uno de los mejores marcos que existen para crear aplicaciones rápidamente, y solo mejorará. Personalmente, estoy muy emocionado de ver cómo evoluciona el marco en los próximos meses. Espero que este breve tutorial te haya dado una idea de lo que es Meteor y te haya despertado la curiosidad por saber más.

    Otras lecturas

    • Construya su propia búsqueda de productos con telescopio y meteorito
    • Creación de una aplicación de primera clase que aproveche su sitio web
    • Cuatro formas de crear una aplicación móvil, parte 1: iOS nativo
    • Enfrentando el desafío: crear una aplicación web responsiva

    (il, ea, al, mrn)Explora más en

    • Móvil
    • Diseño web
    • javascript
    • Aplicaciones





    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de una aplicación en 45 minutos con Meteor

    Creación de una aplicación en 45 minutos con Meteor

    Presentando MeteoroCliente vs. ServidorUna base de datos sobre el clienteMás sobre seguridadIr más lejos¡Registro! Taller de diseño conductual, con Susan

    programar

    es

    https://pseint.es/static/images/programar-creacion-de-una-aplicacion-en-45-minutos-con-meteor-819-0.jpg

    2024-05-20

     

    Creación de una aplicación en 45 minutos con Meteor
    Creación de una aplicación en 45 minutos con Meteor

    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

     

     

    Update cookies preferences