Gems: Fuente Abierta Interfaz de Usuario de Gems y Módulos
Los módulos Gems se diseñaron para hacer que las interfaces de tareas sean reutilizables, ampliables y personalizables para satisfacer las necesidades de tareas complejas.
Hoy estamos abriendo la primera iteración de nuestro Kit de interfaz de usuario (UI) de Módulos de Gems. Esta versión incluye nuestro formato para construir interfaces de tareas con los Módulos, un campo de juego para probarlo, nuestra biblioteca de Interfaz del Usuario y un subconjunto de nuestra biblioteca de componentes. Para una representación visual, vea nuestro libro de cuentos aquí. Para ver el código fuente, echa un vistazo a nuestro github.
Los solicitantes pierden cantidades increíbles de tiempo y recursos construyendo su propia UI / UX porque las plataformas ofrecen alternativas insuficientes para tareas algo complicadas. Esperamos que los Módulos de Gems y su continuo desarrollo de código abierto faciliten a los solicitantes el lanzamiento de tareas significativas.
Puede leer más sobre la motivación para los módulos de gemas aquí.
Cómo funciona
Descargo de responsabilidad: esta publicación requiere conocimientos previos de JavaScript, React y prácticas de programación comunes.
Los Módulos de Gems están construidos con componentes React. Tienen un JSON asociado que les permite configurarse e importarse fácilmente a las aplicaciones. Aquí hay un ejemplo básico del uso de un Módulos de Gems en una tercera parte de la aplicación React:
El fragmento de arriba muestra una implementación repetitiva de representación de un campo de texto simple. Sin embargo, el código anterior se puede editar para mostrar cualquier cantidad de módulos. Para personalizar, cambiar o agregar nuevos módulos editamos el JSON en la matriz de módulos en el objeto de formulario. Echemos un vistazo a este JSON más de cerca:
La clave de tipo es un parámetro obligatorio que especifica qué componente se representará. Estamos utilizando el tipo ‘texto’ que corresponde a un campo de entrada con texto tipo. La clave del nombre es también un parámetro requerido. La clave de nombre determina cómo se verán los datos de salida. Cuando un trabajador completa una tarea, los datos enviados tomarán el formato “nombre”: “datos”. Es importante nombrar los componentes algo que tenga sentido para que sepa qué datos se enviaron. La clave de marcador de posición es un campo personalizado requerido para el componente de texto. Corresponde a un texto de marcador de posición para nuestro campo de entrada. ¿Cuál es el resultado? Esto representa un campo de entrada simple en la pantalla con el marcador de posición “Texto simple”.
Al combinar otros módulos, podemos realizar tareas complejas.
Este JSON anterior mostrará una tarea que le pide al usuario que cree una pregunta de trivia y tiene entradas para la pregunta, respuesta y respuestas incorrectas. Cada objeto JSON en la matriz de módulos corresponde a un módulo diferente que se agregará a nuestra interfaz.
La lista completa de módulos disponibles está disponible en nuestro libro de cuentos.
Campo de Juego
El campode juegos es una forma sencilla de probar la construcción de una interfaz de tareas con nuestros módulos existentes. En el lado izquierdo está el formato json que describe qué módulos se deben mostrar. Al hacer clic en el botón más, puede agregar nuevos módulos al formulario. En el lado derecho está la salida que se muestra al usuario. Aquí puedes jugar con el campo de juego.
Módulos personalizados
Regresemos al ejemplo de pregunta de trivia. El ejemplo de pregunta de trivia consistió en un formulario con varios campos de entrada; el primer campo era para la pregunta, el segundo campo era para la respuesta correcta, y los dos últimos campos eran para respuestas incorrectas. El solicitante podría haber querido permitir que el trabajador envíe tantas respuestas incorrectas como sea necesario para la pregunta; en lugar de 2 respuestas incorrectas, el trabajador podría enviar n respuestas incorrectas al agregar y eliminar campos. El solicitante necesita un componente personalizado para agregar y eliminar campos de entrada.
Para aplicaciones de terceros, la forma más fácil de hacerlo sería:
Desarrollar los componentes de Reacción de los módulos
Registre el nuevo Módulo a través de los controles prop
Agregue su nuevo componente personalizado al objeto de formulario
Aquí hay un ejemplo rápido de un módulo personalizado teórico en una aplicación de terceros:
En el fragmento anterior, definimos nuestro componente React MyInputModule. Esto es lo que se mostrará en nuestra forma. A continuación, registraremos nuestro componente como un Módulo y asignaremos un tipo. Le daremos el tipo ‘entrada’.
Ahora podemos usar el tipo ‘entrada’ para importar nuestro Módulo a cualquier interfaz.
¡Felicidades! Acabamos de construir nuestro primer Módulo de terceros. Si está orgulloso de su módulo y le gustaría compartir, agradecemos las contribuciones de los nuevos módulos a nuestro repositorio github. Esto permite que todos los solicitantes se beneficien del trabajo pasado y promuevan mejores interfaces de tareas.
Resumen
El formato del módulo ayuda a resolver el problema de construir interfaces reutilizables que también pueden ser altamente personalizables, almacenables y ampliables. Actualmente usamos el formato para interfaces de tareas, interfaces de verificación, así como nuestra experiencia de incorporación de tareas. Si está interesado en obtener más información, consulte nuestro repositorio github, nuestro libro de cuentos, o tóquenos un mensaje en Telegram.
Módulos de Gems ¿qué dices? Venga y aprenda más sobre Gems:
- Constribuye a nuestro Github
- Sigue a nuestro Twitter @Gems
- Visite nuestro sitio web Gems.org
- Únete a nuestro telegrama
- Lee nuestro libro blanco
- Sigue nuestro blog
- Correo electrónico: hello@Gems.org
