SanJose WordCamp @2019
Repositorio donde se aloja todo el material utilizado para el dictado del workshop en el WordCamp de San Jose, Costa Rica, llevado a cabo el 7 y 8 de septiembre del 2019.
WordPress.js@0.0.1-beta.0
Guiá de desarrollo de una aplicación moderna integrada con WordPress.
Idea
La idea es realizar un workshop focalizado en el desarrollo de una aplicación web moderna, donde se mostraran ejemplos claros y consisos de algunas herramientas tan útiles y básicas como necesarias. Desde la configuración de tu entorno de trabajo pasando, por varias etapas intermedias tales como revisionar tu código, herramientas de edición y testeo, etc. para finalmente aterrizar en el uso de la integración con WordPress.
#nodejs, #git ,#react y #wordpress son algunos tags que definen por sí solos el alcance del curso.
Si bien el nivel del curso depende de cuán familiarizado se esté con este tipo de tecnologías está pensado partiendo de un nivel #principiante; pero sin dejar de tener en cuenta que también se abordarán detalles específicos y avanzados relacionados con el entorno.
Watchdog - Aplicación de Ejemplo
Intentaremos desarrollar una aplicación que sirva como herramienta de supervisión de sitios web implementados con WordPress. Un ejemplo sencillo de uso sencillo podría ser la supervisón de blogs de nuestros clientes. A veces para dar un buen soporte necesitamos saber qué cuáles son las acciones que se han realizado en los sitios web para entender la falla del problema: instalación de plugins, themes, cambio de permisos, elimiar usuarios, etc. son algunas de las acciones que intentaremos supervisar.
Sumario
- Presentación
- Herramientas de desarrollo
- Dependencias básicas
- Aplicación básica funcionando
- Layout
- Mejores menores
- OAuth con WordPress.com
- Interacción con la API WordPress.com
- Renderizando listado de sitios
Presentación
Charla rápida de lo qué se abordará en el taller.
- Tecnologías
- Entorno de desarrollo. Aplicaciones.
- Idea de la aplicación Watchdog
Paso básico: Primeras acciones en el teclado
- Editor (emmet)
- Crear la estructura básica: Directorio de Trabajo.
git: Instalacion. Init. Primer commit.markdown: README.md y tips básicos.git: repositorio local. Primer commit. Ignorando .idea/- Cuenta en Github.
- Configuración repo local -> repo remoto - push!
- Log:
git logy comandos git customizados. - Github desktop. Agregar repositorio actual.
- Crear tag inicial.
links
- git
- github
- markdown specification
- tutorial empezando con git
- 16 awesome git aliases that you will love
Herramientas de desarrollo
nodejs,npm. Qué son? Instalación.nmanejando versiones denodejs.- Configuración inicial de la app
- Valores por defecto de
npm - Crear package.json
./app/watchdog.npm init
- Valores por defecto de
- Browser con herramientas de desarrollo (chrome)
- Terminal Hyper
links
Dependencias básicas
Instalación de las dependencias básicas de la aplicación. Presentación teórica de React y Next.js
links
Aplicación básica funcionando
Primer versión de la aplicación super básica funcionando. Configuración de next.js. Agregar scripts de ejecución. Homepage (pages/index.js). Primer componente. Agregamos estilos básicos (in line).
Layout
- Crear e implementar un layout básico (este dede funcionar como un HOC).
- Carpeta
./componentsy archivo./components/layout.js. - Crear
menuandfooter.
Mejores menores
- Estilos globales.
- Uso de
<Link />component. - agregar versión de app
- Agregar
doclink al menu principal (markdown). (TODO) - Agregar Theme (TODO)
links
https://github.com/zeit/next.js/wiki/Global-styles-and-layouts
OAuth con WordPress.com
- Implementación de OAuth con nuestra cuenta de WordPress.com.
- Instalación y uso del component de React.
- Configuración.
- Almacenar token para hacer persistente la autenticación.
links
Interacción con la API WordPress.com
- Obtener información personal (/me)
- Obtener listado de Sitios (/sites)
Renderizando listado de sitios
Data flow - The State
- Implementar el manejo de almacenamiento de datos en el state con useState, useReducer, useRedux.
Data flow - Persistencia
- Almacenar los datos obtenidos en el client usando foreStorage
links
Acerca de mi
Utilizo @retrofox como seudónomo (cuando me es posible :-D). He trabajado como freelancer varios años, en un par de startups siendo cloudup la más conocida y exitosa de mi carrera.
Principiante autodidacta, apasianado por vocación, trato de mantener viva la llama que alimenta el deseo de hacer de la programación una tarea creativa y divertida.