[Diario] Calendario para gente mayor - React Native+TS+Mongo Realm

isvidal #1 Feb '21

Calendar For Seniors

Why

Mi padre (67 años, jubilado), tenia un móvil viejo y cochambre de Samsung, y cuando le regale uno nuevo, un flamante y bonito Xiaomi, vino quejándose que la aplicación de calendario que llevaba cargada era muy complicada de usar y no le lanzaba alarmas al dispositivo como la de su anterior móvil. Intente que usara Google Calendar pero le parece demasiado complicada y no se aclara.

Si ya sé, seguro que existe alguna, que vosotros sabéis que hace todo eso. Me marque cómo objetivo lanzar una app móvil por a;o y esta es una magnifica oportunidad para matar muchos pájaros de un tiro, y de paso, hacer feliz a mi padre.

Para empezar, me veo forzado a utilizar React Native sin Expo, pues debo acceder a algunas de las funcionalidades de Android que no están portadas a React Native. Para la persistencia utilizare Mongo Realm que también lo tenia entre ceja y ceja.

Objetivos

El objetivo a nivel funcional es conseguir una aplicación de calendario que:

Sea tan sencilla que un manazas nacido 20 años después de la guerra civil española pueda usarla perfectamente.
Te lance los avisos de eventos en forma de alarma, configurable, horas, días, minutos antes, de tal forma que alguien que se olvida de cosas, sea imposible que se le pase el evento, ni que en ese momento se este echando una siesta.
Sea posible compartir tu calendario con otros miembros de tu familia, y estas reciban notificaciones push, de tal forma que mi padre cuando se apunta algo, me llegue a mi también, y si bien a mí no me salten las alarmas, pueda estar al tanto de lo que hace o tenga que hacer.
Pueda funcionar sin internet, y se sincroniza una vez recupera la conexión a internet. Mi padre es agricultor, y muchas veces esta en fincas donde no hay conexión a internet.
Te puedas conectar con tu cuenta de Google.
Multi idioma, Ingles, Castellano y Catalan.

Mi target principal es Android, voy a intentar que funcione en iOS pero la funcionalidad mas importante para mi (Que lance alarmas al dispositivo), hasta donde yo sé, no es posible de hacer en iOS.

Como bonus track, sincronizar in/out con Google Calendar.

Como objetivos a nivel técnico, entre muchos otros, me gustaría llegar a tener unit tests para todos los components, y e2e tests para todos los flows y procesos posibles. Ni puta idea de cómo hacer e2e en una app móvil.

El stack

Bare React Native con TypeScript, necesitare tocar algo de código nativo en Android. Voy a utilizar Redux (un saludo @Zoko) como gestor de estados, y no Context.

Para almacenar la data utilizare Realm de MongoDB, en principio encapsula la lógica de sincronización offline/online, así que este tema debería ser transparente (Creo, pero tengo que ver mas).

En principio las “apis” estarán en la propia app móvil, no habra un “backend” como tal atacare a los webhooks de Mongo, tengo que ver si uso GraphQL o voy a pelo.

Obstáculos a dia de hoy

El primero a nivel de hardware, voy a utilizar la ultima version del MacBook Air con el M1 cortesía de mi actual empresa, ( @JuAn4k4 no se lo digas al jefe ), y hay cosas, como el emulador de Android que están en pañales.

Tengo un poco de sudores fríos al pensar en el compilador de TypeScript cruzado con módulos nativos de Android. Pero bueno, siempre te queda el any juejjj.

En esta misma linea, mi experiencia con Android es minima.

Gestión de fechas, timezones etc… Sé perfectamente que la app la usaremos yo, mi padre y mi madre, pero me gustaría hacer un buen producto que se pueda bajar un tipo de EEUU y le funcione correctamente.

Tema de cuentas personales, me gustaría mantenerlo lo más sencillo posible y no meter nada fuera de Mongo, pero sí veo que Firebase me simplifica la vida a nivel de login con Google/Facebook/Apple, pues sera usada.

Links y herramientas

Para programar utilizare unicamente WebStorm de IntelliJ.

Repositorio en GitHub
Trello

9

B

[Borrado] #2 Feb '21

.

1

aren-pulid0 #3 Feb '21

mucha suerte, que aquí ya todos sabemos que eres un crack, dale duro!

1

JohnVoiden #4 Feb '21 Penitente

Por que utilizarás Redux y no varios useReducers y Contexts?

1 respuesta

JuAn4k4 #5 Feb '21

Los recurrence patterns son un dolor de huevos extraordinario con timezones, compartidos y con excepciones. La UX para borrar/editar ocurrencias y recurrencias para seniors va a ser complicado de sacar. Buena suerte

1

X-Crim #6 Feb '21 Moderador Mario Kart

Aquí estaré para seguir este pedazo de thread

r2d2rigo #7 Feb '21 Inocente

Para UI testing mirate Calabash, no se si hay alternativas porque es la que suele usar casi todo el mundo.

Opino como @JuAn4k4, mas te vale tener una buena libreria de manejo de fecha/hora (en Java esta Joda-Time que tiene algunos ports, no se si JS sera uno de ellos) porque te vas a cagar con el cristo que hay detras del tema.

2 respuestas

djamb #8 Feb '21

Si es por fines meramente formativos me parece un planteamiento chulo pero si lo que buscas es hacer la app simplemente, opinó que las tecnologías que estás usando no son las adecuadas

1 respuesta

JuAn4k4 #9 Feb '21

#7 y ya no es sólo el hecho de manejarlos, sino las decisiones de dominio que hay detrás de cada acción. Del tipo: Si borras/editas una recurrencia, eliminas todo? , el futuro? , las excepciones las dejas? Siempre tienes que mostrar qué estas editando/borrando de alguna forma clara y tal.

Es un horror.

Nosotros teníamos una librería heredada que tenía bugs en las recurrencias (las calculaba mal para el recurrence pattern) no veas que horror apañarlo.

1 respuesta

isvidal #10 Feb '21

#4 Por variar un poco, no hay ninguna razon tecnica. Aparte, si me motivo mucho, me gustaria permitir cosas como drag an drop eventos. Y Redux es mas facil de optimizar a nivel, de "No me rerenderizes el calendario entero, solo el dia de inicio del drag, y el dia del drop".

#7 Apuntado Calabash.

#7 y #9 Parece que Moment.js me va a solucionar la papeleta, al menos hacerlo aceptable:
https://toastui.medium.com/handling-time-zone-in-javascript-547e67aa842d

#8 Con que lo harias tu?

Dicho esto, empiezo ahora mismo ya a trabajar en ello. amoh alla!

3 respuestas

djamb #11 Feb '21

#10 yo personalmente me cogeria el ciclo de vida de la app y las vistas tal cual las tiene el en su móvil, la haría nativa(Swift, kotlin) con firebase y algun ORM tipo Realm.IO que está en las dos plataformas, total, creo que para los clientes que vas a tener no vas a tener que pagar firebase.
Y si lo que quiero es ahorrarme dos desarrollos haria algo para tirar de un webview y fuck the police!
Pero es lo que yo pienso, que lo mismo soy viejo pero no obsoleto como un Terminator xD.

JuAn4k4 #12 Feb '21

#10 Busca "recurrence pattern", los timezones en si mismos no son el problema. Aunque siempre puedes soportar unos limitados, royo aniversarios/semanal/mensual y ya.

https://icalendar.org/iCalendar-RFC-5545/3-8-5-3-recurrence-rule.html

Hay un moment recur por ahí, no se que tal irá.

1 respuesta

isvidal #13 Feb '21

Aqui dejo el primer commit, basicamente configuracion Husky, ESLint, Prettier...

Configuro Husky para que tire el linter, typescript y jest antes de cada commit, ademas, he metido commitlint para que valide el mensaje del commit y asi seguir un estandart en los mensajes del commit. (No mas emojis , Eisen estaria orgulloso)

Voy a hacerlo bien, sin complicarme por eso, rama master y develop, trabajo en develop, meto commits, creo el pull a master y mergeo.

El commit del primer pull:
https://github.com/jvidalv/calendar-for-seniors/pull/1/commits/db213d236b7c687d2949708aeaf894df395ac2b6

Ahora voy a intentar meter CircleCI para que vuelva a tirar los tests cuando detecte un pull nuevo. Es un overkill, pero asi aprendo un poco de CircleCI

#12 Me lo leo

isvidal #14 Feb '21

Pues ya tendriamos la config de CircleCI que se lanza al detectar el pull:

https://github.com/jvidalv/calendar-for-seniors/blob/master/.circleci/config.yml

Kaledros #15 Feb '21

#1isvidal:
cuando le regale uno nuevo, un flamante y bonito Xiaomi, vino quejándose

Todos los padres igual. Es alucinante.

JohnVoiden #16 Feb '21 Penitente

#10 Por eso preguntaba la verdad, porque la app como la describes no tiene diferencia o mejora para utilizar una u otra cosa. Pero si bien lo del drag and drop es una excusa ehhhh, porque ahi podrías utilizar un context con useReducer super pequeño finisimo xD

Zoko #17 Feb '21

#1

Gracias por la mención honorífica jajaja, aquí estaré al pie del cañón para ver como se desarrolla y por supuesto intentar echar un cable si hace falta. Conociéndote ya lo habrás mirado pero ni te plantees usar Redux sin RTK https://redux-toolkit.js.org/ , que es como realmente los creadores piensan que debe ser usado y te hace la vida MUCHO más facil y ya verás como empieza todo a parecerte algo mejor.

Por otro lado decirte que no tienes por qué usar uno u otro, son perfectamente combinables y a lo mejor el típico ThemeProvider lo quieres dejar en el Context tal cual, creo que es lo más acertado!

Por último, no te recomiendo para nada como pones en #1 que hagas tests unitarios para los componentes, los tests deben de ser de integración y no tienen que saber de detalles de implementación. Lo importante es que tus tests reflejen como el usuario va a usar la aplicación, deja los unitarios para el tema de alertas y demás, pero en los componentes no está nada recomendado, no vas a ganar nada.

Para e2e yo metería https://www.cypress.io/, que out of the box te graba videos incluso, es una puta pasada, hacer tests es hasta divertido.

Ya sabes, ando por aquí. A tope.

PD: Algun día enseñaré el proyecto que llevo haciendo los sábados y domingos durante los últimos dos meses con un compi, pero no está listo aún y realmente en tiempo neto creo que le habremos dedicado como una semana que le dedicaste tu a Astrale jajaja, pero bueno, cada uno lo que puede.

Zoko #18 Feb '21

#17

Acabo de ver que vas con RN a pelo, asi que cypress no lo podrás meter a menos que metas React Native Web. Para mi es worth, pero puedo entender que para ti no lo sea.

Por cierto, moment es un pepino, tienes de sobra con ello.

isvidal #19 Feb '21

🗓 Día 1

䷛ Repositorio

Hoy he completado los siguientes feats:

Inicializar el proyecto con la plantilla de TypeScript.

Configurado ESLint, Prettier, Husky, TS, y Commitlint. (La ultima version de Husky, que salió hace 2 semanas, mola más, y va mucho mas rápido).

Configurado CircleCI cuando se abre un pull request en Github.

Configurado el alias “app” de tal forma que puedo hacer todos mis imports como “app/hooks/use-mediavida”, y me ahorro el “../../../../hooks/use-mediavida”. Sobre esto decir que he aprendido que gracias al bundler que utiliza React Native puedes generar package.json en las rutas donde quieras tener alias. Ejemplo en ./src puedes meter un package.json con la propiedad name : “app”, y automáticamente tendrás disponible el alias, así de fácil y sencillo, thanks metro. (También sera necesario configurar TypeScript y ESLint para que el IDE y el compiler de TS no se vuelvan locos).

Implementada la primera iteración del store (Redux Toolkit thanks to @Zoko) de la app, posiblemente no quedara nada del slice “user” que he metido, es simplemente una prueba dummy para hacerme con la sintaxis y organización de los ficheros.

Para mañana mi intención es:

Instalar React Native Paper

Instalar Tailwind React Native y ver qué tal funciona, y cómo va mezclado con Paper.

Decidir si me fumo yo de cero la pantalla del calendario, la grid de días y tal, o utilizo algo existente.

Mirar lo de React Native Web ( @Zoko ) y que supondria, teniendo en cuenta que parece ir de la mano con Expo, al menos en su documentacion.

4 1 respuesta

Zoko #20 Feb '21

#19

Pues a mi me ha jodido de lo de husky que ahora te comes un folder si o si, antes era o bien unas lineas en el package.json o un archivito de config, y ahora tienes que tener ahi un folder super especifico para al fin y al cabo usar unos git hooks de manera fácil.
Por no hablar de la licencia, que no se si te has dado cuenta:

To use this new version at work, you can become a sponsor on GitHub Sponsors or Open Collective (monthly or yearly donations are supported).

Entiendo que a ti en este proyecto te da igual, y tambien entiendo que esta gente tiene que comer, pero no me ha molado mucho, probablemente salga en las proximas semanas una alternativa totalmente open source que haga exactamente lo mismo.

1 respuesta

isvidal #21 Feb '21

#20 Yo lo prefiero en carpetas y por fichero, primero porque te da mas libertad de fumarte los scripts en el fichero, que era imposible en una linea de un json. Y luego, porque quita mierda del package.json. Y al final una carpeta pues alli se queda.

Dicho eso, entiendo que hay muchas horas y bueno, algun redito quiere sacarle, a mi no me parece mal, mas alla de que esta por ver si este tipo de modelo (Que parece que esta creciendo) acaba triunfando o no.

desu #22 Feb '21

Pero cuantos diarios tiene este tio?

2 respuestas

Zoko #23 Feb '21

#22

Un número inversamente proporcional a tus streamings en twitch y blogs publicados.

4 1 respuesta

desu #24 Feb '21

#23 Tengo 6 posts publicados hdp. Que ataque tan gratuito.

isvidal #25 Feb '21

#22 Todo bien en casa?

isvidal #26 Feb '21

Por si a alguno le interesa, el commit que meto Tailwind en React Native:

https://github.com/jvidalv/calendar-for-seniors/pull/8/commits/7c006fae90d8c750dd829977dbaccf23d7374bb5

El io de puta genera un json enorme con todos los tipos mapeados a su equivalente en StyleSheet, pero bueno, a caballo regalado no le mires el dentado. Lo unico que me jode es que no tengo el autocomplete del IDE, pero vamos, llevo ahora mismo trabajando con tailwind 3 meses ya 8 horas diarias, te cago las clases a la velocidad del rayo, con o sin intellisense.

1 respuesta

isvidal #27 Feb '21