Incidencias

Google Maps API

• Posar un marcador en el mapa

  • Quan capturava l'esdeveniment del clic a la pantalla, l'hora de pintar el marcador em va costar una mica entendre. Perquè l'API de google maps no és molt flexible i has de seguir les seves indicacions correctament. Primerament un marcador es troba forma per diferents atributs dins seu, un d'ells és la seva posició que ocuparà en el mapa. Aquesta posició ha de ser igual a latitud i longitud, però per a google maps has de declarar una variable nova que és lanLng, doncs la latitud i longitud s'ajunten, i així poder definir el punt en el mapa.

• Capturar l'esdeveniment del clic en el marcador

  • El problema que vaig tenir amb això, va ser que quan jo feia un marcador nou o m'emportava tots els punts que hi tenia a la base de dades i anava creant marcadors en fer-li clic en el mapa al marcador no feia res. Vaig investigar i vaig veure un mètode addListener. Que aquest és com el que utilitzava per veure si es feia clic en el mapa a qualsevol lloc. Però es podia utilitzar també amb el marcador, únicament hauria de referenciar-lo en el mètode, però ho
    vaig referenciar i el marcador no feia res. Després d'estar estona i estona investigant vaig veure que aquest mètode s'ha de posar just després del marcador. És a dir, una vegada poses el codi del marcador que anaves a crear justament a sota li has d'assignar aquest esdeveniment. Si tu l'assignaves l'esdeveniment al marcador quan el marcador ja s'havia creat, això feia que en donar-li clic no fes res.

• Posar un botó la ventana que surt en el marcador

  • Aquest ha sigut un problema que m'ha portat molt mal de cap. Ja que no era capaç de posar un botó en aquesta petita finestra que surt amb la informació de la plaça. Tot això venia perquè aquesta finestra és de Google Maps API i per ferla utilitzar amb els meus components de Ionic, em va resultar molt dificultós. Finalment ho vaig aconseguir amb el DOM, havia d'anar agafant tots els components que jo volia del DOM, fora del mètode de Google API que omplia el contingut de la finestra del marcador i vaig d'anar omplint tots els components per després ficar-ho tot de cop fins de la finestra. Si ho feia directament i anava concatenant etiquetes amb el +, el botó no funcionava, encara que la informació sortia correctament. Finalment vaig poder donar-li un esdeveniment aquest botó per poder ocupar la plaça.

Android

• SplashScreen

  • Va ser una mica dificultós trobar la manera de configurar l'arxiu config.xml que és el que Ionic compila per crear totes les opcions i definicions per a Android. L'arxiu config.xml és com si fos el manifest d'Android studio. Però una mica dificultós d'entendre, ja que per internet cadascun feia les coses de manera diferent. La documentació de Ionic no em va servir de molt i finalment vaig recórrer a la documentació de Cordova, ja que el framework de Ionic està basat en ell. I aquí vaig trobar tot el que em va fer falta per poder modificar aquest arxiu correctament.

• CSS a l'hora de compilar per a Android

  • Quan vaig compilar per a Android, el CSS que jo veia al navegador no era el mateix que vaig veure al meu dispositiu Android. Vaig haver d'anar modificant i veure diferents configuracions que té creat Ionic per defecte per veure com solucionar aquest problema.

• Teclat del dispositiu Android

  • Vaig tindre un problema amb el teclat del dispositiu. Jo la meva aplicació la compilava per a dos dispositius, un amb una pantalla petita i l'altre amb una pantalla de 6 polzades. El que passava és que a la pantalla petita a l'hora d'escriure l'usuari o la contrasenya per fer el login, el teclat tapava l'input perquè no tenia espai i la meva pàgina no era capaç de capturar l'esdeveniment del teclat quan s'activava. Per solucionar això vaig investigar de com capturar aquest esdeveniment del teclat i amb DOM de JavaScript, ho vaig moure o ho vaig fer desaparèixer alguna part de la meva pantalla. Així d'aquesta manera els inputs pujaven cap a dalt i podries veure el que escrivies

Mongo

• Data dels documents

  • A l'hora de passar la data a la base de dades de Mongo, Mongo em posava la data 2 hores abans. És a dir, si eren les 22:00 ell m'ho posava a les 20:00. Per solucionar això, vaig veure que Mongo porta per defecte el timezone UTC i ho havia de posar a l'hora local del dispositiu.

• Actualitzar dades

  • Per actualitzar dades, com per exemple a la pantalla perfil. Volia que hi hagués llibertat per modificar únicament l'usuari i correu o si no modificar-ho tot, com l'usuari, correu i contrasenya. Però clar si a Mongo li passo una variable buida, ell agafa i a la base de dades ho posa nul·la. Per solucionar això vaig posar unes condicions, aquestes condicions feien que depenen dels camps omplerts a la pantalla perfils, passes a Mongo un JSON o un altre. Així d'aquesta manera ell rep únicament els camps que s'han de modificar i no rep cap camp buit.

Ionic

• Com fer les diferents peticiones a la base de dades

  • Aquí els problemes que vaig tenir és únicament l'estructura per fer la petició a l'API.

• Components de Ionic

  • Alguns components em va suposar una certa dificultat, perquè la documentació de Ionic a vegades no hi era molt clara.

• Variables CSS de Ionic

  • Ionic per defecte et porta un arxiu amb variables com d'entorn però de CSS i ja té un CSS creat per a les diferents plataformes i fins a mides per píxels. Va ser una mica complicat entendre com funcionava aquest arxiu i veure realment a què part del codi feia referència aquest CSS