Consum API

Per començar l’assignatura s’explica l’entorn on treballarem durant el curs.

• Per aconseguir entendre l’entorn LAN i WAN farem uns exercicis amb la consola de comandes o shell.
• Usarem la shell com a interfície de comunicació amb el Sistema Operatiu. Farem uns exercicis i problemes d’entrega obligatòria.

1. Instrucció ping.

Quan un es decideix a estudiar l’assignatura de TIC2 ha de saber que treballa en un entorn on hi participen molts de components i cada un d’ells és important per aprendre els conceptes bàsics de la informàtica.

Xarxa local:

• Treballam sobre el nostre ordinador d’aula.
• Està interconnectat amb els altres. Formant el que s’anomena una xarxa LAN (Local Area Network) cada ordinador està identificat amb una ip.
• Per estudiar usam el shell amb l’instrucció ping i ifconfig (a windows es ipconfig)

ping 192.168.0.20

Exercicis: Sobre la shell del sistema operatiu farem vàries pràctiques amb l’objectiu de conèixer l’entorn on treballem.

1. Instrucció ping.
– Feim ping a un host de la nostra xarxa (LAN).
– Feim un ping a un host de la nostra xarxa d’aula que té desconnectat el cable RJ45. No toca funcionar 😉

3. Exercici per entregar: Feis un estudi de la xarxa de ca vostra. Anotau al quadern les ip’s de host que heu trobat. Sobre aquestes ips de la vostra xarxa provau la intrucció ping seguint Cómo usar el comando Ping de Linux.

2. INTERFÍCIE DE COMANDES

L’interfície de comandes és la part del sistema operatiu que permet una comunicació de instruccions amb instruccions textuals.

Una instrucció textual pot ser més eficient i ràpida que vint clicks de ratolí. Llegiu el següent text extret de linuxComand.org per entendre el que vull dir:

“Per què preocupar-se?

Per què necessiteu aprendre la línia d’ordres de totes maneres? Bé, deixa’m explicar-vos una història.

Fa uns anys teníem un problema on treballava. Hi havia una unitat compartida en un dels nostres servidors de fitxers que es continuava omplint. El servidor es va continuar omplint i va impedir que la gent treballés.

Un dels nostres enginyers de programari va passar una bona part d’un dia escrivint un programa C++ que anava a buscar tots els directoris de l’usuari i que afegiria l’espai que utilitzaven i faria un llistat dels resultats. Com que em vaig veure obligat a utilitzar el sistema operatiu heretat mentre estava treballant, vaig instal·lar-hi un entorn de línia d’ordres similar al Linux. Quan vaig saber el problema, em vaig adonar que podia fer tot el treball que havia realitzat aquest enginyer amb aquesta sola línia:

du -s * | sort -nr > $HOME/user_space_report.txt

Les interfícies gràfiques d’usuari (GUI) són útils per a moltes tasques, però no són bones per a totes les tasques. Fa temps que sent com que la majoria d’ordinadors actuals no alimenten electricitat. En canvi, semblen alimentats pel moviment de “bombament” del ratolí.

Se suposa que els ordinadors ens alliberaren del treball manual, però, quantes vegades heu realitzat alguna tasca, creieu que l’ordinador hauria de ser capaç de fer, però heu acabat fent la vostra tasca treballant el ratolí? Assenyalar i fer clic, apuntar i fer clic.”

L’objectiu d’aquesta unitat és donar a conèixer alguns conceptes de Seguretat Informàtica. Ho farem usant enquestes, entrevistes, presentacions web i difusió per xarxes socials. Per fer la tasca ens dividim en grups col·laboratius on cada un d’ells té un rol diferent.

1. ESTUDI DE CASOS

Per començar el procés. Ens dividim en quatre grups i feim els jocs de rol d’incibe. Cada grup aporta una fixa tècnica de l’estudi fet.

• Nom de l’atac
  • Breu descripció.
  • Que no fer.
  • Prevencions.
  • Casos reals.
  • Links informació.

2. ENQUESTA

3. ENTREVISTES I DOCUMENTACIÓ

4. DIFUSSIÓ XARXES SOCIALS

5. PRESENTACIÓ WEB

En aquesta unitat treballam sobre el nostre ordinador d’aula que està interconnectat amb els altres. Entre ells formen el que s’anomena una xarxa LAN (Local Area Network) cada ordinador està identificat amb una IP . Per estudiar usam la interficie de comandes usant les instruccions ping i ifconfig.

Farem uns exercicis guiats. Desprès s’han de fer uns exercicis d’entrega mitjançant captures de pantalla al vostre portafoli.

1. La interfície de comandes:

• És el sistema de comunicació més directe amb el Sistema Operatiu.
• Pot executar les instruccions de forma més ràpida que una seqüència de clicks.
• És una interfície que s’usa en altres tipus de dispositius.
• També s’anomena terminal, shell, bash, consola de comandes, …

Podeu llegir link de linuxComand.org per entendre que és útil saber utilitzar el terminal alhora d’executar segons quines tasques. Bàsicament diu que amb una instrucció al terminal ens podem estalviar molts de clicks i fer tasques d’una manera eficient.

Bàsicament una instrucció té el format de:

nominstrucció opcions paràmetres

2. Instrucció ping.

Quan un es decideix a estudiar l’assignatura de TIC2 ha de saber que treballa en un entorn on hi participen molts de components i cada un d’ells és important per aprendre els conceptes bàsics de la informàtica.

Ping és una instrucció bàsica que ens dona informació de l’entorn i és com el desengramponador dels telemàtics.

És semblant a la comunicació de les balenes o els submarins. Però aquesta instrucció es duu a terme entre dos ordinadors.

La forma bàsica de la instrucció és ping direccióDestí, per exemple ping 192.168.0.20, on 192.168.0.20 és la IP destí. També es pot posar la direcció com un nom de domini, per exemple ping aula2.gimnesia.net.

Per entendre la instrucció mira el video i entendrà el concepte:

La forma bàsica de ping és:

ping 192.168.0.20

-En aquesta unitat s’han de fer els següents exercicis guiats:

Exercicis: Sobre la shell del sistema operatiu farem vàries pràctiques amb l’objectiu de conèixer l’entorn on treballem.

1. Instrucció ping.
– Feim ping a un host de la nostra xarxa (LAN).
– Feim un ping a un host de la nostra xarxa d’aula que té desconnectat el cable RJ45. No toca funcionar 😉

3. Exercici per entregar: Feis un estudi de la xarxa de ca vostra. Anotau al quadern les ip’s de host que heu trobat. Sobre aquestes ips de la vostra xarxa provau la intrucció ping seguint Cómo usar el comando Ping de Linux.

3. Com saber la IP d’un dispositiu.

-Amb el terminal linux: amb l’instrucció ifconfig. A MsDos és ipconfig.

4. Instrucció Traceroute o tracert

5. Format de la direcció d’un host. IP + màscara.

Una direcció de un host té dues parts l’identificador IP i la màscara. Entre les dues parts defineixen el grup (subxarxa) i l’identificador de un host. 

Per exemple, si un host té la ip: 192.168.12.1 amb màscara 255.255.255.0, el que sabem del host és que pertany a la subxarxa 192.168.12.0 i és el host 192.168.12.1 .

EXERCICIS IPV4-IPV5

PING I TRACEROUTE

Les intruccions ping i traceroute ens permeten comprovar el funcionament de la xarxa.

ping

amb l’instrucció ping podem saber

pere@pere-Lenovo-U31-70:~$ ping aula2.gimnesia.net
PING hostingsrv63.dondominio.com (37.152.88.73) 56(84) bytes of data.
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=1 ttl=57 time=20.3 ms
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=2 ttl=57 time=20.8 ms
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=3 ttl=57 time=27.1 ms
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=4 ttl=57 time=21.9 ms
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=5 ttl=57 time=20.7 ms
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=6 ttl=57 time=23.8 ms
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=7 ttl=57 time=21.5 ms
64 bytes from hostingsrv63.dondominio.com (37.152.88.73): icmp_seq=8 ttl=57 time=21.8 ms
^C
--- hostingsrv63.dondominio.com ping statistics ---
8 packets transmitted, 8 received, 0% packet loss, time 7010ms
rtt min/avg/max/mdev = 20.342/22.276/27.110/2.097 ms

traceroute

pere@pere-Lenovo-U31-70:~$ traceroute aula.gimnesia.net
traceroute to aula.gimnesia.net (37.152.88.73), 30 hops max, 60 byte packets
 1  _gateway (192.168.0.1)  3.710 ms  3.673 ms  3.639 ms
 2  10.24.106.1 (10.24.106.1)  18.649 ms  18.632 ms  18.605 ms
 3  * * *
 4  172.29.208.97 (172.29.208.97)  12.585 ms  12.614 ms  12.652 ms
 5  172.29.208.98 (172.29.208.98)  12.613 ms  12.621 ms  12.639 ms
 6  37.152.93.9 (37.152.93.9)  21.444 ms  24.839 ms  24.859 ms
 7  37.152.93.55 (37.152.93.55)  24.829 ms  21.934 ms  21.880 ms
 8  hostingsrv63.dondominio.com (37.152.88.73)  22.313 ms  22.302 ms  22.236 ms
pere@pere-Lenovo-U31-70:~$ 

SERVEIS

DNS

API REST(FUL)

EXERCICI CURL – POST

SERVIDOR REB ELS MISSATGES DE DINS UNA XARXA PER POST AMB ORDRE CURL.

EXERCICI GET

https://mossen.alcoxide.dev/web/api/demo.php?nom=*AQUIPOSESESTEUNOM*&missatge=*AQUIESTEUMISSATGE"

See the Pen GRANOT 0.1 by PereAntoni (@pereantoni) on CodePen.

En aquest problema aplicam els conceptes bàsics de la programació orientada a objectes.

Realitzarem una sèrie d’exercicis enfocats a conèixer cada un dels pilars d’aquest paradigma.

Aquí teniu la implementació sobre la que es fan els exercicis.

ABSTRACCIÓ

El primer paradigma que treballam és l’abstracció. Per tal motiu explicam el projecte i donam l’UML del projecte “GRANOT”.

Per fer aquest UML (United Model Language) s’ha emprat el programa plantUML, que ens permet crear molts de tipus d’esquemes conceptuals mitjançant un codi propi. El codi d’aquest model el teniu aquí.

Descripció de GRANOT:

• GRANOT és una aplicació implementada sobre HTML i Javascript. El seu esquema pot ser transportat a un altre tipus de llenguatges JAVA, PYTHON, …
  És la fortalesa que ens dona aquest tipus de abstracció dels projectes, els dissenys no són per un llenguatge en concret, són una abstracció del seu funcionament.
• Podeu veure que les classes estan connectades entre elles i que existeixen diferents tipus de connexions.
  • -> Herència: Apunta a la classe pare.
  • -# Composició: La classe conté una altra de classe (per exemple la classe Animal té dos ulls a la seva implementació)
  • -@ Agregació: La classe pot contenir un altre tipus de classe.
• GuiAPP: És la classe que crea i uneix l’escenari usant un SVG. S’ha de pasar com a paràmetre un id de l’HTML.
• LlistaObjectes: Es la classe encarregada de gestionar els objectes que es van afegint a GuiApp. Per fer els exercicis usarem l’agregació directa sense usar la llista.
• Animal: És la classe pare que s’encarrega de crear un objecte sobre el SVG i té mètodes:
  • getPosicio(): retorna un Punt que és la seva posició
  • mou(punt): ens permet moure l’animal de lloc dins l’SVG
  • escala(int): escala l’animal (this.group)
  • punt(): Retorna el Punt on està l’animal.
• Granot: Hereta les característiques de la classe Animal, afegeix per composició la classe Ull i afegeix els mètodes:
  • mouNineta(Punt): Envia a moure els dos ulls cap a un punt
  • mouNinetaO(ObjecteSVG): Envia a moure els dos ulls cap a un Objecte(per exemple una mosca) a partir de la seva definició de group.
• Mosca: Hereta les característiques de la classe Animal i afegeix els mètode:
  • anima(velocitat): Fa que la mosca tengui un moviment de x=0 fins x=SVG.MaxX amb la velocitat pasa per paràmetre. Aquest mètode es crida mitjançant un objecteMosca.addInterval(objecteMosca.anima(velocitat), temps) que crida el mètode cada “temps” en milisegons i la velocitat en pixels (integer).
• Punt: És una classe que ens permet mantenir un punt (x,y) dins un objecte o variable.

Exercicis

1. Per tal de conèixer com funciona el llenguatge s’ha de fer un exercici. Consisteix en crear un Mapa Mental per algún tema d’alguna assignatura del vostre curs.
   Els Mind Maps s’expliquen aquí.
2. Troba l’error de l’UML, pista classe Animal, Granot, Ull.
3. Fes un fork del codi i sobre ell:
   1. Afegeix un altre granot. (fer un new…)
   2. Canvia de mida i de posició el nou granot que has creat.
   3. Fes que segueixi la mosca (mira les propietats).
   4. Guarda el codi al teu web.
4. Sobre el codi anterior has d’afegir una mosca i que el segon granot segueixi la segona mosca.

ENCAPSULACIÓ/HERÈNCIA

L’herència ens permet crear una nova class a partir d’una altra, en el projecte GRANOT tenim heretats un Granot i una Mosca.

class Granot extends Animal{
  constructor(draw){
//PASSAM SVG PER ATRIBUT AL PARE
    super(draw);
//DIBUIXAM EL GRANOT (NOU TIPUS D'ANIMAL)
    this.cos  = draw.gui.ellipse(150,80).fill("#0f6").stroke("#000").move(0,10); 
    this.ull1 = new Ull(30,draw);
    this.ull2 = new Ull(30,draw);
//AFEGIM ELS OBJECTES ULLS.
    this.ull1.mou(45,0);
    this.ull2.mou(75,0);
    
    this.boca= draw.gui.line(50,60,100,60).stroke({ color: '#000', width: 2, linecap: 'round' });
//AGRUPAM DINS GROUP SVGJS
    this.group.add(this.cos);
    this.group.add(this.ull1.group);
    this.group.add(this.ull2.group);
    this.group.add(this.nineta2);
    this.group.add(this.nineta1);
    this.group.add(this.boca);
//SI FEIM CLICK SOBRE LA BOCA CRIDA AL MÈTODE XERRA
		this.boca.click(this.xerra);
  }
  xerra(){alert ("Som un granot");}

  mouNinetaO(o){
    //treim el punt de l'objecte que ha de seguir la nineta
    //escriu("info2","seguint a " + o.punt().x() + ", " + o.punt().y());
    escriu("info2","seguint moviment");
    this.mouNineta(o.punt());
    
  }
  mouNineta(p){
      this.ull1.mouNineta(p);
      this.ull2.mouNineta(p);
  }
}

Exercicis

1. Fes un nou tipus d’Animal (extends animal) amb un aspecte físic diferent al granot i la mosca:
   1. Què no tengui ulls.
   2. Què xerri (mètode d’animal) quan li facem click damunt.
   3. Que faci un moviment.
2. Fes un mètode que calculi la distància entre dos objectes, (mosca i granot) a partir d’una distancia el granot ha de treure la llengua.
3. Fes un nou tipus d’Animal Cíclope(extends animal):
   1. Que tengui ulls.
   2. Què sense sortir de l’escenari.
   3. Amb els ulls ha de seguir un objecte.

El git i el github ens serviran per mantenir els nostres repositoris, el git en local i al github (dins un repositori d’usuari del seu servidor). La idea bàsica és la de poder treballar en local i al finalitzar la tasca actualitzar actualitzar el repositori github. L’objectiu és tenir el repositori actualitzat.

1. Instal·lació i creació usuaris.

GIT: El primer que hem de fer és instal·lar git, al linux amb l’instrucció “sudo apt install git”. Així ja podem tenir un control de versions locals, mes endavant s’expliquen les instruccions bàsiques que emprarem. Si voleu més informació sobre el git podeu consultar aquí.

GITHUB: Si no tenim cap usuari al github, en cream un. Posam la informació que ens demana i desprès cream un repositori. D’aquest repositori és important agafar la direcció per fer un clone.

2. Enllaçam els repositoris.

GITHUB: Ja tenim el nostre usuari a github, hem d’entrar i obrir el repositori de classe(sino en tenim cap el cream). Copiam l’https per clonar.

GIT LOCAL: Feim una carpeta per els repositoris. Dins ella executam “clone https://….” /¿(la direccio que hem copiat del github). Ens baixarà la carpeta sencera, ara ja tenim el contingut del repositori en local, falta que ho enllacem.

Entram a la carpeta que hem clonat, hi feim feina, podem per exemple, afegir un fitxer. (aquest seria el moment que fessim les activitats de classe).

Per acabar la tasca, sempre hem d’executar les instruccions:

“git add .”

• git add .
  • si no ho hem posat abans, ens demanarà les dades d’usuari, són dues instrucccions que s’han d’executar.

• git commit -m “nom de la comesa”
• git push
  • si és la promera vegada que feim el push ens demanarà les credencials d’usuari i un tokeen
  • El token el cream dins el github a la secció de “configuració/developers settings”-> cream un nou token, el podeu guardar dins el vostre mail, recorda que hi ha diferens tiups de tokens.
  • copiau el token generat i el podreu aferrar quan vos demana el password (pitjant control-shift-V a la consola)

3. Juntant diferents repositoris locals.

Una vegada tenim enllaçats els dos repositoris i el github, cada vegada haure de fer (dins la carpeta del repositori) un git pull (ens actualitza el contingut).

4. Altres informacions i enllaços.

Per crear un token d’accès: https://docs.github.com/es/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

https://blog.desdelinux.net/ca/guia-rapida-para-utilizar-github/

https://cacauet.org/wiki/index.php/Git:_comandes