WELCOM

Qualche tempo fa, nel lontano Giugno di quest'anno, è nato un thread Inventario Smart dei componenti per hobbisti e PRO sul Forum nel quale si é brevemente discusso circa l'utilita' di centralizzare sul WEB un Repository (Database + informazioni correlate) per i componenti elettronici. La discussione é stata avviata da Sjuanez, con l'intevento di altri amici e si é presto spostata su una succinta analisi di fattibilita' tecnica, con un'imponente lista di 'desiderata'.

Ovviamente ne sono stato stimolato, quale autore del programma Ge.Co. (Gestione Componenti) presentato qui su EY, e mi sono buttato a studiare le possibili soluzioni e ne é scaturito il sito WELCOM (Web ELectronic COmponent Management).

PREMESSE

L'utilita' di WELCOM é ampiamente discutibile per diversi motivi:

1. i contenuti del Database sono per forza di cose generici e vanno quindi integrati mediante altri strumenti con le informazioni private (es. quantita' posseduta, localizzazione dei componenti, fonte e prezzo d'acquisto, scorta minima, ecc); questo é l'aspetto piu' critico
2. il tempo impiegato per registrare le informazioni via WEB é leggermente superiore a quello richiesto per la gestione in locale
3. ciascun hobbista ha le proprie preferenze sul tipo e dettaglio delle informazioni, nonché sulla logica di ricerca delle stesse
4. alcune funzionalita', come ad esempio la stampa delle liste, non sono implementate e la loro introduzione é piuttosto complessa
5. la sicurezza e la veridicita' dei contenuti é fortemente dipendente dal 'buon senso' degli utilizzatori

PERCHE' ALLORA

Nonostante quanto sopra, lo sviluppo é stato completato almeno fino al punto di usabilità minima, senza fronzoli e senza tanti 'pezzetti' necessari. Perché?

1. il punto di forza é la collaborazione di piu' utenti alla creazione e mantenimento della base dati, operazione piuttosto noiosa, in particolare per la creazione delle immagini
2. rispetto alla versione stand-alone ha il vantaggio che la base dati é localizzata univocamente, mentre quella locale (GeCo) mantiene i dati in cartelle sul proprio PC, quindi con possibilità di cancellazioni totali o incongruenze quando si accede da più postazioni.
3. é possibile estendere le funzionalita' collegando documenti esterni associati ai componenti; questo é uno dei 'desiderata, previsto, ma non implementato al momento
4. l'accesso puo' ovviamente avvenire da ovunque, anche tramite Tablet e, proprio volendolo, anche da SmartPhone
5. puo' essere un modestissimo contributo per chi voglia approcciare le tecniche di programmazione Web
6. come detto in un messaggio, mi sono divertito, depresso, sfiduciato ed esaltato ad imparare tante cose nuove, e questo é l'importante
   

IN SOSTANZA

Schermata

Posso al momento usufruire dell'ampio spazio disponibile sul mio sito e, non avendo segreti da nascondere ne progetti industriali da proteggere, lascio libero accesso a chiunque.

La pagina si presenta divisa in 3 zone verticali:

1. fascia alta:

• selezione dellle operazioni comuni (aggiunta, modifica, salvataggio e cancellazione) sui record.
• scelta dell'ordinamento dei record (voce di ordinamento e direzione)
• ricerca di testo all'interno del campo 'Descrizione' (solo questo al momento) o ri-selezione di tutti i record

1. fascia centrale:

• finestra scorrevole con l'elenco dei componenti selezionati, visualizzati per le 3 voci principali, Codice, Tipo e Produttore
  

  elenco.jpg

• campi descrittivi [1] del componente con menu' a discesa per le liste di scelta (Tipo, Produttore e Package)
  

  dati.jpg

• immagine associata al componente (apribile in altra pagina [2]) e link al PDF relativo [3])
  

  immagine.jpg

1. fascia inferiore:

• contatori dei contenuti (componenti, tipi, produttori, package)
• pulsante per la Cancellazione dell'operazione in corso
• finestra dei messaggi (operazioni concluse ed errori)

Note:
[1] il database comprende altri 2 campi, Extra2 e Extra3, al momento non visualizzati sulla pagina; sono una 'scorta' per possibili ampliamenti.
[2] piccola correzione da fare: ora la pagina sostituisce quella visualizzata (corretto nell'attuale versione 1.01)
[3] i dati esistenti riportano il nome del PDF da me scaricato e memorizzata in una cartella del mio PC; questa informazione é da sostituire col link al datasheet del produttore

NOTE TECNICHE E SCELTE PROGETTUALI

Il database é implementato su un web server Linux con MySQL versione 5.6 e con PHP versione 5.5 (con estensioni mysqli, al momento non utilizzate). La pagina WELCOM (index.html) è in HTML5 e utilizza i CSS3 e JQuery versione 1.11.

Il 'framework' é Foundation 5; il sito é quindi ' responsive ' e si adatta al device utilizzato...con qualche problemino! Premetto che non ero d'accordo con la proposta iniziale di renderlo accessibile da SmartPhone per ovvi, per me, motivi di usufruibilita'. Nonostante cio', la possibilita' di accedere da Tablet l'ho ritenuta interessante. Ne é percio' scaturita una soluzione ibrida, che si presenta maluccio su Tablet e discretamente su SmartPhone.
Il motivo é chiaro: la lista componenti non puo' essere 'impilata' al ridimensionamento della larghezza, pena la difficile leggibilita' delle righe. Questo obbliga a fissare la larghezza della lista al valore massimo di 320 pixel (risoluzione minima, spero, di questi device). Il dimensionamento statico é contrario alla filosofia 'responsive' e difatti questo fa si che su Tablet la presentazione sia confusa. Se questo progetto avra' un seguito, prendero' la decisione di riadattare la pagina alla dimensione minima di 640 (o 720) pixel.

L'utilizzo di JQuery (e AJAX) ha permesso di ottenere un sito dinamico che non si ricarica; l'aggiornamento della pagina per la gestione dell'interfaccia é locale e percio' molto veloce. Il solo traffico di rete generato é ovviamente dato dal recupero dei record dal database; allo stato attuale, con circa 500 componenti inseriti, il recupero dell'intera lista impiega circa 1..2 secondi.
La lingua utilizzata per i testi (e per molti commenti nel codice) é l'Inglese, come da richiesta iniziale; la conversione in Italiano non comporta comunque difficolta'.

NOTE SULLA REALIZZAZIONE

Sono stato costretto a studiare tanto, con conseguenti moccoli e sorrisi; il risultato finale é però piuttosto gratificante e mi soddisfa, nonostante le tante ingenuita' e ingarbugliamenti del codice che faranno inorridire gli esperti.
Il punto che mi ha fatto impazzire non poco é apparentemente banale, ovvero il campo 'PDF'.
Questo campo si deve comportare come output durante la consultazione dei dati (il valore letto dal database deve essere visualizzato qui come link - quindi un 'anchor'), e come input nelle fasi di inserimento o di modifica dei record. Le due alternative non sono fra loro compatibili perché richiedono codice HTML diverso; la soluzione trovata é stata di riscrivere dinamicamente il codice html conservando pero' il valore precedentemente inserito. Un trucchetto che ha sporcato il codice, pero' funziona.
Altro punto, tuttora oscuro, é un'altra banalita': l'evidenziazione del record attualmente selezionato. La prima soluzione, semplice e pulita, e sulla carta assolutamente affidabile, é consistita nel modficare da codice il valore CSS del background; nel 90% dei casi funzionava, nel restante no. Ora la selezione avviene eliminando la classe di default per sostituirla con la classe di evidenza (cambia solo il color di sfondo), e viceversa per la deselezione. Procedura simile, ma piu' complessa da introdurre; pero' funziona nel 100% dei casi.

TO DO

Non so da che parte iniziare!

1. Innanzitutto non sono implementare le funzioni fondamentali di controllo di congruenza dei dati inseriti e di sicurezza degli stessi (sanitize), per cui invito gli hacker a farsi avanti.
2. L'accesso é libero a chiunque, mentre credo opportuno avere almeno 2 livelli di accesso (solo visualizzazione oppure modifica).
3. Le tabelle dei Tipi, Produttori e Package contengono i dati da me già utilizzati; manca la possibilita' di gestione di questi dati.
4. Le funzioni di associazione Progetti e Documenti non ci sono (ci sono solo i campi visibili sulla pagina, ma dietro sono vuoti). Il meccanismo è chiaro (insomma, quasi) ovvero una tabella ausiliaria per gestire le relazioni molti-a-molti, pero' richiede un bel lavoro.
5. La gestione di caratteri speciali (lettere accentate, virgolette, e altro) é stata affrontata parzialmente e poi messa da parte perché veramente complessa; mi sono perso tra codifiche e JSON.
6. La funzione di ricerca è al momento attiva sul solo campo Descrizione; sarebbe forse utile estenderla anche ad altri campi (modificata ora nella versione 1.01 - la ricerca avviene sia in Descrizione che in Codice; é inoltre possibile ricercare ulteriormente nei risultati della prima ricerca).
7. La documentazione del codice é pressoché inesistente, tipico per me che sono pigro.
8. Una 'scoperta' dell'ultima ora; quando si elimina un componente la relativa immagine rimane nel folder sul sito!
   

Piu' un altro centinaio di cose che ora non ricordo o a cui non voglio pensare.

RILASCIO DELLA VERSIONE 1.0.1

Oltre all'accesso al dominio per l'utilizzo, metto a disposizione di chiunque lo richieda il pacchetto con tutti i file che compongono il sito. Probabilmente pubblicherò una pagina apposita sul sito Boxidee oppure potrei anche inserire qui lo Zip; per questo attendo eventuali suggerimenti. Chi fosse interessato puo' intanto inviarmi un PM.
Il pacchetto si compone di:

• file index.html
• file header.js: contiene e inizializza le variabili globali; insieme a grafica.css facilita una parziale personalizzazione del programma
• file function.js (funzioni javascript locali) e remote.js (funzioni di accesso remoto)
• una serie di file PHP (non li ho unificati perchè avrebbe richiesto altro lavoro), ciascuno dedicato ad una funzione specifica evidente dal nome
• file grafica.css e foundation.css con le personalizzazioni dell'aspetto
• librerie 'foundation.min.js' e 'jquery-1.11.3.min.js' liberamente scaricabili da web
• alcuni file ausiliari

Il tutto pesa meno di 1MB.

CONCLUSIONE

Non mi è chiaro in questo momento se ci sara' un futuro per WELCOM; molto dipendera' da riscontri, suggerimenti, richieste, insulti e altro.

Ripeto che per é stata un'esperienza utile e comunque soddisfacente; quello che ho imparato mi rimarra' e, anzi, mi sprona già a proseguire nello studio.
Mi sono anche chiesto se EY sia il posto giusto dove esporre questa soluzione; é partita come strumento di possibile interesse per hobbisti di elettronica, ma é anche vero che il contenuto e la metodologia di realizzazione forse esula dagli interessi dei partecipanti.

Sono comunque interessato a qualsiasi commento, grazie.

P.S.: nel DB ci sono ora 490 componenti + 2 record di Test con immagini a sorpresa!