Desarrollo y diseño

Diario app móvil de montañismo - TypeScript, React, Express & Posgre

isvidal
isvidal #1 23 Nov

En honor a Astrale.

100cims

App móvil para iOS y Android usando react-native. El nombre es en honor al desafio de los 100 cims en Cataluña.

Más alla del nombre, la idea es que sea generica y pueda funcionar para cualquier parte del mundo, el scope inicial, 1.0.0, sera solamente centrado en las 50X cimas mas emblematicas de Cataluña.

Qué no es:

  • No es una app para hacer/trackear rutas como Wikiloc ( Ni Strava ).

Qué es:

  • Es una app de cimas a las que puedes subir andando (sin equipamiento de escalada).
  • Es una app donde marcar que has completado una cima (Un TODO pero nicho).
  • Es una app social donde podras ver otras personas que han completado esa cima e interactuar con ellas.

Objetivos*

*A nivel del proyecto

  • Sencilla, tanto a nivel de features como de interfaz.
  • Low effort, tanto en coste mensual económico como en tiempo.
  • Aprender, un nuevo stack (tRPC ergo node backend con typescript).

Stack

El código, otra vez abierto, al menos inicialmente, vivira en un monorepo (pnpm + turborepo).

Las apps:

  • api/: Node, Express (Con tRPC y Prisma).
  • mobile/: Expo, React Native (TypeScript, Tailwind, SWR...).
  • web/: Remix.
  • scrappers/: Python.

El puente entre backend (api) y app móvil sera usando tRPC (TypeScript).

La base de datos sera un PostgreSQL alojado en Neon.tech, migraciones y queries usando Prisma.

Features

En construcción...

Resources

Log de diarios

Pendiente...

16
JuAn4k4
JuAn4k4 #2 24 Nov

¡Mucha suerte!

Soltrac
Soltrac #3 24 Nov MV Wizard

Isvidal haciendo backend, el mundo se ha vuelto loco!!!
Es coña, va a quedar de puta madre.

1 respuesta
isvidal
isvidal #4 24 Nov

#3 He sido backend muchos años, y me considero full stack, piensa que he hecho mil apps, tanto web como movil, lo que si, siempre he hecho de backend PHP usando Yii2 de framework. Soy muy eficiente ahi, y podria copiar y pegar todo entero, pues como digo, al hacer tantas apps de todo tipo tengo ya todos los use case en un sitio o otro para copiar pegar. Pero quiero probar en ir full typescript fe + be.

Sobre eso queria preguntar, donde recomendais desplegar la api en node/express? Alguna web, servicio? Facil y sencillo y barato?

He decidido hacerlo codigo abierto al final, al menos por ahora para poder compartir el codigo con todo el mundo, he puesto el link al repositorio en github:
https://github.com/jvidalv/100cims

Y he actualizado el listado de features:

2 respuestas
ignasi_
ignasi_ #5 24 Nov

Yo he hecho un proyecto con trpc + nextjs + prisma (sin la parte mobile) y trpc me parece la ostia. Prisma esta guay pero como quieras hacer cosas que no soporta (tsvectors, postgis que quizás en tu caso te interesa, etc) se vuelve un poco mierda y tienes que hacer guarradas, además que me parece que es un poco lento, aunque para casos simples no debería importar.

He leído buenas cosas de https://orm.drizzle.team/docs/quick-postgresql/neon que en principio tocas un poco más de sql puro, pero no lo he probado.

En cualquier caso buena suerte!

1 respuesta
isvidal
isvidal #6 24 Nov

#5 Por prisma lento te refieres a su solucion cloud o a su libreria open source?

Yo he usado prisma como interfaz entre backend y bd (digital ocean) antes y todo guay, esta era la interfaz:

spoiler

Y pude hacer todo lo que quise, eso si, nunca he tenido que hacer queries usando coordenadas, si veo que la api de prisma no da, pues para esas puedo lanzar las queries a pelo.

1 respuesta
ignasi_
ignasi_ #7 24 Nov

#6 A la librería, es lento en el sentido que no sabe hacer JOINS (https://github.com/prisma/prisma/discussions/12715) , y te lanza un cojón de queries sin que tu tengas mucho control. Pero como digo no creo que sea un problema en proyectos pequeños medianos.

Tampoco tienes control de triggers, ni tipos de sql más avanzados, cosas que postgres soporta, así que tienes que ir tirando de parches.

En mi caso por ejemplo, quería una búsqueda usando tsvectors y un trigger que saltase despues de un insert /updatey para que funcionase tuve que hacer una guarrada (imo).
Para postgis, que supongo que lo necesitaras para el ej: Pica d'estats a 23km tampoco funciona de una, pero no es mucho lio, le añades extensions = [postgis] y tienes que tirar de raw sql.

A mi personalmente me decepciono un poco.

1 1 respuesta
isvidal
isvidal #8 24 Nov

#7 Estoy intentando entender como cojones funciona trpc, todos los ejemplos son usando Next.js y no uso next.js

Voy a tener en el monorepo

/api (express con trpc)
/mobile (react native con react-query o swr que wrapee trpc)

Algo para guiarme? La documentacion me parece basura.

Esto es lo mejor que he encontrado: https://github.com/trpc/trpc/tree/main/examples/express-server, pero sigue sin quedarme muy claro como lo uso luego en la otra app. Importando que? De donde?

Soltrac
Soltrac #9 24 Nov MV Wizard

#4 nah no me hagas caso si te estaba trolleando

isvidal
isvidal #10 24 Nov

He encontrado esto como mas up-to-date ejemplo de trpc + expo en un monorepo:

https://github.com/t3-oss/create-t3-turbo

Espero que los gains de usarlo sean top, porque un poco fumada.

Don_Correcto
Don_Correcto #11 24 Nov Paper hands

Suerte, a ver como va evolucionando esto :grin:

isvidal
isvidal #12 24 Nov

Bueno bueno buenooo ya tenemos trpc tirandome cositas y entendiendo, el . me ha vuelto un poco loco la verdad:

Ya luego miro de conectarlo a la app con react native

r2d2rigo
r2d2rigo #13 26 Nov Inocente

Muy bien pero este proyecto va a ser compilable dentro de un año cuando se ponga otra stack de JS de moda? 🌚

sasher
sasher #14 26 Nov

Mucha suerte!

Te voy siguiendo por curiosidad por lo del tRPC. Cuando vayas más avanzado, podrías ir comentando en el hilo las cosas buenas/malas que le vas viendo.

Sobre #4, para prototipos y demás yo siempre tiro de un EC2 t2.micro (9€/mes después del tier gratuito de 1 año) + elastic IP en AWS con un template que auto instala Docker. Luego para despliegues, desde Bitbucket pipelines con SSH y rsync:

$ rsync --rsync-path="sudo rsync" -r -v -e ssh . $SSH_SERVER_USER@$SSH_SERVER_IP:/home/$SSH_SERVER_USER/app
$ ssh $SSH_SERVER_USER@$SSH_SERVER_IP "cd ~/app && docker compose -f docker-compose.yml up --build -d"

El docker compose me levanta, como mínimo, un nginx y la propia app.

Y pa'lante.

1 1 respuesta
isvidal
isvidal #15 28 Nov

Me estoy peleando con tRPC + Expo

Buen combo de psiquiatrico.

Mi primera impreson sobre tRPC #14 es que es un castillo de naipes, como tengas la version de algo que no toca, TypeScript se pone muy rojito, y no es el tipo de error de "prop deberia ser un string y no undefined" sino el tipo de error que requiere de un doctorado en typescript para entender que mierdas esta fallando en alguno de los pasos.

1 1 respuesta
JuAn4k4
JuAn4k4 #16 29 Nov

#15 Yo en ese punto ya lo habría tirado a la basura. Jajajaja

1 respuesta
isvidal
isvidal #17 29 Nov

#16 Solucione lo de expo porque resulta que en un monorepo con PNPM las librerias no se linkean como el espera y tienes que meterle node-linker=hoisted en el .npmrc. Lo peor es que clone de un ejemplo de trpc asi que deberia funcionar, viva el ecosistema.

Ahora me falta el siguiente pain point que es ver como hago el build del servidor + trpc y lo meto en algun vps.

Tengo

repo/
         apps/
                   api/
         packages/
                   api/

El apps/api es el servidor de express, y el packages/api es toda la configuracion de trpc.

El naming pues es shitty quizas

Mi duda es que claro, el packages/api es interno del repo, aun usado en apps/api, entonces cuando hago build como lo hago para incluir las dependencias internas del monorepo? NO se van a poder instalar con un pnpm install, y estas cosas de dev ops ya se me escapan.

Demasiado bien acostumbrado a vercel, push + deploy con un botton.

Alguna sugerencia los mas expertos?

2 respuestas
JuAn4k4
JuAn4k4 #18 29 Nov

#17 Se publica a un repositorio privado, artifactory, nexus, o incluso a un docker image.

isvidal
isvidal #19 29 Nov

Me he ido un ratito a hacer scrapping, y ya tengo el listado de urls de cimas, de estas sacare la info inicial para el listado de cimas ahora con otro scrapper:

json

He tenido que hacer un poco mas de magia de lo esperado porque la lista y la paginacion eran puro cliente con ajax, y al final he tenido que usar selenium:

Aqui el codigo en python, no me mateis mucho

python

Luego seguramente me pasare unos dias haciendo la app dummy y usando un json con data real como "placeholder" asi avanzo por otros lados donde voy mas fluido que haciendo devops de servidores y apis.

1 respuesta
sasher
sasher #20 29 Nov

#17 Me he tenido que pelear justo con eso en un monorepo con pnpm y turborepo.

En apps/api/package.json tendrás referenciada tu dependencia de packages/ tal que:

"dependencies": {
    "<dep>": "workspace:*",
    ...
}

En el packages/api/package.json tendrás otro script de npm para construir la dependencia de forma aislada (p.ej., "build": "tsc --build").

La idea entonces es que en el turbo.json del root tengas una pipeline que ejecute ese build automáticamente al compilar alguna de tus apps/ principales, por ejemplo:

...
"build": {
    "dependsOn": ["^build"],
    "outputs": ["dist/**"]
},
...

De esta forma al hacer un turbo run build debería de compilarte tus apps principales y sus dependencias (tus packages/*), y además aprovechar la caché que te da turborepo. También te digo, que deberías obtener el mismo resultado saltándote la parte de turbo, si directamente con pnpm haces un pnpm run -r build.

Por otra parte, sobre lo que comentas del hoisted de pnpm, quizá lo hubieras podido resolver con un "pnpm deploy" para que te empaquete tu app y las dependencias. De esa forma ya podrías ejecutarlo con node sin necesitar pnpm.

1
Leos
Leos #21 30 Nov

#19 Estoy seguro que te puedes ahorrar selenium, pero si te mola tenerlo con selenium, adelante

1 respuesta
isvidal
isvidal #22 30 Nov

#21 Y como lo harias? Sin headless y solo con requests no me funcionaba pues el contenido cargaba x js y la paginacion igual.

1 respuesta
Leos
Leos #23 30 Nov

#22 Pues viendo que requests estaban haciendo esas llamadas ajax e imitandolas

1 respuesta
isvidal
isvidal #24 30 Nov

#23 Soy retrasado, se nota que no me dedico a esto, me falta mucha calle xd

tunnel vision 100%

2 respuestas
JuAn4k4
JuAn4k4 #25 30 Nov

#24 Sabes que tienes hasta un "copiar como Node.js fetch" en el dev-tools de chrome verdad ?

1 respuesta
isvidal
isvidal #26 30 Nov

#25 Es que ni mire los networks requests xd Partiendo de ahi ya.

1 respuesta
Leos
Leos #27 30 Nov

#24 Ya, suele pasar, yo porque me dedico al scrapping si no hubiera tirado por un playwright, puppeteer o selenium igual

1 mes después
Zireael
Zireael #28 15 Ene

#26 Qué pasó?

1 respuesta
isvidal
isvidal #29 16 Ene

#28 La tengo en los objetivos del año, asi que se va a hacer si o si. Me desinflo un poco el tema del tRPC + Node y pense en cambiar el stack a mi clasico backend en php.

Espero en febrero despejar calendario y poder empezar a meterle horas sueltas.

1
9 días después
isvidal
isvidal #30 25 Ene

Pues ya estaria, "no necesito backend", expo ya ofrece su propia /api routes a lo next.js.

https://blog.expo.dev/expo-router-v3-4f12ffee409b

Era la señal que necesitaba. Ahora a ver como lo conecto a trpc.

Usuarios habituales

  • balmunG_
  • isvidal
  • Leos
  • JuAn4k4
  • sasher
  • Soltrac
  • ignasi_

Tags