Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX

React para sitios web es genial, pero ¿qué tal si lo usamos para libros electrónicos? Estoy aquí para mostrarte cómo hackear un lector electrónico para que muestre lo que quieras, como un menú de té. Mi nombre es Tiger Oaks. Soy un ingeniero de software que trabaja en Microsoft. Anteriormente trabajé en tres navegadores web diferentes. Puedes encontrarme en Mountainwoods en todas las redes sociales, como no un cierto golfista. Además de mi nombre genial, si hay algo que debes notar sobre mí, es que me gusta mucho el té. He comprado té de diferentes tiendas alrededor del mundo, y he recibido muchos tés como regalos de amigos. Acabo de ir a un festival de té el mes pasado. Básicamente, ahora tengo alrededor de 30 sabores de té diferentes en mi apartamento. Pero cuando tengo invitados, simplemente tengo demasiados tés para listar. Para cuando llego a la mitad, sus ojos ya se han vuelto vidriosos. ¿La solución? Poner mi colección en un menú. Ahora, yo puedo simplemente dar a los invitados una lista que pueden ojear como quieran. En lugar de reimprimir un pedazo de papel cada vez que mi colección cambia, puedo simplemente actualizar un lector electrónico. Te mostraré cómo puedes hacer esto tú mismo. Creando una imagen y un libro electrónico con React, y luego cargándolos en el lector electrónico. Comencemos desglosando cómo hacer una imagen para mostrar más tarde. Primero, comenzamos con un fondo para hacer que el menú se vea un poco más agradable. Tomé inspiration de una tienda de té temática de Dungeons and Dragons y creé un fondo personalizado en un papel Luego pasé a crear el texto del primer plano usando SVG. Frecuentemente usamos SVG para crear arte vectorial en nuestros sitios web, y se parece a HTML y nos permite usar React y CSS. Para un solo sabor de té en el menú, creé elementos de texto para el nombre del té y la descripción, así como una línea para separarlos. Luego lo envolví en un grupo SVG, como un div. Escribí un pequeño programa en TypeScript para leer la database con mi té, y luego escribir archivos SVG usando React. Este fragmento de SVG se ha convertido en un componente React, por lo que puedes traducir un objeto data en una imagen renderizada usando elementos de texto y posicionamiento SVG. Luego puedo mover cada uno de estos grupos, usando transform translate, como una transformación CSS, o usando position absolute. Al establecer diferentes valores de X e Y, puedo reutilizar los mismos textos y elementos de línea pero moverlos alrededor de la imagen. Con una sección superior bien dispuesta, puedo luego envolver todos estos elementos en un grupo y repetir el mismo proceso, escribiendo el componente con una traducción diferente para la sección inferior. SVG es muy flexible, por lo que puedes hacer tus propias personalizaciones. Podrías cambiar la fuente para ver los conjuntos, o mostrar diferentes elementos y mostrar menús para otras cosas en tu casa. También es fácil cambiar el fondo

Ahora, cuando digo libro electrónico, probablemente pienses en una versión digital de un libro grande como este con muchos capítulos. Pero nuestro libro electrónico va a ser más como un folleto. Si tienes al menos una página, puedes escribir un libro electrónico. Los libros electrónicos se escriben en un formato llamado EPUB. Este es un formato estandarizado utilizado por todos los lectores electrónicos excepto los Kindles, pero Amazon te permite convertir fácilmente de EPUB al formato personalizado de Kindle. Los EPUB son en realidad solo archivos zip que tienen su extensión renombrada. Al igual que los sitios web, los libros electrónicos necesitan ser responsivos ya que puedes tener diferentes tamaños de pantalla de lectores electrónicos. Como resultado, escribir un libro electrónico es muy similar a escribir un sitio web. Utilizas familiar HTML, CSS, e imágenes para crear cada capítulo del libro. En un sitio web, cada archivo HTML es una página en tu sitio, pero en un libro electrónico, cada archivo HTML es un capítulo de tu libro. EPUB utiliza una versión más estricta de HTML llamada XHTML. Necesitas asegurarte de que tus etiquetas de cierre automático tengan una barra y que los nombres de tus etiquetas estén todos en minúsculas. Esto puede sonar familiar porque estas son exactamente las mismas restricciones que tiene JSX, pero aparte de eso, todo es igual. Puedes incluir CSS y usar las mismas etiquetas como H1 y P e imagen. Los EPUB también necesitan un archivo llamado content.OPF, que actúa como un mapa del sitio. Este archivo incluye data, como el título del libro, cada archivo en la carpeta zip, los capítulos del libro en orden, y marcadores para algunas páginas importantes. Aquí tienes un ejemplo. El archivo de contenido está escrito en XML. Vamos a ocultar las partes no importantes. Puedes verlo desglosado en algunas etiquetas, similar a cómo un archivo HTML se desglosa en etiquetas de encabezado y cuerpo. Los metadatos incluyen el título del libro y la imagen de portada. El manifiesto incluye todos los archivos en el libro. Algunos archivos han sido asignados un id que puede ser referenciado en secciones superiores. El espionaje indica el orden de los capítulos. Y la guía apunta a

Utilicé Pandoc, un programa que puede convertir un archivo markdown en un archivo EPUB. La materia frontal en la parte superior del archivo markdown se utiliza para llenar los metadatos de EPUB. Cada encabezado de nivel superior en un markdown se convierte en un capítulo de EPUB, por lo que es fácil incluir imágenes y descripciones de cada sabor de T como capítulos de EPUB.

Luego lo ejecuté todo con Dino, que es una herramienta realmente útil para ejecutar JavaScript en tu escritorio, como Node, pero con muchas más funciones incorporadas. Tiene soporte incorporado para TypeScript y JSX, por lo que no necesité un paso de construcción. También incluye un formateador lineal incorporado, por lo que no necesité ESLint o Prettier, y tiene una gran biblioteca estándar, por lo que ni siquiera necesitas tantos módulos MPM modules. Cambié a usar Dino cuando escribía scripts monad, porque es más fácil construir algo con él. Con eso, tienes todos los bloques de construcción que necesitas para crear un menú como este por ti mismo. También puedes encontrar todo el código que escribí en GitHub.

Podrías preguntar, ¿por qué pasar por todo este problema cuando podrías decir, usar un bolígrafo y papel? Bueno, es más divertido. Este también es un gran proceso de aprendizaje para mí para entender mejor cómo funcionan los lectores electrónicos. Y cada vez que cambiamos nuestras camisetas, es mucho más rápido simplemente volver a ejecutar el script. Gracias a todos por escuchar, y no dudes en ponerte en contacto conmigo si tienes alguna pregunta.