Exchange O' Learn

Exchange O' Learn

Progetti Chiacchieriamo Progetti

Traduzione effettuata da DeepL Traduttore

TL;DR - Scopri il prima, durante e dopo il progetto Exchange O' Learn per presentarlo al concorso Stem Challenge 2017. Si può vedere il repository del progetto nel mio portfolio.


Come ho detto, ho partecipato al concorso Stem Challenge 2017, la verità è che il nostro sviluppo è stato abbastanza buono e siamo stati in grado di consegnare tutto nonostante i molti problemi che la piattaforma di consegna del progetto ha avuto.

Ma cominciamo dall'inizio, c'è stata una mail all'istituto promotore del concorso e il nostro tutor, che sono molto contento di aver avuto, ha deciso di proporre di partecipare, all'inizio sono stato l'unico che voleva partecipare, dal momento che non avevo nulla da perdere, ma ho avuto un problema, per fare l'iscrizione abbiamo bisogno di un minimo di 4 persone, quindi ho dovuto convincere altre 3 persone. Il problema che abbiamo avuto è stato che dovevano avere meno di 18 anni quando si sono iscritti e più della metà della classe era di 18 o più anziani.

Alla fine ho convinto 3 colleghi che sapevano poco di programmazione, quindi sono riuscito a convincerli dicendo loro che non avrebbero dovuto programmare nulla, visto che mi sarei occupato dello sviluppo, ma solo di testare l'applicazione, cioè i beta tester, e scrivere la documentazione per il progetto, cioè il manuale di istruzioni. Okay, avevamo già un team, ma per completare la prima fase avevamo bisogno di un nome e di un logo. Un membro del team ha immediatamente suggerito che ci chiamiamo Anonimouse, e siccome non c'erano altre proposte, abbiamo adottato questo nome. Ho progettato il logo utilizzando uno strumento che non ho intenzione di chiamare, ma il risultato è stato questo.

Anonimouse Logo

 

La verità è che la prima fase è stata per noi la meno difficile da realizzare, perché con la voglia di partecipare l'abbiamo fatta quasi senza rendercene conto. A questo punto non sapevamo ancora cosa fare per il concorso, quello che sapevo con certezza era che volevo che fosse un progetto di sviluppo web. Abbiamo dovuto identificare un problema nel nostro ambiente, abbiamo scelto di scegliere la connessione internet, perché oltre ad essere molto limitata e lenta, gli insegnanti ci hanno tagliato la connessione. Un insegnante dell'istituto ha sviluppato un progetto che, mettendolo sul server che funge da gateway, può tagliare la connessione verso l'esterno della classe, ma possiamo comunicare internamente. Vi lascio qui il blog dell'insegnante e qui il repository del progetto che vi sto raccontando.

Qualche mese fa mi sono messo in contatto con un partner che conosceva alcuni programmi Front-End per fare una chat in HTML5 e PHP, il mio partner ha fatto il Front-End e io il Back-End. Non abbiamo mai terminato il progetto.

Ho approfittato di quell'idea per adottarla e aggiungere altre caratteristiche, dato che i miei colleghi non hanno dovuto programmare nulla, hanno pensato che fosse una buona idea.

Sapevamo già che volevamo che un'applicazione web fosse in grado di condividere le informazioni fornite dall'insegnante, oltre a creare eventi in un calendario e mantenere una chat in classe per condividere i dubbi con i colleghi. Inoltre, non sarebbe necessario disporre di una connessione Internet per accedervi e utilizzarla.

Ed è qui che si è conclusa la prima fase.

La seconda fase ha richiesto un'approfondita ricerca progettuale, quindi abbiamo dovuto scrivere un quadro teorico e metodologico sul nostro progetto, tra le altre cose.

Quadro teorico

Lo sfondo di questo progetto è costituito dai problemi causati da una connessione lenta a Internet, o anche offline, per le assegnazioni giornaliere delle classi. Questa è una perdita di tempo per il corretto insegnamento delle materie, quindi, il tema di ricerca che vogliamo affrontare in questo progetto è quello di risolvere i vari problemi riscontrati in una sala computer con 25 computer più un computer per l'insegnante.

Gli obiettivi da perseguire sono i seguenti:

 Condividere informazioni e risorse tra studenti e insegnanti.
• Stabilire una comunicazione attiva per condividere dubbi e soluzioni, attraverso una chat.
• Tenetevi aggiornati su eventi importanti, come esami o presentazioni cartacee.
• Non fate affidamento su una connessione continua a Internet, utilizzando solo la larghezza di banda della rete locale dell'aula.

Quadro metodologico

I meccanismi utilizzati per l'analisi dei nostri problemi di ricerca sono stati l'osservazione diretta in classe giorno dopo giorno. Il presente progetto si propone come soluzione a questi problemi, prendendo come obiettivo principale quello di migliorare il funzionamento in classe, sia tra gli studenti che tra gli insegnanti.

A tal fine, abbiamo ideato, proposto e sviluppato una soluzione funzionale per affrontare questo problema senza rompere la struttura e il corretto funzionamento dell'aula. Da quando il progetto è stato messo a punto, è stato messo in atto, in modo che, man mano che procedeva, abbiamo potuto vedere nuove esigenze che sono sorte durante l'uso di questo strumento.

Per questo motivo, siamo riusciti ad arrivare ad un sistema che migliora il funzionamento e la comunicazione in classe, oltre ad aiutare ad offrire risorse in modo rapido e semplice tra gli studenti, in questo modo, si riduce il tempo perso cercando di offrire risorse e strumenti, sia tra gli studenti e tra gli insegnanti.

Dopo di che, abbiamo dovuto scrivere quali tecnologie avevamo usato e perché.

• PHP 7
• CSS 3
• Angular.JS
• Bootstrap
• Datatables
• JQuery
• Colorpicker

Abbiamo deciso di utilizzare queste tecnologie in modo che la nostra applicazione sia aggiornata con le più recenti tecnologie di programmazione web, e abbiamo anche deciso di utilizzare Angular.JS per renderla SPA (Single Page Application), quindi non è necessario aggiornare la pagina per mostrare i dati in formato JSON, in quanto si tratta di una API creata da noi.

Abbiamo anche dovuto utilizzare gli strumenti per la costruzione o la progettazione del progetto.

• Ubuntu Server 64 bits
• Apache
• PHP 7
• phpMyAdmin
• MySQL
• Vsftpd
• Webmin
• NetBeans
• Filezilla

Inoltre, utilizziamo Bootstrap Studio anche per creare il prototipo funzionale della nostra applicazione.

Infine, abbiamo dovuto porre in essere gli ostacoli individuati e le conclusioni tratte dal processo di ricerca.

Uno degli ostacoli era che avevamo proposto che l'applicazione usasse il minor consumo possibile di internet, quindi non potevamo usare le CDN per CSS e JS, quindi dovevamo includerle insieme all'applicazione, ma approfittando del fatto che è sulla rete locale che il tempo di caricamento è ancora più veloce ed efficiente.

Avevamo bisogno di questa applicazione il prima possibile, in modo da poter avere una comunicazione attiva e trasferimenti di file in modo rapido ed efficiente, senza interrompere il funzionamento della classe per quanto riguarda il consumo di banda di accesso a Internet, così abbiamo iniziato a svilupparla il più presto possibile.

La terza fase è stata già la consegna del progetto, abbiamo dovuto mettere un video di Youtube come una presentazione del progetto, ho fatto questo montaggio come un video promozionale.


Abbiamo anche dovuto inserire una breve descrizione di 100 parole al massimo.

Abbiamo creato un'applicazione web completamente funzionale che è ora presente in classe, permettendoci di interagire con tutti i nostri compagni di classe e l'insegnante di classe. Inoltre, nonostante i comuni problemi di Internet, la nostra applicazione non ne risente.

Affinché potessero provarlo, abbiamo dovuto fornire loro alcune linee guida di base.

Per avviare l'applicazione, sarà necessario avere un server web in cui scaricare il codice sorgente, non dobbiamo dimenticare che su alcuni server dovremo configurare i permessi di file e cartelle, accedere al server tramite un browser e installare l'applicazione. Dobbiamo ricordare che è necessaria una connessione ad un database per installarlo. Se tutto è stato installato correttamente la nostra applicazione dovrebbe funzionare. Si ricorda che la documentazione del progetto può essere consultata al seguente indirizzo https://sertxudeveloper.github.io/Exchange-O-Learn/

Ho creato un programma di installazione per rendere più semplice la configurazione dell'applicazione, infine, abbiamo dovuto elencare i linguaggi usati nello sviluppo del progetto.

• HTML5
• CSS3
• PHP 7
• JavaScript
• AngularJS

Poiché la piattaforma per l'invio delle fasi non andava bene, hanno deciso di aumentare i tempi di consegna, inizialmente fino a giugno 2017, e li hanno prorogati fino a metà dicembre 2017. Sono stato in grado di approfittare di questo per aggiungere funzioni che avevo in mente, ma che non avrei avuto il tempo di implementare in un primo momento.

Ad ottobre era completamente finito e nella fase di test in aula, a novembre l'ho consegnato per liberarmene, visto che ero sul progetto da più di sei mesi. Alcuni giorni prima del termine, essi lo hanno nuovamente prorogato fino alla fine di dicembre 2017. Non ho apportato alcuna modifica al progetto da quando l'ho girato perché sono stato coinvolto in altri progetti, uno dei quali è questo sito web.

Ad oggi, 7 febbraio 2018, hanno già  annunciato i finalisti, ma non i vincitori del concorso. Purtroppo non sono tra i finalisti, ma sono più che soddisfatto del buon lavoro che ho fatto, se qualcuno è interessato, l'ho disponibile in GitHub sotto la licenza GPL 3.0, il link è nel mio portfolio.

Grazie a questo progetto ho imparato ad usare AngularJS, conoscevo le cose buone e le cose cattive, grazie al progetto ho aperto un nuovo campo di programmazione che sto esplorando. In futuro spero di potervi portare progetti realizzati con questo tipo di linguaggio.

 

Non avendo più nulla da dire sul progetto, saluto e vi saluto la prossima settimana.