diff --git a/.gitignore b/.gitignore index 391fb81..51235c7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ -*.pdf -*.docx +borrador.pdf +borrador.docx # Created by https://www.gitignore.io/api/vim,linux,latex # Edit at https://www.gitignore.io/?templates=vim,linux,latex diff --git a/borrador.md b/borrador.md index 6346a40..f95e697 100644 --- a/borrador.md +++ b/borrador.md @@ -66,8 +66,113 @@ Changelog 10/05 + Se agregó sección con nueva idea de obra ~ Se convirtió el documento de LaTeX a markdown + +15/05 + + Se agregó sección con diseño gráfico de nueva propuesta + + Se agregaron secciones relacionadas con la base de datos + + Se agregaron secciones con relación a patrones de arquitectura de software + + Se agregó diagrama de "stack" de tecnologías ``` + +15 de Mayo +========== + +H1P3RV1NCUL4R (Hipervincular) +----------------------------- + +H1P3RV1NCUL4R es un nombre tentativo para la obra. En la idea previa había pensado en "friendly :)" como nombre de la red social para poder empezar a trabajar en como se vería. Estuve pensando en diferentes nombres para la nueva idea, pero me parece que este funciona bien en tanto es "neutral". No quiero connotar ninguna cualidad positiva ni negativa sobre las redes sociales para no generar expectativas por fuera de la parte de realidad virtual de la experiencia. + +Se me ocurrió hacer un logo que represente la vinculación entre las personas que estarán en cada momento en la instalación. Como planteé que la experiencia sería para 8 personas en simultáneo, dibujé un octágono y uní con lineas todos sus vértices entre sí: + +![Logo de +H1P3RV1NCUL4R](./images/hiperlogo.png){#fig:logo_hiper width="25%"} + + +Lo que verá inicialmente unx usuarix antes de acceder a la aplicación web algo similar a lo que se ve en el siguiente "mockup": + + +![Mockup de pantalla de +login/registro](./images/mockup.pdf){#fig:mockup width="40%"} + +Base de datos +------------- + +Estuve estudiando diferentes posibilidades para almacenar los datos extraídos de las redes sociales y, posteriormente, los datos procesados producto de diferentes técnicas de minería de datos aplicados sobre los primeros. + +Existen dos tipos de bases de datos que podría usar para almacenar estos datos: las bases de datos relacionales y las bases de datos documentales. + +Después de estudiar las pros y las contras de cada una, decidí optar por una base de datos relacional. En ésta, la información se almacena en tablas en las que cada columna define un tipo de datos y una clave (nombre por el cual se identifica a esa columna). + +Las tablas no pueden tener tablas anidadas como sucede en las bases de datos documentales, así que voy a tener diferentes tablas que corresponden a lxs usuarixs y otras para cada tipo de dato recolectado para las redes sociales (por ejemplo, una tabla para fotos de Facebook, y otra para "tweets" de Twitter). Cada usuarix y cada foto (u otro elemento en otra tabla) va a tener un identificador numérico único. Lxs usuarixs van a tener una columna en su tabla que lxs vincule con las fotos. Esto parece complicado que tener una tabla de fotos dentro de una columna en la tabla de usuarixs (que es una posibilidad en las bases de datos documentales), pero de esta manera hay dos ganancias: + +- Cada foto puede pertenecer a varixs usuarixs. Esto puede ser útil para determinar las relaciones entre usuarixs, en el caso de que otra persona haya sido etiquetada a en una foto, por ejemplo +- Las bases de datos relacionales son mucho más rápidas que las bases de datos documentales por diseño, por lo que puedo trabajar con el set de datos completos de manera más eficiente. + +Existen muchas bases de datos relacionales, pero decidí usar PostgreSQL porque responde al estándar de SQL^[ Esto me permite reemplazarla por otra base de datos que también responda al estándar. ], está bien documentada^[ Sitio web de la documentación oficial: ], y es más rápida para trabajar con JSON^[ JSON significa JavaScript Object Notation. Es un formato para intercambio de datos muy utilizado] que otras alternativas^[ Benchmark: ]. Esto es importante porque tengo en mente almacenar la respuesta de cada petición a la API, y estas están en formato JSON. Es muy importante hacer esto porque puedo hacer nuevas peticiones a la API a partir de peticiones anteriores, debido a que cada una tiene al final de su JSON un hipervínculo para pedir la próxima "página": cada petición a la API tiene una extensión máxima y en el caso de que hayan más datos disponibles, se debe hacer otra llamada con los próximos datos. + +Ejemplo de tablas en base de datos relacional +--------------------------------------------- + +Un tabla para usuarixs con fotos asociadas de facebook podría ser la siguiente: + +| ID | Nombre | Apellido | eMail | Edad | ID de facebook | Fotos de Facebook | +| ---| ------ | -------- | ----- | ---- | ---------------| ----------------- | +| `1` | Maria | Gonzalez | `maria_gonzales@gmail.com` | 23 | `2315351246` | `[1, 2, 6 ]` | +| `2` | Juan | Rodriguez | `juan_rodriguez@gmail.com` | 18 | `6936021072` | `[ 3, 4, 5, 6]` | +| `3` | etc... | etc... | etc... | etc... | etc... | etc... | + + +Mientras que una tabla para las fotos de facebook podría tomar esta forma: + +| ID | Pertence_a | Directorio | ID de Facebook | +| ---| ---------- | ---------------------------- | --------------- | +| `1` | `1` | `facebook/fotos/0000001.jpg` | `1808441965` | +| `2` | `1` | `facebook/fotos/0000002.jpg` | `6230240439` | +| `3` | `1` | `facebook/fotos/0000003.jpg` | `2308347750` | +| `4` | `2` | `facebook/fotos/0000004.jpg` | `8824726733` | +| `5` | `2` | `facebook/fotos/0000005.jpg` | `7823454670` | +| `6` | `[ 1, 2 ]` | `facebook/fotos/0000006.jpg` | `8180123011` | + +En este ejemplo, la foto con ID 6 es compartida por ambos usuarixs para ilustrar la potencial ventaja de usar bases de datos relacionales. + +ORM y modelos +------------- + +Para hacer modificar o acceder a los datos de una base de datos relacional que utiliza SQL, se puede utilizar una linea de comandos en la cual se estructuran "consultas" en un lenguaje que es muy similar al inglés plano. Sin embargo, desde el código de mi aplicación no puedo hacer esto directamente porque los lenguajes de las bases de datos no son lenguajes de programación y los tipos de datos que utilizan no son necesariamente compatibles con los tipos de datos de las estructuras de datos de lenguajes de programación. Para hacer poder trabajar con los datos de la base de datos se puede utilizar un mapeo objeto-relacional^[ ver más en: ]. En mi caso, como estoy trabando con JavaScript decidí utilizar Sequelize^[ Documentación: ] que es muy utilizado (3 millones de descargas por mes, aproximadamente) y con un desarrollo activo. + +Con Sequelize puedo definir "modelos" que definen que forma va a tomar mi base de datos, para asegurarme de no insertar datos en tablas incorrectas, o de no solicitar datos no existentes accidentalmente. + +Patrón de arquitectura de software MVC +-------------------------------------- + +La idea de los "modelos" tiene que ver con un patrón de arquitectura de software llamado "Modelo-Vista-Controlador", en la que las responsabilidades del código se dividen en esas tres categorías. Los modelos definen la forma de la base de datos, los controladores como se interactua con esos datos (pueden ser funciones que hagan peticiones a la base de datos o alguna manipulación de los datos), y las vistas son lo que se le presenta a lx usuarix final. + +En mi caso, no estoy usando un framework para desarrollar aplicaciones sobre este patrón de arquitectura de software, sino que estoy tomando prestados algunos conceptos y adaptándolos para tener una mejor imagen mental de que hice y que me falta hacer. La parte de las vistas que generalmente se resuelve de lado de servidor la voy a implementar en el cliente utilizando React, y parte del flujo de datos no responderá a este patrón, porque no está pensado para la comunicación en tiempo real que necesito implementar para la sección de realidad virtual + +Sobre la realidad virtual +------------------------- + +Para llevar desarrollar la sección de realidad virtual necesito resolver dos cuestiones: + +- La representación de gráficos tridimensionales +- La comunicación en tiempo real + +Para la primera parte, voy a utilizar three.js^[ Sitio web: ], que es una biblioteca desarrollada para ésto y que esta construida sobre el estándar de WebGL. Para la segunda parte, tengo pensado utilizar Socket.IO^[ Sitio web: ], que es una biblioteca para la comunicación en tiempo real utilizando WebSockets + +Accediendo a las APIs de las redes sociales +------------------------------------------- + +Las redes sociales proveen una API que permite generar un token de acceso para poder utilizar las diferentes APIs o acceder a los datos de cada usuarix en la red social. Cada una tiene sus particularidades que dependen de las decisiones de diseño que tomó cada equipo de desarrollo, por lo que para poder utilizar cada una debería estudiarla. Para ahorrarme este paso, voy a utilizar Passport.js, que es una biblioteca para autenticar usuarixs en un servidor a través de diferentes métodos. La biblioteca provee métodos (llamados estrategias en su sitio web) para autenticarse con cada una de las redes sociales mayores, por lo que puedo aprovechar esta capa de abstracción para poder utilizar las APIs que necesito realmente de forma directa. + +Diagrama de tecnologías +----------------------- + +En el siguiente gráfico están diagramados los componentes (mayores) del software de la instalación y sus relaciones: + +![Diagrama de +tecnologías](./images/stack.pdf){#fig:stack width="85%"} + 10 de mayo ========== @@ -188,7 +293,7 @@ La UI utilizada para mostrar las diferentes publicaciones a lxs usuarios es minimalista, y se presenta en forma de rectángulos flotantes que obstruyen la vista del resto de lxs usuarixs: -![Ejemplos de UI](./images/ui.png){#fig:ilustracion_in width="60%"} +![Ejemplos de UI](./images/ui.png){#fig:ilustracion_ui width="60%"} 8 de Mayo ========= diff --git a/compile b/compile index adda2e4..2c4fc3d 100755 --- a/compile +++ b/compile @@ -22,10 +22,10 @@ done if [[ "$p" == "True" ]]; then echo "Compiling .pdf" - pandoc -i borrador.md --pdf-engine=xelatex -o borardor.pdf + pandoc -i borrador.md --pdf-engine=xelatex -o borrador.pdf fi if [[ "$d" == "True" ]]; then echo "Compiling .docx" - pandoc -i borrador.md -o borardor.docx + pandoc -i borrador.md -o borrador.docx fi diff --git a/images/hiperlogo.png b/images/hiperlogo.png new file mode 100644 index 0000000..2ecaf0d Binary files /dev/null and b/images/hiperlogo.png differ diff --git a/images/mockup.pdf b/images/mockup.pdf new file mode 100644 index 0000000..d611082 Binary files /dev/null and b/images/mockup.pdf differ diff --git a/images/stack.pdf b/images/stack.pdf new file mode 100644 index 0000000..15fed25 Binary files /dev/null and b/images/stack.pdf differ