Commit 5272644e authored by Jordi Masip's avatar Jordi Masip

Petites millores a 'serveis web'. Afegit makefile

parent 62b509d4
Pipeline #1007 passed with stages
in 13 seconds
.df: Dockerfile
docker build -t latex . && touch .df
tfg.pdf: .df tfg.tex
docker run -v `pwd`:/data -t latex dockerentry.sh tfg
clean:
touch fake.out fake.aux fake.bbl fake.bcf fake.blg fake.log fake.run.xml fake.toc
rm *.out *.aux *.bbl *.bcf *.blg *.log *.run.xml *.toc
......@@ -374,18 +374,18 @@ En el inici de programa, es crida \texttt{lib\_aci\_init} per començar la moda
Els serveis web que s'han desenvolupat en aquest treball tenen dues funcionalitats molt importants:
\begin{enumerate}
\item Oferir una eina senzilla, ràpida, còmode i múltiplataforma per escollir el contingut que "emetran" els punts d'interès.
\item Oferir una eina senzilla, ràpida, còmode i múltiplataforma per escollir el contingut que emetran els punts d'interès.
\item Facilitar l'accés a aquesta informació a les aplicacions mòbils.
\end{enumerate}
S'ofereixen a través d'Internet, utilitzant el protocol HTTP(S). Aquests serveis es poden biseccionar en quatre:
\begin{itemize}
\item \emph{Panell d'administració}: per administrar la informació del punt d'interès.
\item \emph{API per Android}: perquè es pugui consultar la informació dels punt d'interès.
\item \emph{MariaDB}: base de dades relacional encarregada d'emmagatzemar tota la informació que es gestiona al panell d'administració.
\item \emph{Redis}: base de dades NoSQL que permet mantenir les sessions d'usuari obertes del panell d'administració.
\end{itemize}
\begin{description}
\item [Panell d'administració] per administrar la informació del punt d'interès.
\item [API per Android] perquè es pugui consultar la informació dels punt d'interès.
\item [MariaDB] base de dades relacional encarregada d'emmagatzemar tota la informació que es gestiona al panell d'administració.
\item [Redis] base de dades NoSQL que permet mantenir les sessions d'usuari obertes del panell d'administració.
\end{description}
\subsection{Aplicacions web}
......@@ -404,25 +404,32 @@ L'API per l'aplicació Android serveix per atendre peticions de l'aplicació:
\item Donada uuid de Beacon i retorna informació de Beacon i les seves notificacions.
\end{itemize}
Un criteri alhora de classifciar les aplicacions web (i altre programari) és segons la separació d'interessos entre una capa de presentació (\emph{front-end}) i la capa d'accés a les dades (\emph{back-end}) \cite{front_back_ends}. El panell d'administració està format per un front-end i back-end mentre que la API per l'aplicació Android només ofereix el back-end (el front-end és la pròpia aplicació Android).
Un criteri alhora de classifciar les aplicacions web (i altre programari) és segons la separació d'interessos entre una capa de presentació (\emph{front-end}) i la capa d'accés a les dades (\emph{back-end}) \cite{front_back_ends}. El panell d'administració està format per un \emph{front-end} i \emph{back-end} mentre que la API per l'aplicació Android només conté el \emph{back-end} (el \emph{front-end} és la pròpia aplicació Android).
S'ha utilitzat Flask \cite{flask} \cite{flask_foreword} per desenvolupar les dues aplicacions web. Flask és un microframework de web que està escrit en Python i està basat en Werkzeug toolkit i Jinja2 template engine. On micro de microframework vol dir Flask té objectiu de matenir el nucli simple però és extensible, té moltes extensions que proporciona una integració de bases de dades, validació de formularis, maneig de càrrega, diverses tecnologies d'autenticació oberta, etc. Flask és tan simple que amb el següent codi ja es pot tenir una aplicació web que mostra "Hello World!":
S'ha utilitzat Flask \cite{flask} \cite{flask_foreword} per desenvolupar les dues aplicacions web. Flask és un microframework de web que està escrit en Python i està basat en Werkzeug toolkit i Jinja2 template engine. Flask és un \textbf{micro}framework que té com a objectiu matenir el nucli simple però és extensible. Existeixen moltes extensions que proporciona integració amb bases de dades, validació de formularis, administració de càrrega, diverses tecnologies d'autenticació, \dots
% millorar aquesta part: comentar una mica el codi
Flask és tan simple que amb el següent codi ja es pot tenir una aplicació web que mostra "Hello World!":
\begin{verbatim}
from flask import Flask
# Creem l'aplicació
app = Flask(__name__)
# La funció `hello` s'ha d'executar quan es demani el camí `/`
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run()
@app.route("/bye")
def bye():
return "Sayonara baby!"
# Arrenquem l'aplicació perquè comenci a esperar peticions
app.run()
\end{verbatim}
Jinja2 és un dels motors de plantilles per Python més utilitzat. Està inspirat pel sistema de plantilla de Django, però està extès amb un llenguatge més expresiu que dóna facilitats als desenvolupadors. A més d'això ajuda a fer pagines webs més segures.
Jinja2 és un dels motors de plantilles per Python més utilitzat. Està inspirat pel sistema de plantilla de Django, però està extès amb un llenguatge més expresiu que dóna facilitats als desenvolupadors i protegeix al desenvolupador d'errades que puguin provocar forats de segurertat com Cross-site scripting (XSS).
\begin{figure}
\centering
......@@ -447,12 +454,14 @@ Jinja2 és un dels motors de plantilles per Python més utilitzat. Està inspira
\label{fig:flask_app}
\end{figure}
La figura~\ref{fig:flask_app} representa l'estructura d'una aplicació flask, sota del directori \texttt{static} hi ha els fitxers CSS i JavaScript i sota del directori \texttt{templates} hi ha les platilles en format Jinja2.
La figura~\ref{fig:flask_app} representa l'estructura d'una aplicació Flask. Dins el directori \texttt{static} hi ha els fitxers que no canvien (que no són dinàmics), com els fitxers CSS i JavaScript. Dins el directori \texttt{templates} hi ha les platilles en format Jinja2 que utilitzarà Flask.
Les \emph{routes} de Flask les podem classificar en dos tipus: les que retornen una vista (pàgina HTML) o les que simplement retornen dades en una notació específica.
% millorar aquesta part: definir api-rest
Pel web de administració és un web amb interació visual % frase inacabada?
\texttt{JSON} JavaScript Object Notation, és un estàndard obert basat en text dissenyada per a intercanvi de dades llegible per humans. Deriva del llenguatge script JavaScript, per a representar estructures de dades simples i llistes associatives, anomenades objectes. El tipus MIME del JSON és \emph{application/json}. El format JSON s'utilitza habitualment per serialitzar i transmetre dades estructurades en una connexió de xarxa. S'utilitza principalment per intercanviar dades entre un servidor i una aplicació web, sent una alternativa a l'XML.
\texttt{JSON} JavaScript Object Notation, és un estàndard obert basat en text dissenyada per a intercanvi de dades llegible per humans. Deriva del llenguatge script JavaScript, per a representar estructures de dades simples i llistes associatives, anomenades objectes. El tipus MIME del JSON és \emph{application/json}. El format JSON s'utilitza habitualment per serialitzar i transmetre dades estructurades en una connexió de xarxa. S'utilitza principalment per intercanviar dades entre un servidor i una aplicació web, sent una alternativa a l'XML.
% TODO: completar
El servidor web \cite{web_server} és un programari informàtic que s'encarreaga de rebre les ordres enviades amb el protocol d'HTTP, anomenades \emph{peticions web}. Quan el servidor web rep una petició la delega a l'aplicació web. L'aplicació web s'executa, actua segons els paràmetres d'entrada, i retorna un resultat. Aquest resultat es retorna al servidor web i el servidor web l'envia a qui ha fet la petició web.
......@@ -758,4 +767,4 @@ Android ofereix les següents funcions per escanejar:
En certs casos podria ser interessant que la memòria del TFG tingui apèndixs.
\end{document}
\ No newline at end of file
\end{document}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment