mirror of
https://github.com/Steffo99/sophon.git
synced 2024-10-16 07:07:26 +00:00
🎓 Write some more things
This commit is contained in:
parent
e85d968d05
commit
1c0e297e92
GPG key ID:
6965406171929D01
3 changed files with 130 additions and 23 deletions
17
backend/poetry.lock
generated
17
backend/poetry.lock
generated
|
|
@ -248,6 +248,17 @@ MarkupSafe = ">=2.0"
|
|||
[package.extras]
|
||||
i18n = ["Babel (>=2.7)"]
|
||||
|
||||
[[package]]
|
||||
name = "jsx-lexer"
|
||||
version = "1.0.0"
|
||||
description = "A JSX lexer for Pygments"
|
||||
category = "dev"
|
||||
optional = false
|
||||
python-versions = "*"
|
||||
|
||||
[package.dependencies]
|
||||
Pygments = ">=2.7"
|
||||
|
||||
[[package]]
|
||||
name = "latexcodec"
|
||||
version = "2.0.1"
|
||||
|
|
@ -730,7 +741,7 @@ test = ["websockets"]
|
|||
[metadata]
|
||||
lock-version = "1.1"
|
||||
python-versions = "^3.9"
|
||||
content-hash = "51ddb46bd6559cbdb22d529967f3368f91b034862c4df87b14e785aa282aa03d"
|
||||
content-hash = "a4b579746d23d05799bebbe7a3581f9b0762034ef30cca8934d9d2e46feb0a0b"
|
||||
|
||||
[metadata.files]
|
||||
alabaster = [
|
||||
|
|
@ -825,6 +836,10 @@ jinja2 = [
|
|||
{ file = "Jinja2-3.0.2-py3-none-any.whl", hash = "sha256:8569982d3f0889eed11dd620c706d39b60c36d6d25843961f33f77fb6bc6b20c" },
|
||||
{ file = "Jinja2-3.0.2.tar.gz", hash = "sha256:827a0e32839ab1600d4eb1c4c33ec5a8edfbc5cb42dafa13b81f182f97784b45" },
|
||||
]
|
||||
jsx-lexer = [
|
||||
{ file = "jsx-lexer-1.0.0.tar.gz", hash = "sha256:b5f5270cad47b065417fd7bdb780199d5166bd4a88a2a0fd7412e90e7a59b5cc" },
|
||||
{ file = "jsx_lexer-1.0.0-py2.py3-none-any.whl", hash = "sha256:491783c7ae75f2cbde18f66c1362e93afd6e281078482215b70c1a8dfa61e57b" },
|
||||
]
|
||||
latexcodec = [
|
||||
{ file = "latexcodec-2.0.1-py2.py3-none-any.whl", hash = "sha256:c277a193638dc7683c4c30f6684e3db728a06efb0dc9cf346db8bd0aa6c5d271" },
|
||||
{ file = "latexcodec-2.0.1.tar.gz", hash = "sha256:2aa2551c373261cefe2ad3a8953a6d6533e68238d180eb4bb91d7964adb3fe9a" },
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ sphinx-autobuild = "^2021.3.14"
|
|||
sphinxcontrib-bibtex = "^2.4.1"
|
||||
rinohtype = "^0.5.3"
|
||||
Pillow = "^8.4.0"
|
||||
jsx-lexer = "^1.0.0"
|
||||
|
||||
[build-system]
|
||||
requires = ["poetry-core>=1.0.0"]
|
||||
|
|
|
|||
|
|
@ -155,11 +155,11 @@ Per realizzare il requisito dell'`estendibilità <Estendibilità>`, si è scelto
|
|||
Modulo backend
|
||||
--------------
|
||||
|
||||
Il modulo backend consisterà in una web :abbr:`API (application programming interface)` che si interfaccia con il database e i moduli Jupyter, permettendo un accesso controllato alle risorse del software.
|
||||
Il modulo backend consiste in una web :abbr:`API (application programming interface)` che si interfaccia con il database e i moduli Jupyter, permettendo un accesso controllato alle risorse del software.
|
||||
|
||||
Sarà scritto in `Python`, usando `Poetry` e le librerie `Django`, `Django REST Framework` e `Docker SDK for Python`, descritte nei prossimi paragrafi.
|
||||
È scritto in `Python`, usando `Poetry` e le librerie `Django`, `Django REST Framework` e `Docker SDK for Python`, descritte nei prossimi paragrafi.
|
||||
|
||||
Esso sarà **eseguito dal server** sul quale si desidera ospitare Sophon.
|
||||
Esso è **eseguito dal server** sul quale si desidera ospitare Sophon.
|
||||
|
||||
|
||||
.. index::
|
||||
|
|
@ -228,7 +228,7 @@ Fornisce una suite di strumenti che assistono nella creazione di siti di medie d
|
|||
|
||||
Le pagine restituite vengono definite attraverso funzioni, dette *function-based views*, o attraverso classi, dette *class-based views*, che ricevono in input la richiesta effettuata dall'utente ed restituscono in output la risposta HTTP da inoltrargli.
|
||||
|
||||
È stato usato per la realizzazione del modulo backend in quanto presentato al corso di Tecnologie web di Unimore, e con tutte le funzionalità necessarie per la realizzazione del progetto del sito.
|
||||
È stato scelto per la realizzazione del modulo backend in quanto presentato al corso di Tecnologie web di Unimore, e in quanto contenente tutte le funzionalità necessarie per la realizzazione del progetto del sito.
|
||||
|
||||
|
||||
.. index::
|
||||
|
|
@ -246,6 +246,8 @@ Permette di definire metodi dell'API in modo molto simile alle views di Django:
|
|||
|
||||
Inoltre, permette la generazione automatica di metodi per l'interazione con certe entità del database, attraverso particolari classi dette *viewset*.
|
||||
|
||||
Come per Django, è stato scelto per lo sviluppo di Sophon in quanto è stato presentato al corso di Tecnologie web di Unimore, e perchè si è ritenuto che fosse l'opzione più semplice per realizzare una web :abbr:`API (application programming interface)` all'interno di Django.
|
||||
|
||||
|
||||
.. index::
|
||||
single: Docker; SDK for Python
|
||||
|
|
@ -259,6 +261,7 @@ Per interfacciarsi con i `moduli Jupyter <Modulo Jupyter>`, si è deciso di util
|
|||
|
||||
`Containerizzazione`, più avanti nel capitolo.
|
||||
|
||||
|
||||
.. index::
|
||||
single: modulo; frontend
|
||||
|
||||
|
|
@ -269,7 +272,13 @@ Il *modulo frontend* consiste in una applicazione web che consente agli utenti d
|
|||
|
||||
Le interazioni vengono inviate al `modulo proxy <Modulo proxy>`, che le ispeziona e le inoltra al `modulo server <Modulo server>`.
|
||||
|
||||
Sarà scritto in `TypeScript`, usando `Yarn` e le librerie `React`, `FontAwesome` e `Bluelib` in aggiunta a innumerevoli altre microdipendenze.
|
||||
È scritto in `TypeScript`, usando `React` e le librerie `FontAwesome` e `Bluelib`, in aggiunta alle loro dipendenze ed altre piccole librerie di supporto.
|
||||
|
||||
Viene **eseguito dal browser web** dell'utente che desidera interagire con Sophon, transpilato da TypeScript a `JavaScript`.
|
||||
|
||||
.. todo::
|
||||
|
||||
Transpilato esiste come parola italiana? Come si può tradurre "transpiled" altrimenti?
|
||||
|
||||
|
||||
.. index::
|
||||
|
|
@ -278,7 +287,56 @@ Sarà scritto in `TypeScript`, usando `Yarn` e le librerie `React`, `FontAwesome
|
|||
JavaScript
|
||||
^^^^^^^^^^
|
||||
|
||||
.. todo:: JavaScript
|
||||
`JavaScript <https://it.wikipedia.org/wiki/JavaScript>`_ è un linguaggio di programmazione interpretato con tipizzazione debole.
|
||||
|
||||
È l'unico linguaggio utilizzabile per fornire interattività alle pagine web; pertanto, è indirettamente utilizzato dal modulo frontend di Sophon.
|
||||
|
||||
Il suo modello di oggetti si basa su dizionari che mappano i nomi degli attributi ai loro corrispondenti valori.
|
||||
|
||||
Fa inoltre abbondante uso della capacità dei linguaggi dinamici di definire funzioni a runtime (dette anche callback), sfruttandole per favorire la programmazione funzionale.
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
var cane = {
|
||||
verso: () => console.log("Woof!"),
|
||||
};
|
||||
|
||||
var gatto = {
|
||||
verso: () => console.log("Miao!"),
|
||||
};
|
||||
|
||||
var zoo = [cane, gatto];
|
||||
|
||||
zoo.forEach(
|
||||
(animale) => animale.verso()
|
||||
);
|
||||
|
||||
.. index::
|
||||
single: Node.js
|
||||
single: npm
|
||||
|
||||
Node.js
|
||||
^^^^^^^
|
||||
|
||||
`Node.js <https://nodejs.org/>`_ è un runtime `JavaScript` che permette la scrittura e l'esecuzione di programmi all'esterno del contesto di un browser web, utilizzando invece come contesto il sistema operativo su cui viene eseguito.
|
||||
|
||||
Include :abbr:`npm (Node package manager)`, un gestore di pacchetti per il download di librerie Node, che interagisce con l'`npm Registry <https://www.npmjs.com/>`_.
|
||||
|
||||
È utilizzato da Sophon come toolchain per lo sviluppo e il deployment del modulo frontend, in quanto necessario per l'esecuzione di `Create React App`.
|
||||
|
||||
|
||||
.. index::
|
||||
single: Create React App
|
||||
single: React; Create React App
|
||||
|
||||
Create React App
|
||||
^^^^^^^^^^^^^^^^
|
||||
|
||||
`Create React App <https://create-react-app.dev/>`_ è un insieme di strumenti `Node.js` per lo sviluppo di una applicazione web utilizzando la libreria per la creazione di interfacce grafiche `React`.
|
||||
|
||||
È utilizzato da Sophon per la costruzione della pagina del modulo frontend che sarà servita all'utente.
|
||||
|
||||
Si è scelto di usare Create React App in quanto astrae al programmatore tutta la logica di creazione della pagina, semplificando enormemente la manutenzione ed `estensione <Estendibilità>` futura del software.
|
||||
|
||||
|
||||
.. index::
|
||||
|
|
@ -287,38 +345,60 @@ JavaScript
|
|||
TypeScript
|
||||
^^^^^^^^^^
|
||||
|
||||
.. todo:: TypeScript
|
||||
`TypeScript <https://www.typescriptlang.org/>`_ è un'estensione al linguaggio di programmazione `JavaScript` che vi introduce un sistema di tipizzazione forte.
|
||||
|
||||
Non essendo immediatamente utilizzabile all'interno delle pagine web, deve essere prima convertito in JavaScript: ciò viene effettuato da `Create React App` in fase di costruzione dell'applicazione.
|
||||
|
||||
.. index::
|
||||
single: Node.JS
|
||||
.. code-block:: typescript
|
||||
|
||||
Node.JS
|
||||
^^^^^^^
|
||||
interface Animale {
|
||||
verso: () => string,
|
||||
}
|
||||
|
||||
.. todo:: Node.JS
|
||||
var cane: Animale = {
|
||||
verso: () => console.log("Woof!"),
|
||||
};
|
||||
|
||||
var gatto: Animale = {
|
||||
verso: () => console.log("Miao!"),
|
||||
};
|
||||
|
||||
.. index::
|
||||
single: Yarn
|
||||
var zoo: Animale[] = [cane, gatto];
|
||||
|
||||
Yarn
|
||||
^^^^
|
||||
zoo.forEach(
|
||||
(animale) => animale.verso()
|
||||
);
|
||||
|
||||
.. todo:: Yarn
|
||||
È stata utilizzata in quasi ogni singola parte del modulo frontend, in quanto avere una tipizzazione forte riduce significativamente i bug prodotti e facilita manutenzione ed `estensione <estendibilità>` del software.
|
||||
|
||||
|
||||
.. index::
|
||||
single: React
|
||||
single: React; componente
|
||||
single: React; hook
|
||||
|
||||
React
|
||||
^^^^^
|
||||
|
||||
.. todo:: React
|
||||
`React <https://reactjs.org/>`_ è una libreria `JavaScript` per lo sviluppo di interfacce grafiche interattive all'interno di pagine web o applicazioni mobile.
|
||||
|
||||
L'interfaccia viene definita in modo dichiarativo e funzionale attraverso una variante dei linguaggi `JavaScript` (o `TypeScript`) detta JSX (o TSX), che permette l'inserimento di nodi HTML all'interno del codice.
|
||||
|
||||
.. index::
|
||||
single: Bluelib
|
||||
Si basa sul concetto di *componenti*, piccole parti incapsulate di interfaccia grafica riutilizzabili attraverso tutta l'applicazione definite attraverso funzioni pure, e di *hooks*, particolari funzioni il cui nome inizia con ``use`` in grado di tenere traccia dello stato di un componente o di causare effetti collaterali all'interno di esso.
|
||||
|
||||
.. code-block:: jsx
|
||||
|
||||
const ComponenteTitoloMaiuscolo = ({text}) => {
|
||||
const capitalizedText = text.toUpperCase();
|
||||
|
||||
return (
|
||||
<h1>
|
||||
{capitalizedText}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
È stata scelta per l'utilizzo in Sophon in quanto permette la realizzazione di interfacce grafiche molto complesse attraverso codice di facile comprensione, rendendo possibile la creazione di un'interfaccia altamente `intuibile <Intuibilità>`.
|
||||
|
||||
|
||||
.. index::
|
||||
|
|
@ -327,13 +407,24 @@ React
|
|||
FontAwesome
|
||||
^^^^^^^^^^^
|
||||
|
||||
.. todo:: FontAwesome
|
||||
`FontAwesome <https://fontawesome.com/>`_ è una libreria che fornisce più di mille icone utilizzabili gratuitamente all'interno di pagine web.
|
||||
|
||||
È stata usata per favorire l'`intuibilità <Intuibilità>` dell'interfaccia grafica attraverso simboli familiari all'utente.
|
||||
|
||||
|
||||
.. index::
|
||||
single: Bluelib
|
||||
|
||||
Bluelib
|
||||
^^^^^^^
|
||||
|
||||
.. todo:: Bluelib
|
||||
.. todo::
|
||||
|
||||
Come potrei dire impersonalmente che l'ho fatta io?
|
||||
|
||||
.. todo::
|
||||
|
||||
Bluelib
|
||||
|
||||
|
||||
.. index::
|
||||
|
|
|
|||
Loading…
Reference in a new issue