Sono JQuery e risolvo problemi: quando la clinica veterinaria del sig. Wolf incontra i nostri animali domestici

web design umbria

web design umbria

All’ indirizzo https://www.farwebdesign.com/petapp/ abbiamo una bellissima applicazione jquery che risolve i problemi agli animali domestici. E’ del sig. Wolf, non poteva essere altrimenti, ma quello che preme sottolineare é la ricchezza e la complessità presente in questi pochi file che costituiscono il package completo. Incorpora diverse librerie e framework, ma al centro c’è sempre lui, JQuery, con il suo codice minimalista da studiare e applicare in ogni circostanza conosciuto anche come la grande tenaglia che scende dal cielo, per indicare il suo tipico afferrare gli elementi con $(“qualcosa”) seguito da un punto che sostituisce la prolissità del codice javascript tradizionale impersonato dal noto getElementById(qualcosa). Nel progetto viene usata anche la libreria underscore.js che come indica lo stesso sito progetto presente in rete, è una sorta di armadio piedo di cravatte (a meno male, allora non siamo gli unici ad associare la meccanica progettuale di un codice scritto che non ha maniglie per essere definito in termini tiridimensionali, ma qualcun altro si mette in gioco con libere associazioni per spiegare il perchè di un metodo o di un evento), si legge infatti sul sito ufficiale:

Underscore è una libreria JavaScript che fornisce tutta una serie di utili aiutanti di programmazione funzionale senza estendere alcun oggetto incorporato. È la risposta alla domanda: “Se mi siedo davanti a una pagina HTML vuota e voglio iniziare a essere immediatamente produttivo, di cosa ho bisogno?” … e la cravatta da abbinare allo smoking di jQuery e alle bretelle di Backbone. Underscore offre oltre 100 funzioni che supportano sia i tuoi aiutanti funzionali preferiti del giorno lavorativo: mappa, filtro, invocazione, sia altri gadget specializzati: associazione di funzioni, template javascript, creazione di indici rapidi, test di uguaglianza profonda e così via! Nello specifico questa libreria ci aiuta a editare il testo per modificarlo, così tanto per essere teatrali.

Ok poi abbiamo anche bootstrap, https://getbootstrap.com/ nel progetto, non poteva mancare. Così come fontawesome, https://fontawesome.com/, che fornisce qualche utile gingillo grafico per abbellire i nostri click e scatenare gli eventi con stile. Poi abbiamo un plug-in formidabile che ci fa caricare le pagine dentro la stessa pagina che è jquery loadtemplate, utile per il caricamento e l’utilizzo di modelli. Il plug-in è progettato per essere semplice ma potente e supporta il caricamento di modelli dall’interno della pagina o l’utilizzo di AJAX per caricare file html. Poi abbiamo anche Popper.js perchè posizionare elementi su una pagina è un arte e inserire tooltip è difficile. Popper è qui per aiutarti! Dato un elemento, come un pulsante, e un elemento della descrizione che lo descrive, Popper posizionerà automaticamente la descrizione nel posto giusto vicino al pulsante. Posizionerà qualsiasi elemento dell’interfaccia utente che “viene espulso” dal flusso del documento e galleggia vicino a un elemento di destinazione. L’esempio più comune è una descrizione comandi, ma include anche popover, menu a discesa e altro. Tutti questi possono essere genericamente descritti come un elemento “popper”, vedere siti come https://www.javascripting.com/view/popper-js .

web design umbriaMa allora perchè non utilizziamo tutti un modello simile di programmazione in rete, usando esattamente queste tecnologie? La risposta è che il protocollo HTTP non ha memoria, per questo si sente parlare di servizi REST, ossia di partite a tennis tra client e server che hanno una particolarità, quella di palleggiarsi dei dati sicuri! Infatti se si utilizza il modulo per scrivere anche blasfemie del tipo la terra è piatta, il sito che ospita la pagina non ne verrebbe inficiato, in quanto il protocollo é without memory e al uno dei primi rendering la situazione di modellazione del DOM subirebbe comunque un ripristino rispetto ai contenuti originali, in quanto il file json non ha subito di fatto nessun update o cancellazione fisica reale dei dati. Dal punto di vista didattico e anche pratico l’applicativo possiamo considerarlo funzionale, ma non certo da propinare a livello enterprise a una grande azienda che lavora sui Big Data per esempio (in quel caso si usa Pyton). Quindi tutto l’applicativo del signor Wolf di fatto ci serve per analizzare qualcosa di J Query, vediamo in dettaglio, partendo dalle basi. Jquery funziona a contenitori annidati. All’ esterno incontriamo subito la funzione di rendering della pagina che non fa altro che caricare tutto prima di partire con le olimpiadi interne del codice (possiamo considerare tra loro le funzioni come atleti competitivi, c’è la parte di codice che leggerà i dati, c’è la parte di codice che farà scomparire e riapparire il form per la presa appuntamenti etc etc e tutto l’innumerevole resto):

$( document ).ready(function() {
console.log( “ready!” );
});

questa è una schematizzazione che incorpora non usato nella APP. Poi possiamo analizzare il meccanismo di materializzazione del FORM presa appuntamenti, in quanto anzichè mostrare i metodi hyde e show volendo seguiti anche dall’ animazione temporizzata e da un ritardo a livello di gestione usiamo il famoso INTERRUTTORE della luce TOGGLE, uno strumento che ha due valori booleani, vero o falso, acceso o spento:

$(‘.apt-addheading’).on(‘click’,function() {
$(‘.card-body’).toggle(300);
});

sostanzialmente abbiamo un contenitore o div che contiene il form di classe apt-addheading che quando sentirà il click esploderà con un elemento per renderlo a seconda dei casi visibile e invisibile, in questo modo possiamo addizionare i nostri impegni di giornata nella pagina. Poi per leggere i dati dobbiamo avere per forza una funzione e sappiamoc he jquery e ajax vanno molto daccordo:

$.ajax({
url: ‘js/data.json’
}).done(function(data) {
aptData = displayData = data;
listAppointments(displayData);
}); //ajax loaded

questo metodo attinge alla nostra banca dati di informazioni e grazie al caricamento della pagina che avviene come abbiamo detto grazie alla libreria jquery loadtemplate, possiamo sempre avere sotto gli occhi un pannello di controllo per usare al meglio l’arte del time management, con funzioni come:

$(‘#petList’).loadTemplate(‘appointment-list.html’, info, {
complete: function() {
$(‘.pet-delete’).on(‘click’, function() {
$(this).parents(‘.pet-item’).hide(300, function() {
var whichItem = $(this).attr(‘id’);
removeApt(whichItem);
$(this).remove();
});
}); //delete apt

poi abbiamo anche il nostro armadio di cravatte a disposizione con la libreria underscore che ad esempio ci permetterà di editare il codice dopo aver immesso il testo con il form agendo direttamente sulle parti in prosa visibili sulla pagina per modificarle (ricordiamo che la permanenza della modifica vale solo per la durata della sessione e verrà annullata senza memorizzazione dei dati json al momento di chiudere la finestra del browser):

$(‘[contenteditable]’).on(‘blur’, function() {
var whichID, fieldName, fieldData;
whichID = Number($(this).parents(‘.pet-item’).attr(‘id’));
fieldName = $(this).data(‘field’);
fieldData = $(this).text();
aptData[whichID][fieldName] = fieldData;
});

in questo modo le caselle di input avranno un testo editabile. Poi ci saranno molte altre funzioni perchè le cose da fare all’ interno di un applicativo come questo sono tante. Prendiamo solo la semplice questione del cliente che lascia il nostro studio con l’animaletto salvato da una gastrointerite acuta che va a rendere inutile un appuntamento: bisognerà pur eliminarlo con un metodo del tipo:

function removeApt(aptID) {
var whichApt = _.find(aptData, function(item) {
return item.id == aptID;
});
aptData = _.without(aptData, whichApt);
displayData = _.without(displayData, whichApt);
}

Da notare ancora una volta che gli underscore (tradotto letteralmente trattino basso) che si vedono qui sono tipici appunto della libreria https://underscorejs.org/ . In definitiva questa APP che fa tanto perchè con questo schema posso ricordarmi tutti gli appuntamenti della giornata volendo o fare delle liste di qualsiasi tipo e con cui posso intergaire per gestire al meglio il mio tempo e i miei impegni di fatto sotto la superficie del visibile si domostra straordinariamente complessa: è come vedere Nadal che regala un corsa un passante incrociato vincente, quella palla sembra scivolare dall’ altra parte della rete con una naturalezza che crea sconcerto. Qui è lo stesso, ma bisogna padroneggiare molto bene javascrpt e jquery e ovviamente tutto il mondo node dei comandi da finestra CMD per interagire a volte direttamente con le sorgenti primarie di librerie che si trovano in GIT. L’autopsia di web design umbria è terminata senza colpevoli, l’unico modo per imparare jquery é vedere come si comporta il codice dal vivo. Lo sa bene anche il sig. Wolf partorito in PULP Finction da Tarantino.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...