Arxiu de l'autor: joanillo

Simular el posicionament GPS (problemes en el desplegament al núvol, OVH)

Tenim una REST API amb MongoDB. Tenim un front-end per generar posicions i gravar-les a la bd. I tenim un altre front-end per visualitzar les posicions i veure com van evolucionant.

La part de generar les posicions i enviar-les al servidor de moment no és una aplicació mòbil, sinó que és una pàgina web. Openlayers té la possibilitat de fer geolocation, i per tant tenim una precisió molt bona (uns 15 m). No cal per tant una aplicació mòbil. Ara bé, s’ha de fer amb https.

(ref): https://stackoverflow.com/questions/39366758/geolocation-without-ssl-connection:

Warning by Chrome : getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

Fins aquí cap problema quan es desenvolupa localment (localhost). Però el problema està quan es desplega al servidor, en aquest cas un VPS a OVH. Per tant, la part de generar les posicions GPS ha d’anar al servidor OVH on hi ha instal·lat el certificat SSL. Ara bé, no es poden generar certificats per al domini ovh.net (es denega perquè s’han passat de la quota, lògic). Així doncs, primer m’he hagut de registrar a noip.com i ara tinc el domini jquintana.ddns.net.

Posar el MongoDB al servidor no ha tingut cap problema. El problema està en la API REST, feta amb Express. La API REST s’ha hagut de fer segura (https), doncs no podia ser que cridéssim a la API des de https, i que aquest servidor respongués amb http. Aquest ha sigut el problema principal.

Finalment la part del front-end de visualitzar les posicions no ha tingut especial problema. Les crides a la API http://localhost:3000 s’han de canviar a les crides a la API https://jquintana.ddns.net:8080.

En resum, tu pots tenir una aplicació funcionant amb localhost sense especials problemes, i quan la vols desplegar al núvol comencen els problemes de CORS, seguretat, protocols que no t’havies plantejat.

Ara l’últim pas és tenir un codi que funcioni igual de bé a localhost i al núvol, que això en principi no serà problema. I la reflexió és que quan desenvolupes un projecte, no s’ha d’esperar al final de tot a desplegar-lo a la infraestructura del núvol. S’ha de fer ja en les primeres fases: és el desplegament continu. Encara que l’aplicació no tingui moltes funcionalitats, ja s’ha pogut afrontar tots els problemes de seguretat i infraestructura al provar de desplegar-ho en l’entorn real en les primeres fases. I així ens estalviem problemes al final del projecte.

Programant el tracking de rutes

Exemple canònic OpenlayersAhir al vespre estava programant, i estava gravant posicions simulades des de casa. Com a casa no em moc, vaig simular un cert moviment. Les dades es graven en una base de dades MongoDB.

Avui estava continuant una mica, des de l’institut, i voilà, hi ha un salt de casa a l’institut. Lògic però divertit.

Openlayers: Point, LineString, MultiLineString, Icon. Exemple canònic

Exemple canònic OpenlayersAnem a mostrar un exemple mínim d’Openlauers que aclareixi els conceptes de dibuixar un punt, una línia, una multilínia i una icona. I com aplicar estils a aquests elements.

Definim primer aquests elements (punts, línies, multilínies, icones) a partir de les dades d’exemple (coordenades). Aleshores definim features a partir d’aquests elements, que afegim a un array de features. Cada feature pot tenir el seu estil.

Definim després el vectorSource a partir de l’array de features. Després definim el VectorLayer a partir del vectorSource. I finalment afegim al mapa els layers que volem pintar.

Aquest és el codi inicial i previ per a un petit projecte que vull fer, que tracta d’una aplicació mòbil per enviar les coordenades de posició a una RestAPI on hi ha una base de dades (MongoDB), i amb una aplicació web (front-end, que és la part que aquí es comença a explicar) poder visualitzar el recorregut del ciclista (la idea del projecte és poder fer el tracking d’un ciclista en una primera etapa; i en una etapa posterior poder fer el tracking de tots els ciclistes que participen en una cursa o sortida).

El codi final:

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Icon, Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {LineString, MultiLineString, Point} from 'ol/geom';
import {getVectorContext} from 'ol/render';
import {fromLonLat} from 'ol/proj';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import OSM from 'ol/source/OSM';

//dades
var json_points = [
{'lon':1.4234,'lat':41.2344,'name':'punt 0'},
{'lon':1.4235,'lat':41.2345,'name':'punt 1'},
{'lon':1.4235,'lat':41.2346,'name':'punt 2'},
{'lon':1.4236,'lat':41.2346,'name':'punt 3'},
{'lon':1.4236,'lat':41.2347,'name':'punt 4'},
{'lon':1.4238,'lat':41.2349,'name':'punt 4'},
{'lon':1.4239,'lat':41.2350,'name':'punt 4'}
];

// estils
var styles = {
'Point': new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(100,100,100,.8)',
}),
radius: 3,
stroke: new Stroke({
color: '#000000',
width: 2,
}),
}),
}),
'LineString': new Style({
stroke: new Stroke({
color: '#f00',
width: 3,
}),
}),
'MultiLineString': new Style({
stroke: new Stroke({
color: '#000000',
width: .8,
}),
}),
'icona': new Style({
image: new Icon({
anchor: [0.5,20],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'img/circle_red_8.png'
})
})
};

// points
var features_points = new Array();

var feature_point0 = new Feature({
'geometry': new Point(fromLonLat([json_points[0].lon,json_points[0].lat])),
'name': json_points[0].name,
});

var feature_point1 = new Feature({
'geometry': new Point(fromLonLat([json_points[1].lon,json_points[1].lat])),
'name': json_points[0].name,
});

var feature_point2 = new Feature({
'geometry': new Point(fromLonLat([json_points[2].lon,json_points[2].lat])),
'name': json_points[0].name,
});

var feature_point3 = new Feature({
'geometry': new Point(fromLonLat([json_points[3].lon,json_points[3].lat])),
'name': json_points[0].name,
});

var feature_point4 = new Feature({
'geometry': new Point(fromLonLat([json_points[4].lon,json_points[4].lat])),
'name': json_points[0].name,
});

features_points.push(feature_point0)
features_points.push(feature_point1)
features_points.push(feature_point2)
features_points.push(feature_point3)
features_points.push(feature_point4)

// línies
//Create a feature and add geometry as a thing
var track1 = new MultiLineString([
[[json_points[0].lon,json_points[0].lat],[json_points[1].lon,json_points[1].lat]],
[[json_points[1].lon,json_points[1].lat],[json_points[2].lon,json_points[2].lat]],
[[json_points[2].lon,json_points[2].lat],[json_points[3].lon,json_points[3].lat]],
[[json_points[3].lon,json_points[3].lat],[json_points[4].lon,json_points[4].lat]]
]).transform('EPSG:4326','EPSG:3857');

var feature_multilinestring = new Feature({
geometry: track1,
name: 'nom track 1'
});

var line1 = new LineString([
[json_points[5].lon,json_points[5].lat],[json_points[6].lon,json_points[6].lat]
]).transform('EPSG:4326','EPSG:3857');

var feature_linestring = new Feature({
geometry: line1,
name: 'nom línia 1'
});

var features_strings = new Array();

features_strings.push(feature_multilinestring)
features_strings.push(feature_linestring)

//icones
var features_icones = new Array();

let feature_icona1 = new Feature({
geometry: new Point(fromLonLat([json_points[5].lon,json_points[5].lat])),
name: 'Inici',
});

let feature_icona2 = new Feature({
geometry: new Point(fromLonLat([json_points[6].lon,json_points[6].lat])),
name: 'Final',
});

feature_icona1.setStyle(styles.icona); //no cal si defineixo el estil en el layer.
feature_icona2.setStyle(styles.icona); //però definiré l'estil en la icona si cada icona ha de tenir un estil diferent

features_icones.push(feature_icona1);
features_icones.push(feature_icona2);

// vectorSources
var vectorSourcePoints = new VectorSource({
features: features_points,
wrapX: false,
});

var vectorSourceStrings = new VectorSource({
features: features_strings,
wrapX: false,
});

var vectorSourceIcones = new VectorSource({
features: features_icones,
wrapX: false,
});

// layers
var layerPoints = new VectorLayer({
source: vectorSourcePoints,
style: styles.Point,
});

var layerStrings = new VectorLayer({
source: vectorSourceStrings,
style: styles.MultiLineString,
});

var layerIcones = new VectorLayer({
source: vectorSourceIcones,
style: styles.icona,
});

var map = new Map({
layers: [
new TileLayer({
source: new OSM({
layer: 'OSM'
})
}),
layerPoints,
layerStrings,
layerIcones
],
target: 'map',
view: new View({
center: fromLonLat([1.4234, 41.2344]),
zoom: 18
})
});

Curs MOOC ABP: Implementació del projecte a l’Aula

En aquesta part final del curs ens demanen que fem un Elevator pitch, que ve a ser un video promocional i motivador, per tal d’explicar als alumnes què farem en aquest projecte.
Comencem amb el títol del projecte, per tal de què quedi clar, i una pregunta motivadora que atraigui l’atenció dels alumnes. En el nostre cas, la pregunta seria: ”
Saps que per al 2025 s’obligarà als municipis de més de 20.000 habitants tenir Zones de Baixes Emissions. Saps quins són aquests municipis. Saps si el teu municipi haurà de complir aquesta ordenança?” Doncs si en el projecte volem aprendre a programar un mapa interactiu, ho hem de fer dins d’un context, en aquest cas saber quins són els municipis que hauran de complir la normativa de ZBE.

Hem d’ubicar el projecte dins de la programació del mòdul (cicle de DAW, mòdul M06: Javascript).

Hem de parlar de les fases. En el curs hem après que hem de fer 6 fases:

  • disseny i presentació del projecte
  • primeres activitats
  • execució del projecte
  • conclusions de l’alumnat
  • conclusions del docent
  • difusió

Finalment hem de parlar de com farem la difusió del projecte, i finalment com avaluarem aquest projecte.

I amb això ja està tot. Aquest curs s’acaba i crec que ja no ens faran fer cap més tasca. Ara només toca aplicar-ho a l’aula!

Disseny del meu projecte ABP

Disseny del projecte ABP
Títol del projecte: Mapa interactiu dels municipis on s’ha d’aplicar el decret de Zona de Baixes Emissions (ZBE): municipis de més de 20.000 habitants

Els alumnes de 2n de DAW, cap a final de curs, al mòdul de M06 (Javascript) i en col·laboració amb els mòduls de M05 i M08, hauran de fer un mapa interactiu on es visualitzin els mapes de més de 20000, 40000, 100000 i 200000 habitants.

S’utilitzarà mòduls de Javascript i la llibreria Openlayers per a fer el mapa, amb diferents renderitzacions del mapa (el mapa base sobre el que es dibuixaran les icones de les ciutats).

Les dades s’extreuran del IDESCAT (Institut d’Estadística de Catalunya), dades obertes.

Exemple de la proposta
En la imatge es pot veure una possible solució del mapa. Hi ha diferents checkbox per activar/desactivar els grups de ciutats, que són icones sobre el mapa amb diferents colors.

Una altra funcionalitat que es demana implementar és que hi hagi tres tamanys d’icones, i que s’adapti el tamany al nivell de zoom que tenim en el mapa.

El resultat s’haurà de desplegar al VPS que l’institut té en el núvol. Els alumnes també enllaçaran el resultat al seu portfoli.

Aquest projecte ha de ser un entrenament per al mòdul de Projecte (M12) que faran a final de curs, i es demana que utilitzin metodologies àgils, Trello i Github, entre d’altres.

Referències:

Enunciat de Projecte ABP.

La meva proposta de projecte ABP:

Introducció

Zona de Baixes EmissionsZBE: Zones de Baixes Emissions per millorar la qualitat de l’aire.

Segons la llei estatal de canvi climàtic, el 2023 els municipis de més de 50000 habitants hauran de complir els requisits de baixes emissions.

Ara bé, en la Cimera de la Qualitat de l’Aire que s’ha celebrat al Palau de Pedralbes el 18 de març de 2022 (govern de la Generalitat + ajuntaments + diputacions + Port i Aeroport de Barcelona) s’obligarà als municipis de 20.000 habitants de complir també els requisits per al 2025.

Enunciat

Fer un mapa interactiu de Catalunya on es visualitzin els municipis de més de 20.000, 40.000, 100.000 i 200.000 habitants. Utilitza diferents colors. De forma dinàmica i interactiva has de poder filtrar els diferents grups de municipis.

Referències

Checklist per tal de què un enunciat ABP sigui correcte:

  • Que siguin reals
  • Que aportin aprenentatge significatiu
  • Que estiguin relacionats amb els resultats d’aprenentatge del cicle
  • Que aportin competències que no estiguin en cap RA del cicle i que les empreses demanen
  • Que siguin contextualitzables
  • Que permetin creixement personalitzat
  • Que permeti resultats avaluables
  • Que tingui més d’una solució
  • Que exigeixi buscar informació, interpretar-la i dur-la a la pràctica
  • Que sigui assumible quant al calendari, recursos, tecnologies, etc.
  • Que pugui ser reutilitzable, que no sigui necessari canviar de projecte cada curs
  • Que compleixi amb la limitació de la despesa econòmica que tenim com a pressupost pels projectes.

Principis metodològics a l’aula

Joan QuintanaEl primer dia de classe, per introduir el projecte ABP que farem, expliquem els principis metodològics sobre els que els alumnes construiran el seu aprenentatge:

  • L’alumne és el centre de l’aprenentatge
  • L’aprenentatge té naturalesa social. Treballem de forma grupal i interaccionem els uns amb els altres.
  • Es té en compte les emocions. Volem que el procés d’aprenentatge commogui l’alumne
  • Es tindran en compte les diferències individuals: no tothom és igual, tothom té un ritme d’aprenentatge diferent.
  • L’esforç és un punt clau. Volem alumnes motivats per tal de què els alumnes treguin el màxim rendiment de les seves possibilitats.
  • Avaluació contínua. Tant important és la meta a la que volem arribar, com tot el procés que farem durant el projecte.
  • Construim connexions horitzontals. Connectem el nostre projecte amb la resta de mòduls i UFs, amb el món de l’empresa, amb les competències transversals.

MOOC ABP. Diari d’aprenentatge

Joan QuintanaAquest és el meu bloc que utilitzo des del 2009, i en la categoria MOOC-ABP aniré construint el diari d’aprenentatge d’aquest curs online de metodologies actives. De moment aquí va la meva presentació, i tot el que estigui relacionat amb aquest curs anirà a la categoria de MOOC-ABP.

Treballo al INS Jaume Balmes de Barcelona com a professor dels cicles de Desenvolupament d’Aplicacions Web (DAW) i Desenvolupament d’Aplicacions Multiplataforma (DAM), i els meus àmbits preferits són desenvolupament Full Stack i bases de dades.

Referències:

BDQuest: Quests per al llenguatge SQL

Aquest any faig M02 a 1r de DAM (Bases de Dades). Sempre he treballat amb bases de dades, amb els alumnes, però aquesta assignatura feia molt temps que no la feia.

Em vaig animar a l’estiu de fer una eina web per tal de què els alumnes poguessin testejar les seves sentències SQL de forma automàtica, i que també fos un recurs per avaluar i auto-avaluar. Aquesta aplicació és BDQuest, el nom no és molt original, però a aquestes altures ja no m’atraveixo a canviar-lo.

Vam començar el curs i a la UF1 no es fa res de SQL. Però a la UF2, que és la troncal del curs i que ja estem acabant, els alumnes han estat utilitzant l’eina, per tal de fer selects bàsiques, inserts, updates, deletes, create, alter i drop tables, create i drop views, selects complexes, etc.

Els alumnes han fet de conillets d’índies i la versió 10, que és l’actual, l’he anat actualitzant al llarg del trimestre. I funciona molt bé!

I ara que estem acabant la UF2 i falta res per començar la UF3, he adaptat l’aplicatiu per poder fer create i drop users, grant privilegis, etc; i també create procedures, etc. I els triggers ja vindran. És a dir, que l’objectiu inicial de què no només servís per fer selects s’haurà acomplert amb escreix.

Fins ara no havia escrit res ni aquí ni a la wiki. Ja és hora de documentar una mica el projecte i donar-lo a conèixer. A veure si algú en pot treure profit.

A l’aplicació encara li falten moltes coses, però allò important és que aquest any ha sigut funcional. És una típica aplicació web amb molt de Javascript i PHP-MySQL, amb un disseny de moment pelat. L’aplicactiu hauria de créixer per aquí: millorar el disseny; i utilitzar algun framework en el cantó del client i del servidor. I també alguna refactorització del codi i millora d’unes quantes coses.