Discussione #5 Javascript 4 work - CalcoloIva.js x Sheets

MRPants

Helper
4 Gennaio 2015
288
34
258
269
Ultima modifica:
Unofficial_JavaScript_logo_2.svg.png
person-at-computer.jpg




Buongiorno a tutti utenza IFG , Valley stà facendo un ottimo lavoro in questa sezione insegnando l'utilizzo dei fogli shett
per compiere operazioni in ambito economico / commerciali , ebbene sappiate che in ambito aziendale IT , ma anche in ambiti amministrativi o gestionali ,
sono utilizzatissimi i fogli sheet con allegato tra le colonne dei piccoli script javascript per accellerare i vari processi automatizzando tutte quelle operazioni matematiche
che porterebbero via spazio e tempo inutile , ciò viene fatto sopratutto per generare tutti quei documenti commerciali che necessitano del calcolo finale della prestazione lavorativa e cioè l'aggiunta della tassazione.

Questa è un opportunità per noi e per l'utenza , nel mondo del lavoro chi riesce come figura professionale a velocizzare e a innovare le varie procedure è visto come una preziosa risorsa da tenersi stretti ,
pochi ci pensano ma essere una figura IT in un azienda anche piccola significa proprio questo.


Riuscire poi a far combaciare 2 strumenti utili come gli shett di google e qualche semplice funzione Javascript può portare un grande vantaggio ai colleghi , e non si tratta di fare chisà quante righe di codice ,
bastano poche righe messe con cognizione sapendo cosa si vuol andare a fare , per fare un esempio dove lavoravo per il calcolo dell'iva utilizzavamo questo sito https://www.calcolareiva.com/ .

sito.jpg




Già il fatto di utilizzare una risorsa online per una cosa così banale , significa che senza connessione non puoi andare avanti con il lavoro ( certo lo puoi fare con carta e penna ma voglio vedervi quando dovete preparare 150 documenti in una mattinata ) .


Fiducioso che questa iniziativa mia e di Valley avrà l'attenzione di chi vuole lavorare o già lavora , procedo con l'illustrarvi la creazione di questo semplice script.

Come prima cosa , nell'html noterete la presenza di un CDN ( Content Delivery Network ) a noi serve per richiamare la libreria Jquery rendendoci il lavoro più semplice


nell'header del nostro html andremo ad inserire questa riga di codice:




Jquery è una libreria javascript che si utilizza solitamente per compiere semplici azioni come l'invio di moduli o determinate operazioni al click del mouse ,
è il migliore a farlo perchè queste azioni sono possibili con poche righe di codice
grazie alla sua particolare funzione di manipolazione del modello a oggetti del documento (DOM).

Consiglio di dare una guardata a questo sito che spiega molto bene e in maniera sintetica l'argomento:

** jquery DOM - w3schools **


Con jquery oltre che la semplicità abbiamo modo di tenere un codice più 'pulito' e minimale , lo script necessita molte meno righe per essere funzionale.




Ora passiamo alla stesura del codice del nostro mini progetto , vogliamo andare a fare una tabella che permetterà all'utente di inserire 2 variabili :


ivato.jpg
L'imponibile , ovvero il costo della merce o dell'intervento per fare un esempio , sarà esentasse ,
è il costo effettivo del servizio che forniamo

ovviamente però non è ciò che andrà a pagare l'utente finale , bisognerà aggiungere anche il costo dell'IVA .
Ecco che nella seconda riga diamo la possibilità di andare ad inserire la percentuale dell'IVA ( valore mutevole nel tempo ) .

** In italia l'aliquota ordinaria è al 22% , ma se andiamo nello specifico per gli alimentari è al 4% , percentuali che andremo a inserite nella seconda casella.



Una volta inserite , premendo il pulsante calcola , il nostro script di ritorno ci darà la tassazione sul bene o servizio e il costo totale , ovvero l'imponibile più la tassazione .


Apriamo una nostra cartella in qui andremo a creare i 3 elementi del nostro 'programma'.

Screenshot from 2022-02-09 19-40-48.png


apriamo il foglio html per andare a scrivere il codice che andrà a definire la struttura:

html1.jpg



1.HTML


Sull'header andiamo ad inserire il titolo della nostra pagina e il nome del contenuto , apriamo il collegamento al foglio di stile css e richiamiamo il cdn di jquery per poter andare a scrivere la nostra funzione .


Sotto andiamo a definire la struttura del nostro 'calcolatore' , i dettagli come i margini , i colori o la disposizione degli elementi andremo ad approfondirli nel nostro foglio css , qui ci limitiamo a definire i pulsanti di inserimento con i loro relativi nominativi .

Dopo il form contenente il tutto andiamo a richiamare il foglio javascript con il nome_file inserito su "src" .

2.CSS


esempio di struttura basilare:


css1.jpg


css2.jpg


Il foglio css si può compilare a piacere , l'importante è che la struttura del tutto rimanga quella senza andare a mettere inutili complicazioni.



3.JAVASCRIPT


Per fare questa parte di script è necessario prima dare una riletta al funzionamento di questa libreria sul sito w3schools ,

**Javascript Functions -- w3schools.com

dopodichè procederemo con dichiarare le nostre 4 variabili :

javascript1.jpg



le prime 2 ovvero l'imponibile e l'iva saranno inseribili dall'utente ;

mentre le imposte saranno il risultato dell'imponibile moltiplicato per l'iva diviso 100 ,

e il costo totale della nostra spesa sarà dato dalla somma della tassazione più l'imponibile.


il risultato , ovvero le imposte e il totale saranno riportati poi come valori sul nostro calcolatore


sotto la dichiarazione delle variabili , troviamo riportate le nostre 2 variabili risultanti accompagnate dal metodo ToFixed()

il metodo javascript toFixed() ci servirà a formattare le cifre relative alle imposte e al totale.

ToFixed - w3schools.com



e il costo totale della nostra spesa sarà dato dalla somma della tassazione più l'imponibile e il tutto verrà

il risultato , ovvero le imposte e il totale saranno riportati poi come valori sul nostro calcolatore


in fondo allo script andremo a richiamare la funzionalità del pulsante "calcola" che fa partire il nostro script



Uno volta finito il risultato sarà questo :

ivato.jpg








molto minimale ma su un foglio sheets google che utilizziamo magari per comporre dei documenti di fatturazione ha il suo perchè , oltretutto ci permetterà di non dovere ricorrere a siti e quindi di poter lavorare velocemente anche offline.



ogni consiglio e idea e ben accetta , anche magari chi vuole provare a implementarlo su uno sheets può pubblicare a seguire .


Su github trovate i file completi relativi a questo progetto :

https://github.com/BragaVR/IVA_calculator
 
  • Love
Reazioni: Valley
Ho fatto due versioni:
  • La prima è con Apps Script (Javascript), si inseriscono le informazioni, si preme il bottone e aggiorna i campi Imposte e Totale. Si può fare che aggiorna in automatico all'inserimento di un valore ma secondo me va bene così.
  • A destra ho messo quello che farei io, una semplice formula di Google Sheet, per le Imposte =F3*F4, per il Totale =F5+F3. L'IVA è già impostata come percentuale (%) quindi se scrivo 22 quando fa il calcolo considera 0,22.
Diciamo che per un conto del genere userei la formula e basta.

Comunque bello, non avevo mai pensato ad utilizzare semplici siti in locale per fare queste cose. È geniale per quando si è senza wifi a lavoro. Non so perché non ci ho mai pensato :V



Schermata 2023-01-09 alle 02.08.14.png



Comunque tornando alla parte che chiedevi (collegamento ad Apps Scripts), io l'ho fatto così:
Clicca qui per accedere al file (puoi creare una tua copia)

JavaScript:
function calcola() {

  var ss = SpreadsheetApp.getActiveSpreadsheet();  
  var imponibile = ss.getSheetByName('Foglio1').getRange("C3").getValue();
  var iva = ss.getSheetByName('Foglio1').getRange("C4").getValue();
  if(isNaN(imponibile) || isNaN(iva)){

    return false;

  }else{

    var imposte = imponibile * iva;
    var totale = imponibile + imposte;

    ss.getSheetByName('Foglio1').getRange("C5").setValue(imposte).setNumberFormat("0.00");
    ss.getSheetByName('Foglio1').getRange("C6").setValue(totale).setNumberFormat("0.00");

    return true;

  }
}
 
  • Love
Reazioni: MRPants
Ho fatto due versioni:
  • La prima è con Apps Script (Javascript), si inseriscono le informazioni, si preme il bottone e aggiorna i campi Imposte e Totale. Si può fare che aggiorna in automatico all'inserimento di un valore ma secondo me va bene così.
  • A destra ho messo quello che farei io, una semplice formula di Google Sheet, per le Imposte =F3*F4, per il Totale =F5+F3. L'IVA è già impostata come percentuale (%) quindi se scrivo 22 quando fa il calcolo considera 0,22.
Diciamo che per un conto del genere userei la formula e basta.

Comunque bello, non avevo mai pensato ad utilizzare semplici siti in locale per fare queste cose. È geniale per quando si è senza wifi a lavoro. Non so perché non ci ho mai pensato :V



Visualizza allegato 67650


Comunque tornando alla parte che chiedevi (collegamento ad Apps Scripts), io l'ho fatto così:
Clicca qui per accedere al file (puoi creare una tua copia)

JavaScript:
function calcola() {

  var ss = SpreadsheetApp.getActiveSpreadsheet(); 
  var imponibile = ss.getSheetByName('Foglio1').getRange("C3").getValue();
  var iva = ss.getSheetByName('Foglio1').getRange("C4").getValue();
  if(isNaN(imponibile) || isNaN(iva)){

    return false;

  }else{

    var imposte = imponibile * iva;
    var totale = imponibile + imposte;

    ss.getSheetByName('Foglio1').getRange("C5").setValue(imposte).setNumberFormat("0.00");
    ss.getSheetByName('Foglio1').getRange("C6").setValue(totale).setNumberFormat("0.00");

    return true;

  }
}


Hai fatto un ottimo lavoro , e penso sia meglio con appscript per fare una sorta di stand-alone all'interno dello sheet , perchè per esperienza personale a livello lavorativo quando si condivide un foglio di calcolo in un server in comune con i colleghi trovi sempre quello che sputtana le formule e non segnala la cosa , quindi molto meglio con appscript se permette di implementarlo direttamente .

lavoro egregio , potremmo farne altri in cui io ti porto lo script in javascript e tu lo converti con appscript.

fammi sapere , sarei anche curioso ( e penso possa tornare utile ad altri ) che cosa hai utilizzato per imparare AppScript , sul forum lhai presentato molto bene ma non hai approfondito quelle risorse per imparare bene l'utilizzo .

chiedo da profano : esiste qualcosa tipo w3school?


ancora un ottimo lavoro , grande Valley :myeah: :myeah: :myeah:
 
Hai fatto un ottimo lavoro , e penso sia meglio con appscript per fare una sorta di stand-alone all'interno dello sheet , perchè per esperienza personale a livello lavorativo quando si condivide un foglio di calcolo in un server in comune con i colleghi trovi sempre quello che sputtana le formule e non segnala la cosa , quindi molto meglio con appscript se permette di implementarlo direttamente .

lavoro egregio , potremmo farne altri in cui io ti porto lo script in javascript e tu lo converti con appscript.

fammi sapere , sarei anche curioso ( e penso possa tornare utile ad altri ) che cosa hai utilizzato per imparare AppScript , sul forum lhai presentato molto bene ma non hai approfondito quelle risorse per imparare bene l'utilizzo .

chiedo da profano : esiste qualcosa tipo w3school?


ancora un ottimo lavoro , grande Valley :myeah: :myeah: :myeah:
Volentieri, tu pubblica ed io converto eheh.

Comunque la doc è questa. È estremamente simile a Javascript vero e proprio quindi ho semplicemente sfruttato quelle poche basi che ho e guardando la doc cercato di capire come funzionava.

Di per se c'è da selezionare lo spreadsheet da usare
SpreadsheetApp.getActiveSpreadsheet();
Poi lo sheet
ss.getSheetByName('Foglio1')
Poi i dati che servono selezionando la cella
getRange("C3").getValue()
Da qui con i dati fai quello che vuoi in javascript.

In fine quando vuoi inserire i dati sullo sheet dovrai rifare i passati ma al posto di getValue() si utilizza .setValue() :)
 
Bene così, onestamente serve un minimo di guida, ho visto tantissima gente usare il JS di merd* creando contenuti pesanti come pochi

si cè tanto pressapochismo nelle realtà lavorative italiane , non sai quanti ho visto diventare i "developer" dell'ufficio facendo copia/incolla da stack overflow , ma la minestra è questa che ci piaccia o meno :addio:
 
  • Mi piace
Reazioni: nfvblog
si cè tanto pressapochismo nelle realtà lavorative italiane , non sai quanti ho visto diventare i "developer" dell'ufficio facendo copia/incolla da stack overflow , ma la minestra è questa che ci piaccia o meno :addio:
tra l'altro senza capirlo, copiano codice dubbio senza mai verificare se il tutto funzioni correttamente