Como ya había mencionado en la parte 2, mantener el blog vivo requiero un esfuerzo constante. Idear temas sobre los que publicar y darse el tiempo para escribirlos no siempre es fácil. Pero por si esto fuera poco… decidí hacerme las cosas más difíciles de lo que deberían haber sido.
Yo siempre tuve la intención de diseñar mi propia página. Tal vez no quedaría perfecto en el primer intento pero quería intentarlo. Cuando me decidí a empezar este blog parecía que era el momento ideal para ello. Sin embargo después de analizarlo decidí que quería darle prioridad a escribir primero. A empezar cuánto antes a crear publicaciones.
Esto me llevo a optar por utilizar WordPress, ya que con esta plataforma tenía todo listo y podía enfocarme en darle prioridad a escribir posts.
Obviamente eso no quiere decir que no fuera a haber una curva de aprendizaje. Había que ver como funcionaba WordPress, como manejar un post, las categorías, los tags, etc. pero nada demasiado tardado. Pero mientras estaba aprendiendo todo esto encontré algo que no me esperaba. El REST API de WordPress.
Si eres desarrollador probablemente ya te des una idea de que es esto. Pero por si no lo sabes te lo resumo muy sencillamente.
Un REST API es una interface que permite acceder a datos a través de peticiones HTTP. O aún más simple: es un servicio que te da datos si le pasas ciertos parámetros a una cierta URL.
Aja bueno y ¿qué tiene esto de importante?
Bueno esto lo que basicamente significaba era que yo podía utilizar el back-end de WordPress (la base de datos y su REST API) para obtener datos e incorporarlos a una página hecha desde 0.
¿Y quien quería diseñar su propia página? ¡Yo!
Entonces pensé – ¿Porqué no aprovecho y dejo el blog publicado en WordPress, mientras voy construyendo mi sitio propio?
De seguro no será muy complicado.
Lo que tuve que aprender
Lo primero que tuve que hacer fue decidir con que tecnologías haría el sitio. Por circunstancias de la vida solo había podido trabajar en proyectos con Angular y con Vanilla Javascript (al menos hablando de aplicaciones web). Pero había una librería que siempre me había llamado la atención por lo popular que era: React.
Pero el problema era que si decidía usar React eso atrasaría el proyecto que quería hacer, porque obviamente al no conocer la tecnología me tardaría mas en hacer las cosas.
Sin embargo como mencioné al principio…hacerme las cosas mas complicadas es algo que tiendo hacer con cualquier proyecto.
Asi me decidí a dar el primer paso – Primero hay que aprender React. No puedo empezar a hacer un sitio web con esta tecnología si no la conozco.
React
Aprender la librería no fue algo tan difícil. Definitivamente más laborioso de lo que pensé en un principio pero nada que no fuera manejable.
Los ciclos de vida, los hooks, routing y JSX fueron de las cosas importantes que fui aprendiendo a manejar para poder empezar a crear el sitio.
Al principio no me gustó React, se me hizo muy desorganizado y con una sintaxis algo ambigua. (Por los hooks sobre todo). Pero con el tiempo le fui agarrando justo. Es bastante cómodo lo rápido que puedes tener un sitio funcionando sin tener que configurar muchas cosas.
Ok listo, pero ya que aprendí lo mínimo necesario de React, la verdad es que prefería utilizar Typescript y SASS en vez de Javascript y CSS.
Si no sabes, typescript es un lenguaje que le agrega tipado al lenguaje de Javascript (entre otras cosas). SASS es un preprocesador de CSS y a su vez también le agrega funcionalidad extra. Personalmente me gustan más y aunque no son necesarios, ayudan a que sea más limpio trabajar con el proyecto.
Pero nunca he usado Typescript ni SASS en un proyecto de React. Tengo que ver como configurar un proyecto que compile correctamente tomando eso en cuenta.
Supongo que para esto podría usar algo como webpack. He visto que se utiliza bastante, tal vez también es buena oportunidad de aprender como funciona.
Webpack
Webpack es un paquete de módulos de javascript. Básicamente sirve para poder definir compiles la versión de producción de tu proyecto.
Un ejemplo es precisamente cuando quieres usar Typescript y/o SASS, ya que al final necesitan compilarse a Javascript y CSS respectivamente. Otro caso de uso es si quieres que tus imágenes o archivos se guarden en algun lugar específico o si quieres excluir algunos de ellos en la versión final de tu sitio.
Fue bastante satisfactorio por fin entender esta herramienta que había visto en tantos proyectos y siempre había postergado aprender como funcionaba.
Ah pero me gustaría crear algo un poco fuera de la norma. Algo que justifique que no este usando WordPress. Si termino con un diseño igual a cualquier plantilla de WordPress entonces no tiene sentido haber hecho todo esto. Según recuerdo había una librería para cosas 3D en Javascript… tal vez pueda usar eso.
Three.JS
Como quizé poner movimientos 3D en la página tuve que aprender a utilizar esta libreria de Javascript. No tuve que dominarla ni convertirme en un maestro en la misma, pero tuve que averiguar como se utilizaban cosas como perspectivas, animaciones, objetos 3D, etc.
Por suerte ya había trabajado en entornos 3D antes (con Unity), así que no tuve problema entendiendo los conceptos de la librería pero si requirió algo de tiempo leer la documentación y hacer los intentos para llegar al resultado que quería.
Ok, ya solo falta la última “prueba”. Muy bonito que la parte gráfica ya funciona y todo , pero de nada me sirve eso si no puedo utilizar los datos de WordPress. Si esto no funciona de nada sirve lo anterior. Debí haber empezado con esto, pero bueno, ojála funcione.
WordPress REST API
Por suerte el API de WordPress es bastante fácil de usar. No tarde mas de 30 minutos en hacer que funcionara. Sin problemas pude armar una petición y ya tenia mis posts corriendo en mi interfaz propia. Aunque obvio en este punto lo que tenía era todavía un prototipo mas que nada.
El API de WordPress presenta bastantes funcionalidades, pero la documentación podría ser mejor. Había dudas que me tardé demasiado en resolver y se habrían solucionado si hubieran agregado mas instrucciones y ejemplos. No esta mal, pero definitivamente tiene unas áreas de oportunidad.
Muy bien todo funciona. Ahora quiero ver si puedo implementar una busqueda dinámica de los posts. Me gustaría que al buscar algun post se regresen resultados que contengan la palabra en el título, en los tags o en las categorías. De seguro el REST API tiene alguna funcionalidad similar que pueda usar… ¿verdad?
Servicios custom en WordPress REST API
Tristemente aunque hacer uso de la funcionalidad base del API fue muy fácil rapidamente me di cuenta que el servicio de REST API no tenía lo que necesitaba. Te regresaba texto que concordara con las categorías o los tags, pero nada con los títulos. La verdad me soprendió porque se me hace algo muy básico que cualquiera querría en su página.
Ni hablar, no solo tuve que meterme a la estructura de WordPress y aprender PHP para asi poder crear mis propios servicios y agregarselos al API de WordPress. También tuve que meterme a la estructura de la base de datos y crear mis propias vistas y procedures para alimentarlo.
Por mucho, la parte mas tediosa y tardada, sobre todo porque no esperaba tener que hacerlo.
Ok, ¿que mas? Pues ya que estoy haciendo mi página estaría bien tener una típica sección de contacto. Probablemente sería bueno guardar eso en base de datos y enviarme un correo cuando se use ese formulario. Y claro, no se enviar correos desde WordPress. Otra cosa que investigar.
PHPMailer
Enviar un mail con WordPress debe ser fácil ¿no? Es también algo muy básico, por lo que tendría que salir sin problemas. Pues como casi siempre la respuesta es si pero solo si ya sabes como. Encontrar la forma correcta de hacerlo es lo tardado.
Tristemente la mayoría de las respuestas en cuanto a dudas de WordPress te llevan a usar plugins. El problema de los plugins es que o cuestan o no los puedes usar a tu gusto. En mi caso quería activar el envío del correo después de haber recibido y validado datos a través de otro servicio custom en el REST API.
Pero después de varias pruebas y errores eventualmente logré que funcionará. A lo que sigue.
¿Ya ahora si por fin? Supuestamente iba a hacer una página simple. ¿Por qué de pronto me esta tomando mas tiempo del que pensé? Mmm….un misterio.
Bueno ahora solo falta…hacer la página. Oh pero claro, no he elegido en donde voy a publicar el sitio una vez este terminado. Podría usar el mismo dominio y host que tengo, pero entonces tendría que ver como configurarlo de manera que conviva junto con WordPress en el mismo servidor. Según había visto Vercel o Netlify, te dejan publicar sitios de manera gratuita (claro hasta cierto punto). Así podría mantenter separados el back y el front-end.
Vercel
Después de revisar ambas plataformas opté por utilizar Vercel ya que fue la que encontré era mas popular en ese momento. Vercel es una plataforma de despliegue para proyectos web. Bastante accesible y fácil de usar.
Como no es un lenguaje de programación o algo así, fue bastante simple de aprender. Tuve que investigar acerca de como funcionan sus variables de entorno, su integración con gitlab y el uso de Vercel CLI.
Una herramienta muy poderosa y bastante recomendable para lanzar tu sitio.
Ok ahora si ya me aseguré que se puede hacer todo lo que quiero hacer con el stack de tecnologías que tengo. Por fin puedo empezar con el desarrollo como tal…
Hoy
Esa fue la historia express de como poco a poco fui complicando mas y mas lo que se supone era un sitio muy simple.
Al menos hoy, por fin, esta publicado. Si, hay cosas que necesitan pulirse, cosas que se podrían mejorar y cosas que se podrían agregar.
Tardé mucho tiempo en lograrlo pero a cambio aprendí bastantes cosas nuevas. Así que creo que fue una gran experiencia.
