Hackeando un e-Reader con React

React para sitios web es genial y todo, pero ¿qué tal si lo usamos para eBooks? Estoy aquí para mostrarte cómo hackear un eReader para hacer 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, es decir, no un cierto golfista.

Además de mi nombre genial, si hay algo que debes saber 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, e incluso fui 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 enumerar. Cuando llego a la mitad, sus ojos ya se han vuelto vidriosos. ¿La solución? Poner mi colección en un menú. Ahora, puedo simplemente entregar a los invitados una lista que pueden examinar a su gusto. En lugar de volver a imprimir un pedazo de papel cada vez que mi colección cambia, puedo simplemente actualizar un e-reader. Ahora, te mostraré cómo puedes hacer esto tú mismo, creando una imagen y un e-book con React, y luego cargándolos en el e-reader.

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 la textura del papel.

Luego, pasé a crear el texto en primer plano usando SVG. Frecuentemente usamos SVG para crear arte vectorial en nuestros sitios web, y se asemeja 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 y la descripción del té, 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 elementos de texto y línea, pero moverlos alrededor de la imagen.

Con la sección superior bien dispuesta, puedo envolver todos estos elementos en un grupo y repetir el mismo proceso, ejecutando 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 a CSS o mostrar diferentes número de elementos y mostrar un menú para otras cosas en tu casa. También es fácil cambiar la imagen de fondo a lo que quieras. Para un e-reader, convierto el archivo SVG en una imagen png, lo que puedes hacer usando herramientas gratuitas como Inkscape y Squoosh. Algunos e-readers te permiten simplemente subir una imagen de pantalla de bloqueo personalizada, puedo conectarlo a mi computadora, luego arrastrar esta imagen a su disco duro en una carpeta de protector de pantalla. Pero otros e-readers no tienen esta característica. Sin embargo, la mayoría de ellos mostrarán la portada de cualquier libro que estés leyendo cuando esté bloqueado. Podemos abusar de esto escribiendo nuestro propio e-book, usando la imagen del menú como la portada del libro.

Ahora, cuando digo e-book, probablemente pienses en una versión digital de un gran libro como este con muchos personajes. Pero nuestro e-book va a ser más como un folleto. Si tienes al menos una página, puedes escribir un e-book. Los e-books se escriben en un formato llamado EPUB. Este es un formato estandarizado utilizado por todos los e-readers excepto Kindles, pero Amazon permite convertir fácilmente de EPUB al formato personalizado de Kindle. Los EPUBs son en realidad solo archivos zip que han cambiado su extensión. Al igual que los sitios web, los e-books necesitan ser responsivos ya que puedes tener diferentes tamaños de pantalla de e-reader. Como resultado, escribir un e-book 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 e-book, 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 EPUBs 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 una carpeta zip, los capítulos del libro en orden, y marcadores a 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 cabeza y cuerpo. Los metadatos incluyen el título del libro y la imagen de portada. El manifiesto incluye todos los archivos del 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 páginas importantes como la tabla de contenidos.

Probablemente no quieras lidiar con mantener un archivo como este, pero no te preocupes. Al igual que HTML tiene generadores de sitios estáticos para simplificar la escritura de un sitio web, existen generadores de EPUB para simplificar la escritura de ebooks. Utilicé Pandoc, un programa que puede convertir un archivo de rebajas en un archivo EPUB. La materia frontal, en la parte superior del archivo de rebajas, se utiliza para poblar los metadatos de EPUB. Cada encabezado de nivel superior en un archivo de rebajas también se convierte en un capítulo de EPUB. Así que esto facilita la inclusión de imágenes y descripciones de cada t-flare como capítulos de EPUB. Luego lo ejecuté todo con Dino, que es una herramienta realmente útil para ejecutar JavaScript en tu escritorio, como nodo, pero con muchas más características incorporadas. Tiene soporte incorporado para TypeScript y JSX, así que no necesité un paso de construcción. También incluyó el formateador de lente 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 npm. Cambié a usar Dino cuando escribía scripts de monast, porque es mucho más fácil construir rápidamente algo con él.

Con eso, tenemos todos los bloques de construcción que necesitas para crear un menú como este tú mismo. También puedes encontrar todo el código que escribí en GitHub. Puedes preguntar, ¿por qué pasar por todo este problema cuando podrías decir, usar un bolígrafo y papel? Bueno, es más divertido. Este es también un gran proceso de aprendizaje para mí para entender mejor cómo funcionan los e-readers, y cada vez que cambiamos nuestros tés, 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. www.microsoft.com www.microsoft.com www.microsoft.com