Linux Pro N.222 - Dicembre 2023 - Gennaio 2024

JQuery Ha ancora senso usarlo? Scoprilo con noi!
NEL
WEB
DVD le istruzioni
istruzion
zion
a pagina 4
Fedora 39 Workstation
onii
Clonezilla 3.1.1-27
FreeBSD13.2
Garuda Linux
PipeWalker
Ferdium 6.6.0
Furnace 0.6
L’unica guida libera al mondo dell’Open Source PRO Touché 2.0.10

FeedDeck 1.1.0
e molto altro...
COPIA & VENDI

LA TUA APP
Fai soldi con un tuo progetto partendo dalla code base che ti diamo
Ti regaliamo
noi il codice!
TARIFFA R.O.C. - POSTE ITALIANE SPA - ABB. POST. - D.L. 353/2003 (CONV. IN L. 27/02/2004 N. 46) ART. 1, COMMA 1, S/NA - DISTRIBUTORE: PRESS-DI, SEGRATE
Sfrutta le API di Maps pagando solo centesimi a Google

Pubblica il tuo sistema per creare un itinerario per i viaggi
Personalizza l’app per gestire pagamenti ricorrenti sulla carta di credito
Ecco la nuova versione

di Fedora, la distro
8,4 GB per tutti i gusti
DI SISTEMI
OPERATIVI
E APP! La telecamera con il braccio
SISTEMA DI SICUREZZA DAVVERO SMART
Costruisci una sentinella in grado di raccogliere
oggetti in remoto con Arduino o Rasperry Pi
NUOVO!ICARE
R
2 DVD DA SCOADICE Pagine Web ricche senza codice
CON IL C IN Ecco i plug-in Open più potenti per JavaScript
ALL’INTERNO ER TE
ES CLUS IVA P con cui fornire siti completi di ogni funzionalità
senza neanche dover saper programmare
Bimestrale - N.222 - 7,90 €

Hardware Programmi
Arriva la Raspberry Pi 5! Flatpak sempre più facile
Più velocità e potenza per Con Warehouse la gestione
la scheda più amata dai maker dei pacchetti è semplicissima
P.I. 07-12-2023 Dicembre-Gennaio
SPECIALE
IN EDICOLA
DAL
DAL 10 AGOSTO
UN VOLUME DA COLLEZIONE PER CHI

NON HA MAI DIMENTICATO I MITICI
VIDEOGIOCHI DEGLI ANNI 80
Scansiona il QR Code
Acquistala su www.sprea.it/giochi80
disponibile anche in versione digitale
AC retrogamer 4_anni 80_210x285_senza data.indd 1 13/11/23 15:04

Editoriale
Costruire un’app come un professionista

In tutti i numeri vi diamo informazioni end e persino come sfruttare API a
importanti non solo su come usare Linux pagamento risparmiando il più possibile e
e l’Open Source per il vostro tempo libero dando al tempo stesso ai vostri utenti il miglior
ma anche per il lavoro. Spesso vi abbiamo prodotto possibile. Al termine della lettura
raccontato come ottimizzare i vostri server di questo numero avrete davvero di che
e come renderli inattaccabili. Vi abbiamo sbizzarrirvi! Troverete poi molto altro come
spiegato come installare gli aggiornamenti sempre, da consigli sulla steganografia fino
giusti e come gestire la rete. Questo mese è alla gestione semplicissima dei pacchetti
il turno di un aspetto creativo e remunerativo: Flatpak grazie a uno strumento davvero
quello di creare applicazioni Web. Vi aiuteremo utilissimo. E allora siete tutti pronti a creare
a comprendere questo mondo con un app di successo e farne un business? Si parte!
supporto senza precedenti: non solo andrete
dal capire come creare un diagramma di flusso La redazione di Linux Pro
per strutturare un’app fino a crearne una
completa ma vi daremo anche il codice da JQuery
Ha anco
ra sens
cui partire. Vedrete con noi come scegliere

o usar
lo? Scop
rilo co
n noi!
NEL
WEB
lo stack tecnologico migliore per le vostre DVD
Fedora
39 Work
le istruzion
zioni
a paginaonii
4
esigenze, come servire dati con Node.js o

Clonezilla station
L’unic a 3.1.1-27
guida lib FreeBSD
13.2
era al mo Garuda
COPIA & V PRO

Linux
ndo de PipeWalker
ll’Open Ferdium
Source Furnace
6.6.0
PHP, come usare JavaScript per servire il front

0.6
LA TU ENDI T
Touché
2.0.1
FeedDeck 0
1.1.0
e molto
altro...
A APP
Da non perdere su questo numero...
Fai soldi con i regalia
noi il co mo
un tuo pro
E
getto parten
DI, SEGRAT
Sfrutta le do dalla cod

API di Ma
Pubblica ps pagand e base che
dice!
: PRESS-
il tuo sist o solo cen ti diamo

ema tesimi a Go
DISTRIBUTORE
Personaliz
za l’app per per creare un itin ogle
gestire pag erario per
amenti rico i viaggi
1, S/NA -
rrenti sull
a carta di
08 Cover Story
ART. 1, COMMA
credito
Ecco la
004 N. 46)
nuova
8,4 di Fedora, versione
DI SIS GB
IN L. 27/02/2
la
OPER TEMI per tutti distro
E APAT IV
P! I
i gusti
03 (CONV.
Copia e vendi la tua app!

- D.L. 353/20
POST.
La teleca
ecam
me
SPA - ABB.
SISTEMA era
ra conn ilil
DI SICU REZ
b acc
br
bra
ac ccc
cci
ccio
ciiioo
ci una sent ZA DAV VER
Costruis
ITALIANE
O
NUOVO! in remoto inella in grado SMART
oggetti
Scoprite come creare applicazioni interessanti

2 DVD DA SCARIC di raccoglie
R.O.C. - POSTE
con Ardu
CON IL CODIC ARE ino o Ras
perry Pi
re
ALL’INTERNO E
ESCLUSIVA PERIN Pagine
TARIFFA
TE
Web ricch
abbastanza da essere vendute e solide a sufficienza

Ecco i plug e senza
-in Open
Bimestrale
con cui
forn più pote codice
- N.222
- 7,90 € senza nea ire siti complet nti per JavaScript
nche dov i di
er saper ogni funzionalità
program
per garantirvi massima scalabilità!

Hardwa mare
P.I. 07-12- Arriva la re
2023 Dicem
bre-Gennaio
Ras
Più velocità pberry Pi 5!
la scheda e pote Progra
COP_001_L
XP222_cover più ama nza per Flatpak mm i
ta dai mak
.indd
er sem
Con War pre più faci
1
ehouse
dei pacchet le
ti è semla gestione
plicissim
a
58 Flatpak facili con un’interfaccia grafica 13/11/2023

15:57:53
Uno strumento efficiente e completo per gestire

ogni aspetto dei propri programmi, anche
in gruppo, senza usare la riga di comando
NOI RISPETTIAMO L’AMBIENTE!
60 Robot con braccio mobile e telecamera Linux Pro è stato stampato
Mobilità e un braccio con quattro gradi di libertà su carta certificata PEFC,
per questo robot controllato da PC e basato proveniente da piantumazioni a
su Arduino Nano RP2040 riforestazione programmata e perciò
gestite in maniera sostenibile
CONTATTI
Domande alla redazione: redazione@linuxpro.it
Abbonamenti e arretrati: abbonamenti@sprea.it
Problemi con il DVD: aiutocd@sprea.it
Sito Web: www.linuxpro.it
Oppure inviate le vostre lettere a:
Linux Pro, Sprea S.p.A.,
Via Torino 51, 20063 Cernusco S/N
Telefono: 02.92432.1
LINUX PRO 222 1

Sommario
Sommario LINUX
LINUX PRO 222
PRO
Benvenuti nel duecentoventiduesimo numero di Linux Pro, la guida definitiva a Linux e al mondo Open Source
Cover story
COPIA & VENDI

LA TUA APP
Scoprite come creare applicazioni interessanti
8 abbastanza da essere vendute e solide a sufficienza
per garantirvi massima scalabilità!
ABBONATI ALLA
VERSIONE DIGITALE
E
SOLO PER PC E MAC
A SOLI 16,90 €
DURATA ABBONAMENTO 1 ANNO
20 Pianificare gli itinerari al meglio www.sprea.it/digital

2 LINUX PRO 222
Sommario
04 Guida DVD 58 Flatpak facili con

RO
LINUXCPO LA
I programmi e le distro contenuti
È IN EDI
06 News
un’interfaccia grafica
Uno strumento efficiente
ILL 10 DEI MESI P
ARI
Tutte le novità dal mondo Linux e completo per gestire ogni
aspetto dei propri programmi,
Cover Story anche in gruppo, senza usare
la riga di comando
IL DVD IN BREVE
IL DVD IN BREVE
08 Copia e vendi la tua app! LATO A
Scoprite come creare applicazioni 60 Robot con braccio ∆ DESKTOP

DISTRIBUZIONI
DVD A
∆ Mednafen
Fedora 19 (320.9.28
bit)
interessanti abbastanza da mobile e telecamera ∆ Parcellite 1.1.3
DISTRIBUZIONI
essere vendute e solide a
sufficienza per garantirvi Mobilità e un braccio con quattro ∆ DISTRIBUZIONI
massima scalabilità! gradi di libertà per questo robot ∆ Mageia 3 (32 bit)
controllato da PC e basato Fedora 39

∆ Sophos UTMServer
su Arduino Nano RP2040
Approfondimenti o Raspberry Pi Pico W
∆ Untangle
LATO
∆ GIOCHI
B 9.4 (32 e 64 bit)
DISTRIBUZIONI
20 Pianificare gli itinerari
WEB
∆ PokerTH
Deft 8 1.0.1
al meglio 66 Sfruttare la potenza ∆ INTERNET
∆ IPFire
∆ Firefox
2.13
Salix Xfce
21 14.0.1
Come creare una Web
app per programmare al minuto di un veterano ∆ GIOCHI 1.3.4d
∆ ProFTPD
tutti gli spostamenti sfruttando jQuery ha ancora molte frecce ∆ PROGRAMMAZIONE

∆ Ayon
l’API di Google senza spendere al suo arco e capirne ∆ RIVISTA 1.60.1

∆ CPPCheck
un capitale funzionamento e funzioni ∆ GTKDialog

Codice d’esempio
0.8.3 ∆ LiteIDE
Android
DVD
principali è molto utile a chiunque ∆Codice
∆ RIVISTAd’esempio
28 Il messaggio si cela lavori su siti in JavaScript Raspberry
∆ Ardour3 3.2 ∆ Avogadro
tra i pixel 1.1.0

∆ Codice d’esempio Ruby
Come nascondere informazioni
testuali, audio, immagini e file
Accademia ∆ Codice tutorial
Sysadmin
d’esempio Android
∆ Codice tutorial Ruby
all’interno di uno o più video. 68 Pasti sempre sotto ∆ Erebus

BurgerSpace
∆ FatRat 1.9.2
1.2.0 beta2
Magia della steganografia! controllo con l’app DVD B
∆ Safe-rm
NetHogs0.10 0.8.0∆ Xowa 0.6.2
Recensioni Organizzare cosa mangiare può

essere noioso e dispendioso in
∆ Plan
OCRFeeder
9 ∆ Raspbian
DISTRIBUZIONI
∆ Arch
PushOver
0.7.1
Linux0.0.5
RP
32 Software e hardware termini di tempo: progettate una Clonezilla
∆ Android
QMMP 3.1.1-27
0.7.1
RP ∆ Risc OS
soluzione che semplifica la vita! FreeBSD 13.2

38 Da non perdere LATO B
∆Garuda
44 I test del mese 70 Fate risparmiare soldi DISTRIBUZIONI
∆ Linux Mint 15 Cinnamon
NetBSD 10.0
ai vostri utenti ∆ Linux Mint 15 Mate
Tutorial Create una Web app per tenere

RIVISTA
52 Creare un’app diario traccia dei pagamenti ricorrenti,
partendo dalla struttura PipeWalker
per i ristoranti e arrivando a pubblicarla
Tutti mangiamo fuori e ci piace Ferdium 6.6.0
ricordare dove siamo stati: ecco
come creare un’app per tenere 78 L’eco dei LUG Furnace 0.6
traccia delle uscite La mappa dei LUG italiani
JQuery Ha ancora senso usarlo? Scoprilo con noi!

Prova la
Prova la tua
tua rivista
rivista anche
anche in
in dioitale
digitale
NEL
www.linuxpro.it/abbonamenti
WEB
DVD
D le istruzioni
ionni
a pagina 4
Clonezilla 3.1.1-27
FreeBSD13.2
Garuda Linux
PipeWalker
Ferdium 6.6.0 CSS Programmare
da pro
i fogli
stile per
il Web
Furnace 0.6
NEL
WEB
DVD
D le istruzioni
PRO
a pagina
in 4
Debian 12
Fatdog64
Cover story 1.000 server a costo zero

L’unica pfSense
2.7.0
guida libera Q4OS 5.2
al mondo Peppermint
OS
dell’Open Tails 5.15.1 2023-07-01
Touché 2.0.10 1.000 SERVER PRO

Source Sniffnet
Bavarder
e molto altro...
A COSTO
L’unica guida libera al mondo dell’Open Source FeedDeck 1.1.0
Virtualizza
tutto, dal
Scopri i trucchi desktop all’ambiente
ZERO
SEGRATE
per diventare di sviluppo!

Sviluppa in
PRESS-DI,
Python senza un maestro

di VirtualBox
10 pagine su più errori di Sfrutta gratis
DISTRIBUTORE:
Docker: dai dipendenze

container imperdibili e compatibilità tecnologia la
a come creare colossi del dei
1, S/NA -
il tuo
cloud!
1, COMMA
e molto altro...
N. 46) ART.
Debian 12
8,8 GB è perfetta
L. 27/02/2004
DI SISTEMI
per business
OPERATIVI professionisti!e
2
(CONV. IN
E APP!
- D.L. 353/2003
COPIA & VENDI

Crea la tua
CLASSIFICAZIONEIA
POST.
pe le ffoto
per oto
SPA - ABB.
DI
oggetti e IMMAGINI
Riconosci
dispositivo animali con
ITALIANE
da meno
NUOVO! di 15 euro! un
2 DVD DA SCARICARE
R.O.C. - POSTE
CON IL CODICE
ALL’INTERNO
ESCLUSIVA PERIN L’Open
L’Ope
Op Source
TARIFFA
TE
Dagli strumenti salva le vite!
Bimestrale open ai tumori
- N.220
- 7,90 €
tempo dall’Intelligenza
trovati per
rivoluzione Artificiale,
della medicina ecco
Sistema
Si
operativo grazie a Linuxla
P.I. 10-08-2023 Distribuzioni
Dis
Agosto-Settembre
I segreti delle immutabili Programmazione
si
sicure: distro 100%
I trucchi per usare

sono il futuro Crea videogiochi
COP_001_LXP220_cover.indd di Linux
1 Con Godot arcade
videogame programmare
è Open e
facilissimo
Speciale
20/07/2023
02:56:37
Speciale
LA TUA APP al massimo VirtualBox

perfetta per gli ambienti critici. Garantisce inoltre
Ti regaliamo prestazioni affidabili e costanti, impedendo

modifiche accidentali o configurazioni errate.
Poiché gli OS rimangono invariati dopo ogni
riavvio, si riduce la possibilità di problemi
a perdita della vista o persino alla cecità se non
individuata per tempo e trattata adeguatamente.
Secondo l’International Diabetes Federation, nel
2021 circa 537 milioni di adulti di età compresa
noi il codice! imprevisti o di guasti al sistema. Ciò è

particolarmente importante in ambienti in cui i
tempi di attività e la stabilità sono fondamentali,
come i server o i sistemi embedded. Inoltre, con La base della virtualizzazione è l’emulazione di altri OS: tutti sanno cos’è
tra i 20 e i 79 anni erano affetti da diabete a
livello globale, ovvero circa 1 adulto su 10. Si
prevede che questo numero salirà a 643 milioni
nel 2030 e a 783 milioni nel 2045. Una persona
una distro immutabile il processo di manutenzione con diabete su tre in media sviluppa la retinopatia
Fai soldi con un tuo progetto partendo dalla code base che ti diamo e aggiornamento diventa più semplice ed VirtualBox ma chi ne conosce davvero i segreti? Eccoli! e poter fare screening di massa permetterebbe di
efficiente. Invece di applicare patch o individuare molti più casi nelle fasi iniziali
aggiornamenti direttamente al sistema in fermando la malattia, ma farlo fare manualmente
Sfrutta le API di Maps pagando solo centesimi a Google esecuzione, si crea una nuova istanza dell’OS con a dei medici richiederebbe risorse elevatissime e
on si può parlare di virtualizzazione di sistema, l’acquisizione di un’istantanea fornisce non disponibili a livello globale.
N
gli aggiornamenti necessari. In questo modo si
Pubblica il tuo sistema per creare un itinerario per i viaggi garantisce uno stato pulito e coerente del sistema senza dedicare una buona fetta della una rete di sicurezza. Se qualcosa va storto o non
a ogni aggiornamento, riducendo al minimo il conversazione a VirtualBox. Il software si è soddisfatti delle modifiche, si può facilmente Collaborazione tra medici e tecnici
Personalizza l’app per gestire pagamenti ricorrenti sulla carta di credito rischio di conflitti o problemi di compatibilità.
libero e gratuito di emulazione di sistemi operativi tornare allo snapshot precedente, ripristinando
Per insegnare all’Intelligenza Artificiale di Google
a interpretare con precisione le scansioni della
Inoltre, se si verificano inconvenienti durante il I cambiamenti
processo di update, è possibile ripristinare
p g
garantisce e che ogni
ogg parte del sistema sia a prova
Fedora Silverblue è un classico che la maggior parte degli utenti la macchina virtuale com’era. Le istantanee sono retina è stato necessario creare un set di dati Alphabet specializzata nel settore sanitario, per nella rete di vasi
offre un’esperienza
facilmente l’istanza precedente
precedentte del sistema di manomissione
manom missione e possa essere aggiornata simile a quella Linux conosce già e non servono lunghe uno strumento prezioso per la sperimentazione, specifico. Dei team di oftalmologi hanno dovuto affrontare le questioni normative e cliniche e sanguigni nella
suddividere un numero molto elevato di scansioni in ottenere l’approvazione dell’ARDA come dispositivo parte posteriore
un’opzione
operativo, il che offre un’opzio one di rollback molto in modo indipendente.
in
ndipende Permette inoltre di isolare che si ha introduzioni. Però chi sa davvero sfruttarne tutte i test e la garanzia di stabilità del sistema. C’è poi dell’occhio possono
pratica. Un ultimo, importante aspetto è che le e le applicazioni,
applicaz zioni, assicurando
asss che abbiano accesso utilizzando Fedora base al grado di gravità della retinopatia per medico. Sarà simile a un termometro o un
Workstation. le caratteristiche per usarlo al meglio? Abbiamo la compressione del disco virtuale: VirtualBox consentire al modello di assimilare le sfumature glucometro utilizzato da chi ha il diabete per
indicare la presenza
distro immutabili offrono vantaggi
vanttaggi in termini ni di
termini di soloo ai
ai dati
datti che devono
dee gestire. Per capire più nel di varie condizioni
Ecco la nuova versione quindi trovato le funzioni più utili che non tutti fornisce un’utility chiamata VBoxManage,
QUANDO
Q UAND
UA NDO
NDO
D OL
L’I
L’
L’IA
IA
Fedora ha altre due necessarie a interpretarle. Inizialmente, il team di monitorare il livello di zucchero nel sangue.
IL BOOM DELLE
scalabilità e riproducibilità, soprattutto
sopprattutto in n ambienti
nti dettaglio
dettagli
detta aglio c
cosa popossiamo
os aspettarci da una cardiovascolari.
versioni immutabili:
di cloud computing o containerizzati.
containeerizzat Creando
C eand distribu
di tribuz
uz one di questo
distribuzione qu tipo, vediamo alcuni Kinoite e Sericea conoscono e che danno gran valore aggiunto che consente di comprimere i dischi virtuali, Google ha ricevuto supporto dagli oftalmologi degli Il team di Google ha
di Fedora, la distro e le abbiamo unite a quelle più diffuse ma che riducendone le dimensioni. Nel corso del tempo, ospedali Aravind e Sankara Nethralaya, in India, L’apprendimento profondo sul campo sviluppato algoritmi
8,4 GB
nuove istanze del sistema operativo
opeerativ per
per ogni progetti
dei proget
dei proge i più im importanti
m sul mercato. per analizzare le
deployment, diventa più facile e scalare
sca a
are
ree in
n basee alla
alla
a addestrando il modello a riconoscere alcuni segni Nel progetto di Google del 2018 (https://bit.
per tutti i gusti domanda. Ciò semplifica la gestione
gestione di di Tre
Tr
Tre
re d
distro
iis
istr
stro per
er F
Fedora
Fe
vale la pena di approfondire meglio per capirne quando si apportano modifiche e si eliminano file chiave della retinopatia diabetica, come danni ly/3POZR39), utilizzando algoritmi di
immagini della
retina e identificare
DI SISTEMI deployment su larga scala e garantisce
garant sc cee ambienti
am
ambi
bieenti
en
nti Feddora
ora
ora S
Fedora Si verblue
Silverblue e è un sistema operativo
il valore vero. all’interno della macchina virtuale, il disco virtuale ai tessuti nervosi, gonfiore ed emorragia. In seguito apprendimento profondo (deep learning) addestrati indicatori di rischio
FA LA
LA DIAGNOSI
DIA
DI
D IAGNOSI
IA
OPERATIVI
DISTRO IMMUTABILI
LI
coerenti e riproducibili tra le ddiverse istanze.
iverse isstan
tanze.
e imm
im
mmmuutab
tab e che utilizza
immutabile ut l’ambiente desktop potrebbe non ridursi automaticamente è stato coinvolto il sistema EyePACS, una rete sui dati di 284.335 pazienti, i ricercatori sono stati in
E APP! L telecamera
La telecam
t l era conn il br
braccio
bracc
bbracci
brac
rac
raccio
acci
ccio
cc
ciioo
ci Gnome
Gnoome L’aspetto,
Gnome. L’a
aspetto o, la funzionalità e il Gestire la macchina virtuale per riflettere il nuovo utilizzo dello spazio. statunitense di telemedicina che ha condiviso
un ampio database. È stato inserito oltre un milione
grado di prevedere i fattori di rischio cardiovascolare
dalle immagini della retina con un’accuratezza
1.000 SERVER
Container
Cont
tainerr e sand
sandbox
dbox
x in primo
priim
moo pi
pia
piano
iaan
ian
ano
no com
comp orta
ammento sono
comportamento s quelli di un normale sistema Cominciamo dagli snapshot: sono una potente La compressione del disco aiuta a ottimizzare di classificazioni per addestrare il modello di IA. sorprendentemente elevata per i pazienti di due serie
SISTEMA DI SICUREZZA DAVVERO SMART L’architettura di una distribuzio
distribuzione
one immutabile
immmutab lee operativo
op desktop
erativo deskto p e l’esperienza è simile a quella funzione di VirtualBox che consente di catturare l’uso dello spazio recuperando quello inutilizzato L’obiettivo principale del team era trasformarlo di dati indipendenti di 12.026 e 999 soggetti. Per
ruota attorno ai concetti di co ntainerizzazione
zzazion
containerizzazione utilizzando
che si ha u
utilizzan nd Fedora Workstation. Le
Costruisci una sentinella in grado di raccogliere e sandbox. Utilizzando ambienti
ambien nti di virtualizzazione applicazioni
oni grafiche
applicazio grafic c vengono installate tramite lo stato attuale di una macchina virtuale e di all’interno del disco virtuale, con uno sfruttamento in un dispositivo per l’analisi automatica di malattie esempio, l’algoritmo è riuscito a distinguere le
oggetti in remoto con Arduino o Rasperry Pi salvarlo come istantanea. Questo include l’intera più efficiente dello storage sul sistema host. retiniche chiamato ARDA (Automated Retinal immagini retiniche di un fumatore da quelle di un
come Docker e LXC (abbrevia
(abbreviazione
Containers), ogni componente
azione di Linux
e del sistema viene
Flatpak, che
e consente
c le tienee separate dal sistema di base
tie
consentte un controllo
con minuzioso dei loro configurazione del sistema, lo stato del disco, Compattando periodicamente i dischi virtuali,
Nuove frontiere dell’apprendimento
ll’apprendimento profondo pe permettono
ermettono di salvare vite Disease Assessment). Poiché nessuno nel team non-fumatore nel 71% dei casi. Oltre a riconoscere i
Stanno diventando sempre più popolari e molti ritengono che inserito in una sandbox sicura. Ciò consente permessi.. Se programmate,
prog g apprezzerete l’utility la memoria e i processi in esecuzione. Prima di è possibile liberare spazio e ridurre con l’identificazione precoce delle d malattie e facilitando il lavoro dei medici
aveva esperienza nella creazione di un dispositivo
medico, si sono rivolti a Verily, una società di
vari fattori di rischio (età, sesso, fumo, pressione
sanguigna, ecc.) dalle immagini retiniche, il loro
di creare ambienti isolati in cui ogni componente Toolbox, che utilizza
c utiliz z i contenitori per fornire un
A COSTO ZERO
! rappresentino il futuro di Linux, ma cosa le rende così speciali? è autonomo e permette al sistema di eseguire ambiente in cui in installare
n e utilizzare strumenti di
apportare modifiche significative alla macchina potenzialmente la dimensione complessiva dei file
NUOVO virtuale, come l’installazione di aggiornamenti, di della macchina virtuale. Infine abbiamo la
E Pagine Web ricche senza codice applicazioni non affidabili senza compromettere librerie.
sviluppo e librerie e Toolbox consente di
nuovo software o la modifica delle configurazioni gestione a riga di comando. Sempre con
I MECCANISMI DI ATTENZIONE NEL DEEP LEARNING
2 DVD DA SCARICAR la sicurezza generale della macchina. Questo organizzare
organizza strumenti
re gli strr di sviluppo per progetto giugno Sundar Pichai,
ai,
a apprendimento
ndimento automatico, l’IA di
appren non è però l’unica applicazione
CON IL CODICE
A
econdo le dichiarazioni del embedded, l’IoT e l’esecuzione di sistema operativo principale e e l’una
S
CEO di Google e della a Google e è in grado di identificare segni dell’Intelligenza Artificiale alla Le tecniche di attenzione o elementi all’interno di una sequenza il rilevamento di oggetti, la
IN
ALL’INTERNO TE
Ecco i plug-in Open più potenti per JavaScript team di Fedora, le varianti container, ma possono essere una dall’altra, tipicamente attraverso
erso la sua casa madre Alphabet, abet,
a e pattern
patte ern sottili legati alla salute diagnosi delle malattie, un campo in nell’Intelligenza Artificiale e in base alla loro rilevanza reciproca. classificazione e didascalizzazione
ESCLUSIVA PER con cui fornire siti completi di ogni funzionalità immutabili rappresentano soluzione vincente anche come distro containerizzazione. In questo to modo I LIMITI DEI SISTEMI OPERATIVI IMMUTABILI
IMMUT
TABIL
L ha annunciato uno sviluppo
iluppo cardiovascolare
cardiov vascolare analizzando immagini grande espansione che potrebbe nell’apprendimento profondo sono Per attività come l’elaborazione del di immagini e la loro segmentazione,
la maggior parte delle di uso quotidiano e per i server. le modifiche apportate da una na rivoluzionario nel campo della salute
alute
a dettagliate
dettaglliate dell’occhio. Come cambiare il futuro di tutti. meccanismi che consentono ai modelli linguaggio naturale, in cui il modello sfruttate in alcune delle applicazioni
senza neanche dover saper programmare versioni di Fedora Linux in uso. applicazione non possono influenzare
fluenzare cardiovascolare. Utilizzando approfondiremo
approfo ondiremo in seguito, l’algoritmo di concentrarsi su parti o deve essere in grado di comprendere diagnostiche presentate in questo
La prossima release di supporto a
lungo termine di Ubuntu offrirà quasi
Cosa sono nella pratica
Una distro immutabile è un sistema
il sistema centrale o altri programmi.
ogrammi. Se da un lato le distribuzioni immutabili offrono numerosi vantagg
vantaggi,
delle sfide associate alla loro implementazione, tra cui meno fless
ggi, dall’al
dall’altro
La virtualizzazione è una tecnologia in costante evoluzione: scoprite come trarne
lt vi sono anche
sibilità e possibilità di personalizzazione.
flessibilità
l’Intelligenza Artificiale (IA) per
analizzare le scansioni oculari, la a
di intelligenza
intelligenza artificiale è stato
addestrato
addesttrato su un ampio dataset
Retina
Rettin
na e di
diabete
iabete
te
La tecnologia di Google nasce
caratteristiche specifiche dei dati
in ingresso. Mirano a migliorare la
i collegamenti tra le varie parole, è
fondamentale. Un’altra tecnica diffusa
articolo. I meccanismi di attenzione
possono anche essere combinati
I vantaggi che offrono
Hardware Programmi
certamente una build immutabile,
basata solo su Snap, in aggiunta a
operativo progettato per essere
inalterabile e in sola lettura. Una volta Uno dei principali vantaggi dell’utilizzo
ell’utilizzo
Gli utenti non possono infatti modificare i file di sistema nella stes
distribuzione tradizionale e questo può essere penalizzante per chi
ssa misu
stessa
c è abit t
abituato il massimo per risparmiare e migliorare l’efficienza dei vostri server
u in cui possono farlo con una
misura
alla libertà offerta da Linux.
tecnologia di Google è ora in grado ado
a
di prevedere gli eventi cardiovascolari,
scolari,
s
e ha mostrato
mostrato un tasso di accuratezza
del 70% % nella previsione di attacchi
da un progetto condotto cinque anni
fa da un team di ricercatori di Google
capacità del modello di concentrarsi
sulle informazioni rilevanti, filtrando
è l’attenzione spaziale, spesso utilizzata
nei compiti di computer vision.
con le reti neurali ricorrenti (RNN).
In questo approccio, il meccanismo
quelle classiche e molte altre distro installato l’OS, i file e le directory di dei sistemi operativi immutabili
abili Possono inoltre verificarsi problemi di compatibilità con le applicazioni
applicaazioni e i servizi, in particolare con il come per esempio l’infarto. Potrebberrebbe cardiaci
cardiac ci ed eventi cardiovascolari, e dell’Aravind Eye Hospital in India invece quelle irrilevanti o ridondanti. Permette al modello di concentrarsi su di attenzione aiuta il modello a
Arriva la Raspberry Pi 5! Flatpak sempre più facile immutabili sono già diventate molto sistema non possono essere frono.
è la grande sicurezza che offrono. software per computer desktop. I sistemi desktop richiedono infa infatti un’integrazione
fatti un’inn più stretta tra le in futuro sostituire metodi diagnostici
nostici
n un risultato
risulltato analogo a quello dei per sviluppare uno strumento Sono ampiamente utilizzate in vari regioni o aree specifiche di focalizzarsi selettivamente su diverse
popolari. E sembra proprio che le modificati direttamente dagli utenti o Poiché i file di sistema sono di sola continuità
applicazioni per garantire un’esperienza d’uso senza soluzione di continui it rispetto ai server o ai reare server virtuali consolidamento inoltre riduce elettrica nel tempo e a un minore
C
Più velocità e potenza per Con Warehouse la gestione tradizionali come TAC, risonanze ze e metodii tradizionali. Se ulteriormente automatizzato per rilevare la campi, tra cui l’elaborazione del un’immagine ritenute rilevanti per il parti della sequenza di input a ogni
distro immutabili non siano affatto una dalle applicazioni. Per apportare lettura, qualsiasi tentativo di modifica dispositivi dell’Internet delle Cose (IoT). È inoltre necessario pren
prendere
ndere in c considerazione lo spazio su sudisco,
una sola macchina, la necessità di comprare hardware footprint ecologico: non male! magnetiche e radiografie. convalidata
convaliidata e sviluppata, questa retinopatia diabetica. Quest’ultima linguaggio naturale, la visione artificiale compito da svolgere, assegnando pesi passo temporale, consentendogli
la scheda più amata dai maker dei pacchetti è semplicissima moda del momento. In alcuni scenari, aggiornamenti o modifiche viene fallisce. In questo modo si evitano
vitano poiché il fatto di avere applicazioni isolate può portare a una ridondanza
ridonndanza n nell’archiviazione delle loro Questo approccio innovativo mira rra tecnologia
tecnolo ogia sarebbe un metodo non è una complicanza del diabete che e la traduzione automatica. di attenzione a differenti posizioni di catturare le dipendenze ad ampio
infatti, si spingono un passo oltre i creata, installata e attivata una nuova interventi non autorizzati e sii riduce dipendenze, che non possono più essere condivise. Dal punto di vista v degli
deg
emulare sistemi operativi
g sviluppatori, infine, anche se c’è
aggiuntivo, con conseguente Ma c’è ovviamente molto di più,
a rivoluzionare la diagnosi precoce oce invasivo
invasivvo ed economico per prevedere colpisce gli occhi. Si verifica quando Un meccanismo di attenzione molto spaziali, enfatizzando le regioni raggio e di migliorare le prestazioni in
sistemi Linux tradizionali, offrendo istanza del sistema operativo il rischio di malware o di attacchi
acchi l’indiscutibile vantaggio della riproducibilità, adottare i sistemi ope erativi im
operativi m
immutabili sul desktop, tutelarsi da
può rendere difficile risparmio sui costi di acquisto incluso limitare i problemi legati allo e la prevenzione delle malattie le malattie
malaattie cardiache e potrebbe i livelli elevati di zucchero nel sangue diffuso è chiamato self-attention o importanti e riducendo l’importanza di compiti quali la traduzione automatica,
un’opzione più sicura e affidabile. Sono e gli aggiornamenti vengono applicati malevoli. Isolando il sistema operativo compresi
utilizzare strumenti e flussi di lavoro a cui si è abituati. Una volta c
compres si i meccanismi problemi di sviluppo con il coding
delle distribuzioni dei server, sul raffreddamento, sviluppo di app e poter testare cardiache, che rappresentano la a ridurre in modo significativo i decessi danneggiano i vasi sanguigni della autoattenzione. Permette al modello quelle trascurabili. Questa tecnica è il riconoscimento vocale e l’analisi
COP_001_LXP222_cover.indd 1 13/11/2023 15:57:53
particolarmente utili in applicazioni in modo atomico (tutti in una volta). da potenziali minacce, una distro
istro immutabili, quindi, sta a voi scegliere quando usarle in base ai pro progetti
ogetti e a al vostro metodo di lavoro. virtuali... le occasioni
in ambienti sui requisiti di spazio fisico e anche diversi OS velocemente. Nelle principale causa di mortalità a livello
vello
v a esse legate. Questo strumento retina, la parte sensibile alla luce di pesare l’importanza di diverse parole particolarmente utile per compiti come del sentiment nei testi.
come il cloud computing, i sistemi Le applicazioni sono isolate dal immutabile offre una soluzioneone mondiale. Grazie ad algoritmi di dall’impatto
dall’imppatto potenzialmente enorme all’interno dell’occhio. Può portare
per trarre il massimo da questa in generale sulle risorse necessarie prossime pagine abbiamo messo
tecnologia sono tante. per garantirne la sicurezza. insieme davvero il meglio dei trucchi
20 LINUX PRO 220 La virtualizzazione LINUX PRO 220 21
consente Consolidando più server su un minor e delle tecniche per virtualizzare al 24 LINUX PRO 220 LINUX PRO 220 25
anzitutto di consolidare più server in numero di macchine fisiche, top e a pagina 40 trovate i migliori
un’unica macchina fisica, eseguendo la virtualizzazione riduce anche container “prefabbricati” per Docker
più macchine virtuali (o VM da il consumo energetico, portando con cui partire subito. E allora...
Virtual Machine) su di essa. Questo a risparmi significativi sulla bolletta buona virtualizzazione a tutti! In modalità Seamless le applicazioni risultano funzionare tutte sullo stesso desktop, sia quelle del guest sia quelle dell’host
8 LINUX PRO 220 LINUX PRO 220 9
LINUX PRO 222 3

Guida DVD
Ogni mese Linux Pro vi offre i programmi e le distribuzioni più recenti su DVD
Sul DVD di Distro

questo mese...
D
Giochi e strumenti i proprietà di Red Hat e sviluppato comodo pulsante per la cattura delle schermate
da installare subito! dalla community Fedora Project, e uno per accedere alle Impostazioni. Al centro
questo sistema operativo viene c’è il classico calendario con l’orologio mentre
Fedora 39 Workstation distribuito in cinque versioni diverse a sinistra c’è il pulsante che permette di
(Workstation, Server, IoT, Cloud e Coreos), in visualizzare gli spazi di lavoro e la Dash. Cinque
Fedora 39 Server modo tale da coprire ogni esigenza dei propri sono i pulsanti che troverete al termine
utenti. Inoltre ha disponibili diversi ambienti dell’installazione: Firefox, Calendario, File,
desktop, tra cui KDE Plasma, Cinnamon e Software e Mostra applicazioni. Quest’ultimo
Xfce. L’attuale versione 39 è stata rilasciata visualizza la dotazione di base di Fedora che,
Le migliori
agli inizi di novembre ed è equipaggiata con per rendere meno pesante il sistema operativo,
distro GNOME 45. In aggiunta, ha le versioni aggiornate è piuttosto essenziale. Non mancano però
di Inkscape e di svariati strumenti di sviluppo. il pacchetto LibreOffice e altri software
Clonezilla 3.1.1-27 Tra le novità c’è un sistema più pratico importanti come Rhythmbox, Totem, qui
per passare da uno spazio di lavoro all’altro rinominato Video, Mappe e diverse Utilità.
FreeBSD 13.2
e un visualizzatore di immagini molto più Per arricchire la dotazione dovrete affidarvi a
Garuda performante del suo predecessore. In pratica, Software, che presenta un’interfaccia molto
la community di Fedora festeggia nel miglior intuitiva con i suoi sei pulsanti tematici. Sempre
NetBSD 10.0 modo possibile i 20 anni di vita di questo in Software troverete l’elenco di tutte le
sistema operativo, progettato per offrire applicazioni installate e lo strumento per
il massimo sia per il lavoro, sia per il tempo aggiornare il sistema operativo. Fedora vi dà
libero, puntando a rendere la vita più semplice anche la possibilità di personalizzare la Dash,
I migliori programmi
possibile ai propri utenti. Questo aspetto aggiungendovi le vostre applicazioni preferite
selezionati p. 38 si nota fin dal momento dell’installazione, con un semplice clic nel menu contestuale
che richiederà il minimo sforzo da parte di ciascuna di esse. Tale operazione sposterà
PipeWalker vostra essendo semiautomatica. Anche la l’applicazione selezionata dal menu Mostra
configurazione guidata non presenta alcun applicazioni alla Dash.
Ferdium 6.6.0 problema ed è un passaggio che porterà
Furnace 0.6 via pochissimi minuti. Ma vediamo Fedora
39 più da vicino...
Touché 2.0.10 SCARICA SUBITO
FeedDeck 1.1.0
Un viaggio dentro Fedora I DUE DVD COMPLETI
Quando il sistema operativo viene caricato,
la prima cosa che dovete fare è selezionare con INSERENDO IL CODICE
un clic lo spazio di lavoro in cui volete agire.
Dopodiché verranno segnalati eventuali
RANQFLF
aggiornamenti disponibili che vi consigliamo
di installare immediatamente. Terminate tutte le
operazioni preliminari vi ritroverete davanti a un
ambiente desktop estremamente semplice, che
si concentra sulla barra superiore. Qui ci sono
tre elementi fondamentali. A destra c’è il menu
per le operazioni di spegnimento e riavvio,
che però contiene anche altri comandi come
l’impostazione della modalità notturna o
www.sprea.it/LXP222_DVD
l’attivazione dello Stile scuro. Inoltre ci sono un
4 LINUX PRO 222

L’installazione quasi automatica di Fedora
1 Scegliere di installare Fedora 2 Selezionare il disco rigido

Nella schermata del GRUB che viene visualizzata, selezionate Fate clic su Continua e poi su Destinazione installazione,
con le frecce Start Fedora-Workstation-Live 39 e premete se segnalato dal sistema operativo. Selezionate il disco rigido
INVIO. Una volta caricata questa versione del sistema operativo, su cui installare Fedora Workstation e lasciate attiva l’opzione
fate clic su Install Fedora. Nella schermata successiva noterete Automatico nella sezione Configurazione di archiviazione.
che è già stata selezionata la lingua italiana. Ora potete premere su Fatto per terminare questa operazione.
3 Avviare l’installazione 4 Configurare il sistema operativo

Tornati alla schermata precedente, fate clic su Avvia Nella prima schermata che vedete apparire, fate clic su Avvia
installazione. Attendete che appaia il pulsante Termina configurazione. Scegliete se lasciare attive o disattivare le due
l’installazione e fate clic su di esso. Quindi premete in alto opzioni presenti in Privacy e premete su Successiva. Fate clic
a destra nell’interfaccia su Restart e ancora su Restart, su Abilita repository di terze parti e poi su Successiva. Nella
ricordando di rimuovere il dispositivo con il file ISO. sezione Connettere gli account online potete premere su Salta.
5 Creare l’account 6 Iniziare a usare la distribuzione

Nel campo Nome completo, nella schermata Informazioni Nella schermata che segue fate clic su Inizia a usare Fedora
personali, digitate il nome che userete, che verrà ripetuto Linux. Quando si apre la finestra Benvenuti in GNOME 45,
in quello sottostante. Fate clic su Successiva e scrivete la potete scegliere di saltare questa parte premendo su No
password nel primo campo disponibile, ripetendola nel secondo. grazie. Fate quindi clic sul primo sfondo che viene visualizzato
Se l’avete creata correttamente potrete premere su Successiva. per iniziare a usare il sistema operativo. LXP
LINUX PRO 222 5

Newsdesk
Newsdesk
Più prestazioni, velocità
e hardware col kernel 6.6
Il nuovo kernel Linux porta
una serie di novità interessanti
on parliamo spesso del kernel in particolare

N Linux su queste pagine,
in particolare quando non si tratta
per compiti come
la classificazione
di una versione LTS (a lungo supporto). delle immagini
L’edizione 6.6, però, introduce una serie e il rilevamento
di migliorie che potrebbero rendere degli oggetti.
l’aggiornamento utile per molti dei nostri Presente
lettori. Prima di tutto, se avete processori nei prossimi
Intel Tiger Lake o successivi ora potete processori Core
avere un livello superiore di sicurezza grazie Ultra come Meteor
alla compatibilità con la tecnologia Shadow Lake, mira a fornire
Stack, che protegge da pericolosi attacchi più efficienza
di stack overflow. Anche per i laptop energetica con una La nuova versione del kernel verrà
ci sono delle migliorie che riguardano in velocità fino a otto volte superiore prossimamente integrata nelle principali
particolare i modelli di Lenovo, HP e Asus. rispetto alla precedente generazione distribuzioni, a partire dalle rolling
Per i primi, un aggiornamento dei driver di chip di Intel nei carichi di lavoro basati release. Potete nel frattempo scaricarla
risolve i problemi con la tastiera di diversi sull’IA. Il nuovo kernel offre anche la dagli archivi del kernel Linux all’indirizzo
modelli (https://bit.ly/3su0ZzS). Il driver compatibilità con FreeSync Panel Replay, https://www.kernel.org
HP-BIOSCFG consente inoltre di gestire una nuova tecnologia sviluppata da AMD
il BIOS da Linux nei modelli degli ultimi per ridurre il consumo energetico durante
cinque anni di HP, mentre per Asus è stata la visualizzazione di contenuti statici
migliorata la compatibilità con i modelli su monitor e laptop, e per la funzione
ROG Flow X16. Sul fronte del networking Dynamic boost control dei laptop AMD
è stato aggiunto il supporto per diversi Ryzen per migliorare le prestazioni. Trovate
nuovi prodotti hardware, per esempio altri dettagli sul changelog di fine ottobre
di Qualcomm e MediaTek, e sono stati (https://bit.ly/3QyS2x1).
introdotti miglioramenti per diversi driver,
compresi quelli grafici Open Source di
Nvidia, Intel e AMD. La nuova versione del
kernel predispone anche il nostro sistema PRONTI AL FUTURO
operativo preferito a beneficiare di novità
hardware non ancora uscite. Introduce La nuova versione del kernel predispone
infatti il supporto per la tecnologia Neural
Processing Unit (NPU) di Intel, un circuito anche Linux a beneficiare di novità hardware
specializzato dedicato all’esecuzione di
algoritmi di apprendimento automatico, non ancora uscite di Intel e AMD
6 LINUX PRO 222
Arriva il codice sorgente UN LINUX
di Enterprise Linux DI AMAZON
I dispositivi intelligenti
L’ultimo capitolo della saga di Red Hat Enterprise di Amazon, come le linee
Fire TV, i display
Linux (RHEL) e CentOS intelligenti Echo Show
e i tablet Fire, utilizzano
tutti un fork di Android
bbiamo già parlato su queste pagine la disponibilità continua delle fonti EL di nome Fire OS, basato
A delle reazioni suscitate dalla
decisione di Red Hat, annunciata
alla comunità a tempo indeterminato.
Per accedere ai repository, potete visitare
su Android Open Source
Project (AOSP). Secondo
lo scorso giugno (https://bit.ly/3NZPMh7), la pagina GitHub https://bit.ly/3udircx, indiscrezioni di mercato
di limitare l’accesso pubblico al codice mentre la documentazione è disponibile (https://bit.ly/46aCs0v),
sorgente di Red Hat Enterprise Linux (RHEL) all’indirizzo www.OpenELA.org. Come però, ora il colosso sta
a CentOS Stream. Questo ha portato, lo Gregory Kurtzer ha dichiarato: “Per decenni lavorando al proprio Linux
scorso agosto, alla formazione di OpenELA, le organizzazioni si sono affidate a CentOS per sostituirlo. Pare che
un’associazione di sviluppatori di distribuzioni perché era disponibile gratuitamente, seguiva l’azienda sia all’opera sul
Enterprise Linux Open Source che vede tra lo standard Enterprise Linux ed era ben progetto, dal nome
i suoi membri CIQ (del fondatore di CentOS supportato da molti fornitori. L’abbandono in codice Vega, da anni
e Rocky Linux, Gregory Kurtzer), Oracle di CentOS non solo ha lasciato un vuoto (dal 2017) e che sia
e SUSE. Tra gli obiettivi del nuovo gruppo nell’ecosistema, ma ha anche mostrato un sistema operativo
c’era quello di rendere disponibile del codice chiaramente come la comunità debba unirsi di nuova generazione per
sorgente compatibile con Red Hat Enterprise e fare meglio. OpenELA è esattamente le linee di prodotti Smart
Linux entro la fine dell’anno. Hanno mantenuto questo: la risposta della comunità per Home, Automotive e altri
la promessa e a inizio garantire un futuro
g dispositivi Amazon. Un OS
novembre hanno collaborativo e stabile
c sviluppato internamente
pubblicato il codice a tutti i dipartimenti IT renderebbe Amazon più
sorgente di tutti professionali e ai casi indipendente da Android
i pacchetti necessari d’uso aziendali”. e permetterebbe di
a creare un sistema adottare un codice più
operativo Enterprise snello. Sembra che il team
Linux, con un focus iniziale OpenELA ha pubblicato di sviluppo del progetto
su EL8 ed EL9, mentre il codice sorgente di tutti stia lavorando con React
i pacchetti necessari a
i pacchetti per EL7 sono Native come framework.
creare un sistema operativo
in arrivo. Il progetto Vi terremo informati sugli
Enterprise Linux
si impegna a garantire sviluppi futuri!
RACCOLTA
PDF
LINUX PRO
Acquista la raccolta
PDF digitale del 2022
7 numeri a soli 5,90 €
anziché 47,30 € vai su
www.sprea.it/raccoltalxp2022
LINUX PRO 222 7

Cover story Copia & vendi la tua app
COPIA & VENDI

LA TUA APP
Scoprite come creare applicazioni interessanti abbastanza da essere vendute
e solide a sufficienza per garantirvi massima scalabilità!
pesso parliamo di come vi spiegheremo anche come gestire le ciò che leggete è testato sul campo
S creare software, script, ecc.

ma questa volta abbiamo
voluto fare un passo in più.
API di Google in modo da risparmiare
al massimo nel caso siate obbligati
a usarle per mancanza di alternative
in applicazioni che vengono usate da
decine di migliaia di utenti. Troverete
tutto in questo articolo di copertina
Nelle prossime pagine infatti troverete valide. Vedrete come lavorare al meglio e nel suo seguito, quello dedicato alla
tutto quello che vi serve non solo per in PHP o usando Node.js e scoprirete vostra prima app. Inoltre troverete altri
creare applicazioni per voi ma per come risparmiare tempo con template 3 pezzi nei tutorial e nell’Accademia
commercializzarle. In più per 2 app pronti a basso costo. Farete tutto senza del Codice, inclusa l’app completa
troverete il codice completo (tranne usare IA per scrivere il codice: vi per tenere traccia dei pagamenti
quello che dovete necessariamente guideremo passo dopo passo in modo automatici in modo semplicissimo,
gestire voi come la piattaforma utenti) che possiate comprendere la logica su desktop e su dispositivi mobili.
per installarle e partire a lavorarci dietro ogni scelta. E non vi parleremo Insomma, è tempo di programmare
immediatamente. Non solo: da giornalisti ma da sviluppatori: tutto un’app di successo!
8 LINUX PRO 222

JQuery
Ha anco
ra sens
o usarlo?
Scoprilo
con noi!
NEL
WEB
DVD
Fedora 39
le istruzio
istruzioni
oni
a pagina ni
4
Workstatio
Clonezilla n
3.1.1-27
L’unic a FreeBSD1
3.2
guida libera Garuda Linux
al mond
COPIA & VE PRO

PipeWalker
o dell’O Ferdium
pen Sourc Furnace
6.6.0
e 0.6
Touché 2.0.10
NDI
FeedDeck
1.1.0
LA TUA AP
e molto altro...
P
Fai soldi con
un tuo progett
Ti regalia
noi il cod mo
SEGRATE
Sfrutta le o partendo
API di Maps dalla code
base che ti ice!
PRESS-DI,
Pubblica il pagando solo diamo
tuo centesimi
Personalizza sistema per creare
1, S/NA - DISTRIBUTORE:
a Google
l’app per gestire un itinerar
pagamenti io per i viaggi
ricorrenti sulla
carta di credito
1, COMMA
N. 46) ART.
Ecco la nuova
8,4 GB di Fedora versione
L. 27/02/2004
DI SISTE , la distro
OPER MI per tutti
ATIVI i gusti
(CONV. IN
E APP!
- D.L. 353/2003
La teleca
POST.
SISTEMA
mera ccon
onn
SPA - ABB.
DI SICUREZZ il bracci
brac
bbr
bracc
raac
aacc
cci
ccio
ccc
ccio
ci
io
Costruisc A DAVVERO
i una sentinella SMART
ITALIANE
oggetti in
NUOVO! remoto con in grado
di raccoglie
2 DVD DA SCARICARE Arduino re
o Rasperry
R.O.C. - POSTE
CON IL CODICE Pi
ALL’INTERNO
TE Web
TARIFFA
Ecco i plug-in ricche senza
con cui fornire Open più potenti codice
per JavaScri
Bimestrale
- N.222
- 7,90 €
senza neanche siti completi di pt
dover saper ogni funzionalità
programmare
Hardwa
re
P.I. 07-12-2023
Arriva la Raspber
Dicembre-Genn Più velocità ry Pi
e potenza 5! Program
Partire col piede giusto:

aio
la scheda per mi
COP_001_LXP
222_cover.indd
più amata
dai maker Flatpak sempre
1 Con Warehous più facile
dei pacchetti e la gestione
è semplicis
sima
13/11/2023
15:57:53
gli stack tecnologici

Prima di vedere come creare i presupposti per una Web app solida
e scalabile, vediamo come scegliere la struttura da utilizzare
o stack tecnologico è la colonna CSS (fogli di stile a cascata)

L vertebrale della vostra Web app,
un amalgama di tutti gli strumenti
Il CSS è come la vernice, la carta da parati
e l’arredamento della casa. Detta l’estetica
e le tecnologie software scelti per progettare, di una pagina Web, comprendendo elementi
costruire e alimentare la vostra piattaforma come font, colori, layout e altro ancora.
digitale. Ogni segmento dello stack tecnologico Per migliorare il dinamismo e la gestibilità,
svolge la sua funzione fondamentale, gli sviluppatori si appoggiano spesso
assicurando che l’applicazione Web risuoni a framework come SASS e LESS.
con efficienza, velocità e affidabilità.
JavaScript
Partiamo col front-end È analogo al sistema elettrico e di automazione
Questo aspetto dello sviluppo Web è quello della casa, che le dà vita. È un linguaggio di
con cui gli utenti interagiscono direttamente. programmazione fondamentale che conferisce
Comprende tutto ciò che sperimentano interattività alle pagine Web. Con strumenti
visivamente sulla pagina Web: testo, colori, e framework come jQuery, React, Angular
stili, immagini, grafici e altro ancora. In genere e Vue, gli sviluppatori possono creare esperienze
è composto da HTML, CSS e JavaScript, Web ricche e dinamiche. Inoltre, TypeScript
con framework come React o Vue.js sta diventando la scelta preferita da molti,
che migliorano l’interattività. offrendo un approccio più strutturato rispetto
al tradizionale JavaScript.
HTML (Hypertext Markup Language)
Considerate l’HTML come l’ossatura strutturale La struttura del back-end
di una casa. Questo linguaggio di markup Le fondamenta di un’applicazione Web risiedono
è fondamentale per progettare ed esporre nel suo back-end, spesso indicato come il lato
documenti digitali, essenzialmente per modellare server dello stack tecnologico. È analogo
e posizionare i contenuti su una pagina Web. agli operatori del backstage di uno spettacolo
Questo pezzo introduttivo è scritto dai ragazzi di Fively (https://5ly.co) che si occupano di sviluppo di app. Se siete in difficoltà e vi serve
un’app sviluppata con tutti i crismi, potete chiedere loro un preventivo!
LINUX PRO 222 9

teatrale. Sebbene possano rimanere nascosti, Inoltre, oltre ai livelli front-end e back-end
TIP i loro ruoli fondamentali assicurano che lo spettacolo dell’applicazione, gli sviluppatori utilizzano
si svolga senza intoppi e il loro contributo non deve vari strumenti per ospitare l’app nel cloud
Michael Kunze
essere sottovalutato. I componenti chiave dello stack e realizzare tutte le integrazioni necessarie,
ha coniato
l’acronimo LAMP back-end includono: testare l’applicazione per eliminare tutti i bug
in un articolo e gestire efficacemente il progetto software.
per una rivista Linguaggi di programmazione
tedesca di Costituiscono l’essenza delle operazioni logiche Come scegliere lo stack
informatica nel di siti Web e applicazioni, colmando il divario Avventurarsi nello sviluppo Web è come
1998. Lo usava tra l’interfaccia utente e il database. Esempi navigare in un labirinto dinamico, in cui ogni
per indicare lo significativi sono JavaScript, PHP e Python. svolta, in particolare la scelta dello stack
stack software tecnologico, influenza il successo del viaggio.
Linux-Apache-
Framework Scegliere il giusto stack tecnologico per lo
mSQL/MySQL-
Come pilastri portanti, i framework standardizzano sviluppo Web è come individuare gli strumenti
Perl/PHP.
L’articolo mirava e accelerano lo sviluppo di applicazioni basate su migliori per un artigiano: devono essere precisi,
a dimostrare che linguaggi di programmazione specifici. Quelli più affidabili e adatti al capolavoro immaginato.
un pacchetto famosi, come Laravel, Django e Ruby on Rails, Queste sono alcune delle considerazioni più
di software seguono spesso il modello architettonico importanti che dovete fare quando scegliete
libero poteva MVC (Model-View-Controller). lo stack ideale per voi...
rappresentare
una valida Server Web Costo della tecnologia
alternativa Sono i guardiani che orchestrano e gestiscono Le opzioni Open Source potrebbero non
a quelli
le richieste dei clienti. Tra i leader del settore comportare costi diretti, ma le tecnologie
commerciali.
ci sono Apache, Nginx e IIS di Microsoft. proprietarie sì. Al di là delle spese iniziali, bisogna
considerare fattori a lungo termine come
Database l’hosting, la manutenzione e l’imprevedibilità
Per l’archiviazione e il recupero dei dati, dei costi delle tecnologie emergenti.
le applicazioni si appoggiano a database SQL D’altra parte, immergersi nelle tecnologie
o NoSQL. I leader in questo campo sono emergenti comporta dei rischi. Questi strumenti,
MongoDB, PostgreSQL e MySQL. spesso ancora agli inizi o in fase di beta testing,
TECH STACK IBRIDI PER I COLOSSI DEL WEB

Mentre gli stack tecnologici più scalabile e distribuita. Gli stack qualsiasi stack standardizzato.
standardizzati sono perfetti tecnologici complessi possono E poi, naturalmente, ci sono
per molte applicazioni Web e siti, soddisfare queste esigenze di l’archiviazione e l’analisi dei dati:
i grandi servizi Web commerciali scalabilità sfruttando microservizi, Netflix gestisce grandi quantità
come Netflix richiedono strumenti serverless computing e reti di di dati degli utenti e metadati dei
più complessi per soddisfare distribuzione dei contenuti (CDN). contenuti. Ha bisogno di soluzioni
le proprie esigenze di scalabilità, Gli stack LAMP, inoltre, potrebbero robuste per l’archiviazione dei dati,
prestazioni, sicurezza ed esperienza non offrire le prestazioni necessarie come database NoSQL e data
utente. Questi stack tecnologici per servizi ad alta intensità di banda warehousing, oltre che di
sono attentamente progettati come Netflix. Le piattaforme di piattaforme di analisi per ricavare
per supportare i requisiti unici streaming video devono garantire informazioni dal comportamento
di distribuzione dei contenuti, una consegna a bassa latenza, degli utenti e dalle prestazioni
personalizzazione e portata globale, uno streaming adattivo e un dei contenuti. Infine, anche
tra gli altri fattori. Prendiamo per uso efficiente delle risorse di rete, l’integrazione e la distribuzione
esempio LAMP, che esploreremo il che spesso richiede soluzioni continue (CI/CD) sono un fattore
nelle prossime pagine, e vediamo specializzate per la codifica video, importante. I servizi Web di grandi
perché un’azienda come Netflix il caching e la distribuzione dei dimensioni richiedono sofisticate
non può semplicemente affidarsi contenuti. Inoltre Netflix serve pipeline CI/CD per aggiornamenti
solo a esso. Innanzitutto, gli stack clienti in tutto il mondo. Per ridurre frequenti, test A/B e rilasci canonici.
LAMP non sono intrinsecamente al minimo la latenza e distribuire i Questo necessita strumenti e
progettati per una scalabilità contenuti in modo efficiente, utilizza orchestrazione dell’infrastruttura
massiccia. Quando un servizio come dei CDN (Content Distribution più avanzati di quelli offerti da
Netflix deve gestire milioni di utenti Network), edge caching e database LAMP. Naturalmente poi Facebook
contemporanei e fornire contenuti geo-distribuiti. Questi componenti ha funzionato per anni con PHP,
video ad alta definizione in tutto non fanno parte dello stack LAMP quindi è possibile che vada bene
il mondo, richiede un’architettura tradizionale e, in generale, di anche per voi!
10 LINUX PRO 222

JQuery
Ha anco
ra sens
o usarlo?
Scoprilo
con noi!
NEL
WEB
DVD
Fedora 39
le istruzio
istruzioni
oni
a pagina ni
4
Workstatio
Clonezilla n
3.1.1-27
L’unic a FreeBSD1
3.2
al mond
COPIA & VE PRO

PipeWalker
o dell’O Ferdium
pen Sourc Furnace
6.6.0
e 0.6
Touché 2.0.10
NDI
FeedDeck
1.1.0
LA TUA AP
e molto altro...
P
Fai soldi con
un tuo progett
Ti regalia
noi il cod mo
SEGRATEE
base che ti ice!
PRESS-DI,
tuo centesimi
a Google
ricorrenti sulla
carta di credito
1, COMMA
N. 46) ART.
Ecco la nuova
L. 27/02/2004
OPER MI per tutti
ATIVI i gusti
(CONV. IN
E APP!
- D.L. 353/2003
La teleca
POST.
SISTEMA
mera ccon
onn
SPA - ABB.
brac
bbr
bracc
raac
aacc
cci
ccio
ccc
ccio
ci
io
Costruisc A DAVVERO
ITALIANE
oggetti in
di raccoglie
o Rasperry
R.O.C. - POSTE
CON IL CODICE Pi
ALL’INTERNO
TE Web
TARIFFA
per JavaScri
Bimestrale
- N.222
- 7,90 €
programmare
Hardwa
re
P.I. 07-12-2023
Arriva la Raspber
aio
possono presentare insidie inaspettate durante

la scheda per mi
COP_001_LXP
222_cover.indd
più amata
è semplicis
sima
13/11/2023
15:57:53
lo sviluppo. L’attrattiva risiede nella promessa

che, nel corso del ciclo di vita del progetto,
la maggior parte dei problemi iniziali verrà
risolta, riducendo potenzialmente le spese
di manutenzione a lungo termine. Tuttavia,
avventurarsi in questa strada richiede un’audace
propensione al rischio.
Ambito e complessità del progetto

Un blog personale è sostanzialmente diverso
da un vero e proprio sito di e-commerce.
La comprensione della profondità e della
complessità del proprio progetto Web è
fondamentale. I siti semplici possono basarsi
su HTML, CSS e JavaScript, mentre i portali
più complessi possono richiedere framework
e database potenti.
Adattabilità e potenziale di crescita

Il panorama del Web cambia rapidamente.
Un progetto che inizia in modo modesto
può presto esplodere in scala e complessità.
In previsione di questa crescita, è prudente
investire in soluzioni scalabili, come i servizi
cloud. Questa lungimiranza garantisce
che la vostra piattaforma Web rimanga agile,
in grado di gestire i picchi di traffico degli utenti
e il volume dei contenuti.
necessità di integrare strumenti o piattaforme Come ben
Competenza tecnica del team di terze parti. Uno stack tecnologico che accolga spiegato da
Ogni artista ha un mezzo preferito e gli tali integrazioni con un attrito minimo è Intellisoft,
lo stack
sviluppatori non sono da meno. La familiarità inestimabile e semplifica gli aggiornamenti tecnologico
del team con determinati linguaggi o framework futuri e le aggiunte di funzionalità, facendovi può anche
può influire notevolmente sulla produttività e risparmiare su tempi e costi. non essere
sulla qualità dei risultati. Per esempio, un team tutto relativo
esperto di Ruby sarà più efficiente utilizzando Le esigenze reali prima delle tendenze allo sviluppo
ma alle
Ruby on Rails, piuttosto che adattarsi Questo non è solo un aspetto fondamentale, tecnologie
a una tecnologia sconosciuta, ovviamente! ma si può dire che è IL VERO aspetto usate per un
fondamentale. La tentazione di inseguire certo scopo
Piattaforme di distribuzione le tendenze tecnologiche è forte, ma le priorità
L’ambiente in cui vive il vostro progetto Web devono sempre essere dettate dalle esigenze
è importante. Se la vostra piattaforma è browser- del vostro progetto e del vostro team. Inseguire
centrica o si orienta verso le applicazioni Web ciecamente le tecnologie più diffuse senza
progressive, questa scelta determina il vostro un’adeguata strategia può essere un’avventura
kit di strumenti tecnologici. Alcuni brillano in costosa. Allineare le scelte tecnologiche a chiari
contesti basati sul Web, mentre altri sono pensati obiettivi predefiniti protegge da una serie
per le esperienze mobili. di problematiche importanti.
Tempo di commercializzazione Quali stack esistono?

Nella corsa allo sviluppo Web, il rapido spesso mette Nelle prossime pagine e negli articoli sulle
in ombra il lento. La tempistica del progetto può
influenzare notevolmente le scelte dello stack
tecnologico. Alcuni strumenti sono progettati per SCEGLIERE LO STACK GIUSTO
la velocità, dotati di ampie librerie e di funzionalità
pronte per l’uso, che consentono implementazioni “Non tutti gli stack vanno bene per il
rapide. Altri strumenti, invece, pur essendo potenti,
richiedono un investimento di tempo maggiore. vostro specifico progetto: scegliete con
Capacità di integrazione cura in base a quello che funziona meglio
Man mano che la vostra piattaforma Web
cresce, diventa inevitabile affrontare la per voi, non a quello che è popolare!”
LINUX PRO 222 11
potrebbe risultare lento per i back-end ad alta

NON ASCOLTATE LE SIRENE intensità di calcolo.
CHI LO USA LinkedIn, il colosso del networking
“Se uno stack funziona per voi, non professionale, sfrutta lo stack MEAN per
le sue capacità uniche.
fatevi raccontare che è vecchio o fuori
Lo stack tecnologico MERN
moda: è probabilmente in uso anche Fratello di MEAN, MERN è uno stack tecnologico
molto diffuso, la cui principale differenza dal primo
in mega piattaforme ancora oggi” consiste nell’aver sostituito Angular.js con React.
PRO Imitando MEAN ma con ReactJS al centro,
MERN si basa sull’architettura modulare e
app che vi spieghiamo come creare useremo centrata sui componenti di React. Questo spesso
soluzioni ibride o comunque dimensionate per si traduce in una maggiore flessibilità e in un
il tipo di app proposto. È però importante che apprendimento più dolce rispetto ad Angular.
sappiate cosa è disponibile sul mercato, quindi CONTRO Come MEAN, è alle prese con le
vediamo i principali stack, come sono composti limitazioni intrinseche alle attività di back-end
e da chi vengono usati. che richiedono un elevato carico di calcolo.
CHI LO USA Airbnb, un titano del settore dei viaggi, si
Lo stack tecnologico LAMP affida allo stack MERN per la sua piattaforma Web.
Storicamente un pilastro nel regno degli stack
tecnologici, LAMP continua a essere uno dei Lo stack tecnologico PERN
preferiti, soprattutto per chi apprezza l’efficienza PERN sta per PostgreSQL, Express.js, React
dei costi, la flessibilità e le prestazioni costanti. e Node.js. Si tratta essenzialmente di uno stack
PRO Composto da Linux, Apache, MySQL MERN che utilizza PostgreSQL come database
e PHP/Perl/Python, LAMP è Open Source, relazionale.
pratico e vanta un ampio sostegno da parte PRO Abbraccia la potenza di React per il
della comunità. Gli utenti apprezzano la front-end, unita all’affidabilità di PostgreSQL,
flessibilità che offre, soprattutto nella scelta un noto RDBMS. Integrazione perfetta
del sistema operativo. di JavaScript in tutto lo stack.
CONTRO Può vacillare con le applicazioni ultra- CONTRO Come MERN, potrebbe avere delle
scalabili. Sebbene PHP sia versatile, a volte limitazioni nei back-end ad alta intensità
è considerato meno all’avanguardia rispetto di calcolo.
ai linguaggi emergenti. CHI LO USA Molte startup in crescita hanno
CHI LO USA WordPress, un nome importante nel iniziato ad adottare lo stack PERN grazie
panorama dei CMS, opera su uno stack LAMP. alla sua scalabilità ed efficienza.
Lo stack tecnologico MEAN React Native

MEAN, con la sua suite completa di strumenti, React Native, sviluppato da Facebook,
rappresenta una proposta interessante per tutti è un framework per la creazione di applicazioni
gli sviluppatori che si trovano impegnati mobili native che utilizza JavaScript e React.
nell’ecosistema JavaScript. PRO Riutilizzabilità del codice su iOS e Android,
PRO Acronimo di MongoDB, Express.js, per cicli di sviluppo più rapidi. Vanta un ricco
AngularJS e Node.js, MEAN incarna la coesione ecosistema e supporta il caricamento a caldo.
di JavaScript. È un esempio di uniformità CONTRO Potrebbe non essere in grado di gestire
nel linguaggio e nello scambio di dati e vanta applicazioni ad alte prestazioni o ad alta intensità
formidabili credenziali di performance. grafica con la stessa fluidità offerta dallo
CONTRO AngularJS, pur essendo potente, spesso sviluppo nativo.
intimidisce i nuovi arrivati a causa della sua CHI LO USA Facebook e Facebook Ads, come è
intricata traiettoria di apprendimento. Inoltre, ovvio, sono costruiti con React Native.
OCCHIO AI DATABASE, CONTENITORI DI TUTTI I VOSTRI DATI
La scelta del giusto database prestazioni, la scalabilità compatibile con la struttura

è una decisione critica che può e la sicurezza e fare una scelta dei dati e i requisiti dell’app.
influenzare il successo della vostra consapevole che sia in linea Un abbinamento sbagliato può
applicazione. È essenziale valutare con le esigenze attuali e future causare inefficienze, trasformazioni
i requisiti del progetto, considerare dell’applicazione. La scelta del complesse dei dati o difficoltà
fattori come la struttura dei dati, le modello di dati deve essere infatti nel rappresentarli con precisione.
12 LINUX PRO 222

JQuery
Ha anco
ra sens
o usarlo?
Scoprilo
con noi!
NEL
WEB
DVD
Fedora 39
le istruzio
istruzioni
oni
a pagina ni
4
Workstatio
Clonezilla n
3.1.1-27
L’unic a FreeBSD1
3.2
al mond
COPIA & VE PRO

PipeWalker
o dell’O Ferdium
pen Sourc Furnace
6.6.0
e 0.6
Touché 2.0.10
NDI
FeedDeck
1.1.0
LA TUA AP
e molto altro...
P
Fai soldi con
un tuo progett
Ti regalia
noi il cod mo
SEGRATE
base che ti ice!
PRESS-DI,
tuo centesimi
a Google
ricorrenti sulla
carta di credito
1, COMMA
N. 46) ART.
Ecco la nuova
L. 27/02/2004
OPER MI per tutti
ATIVI i gusti
(CONV. IN
E APP!
- D.L. 353/2003
La teleca
POST.
SISTEMA
mera ccon
onn
SPA - ABB.
brac
bbr
bracc
raac
aacc
cci
ccio
ccc
ccio
ci
io
Costruisc A DAVVERO
ITALIANE
oggetti in
di raccoglie
o Rasperry
R.O.C. - POSTE
CON IL CODICE Pi
ALL’INTERNO
TE Web
TARIFFA
per JavaScri
Bimestrale
- N.222
- 7,90 €
programmare
Hardwa
re
P.I. 07-12-2023
Arriva la Raspber
aio
la scheda e potenza 5! Program
Web app o nativa?

per mi
COP_001_LXP
222_cover.indd
più amata
è semplicis
sima
13/11/2023
15:57:53
Ecco cosa fa per voi

In queste pagine abbiamo scelto di mostrarvi come creare una Web app
ma è importante che siate consci delle differenze
e applicazioni Web e le applicazioni mobili dispositivi. Possono essere facilmente aggiornate
L per iOS o Android hanno scopi simili, ma
presentano alcune differenze fondamentali
sul server e le modifiche si riflettono
immediatamente sugli utenti.
TIP
Ci sono
in termini di sviluppo, accessibilità e funzionalità. App mobile: Le app per dispositivi mobili devono framework che
Per questo numero ci siamo concentrati sulle essere scaricate e installate dall’Apple App Store vi permettono
di programmare
Web app ma prima di imbarcavi nel progetto (iOS) o dal Google Play Store (Android).
per molteplici
è importante che capiate le differenze fra i due tipi. Gli aggiornamenti richiedono che gli utenti scarichino
piattaforme con
Vedremo quindi insieme diversi aspetti delle e installino l’ultima versione dall’app store, il che una codebase
due categorie con i rispettivi vantaggi e svantaggi. può comportare ritardi nella distribuzione di nuove unica. Per
funzionalità o correzioni di bug, anche perché sia esempio,
Sviluppo e programmazione Apple sia Google devono approvare ogni release. Titanium
Web app: Le applicazioni Web sono costruite permette di
utilizzando tecnologie come HTML, CSS e Accesso offline scrivere in
JavaScript. Vengono eseguite in un browser e sono Web app: Richiedono in genere una connessione JavaScript
indipendenti dalla piattaforma, il che significa che a Internet per funzionare correttamente. È possibile app per iOS e
Android (https://
è possibile accedervi da qualsiasi dispositivo dotato aggiungere alcune funzionalità offline, ma sono
github.com/
di un browser compatibile. limitate rispetto a quelle delle app mobili native.
tidev/titanium-
App mobile: Le app mobili per iOS (con Swift App mobile: Possono essere progettate per sdk) e poi c’è
o Objective-C) e Android (con Java o Kotlin) funzionare offline, consentendo agli utenti naturalmente
sono specifiche per la piattaforma e richiedono di accedere a determinate funzioni e dati senza React Native,
lo sviluppo con i rispettivi linguaggi di una connessione a Internet. anch’esso ideale
programmazione e SDK. Questo le rende per scrivere una
più ottimizzate per le rispettive piattaforme. Prestazioni volta e pubblicare
Web app: Potrebbero non essere reattive e veloci ovunque.
Distribuzione come le app mobili native, soprattutto per le attività
Web app: Sono accessibili attraverso un browser complesse o ad alta intensità di risorse, poiché
Web e gli utenti non devono installare nulla sui loro si basano sulle capacità del browser.
Se volete fare un passo avanti nella vostra crescita professionale, senza però tuffarvi in SDK specifici per il mondo
mobile, potreste provare React Native (https://reactnative.dev/ ). Permette di sviluppare in modo sufficientemente
intuitivo e di pubblicare per qualsiasi piattaforma, usando anche le funzioni native dei dispositivi
LINUX PRO 222 13

per accedervi, ma del resto anche le app native

LA SCELTA IDEALE devono richiederle esplicitamente.
App mobile: Le app mobili native possono accedere
“Le Web app rimangono una soluzione facilmente a un’ampia gamma di funzioni e sensori
del dispositivo, consentendo funzionalità più
perfetta per gettarsi nel mondo delle avanzate, come i servizi di localizzazione e la realtà
aumentata. Attenzione però: i sistemi operativi
applicazioni senza dover imparare mobile stanno concedendo sempre più accesso
a queste funzioni anche ai browser.
tecnologie da zero”
Aggiornamenti e manutenzione
Web app: Gli aggiornamenti e la manutenzione sono
App mobile: Sono spesso più veloci e reattive, più facili da gestire, poiché le modifiche possono
poiché sono ottimizzate per l’hardware e il sistema essere apportate sul server e sono immediatamente
operativo specifici del dispositivo. disponibili per gli utenti, senza bisogno
di approvazione da parte degli app store.
Esperienza utente App mobile: Gli aggiornamenti devono passare
Web app: Le app Web hanno spesso un aspetto attraverso il processo di revisione degli app store,
e un’interfaccia coerenti tra le diverse piattaforme, il che può comportare ritardi nella distribuzione
il che può portare a un’esperienza utente più di aggiornamenti critici e correzioni di bug.
uniforme. Potrebbero però non sfruttare appieno
le linee guida UI/UX specifiche della piattaforma. In sintesi, le app Web sono più accessibili su
App mobile: Possono offrire un’esperienza utente diverse piattaforme e più facili da sviluppare e
personalizzata e specifica per la piattaforma, mantenere, mentre le app mobili native offrono
aderendo ai principi di progettazione e alle linee dei vantaggi sotto il profilo dell’esperienza
guida di iOS e Android, che le rendono più intuitive utente, delle prestazioni e dell’accesso alle
per gli utenti, ma l’interfaccia va sviluppata funzionalità specifiche del dispositivo. La scelta
appositamente per ogni piattaforma. tra le due soluzioni dipende dai requisiti
del progetto e dal pubblico di riferimento.
Accesso al dispositivo Alcuni progetti optano per una combinazione,
Web app: Hanno un accesso limitato alle funzioni utilizzando le tecnologie Web per l’accessibilità
del dispositivo, come GPS, fotocamera e sensori, multipiattaforma e le app mobili native per
e spesso richiedono l’autorizzazione dell’utente migliorare le prestazioni e l’esperienza utente.
LE WEB APP SONO LA SCELTA PERFETTA PER CHI INIZIA

In generale, lo sviluppo di e sistemi operativi. E non è della piattaforma (Swift o
applicazioni Web ha una curva di necessario investire in ambienti di Objective-C per iOS, Java o Kotlin
apprendimento più rapida rispetto sviluppo o hardware specifici: tutto per Android). Inoltre, il processo
a quello di applicazioni mobili per iOS ciò che serve è un editor di testo di presentazione degli app store
o Android. Le ragioni sono molteplici. e un browser, il che rende il processo può introdurre ulteriori complessità
Anzitutto HTML, CSS e JavaScript accessibile a un pubblico più vasto. e la creazione di app mobile reattive
sono ampiamente utilizzati e Lo sviluppo Web peraltro consente e ottimizzate per le prestazioni
dispongono di documentazione, iterazioni rapide. Le modifiche richiede una conoscenza più
di risorse e di una comunità possono essere apportate sul server approfondita delle rispettive
di sviluppatori impareggiabili. e sono immediatamente disponibili piattaforme. Se siete alla ricerca
Di conseguenza, i nuovi arrivati per gli utenti, senza bisogno di di un percorso più rapido per lo
possono trovare una grande quantità approvazioni da parte degli app sviluppo di app e volete acquisire
di tutorial, corsi e forum che li store. C’è poi da considerare un velocemente i fondamenti del
aiutano a imparare e a risolvere aspetto che ci sta molto a cuore: mestiere, lo sviluppo di Web app
rapidamente i problemi. Possono è disponibile un’ampia gamma di è una scelta perfetta. È un buon
inoltre essere progettate per framework e librerie Open Source punto di partenza per chi è alle prime
funzionare su diverse piattaforme per lo sviluppo (per esempio React, armi con lo sviluppo di software
e browser con modifiche minime. Angular e Vue.js). È anche e può servire come base per
Questa natura multipiattaforma importante notare che lo sviluppo di espandersi in aree più complesse
semplifica il processo di applicazioni mobile per iOS o Android dell’ingegneria del software,
apprendimento, perché è possibile può essere più impegnativo per i compreso lo sviluppo di app per
applicare le proprie conoscenze principianti, a causa della necessità dispositivi mobili, man mano che le
a un’ampia gamma di dispositivi di imparare linguaggi e SDK specifici competenze e l’esperienza crescono.
14 LINUX PRO 222

JQuery
Ha anco
ra sens
o usarlo?
Scoprilo
con noi!
NEL
WEB
DVD
Fedora 39
le istruzio
istruzioni
oni
a pagina ni
4
Workstatio
Clonezilla n
3.1.1-27
L’unic a FreeBSD1
3.2
al mond
COPIA & VE PRO

PipeWalker
o dell’O Ferdium
pen Sourc Furnace
6.6.0
e 0.6
Touché 2.0.10
NDI
FeedDeck
1.1.0
LA TUA AP
e molto altro...
P
Fai soldi con
un tuo progett
Ti regalia
noi il cod mo
SEGRATEE
base che ti ice!
PRESS-DI,
tuo centesimi
a Google
ricorrenti sulla
carta di credito
1, COMMA
N. 46) ART.
Ecco la nuova
L. 27/02/2004
OPER MI per tutti
ATIVI i gusti
(CONV. IN
E APP!
- D.L. 353/2003
La teleca
POST.
SISTEMA
mera ccon
onn
SPA - ABB.
brac
bbr
bracc
raac
aacc
cci
ccio
ccc
ccio
ci
io
Costruisc A DAVVERO
ITALIANE
oggetti in
di raccoglie
o Rasperry
R.O.C. - POSTE
CON IL CODICE Pi
ALL’INTERNO
TE Web
TARIFFA
per JavaScri
Bimestrale
- N.222
- 7,90 €
programmare
Hardwa
re
P.I. 07-12-2023
Arriva la Raspber
Slim 4 per l’infrastruttura

aio
la scheda per mi
COP_001_LXP
222_cover.indd
più amata
è semplicis
sima
13/11/2023
15:57:53
PHP lato server

Per costruire qualsiasi Web app è importante una struttura solida
e scalabile. Vediamo come creare una robusta base con PHP 8.2
a prima cosa a cui pensare, quando si vuole deve gestire la richiesta. Questo processo è noto
L costruire un’applicazione Web robusta
e scalabile, è che è fondamentale disporre
come “instradamento” (routing) e consiste
nell’associare un modello di URL a una funzione
di un solido framework. Fornisce infatti un approccio o azione specifica dell’applicazione. Le route sono
strutturato e organizzato allo sviluppo, rendendo tipicamente costituite dai seguenti componenti:
più facile la gestione del codice e delle richieste, Metodo HTTP (GET, POST, PUT, DELETE, ecc.)
oltre all’accesso ai dati dai database. Qui useremo Definisce il tipo di azione che il client vuole eseguire.
PHP 8.2 come linguaggio, Slim 4 come framework Per esempio, una richiesta GET recupera dati,
per fornire i dati e MySQL per il lato database. mentre una richiesta POST li invia.
PHP 8.2 rimane un linguaggio di scripting lato Modello di URL
server ampiamente adottato, noto per la sua Specifica il percorso dell’URL, spesso con
versatilità, le sue prestazioni e i suoi continui segnaposto per percorsi dinamici. Per esempio,
miglioramenti. Del resto, se va bene per Facebook, /prodotti/:id potrebbe rappresentare un percorso
Wikipedia, Mailchimp, ecc. va bene anche per per visualizzare un prodotto specifico, dove :id è un
le vostre Web app! Grazie alle ultime caratteristiche segnaposto per l’identificatore univoco del prodotto.
e ai miglioramenti di PHP 8.2, gli sviluppatori Gestore/Controllore
possono scrivere codice più pulito ed efficiente. La funzione o il codice che viene eseguito quando la
Supporta un’ampia gamma di applicazioni e route viene abbinata. Elabora la richiesta, interagisce
framework, il che lo rende un’ottima scelta per lo con la logica dell’applicazione e restituisce una
sviluppo. Slim 4 è un framework leggero ma potente: risposta appropriata. Per esempio, in Slim, una
consente di creare rapidamente applicazioni Web definizione di route potrebbe essere simile a questa:
efficienti offrendo funzionalità essenziali come $app->get('/prodotti/:id', function ($request, $response,
il routing, il supporto per il middleware, l’iniezione $args) {
di dipendenze e la gestione degli errori. // Recupera informazioni sul prodotto in base all'ID
La sua semplicità e flessibilità lo rendono una scelta $productId = $args['id'];
eccellente per la creazione di API e applicazioni Web // Elabora la richiesta e genera una risposta
di piccole e medie dimensioni. MySQL è ovviamente // ...
un popolare sistema di gestione di database // Restituisce la risposta
relazionali noto per la sua affidabilità, le sue return $response->withJson(['prodotto' =>
prestazioni e la sua facilità d’uso. Offre solide $productData]);
capacità di archiviazione e recupero dei dati, });
che lo rendono adatto a vari tipi di applicazioni Web. In questo esempio, una richiesta GET a un URL
come /prodotti/123 attiverebbe questa route.
Flessibilità per i vostri percorsi Il segmento :id viene catturato e passato come
Il motivo numero uno per scegliere un framework argomento alla funzione handler, consentendo
come Slim è la comodità nella gestione dei percorsi, all’applicazione di recuperare le informazioni
o route. Nel contesto dello sviluppo Web, le route sul prodotto con l’ID 123 e di generare
si riferiscono ai percorsi o agli URL specificati una risposta appropriata.
all’interno di un’applicazione Web che corrispondono
a determinate azioni o operazioni. Definiscono Ordine e organizzazione nel filesystem
il modo in cui l’applicazione risponde alle diverse Con PHP 8.2 e Slim 4 potete organizzare le librerie
richieste HTTP effettuate dai client, come i browser in modo efficiente. Slim 4 segue i moderni standard
Web o le applicazioni mobili. Quando un client invia PHP, consentendo agli sviluppatori di utilizzare
una richiesta a un particolare URL (per esempio, Composer per la gestione delle dipendenze.
https://esempio.it/prodotti), il router Le librerie possono essere archiviate e gestite
dell’applicazione determina quale codice (controller) con questo strumento, garantendo un corretto
LINUX PRO 222 15

versioning e una facile integrazione di Installare Slim

TIP componenti di terze parti ma non basta. Come Eseguite il comando bash mostrato di seguito
vi spiegheremo, strutturerete le directory di Slim nella directory principale (quindi subito fuori
Se non siete
e PHP in generale in modo che le librerie non da /public). Questo comando scarica Slim
abituati a usare
la filosofia MVC siano mescolate alle route e ai template, per una Framework e le sue dipendenze di terze parti
potreste trovarla perfetta divisione MVC (model-view-controller, nella directory vendor/ del progetto.
eccessivamente vedi box qui sotto). Partiamo quindi installando composer require slim/slim:"4.*"
rigida e... Slim, dando per scontato che PHP sia già Prima di iniziare a lavorare con Slim è poi necessario
potreste avere installato e lo stesso vale per Composer. Navigate scegliere l’implementazione di PSR-7 più adatta
ragione. In anzitutto nella directory principale del progetto. alla propria applicazione. Affinché il rilevamento
teoria le viste Attenzione: per “directory principale” non automatico funzioni e sia possibile utilizzare
non dovrebbero intendiamo quella in cui avete i file accessibili dal AppFactory::create() e App::run() senza dover
avere logica
Web. In PHP e Slim, è infatti essenziale installare creare manualmente una ServerRequest ,
ma la realtà è
le librerie e altri file sensibili al di fuori della è necessario installare:
che a volte non
ha senso per directory /public per garantire che non siano composer require guzzlehttp/psr7 "^2"
il controllore direttamente accessibili agli utenti del Web Ora dovete solo configurare il server Web.
effettuare in modo da prevenire accessi non autorizzati e Con Apache, tutto quello che dovete fare è creare
pre-produzioni potenziali vulnerabilità di sicurezza. Per esempio, un file .htaccess in /public con questo contenuto:
specifiche in questa struttura è ideale per non correre rischi: RewriteEngine On
base alla vista, - /libraries <-- Librerie memorizzate qui RewriteCond %{HTTP:Authorization} ^(.*)
quindi non - /config <-- File di configurazione qui RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]
preoccupatevi - /vendor <-- File delle dipendenze qui RewriteCond %{REQUEST_FILENAME} !-f
troppo.
- /public RewriteCond %{REQUEST_FILENAME} !-d
L’importante è
- index.php <-- Punto di ingresso accessibile sul Web RewriteRule ^ index.php [QSA,L]
che vi assicuriate
sempre che le In questa struttura, le librerie e le directory Questo è quanto! Ora non dovete fare altro
tre parti della di configurazione sono al di fuori della directory che testare se tutto funziona creando un file
filosofia operino pubblica (public), in modo da essere al sicuro index.php elementare:
in modo coeso dall’accesso diretto al Web. Aderendo a questa <?php
e coerente. pratica, si migliora la sicurezza e l’integrità use Psr\Http\Message\ResponseInterface as Response;
dell’applicazione, assicurando che i file e le use Psr\Http\Message\ServerRequestInterface as
informazioni critiche siano protetti e accessibili Request;
solo attraverso la logica e le funzionalità previste use Slim\Factory\AppFactory;
dall’applicazione. require __DIR__ . '/../vendor/autoload.php';
MODELLO-VISTA-CONTROLLER: TUTTO SEPARATO!

MVC, acronimo di Model-View- utenti (per esempio, clic, pressione dovrebbe generare internamente
Controller, è un modello di di tasti) e li invia al controllore. elementi della vista. Se siete
architettura software utilizzato per Il controllore (C, Controller) agisce abituati a file PHP con logica
progettare e organizzare il codice come un intermediario che gestisce e HTML tutti insieme, con l’MVC
in modo da separare i problemi il flusso di dati tra il modello e la imparerete a separarli
dell’applicazione in tre componenti vista. Riceve gli input dell’utente correttamente. Un altro vantaggio
interconnessi: il modello, la vista e dalla vista e li elabora, aggiornando è il fatto che i componenti (modelli,
il controllore. Il modello (M, Model) di conseguenza il modello o la viste e controllori) possono essere
rappresenta i dati e la logica vista. Controlla il comportamento riutilizzati in diverse parti
operativa dell’applicazione. dell’applicazione e invoca azioni dell’applicazione o anche in altre
È responsabile della gestione sul modello e sulla vista in base applicazioni. Questo influisce
e della manipolazione dei dati alle interazioni dell’utente. anche sulla scalabilità: le modifiche
dell’applicazione e della risposta I vantaggi principali dell’utilizzo o gli aggiornamenti di un
alle richieste di informazioni del pattern MVC è separare le componente (per esempio, il
sui dati. Non deve dipendere responsabilità. Promuove infatti modello) possono essere effettuati
dall’interfaccia utente o dalla una chiara divisione di chi deve senza influenzare direttamente
presentazione. La vista (V, View) fare cosa, rendendo la base gli altri, consentendo uno sviluppo
rappresenta l’interfaccia utente e la di codice più facile da gestire e più gestibile e scalabile. La filosofia
visualizzazione dei dati del modello. mantenere. Questa filosofia inoltre MVC è ampiamente utilizzata nella
Presenta i dati all’utente in modo vi forza a gestire gli elementi là realizzazione di applicazioni Web e
che abbiano un senso, spesso dove serve. Per esempio, la vista software, aiutando gli sviluppatori
attraverso elementi grafici e dovrebbe avere meno logica a creare codebase ben organizzate,
controlli. Riceve gli input dagli possibile e il Controller non manutenibili ed estensibili.
16 LINUX PRO 222

JQuery
Ha anco
ra sens
o usarlo?
Scoprilo
con noi!
NEL
WEB
DVD
Fedora 39
le istruzio
istruzioni
oni
a pagina ni
4
Workstatio
Clonezilla n
3.1.1-27
L’unic a FreeBSD1
3.2
al mond
COPIA & VE PRO

PipeWalker
o dell’O Ferdium
pen Sourc Furnace
6.6.0
e 0.6
Touché 2.0.10
NDI
FeedDeck
1.1.0
LA TUA AP
e molto altro...
P
Fai soldi con
un tuo progett
Ti regalia
noi il cod mo
SEGRATEE
base che ti ice!
PRESS-DI,
tuo centesimi
a Google
ricorrenti sulla
carta di credito
1, COMMA
N. 46) ART.
Ecco la nuova
L. 27/02/2004
OPER MI per tutti
ATIVI i gusti
(CONV. IN
E APP!
- D.L. 353/2003
La teleca
POST.
SISTEMA
mera ccon
onn
SPA - ABB.
brac
bbr
bracc
raac
aacc
cci
ccio
ccc
ccio
ci
io
Costruisc A DAVVERO
ITALIANE
oggetti in
di raccoglie
o Rasperry
R.O.C. - POSTE
CON IL CODICE Pi
ALL’INTERNO
TE Web
TARIFFA
per JavaScri
Bimestrale
- N.222
- 7,90 €
programmare
Hardwa
re
P.I. 07-12-2023
Arriva la Raspber
aio
userete semplicemente quanto segue:

la scheda mi
$app = AppFactory::create();
COP_001_LXP più amata per Flatpak sempre
222_cover.indd dai maker
è semplicis
sima
13/11/2023
15:57:53
return json_success($response, $data);

$app->get('/', function (Request $request, Response Quando invece trovate un errore:
$response, $args) { return json_error($response, 'Errore', 500);
$response->getBody()->write("Ciao!"); Per il rendering dell’HTML invece userete
return $response; Twig, che legge file HTML che possono anche
}); contenere variabili e logica in modo da poterli
personalizzare con elementi dinamici. In questo
$app->run(); modo potremo fornire testo in formato JSON
per le route di Slim che fanno da punti
Risposte standardizzate di accesso per l’API e HTML quando invece
Un ultimo passaggio è poi quello relativo alla logica le route sono relative a pagine Web. Installate
di visualizzazione. Semplificando, vi troverete Twig per Slim in questo modo:
a dover gestire tre tipi di output: composer require slim/twig-view
JSON Dopodiché nel vostro file index.php, a
È l’output che userete per gli endpoint, cioè i punti di prescindere dal contenuto che avrà per la vostra
accesso, della vostra API. Sono tutte richieste di dati app, aggiungete una classe così:
e di azioni: prendere dati di un certo prodotto, class _TWIG
modificare un certo utente, ecc. {
HTML public static function
È l’output che userete per le vostre pagine Web. render($template,$data,$response){
Oggetto/binario
È l’output che userete, se dovesse servirvi, $loader = new \Twig\Loader\FilesystemLoader('../
per fornire file e immagini. template');
Per il JSON useremo due funzioni PHP per $twig = new \Twig\Environment($loader, [
uniformare le risposte, in modo da non dovere 'cache' => false,
riscrivere tutto il codice ogni volta e anche ]);
da sapere esattamente il formato della risposta. $template = $twig->load($template);
In index.php aggiungete: $content = $template->render($data);
function json_error(Response $response,$error,$status = $response->getBody()->write($content);
500,$data = []){ return $response;
$array = array('status' => 'error','error' => }

array('message' => $error)); }
E poi ogni volta che renderizzate una pagina:
if($data){ return _TWIG::render('default.html',$data,$response);
$array['error']['data'] = $data; Dove “default.html” è il nome del template
} che volete usare e $data è l’array che contiene
le variabili da scrivere nel template. I file HTML
$payload = json_encode($array); del template vanno conservati in
$response->getBody()->write($payload); - /template
$response->withStatus($status); quindi fuori da /public.
return $response->withHeader('Content-Type',
'application/json'); Come migliorare ancora?
Questa struttura è solida, perfetta per
} app anche di grosse dimensioni e scalabile.
Un’accortezza aggiuntiva è sicuramente mettere
function json_success(Response $response,$data = le chiavi di accesso alle API esterne in un file a
false,$status = 200,$passthru = false){ parte. Un’altra è creare un file di configurazione
in cui inserire tutte le variabili riutilizzabili
$array = $passthru ? $data : array('status' => in diverse parti del progetto.
'success', 'data' => $data);
$payload = json_encode($array); LIMITARE LA LOGICA

$response->getBody()->write($payload);
$response->withStatus($status); “Nei file di visualizzazione, quindi i
return $response->withHeader('Content-Type', template o le viste, cercate di limitare la
'application/json');
logica e di relegarla al Controller, anche
}
Quindi ogni volta che dovete rispondere con dei dati se finirete per forza per usarne un po’”
LINUX PRO 222 17
Sistema di traduzione
semplice con Node.js
Per offrire la vostra app al mondo dovete tradurla. Ecco come usare testi
in tutte le lingue se scegliete di sfruttare questo framework
crivere codice in inglese è fondamentale, npm install i18n
TIP S lo spieghiamo nel dettaglio nell’articolo
sulla vostra prima app, quella degli
Quindi, configurate i18n nella propria applicazione
e usatelo nelle vostre route:
“Io però ho già
itinerari. Naturalmente però questo non vuol i18n.configure({
la mia app, per
tradurla devo dire che dobbiamo creare app solo in inglese. locales: ['en', 'it'],
rivedere tutti Dato che la maggior parte delle app che vi defaultLocale: 'en',
i template”, mostreremo è in Node.js, qui vedremo come directory: __dirname + '/locales',
potreste l’implementazione di un sistema di localizzazione });
pensare. E noi per una Web app con JavaScript lato client
vi insegniamo e con questo framework lato server sia app.use(i18n.init);
un trucco: veramente semplice utilizzando i template EJS. app.set('view engine', 'ejs');
date in pasto La localizzazione consente di fornire contenuti
il codice dei
in più lingue in base alle preferenze dell’utente app.get('/', (req, res) => {
vostri template
senza dover cambiare una riga di codice. res.render('index', { i18n: res });
a una IA come
ChatGPT Anzitutto assicuratevi di avere un progetto Node. });
o Claude e js impostato con Express.js e EJS come motore A questo punto non vi serve altro che creare
chiedete loro di visualizzazione. Create quindi la struttura: template EJS che visualizzino contenuti
di trovare mkdir localization-app localizzati. Nei modelli EJS, utilizzate i18n.__()
tutti i testi che cd localization-app per tradurre il testo in base alla lingua preferita
secondo loro npm init dall’utente:
sono da tradurre npm install express ejs <h1><%= i18n.__('name') %></h1>
e non di codice Create poi una cartella per memorizzare i file <p><%= i18n.__('description') %></p>
e di fornirvi
di localizzazione. Al suo interno, si creeranno file
un JSON con
le traduzioni
JSON per ogni lingua supportata. Per esempio, Anche in PHP
e l’HTML con i create una cartella locales e aggiungete file JSON Potete fare una cosa analoga in PHP quando usate
tag già inseriti. come en.json e it.json per l’inglese e l’italiano: Slim e Twig. Installate anzitutto il pacchetto:
I risultati non /locales composer symfony/translation
sono sempre |--- en.json Create quindi una cartella per memorizzare i file di
perfetti ma |--- it.json traduzione. Per esempio, si può avere en_US.yaml
con qualche Ricordate che dovete aggiungere tutte le lingue, e it_IT.yaml per le traduzioni in inglese americano e
correzione vi inclusa quella di base che volete usare. Create italiano, rispettivamente. Create quindi il traduttore:
ritroverete quindi i file JSON di traduzione, di cui qui potete $container['translator'] = function ($container) {
con un lavoro
vedere un esempio: $translator = new Translator('en_US');
ottimale in
{ $translator->addLoader('yaml', new YamlFileLoader());
pochissimo
tempo! "name": "Nome", $translator->addResource('yaml', __DIR__ . '/
"description": "Descrizione." translations/en_US.yaml', 'en_US');
} return $translator;
Ogni file quindi deve includere per ogni termine };
usato nell’app un identificativo (per esempio E poi nel vostro template Twig:
“name”) e il testo per la lingua relativa (nel caso <h1>{{ description }}</h1>
dell’italiano, “nome”). Questo è un esempio di base ma è possibile
ampliarlo aggiungendo altre lingue, gestendo
Installare le librerie contenuti dinamici e implementando funzioni
Installate ora il pacchetto i18n, che serve a gestire come il rilevamento della lingua o la possibilità
l’internazionalizzazione e la localizzazione in Node.js. per gli utenti di modificare le proprie preferenze. LXP
18 LINUX PRO 222

HAI PERSO UN NUMERO DI LINUX PRO?
NON PREOCCUPARTI PUOI ACQUISTARE GLI ARRETRATI!
SOLO IN SOLO IN SOLO IN

VERSIONE VERSIONE VERSIONE
DIGITALE DIGITALE DIGITALE
COD. LP216 COD. LP217 COD. LP218

CSS Programmare da pro i fogli stile per il Web NEL Web e GUI Visualizza dati con grafici spettacolari NEL
WEB WEB
DVD
D
Debian 12
le istruzioni
zion
a pagina 4
onii
DVD
D
Kali Linux 2023.3
le istruzioni
zionii
a pagina 4
Fatdog64 antiX 23
pfSense 2.7.0 Devuan GNU+Linux 5.0.0
Q4OS 5.2 Converseen 0.10.0.1
Peppermint OS 2023-07-01 AAAAXY
Tails 5.15.1 PlayOnLinux 4.3.4
Sniffnet Rare 1.10.3
L’unica guida libera al mondo dell’Open Source PRO

RO Bavarder
e molto altro... L’unica guida libera al mondo dell’Open Source PRO Zatikon 1.1.2
Xournalpp 1.2.1
e molto altro...
1.000 SERVER CREA IL TUO

A COSTO ZERO
Virtualizza tutto, dal desktop all’ambiente di sviluppo!
Scopri i trucchi per diventare un maestro di VirtualBox
Sfrutta gratis la
tecnologia dei
CHATGPT!
Libera l’Iintelligenza Artificiale e rendila Open Source
Allena il tuo modello coi tuoi documenti e chatta con esso

Sviluppa in Python senza più errori di dipendenze e compatibilità colossi del cloud! Ecco l’IA che non richiede accesso al Web ed è 100% free
10 pagine su Docker: dai container imperdibili a come creare il tuo Devi usare ChatGPT? Ecco come non mandare più dati privati!
Debian 12 è perfetta Metti alla prova il tuo

per business e sistema con l’ultimo
8,8 GB professionisti! 8,4 GB Kali Linux
DI SISTEMI DI SISTEMI
OPERATIVI Crea la tua IA per le foto OPERATIVI
E APP! E APP! IlIl ttuoo robot
bott Wi-Fi!
Wi-Fi!
i Fi!
Fii!
CLASSIFICAZIONE DI IMMAGINI
Riconosci oggetti e animali con un AUTOBILANCIATO E GUIDATO
UIDATO
UIDAT
TO A DISTANZA
DIS
DISTAN
NZAA
NZA
dispositivo da meno di 15 euro! Usa un Arduino o una Pi perr costruire
cos un
SOLO IN veicolo a 2 ruote con tanto di telecamera
NUOVO! NUOVO!
VERSIONE 2 DVD DA SCARICE
ARE
CON IL CODICIN
ALL’INTERNO TE
L’Open Source salva le vite!
L’O
L’Ope
Dagli strumenti open ai tumori trovati per
2 DVD DA SCARICE
ARE
CON IL CODICIN
ALL’INTERNO TE
Lavora da professionista con Git
Ecco come non sbagliare più nulla coi comandi giusti!
DIGITALE ESCLUSIVA PER tempo dall’Intelligenza Artificiale, ecco la

rivoluzione della medicina grazie a Linux
ESCLUSIVA PER Diventa un maestro dello strumento di versioning
e collaborazione più usato del pianeta
Bimestrale - N.220 - 7,90 € Bimestrale - N.221 - 7,90 €

Sistema operativo
S Programmazione Istruzioni Programmazione
Distribuzioni immutabili
D Crea videogiochi arcade Documenti in un attimo È ora di tornare a PHP
I segreti delle distro 100% Con Godot programmare Trasforma il tuo Markdown La 8.2 è moderna, potente
ssicure: sono il futuro di Linux videogame è Open e facilissimo in pagine Web da Terminale e più sicura: padroneggiala!
P.I. 10-08-2023 Agosto-Settembre P.I. 11-10-2023 Ottobre-Novembre
COD. LP219 COD. LP220 COD. LP221
Completa la tua collezione ordinando

gli arretrati a soli 7,90€ cad.
su www.sprea.it oppure utilizzando il modulo qui sotto
SCEGLI L‘ARRETRATO CHE VUOI ORDINARE NOME

SE VUOI ORDINARE VIA POSTA O VIA FAX, COMPILA QUESTO COUPON COGNOME
Ritaglia o fotocopia il coupon, invialo in busta chiusa a: Sprea Spa Via Torino, 51 20063 Cernusco s/n (MI), insieme
a una copia della ricevuta di versamento o a un assegno. Oppure via fax al numero 02.56561221. Per ordinare in VIA
tempo reale i manuali collegati al nostro sito www.linuxpro.it/arretrati. Per ulteriori informazioni puoi scrivere a
store@sprea.it oppure telefonare allo 02/87168197 dal Lunedì al Venerdì dalle 9.00 alle13.00 e dalle 14.00 alle 18.00. N° C.A.P. PROV.
INSERISCI I CODICI E MESI DI RIFERIMENTO delle pubblicazioni che desideri ricevere: CITTÀ
€ TEL.
€ E-MAIL
€
€ SCELGO IL SEGUENTE METODO DI PAGAMENTO (Indica con una ˝ quello prescelto)
Totale Ordine € ▫ Versamento su CCP 99075871 intestato a Sprea Spa arretrati Via Torino 51 20063
Cernusco Sul Naviglio MI (Allegare ricevuta nella busta o al fax)
SCELGO IL SEGUENTE METODO DI SPEDIZIONE: ▫ Bonifico intestato a Sprea Spa arretrati sul conto IBAN IT05 F076 0101 6000 0009 9075 871
Indica con una ˝ la forma di spedizione desiderata
Per una rivista spedizione tramite posta tradizionale al costo aggiuntivo di € 3,90 ▫ Carta di Credito N.
(Per favore riportare il numero della Carta indicandone tutte le cifre)
Per due o più riviste spedizione tramite Corriere Espresso al costo aggiuntivo di € 7,00
Scad. CVV
(Codice di tre cifre che appare sul retro della carta di credito)
TOTALE COMPLESSIVO €
Nome e Cognome del Titolare della carta (può essere diverso dall’abbonato)
Data Firma del titolare
Informativa e Consenso in materia di trattamento dei dati personali - (Codice Privacy d.lgs. 196/03) Sprea Spa Socio unico Sprea Holding Spa con sede in
via Torino 51 – 20063 Cernusco s/Naviglio (MI) è il Titolare del trattamento dei dati personali che vengono raccolti, trattati e conservati ex d.lgs. 196/03.
Gli stessi potranno essere comunicati e/o trattati da Società esterne Incaricate. Ai sensi degli artt. 7 e ss. si potrà richiedere la modifica, la correzione e/o
la cancellazione dei dati, ovvero l’esercizio di tutti i diritti previsti per Legge. La sottoscrizione del presente modulo deve intendersi quale presa visione, nel
colophon della rivista, dell’Informativa completa ex art. 13 d.lgs. 196/03, nonché consenso espresso al trattamento ex art. 23 d.lgs. 196/03 in favore dell’Azienda.
Speciale
LA TUA PRIMA APP Il codice

lo trovi
nel DVD
virtuale!
Pianificare gli
itinerari al meglio
Ecco come creare una Web app che permette agli utenti di programmare al minuto
tutti gli spostamenti sfruttando l'API di Google senza spendere un capitale
iccome anche le migliori app di viaggi, - Sistema di registrazione e gestione utenti;
S come Wonderlog, non offrono
un sistema di calcolo dei tempi
- Selezione del tipo di mezzo di locomozione
per ogni tappa (al momento ci si muove a piedi);
di un itinerario preciso, possiamo valutare - Eliminazione di una tappa.
di proporre la nostra! Abbiamo quindi creato L'app usa un front-end in HTML con JavaScript
per voi un'app con queste caratteristiche: e PHP lato server. Non usa database, come
- Possibilità di indicare l'ora di inizio del viaggio; vedrete spiegato in seguito. Cominciamo quindi
- Aggiunta di tappe con dati geografici presi col codice HTML del modulo che userete come
automaticamente tramite Google Places API; contenitore delle tappe:
- Possibilità di aggiungere una permanenza <div id="form-container">
per ogni tappa; <form id="trip-form" class="mb-10">
- Possibilità di spostare le tappe una volta create; <div class="row mb-6">
- Accessibilità degli itinerari salvati da qualsiasi <label class="col-lg-4 col-form-label
dispositivo; required fw-semibold fs-6">Orario di inizio</label>
- Visualizzazione di tempi e chilometraggio. <div class="col-lg-8">
Quello che invece non fa e che potete, o dovete, <div class="row">
aggiungere voi è: <div class="col-lg-4 fv-row
PERCHÉ DOVETE SEMPRE PROGRAMMARE IN INGLESE

Anche se non è un requisito rigoroso è più facile collaborare con sviluppatori E, se volete lavorare nel settore
usare l'inglese nel codice, farlo può di diverse parti del mondo. Si eliminano tecnologico, la conoscenza dell'inglese
migliorare notevolmente l'efficacia le barriere linguistiche e si garantisce è spesso un requisito indispensabile.
e la collaborazione all'interno della che il codice e i commenti siano Molti annunci di lavoro indicano
comunità tecnologica globale. comprensibili a un pubblico più vasto. l'inglese come una competenza
Si tratta di garantire che il codice Inoltre, molti linguaggi e strumenti di obbligatoria. Avere una base di codice
sia accessibile, comprensibile programmazione sono stati progettati e un'esperienza in inglese può
e manutenibile da un pubblico più tenendo conto della sintassi inglese. migliorare le vostre prospettive di
ampio. Per questo motivo le app L'uso di questa lingua garantisce carriera. E ovviamente, la maggior parte
e i commenti in queste pagine saranno una migliore compatibilità con questi delle risorse di programmazione,
in inglese, anche se ovviamente vi strumenti e librerie. Non solo: se voi dei tutorial, della documentazione
spiegheremo ogni parte nel dettaglio. o la vostra organizzazione decidete e dei forum di domande e risposte sono
L'inglese è la lingua franca di aprire il vostro codice o di in inglese. Tenete anche conto che,
dell'industria tecnologica. La maggior condividerlo con una comunità se state vendendo un'app, il mercato
parte della documentazione, dei più ampia, l'uso dell'inglese lo rende internazionale è straordinariamente
linguaggi di programmazione e delle più accessibile a un pubblico globale. più grande di quello italiano e che
librerie è scritta in inglese. Quando Questo può aumentare l'impatto tradurre un'app oggi è estremamente
si usa questa lingua nel codice, e l'adozione del vostro software. semplice ed economico.
20 LINUX PRO 222

fv-plugins-icon-container"> const stepDiv = document.createElement('div');
<input type="time" stepDiv.id = `step${stepCount}`; TIP
id="start-time" class="form-control form-control-lg stepDiv.innerHTML = `
form-control-solid"> <hr> Come vedremo
</div> <div class="row"> nel tutorial sugli
abbonamenti
<div class="col-lg-8 fv-row <div class="col-lg-2 fv-row">
ricorrenti, per
fv-plugins-icon-container"> <span class="badge badge-primary
l'interfaccia
<a fw-bolder fs-4 mt-0 cursor-pointer" grafica abbiamo
href="javascript:void(0);" id="add-step-button" id="step${stepCount}-time">---</span> scelto un template
onclick="addStep()" class="btn btn- <div id="step${stepCount}-meters" commerciale.
primary">Aggiungi tappa</a> class="mt-1"></div> Voi potete
</div> </div> ovviamente
</div> <div class="col-lg-7 fv-row"> utilizzare qualsiasi
</div> <input type="text" id="step${stepCount}- modello derivato
</div> address" placeholder="Nome del luogo" class="form- da Bootstrap
che fa per voi ma
<div id="steps-container"></div> control form-control-lg form-control-solid">
considerate che o
</form> </div>
siete degli esperti
</div> <div class="col-lg-2 fv-row"> di interfacce
Nulla di esotico, come potete vedere. <input type="text" id="step${stepCount}- grafiche o è
Il DIV steps-container conterrà le varie tappe. delay" placeholder="Permanenza" class="form-control meglio che
In realtà, il grosso del codice HTML verrà form-control-lg form-control-solid"> lasciate il
disegnato direttamente da JavaScript, come </div> design di un'app
spiegheremo tra poco. E a proposito di JavaScript... <div class="col-lg-1 fv-row"> commerciale a
<input class="form-check-input mt-3" chi lo è. I template
Creare lo script che gestisce tutto type="checkbox" id="move-step-${stepCount}" spesso costano
molto poco e vi
La parte in JavaScript deve fare parecchio lavoro onchange="toggleMoveOptions(${stepCount})" />
fanno risparmiare
e vedrete che il file definitivo arriva quasi a 1.000 </div>
tantissimo tempo.
righe, anche se l'abbiamo compattato il più <div id="step${stepCount}-info" style="text-
possibile. Per questo motivo lo abbiamo diviso align:left;"></div>
in diverse sezioni, tutte caratterizzate da una </div>`;
striscia di commento. Troverete quindi:
- Creazione delle tappe; stepsContainer.appendChild(stepDiv);
- Spostamento delle tappe; const addressInput = stepDiv.
- Disegno del modulo; querySelector(`#step${stepCount}-address`);
- Calcoli di geolocalizzazione;
- Caching dati;
- Salvataggio e caricamento itinerari;
- Funzioni helper;
- Inizializzazione.
Iniziamo quindi con una pagina nuova e il modulo
vuoto, come vedete nell'immagine in questa
pagina. A questo punto, anche se l'utente
non ha fatto nulla, è già successo qualcosa:
updateSavedStepsDropdown();
addStep();
Questa è la sezione di inizializzazione dello script
che si occupa di due cose: caricare gli itinerari
salvati, che però vedremo dopo, e aggiungere
la prima tappa dell'itinerario. Questo ci dà
l'occasione di vedere come funziona l'aggiunta
di uno step dell'itinerario:
function addStep() {
const startTimeInput = document.

getElementById('start-time');
if (!startTimeInput.value && stepCount > 0) {
alert('Please enter a start time before adding
a step.');
return;
}
La grafica è semplice e vi abbiamo dato l'HTML in italiano ma, come vedete, il modulo è scritto con
stepCount++; JavaScript e abbiamo lasciato il testo nel codice in inglese, come da suggerimento del box qui di fianco
LINUX PRO 222 21

Tutorial
USARE LA CACHE PER I RISULTATI DI GOOGLE PLACES

Vari servizi di mappatura e preferenze degli utenti per offrire andrete a salvare nella cache tutte
navigazione (per esempio, Google i migliori percorsi possibili per la le informazioni che ricevete da
Maps e Waze) utilizzano algoritmi navigazione in città. Dato che la Google in modo che pagherete una
avanzati e dati in tempo reale vostra app si basa sulla precisione, sola volta per ogni richiesta, poi starà
per fornire un calcolo accurato abbiamo scelto di usare Google poi a voi ripulire la cache dopo 30
della distanza e una pianificazione Places, estremamente preciso. Però giorni. Così avrete la precisione del
del percorso. Questi servizi tengono perché regalare soldi a Google? Visto colosso americano per i vostri utenti
conto delle condizioni del mondo che la licenza permette di salvare in unita al fatto che non gli darete un
reale, dei dati sul traffico e delle locale i dati per 30 giorni, nel codice centesimo in più di quello che serve!
const delayInput = stepDiv. Come potete notare qui non ci limitiamo a

querySelector(`#step${stepCount}-delay`); controllare il campo appena modificato ma anche
addressInput.addEventListener('input', tutti quelli successivi, perché ovviamente ogni
debouncedHandleInputChange); tappa influenza quella dopo. Inoltre vedete che
delayInput.addEventListener('input', questa funzione delega a prepSteps il compito
debouncedHandleInputChange); di preparare le tappe e successivamente con
un loop le renderizza con renderSteps . Vediamo
const timeInput = stepDiv. quindi come funziona prepSteps :
querySelector(`#step${stepCount}-time`); async function prepSteps(startFrom, callback) {
timeInput.addEventListener('click', function () {
debouncedHandleMove(this); for (let i = startFrom; i <= stepCount; i++) {
}); prepStep(i);
} }
La funzione anzitutto si assicura che l'utente abbia Fermiamoci subito qui, perché prepSteps fa altro
aggiunto un'ora di inizio, essenziale per i calcoli ma siccome anzitutto prepara i singoli step,
del tempo trascorso. Aggiunge quindi la riga vediamo di cosa si occupa:
usando codice HTML e imposta i vari listener, function prepStep(stepNumber) {
che servono per aggiornare i dati ogni volta const stepsContainer = document.
che un utente modifica permanenza e location getElementById('steps-container');
e per intercettare i clic per spostare una tappa. const addressInput = stepsContainer.
Passiamo quindi all'interazione. querySelector(`#step${stepNumber}-address`);
const delay = parseInt(document.
Aggiungere un indirizzo getElementById(`step${stepNumber}-delay`).value, 10)
L'utente ha aggiunto una tappa o ha iniziato || 0;
con quella vuota e ora vuole passare a inserire
l'indirizzo. Può quindi iniziare a digitarlo e const originInput = stepsContainer.
usiamo una funzione asincrona per ascoltare querySelector(`#step${stepNumber - 1}-address`);
e aspettare due secondi dopo l'ultima pressione const origin = originInput ? originInput.value : null;
di un tasto in modo che sappiamo che l'utente const destination = addressInput.value;
ha smesso di digitare:
const debouncedHandleInputChange = // Controllare se lo step non è ancora stato aggiunto
debounce(handleInputChange, 2000); o se le posizioni sono diverse
A questo punto avviamo la funzione relativa: if (!steps[stepNumber] || steps[stepNumber].origin
async function handleInputChange(event) { !== origin || steps[stepNumber].destination !==
const modifiedStepNumber = parseInt(event.target. destination) {
id.match(/\d+/)[0]); // Se lo step non esiste o l'origine/destinazione è
diversa, aggiungere o sovrascrivere il passo.
prepSteps(modifiedStepNumber, function () { baseItem = makeBaseItem(origin, destination,
delay);
console.log("Rendering steps");
for (let i = modifiedStepNumber; i <= stepCount; steps[stepNumber] = baseItem;
i++) {
renderSteps(i); } else {
} // Se lo step esiste, aggiornare il ritardo
steps[stepNumber].delay = delay;
});
}
} }
22 LINUX PRO 222

Pianificare gli itinerari al meglio
La logica è semplice: se la tappa esiste già,

cioè se punto di partenza e di arrivo coincidono,
aggiorniamo solamente la permanenza, nel caso
l'utente l'abbia cambiata; se invece non esiste,
la creiamo. Per farlo usiamo makeBaseItem :
function makeBaseItem(origin, destination, delay,
full_address) {
const baseItem = {
origin: origin ? origin : null,
destination: destination ? destination : null,
full_address: full_address ? full_address : null,
distance: {
time: 0,
space: 0,
meters: 0
},
delay: delay ? delay : 0
};
return baseItem;
}
Questa funzione crea una tappa: attenzione alla
filosofia corretta! Per l'utente, infatti, una tappa
è il campo in cui scrive l'indirizzo di arrivo L'intero itinerario è conservato in formato JSON. Ogni elemento del pacchetto contiene origine,
destinazione, indirizzo completo, permanenza e dati sulla distanza
mentre a noi serve un oggetto che contenga
origine (che nel caso della prima tappa è nulla)
e destinazione, oltre all'indirizzo testuale getGeolocationFromCache(step.destination);
completo da visualizzare, alla permanenza
e ai dati geospaziali, che aggiungeremo fra poco. if (!originGeolocation) {
Ora che sapete cosa fa prepStep , possiamo // Fetch geolocation for origin if not in cache
tornare a prepSteps , cioè la funzione che const fetchDeferred = fetchGeolocation(step.
si occupa di preparare tutte le tappe per destination)
la visualizzazione. Dopo aver predisposto .then(data => { TIP
le singole tappe, ecco cosa fa:
JSON è facile
const geolocationUpdated = await $. if (data.status === 'OK' && data.
da leggere e da
when(updateGeolocationCache()); candidates.length > 0) {
scrivere, il che lo
const distanceDataUpdated = await $. rende un formato
when(updateDistanceData()); const candidates = data.candidates; pratico da
Questa è la seconda parte dello script ed usare per i file di
è la più delicata. Quindi facciamo due cose: const coords = candidates[0]. configurazione e
- Ci assicuriamo di avere tutti i dati geometry.location; lo scambio di dati.
di geolocalizzazione di tutte le tappe; const address = candidates[0]. Supporta dati
- Calcoliamo le distanze fra le tappe. formatted_address; strutturati
Vediamo ora la parte di geolocalizzazione. const name = candidates[0].name; con oggetti e
array annidati,
steps[stepNumber].destination =
consentendo di
Usare Google Places per le distanze name;
creare gerarchie
Ci occupiamo della logica per risparmiare soldi steps[stepNumber].full_address = di dati complesse.
usando Google Places e di perché usiamo questo address; Infine è
servizio nel box relativo, qui invece vedremo passo indipendente
a passo come funziona il sistema: saveGeolocationToCache(name, dal linguaggio: è
function updateGeolocationCache() { coords, address); supportato dalla
const stepNumbers = Object.keys(steps); console.log("Writing actual location maggior parte
const totalSteps = stepNumbers.length; name to input with ID"); dei linguaggi di
let fetchedCount = 0; console.log(`step${stepNumber}- programmazione,
consentendo uno
const deferreds = []; address`);
scambio di dati
document.
senza soluzione
for (const stepNumber of stepNumbers) { getElementById(`step${stepNumber}-address`).value = di continuità
const step = steps[stepNumber]; name; tra piattaforme
if (step.destination) { diverse.
const originGeolocation = }
LINUX PRO 222 23

Tutorial
UN'APP SENZA NECESSITÀ DI DATABASE?

Noterete che quest'app non utilizza un metodo per tenere traccia dei elementare di identificazione degli
un database. Il motivo è che salva vostri utenti ma se trovate un modo utenti e mantenere il sistema di
tutti i dati necessari o localmente di monetizzare diversamente salvataggio in semplici file di testo.
(dati geospaziali) o sul server (gli o se volete lasciarla gratuita, In ogni caso, potete installare e
itinerari). Se volete vendere la vostra probabilmente tutto quello che vi testare questa app senza neanche
versione dovrete ovviamente avere serve fare è aggiungere un sistema dover usare un database.
}) E la funzione updateDistanceData() è questa, tagliando

.catch(error => console.error('Error la parte iniziale che avvia il ciclo su tutte le tappe:
fetching geolocation for:', step.destination, error)); for (const stepNumber of stepNumbers) {
const step = steps[stepNumber];
deferreds.push(fetchDeferred); const { origin, destination, distance } = step;
} else {
if (distance.time === 0 && distance.space === 0) {
var full_address = originGeolocation.full_ const originCoords =
address; getGeolocationFromCache(origin);
steps[stepNumber].full_address = full_ const destinationCoords =
address; getGeolocationFromCache(destination);
} if (originCoords && destinationCoords) {

}
const cachedDistanceData =
fetchedCount++; getDistanceFromCache(origin, destination);
}
if (cachedDistanceData) {
return $.when(...deferreds).then(() => fetchedCount // Use cached distance data if available
=== totalSteps); steps[stepNumber].distance =
} cachedDistanceData;
console.log(`Distance data retrieved from
In questa funzione passiamo in rassegna tutte cache for Step ${stepNumber}:`, steps[stepNumber]);
le tappe e controlliamo se non abbiamo salvato } else {
TIP nello storage locale del browser i dati const fetchDeferred =
Sul DVD trovate il di geolocalizzazione ricevuti da Google. fetchDistanceData(originCoords, destinationCoords)
codice dell'app ed Se li abbiamo, li prendiamo da lì, risparmiando. .then(data => {
è perfettamente Se invece non li abbiamo, chiamiamo if (data && data.status === 'OK') {
funzionante fetchGeolocation() e li recuperiamo, per poi const distanceData = data.
e pronto per salvarli e aggiornare il form. Dal canto suo, rows[0].elements[0];
essere utilizzato.
fetchGeolocation() è una semplice chiamata al steps[stepNumber].distance.time =
Considerate
nostro server, nel nostro caso servito con PHP: distanceData.duration.value / 60;
però sempre
che per vendere const apiUrl = `/trips/proxy_places.php? steps[stepNumber].distance.space
l'app vorrete type=place&input= ${encodeURIComponent(address)}`; = distanceData.distance.text;
aggiungere degli Il file PHP si occupa di contattare l'API Google steps[stepNumber].distance.meters
aspetti, come Places e di restituire i dati relativi (qui non = distanceData.distance.value;
per esempio la vediamo il codice ma lo trovate sul DVD).
registrazione o Attenzione particolare richiede questa riga: saveDistanceToCache(origin,
anche un sistema document.getElementById(`step${stepNumber}- destination, steps[stepNumber].distance);
di pagamento. address`).value = name; }
Usate quindi il
Noi infatti lasciamo che l'utente scriva nel campo })
codice per testare
testo la location come la ricorda (potrebbe essere .catch(error => console.error('Error
l'app, giocarci e
poi fare tutte le "ristorante partenopea milano via padova") ma fetching distance data for Step:', stepNumber, error));
modifiche per noi poi scriviamo, per maggiori ordine e chiarezza,
renderla davvero il nome esatto restituito da Google Places deferreds.push(fetchDeferred);
vostra. E magari nel campo testo (per esempio "La Partenopea"). }
persino integrare Dopodiché, dopo la geolocalizzazione, sempre }
queste funzioni in prepSteps () usiamo Google Places per trovare }
in un'app con uno le distanze fra le tappe:
scopo ancora const distanceDataUpdated = await $. updatedCount++;
più ampio!
when(updateDistanceData()); }
24 LINUX PRO 222

Le singole tappe
devono essere
eleganti e facili
da leggere ma con
tutte le informazioni
necessarie per
il viaggiatore!
La logica impiegata risulta simile a quella un numero negativo significa che sta usando
dei dati di geolocalizzazione: se il dato esiste i trasporti (in questo momento l'app usa solo
non lo richiediamo al server, se non esiste lo i dati per i pedoni). In questo modo è possibile
richiediamo. La differenza è che qui dobbiamo regolare la distanza fra due luoghi anche quando
assicurarci di avere due valori per ogni step: si viaggia in treno, per esempio.
la location di origine e quella di destinazione.
Visualizzare la tappa
Calcolare i tempi A questo punto abbiamo un pacchetto dati
Siamo quindi arrivati alla fine di prepSteps : i dati perfettamente organizzato, con tempi, distanze,
per creare le tappe sono quasi pronti, vanno solo indirizzi, ecc. Possiamo quindi disegnare tutti
calcolate le distanze: gli step necessari:
calculateArrivalTimes(startTime); function renderSteps(stepNumber, reformat_date) {
Il sistema è il seguente (all'interno di un loop
che fa scorrere tutti gli step dopo il primo): stepData = steps[stepNumber];
const step = steps[stepNumber];
const duration = step.distance.time; // Assuming step. if (stepNumber > 1) {
distance.time is in minutes
const meters = step.distance.meters; var arrivalTime = stepData["arrival_time"];
const previousStep = steps[stepNumber - 1]; var distance_travelled = stepData["distance_
const delay = step.delay; travelled"];
// Calculate arrival time for this step if (reformat_date) {

const arrivalTime = new Date(previousArrivalTime. arrivalTime = new Date(arrivalTime);
getTime() + (duration * 60 * 1000) + (previousStep.delay }
* 60 * 1000));
steps[stepNumber].arrival_time = arrivalTime; var full_address = stepData["full_address"];
distance_travelled = (previousStep.distance_travelled > const arrivalTimeString =

0) ? previousStep.distance_travelled : 0; formatTime(arrivalTime);
const distance = stepData.distance;
if (previousStep.delay < 0) {
const stepTimeBadge = document.
//Negative delays mean a transport leg occurred, getElementById(`step${stepNumber}-time`);
ignore stepTimeBadge.innerHTML = arrivalTimeString;
} else { const stepMetersBadge = document.

getElementById(`step${stepNumber}-meters`);
distance_travelled += meters;
}
LAVORARE CON DATI ORDINATI
steps[stepNumber].distance_travelled = distance_
travelled; "Il rendering dell'itinerario è fatto
previousArrivalTime = arrivalTime; sempre da zero partendo dai dati, così
La struttura è piuttosto semplice: si prendono
la distanza e il tempo di ogni tappa e si non rischiamo problemi legati a eliminare
incrementano entrambi. Abbiamo anche
aggiunto un trucco: se l'utente inserisce o sostituire elementi a schermo”
LINUX PRO 222 25
Tutorial
SCEGLIETE UN TEMPLATE RESPONSIVE

A prescindere da quale modello A volte, infatti, i template sono offrire e di proiettate quell'immagine
grafico vogliate usare per responsive ma non perfetti e se mentale sul template per verificare
l'interfaccia della vostra le prestazioni peggiori sono fornite di avere tutti i componenti che
applicazione, assicuratevi che dai componenti che userete di più vi servono e che tutti funzionino
sia in grado di adattarsi ai vari tipi voi, è un problema. Cercate quindi perfettamente su tablet e cellulari.
di schermo, soprattutto per quello sempre di immaginarvi come la Scoprire tardi che ci sono dei problemi,
che riguarda le parti che userete. vostra app funzionerà, cosa dovrà infatti, può costarvi molto tempo.
if (distance_travelled > 999) { Spostare le tappe

distance_travelled = (distance_travelled / 1000). Cosa succede se gli utenti sbagliano a inserire una
toFixed(1) + " km"; tappa in una certa posizione o se nella pianificazione
} else { decidono di cambiare l'ordine dei posti da visitare?
distance_travelled += " m"; Semplice: possono spostare le tappe. Per farlo hanno
} due opzioni: una non è implementata ma è solo
preparata, ossia quella di scambiare due tappe.
stepMetersBadge.innerHTML = distance_ Possono farlo con il checkbox già previsto nel codice,
travelled; se volete aggiungere voi la logica. L'altra è spostare
const stepInfoDiv = document. una tappa prima di un'altra. Per farlo, cliccano
getElementById(`step${stepNumber}-info`); sul badge del tempo, che diventa rosso. Dopodiché
stepInfoDiv.innerHTML = `${stepData.full_ cliccano su quello di destinazione e le tappe vengono
address} (<span class="fw-bolder">${Math. ridisegnate. Per brevità non scendiamo nel dettaglio
ceil(stepData.distance.time)} minuti</span>, del codice ma vediamo solamente la parte finale:
${stepData.distance.space})`; resetFormAndCreateFields();
Questa funzione è importante perché spiega
} else { la filosofia dell'app lato client: prima creiamo tutti
i dati, elaborandoli in base alle scelte dell'utente,
const stepInfoDiv = document. poi semplicemente ripuliamo il modulo e creiamo
getElementById(`step${stepNumber}-info`); nuovamente tutti i campi:
async function resetFormAndCreateFields() {
stepInfoDiv.innerHTML = `${stepData.full_
address}`; stepsContainer.innerHTML = '';
stepCount = 0;
}
for (const stepNumber in steps) {
} if (steps.hasOwnProperty(stepNumber)) {
Questo è quello che succede:
- Se la tappa è la prima, non dobbiamo inserire addStep();
nessun dato di distanza, ecc., ma serve const step = steps[stepNumber];
semplicemente scrivere l'indirizzo nel campo const addressInput = document.
delle informazioni; getElementById(`step${stepNumber}-address`);
- Se la tappa è dalla seconda in poi, nel badge const delayInput = document.
dell'ora scriviamo l'ora di arrivo a quella location, getElementById(`step${stepNumber}-delay`);
appena sotto inseriamo la distanza percorsa fino addressInput.value = step.destination || '';
a quel momento e nel campo delle informazioni delayInput.value = step.delay || '';
aggiungiamo la distanza in minuti e chilometri
dalla tappa precedente. }
}
prepSteps(1, function () {
DATI ACCESSIBILI OVUNQUE
console.log("Rendering steps");
"Salvando i dati sul server in un file, for (let i = 1; i <= stepCount; i++) {
renderSteps(i, true);
anche senza database, potete rendere }
gli itinerari disponibili ai vostri utenti });
ovunque loro si trovino” }
26 LINUX PRO 222

Questo ci permette di evitarci lo stress di

riempire i campi facendo calcoli difficili, tenendo
in memoria dati da un campo per incollarli in
un altro, ecc. Prima aggiungiamo gli step, poi
riempiamo i campi testo, quindi renderizziamo
tutto: lineare e facile da debuggare,
due caratteristiche che è sempre utile
considerare quando si scrive del codice.
Salvare i dati
A questo punto abbiamo permesso agli utenti
di fare di tutto per creare il loro itinerario
ma manca ancora un pezzo fondamentale:
la possibilità di salvarlo.
<div class="mb-10">
<select id="saved-steps-dropdown" class="form-
select mb-5">
<option value="" disabled selected>Seleziona
un itinerario salvato</option>
</select>
<button onclick="saveSteps()" class="btn btn-

success">Salva itinerario</button>
<button onclick="loadSelectedStep()" class="btn
btn-warning">Carica itinerario selezionato</button>
<button onclick="clearLocalStorage()" class="btn
btn-danger">Elimina dati locali</button>
</div>
Questo codice HTML è gestito da una serie
di funzioni. Cominciamo con quella che salva:
function saveSteps() {
const stepName = prompt('Enter a name for this
step:');
if (!stepName) return; tutto e renderlo disponibile in remoto: L'itinerario del nostro
utente tappa per
// Retrieve the data from the AJAX request
tappa, con le relative
const data = { $data = json_decode(file_get_contents("php://input"), distanze, l'ora di inizio
stepName: stepName, true); della visita e il tempo
steps: steps, di permanenza. Ora è
startTime: document.getElementById('start- // Extract the data tutto sotto controllo!
time').value $stepName = $data['stepName'];
}; $steps = $data['steps'];
$startTime = $data['startTime'];
$.ajax({ // Save the data to a file
url: '/trips/save_data.php', $fileName = "saved_steps/" . $stepName . ".json";
type: 'POST', file_put_contents($fileName, json_encode(['steps' =>
data: JSON.stringify(data), $steps, 'startTime' => $startTime]));
contentType: 'application/json', Sempre sul server, un altro file, richiamato al
success: function (response) { caricamento dell'itinerario (che non vediamo
console.log('Data saved successfully:', per motivi di spazio), si occupa di prendere i dati:
response); $stepName = $_GET['stepName'];
}, $Path = 'saved_steps/' . $stepName . '.json';
error: function (error) {
console.error('Error saving data:', error); if (file_exists($Path)) {
} $stepData = file_get_contents($Path);
}); echo $stepData;
} else {
updateSavedStepsDropdown(); echo json_encode(['error' => 'Step data not found']);
} }
Il codice è semplice: anzitutto chiediamo all'utente E con questo avete a disposizione un'app che fa
di inserire un nome per l'itinerario, quindi quello che oggi neanche le applicazioni dedicate ai
prendiamo quel nome, le tappe e l'ora di inizio viaggi sanno fare con accuratezza. Personalizzatela
e li inviamo al server. Il file PHP si occupa di salvare al meglio e sarà una bomba! LXP
LINUX PRO 222 27

Speciale
IL MESSAGGIO
SI CELA TRA I PIXEL
Come nascondere informazioni testuali, audio, immagini e file binari
all’interno di uno o più video, anche compressi. Magia della steganografia!
a continua evoluzione personali, immagini, informazioni (figura 1), sono le proprietà che
L tecnologica ha imposto
lo sviluppo e
l’avanzamento di
medicali, dettagli bancari e
videoriprese pubbliche e/o private.
vanno sotto il nome di embedding
payload ed embedding efficiency.
L’embedding payload indica la
determinate tecnologie che hanno E la sicurezza? quantità di dati che possono essere
portato, in pochi anni, alla produzione Argomenti di ricerca fin dalla nascita nascosti all’interno del file cover
di dispositivi di storage sempre più delle comunicazioni digitali (sebbene mentre per embedding efficiency
capienti e, in proporzione, meno la steganografia non risulti essere si intende la capacità dell’algoritmo
costosi, a un netto miglioramento tanto recente, visto che di steganografia di nascondere
delle capacità delle videocamere storicamente risale a oltre 2.000 quante più informazioni sensibili
anche per le “entry-level” e a sensori anni fa), le tecniche per nascondere senza creare distorsioni apprezzabili
sempre più performanti a costi informazioni possono essere al file cover (impercettibilità).
contenuti. Lo scenario riportato utilizzate per mitigarne gli attacchi
ha incrementato esponenzialmente informatici, fornendo proprietà Un po’ di teoria
l’ammontare dei dati trasferiti via di sicurezza, privacy, confidenzialità Ulteriori caratteristiche richieste
rete o cavo e di riflesso negli appositi e integrità dei dati. I due aspetti alla video-steganografia, così
dispositivi di memorizzazione (hard più importanti di un algoritmo come a qualsiasi altro metodo
disk, flash USB, ecc.) tipicamente steganografico, che si tratti di steganografico, vedono la sicurezza
informazioni sensibili come dati un file testo, immagini, audio o video e la robustezza anche dal punto di
28 LINUX PRO 222

vista della compressione dei dati, intesa come
la capacità di non perdere le informazioni che
celano in seguito a una compressione del file
stego, di qualsiasi tipo e a qualsiasi formato
ci si riferisca. Va da sé come occorra accettare
sempre un compromesso tra la sicurezza,
la robustezza e la capacità di nascondere dati
senza creare artefatti audiovisivi che potrebbero
far sorgere qualche sospetto.
Frame per secondo

Nella sua forma più intuitiva è possibile
considerare un video come un insieme di
immagini statiche (frame) prese in istanti
temporali differenti. Quando vengono mandate
in esecuzione una dopo l’altra ne risulta il tipico
movimento da pellicola cinematografica.
Per evitare “movimenti a scatto” e avere
una buona fluidità il minimo numero di frame
necessari in un secondo non dovrebbe scendere la video steganografia nella sua forma basilare Figura 1
La classificazione
sotto i 25 ovvero, nella nostra analogia, può essere vista come una sorta di “estensione” dei metodi
considerando una persona che cammina, al della steganografia applicata alle immagini. steganografici
soggetto deve essere fatta una fotografia ogni I campi di utilizzo vanno dallo spionaggio digitali si divide
1/25 secondo (40 millisecondi). Va da sé che industriale e governativo, militare e paramilitare, in quattro
sottocategorie:
se il numero di frame è pari a 30 (33ms a al settore medicale e multimedia. Applicazioni
immagini, testo,
quadro) o a 60 (16,7ms a quadro) i movimenti più comuni vedono la steganografia video audio e video
diventano sempre più armoniosi e realistici, utilizzata per preservare la privacy delle persone
di contro c’è il numero di fotogrammi che passa, autorizzate a entrare in un’area riservata e
per esempio in un tempo di soli 60 secondi, rilevate nelle sequenze video catturate dalla
dai 1.500 nel caso di 25fps (frame per secondo) telecamera di sorveglianza; i dati dei soggetti
ai 1.800 per 30fps per arrivare ai 3.600 per rilevati possono essere incorporati nelle
60fps. Se da un lato si migliora la realtà del sequenze video.
movimento (sebbene oltre un certo limite
l’occhio umano non riesca più a percepirne le Il dominio compresso
differenze), dall’altro sono richieste maggiori I metodi di steganografia raw domain
capacità di storage nel caso si volesse considerano il Cover Media come una sequenza
memorizzare tutto su hard disk o di flusso in di fotogrammi all’interno dei quali vengono
streaming, e quindi di banda di rete, qualora lo si nascoste le informazioni previo uso di diverse
volesse trasmettere. In base ai concetti riportati, tecniche le quali possono operare nel dominio
GLOSSARIO DI BASE DELLA STEGANOGRAFIA

Cover Media Il file che celerà le informazioni Scrambling Rendere indecifrabile, codificare,
riservate. Generalmente si tratta di un video, criptare. Metodologie con le quali viene
ma può essere anche un file di testo, un PDF, manipolato un file audio/video/dati per renderlo
immagini o file audio nei diversi formati. intellegibile.
Stego Media È il file risultante, completo Transform Domain Questo metodo converte
di informazioni segrete, ottenuto dopo aver blocchi di fotogrammi del file cover dal dominio
applicato l’algoritmo di steganografia spaziale al dominio di trasformazione così
al Cover Media. definito poiché vengono applicati metodi
Steganalisi Scienza il cui scopo vede matematici; tra i più usati risultano la DWT
la rilevazione, previa opportuna analisi (Discrete Wavelet Transform), la DCT
in funzione del formato del file, (Discrete Cosine Transform) e loro inverse.
di informazioni nascoste. I dati segreti vengono incorporati nei
Spatial Domain Tecnica che utilizza i valori coefficienti della trasformazione nei bit meno
di intensità che possono assumere i pixel significativi prima di eseguire la trasformazione
nel cover frame per nascondere i dati segreti, per inversa e il “riassemblaggio” per produrre
esempio nei bit dell’intensità del colore per i 3 il file stego. Le descrizioni formali esulano
colori RGB (Red-Green-Blue). Uno dei metodi più dal seguente contesto e si rimandano
noti è per esempio l’LSB (Least Significant Bits). gli interessati a testi specializzati.
LINUX PRO 222 29

Speciale
Figura 2 Dallo schema di codifica appare netta la distinzione tra quello che Figura 3 Le informazioni che si vogliono celare vengono incorporate
viene definito “raw domain” (dominio grezzo) e il “compressed domain” in uno o più fotogrammi del video
spaziale (Spatial Domain) oppure nel dominio e la trasmissione poiché è richiesto meno spazio
della frequenza (Transform Domain); fare per la loro archiviazione, il trasferimento via rete
riferimento alle omonime voci nei glossari. è più veloce e richiede meno larghezza di banda.
Prima dell’inclusione l’informazione da celare Con queste premesse le tecniche di
viene sottoposta a una pre-elaborazione per occultamento dati nel dominio compresso
l’eventuale applicazione di un algoritmo di hanno guadagnato inevitabilmente popolarità
cifratura e di un codice di correzione errori al negli ultimi tempi. Di contro, provocando
fine di garantirne la sicurezza e l’integrità dei la compressione, la rimozione di elementi
dati qualora il Cover Media subisse attacchi o ridondanti riduce lo spazio necessario a
“cadute di fotogrammi” durante la trasmissione. nascondere informazioni e in alcuni casi
La maggior parte dei metodi di steganografia può scendere nell’ordine dei byte o addirittura
video proposti utilizza tecniche Raw Domain rendere il video inadeguato a essere utilizzato
perché sono intuitivi nel principio di come carrier!
funzionamento e facili da implementare
in termini di codice da scrivere (figura 2) Un esempio applicativo
e (figura 3). Ma se da un lato c’è la facilità Le nozioni riportate sono solo una piccola parte
di implementazione dall’altro c’è il problema di un mondo dedicato alla video steganografia,
che trattasi di tecniche facilmente attaccabili sempre in evoluzione con nuove tecniche,
in particolare dai cosiddetti attacchi di migliorie di quelle conosciute riportate nelle
compressione. C’è in realtà anche un motivo varie pubblicazioni o presentate a convegni
più pratico che rende la video steganografia e conferenze. La scelta di un programma
raw domain meno utilizzabile; i video in forma è sempre non facile da attuare considerando
compressa sono preferiti per lo stoccaggio che trattasi anche di argomenti “di nicchia”
(sebbene molto studiati) e, anche se
principalmente Open Source, non si trovano
quasi mai nei repository delle distribuzioni
se non in casi specifici. Il programma OpenPuff
permette di raggiungere gli obiettivi indicati.
Noi l’abbiamo testato su distribuzione ROSA
Linux (https://www.rosalinux.ru/) e tutto
ciò che occorre fare, una volta effettuato il
download e decompresso il file zip, è entrare
nella cartella creata dalla decompressione
cd OpenPuff_release e lanciare il comando
wine ./OpenPuff.exe il quale non installerà nulla,
lancerà direttamente il programma (figura 4).
Lo script OpenPuff.sh verificherà, su
distribuzioni Debian/Ubuntu e derivate, la
presenza di Wine e procederà eventualmente
all’installazione per poi lanciare il programma.
Lo script Uninstall.sh, se lanciato, cancellerà
Figura 4 OpenPuff è per Windows ma utilizzarlo in Linux non tutta la cartella OpenPuff_release e rimuoverà
comporta alcun problema poiché è pienamente funzionante la cartella nascosta .wine nella home utente,
con WINE (https://www.winehq.org/) quindi attenzione perché in caso vi fossero
30 LINUX PRO 222

Il messaggio si cela tra i pixel
installati dei programmi che girano in Wine

questi verrebbero cancellati!
Altre funzionalità
Molto interessante la capacità di OpenPuff
di nascondere l’informazione segreta in più
file anche di natura diversa tra loro, per esempio
utilizzando due file PDF, un file MP3, due file
video, ecc. In sostanza “pezzi” (chunk)
dell’informazione complessiva verranno celati
nei due file video, un’altra certa quantità nei due
file PDF e così via. L’utente per poter recuperare
l’informazione dovrà essere in possesso di tutti
i file; un po’ come accade con gli archivi
compressi multipli, se non si hanno tutti i file
a partire dal numero 1 non è possibile
recuperare l’intero contenuto. OpenPuff oltre
che steganografico è anche un programma multi
Figura 5
crittografico; i dati vengono dapprima sottoposti Può sorprendere la bassa capacità di OpenPuff
a crittografia, fa seguito un’operazione di immagazzinamento dei file video, ma se si vuole consente di celare
scrambling quindi viene aggiunto del “rumore” avere maggiore sicurezza e più impercettibilità i dati all’interno di
casuale (whitening). A dispetto di questa va da sé che deve ridursi l’entità di ciò che andrà tipologie diverse di
cover media. In
apparente complessità, il suo uso è molto ad alterare il file e che potrebbe destare qualche ogni momento si
intuitivo e si riduce a 4 passi essenziali. sospetto. A titolo di esempio, in un file VOB di può conoscere la
Vediamoli in dettaglio. circa 40MB è possibile nascondere poco meno dimensione che i
Dalla schermata della figura 4 cliccate su Hide di 7KB impostando il massimo numero di bit ½ carrier dovranno
(50%) in Bit Selection Options. Al termine nascondere
nel pannello Steganography per entrare nella
sezione Data Hiding (figura 5). Nel riquadro (1) fate clic sul pulsante Hide Data in basso a
dovranno essere inserite le password tra loro destra indicando il percorso di salvataggio dove
non correlate necessarie alla crittografia e allo dovranno essere salvati i file stego.
scrambling. Nel riquadro di destra (2) occorre Per il recupero dalla schermata di figura 4
indicare i dati che si desiderano nascondere optate per Unhide nel pannello Steganography.
utilizzando il pulsante Browser. Nel rigo Size Occorre rispettare 3 regole fondamentali:
verrà riportata la dimensione che il/i file carrier inserire correttamente le password (A con A,
dovranno nascondere. Il totale del valore verrà B con B e C con C), rispettare l’ordine dei carrier
riportato nel riquadro (3) Carrier Selection in fase di implementazione (colonna Chain
nel rigo in basso Selected/Total dove occorre Order) aggiungendo i file stego uno dopo l’altro
aggiungere il o i carrier che dovranno farsi in base all’ordine di implementazione originale
carico di nascondere i dati. Se ne dovranno e infine rispettare l’esatta selezione in Bit
aggiungere in numero e tipologia tali da riuscire Selection Options ai valori originali per ogni
a coprire il totale da celare. Quando ciò accadrà singolo formato di file utilizzato come carrier e
il rigo Selected/Total diventerà verde infine indicando il percorso di salvataggio (figura
e sarà quindi possibile passare al riquadro 6). Nell’immagine di apertura dell’articolo vedete
(4) Bit Selection Options per la selezione il confronto tra 2 dei 4 file originali utilizzati dal
del numero di bit da utilizzarsi (tecnica LSB). programma e i rispettivi file stego. Essendo
dei video una fotografia non rende l’idea, gli
interessati non possono che provare la procedura
e constatare loro stessi il risultato.
Il software è sviluppato da un ingegnere italiano,
quindi si ha il manuale (anche) in questa lingua,
che suggeriamo di leggere poiché entra nel vivo
del principio di funzionamento del programma
e dal punto di vista della crittografia così come
su alcuni concetti di steganografia e steganalisi.
In più raccomandiamo di visitare il sito
di OpenPuff poiché presenta nella pagina
del software una vera e propria miniera di
informazioni, articoli, pubblicazioni, video, letture,
tesi e svariati esempi applicativi sull’argomento.
Figura 6 Con OpenPuff è possibile utilizzare un certo numero di carrier
con le immagini nei formati BMP, JPG, PCX, PNG e TGA, audio con
Per ulteriori approfondimenti potete visitare
supporto ad AIFF, MP3, NEXT/SUN e WAV, documenti PDF e file video ResearchGate (https://www.researchgate.net/)
(3GP, FLV, MP4, MPG, SWF, VOB) e cercare “video steganography”. LXP
LINUX PRO 222 31

Recensioni
Tutte le novità in campo software e hardware testate e valutate ogni mese dai nostri laboratori
Se vuoi segnalarci qualche novità scrivi a redazione@linuxpro.it
Una breve QUESTO MESE...

legenda Test >>
Ogni test di questa sezione
è accompagnato da un giudizio
che riassume con quattro indici Raspberry Pi 5
numerici le principali qualità Un salto in velocità e potenza
dell’applicazione o del prodotto
per la scheda più amata
hardware messo alla prova.
I laboratori di Linux Pro assegnano un dai maker pag. 33
voto da 1 a 10 alle seguenti categorie:
Caratteristiche: fornisce tutte

Roboplant
le funzioni di cui abbiamo bisogno? Idroponica su Marte con
È innovativo? simpatici robot pag. 34
Prestazioni: esegue in maniera
efficiente le sue funzioni? Raspberry Pi 5
È veloce e affidabile? MewnBase
Facilità d’uso: dispone di
Un gatto esploratore in un
un’interfaccia grafica chiara e
facilmente fruibile? ambiente stimolante pag. 34
La documentazione che lo
accompagna è sufficientemente
completa ed esaustiva? Raspberry Pi OS
Qualità/prezzo: ha un prezzo
La nuova edizione,
competitivo? Vale i soldi richiesti
per il suo acquisto? denominata Bookworm,
Il nostro giudizio viene porta con sé Wayland,
poi riassunto da un voto finale, PipeWire, Firefox e
espresso anche graficamente.
Ecco la legenda dei voti: prestazioni migliorate pag. 36
10 Nulla da eccepire. Un prodotto

praticamente perfetto.
Tux N Mix MewnBase
8-9 Un buon prodotto.
I pochi difetti presenti
non sono gravi.
Tanto ottimo software per
esprimere la vostra creatività
6-7 Compie il suo lavoro
ma necessita
di ulteriori sviluppi.
con musica, video e grafica
da una distribuzione ancora
4-5 Deve migliorare prima
di raggiungere
un voto sufficiente.
tutta da scoprire pag. 37
1-3 Un completo disastro.

Gli sviluppatori devono
tornare alla fase di progettazione.
Ricordiamo infine che i software Da non perdere >>
citati nelle sezioni Confronto I migliori programmi pag. 38
e Da non perdere sono spesso
presenti nel DVD sotto la voce
“Rivista” sotto forma di codice Panoramica >> Raspberry Pi OS
sorgente o binario. JavaScript in un lampo pag. 44
32 LINUX PRO 222

Test Hardware
Raspberry Pi 5
Un salto in velocità e potenza per la scheda più amata dai maker
onsiderando che l'uscita della Raspberry

SPECIFICHE
Processore:
C Pi 4 risale al giugno del 2019 non si può dire
che questa novità non si sia fatta sospirare
Broadcom ma, visto che per la carenza di componenti si pensava
BCM2712 2,4 a un'uscita nel 2024, il fatto che sia arrivata a fine
GHz quad core ottobre è una buona notizia. Soprattutto, però,
Arm Cortex è valsa la pena di aspettare perché il salto di velocità
A76 a 64 bit, e potenza, a un prezzo che sostanzialmente tiene
con estensioni il passo con l'inflazione, farà la gioia di molti maker.
per la
crittografia, 512 Processore e scheda grafica rinnovati
KB di cache L2 Prima di tutto, la Raspberry Pi 5 offre un aumento
per core e 2 MB da due a tre volte delle prestazioni della CPU rispetto
di cache L3 alla Pi 4 grazie al processore Arm Cortex-A76 quad
condivisa core a 64 bit che opera a 2,4 GHz, mentre il modello
GPU: precedente aveva un Cortex-A72 a 1,5 GHz, portato
VideoCore VII a 1,8 GHz dall'aggiornamento del firmware.
che supporta Anche il processore grafico ha visto un sostanziale velocità di trasferimento verso i drive UAS esterni
OpenGL ES 3.1 miglioramento, con una GPU VideoCore VII e altre periferiche ad alta velocità. Le interfacce
e Vulkan 1.2 a 12 core con caratteristiche aggiornate che lavora dedicate per telecamere e display MIPI a due corsie
Memoria: a 1 GHz e può portare a un aumento delle prestazioni da 1 Gbps presenti nei modelli precedenti sono state
SDRAM della GPU di circa due o due volte e mezzo rispetto sostituite da una coppia di ricetrasmettitori MIPI
LPDDR4X 4267 alla Pi 4. Il nuovo modello offre anche una doppia a quattro corsie da 1,5 Gbps, triplicando l'ampiezza
(4 GB e 8 GB) uscita di visualizzazione 4Kp60 su HDMI e un di banda totale e supportando fino a due dispositivi.
Connettività: migliore supporto per la fotocamera grazie alla Anche le prestazioni di picco delle schede SD sono
Wi-Fi® 802.11ac revisione del suo processore di segnale d'immagine. raddoppiate, grazie al supporto della modalità
Dual-band ad alta velocità SDR104 e, per la prima volta, la
Bluetooth 5.0 / Tanti miglioramenti su tutti i fronti piattaforma espone un'interfaccia PCI Express 2.0
Bluetooth Low Per la prima volta, una Raspberry Pi di dimensioni a corsia singola, fornendo il supporto per periferiche
Energy (BLE) standard utilizza un processore costruito ad alta larghezza di banda. Ci sono anche molti altri
Connettori: internamente all'azienda. Il "southbridge" miglioramenti, come la gradita aggiunta di un
Slot micro SD, RP1 fornisce la maggior parte delle capacità pulsante di accensione che, se premuto una volta,
doppia porta di I/O della Raspberry Pi 5 e porta un notevole visualizza un menu di spegnimento/logout e,
HDMI, 2 porte cambiamento nelle prestazioni e nelle funzionalità con una seconda pressione, attiva lo spegnimento
USB 3.0 2 USB delle periferiche. L'ampiezza di banda USB sicuro. Non interrompe però l'alimentazione
2.0, Gigabit aggregata è più che raddoppiata, per una maggiore ed è simile allo standby. LXP
Ethernet, 2
MIPI, GPIO
a 40 pin VERDETTO
DISTRIBUTORE: Raspberry Pi
WEB: https://www.raspberrypi.com
PREZZO: 70 € (4 GB RAM) e 93,60 € (8 GB)
CARATTERISTICHE 9/10 FACILITÀ D’USO 9/10

PRESTAZIONI 9/10 QUALITÀ/PREZZO 8/10
La Pi 5 è dotata
del processore
Broadcom Una nuova edizione che migliora su tutti i fronti la già
BCM2712 quad ottima Raspberry Pi 4. La Pi 5 è attualmente molto
core Arm Cortex difficile da trovare, ma se ci riuscite vale l'acquisto.
A76 a 2,4 GHz,
che la rende fino a
tre volte più veloce Il voto di Linux Pro 9/10
della Pi 4
LINUX PRO 222 33

Test Videogiochi
Roboplant
Idroponica su Marte con simpatici robot
oboplant è un gioco di simulazione

SPECIFICHE
Minime
R d’impresa spaziale in cui gestite un’azienda
agricola idroponica su Marte. Dovete
OS: Linux costruire e dirigere una centrale idroponica,
GPU: piantando, raccogliendo e vendendo le colture.
GPU dedicata Per farlo, controllate una squadra di robot chiamati
AMD/NVIDIA, Beebop 179 e dovete sopravvivere a molte sfide delle macchine idroponiche e saper generare e
4 GB di VRAM mentre producete piante deliziose, che possono sfruttare i profitti delle vendite. Anche prendersi
dedicata essere quelle del nostro pianeta o autoctone, cura dei robot, che hanno esigenze psicologiche
(Radeon RX se sapete coltivarle! Strategia e pianificazione umane, è fondamentale. Il gioco ha uno stile grafico
580, Geforce svolgono un ruolo essenziale per avere il successo divertente e colorato e i robot hanno personalità
GTX 1080) ed è importante acquisire una buona conoscenza e abilità uniche che li rendono molto simpatici.
CPU: AMD
o Intel, 4 GHz VERDETTO
(AMD Ryzen 5
3600, Intel i5 SVILUPPATORE: Rebelpug
8600) WEB: https://bit.ly/40vQKYu PREZZO: 10,99 €
Memoria:
8 GB di RAM GIOCABILITÀ 8/10 LONGEVITÀ 8/10
GRAFICA 9/10 QUALITÀ/PREZZO 9/10
Il voto di Linux Pro 8/10
MewnBase
Un gatto esploratore in un ambiente stimolante
n titolo di sopravvivenza spaziale e di

SPECIFICHE
Minime
U costruzione di basi ambientato su un pianeta
brullo in cui il giocatore, un gatto che esplora
OS: Ubuntu lo spazio, deve procurarsi il cibo per nutrirsi, esplorare
16.04 o l’ambiente, raccogliere risorse e creare oggetti per
successivo sopravvivere. Il gioco prevede tre diverse modalità:
GPU: Tutorial, Normal e Creative. Nella prima imparerete
Intel HD4000 a conoscere il funzionamento del gioco e a di sopravvivere. Il titolo ha una grafica retro in pixel
o superiore prosperare in esso. In Normal dovete completare art, una colonna sonora piacevole e include un ciclo
con OpenGL la missione sopravvivendo abbastanza a lungo giorno-notte ed effetti meteorologici che influenzano
2.1 da costruire un razzo per partire, mentre in Creative la partita. Nel complesso è accattivante e divertente
CPU: 2.0 Ghz avete tutto a disposizione e non dovete preoccuparvi ed è disponibile in italiano. LXP
Dual Core
Memoria: VERDETTO
4 GB di RAM
DISTRIBUTORE: Cairn4
WEB: https://cairn4.com PREZZO: 8,19 €
GIOCABILITÀ 9/10 LONGEVITÀ 9/10

GRAFICA 8/10 QUALITÀ/PREZZO 9/10
34 LINUX PRO 222

ABBONATI
ALLA TUA RIVISTA PREFERITA
LA RICEVI A CASA APPENA STAMPATA
JQuery Ha ancora senso usarlo? Scoprilo con noi! NEL
WEB CONSEGNA GARANTITA ENTRO 48H
DVD
D le istruzioni
ioni
a pagina 4
onii
Clonezilla 3.1.1-27
FreeBSD13.2
Garuda Linux
PipeWalker
Ferdium 6.6.0
Furnace 0.6
L’unica guida libera al mondo dell’Open Source PRO Touché 2.0.10

FeedDeck 1.1.0
e molto altro...
COPIA & VENDI JQuery Ha ancora senso usarlo? Scoprilo con noi! NEL
WEB
LA TUA APP
DVD
DVD
Ti regaliamo Clonezilla 3.1.1-27
FreeBSD13.2
le istruzioni
zioni
a pagina 4
onii
noi il codice! Garuda Linux

PipeWalker
Ferdium 6.6.0
Furnace 0.6
Fai soldi con un tuo progetto partendo dalla code base che ti diamo
L’unica guida libera al mondo dell’Open Source PRO
P RO Touché 2.0.10
FeedDeck 1.1.0
e molto altro...
CO
OPIA & VENDI
Sfrutta le API di Maps pagando solo centesimi a Google

Pubblica il tuo sistema per creare un itinerario per i viaggi
Personalizza l’app per gestire pagamenti ricorrenti sulla carta di credito
LA TUA APP
Fai soldi
s di ccon un tuo
t progetto
rogett partendo
artendo dal
dalla code base
se che ti diamo
Tii regaliamo
nnoi
li
oi il codice!
BUTORE: PRESS-DI, SEGRATE
Sfrutta le API di Maps pagando soolo centesimi a Google

Ecco la nuova versione Pubblica il tuo sistema per creare un itinerario per i viaggi
Personalizza l’app per gestire pagamenti ricorrenti sulla ca
ccart
art
rta
ta di credi
redito
di Fedora, la distro
ANE SPPA - ABB. POST. - D.L. 353/2003 (CONV. IN L. 27/02/2004 N. 46) ART. 1, COMMA 1, S/NA - DISSTRIBUTORE:
8,4 GB per tutti i gusti

DI SISTEMI Ecco la
l nuooova versione
i
OPERATIVI di Fedooora, la distro
E APP! La tel
teleca
ecamer
ecameraa con
mer conn il br
bbracci
bra
rracc
ccio
ccci
cciio 8,4 GB perr tutti i gusti
DI SISTEMI
OPERATIVI
SISTEMA DI SICUREZZA DAVVERO SMART E APP! L ttelecam
La telecam
lecamera ccon
lecamera onn il bra
brac
br
brac
raccio
cccio
iio
Costruisci una sentinella in grado di raccogliere SISTEMA DI SICUREZZA DAVVERO SMART
Costruisci una sentinella in grado di raccogliere
oggetti in remoto con Arduino o Rasperry Pi oggetti in remoto con Arduino o Rasperry Pi
NUOVO!
ICARE
2 DVD DA SCAR CE Pagine Web ricche senza codice
codi
NUOVO! CON IL CODI IN
TARIFFA R.O.C. - POSTE ITALIA
ALL’INTERNO TE
Ecco i plug-in Open più potenti per JavaScript
RICARE
2 DVD DA SCADICE Pagine Web ricche senza codice ESCLUSIVA PER con cui fornire siti completi di ogni funzionalità
senza neanche dover saper programmare
CON IL CO IN Ecco i plug-in Open più potenti per JavaScript
ALL’INTERNO TE
ESCLUS IVA PER con cui fornire siti completi di ogni funzionalità Bimestrale - N.222 - 7,90 €
Hardware Programmi
senza neanche dover saper programmare Più velocità e potenza per Con Warehouse la gestione

Hardware Programmi
Più velocità e potenza per Con Warehouse la gestione
COP_001_LXP222_cover.indd 1 13/11/2023 15:57:53

C l’abbonamento
Con l’ bb t
cartaceo la versione
digitale è in OMAGGIO!
Riceverai 6 numeri a soli
,90€
32 invece di 47 ,40€
DISPONIBILE
ANCHE IN
DIGITALE
Scansiona il QrCode per abbonarti oppure contattaci

Telefono online email WhatsApp
02 87168197 www.sprea.it/linuxpro abbonamenti@sprea.it 329 3922420
Solo messaggi
Informativa ex Art.13 LGS 196/2003. I suoi dati saranno trattati da Sprea SpA, nonché dalle società con essa in rapporto di controllo e collegamento ai sensi dell’art. 2359 c.c. titolari del trattamento, per dare corso alla sua richiesta di abbonamento. A tale scopo, è indispen-
sabile il conferimento dei dati anagrafici. Inoltre previo suo consenso i suoi dati potranno essere trattati dalle Titolari per le seguenti finalità: 1) Finalità di indagini di mercato e analisi di tipo statistico anche al fine di migliorare la qualità dei servizi erogati, marketing, attività
promozionali, offerte commerciali anche nell’interesse di terzi. 2) Finalità connesse alla comunicazione dei suoi dati personali a soggetti operanti nei settori editoriale, largo consumo e distribuzione, vendita a distanza, arredamento, telecomunicazioni, farmaceutico, finanziario,
assicurativo, automobilistico e ad enti pubblici ed Onlus, per propri utilizzi aventi le medesime finalità di cui al suddetto punto 1) e 2). Per tutte le finalità menzionate è necessario il suo esplicito consenso. Responsabile del trattamento è Sprea SpA via Torino 51 20063 Cernusco
SN (MI). I suoi dati saranno resi disponibili alle seguenti categorie di incaricati che li tratteranno per i suddetti fini: addetti al customer service, addetti alle attività di marketing, addetti al confezionamento. L’elenco aggiornato delle società del gruppo Sprea SpA, delle altre
aziende a cui saranno comunicati i suoi dati e dei responsabili potrà in qualsiasi momento essere richiesto al numero +39 0287168197 “Customer Service”. Lei può in ogni momento e gratuitamente esercitare i diritti previsti dall’articolo 7 del D.Lgs.196/03 – e cioè conoscere
quali dei suoi dati vengono trattati, farli integrare, modificare o cancellare per violazione di legge, o opporsi al loro trattamento – scrivendo a Sprea SpA via Torino 51 20063 Cernusco SN (MI).
Test Distribuzione Linux
Raspberry Pi OS
La nuova edizione, denominata Bookworm, porta con sé Wayland,
PipeWire, Firefox e prestazioni migliorate
a nuova edizione di
IN BREVE
Modifiche
L Raspberry Pi OS, basata
sulla release Debian
strutturali sia di quest’anno Bookworm (che
sul fronte del prende il nome da un personaggio
sistema di di Toy Story 3), apporta una serie
visualizzazione di modifiche e miglioramenti.
sia su quello Il più importante è il passaggio
della gestione a Wayland da X11 come sistema
dell’audio. di visualizzazione. Wayland offre
In più, nuovi vantaggi in termini di prestazioni
plug-in e il combinando il display server
supporto per e il window manager in un’unica
una versione applicazione chiamata compositor,
ottimizzata semplificando il tracciamento delle
di Firefox. finestre e migliorando la sicurezza
grazie all’isolamento delle
applicazioni. Raspberry Pi OS Il desktop di Wayfire è praticamente uguale a quello di Bullseye ma sotto il cofano tutto
ora utilizza per default Wayland è cambiato a vantaggio di migliori prestazioni e funzionalità
con il compositor Wayfire per
Raspberry Pi 4 e 5. Le piattaforme precedenti ridotta, una superiore gestione dei dispositivi audio
passeranno a Wayfire in futuro, ma per Bluetooth e una maggiore compatibilità con Wayland.
ora continuano a usare X11 con Openbox. Gli utenti possono controllare PipeWire utilizzando
le applicazioni che in precedenza lavoravano con
Nuovi plug-in, audio e supporto per Firefox PulseAudio, mantenendo così le consuete funzionalità
Sono stati introdotti due nuovi plug-in: Power, di gestione del volume e del microfono. Infine, una
che monitora i problemi di alimentazione e fornisce versione di Mozilla Firefox ottimizzata per Raspberry
notifiche e informazioni, e GPU, che visualizza il carico Pi è ora ufficialmente supportata e offre una migliore
Arriva una versione della GPU in un grafico. Il primo è abilitato per esperienza di navigazione. Include il supporto del
di Firefox impostazione predefinita, mentre il secondo può codec V4L2 per un’efficiente decodifica hardware
ottimizzata per essere aggiunto tramite le impostazioni della barra h.264, che consente una riproduzione video HD più
Raspberry Pi, con
delle applicazioni. Anche il fronte audio è stato fluida sui vecchi modelli. È stato aggiunto il supporto
decodifica video
hardware, Widevine rinnovato. PulseAudio è stato infatti sostituito Widevine DRM per i servizi di streaming video
DRM e prestazioni dal più recente sistema audio PipeWire, che offre e Firefox su Raspberry Pi OS è ora compatibile
migliorate un migliore supporto audio per i video, una latenza con le telecamere CSI. LXP
VERDETTO
PRODUTTORE: Raspberry Pi
WEB: https://bit.ly/4714jl3
LICENZE: Varie

PRESTAZIONI 9/10 DOCUMENTAZIONE 8/10
Ottimi miglioramenti su tutti i fronti per questa nuova edizione.

La documentazione è ancora da finalizzare nel dettaglio.
36 LINUX PRO 222

Test Distribuzione Linux
Tux N Mix
Tanti programmi di qualità per esprimere la vostra creatività con
musica, video e grafica da una distribuzione ancora tutta da scoprire
ggi vogliamo parlarvi di

IN BREVE
Una distro
O una distribuzione che non
è molto nota neanche tra
ancora poco gli esperti del settore ma che può
nota e diffusa essere interessante per gli amanti
ma che offre della creatività. Ci sono infatti due
tanti strumenti opzioni di installazione per la distro:
per chi ama Elegance, che è mirata all’uso
creare con quotidiano, e Tux N Mix vero
Linux e e proprio, che si presenta come
permette di “il tuo sistema operativo per
avere subito la creazione di musica, video
pronto all’uso e grafica”. Se per l’uso quotidiano
tutto quel ci sono così tante alternative da
che serve per rendere un piccolo progetto poco
grafica, video stimolante, la seconda racchiude Tux N Mix è un progetto francese e abbiamo tenuto le foto della versione originale, ma durante
e musica una serie di strumenti che possono l’installazione potete scegliere la lingua e iniziare a usare la distro per creare, per esempio, musica
rendere più facile lavorare
sui progetti artistici. oltre a Mixxx per i DJ e al convertitore multimediale
Ciano. La dotazione video prevede strumenti sia per gli
Tanti strumenti sottomano esperti sia per chi è alle prime armi offrendo Avidemux
La distribuzione è basata su Manjaro da cui prende, per il semplice editing video, Kdenlive per l’editing
oltre al desktop Cinnamon, il nucleo del sistema professionale, Blender per la modellazione 2D e 3D
operativo, il gestore di pacchetti e il software per e anche DevedeNG e Brasero per salvare su supporti
l’utilizzo quotidiano del computer. Dove Tux N Mix fisici. Per foto e grafica sono inclusi Darktable, Gimp,
spicca, però, è nei programmi offerti per la creatività. Inkscape e Krita mentre per la registrazione
Per l’audio, per esempio, include tutto quel che serve e riproduzione multimediale ci sono VLC, OBS
per registrare e mixare le vostre creazioni. Sono inclusi e KDE CONNECT. Il mondo Linux è fatto anche
i server audio Pipewire e Jack e le suite Cadence di iniziative individuali e progetti nati dalla passione
(Carla, Catia, Catarina) e NON (mixer e sequencer) e scoprire delle chicche nascoste è una delle gioie
oltre ai sequencer LMMS e Hydrogen. Per gli strumenti che ci riserva il nostro sistema operativo preferito.
e le drum machine propone Guitarix, Drumk, Qsynth e Tux N Mix è proprio una di queste e vale la pena di
Tux N Mix raccoglie
anche tool per
altro, mentre per la registrazione troviamo Audacity provarlo, magari nella versione Live proposta, per creare
l’elaborazione e Ardour. Ci sono inoltre un analizzatore di spettro con con tanti strumenti preselezionati e scoprire qualcosa
grafica e video Sonic Visualiser e un editor di partiture con Musescore, che gli altri utenti Linux spesso non conoscono. LXP
VERDETTO
PRODUTTORE: Il team di Tux N Mix
WEB: https://tuxnmix.org/
LICENZE: Varie

PRESTAZIONI 8/10 DOCUMENTAZIONE 7/10
Il progetto non offre ancora una solida community, ma è una

chicca da scoprire per chi vuole creare e ama l’esclusività!
LINUX PRO 222 37

I migliori nuovi programmi Open Source
Da non perdere
Dosage Parallel Disk Usage (pdu) Flatseal FeedDeck Touché
Furnace Ferdium Floorp Mission Center PipeWalker Stendhal
GESTIONE TERAPIE MEDICHE
Dosage
Versione: v 1.1.0
Web: https://github.com/diegopvlk/Dosage
quasi tutti capita di dover tener traccia

A di integratori o medicinali, che sia per sé
stessi o per un familiare da seguire come
un anziano o un bambino. Sembra un compito facile La funzione Inventario imposta un avviso quando le medicine che avete stanno per finire
ma l’errore o la dimenticanza sono sempre dietro
l’angolo e si può finire con il compromettere cliccate su Aggiungi e procedete all’inserimento
l’efficacia di un trattamento perché non lo si prende degli altri farmaci. Quando li avrete messi tutti con
al momento giusto o col trovarsi in situazioni di i loro orari, nella scheda Oggi vedrete il da farsi per
emergenza perché non si è richiesta una nuova la giornata mentre Cronologia vi mostrerà i farmaci
ricetta per tempo. Dosage è una semplice presi nei giorni precedenti. Un’applicazione
applicazione per aiutarvi a gestire in Linux tutti semplice ma funzionale e pratica.
questi aspetti e ha recentemente pubblicato
una versione completamente in italiano. La sua AGGIUNGERE UNA TERAPIA
schermata principale è divisa in tre schede: Oggi,
Cronologia e Trattamenti. Per prima cosa dovete
impostare le cure che state facendo cliccando
su Trattamenti e poi su Aggiungi. Si apre così la
schermata dei nuovi farmaci, che vedete riprodotta
qui accanto in basso. Permette di impostare in
modo semplice tutto quello che serve per non
rischiare di sbagliare. Oltre al nome e al tipo del 1
farmaco potete inserire anche delle note, per
esempio per indicare se va preso dopo i pasti o 2
prima di colazione. Questo, come le altre indicazioni,
è molto utile anche per avere dei riferimenti chiari 3
nel caso sia più di un familiare a prendersi cura di
un malato. La possibilità di modificare icone e colori
aiuta a tenere più facilmente sotto controllo quello 4
che state facendo anche prima di leggere.
I promemoria si possono impostare in varie unità
di tempo, per esempio giornalieri, ogni mercoledì
Definire colore e icona Impossibile dimenticarsi
e venerdì o in cicli come 14 giorni attivi e 7 inattivi. 1 Una volta inserito il nome del vostro 3 Attivate le notifiche ricorrenti per far sì
La funzione Inventario, inoltre, risulta comodissima nuovo trattamento e la sua tipologia, potete che l’app continui a segnalarvi il trattamento fino
per gestire le scorte. Inserite quante unità del impostarne icona e colore per riconoscerlo a quando non rispondete.
farmaco, come pastiglie, ci sono nella confezione a colpo d’occhio.
Impostare il trattamento
e chiedete al programma di ricordarvi di fare Per non sbagliare 4 Inserite qui i giorni di inizio e di fine della
la ricetta quando, per esempio, ne restano 7. 2 Qui definite quante unità del vostro cura. Può anche essere un periodo molto lungo,
Una volta impostata anche la durata della cura farmaco vanno prese e in quali orari. per esempio fino al prossimo controllo medico.
38 LINUX PRO 222

USO DEI DISCHI
Parallel Disk
Usage (pdu)
Versione: v0.9.0
Web: https://crates.io/crates/parallel-disk-usage
er visualizzare l’utilizzo del disco rigido
P da parte dei file e delle directory
di solito si usa il comando du
(abbreviazione di “disk usage”). In caso di
directory molto grandi, però, può richiedere
parecchio tempo e comportare un carico
aggiuntivo sul vostro sistema. Pdu, scritto
in Rust, offre un’alternativa molto veloce curl https://sh.rustup.rs -sSf | sh Un’applicazione per
che propone anche un output grafico di facile Usate poi il seguente comando: visualizzare l’utilizzo
del disco rigido
lettura. Per utilizzarlo vi servirà Cargo, il gestore cargo install parallel-disk-usage --bin pdu da parte di file e
di pacchetti e sistema di compilazione per Rust, Basta quindi usare il comando pdu per farsi creare directory scritta in
analogo a pip per Python per questo linguaggio. in un battibaleno una rappresentazione della struttura Rust e molto veloce
Il modo più semplice per ottenerlo è installare di file e directory che mostra le loro dimensioni, le loro
l’attuale versione stabile di Rust utilizzando relazioni e un grafico a barre che vi aiuta a capire a
rustup in questo modo: colpo d’occhio come è distribuito il vostro spazio.
GESTIONE PERMESSI FLATPAK
Flatseal
Versione: 2.1.0
Web: https://github.com/tchx84/Flatseal
icuramente il formato Flatpak è molto
S comodo da usare e offre praticità e
sicurezza al tempo stesso. Gestire i
permessi delle varie applicazioni non è però sempre
immediato ed è facile dimenticarsene o cliccare
distrattamente sugli avvisi di richieste di accesso.
Flatseal è un’utility grafica che consente di rivedere
e modificare facilmente i permessi delle applicazioni
Flatpak. Tutto quello che dovete fare è lanciarla, Un metodo pratico
selezionare un’applicazione, modificarne i permessi applicazioni o si esegue flatpak-override dal e veloce per
e riavviarla. Se qualcosa va storto e volete terminale e l’app ricorda anche l’ultima applicazione impostare
ripristinare le impostazioni precedenti, basta selezionata. Flatseal offre una buona i permessi delle
vostre applicazioni
premere il pulsante di reset. La nuova versione documentazione (https://bit.ly/46Z1FvL), anche Flatpak attraverso
dell’app include una grafica e delle prestazioni se in inglese. Potete scaricarlo da Flathub un’interfaccia
migliorate, grazie all’adozione di nuovi widget o compilarlo autonomamente con: grafica
e funzioni disponibili in Libadwaita 1.4, oltre a git clone https://github.com/tchx84/Flatseal.git
correzioni di bug. Ci sono anche miglioramenti alle cd Flatseal
funzionalità rispetto alle versioni precedenti. flatpak --user install org.gnome.
Non è più necessario riavviare Flatseal o intervenire {Platform,Sdk}//45
manualmente quando si verificano modifiche flatpak-builder --user --force-clean --install
esterne, per esempio, se si installano o disinstallano build com.github.tchx84.Flatseal.json
LINUX PRO 222 39

Da non perdere
LETTORE FEED E SOCIAL
FeedDeck
Versione: v1.1.0
Web: https://github.com/feeddeck/feeddeck
e siete abituati a lavorare in modo

S professionale o quasi sui social media,
probabilmente conoscerete
TweetDeck, un’applicazione gestionale di Twitter
che semplifica il monitoraggio e l’interazione
con i contenuti sulla piattaforma ora chiamata X.
Consente tra le altre cose di organizzare il feed in
colonne personalizzate, utilizzare filtri e ricevere
notifiche. FeedDeck si ispira proprio a questo
strumento per offrire un lettore Open Source Il lettore di podcast integrato consente inoltre Un lettore di feed
di feed RSS e dei social media che vi permette di ascoltare i propri preferiti, di cui si può tenere RSS e di social
di seguire i vostri canali preferiti da tutte le traccia nell’app. Per usarla gratuitamente dovete media che vi
permette anche
piattaforme in un unico spazio. Oltre agli RSS fare il self-hosting, per il quale sono fornite di tener traccia dei
e ai feed di Medium, Nitter, Reddit, Tumblr e X, le istruzioni all’indirizzo https://bit.ly/3M8KgIP. vostri repository
vi consente di visualizzare le notifiche di GitHub Altrimenti potete accedere alla versione Premium preferiti su GitHub
e le attività dei vostri repository preferiti. che costa 5 € al mese ed è disponibile anche
Si possono anche vedere le notizie da Google per dispositivi mobili. Per l’edizione a pagamento
News e seguire e visualizzare i canali di YouTube. c’è anche una prova gratuita di sette giorni.
GESTIONE GESTURE
Touché
Versione: 2.0.10
Web: https://github.com/JoseExposito/touche
e usate dispositivi con schermo a

S sfioramento o touchpad e siete utenti
Linux abituali, vi verrà spontaneo
aspettarvi anche dall’utilizzo dei controlli tattili
la stessa libertà di azione a cui il sistema
operativo del Pinguino ci ha abituato su desktop
e server. Touché è un ottimo ausilio in questo
senso perché vi permette di configurare una singola applicazione. Si può aggiungere Prendete controllo
facilmente le gesture multi-touch dei touchpad qualsiasi applicazione Open Source con un clic delle gesture dei
touchpad e degli
e dei dispositivi touchscreen con un’interfaccia e per personalizzare qualsiasi azione basta schermi tattili
grafica GTK. Lavora in combinazione con selezionare quella desiderata dal menu a con un’interfaccia
Touchégg, un’applicazione che funziona in discesa. Potete ottenere Touché su Flathub o grafica facile
background e trasforma i gesti effettuati in scaricare un pacchetto per Arch Linux, mentre da usare
azioni visibili sulla scrivania. Per esempio, potete Touchégg è già installato in molte distribuzioni.
passare tre dita scorrendo verso l’alto per Se la vostra edizione non lo ha potete installarlo
ingrandire una finestra. Le azioni presenti in in Ubuntu e derivate dal PPA ufficiale con:
entrambe le applicazioni sono swipe, pinch e $ sudo add-apt-repository ppa:touchegg/stable
tap, con l’ultimo disponibile solo sugli schermi $ sudo apt update
tattili. In Touché potete selezionarli con le $ sudo apt install touchegg
schede nella parte superiore dello schermo e flatpak-builder --user --force-clean --install
assegnare loro gesture a livello globale o per build com.github.tchx84.Flatseal.json
40 LINUX PRO 222

Il meglio del software Open Source
COMPOSIZIONE CHIPTUNE
Furnace
Versione: v0.6
Web: https://bit.ly/3FnOc4K
on il temine chiptune ci si riferisce a un
C genere di musica elettronica basata sui
suoni dei vecchi computer e console di
gioco a 8 bit o 16 bit, generati o campionati dai chip
audio di queste macchine. I chiptune sono spesso
associati alla musica dei videogiochi degli anni
Ottanta e Novanta. Furnace consente di creare
questo tipo di musica con un’ampia scelta di
funzioni e chip sonori. Da NES, SNES e Sega Mega
Drive fino al VIC-20, c’è solo l’imbarazzo della scelta
e ogni chip è riprodotto con molti core di
emulazione, per cui il suono generato da Furnace anche se in inglese, che si rivela utilissima per Componete
è davvero fedele a quello dell’hardware reale. imparare a usare il programma in tempi brevi. musica elettronica
sfruttando i chip
L’applicazione utilizza un’interfaccia di tipo tracker Sono anche disponibili dei tutorial su YouTube audio di macchine
e offre molte funzioni, quindi per aiutarvi a muovere (https://bit.ly/3Q3s8S2), anche se non si basano retro in un’app ricca
i primi passi ha incluso una modalità di base che sulle versioni più aggiornate. Anche con tutto l’aiuto, di funzioni
nasconde diverse funzioni avanzate. In vostro aiuto l’app va studiata un po’, ma i risultati che potete
viene anche la documentazione ricca e dettagliata, ottenere se vi piace questo genere sono ottimi.
ORGANIZZAZIONE APP
Ferdium
Versione: 6.5.2
Web: https://github.com/ferdium/ferdium-app
olti dei nostri lettori probabilmente
M conoscono già Franz, un’applicazione
di messaggistica multi-protocollo che
consente agli utenti di accedere a diversi servizi
di chat e di social media in un’unica interfaccia.
Ferdium amplia il suo concetto offrendo molti più
servizi ed eliminando le limitazioni che Franz pone
ai clienti non premium. Inoltre, è compatibile con
il vostro account Franz esistente, quindi potete
continuare da lì se già lo utilizzate. Avete la cloud su tutti i vostri computer. È inoltre presente Ci sono molti
possibilità di aggiungerci di tutto, da Discord a una modalità orientata alla privacy che impedisce servizi disponibili e
potete facilmente
Gmail a Tweetdeck, di inserire lo stesso servizio alle notifiche di mostrare le informazioni, pur aggiungerne di nuovi
due o più volte per poter accedere a più account continuando ad avvertirvi di quel che succede. per avere sempre
e anche di integrare servizi personalizzati, se Ferdium permette infine di definire diversi spazi tutto sottomano
quello di cui avete bisogno non è già disponibile. di lavoro e avere sempre sottomano una lista
Ferdium offre anche alcuni extra interessanti, delle cose da fare integrata. Il programma offre
come la sospensione dei servizi non utilizzati anche ampie possibilità di personalizzazione
per risparmiare risorse ed evitare rallentamenti e potete configurarne sia l’aspetto sia le
del computer e la possibilità di utilizzare funzionalità senza toccare il codice. Le opzioni
l’applicazione con accesso anonimo, anche se di scaricamento sono numerose e potete averlo
creare un account permette di sincronizzarla sul in formato Flatpak, AppImage e Snap.
LINUX PRO 222 41

Da non perdere
BROWSER
Floorp
Versione: v11.5.1
Web: https://github.com/Floorp-Projects/Floorp
loorp è un browser che è stato sviluppato

F a partire da Firefox in Giappone e mira a
offrire un’alternativa al progetto di Mozilla
con maggiore flessibilità, sicurezza e privacy.
È basato su Firefox ESR (Extended Support
Release), una versione a lungo supporto (LTS) del
browser. Per quanto riguarda sicurezza e privacy,
Floorp offre sostanzialmente gli stessi vantaggi
di Firefox, ma non utilizza la telemetria. Poiché sarà
aggiornato ogni 4 settimane, inoltre, il suo team
promette che gli update di sicurezza saranno forniti elementi del progetto, il cui ambiente di Un browser basato
prima del rilascio di Firefox. Inoltre, l’estensione compilazione è pure Open Source, sono altamente su Firefox che
uBlock Origin per filtrare i contenuti è attivata customizzabili. Oltre alla consueta mira a offrire
un’alternativa al
per impostazione predefinita. Dal punto di vista personalizzazione dei temi di Firefox, Floorp progetto di Mozilla
dell’interfaccia, il browser offre una barra laterale permette di scegliere tra cinque diversi design con maggiore
integrata che si può utilizzare per accedere alla per l’interfaccia. Il browser ha gli stessi requisiti flessibilità e privacy
cronologia, ai download, ai segnalibri e altro ancora di Firefox e può essere scaricato come tarball
e che si può spostare e personalizzare. Tutti gli e Flatpak. È disponibile anche un PPA per Ubuntu.
MONITOR DI SISTEMA
Mission
Center
Versione: 0.3.3
Web: https://missioncenter.io
embra superfluo dirlo, ma tenere sotto

S controllo le prestazioni e lo stato del
computer è essenziale anche per i nostri
desktop e laptop, non solo per i server. Mission
Center è pratico e funzionale e può essere una valida dell’uso del disco e della rete e monitorare le velocità Un modo facile
e dalla grafica
alternativa al monitor di sistema quasi sicuramente di trasferimento. Offre inoltre informazioni ordinata per
incluso nella vostra distribuzione. Scritto in Rust, usa sull’interfaccia di rete, come il nome della scheda monitorare vari
GTK4 e Libadwaita e utilizza il rendering OpenGL di rete, il tipo di connessione (Wi-Fi o Ethernet), la parametri di
per tutti i grafici per ridurre lo sfruttamento della velocità e la frequenza wireless, l’indirizzo hardware sistema
CPU e delle altre risorse. Consente di monitorare e l’indirizzo IP. È inoltre possibile tenere traccia
l’utilizzo complessivo o per i singoli thread della CPU dell’utilizzo complessivo della GPU, del codificatore
e di visualizzare il conteggio dei processi, dei thread e del decodificatore video e della memoria
e degli handle del sistema, il tempo di attività, la della scheda grafica, oltre che del suo consumo
velocità di clock (base e corrente) e le dimensioni energetico. La ripartizione dell’uso delle risorse può
della cache. Permette inoltre di monitorare l’utilizzo essere mostrata per app e processi e c’è una vista
della RAM e della memoria di swap e di vedere di riepilogo ridotta per darvi un’idea a colpo d’occhio.
la ripartizione dell’utilizzo della memoria da parte Potete scaricarlo come Flatpak e trovare il codice
del sistema. È possibile utilizzarlo per tenere traccia sorgente su GitLab (https://bit.ly/3Fr9yyf).
42 LINUX PRO 222

Il meglio del software Open Source
PUZZLE GAME
PipeWalker
Versione: 0.9.4
Web: https://sourceforge.net/projects/pipewalker
n classico puzzle game che sfida il vostro

U ingegno nel combinare una serie di
componenti in un unico circuito. Esistono
diversi tipi di circuiti, come per esempio computer
da collegare a un server di rete, rubinetti che
devono accedere alla rete idrica, ecc. Dovete
collegare i componenti senza lasciare alcuna
interruzione tra di loro. Facendo clic con il mouse
su un collegamento, per esempio un tubo, lo si
fa ruotare di 90° in senso antiorario. Se volete
ruotarlo ancora, basta fare di nuovo clic su di esso. in un file PNG e per aggiungerne uno nuovo è Un divertente puzzle
Potete regolare le dimensioni della griglia e il livello sufficiente copiare il file nella directory dei dati game disponibile
anche come
di difficoltà. Si può inoltre attivare la modalità dell’applicazione (di solito /usr/local/share/
Flatpak. Ruotate i
Warp, che rende il gioco più complesso e i circuiti pipewalker). Anche se le regole sono molto tubi di connessione
più intricati. Ci sono numerosi temi da caricare semplici, nella pratica il gioco può risultare una per chiudere i circuiti
e ne trovate anche di belli prodotti dalla comunità, vera sfida e trovare una soluzione in tempi brevi
per esempio su https://bit.ly/3s5v5t4. I temi sono richiede buone capacità logiche. Dopo qualche
memorizzati come un insieme di texture partita è facile farsi trascinare!
MORPG
Stendhal
Versione: 1.44
Web: https://bit.ly/3QlWFeY
tendhal è un MORPG Open Source

S (Multiplayer Online Role-Playing Game
o gioco di ruolo multigiocatore in rete)
che ricorda i titoli di avventura di una volta. Offre
un mondo vasto e coinvolgente che racchiude
opportunità di esplorazione in varie regioni
con diversi tipi di ambienti, tra cui città, foreste,
montagne, miniere, pianure, strade, grotte community e ci sono anche eventi speciali Una comunità ricca
e tutta la libertà del
e dungeon. Al suo interno incontrerete un cast che possono essere organizzati sia dagli
codice Open Source
eterogeneo di oltre 250 personaggi non giocanti, amministratori sia dai giocatori e sono molto per un gioco di ruolo
molti dei quali vi proporranno compiti e missioni divertenti. Potete per esempio unirvi ad altri online che si svolge
per guadagnare preziosa esperienza e utilissimo giocatori per uccidere sciami di creature che in un mondo grande
oro, che potrete investire per ottenere nuovi appaiono all’improvviso in un luogo, partecipare e stimolante
equipaggiamenti e potenziare le vostre armature a cacce al tesoro o persino sposarvi! Il gioco offre
e armi. Potete inoltre intraprendere scambi con gli un’ampia documentazione, anche se in inglese
amici o cercare gli oggetti che altri giocatori sono (fate riferimento alle varie sezioni su https://bit.
disposti a condividere nel “forziere della ly/45C1rtn). Non è la scelta giusta per fare una
comunità”. Man mano che il vostro personaggio partita ogni tanto senza impegno, ma se avete
progredisce, il suo aumento di livello lo rende voglia di calarvi in un mondo alternativo
sempre più potente e capace. Il gioco è divertente completamente Open è un’ottima soluzione
e ricco di stimoli. È dotato di un’appassionata che saprà coinvolgervi per molto tempo. LXP
LINUX PRO 222 43

WE COMPARE TONS OF STUFF SO YOU DON’T HAVE TO!
Panoramica Tante soluzioni provate per voi per farvi

scegliere sempre il meglio sul mercato
JavaScript in un lampo
Utilizzare i giusti plug-in per jQuery può fornirvi soluzioni pronte all’uso per
semplificare le operazioni più comuni e aumentare la vostra produttività!
al lontano 2006 in cui è uscita contribuendo a rendere l’interfaccia utente

I CRITERI
Abbiamo scelto
D a oggi, jQuery è sempre stata
una delle librerie JavaScript più
più dinamica e interattiva. Se è vero che
approcci più moderni come React, Angular,
alcuni dei plug- utilizzate per la manipolazione del DOM o Vue.js hanno insediato il suo primato
in più adottati e l’interazione con gli elementi HTML nelle in tempi più recenti, è altrettanto vero
dalla comunità pagine Web. La sua facilità d’uso e la sua che jQuery è ancora utilissimo e dispone
ed essenziali capacità di semplificare lo sviluppo hanno di una pletora di plug-in di facile utilizzo
per il lavoro contribuito alla sua popolarità nel corso che possono ridurre sensibilmente il tempo
quotidiano e degli anni. Offre, tra gli altri, strumenti necessario per sviluppare siti in JavaScript,
anche altri per la selezione e la modifica degli elementi permettendoci di aggiungere funzioni
più di nicchia HTML, la gestione degli eventi come clic avanzate attraverso moduli ben testati
che possono e hover, la creazione di animazioni fluide, e altamente personalizzabili. Oltre a quelli
dare qualcosa in le richieste asincrone al server e la modifica presentati qui, potete trovarne un’ampia
più ai vostri siti. degli stili CSS degli elementi HTML, scelta su https://plug-ins.jquery.com.
44 LINUX PRO 222

Stampare parti Notizie aggiornate
della pagina sempre presenti
on questo plug-in potete permettere ai vostri n “news box” è un’area della pagina Web che mostra
C utenti di stampare facilmente parti specifiche
di una pagina, specificando un ID univoco per
U in modo aggiornato articoli di notizie, informazioni,
o altri contenuti rilevanti. Con questo plug-in basato
l’elemento HTML che volete rendere stampabile. Potete su jQuery e Bootstrap 4 potete crearne uno reattivo e pulito
escludere delle aree della pagina dalla stampa e trovate che consente di far scorrere verticalmente i contenuti HTML
altre opzioni utili su GitHub. con autoplay e supporto alla navigazione verticale.
INFORMAZIONI INFORMAZIONI
JQUERY.PRINT BOOTSTRAP NEWS BOX
Web: https://github.com/DoersGuild/jQuery.print Web: https://github.com/jqueryscript/jQuery-bootstrap
Versione: 1.6.2 Versione: dd0efe5
Caroselli
responsivi facili
Fate scorrere contenuti su tutti
i dispositivi con il minimo sforzo
lick è uno dei plug-in jQuery più utilizzati per
S la creazione di caroselli e slider interattivi, ossia
dei componenti che consentono di visualizzare
un insieme di immagini o contenuti in un formato a Slick offre molte opzioni per personalizzare l’aspetto e il comportamento del vostro
scorrimento orizzontale o verticale. Sono spesso utilizzati carosello, per esempio intervenendo sulla sua velocità e il numero di immagini
per evidenziare prodotti, testimonianze, gallerie
fotografiche e altro ancora. Slick offre un’ampia gamma direttamente a una specifica di esse. Potete anche
di opzioni di configurazione ed è altamente configurare il carosello per scorrere automaticamente le
personalizzabile. Vi permette di intervenire su vari immagini a un intervallo di tempo predefinito. Slick è anche
parametri per l’aspetto e il comportamento del vostro altamente adattabile per il design responsivo,
carosello, tra cui dimensioni delle immagini, il numero di permettendovi di creare caroselli che funzionano bene
quelle da visualizzare contemporaneamente e molto altro. su dispositivi desktop e mobili. Una soluzione rodata
Supporta il caricamento continuo delle “diapositive” nel tempo che rimane sempre molto valida e sfruttata.
in modo che il carosello sembri continuare all’infinito
e permette di scegliere tra diverse transizioni di INFORMAZIONI
scorrimento, per esempio con dissolvenza o a mosaico.
Consente inoltre di aggiungere pulsanti per la navigazione SLICK
tra le immagini e anche indicatori che rappresentano Web: https://kenwheeler.github.io/slick/
le diapositive e consentono agli utenti di passare Versione: 1.3.11
LINUX PRO 222 45

Panoramica
Date e orari in Un quiz nel

un battibaleno vostro sito
n plug-in facile da usare che permette di inserire on questo semplice plug-in sviluppato in Italia potete
U velocemente una finestra pop-up di selezione di
date nelle vostre pagine. Facile da personalizzare,
C inserire un quiz con domande e risposte, utilizzando
un file JSON che contiene tutti i dati e viene caricato
permette di scegliere data e ora oppure uno solo dei due via AJAX quando il plug-in viene inizializzato. Le risposte
elementi. Consente anche di evidenziare singole date dell’utente vengono salvate in un cookie. Richiede jQuery
o periodi e di aggiungere note e offre un tema scuro. 3 e Bootstrap 4 e utilizza Fontawesome 4.7.0 per le icone.
DATE TIME PICKER JQUERY-QUIZ
Web: https://github.com/xdan/datetimepicker Web: https://github.com/Reload-Lab/jQuery-quiz
Versione: 24d7dd5 Versione: 2.1.0
Tutto per le
interfacce utente
Interazioni, widget ed effetti pronti
da usare e personalizzare
dottando jQuery UI potete ampliare le funzionalità
A di jQuery aggiungendo una vasta gamma di
componenti e interfacce utente personalizzabili
per la creazione di applicazioni Web interattive. Sul sito https://jqueryui.com trovate gli elementi a vostra disposizione suddivisi
Vi permette di integrare facilmente elementi come per categorie e potete vederne una demo interattiva facendo clic su di essi
finestre di dialogo, barre di avanzamento, menu, schede,
effetti di animazione, calendari, pulsanti, slider e molto degli elementi nelle varie categorie potete vederne
altro. Include inoltre interazioni come il drag and drop, una demo interattiva, il che è molto pratico per scegliere
il ridimensionamento, la selezione, ecc. L’insieme di cosa è più adatto ai vostri scopi vedendolo all’opera.
componenti che fornisce è molto completo e sono tutti jQuery UI è in modalità di sola manutenzione,
pronti all’uso e semplici da personalizzare sotto molti ma il progetto è attivamente curato e ampiamente
aspetti. jQuery UI offre infatti un sistema di temi che implementato: secondo il suo sito è utilizzato
consente di modificarne rapidamente l’aspetto e potete dal 73% dei 10 milioni di siti più popolari.
anche creare il vostro tema personalizzato. Sul sito
https://jqueryui.com trovate gli elementi a vostra INFORMAZIONI
disposizione suddivisi nelle categorie delle interazioni,
dei widget, degli effetti e delle utility. Queste ultime JQUERY UI
includono Widget factory, che semplifica la creazione Web: https://github.com/jquery/jquery-ui
di nuovi widget personalizzati. Cliccando su ciascuno Versione: 1.13.2
46 LINUX PRO 222

Pop-up e modali
di ogni tipo
Arricchite il vostro sito con
finestre leggere e interattive
agnific Popup è un plug-in lightbox
M personalizzabile che consente di creare finestre
pop-up o modali eleganti e visivamente Il progetto offre una buona documentazione (https://bit.ly/46GxAB8),
accattivanti per la visualizzazione di vari tipi di elementi, con informazioni dettagliate ed esempi per gli usi più comuni
come immagini, video, moduli o contenuti HTML in linea.
È responsivo, ossia è progettato per funzionare bene offre una buona documentazione (https://bit.
sia sui dispositivi desktop sia su quelli mobili, in quanto ly/46GxAB8), anche se in inglese, che fornisce
regola automaticamente le dimensioni e il layout delle informazioni dettagliate, esempi e opzioni di
finestre pop-up in base alle dimensioni dello schermo. configurazione per aiutarvi a iniziare a usare questo plug-
Potete usarlo per iframe o anche per intere pagine in in modo efficace. Trovate ulteriori esempi con codice
Web e offre una serie di opzioni di personalizzazione, su https://bit.ly/404pYWN e su CodePen (https://bit.
consentendovi di controllare l’aspetto, il comportamento ly/46LH2Dt). Un patrimonio che vale la pena di sfruttare.
e lo stile delle finestre pop-up per adattarle al design
del vostro sito. Magnific Popup è noto per la sua velocità
e le sue prestazioni, che lo rendono una scelta popolare
INFORMAZIONI
per migliorare l’esperienza dell’utente sui siti. Funziona MAGNIFIC POPUP
bene con diverse tecnologie di sviluppo Web, tra cui Web: https://github.com/dimsemenov/Magnific-Popup
HTML e CSS, oltre a JavaScript e jQuery. Il progetto Versione: 1.1.0
Google Maps Un sito da

per le ricerche cinque stelle
onsentire agli utenti di trovare la posizione fisica di iamo ormai tutti abituati a valutare la qualità di servizi
C un punto vendita è utilissimo per tutti i siti di attività
commerciali. Questo plug-in che utilizza l’API di
S di qualsiasi genere in stelle. Questo plug-in JQuery
per Bootstrap semplifica la loro integrazione nei siti e
Google Maps consente di implementare questa funzione supporta funzioni avanzate come il riempimento parziale delle
senza programmare. È sufficiente fornire dati KML, XML stelle. Utilizza lo styling CSS3 e offre icone vettoriali scalabili
o JSON con tutte le informazioni sulla posizione. per una visualizzazione coerente su tutti i dispositivi.
JQUERY-STORE-LOCATOR-PLUG-IN BOOTSTRAP STAR RATING
Web: https://github.com/bjorn2404/jQuery-Store-Locator-Plug-in Web: https://github.com/kartik-v/bootstrap-star-rating
Versione: 3.2.0 Versione: 4.1.2
LINUX PRO 222 47

Panoramica
Strutture ad Completamenti
albero al volo automatici
er visualizzare facilmente una struttura ad albero ttima documentazione anche per questo progetto
P in HTML. Supporta la creazione degli alberi
a partire da dati JSON, il caricamento dei dati
O che consente di creare facilmente liste con
supporto per il completamento automatico che
tramite AJAX e il drag and drop. Offre un’ottima permettono di selezionare più elementi da un elenco
documentazione (in inglese) che include tutorial a discesa. Un’ampia serie di opzioni vi permette di
ed esempi ed è costantemente aggiornato. personalizzare velocemente la vostra implementazione.
JQTREE MAGIC SUGGEST
Web: https://github.com/mbraak/jqTree Web: https://github.com/Magicsuggest/magicsuggest
Versione: 1.7.5 Versione: 2.1.6
Far caricare file

sul vostro sito
Una serie di funzioni avanzate
a portata di clic
on jQuery File Upload potete aggiungere funzionalità
C avanzate ai vostri siti che richiedono agli utenti
di caricare file, come piattaforme di condivisione
di documenti, sistemi di gestione dei contenuti, forum, Il progetto offre una wiki dettagliata (https://bit.ly/40b8QyO) e una pagina
e-commerce e applicazioni di archiviazione online. Questo dimostrativa del suo funzionamento (https://bit.ly/46Xuk4g)
plug-in semplifica il processo di caricamento di file e offre
numerose opzioni utili, tra cui permettere agli utenti e permette di definire restrizioni sui tipi di file accettati e le
di selezionare e caricare più file contemporaneamente, loro dimensioni massime. Offre inoltre un sistema di gestione
riducendo il tempo necessario per l’upload. Supporta inoltre degli errori che consente di affrontare eventuali problemi
l’interazione drag and drop, consentendo agli utenti di durante il caricamento. Supporta l’upload di file su più domini
trascinare i file direttamente nell’area di caricamento. I file e in più parti. Funziona con qualsiasi piattaforma lato server
possono essere caricati in modo asincrono, il che significa (Google App Engine, PHP, Python, Ruby on Rails, Java, ecc.)
che gli utenti possono continuare a utilizzare la pagina senza che supporti il caricamento di file con moduli HTML standard.
attendere il completamento dell’upload. Il plug-in fornisce
un’anteprima dei file selezionati prima del loro caricamento, INFORMAZIONI
consentendo agli utenti di confermare quelli corretti,
e permette di mostrare una barra di avanzamento JQUERY FILE UPLOAD
per tenere traccia dello stato della procedura. È altamente Web: https://github.com/blueimp/jQuery-File-Upload
personalizzabile in termini di stile e comportamento Versione: v10.32.0
48 LINUX PRO 222

Validare i dati
degli utenti
Una soluzione popolare per risultati
veloci e facili da personalizzare
on jQuery Validation Plug-in avete a disposizione
C una serie di strumenti per facilitare la convalida
dei dati nei moduli HTML. Questa libreria è infatti La documentazione del plug-in (https://bit.ly/3MdPH9k) è completa e ricca
progettata per semplificare la validazione dei dati immessi di esempi per sfruttarlo al meglio nei vostri siti
dagli utenti nei campi di input, nei menu a discesa e in altri
elementi. Esegue la validazione dei dati direttamente nel di campi che condividono regole di convalida comuni
browser dell’utente (lato client), senza la necessità di una e possono essere validati insieme. Localizzare i
richiesta al server, consentendovi di fornire un feedback messaggi di errore e le regole di convalida per diverse
immediato ai vostri visitatori. Per ciascun campo di input lingue è inoltre facile. La documentazione ufficiale,
potete definire regole di convalida personalizzate, come che integra vari esempi di utilizzo, è un valido supporto
la lunghezza minima o massima, il formato, l’obbligatorietà, per implementare rapidamente la convalida dei moduli
le espressioni regolari e altro ancora. Anche i messaggi con questo popolare plug-in.
di errore visualizzati agli utenti quando un campo non
soddisfa i criteri di convalida sono modificabili liberamente
e potete scegliere il modo in cui vengono visualizzati
INFORMAZIONI
all’utente. La libreria utilizza classi HTML per definire JQUERY VALIDATION
regole di convalida, semplificandone l’aggiunta a livello Web: https://github.com/jquery-validation/jquery-validation
di campo nei moduli. Si possono anche impostare gruppi Versione: 1.20.0
Emoji nei vostri Funzioni di zoom

campi testo avanzate
pesso sono le piccole cose che fanno ricordare na serie di opzioni di zoom avanzate facili da integrare
S i siti e avere a disposizione un facile menu per
l’inserimento di emoji nei campi testuali può rendere
U e personalizzabili. Al passaggio del mouse l’utente
passa dalla versione dell’immagine visualizzata a una
più personale l’esperienza dell’utente. Quest’ultimo dovrà più grande caricata dal suo URL. Potete forzarne le dimensioni
semplicemente fare clic sull’icona della faccina in alto a a una larghezza di pixel data, ingrandire fino a x volte
destra dell’area di testo per visualizzare il menu di selezione. la dimensione dell’originale e molto altro.
EMOJI PICKER JQUERY-EXTENDED-MAG
Web: https://github.com/jmadler/emoji-picker Web: https://github.com/caleboleary/jQuery-Extended-Mag
Versione: 0.12.2 Versione: ca$bc3b
LINUX PRO 222 49

REGALA (O REGALATI!)
UN CALENDARIO
Per appuntare impegni, Della stessa collana::
visite mediche, CALENDARI-AGENDA DA
compleanni, eventi... formato LONG
Tutto quello che ti serve

sempre sotto ai tuoi occhi!
INQUADRA
IL QR CODE
E SCOPRI
TUTTI I TITOLI!
VERSIONE
SPECIALE
CALENDAR
IO CARTACE
O
LAVAGNETT +
A MAGNETI
CA
A SOLI
9,90 €
GENNAIO 2024 Simone Emma

Carlo Elena
Chitarra
Appuntamento ore 17:00
1 alle poste
2
ma
PortarenoEnmni
3 dai
Riunione
di condominio
4 ore 19:30
Disponibili sullo store online e in edicola!

Telefono online email WhatsApp
02 87168197 www.sprea.it/calendari abbonamenti@sprea.it 329 3922420
Solo messaggi
MINIMALE_FAMIGLIA-lavagna210x285-2024.indd 2 11/09/23 12:55

Tutorial
I nostri esperti offrono i loro consigli di programmazione e di amministrazione del sistema
LA GUIDA
DI RIFERIMENTO TUTORIAL
Esiste sempre qualcosa di
nuovo da imparare in campo
Creare un’app diario
informatico, soprattutto in un per i ristoranti
mondo dinamico come quello di Tutti mangiamo fuori e ci piace
Linux e dell’Open Source. Ogni ricordare dove siamo stati: ecco come
numero di Linux Pro presenta creare un’app per tenere traccia delle
una sezione dedicata a tutorial nostre uscite pag. 52
realizzati da esperti in moltissimi
settori: programmazione, Flatpak facili con
sicurezza, amministrazione di un’interfaccia grafica
sistema, networking. Troverete
Uno strumento efficiente e
informazioni utili sia che siate
dei veterani di Linux sia degli completo per gestire ogni aspetto
utenti alle prime armi. dei propri programmi, anche
Studieremo con cura anche le in gruppo, senza usare la riga
applicazioni più diffuse sia in di comando pag. 58
ambito lavorativo che desktop.
Il nostro scopo è quello di fornire Robot con braccio
in ogni numero il giusto mobile e telecamera
mix di argomenti, ma se avete Mobilità e un braccio con quattro
suggerimenti su temi particolari
gradi di libertà per questo robot
che vorreste vedere trattati,
controllato da PC e basato su
scriveteci via e-mail all’indirizzo
tutorial@linuxpro.it Arduino Nano RP2040 o Raspberry
Pi Pico W pag. 60
COME Sfruttare la potenza

RAPPRESENTIAMO di un veterano
LE LINEE DI CODICE jQuery ha ancora molte frecce
al suo arco e capirne funzionamento
Si presenta spesso e funzioni principali risulta molto
la necessità utile a chiunque lavori su siti
di riportare le linee di codice pag. 66
in JavaScript
di un programma.
Per favorirne la lettura
evidenzieremo le singole linee
in questo modo:
begin
mniWordWrap.Checked := not
ACCADEMIA DEL CODICE
end
Quando una riga di codice supera
Pasti sotto Fate risparmiare
la lunghezza della colonna controllo con l’app i vostri utenti
la riporteremo su più righe
utilizzando la notazione Organizzare cosa Create una Web app
seguente: mangiare richiede tempo: per tenere traccia dei
printf("Vi preghiamo di inserire pianificate un’app che lo pagamenti ricorrenti
una password."); semplifica! pag. 68 e pubblicatela pag. 70
LINUX PRO 222 51

Tutorial
Il codice
lo trovi
nel DVD
PROGRAMMAZIONE virtuale!
Creare un'app diario

per i ristoranti
Tutti mangiamo fuori e ci piace ricordare dove siamo stati con amici e parenti:
ecco come creare un'app per tenere traccia delle nostre uscite
ome spiegato nell'articolo di copertina, personalizzate che soddisfano i moderni
C vogliamo darvi non solo spunti ma codice
e logiche per creare delle Web app che
appassionati di cucina. In un mondo in cui cenare
fuori è un'attività sociale popolare e un'opportunità
possano essere proposte al pubblico. Abbiamo per esplorare diverse cucine, avere uno strumento
quindi cercato temi interessanti ma per i quali che aiuti a gestire e curare le proprie esperienze
mancano ancora soluzioni tecnologiche valide al ristorante è molto utile. L'app può fungere da
e uno di questi è il tracciamento delle visite archivio completo del vostro viaggio gastronomico,
ai ristoranti. Esistono app e Web app sul tema documentando i dettagli sui ristoranti, i piatti
ma sono limitate o poco supportate. Creare che vi sono piaciuti, l'ambiente e molto altro.
un'applicazione Web per tenere traccia dei Con il tempo, questi dati possono diventare un
ristoranti che visitate è un'impresa entusiasmante tesoro, aiutando gli utenti a prendere decisioni
che può migliorare notevolmente le esperienze informate su dove cenare successivamente,
culinarie. Immaginate un diario digitale che non assicurando loro che ogni esperienza culinaria sia
solo tenga traccia dei posti in cui avete cenato, eccezionale. In questo articolo vi metteremo nelle
ma che arricchisca anche le vostre scelte future, condizioni di partire da un nucleo di base molto
permettendovi di vedere dove siete stati. Questa solido per poi progettare la vostra app, quindi
applicazione potrebbe essere una miscela perfetta vedremo esclusivamente la fase di recupero dei
di funzionalità, facilità d'uso e caratteristiche dati da Google Places, il loro riutilizzo e la gestione
del database: da lì potrete poi sviluppare il resto voi.
RISPARMIARE CON GOOGLE MAPS Partire col piede giusto

Per ottenere un'app di successo e accattivante,
Ci sono pochi mercati che Google ha monopolizzato di più è necessario considerare attentamente sia gli
di quello delle mappe e di tutto quello che gira attorno a esse. aspetti di design sia quelli di codifica. In termini
Ci sono oggi soluzioni Open Source ma la triste verità è di design, un'interfaccia elegante e intuitiva è
che non riescono a competere con Google Maps per ampiezza fondamentale. Gli utenti devono essere in grado di
di risultati, precisione e ricchezza di contenuti. Al punto navigare agevolmente all'interno dell'applicazione,
che, nonostante le API di Google Maps costino abbastanza, inserire le loro esperienze culinarie e accedere alle
le piattaforme che si occupano di geolocalizzazione, viaggi, informazioni memorizzate. Il design deve
ecc. tendono comunque a usarle per offrire il servizio migliore privilegiare la semplicità e l'eleganza, offrendo al
possibile ai loro utenti. In queste pagine faremo lo stesso contempo sufficienti opzioni di personalizzazione
ma siccome non siamo certamente fan di Google vogliamo per adattare l'app alle preferenze individuali.
dare al colosso americano meno soldi possibile, anche per Inoltre, l'integrazione con i servizi di mappatura
tenerli nelle nostre tasche. Vedrete quindi i nostri metodi per può migliorare l'esperienza dell'utente, fornendo
fare meno chiamate possibile, risparmiare sul budget e avere indicazioni sui ristoranti visitati in precedenza.
comunque dati di eccellente livello. È una logica diversa L'implementazione di una funzione di ricerca
rispetto a quella della vostra "prima app" (quella per gli itinerari) che consenta agli utenti di filtrare e ordinare
quindi nella doppia pagina che segue andremo nel dettaglio i dati relativi ai ristoranti in base a vari criteri,
di questa soluzione risparmiosa. come la posizione, la cucina, la valutazione
o la data della visita, è altrettanto vantaggiosa.
52 LINUX PRO 222

Solidità e logica sono tutte a pagamento e quella migliore per
Dal punto di vista del codice, l'applicazione deve qualità e aggiornamenti è Google Places API. TIP
essere robusta, scalabile e sicura. L'utilizzo di A nessuno piace dare soldi a Google ma se state
moderni framework e tecnologie di sviluppo Web sviluppando una Web app che volete monetizzare Un'app di questo
deve accelerare il processo di sviluppo e garantire dovete considerare che la qualità del vostro tipo è molto
articolata e non
la compatibilità dell'app con diversi dispositivi prodotto è essenziale. Se decidete di procedere
sarebbe possibile
e piattaforme. L'attenzione alla privacy dei dati con Google, vi faremo vedere in questo articolo
presentarla
è fondamentale, poiché l'app raccoglierà e come dare meno soldi possibile al colosso, interamente in
memorizzerà preferenze e informazioni personali. sia limitando le chiamate sia usando servizi queste pagine.
Aderire alle migliori pratiche di crittografia dei di scraping. Qui di seguito daremo per scontato Sul DVD trovate
dati, controllo degli accessi e conformità alle leggi che abbiate scelto, come noi, l'opzione di sfruttare il codice delle
sulla privacy è molto importante per creare fiducia Google Places API Autocomplete per recuperare parti essenziali,
negli utenti. Inoltre, l'app deve essere ottimizzata i nomi delle location e poi un servizio di scraping in questo caso
per la velocità e la reattività, garantendo per risparmiare sull'acquisizione dei dati: leggete senza interfaccia
un'esperienza utente senza interruzioni anche il box Come risparmiare con lo scraping per fare grafica che
potrete scegliere
durante i picchi di utilizzo. Aggiornamenti regolari la vostra scelta. Questo campo di inserimento
voi. Quello di
e monitoraggio delle prestazioni sono essenziali testo è integrato con il completamento automatico
cui parleremo
per risolvere tempestivamente eventuali bug di Google, sfruttando l'API di Google Places. saranno invece
e per mantenere l'app allineata alle aspettative Mentre gli utenti digitano, la funzione di gli aspetti
degli utenti e ai progressi tecnologici. completamento automatico offre suggerimenti, fondamentali,
rendendo facile per loro selezionare il ristorante come il recupero
Iniziare con la struttura esatto che stanno cercando. La funzione di dei dati dei
In questo articolo non ripeteremo i concetti autocomplete di Google Places vi permette ristoranti e
fondamentali esplorati nel pezzo di copertina, di accedere a un database enorme e con un naturalmente
come la scelta del template, il linguaggio lato identificatore comune che potete conservare lo scheletro
dell'interazione
server, ecc. Ci tufferemo invece direttamente nella legalmente nel vostro database. Una volta che
con il server.
struttura del progetto. L'app deve essere molto l'utente seleziona un ristorante dai suggerimenti
Considerate
semplice, perché non vogliamo trascinarvi in del completamento automatico, il modulo popola quindi che il codice
decine di pagine di spiegazione su come crearla dinamicamente altri campi con informazioni dell'app che
ma anche perché vogliamo che abbia uno scopo pertinenti recuperate dall'API di scraping. Gli utenti trovate sul DVD
preciso e che si concentri su quello. Lato server, possono confermare quindi i dati e passare alla digitale funziona
come vedrete, useremo una struttura ancora più fase successiva con l'inserimento di informazioni ma mancano le
snella di quella mostrata nell'articolo di copertina: aggiuntive. La selezione della posizione attiva il parti che toccano
qui non vogliamo spiegarvi i principi validi per recupero del placeId di Google Place API per quel a voi, quindi
qualsiasi progetto ma vogliamo farvi vedere ristorante specifico. Questo identificativo unico fate un attento
debugging
come mettere in piedi un'app in poco tempo. è fondamentale per memorizzare e gestire i dati
quando la provate!
Non torneremo sui principi proposti nell'articolo del ristorante nel back-end della nostra app.
di copertina, ancora una volta, ma ricordate che Assicura che ogni voce di ristorante sia distinta
prima di scrivere una singola riga di codice dovete e consente di fare riferimento alle informazioni e
avere preparato proprio questo: principi dell'app, recuperarle facilmente. Cominciamo quindi a vedere
struttura, ecc. Dal momento che la struttura è questa parte che si sviluppa in cinque passaggi:
semplice abbiamo scelto di fare tutto con semplice 1) In un modulo Web l'utente digita il nome
JavaScript e PHP/MySQL lato server. di un ristorante;
2) L'utente fa clic sul pulsante Find Restaurant;
Trovare il ristorante e prendere dati di base 3) Utilizziamo un proxy sul nostro server per
La sezione iniziale della nostra applicazione Web interrogare l'API di completamento automatico
getta le basi per consentire agli utenti di inserire di Google Places;
le proprie esperienze culinarie senza problemi. 4) Restituiamo i candidati e l'utente seleziona
In questa pagina metterete un modulo con quello corretto da un menu a tendina;
un campo di inserimento testo in cui gli utenti 5) Prendiamo il valore placeId del candidato
possono digitare il nome del ristorante che selezionato.
desiderano aggiungere alla propria scheda.
Qui dovete fare la scelta più importante: se utilizzare
un sistema per recuperare i dati delle location SCEGLIERE SOLUZIONI LEGALI
via API o se farli inserire dagli utenti. La seconda
soluzione non ha costi ma chiaramente è più “Lo scraping va dal tollerato al legale,
scomoda. La prima richiede l'utilizzo di un servizio
terzo. Vi diciamo subito che purtroppo i servizi ma dovete sempre informarvi con i vostri
Open non sono straordinari: potete per esempio
usare OpenStreetMap (www.openstreetmap.org) legali se lanciate un business o usare
ma i dati relativi alle location sono veramente
ridotti (il nome e poco altro). Le soluzioni non Open un servizio che se ne occupi per voi”
LINUX PRO 222 53
Tutorial
COME RISPARMIARE CON LO SCRAPING

L'API definitiva per trovare e ottenere di cattura automatica e strutturata documentarvi su come fare scraping
informazioni su ristoranti, bar, ecc. di dati disponibili pubblicamente e su come recuperare i dati che
è Google Places API, parte di Google e in questo caso parleremmo di Google vi servono, ma questa è una
Maps API. A prima vista il prezzo e più precisamente di Google Maps. conversazione fra voi e il vostro legale
non è proibitivo: solo 0,017 € per Facendo scraping potete ottenere i di fiducia... Per questa Web app il
recuperare i dati di un ristorante. dati che vi servono senza pagare nulla, nostro consiglio è di adottare una
Mettiamo però che il vostro sogno cioè senza passare dal servizio API tattica che minimizza i costi: abbiamo
sia di creare una comunità di utenti di Google. Facciamo però subito scelto di usare Google Places API per
da 20.000 persone e che ognuno una precisazione: non possiamo né trovare la location e il suo identificativo
aggiunga un ristorante alla settimana. consigliarvi di farlo voi direttamente, di Google. Lo useremo per assicurarci
Nella migliore delle ipotesi, e cioè se né dirvi che è assolutamente legale di non duplicare la stessa location se
tutti i vostri utenti trovano il ristorante se lo fate. Questo perché, nonostante due utenti diversi vogliono aggiungerla.
che cercano al primo colpo, usando ci siano diverse sentenze in merito, Non salveremo altri dati: Google non
una sola chiamata per ristorante, vi compresa una in Italia (ordinanza del permette di fare caching di dati e noi
ritroverete a pagare 1.160 € al mese tribunale di Roma, 5 settembre 2019, rispetteremo il contratto in questo
solo di chiamate all'API di Google (200 per causa fra Trenitalia e la società modo. Dopodiché prenderemo il nome
dollari al mese ve li regala Google). che gestisce l'app Trenit), che lo esatto e useremo un servizio come
Intendiamoci: stiamo spiegandovi legittimano, nulla impedisce a Google Outscraper (outscraper.com) per
come creare una Web app che possa di intentare cause se l'azienda ritiene ottenere tutti i dettagli della location:
portarvi anche un profitto, però dovete di averne titolo. C'è però una soluzione così li potremo anche salvare. Una
fare attenzione ai costi fissi e in questo alternativa: usare un servizio che richiesta a Google Places API costa
caso sono alti. Nel testo dell'articolo si incarichi di fornirvi i dati che quel 0,00283 € e una a Outscraper costa
vi facciamo vedere come limitare le servizio stesso si occupa di recuperare 0,002 €. Questo significa che invece
chiamate, qui invece vogliamo parlarvi per voi. In questo modo voi pagate di pagare 480 € al mese per 30.000
di alternative. La soluzione a basso regolarmente e legalmente un servizio utenti, ne pagate 186,40 €. E con
costo, o gratuita, è quella dello e ottenete i dati che vi servono. 30.000 utenti registrati e attivi state
scraping. Lo scraping è il processo Naturalmente nulla vi impedisce di probabilmente già monetizzando!
Iniziamo quindi con il codice HTML: if($data){

<!DOCTYPE html> $array['error']['data'] = $data;
<html> }
<head>
<title>Restaurant Creation</title> $payload = json_encode($array);
</head> $response->getBody()->write($payload);
<body> $response->withStatus($status);
<form id="restaurantForm"> return $response->withHeader('Content-Type',
<label for="restaurantName">Restaurant Name:</ 'application/json');
label>
<input type="text" id="restaurantName" }
placeholder="Type a restaurant name">
<button type="button" function json_success(Response $response,$data =
onclick="findRestaurants()">Find Restaurant</button> false,$status = 200,$passthru = false){
<select id="restaurantDropdown" style="display:
none;"></select> $array = $passthru ? $data : array('status' =>
</form> 'success', 'data' => $data);
</body>
</html> $payload = json_encode($array);
Dopodiché mettiamo in piedi il lato server con Slim $response->getBody()->write($payload);
per PHP. Analizzeremo successivamente le route $response->withStatus($status);
nel dettaglio, qui vediamo invece le funzioni comuni return $response->withHeader('Content-Type',
del file index.php per gestire le route in Slim: 'application/json');
function json_error(Response $response,$error,$status
= 500,$data = []){ }
$array = array('status' => 'error','error' =>
array('message' => $error)); function APIkey(){
return 'chiave';
54 LINUX PRO 222

Creare un'app diario per i ristoranti
class _TWIG
{
public static function
render($template,$data,$response){
$loader = new \Twig\Loader\

FilesystemLoader('../template');
$twig = new \Twig\Environment($loader, [
'cache' => false,
]);
$template = $twig->load($template);
$content = $template->render($data);
$response->getBody()->write($content);
return $response;
}
}
Le prime due funzioni ( json_success e json_error )
si occupano di restituire in modo omogeneo
i risultati in JSON dell'API: usandole non dovrete Che ci piaccia o no, Google ha di fatto un monopolio sulle API di dati commerciali geolocalizzati. Possiamo
preoccuparvi di formare correttamente ogni vostra sfruttare però il loro lavoro, che è molto approfondito, pagando pochissimo grazie a caching e scraping
risposta. APIKey() , come è intuibile, restituisce
semplicemente la vostra chiave per l'API di Google simile a quello proposto, per poi creare il menu
e infine la classe _Twig vi permette di visualizzare a tendina con le opzioni. Dopodiché collega
le pagine HTML tramite Twig senza dover costruire un listener al menu:
ogni volta il relativo oggetto. dropdown.addEventListener('change', () => {
const selectedPlaceId = dropdown.value;
La logica dell'applicazione
Per quest'app, come anticipato, non vi porteremo $.ajax({
dall'inizio alla fine ma vi daremo tutto per costruire url: '/restaurant/exists/'+selectedPlaceId,
la vostra app ideale. Per farlo dobbiamo vedere come type: 'GET',
funzionano i singoli passaggi, a partire dalla prima data: { },
fase. Nella schermata iniziale quando l'utente clicca success: function(response) {
su Find Restaurant, una funzione findRestaurants() if (response.data) {
si occupa di recuperare l'elenco dei possibili ristoranti fetchRestaurantDataAndDisplayModal
tra cui l'utente può scegliere. Per motivi di spazio (selectedPlaceId);
ne vedremo solo gli aspetti salienti e il primo } else {
è la chiamata al vostro server: data from third party
const response = await fetch(`/api/ fetchLocationData
places?query=${restaurantName}`); (selectedPlaceId,function(data){
const data = await response.json();
fetchLocationDataAndDisplayModal (data);
const dropdown = document.
getElementById('restaurantDropdown'); })
dropdown.style.display = 'block'; }
dropdown.innerHTML = '<option value="">Select a },
restaurant</option>'; error: function(error) {
alert('Error checking restaurant existence: ' +
candidates = data.data.predictions; error.responseText);
}
candidates.forEach(candidate => { });
const option = document.createElement('option');
option.value = candidate.place_id; });
option.text = candidate.description; Questo è un punto chiave perché anzitutto lo script
dropdown.appendChild(option); verifica se il ristorante in oggetto è già stato creato
}); da un utente: se sì, avvia la funzione
La prima cosa che fa quindi è "chiamare a casa": fetchRestaurantDataAndDisplayModal() (che
il server si occupa di contattare l'API di Google dovrete creare voi) per mostrare semplicemente
e restituire un elenco di location con il nome il modulo per inserire i dati specifici forniti
LINUX PRO 222 55

Tutorial
STRUTTURARE IL DATABASE
Il database è ovviamente la spina rating FLOAT, caching, come chiave primaria.
dorsale della vostra applicazione. reviewsLink VARCHAR(255), Notate anche la nomenclatura:
La table principale nel caso di questa latitude FLOAT, non usiamo simboli e, se un campo
app è Restaurants e contiene tutti longitude FLOAT, ha un nome che combina due parole,
i ristoranti (non le visite ai ristoranti cuisines VARCHAR(1000), la seconda è in maiuscolo. L'uso
ma semplicemente un record per specialFeatures VARCHAR(1000), di una nomenclatura corretta nella
ogni location). Vediamo quindi category VARCHAR(255), creazione dei campi delle tabelle
insieme la struttura: michelinStars INT, del database migliora la chiarezza,
CREATE TABLE Restaurants ( closed BOOLEAN, la manutenibilità e l'efficienza del
id INT AUTO_INCREMENT PRIMARY country VARCHAR(255) database, riducendo la probabilità di
KEY, ); errori e facilitando la collaborazione
placeId VARCHAR(255) UNIQUE NOT Come vedete, abbiamo scelto di tra i membri del team. Un buon nome
NULL, usare campi che ci permettano di di campo funge infatti da
name VARCHAR(255) NOT NULL, inserire per esempio pacchetti JSON autodocumentazione, riducendo
address VARCHAR(255), (come per specialFeatures ) e usiamo la necessità di documentazione
website VARCHAR(255), il placeId di Google Places API, che esterna per spiegare lo scopo
menuLink VARCHAR(255), è legalmente salvabile senza limiti di di ogni campo.
dall'utente (cose come la data della visita, ecc.). il ristorante come segue:
In questo modo non facciamo chiamate aggiuntive, function addRestaurant($placeId){
e costose, all'API di Google! Se invece è nuovo:
fetchLocationData (selectedPlaceId,function(data){ $data = fetchPlaceDataDemo($placeId);
fetchLocationDataAndDisplayModal (data); $uuid = createRestaurant($placeId,$data);
}) $data['restaurant_uuid'] = $uuid;
Così con fetchLocationData() contattiamo return $data;
il server e gli diciamo di recuperare da Google
i dati della location, dopodiché li visualizziamo }
utilizzando una finestra modale. Ma cosa Questa funzione anzitutto prende i dati dall'API
fa il server in questo caso? di Google Places o dal servizio che preferite: per
$app->get('/restaurant/create/{place_id}', function questo nel codice trovate una funzione demo che
(Request $request, Response $response, $args) { restituisce sempre dati formattati correttamente, in
modo che possiate testare tutto voi. Naturalmente
$placeId = $args['place_id']; la sostituirete con la vostra funzione, magari usando
un servizio a bassissimo costo come Lambda per
$restaurantData = addRestaurant($placeId); minimizzare la spesa e anonimizzare la chiamate.
Dopodiché aggiunge il ristorante al database:
unset($restaurantData['rating']); function createRestaurant($place_id,$data){
unset($restaurantData['reviewsLink']);
unset($restaurantData['latitude']); global $pdo;
unset($restaurantData['longitude']);
$uuid = Uuid::uuid4(); // Version 4 (random) UUID
return json_success($response, $restaurantData); $data['uuid'] = $uuid->toString();
$data['placeId'] = $place_id;
});
La prima cosa che fa quindi è creare un record per if(isset($data['cuisines'])){
$data['cuisines'] = json_encode($data['cuisines']);
}
try {
$sql = "INSERT INTO Restaurants

(placeId,restaurant_uuid,name, address, website,
menuLink, rating, reviewsLink, latitude, longitude,
cuisines, country)
VALUES (:placeId,:uuid, :name, :address,
:website, :menuLink, :rating, :reviewsLink, :latitude,
Quando l'utente cliccherà su Find Restaurant (Trova Ristorante), il vostro server contatterà Google Places :longitude, :cuisines, :country)";
API per avere una lista di location relative e potrete così proporle nel menu a tendina
56 LINUX PRO 222

Creare un'app diario per i ristoranti
$stmt = $pdo->prepare($sql);
$stmt->execute($data);
return $uuid;
} catch (PDOException $e) {
die("Error: " . $e->getMessage());
}
}
Questa funzione quindi crea un identificativo
unico, che useremo per transazioni interne
al posto del placeId, quindi normalizza gli array
in stringhe JSON, dopodiché inserisce un record.
Fate attenzione perché questa è una funzione
"cieca": non controlla se esiste già un ristorante
con lo stesso placeId. Il nostro consiglio è di creare Nel codice demo che trovate sul DVD digitale, le ricerche restituiranno sempre gli stessi dati di base.
tale verifica e applicarla prima, in modo da bloccare Usate il vostro sistema di recupero dati e l'utente potrà modificare le informazioni
l'inserimento duplicato.
data: JSON.stringify(formData),
Modifiche lato utente contentType: "application/json; charset=utf-8",
A questo punto mostrerete i dati all'utente dataType: "json",
nell'interfaccia. L'utente li modificherà o li success: function(response) {
approverà, in modo che non dovrete salvare const modal = $('#editModal');
in cache nulla, anche nel caso in cui usiate modal.hide();
direttamente Google Places API invece },
di un servizio di terze parti. Per salvare, l'utente error: function(error) {
premerà il pulsante e lo gestirete così: console.error("Error sending data: " + JSON.
$("#saveButton").on("click", function(e) { stringify(error));
e.preventDefault(); }
var name = $("#name").val(); });
... });
var restaurant_uuid = $("#restaurant_uuid").val(); E questo è tutto! Questa è naturalmente poi solo
l'ossatura: voi potrete aggiungere l'interfaccia
var formData = { grafica, una pagina per l'inserimento dei dati
name: name, delle visite come un giudizio, la data, ecc.,
... il sistema di registrazione, quello di traduzione
}; e via dicendo. Le informazioni che avete
acquisito però vi permetteranno di interagire
$.ajax({ con API di terze parti e di usarne i dati
type: "POST", per semplificare la vita dei vostri utenti
url: "restaurant/edit/"+restaurant_uuid, e per fornire loro informazioni affidabili. LXP
CREDENZIALI AL SICURO ANCHE IN PHP

È fondamentale non condividere AWS_SECRET_ACCESS_KEY=bbb SECRET_ACCESS_KEY'];
le proprie credenziali con nessuno AWS_DEFAULT_REGION=S3region $region = $_ENV['AWS_DEFAULT_
e soprattutto è importante evitare Sostituite aaa, bbb e S3region con le REGION'];
che vengano caricate su GitHub credenziali e la regione AWS Lambda
nell'ambito di un commit. Vedremo effettive. Caricate e usate poi le $LAMBDA = LambdaClient::factory([
come memorizzare, per esempio, le variabili d'ambiente nello script PHP: 'version' => 'latest',
credenziali di AWS Lambda in un file require 'vendor/autoload.php'; 'region' => $region,
.env usando il pacchetto dotenv. Caricate quindi le variabili: 'credentials' => [
Anzitutto installate il pacchetto $dotenv = Dotenv\ 'key' => $accessKeyId,
con Composer. Eseguite il seguente Dotenv::createImmutable(__DIR__); 'secret' => $secretAccessKey,
comando nella cartella del progetto: $dotenv->load(); ],
composer require vlucas/phpdotenv Dopodiché potete usare le variabili ]);
Create un file .env nella directory del e inizializzare Lambda con esse: Così potete tenere il file .env in una
progetto e aggiungete le credenziali $accessKeyId = $_ENV['AWS_ACCESS_ directory al riparo da occhi indiscreti
di AWS Lambda: KEY_ID']; e sfruttare le credenziali contenute
AWS_ACCESS_KEY_ID=aaa $secretAccessKey = $_ENV['AWS_ in esso senza alcun problema.
LINUX PRO 222 57

Tutorial
APPLICAZIONI
Flatpak facili con

un'interfaccia grafica
Uno strumento efficiente e completo per gestire ogni aspetto dei propri
programmi, anche in gruppo, senza usare la riga di comando
robabilmente tutti i nostri lettori Avere un'interfaccia grafica per compiere le
P conoscono già la tecnologia di
distribuzione e gestione del software
principali operazioni sui Flatpak, però, può essere
utile per molti utenti e proprio per questo è stato
Flatpak. Consente agli sviluppatori di sviluppato Warehouse. Dedicato specificamente
confezionare le proprie applicazioni insieme a a questo formato, non solo semplifica la vita
TIP tutte le loro dipendenze in un "Flatpak", ossia una agli utenti meno tecnici ma offre anche funzioni
sandbox isolata che contiene tutto il necessario più avanzate a chi vuole, per esempio, lavorare
Il formato Flatpak per eseguire il programma, riducendo i problemi su più app alla volta per risparmiare tempo.
è stato sviluppato di compatibilità e conflitti con altre librerie
come parte
del progetto
di sistema. Il repository ufficiale più popolare Installazione e dati delle app
freedesktop.org,
per queste app è Flathub, che permette Ovviamente, il modo più semplice per installare
un consorzio di di trovare e installare facilmente moltissime Warehouse è usare Flathub (https://flathub.org/
sviluppatori di applicazioni di diverse tipologie. Quando si tratta apps/io.github.flattool.Warehouse) ma potete
software Open però di gestirle, l'approccio di facilitare la vita anche installarlo dalla riga di comando con
Source e aziende anche agli utenti meno esperti viene un po' meno, flatpak install /path/to/io.github.flattool.Warehouse.
che lavorano su perché bisogna utilizzare l'interfaccia a riga flatpak
tecnologie Linux di comando. Per esempio, per vedere tutti i e avviarlo con il comando:
per desktop. programmi installati si usa il comando flatpak-list flatpak run io.github.flattool.Warehouse
Inizialmente noto che, insieme alle app, mostra anche tutti i loro È anche possibile scaricare il codice sorgente,
come XDG-App,
runtime, ossia gli ambienti di esecuzione scritto principalmente in Python, da GitHub
è stato progettato
per separare le
che forniscono le librerie e risorse di sistema (https://github.com/flattool/warehouse).
applicazioni e condivise su cui si basano. L'utilizzo dei comandi Quando entrate nello strumento, vi vengono
le loro librerie per la gestione dei Flatpak non è difficile e tutto mostrate tutte le applicazioni Flatpak installate
dall'ambiente è ordinatamente spiegato nella documentazione sul vostro computer in ordine alfabetico come
di sistema, (https://bit.ly/470QyTg), anche se in inglese. nella foto qui accanto. Cliccando sull'icona
migliorandone del cestino accanto una di esse la potete
l'isolamento e la disinstallare. Se pensate che potreste volerla
portabilità. Nel reinstallare in futuro, però, avete l'opzione
2016 è stato di conservare i dati utente per poter recuperare
rinominato
le vostre impostazioni e i vostri contenuti quando
in Flatpak in
riferimento alla
lo farete, il che è molto comodo. La gestione
sua struttura dei dati di Warehouse è in generale molto pratica
di pacchetto perché spesso le applicazioni Flatpak lasciano
"flat" (piatta) i loro dati memorizzati nel filesystem quando
che contiene vengono disinstallate. Questo, nel tempo, può
tutte le librerie appesantire il sistema e consumare inutilmente
e le dipendenze spazio su disco. Warehouse risolve il problema
necessarie eseguendo una scansione della cartella dei dati
per eseguire La semplice interfaccia di Warehouse permette di gestire facilmente
i Flatpak installati, i loro dati utente e i remote. La possibilità di lavorare dell'utente per verificare la presenza di
un'applicazione.
in batch e altre funzioni avanzate lo rendono utile anche per i più esperti applicazioni installate associate a essi.
58 LINUX PRO 222

Dall'opzione Manage Leftover Data attivabile
dal menu a hamburger in alto a destra potete ORDINE E SPAZIO IN PIÙ
scegliere di eliminare i dati che non hanno
un'applicazione corrispondente (Trash) “La gestione dei dati di Warehouse
o installarla (Install). Inoltre, Warehouse
può disinstallare le app eliminando i loro dati è molto pratica perché spesso le app
o cancellare i dati senza rimuoverle.
lasciano i loro dati memorizzati nel
Ricerche e operazioni in batch
Per vedere i dati utente e le dimensioni filesystem quando vengono disinstallate”
di una singola applicazione ed eventualmente
cancellarli cliccate sulla i cerchiata accanto
a essa. Avete così accesso anche a una serie di un'applicazione Flatpak a una versione
di altre informazioni inclusi il nome, la precedente direttamente da Warehouse,
descrizione, l'ID dell'app e il suo branch. L'icona il che è utile quando una nuova edizione
della lente in alto a sinistra vi dà invece accesso introduce dei problemi. Potete configurare
alla ricerca per nome dei programmi mentre il vostro sistema per accedere a molti repository
con quella dell'imbuto potete filtrare le vostre remoti diversi e, quando collegate uno di essi, TIP
applicazioni oppure vedere i programmi filtrati in le nuove versioni delle applicazioni e dei runtime Flatpak si basa
base al loro runtime. In alto a destra nella installati da lì vengono scaricate da esso. su una tecnologia
finestra principale trovate l'icona con il segno Come con Git, viene fatto il download solo chiamata OSTree,
di spunta che permette di effettuare operazioni dei dati relativi alle differenze tra le versioni, molto simile
su più applicazioni allo stesso tempo. Dopo aver il che rende il processo molto efficiente. Poterlo al sistema di
selezionato quelle che volete gestire, potete gestire facilmente dall'interfaccia di Warehouse controllo delle
eseguire diverse azioni come la copia delle rende il tutto ancora più comodo. Infine, il menu versioni Git.
Come Git, OSTree
informazioni, l'eliminazione dei dati a hamburger consente di accedere alle
consente di
o la disinstallazione dei programmi. scorciatoie da tastiera che permettono di
tenere traccia dei
utilizzare molte funzionalità dell'applicazione dati versionati e
Altre opzioni utili integrate con combinazioni di tasti, rendendo di distribuirli tra
Abbiamo già accennato al menu a hamburger il programma ancora più veloce da usare. diversi repository.
per la gestione dei dati delle applicazioni. Tuttavia, mentre
Questo menu offre anche altre opzioni Una soluzione pratica Git è progettato
interessanti, tra cui la possibilità di installare Warehouse è un vero coltellino svizzero per tracciare i file
un'app utilizzando il suo file .flatpakref. per la gestione delle app in formato Flatpak. sorgente, OSTree
L'opzione Manage Remotes consente appunto Per quanto sia evidentemente pensato per è concepito per
monitorare i
di aggiungere o rimuovere i "remote". Questo facilitare la vita agli utenti meno tecnici, può
file binari e altri
termine sta per remote repositories e indica essere utile anche ai più esperti raggruppando
dati di grandi
i repository di Flatpak che contengono molte funzioni pratiche in un'unica interfaccia. dimensioni. Per
applicazioni e runtime e si comportano in modo Purtroppo non è possibile gestire i permessi delle maggiori dettagli,
molto simile a quelli di Git (vedi Tip in questa app dal programma e per questo dovrete usare consultate il
pagina). Gli oggetti contenuti in questi repository Flatseal (vedi box qui sotto) se vi piacciono sito https://bit.
sono versionati, per cui è possibile aggiornare i le interfacce grafiche. In ogni caso, vale la pena ly/3QL5sYd.
programmi da lì. Si può anche fare il downgrade di provarlo per risparmiare tempo e spazio. LXP
GESTIRE I PERMESSI DELLE APP CON FLATSEAL

I permessi delle app Flatpak Come dicevamo, Warehouse non
controllano quali risorse di sistema prevede l'intervento sui permessi
e funzionalità del computer host e possiamo capire perché: nelle mani
possono utilizzare. Per esempio, di un utente non molto esperto,
un'applicazione può richiedere infatti, uno strumento per lavorare
l'accesso alla rete per comunicare sui permessi può compromettere
con servizi online, oppure voler usare il funzionamento delle app e creare
directory o file specifici nel più problemi che soluzioni. Se però
filesystem, come nel caso di sapete quello che volete, potete usare
un'applicazione di grafica che può Flatseal (https://github.com/tchx84/ modificarne le autorizzazioni.
necessitare l'accesso a una cartella flatseal) per gestire i permessi Riavviate il programma dopo aver
di immagini. I permessi sono da un'interfaccia grafica. Dopo apportato le modifiche e, se
progettati perché l'utente possa l'installazione, dovete solo lanciare incontrate problemi, vi basta premere
conoscere e gestire queste richieste. Flatseal, selezionare un'applicazione e il pulsante di ripristino in Flatseal.
LINUX PRO 222 59

Tutorial
CASP
Crediti: https://aadhuniklabs.com/
Robot con braccio

mobile e telecamera
Mobilità e un braccio con quattro gradi di libertà per questo robot controllato
da PC e basato su Arduino Nano RP2040 o Raspberry Pi Pico W
on i robot mobili con braccio meccanico regolata utilizzando i tasti Pagina su e Pagina
COSA SERVE
Arduino
C è possibile combinare i vantaggi delle
piattaforme mobili e dei bracci
giù. Il movimento del mouse (premendo
il tasto destro) controlla il braccio robotico in
Nano RP2040 manipolatori. Questo tipo di robot è spesso coordinate polari. A differenza delle coordinate
Connect utilizzato in applicazioni di automazione cartesiane, in cui si utilizzano le coordinate
Raspberry industriale, logistica, manipolazione di materiali x y per rappresentare la posizione di un punto
Pi Pico W e persino in contesti educativi per scopi di rispetto agli assi orizzontale e verticale, quelle
Driver a apprendimento e sviluppo, oltre che in ambito polari utilizzano due valori: la distanza radiale
ponte H per sanitario e di assistenza domiciliare. Può essere (r) e l’angolo theta. Il valore della distanza
due motori usato per eseguire operazioni di presa, radiale rappresenta la distanza dal punto di
5 servo sollevamento, spostamento e posizionamento origine (solitamente indicato come l’origine
motori ad di oggetti. Per esprimere le potenzialità di delle coordinate polari, corrispondente al punto
alta coppia movimento dei bracci robotici si usano i gradi 0, 0 nel sistema cartesiano) ed è sempre
M5Stack di libertà (in inglese degrees of freedom positivo. Il valore dell’angolo theta rappresenta
ESP32CAM abbreviato come DOF) che indicano il numero invece l’angolo formato tra la semiretta che
Convertitore di movimenti o rotazioni indipendenti collega l’origine al punto di interesse e l’asse
da 12 V a 6 V che i bracci possono compiere in uno spazio orizzontale (solitamente preso in senso
4 motori tridimensionale. Ogni grado di libertà in più antiorario). Viene generalmente misurato
CC 12 V aggiunge versatilità alle operazioni che può in radianti o gradi. Spostando il mouse
Batteria eseguire il dispositivo, consentendogli di fare
da 9V a 12V movimenti più complessi. In questo progetto
Cavetti vedremo come costruire un robot mobile a
jumper quattro ruote telecomandato con un braccio
Connettore robotico manipolatore a quattro gradi di libertà
jack di montato sul suo telaio. Questo significa
alimentazione che può compiere quattro tipi di movimenti
Kit braccio o rotazioni indipendenti lungo i suoi assi.
robotico È dotato di una telecamera Wi-Fi ed è
Telaio di base completamente controllato dall’utente
del robot manualmente da un PC host tramite Wi-Fi.
Ruote per
il robot Controllo del robot e del braccio
Codice: Per capire il codice e il funzionamento del robot
https://bit. vediamo per prima cosa come viene controllato
ly/40nLh5K da computer. L’utente può utilizzare il tasto
W per andare avanti, S per andare indietro,
A per ruotare a sinistra rispetto al centro
e D per invece girarsi a destra. Utilizzando
la combinazione dei tasti W/S e A/D lo si può
far girare a destra e a sinistra mentre ci si sposta Il robot in azione. I controlli da PC permettono di farlo avanzare, retrocedere
in avanti o all’indietro. La velocità può essere e girare e di orientare, aprire e chiudere la ganascia
60 LINUX PRO 222

lateralmente si controlla l’angolo del braccio
(theta) rispetto alla posizione di avanzamento
del robot e al suo centro. Spostando il mouse
in avanti e indietro si regola invece il raggio del
braccio. Questi valori vengono quindi convertiti
in coordinate rettangolari per calcolare le
coordinate x e y. Con la rotellina del mouse
si controlla il movimento del braccio nella
direzione z. Il tasto E può essere usato per
attivare/disattivare il controllo del braccio
robotico dal mouse, mentre il tasto P serve
a posizionare il braccio robotico alle angolazioni
predefinite (modalità di parcheggio). I tasti
T e Y servono a ruotare il servo del polso
dell’end-effector, ossia la parte terminale
del braccio che è responsabile per l’interazione
diretta con l’ambiente, che in questo caso è
una ganascia. I tasti J e K servono a controllare
i movimenti di apertura e chiusura della
ganascia. Il tasto L serve per attivare/disattivare La struttura di base per montare i motori, le schede e il braccio meccanico sullo
il flash LED della telecamera ESP32. chassis, su cui si può anche creare una struttura di protezione dell’elettronica
Assemblaggio dell’hardware nello schema di collegamento riportato negli

Quattro motori a corrente continua e le ruote schemi a pagina 62. La disposizione tipica
sono montati su un telaio di base adeguato. è mostrata nella figura qui sopra e può essere
Su questo telaio è installato anche un braccio arricchita da una leggera scocca di protezione
robotico servoassistito a quattro assi, alla dei componenti. La parte elettronica è costituita
cui estremità, prima dell’end-effector, è fissata da un Arduino Nano RP2040 o da un Raspberry
la telecamera ESP32. Per la rotazione degli Pi Pico W che funge da controllore principale
assi del braccio robotico sono utilizzati dei per gestire tutte le funzioni del robot e
servomotori ad alta coppia (vedi Tip a pag. 62). comunicare con il PC host attraverso il modulo
I servomotori vanno montati con attenzione Wi-Fi integrato. Controlla i cinque servi del
per ottenere i movimenti del braccio desiderati. braccio robotico e le quattro ruote del robot.
I moduli elettronici richiesti sono collocati sul Il modulo ESP32 Camera è montato sul braccio
telaio di base e sono connessi come indicato per acquisire video in diretta e trasmetterli al PC
SFRUTTARE CASP (COMPUTER AIDED SIMULATION PROGRAM)

Questo progetto è creato con delle porte. I blocchi si dividono documentazione citata oltre.
lo strumento di modellazione, in primari e secondari. I primi Potete anche creare i vostri blocchi
simulazione e programmazione corrispondono a una subroutine e personali e usarli come gli altri.
CASP. Potete scaricarlo sia per non possono essere ulteriormente
le schede sia per Ubuntu a 64 bit suddivisi, mentre quelli secondari
all’indirizzo https://bit.ly/480vaP9. sono costituiti da un gruppo di quelli
Per iniziare a lavorare con CASP primari. C’è una libreria di blocchi
è necessario installare prima il predefinita e il comportamento
software stesso e poi i CASP Board di ciascuno di essi in un modello
Support Packages, che trovate può essere modificato
allo stesso indirizzo. La modalità configurandone i parametri. Potete
di lavoro con questo strumento aggiungere i blocchi all’area di
è la creazione di modelli, ossia lavoro da un visualizzatore della
insiemi di blocchi interconnessi libreria di blocchi, caricabile con
che rappresentano un problema un’icona nella barra degli strumenti
o un compito. I modelli vengono principale. Basta quindi trascinare
quindi implementati e simulati il blocco selezionato, collegarlo
o eseguiti su un target selezionato. e cambiarne eventualmente Trovate le istruzioni per l’uso
L’entità di base che definisce un i parametri nella finestra che si apre di CASP all’indirizzo https://bit.
compito predefinito è un blocco, facendo doppio clic su di esso ly/3EoDOZY e un tutorial video per
che viene visualizzato graficamente (vedi foto). Per ulteriori informazioni creare i vostri blocchi su https://bit.
come una scatola quadrata con sui blocchi, fate riferimento alla ly/3EoOUOS.
LINUX PRO 222 61

Tutorial
del robot. Per fornire la tensione necessaria ad

alimentare il microcontrollore, i servi e il modulo
telecamera ESP32 viene utilizzato un
convertitore step-down da 9V/12V a 6V CC.
CASP e il modulo videocamera

Scaricate l’ultima versione di CASP dal sito
https://aadhuniklabs.com/casp-downloads.
Consultate il box Sfruttare Computer Aided
Simulation Program (CASP) per leggere come
accedere alla sua documentazione oppure
andate su https://bit.ly/3EpAuxI per vedere
dei tutorial video (in inglese). Trovate il materiale
di riferimento per questo progetto in un file
.zip scaricabile all’indirizzo https://bit.
ly/3Sth2IS. Il software CASP può essere usato
per creare rapidamente modelli e generare
codice binario per il microcontrollore a bordo
del robot e per il PC nativo. Questo software
consente agli utenti di visualizzare graficamente
il segnale in qualsiasi punto del modello in
tempo reale e questa funzione è ampiamente
utilizzata durante la regolazione dei parametri
dei blocchi articolari del braccio robotico.
Oltre ai normali blocchi predefiniti, nel modello
nativo sul PC viene utilizzato anche del codice
personalizzato, sia per il controllo della
navigazione sia per generare le coordinate del
braccio robotico in base ai movimenti del mouse
dell’utente. In questo modo si riduce anche il
numero totale di blocchi nel modello. Il codice
sorgente del blocco personalizzato è disponibile
al collegamento fornito all’inizio di questo
Lo schema di connessione del progetto nelle due implementazioni per Arduino Nano RP2040 articolo e, se volete capire in dettaglio come
Connect (in alto) e Raspberry Pi Pico W (in basso) si creano i blocchi personalizzati, potete trovare
un tutorial video su https://bit.ly/3QsqPMm.
host. La torcia presente sul modulo ESP32-CAM Anche la telecamera deve essere predisposta
TIP viene controllata manualmente dal PC host in e deve avere un indirizzo IP valido prima che
condizioni di scarsa illuminazione. Una batteria possiate utilizzarla nel progetto. Potete svolgere
I servomotori
ad alta coppia da 9 V a 12 V montata sotto il telaio di base questa operazione all’interno di Arduino IDE
sono progettati viene utilizzata per alimentare l’intera circuiteria seguendo la procedura descritta in https://bit.
per muovere
o posizionare
carichi pesanti.
Sono in grado
di generare una
notevole forza
di rotazione
e offrono una
precisione
elevata nel
controllo del
movimento. Si
chiamano così
perché la coppia
è la misura
della capacità
di un motore di
applicare una
forza per far
ruotare un albero
o un dispositivo
collegato.
Il modello nativo che viene eseguito sul PC e che permette di controllare i movimenti del robot e del suo braccio meccanico
62 LINUX PRO 222

Robot con braccio mobile e telecamera
ly/3MuY0h8 oppure direttamente all’interno

del sistema CASP, seguendo le istruzioni fornite
all’indirizzo https://bit.ly/47YLiAw.
Software per le schede Arduino e PI

Il modello target che viene eseguito su Arduino
Nano RP2040 Connect o Raspberry Pi Pico W
è composto da:
1) La logica del lampeggiamento che indica
se il sistema è in funzione;
2) Il blocco WiFi101 che riceve i segnali
di controllo inviati dal PC host;
3) I blocchi del PWM (modulazione in larghezza
di impulso, vedi Tip in questa pagina)
e dei servomotori che sono mappati
sui pin del microcontrollore del progetto;
4) Il blocco di ritardo che serve per resettare
le uscite dei blocchi PWM in caso di errore di
comunicazione o quando l’host non è collegato.
Per programmare correttamente la scheda
target, è necessario svolgere i passaggi
che seguono:
1) Collegare il dispositivo target (Arduino Nano
RP2040 Connect o Raspberry Pi Pico W)
al PC host tramite un cavo USB;
2) Prendere nota del numero di porta seriale
da cui è connesso al sistema operativo host;
3) Eseguire CASP e caricare il progetto
rc_arduino per il target Arduino RP2040 oppure
rc_picow per il Raspberry Pi PicoW.
Il Wi-Fi del blocco WiFi101 è impostato in
modalità Station. Occorre inserire SSID e
password della rete a cui il dispositivo deve Lo schema dei modelli target in CASP per l’utilizzo di Arduino Nano RP2040 Connect
essere collegato. Il parametro dell’indirizzo IP (in alto) e Raspberry Pi Pico W (immagine in basso)
locale deve essere configurato come assegnato
dal client DHCP della rete. Aprite quindi la voce Il modello per il PC
di menu Home > Simulation > Setup Simulation Il modello nativo che viene eseguito sul PC host
Parameters. In TargetHW > General tabs è costituito da: TIP
impostate poi il parametro Target Hardware 1) Il blocco telecamera che riceve video PWM sta per
Programmer Port sulla porta seriale a cui in diretta dall’ESP32 Camera. L’indirizzo IP “Pulse-Width
è collegata la scheda, annotata prima. del modulo deve essere inserito nei parametri Modulation”
Infine, compilate il modello e programmate di questo blocco; (modulazione
la scheda facendo clic sul pulsante Run. 2) Il blocco di visualizzazione delle immagini per in larghezza di
impulso) ed è una
tecnica utilizzata
per variare la
larghezza degli
impulsi di un
segnale elettrico
in modo da
controllare la
potenza erogata
da un dispositivo.
Si possono in
questo modo
controllare
la velocità di
un motore, la
luminosità di
una lampadina
o altre variabili
dipendenti dalla
La finestra Configure Simulation Hardware, di cui qui si vede una parte, permette di modificare gli indirizzi IP del nodo nativo (PC host) potenza.
e del dispositivo GPIO con i rispettivi indirizzi IP del PC e del microcontrollore utilizzato
LINUX PRO 222 63

Tutorial
TIP
La cinematica
diretta calcola
posizione e
orientamento
dell’end-effector
di un robot
in base alle
posizioni delle
giunture o
degli attuatori.
Risponde alla
domanda:
“Data una
configurazione
specifica delle
giunture o degli
attuatori del
robot, dove si La funzione Run del codice in C++ del blocco personalizzato elabora gli input, aggiorna vari parametri di controllo (tra cui le coordinate X, Y, Z,
troverà l’end- il flash del LED e il parcheggio) e gestisce lo stato generale del suo funzionamento
effector nello
spazio?”. mostrare il video in diretta ricevuto dalla disabilitazione, coordinate x, y e z, controllo
La cinematica telecamera. È inoltre configurato per della torsione e della ganascia) e gestisce lo
inversa, invece,
trasmettere i segnali della tastiera e del mouse; stato generale del funzionamento del blocco
calcola le
3) Il blocco di controllo RC. Si tratta di un blocco personalizzato. I suoi passaggi sono i seguenti:
posizioni delle
giunture o personalizzato che riceve i segnali della tastiera 1. La prima cosa che fa la funzione è controllare
degli attuatori e del mouse dal blocco di visualizzazione delle se è passato un certo intervallo di tempo
necessarie immagini e genera i segnali di controllo adatti (in questo caso, circa 10.000 unità di tempo).
per impostare a gestire il movimento del robot; Se non è ancora trascorso, la funzione
l’end-effector 4) I quattro blocchi degli assi del braccio restituisce che è in anticipo, ossia non esegue
in una posizione robotico che rappresentano i suoi quattro assi, i suoi compiti principali con una frequenza
desiderata nello compreso l’end-effector. I parametri di questi superiore a questo intervallo.
spazio. Risponde blocchi devono essere accuratamente regolati 2. Poi una funzione di elaborazione degli input
alla domanda:
per corrispondere alle rispettive dimensioni/ recupera i valori immessi dalla tastiera o dal
“Voglio che l’end-
parametri del braccio. Questi blocchi calcolano dispositivo di input e calcola le differenze nelle
effector si trovi in
una determinata la cinematica di avanzamento di ciascun asse; posizioni x, y e z rispetto al passo precedente.
posizione nello 5) Il blocco Robotic Arm Inverse Kinematics 3. Quindi il codice controlla se è stato premuto
spazio; quali che esegue la cinematica inversa per calcolare un particolare tasto (L) della tastiera. Se il tasto
devono essere l’angolo di ciascun asse; viene premuto e il LED non è stato acceso
le posizioni delle 6) Il blocco Robotic Arm Control. È un blocco in precedenza, il codice altera il suo stato.
giunture o degli personalizzato che genera i set point richiesti 4. La logica del parcheggio, se il valore en_out
attuatori per (x, y, z) e i segnali di controllo del braccio (lo stato di abilitazione) è maggiore di -2,
raggiungerla?”. robotico in base agli input della tastiera controlla se è stato premuto un tasto specifico
Entrambi i
e del mouse dell’utente; (P). Nel caso, imposta en_out a -1, indicando
concetti sono
7) I blocchi GPIO che si collegano al modello lo stato di parcheggio.
fondamentali per
programmare target tramite Wi-Fi. 5. Se il tasto P non è premuto (cioè non c’è uno
e controllare i stato di parcheggio), controlla se un altro tasto
robot. Logica del blocco personalizzato (E) è premuto. Se questo tasto è premuto
Il blocco personalizzato utilizzato nel progetto e non è stato premuto in precedenza, abilita
è CustomBlock 193083739. Le sue funzioni il controllo delle coordinate x, y e z.
chiave sono PreRun e Run. Il primo viene 6. In base alle condizioni precedenti, la funzione
richiamato prima dell’esecuzione primaria del aggiorna le coordinate x, y e z memorizzate
blocco. Inizializza vari parametri e memorizza in xyz_out.
alcuni valori iniziali. Per esempio, imposta i valori 7. Il controllo della torsione verifica se i tasti
iniziali di led_out e en_out per controllare T o Y sono premuti per regolare il sistema
il LED, xyz_out per rappresentare le coordinate di torsione, modificando il valore tw_out entro
x, y e z, tw_out per controllare la rotazione un intervallo compreso tra -90 e 90.
del braccio e jaw_out per gestire la ganascia. 8. Il controllo della ganascia verifica se i tasti
Memorizza anche la posizione iniziale del mouse J o K sono stati premuti per aprire o chiudere
e altre informazioni. La funzione Run elabora la ganascia regolando il valore jaw_out,
gli input, aggiorna vari parametri di controllo eventualmente con un controllo più fine quando
(tra cui LED, parcheggio, abilitazione/ viene premuto il tasto Maiusc.
64 LINUX PRO 222

Robot con braccio mobile e telecamera
9. Con il controllo finale dello stato di abilitazione,

se il valore en_out è stato inizialmente impostato
a -2 (indicando la prima esecuzione), viene
portato a -1 per indicare che è stata completata.
Eseguire il modello nativo sul PC host

Per eseguire il modello nativo sul PC host,
bisogna procedere come segue:
1) Verificate che il PC host sia collegato alla
stessa rete a cui è connesso il dispositivo;
2) Caricate il progetto rc_native;
3) Fate clic sulla voce del menu Home >
Simulation > Configure Simulation IO;
4) Si aprirà la finestra Configure Simulation
Hardware. In Native Nodes e GPIO Device
Nodes, modificate gli indirizzi IP contrassegnati
nella schermata in basso a pagina 61 (facendo
doppio clic sull’elemento) con i rispettivi indirizzi
IP locali e del dispositivo;
5) Fate clic sul pulsante Connect Device e
selezionate la casella di controllo Online Data.
Il controllo della torsione verifica se i tasti T o Y sono premuti per
Il programma ora comunica con il target modificare il valore tw_out entro un intervallo compreso tra -90 e 90.
con un tempo di ciclo di circa 30 msec. Quello della ganascia verifica se i tasti J o K sono stati premuti
La scheda target è ora disponibile come punto per aprirla o chiuderla regolando il valore jaw_out
finale EP0 per il modello nativo, che può
utilizzare questo end point per connettersi per ottenere la postura desiderata del braccio
ai rispettivi I/O sul target; robotico subito dopo l’accensione e durante TIP
6) Fate clic sul pulsante Save per salvare il funzionamento. La velocità di base, i limiti
Un “end-
la configurazione e chiudere la finestra; di velocità e altri parametri relativi alla effector” (o
7) Eseguite il modello facendo clic su Run. navigazione sono regolabili dai parametri “effettore
Si apre quindi una finestra del pannello di del blocco nav_control. Sui sistemi in cui terminale”) è la
simulazione che comunica con la scheda. l’hardware grafico non è in grado di visualizzare parte finale di
Qui sotto è riportata una schermata del pannello correttamente la rappresentazione 3D, si un dispositivo o
di simulazione in esecuzione sul PC host. consiglia di disabilitare il blocco 3D. A volte robot che viene
il manipolatore del braccio robotico può perdere utilizzata per
Regolazioni e precauzioni di sicurezza il controllo. Un modo per rallentare il movimento compiere una
I collegamenti dei motori delle ruote possono del braccio è regolare i parametri del blocco specifica azione.
Gli end-effector
essere invertiti per ottenere un movimento servo (nel modello target) per limitare la velocità
possono avere
in avanti o all’indietro quando si premono di variazione degli angoli degli assi. Come diverse forme
W e S. I servi del braccio robotico devono sempre con i bracci meccanici, è necessario e funzioni,
essere regolati in modo da corrispondere prendere le dovute precauzioni per evitare a seconda
ai parametri del blocco assi corrispondente infortuni. Tenete il dispositivo fuori dalla portata dell’applicazione
nel modello. I parametri vanno regolati con cura dei bambini almeno durante la fase di sviluppo. LXP e del tipo di robot.
Per esempio,
in un braccio
robotico,
l’end-effector
potrebbe essere
una pinza,
una ventosa,
un utensile di
saldatura o
qualsiasi altra
attrezzatura.
In un robot
chirurgico,
l’end-effector
potrebbe essere
uno strumento
specializzato
per eseguire
operazioni
precise.
Schermata del pannello di simulazione dell’output in esecuzione sul PC host, che mostra anche il video ripreso dal robot
LINUX PRO 222 65

Tutorial
WEB DESIGN
Sfruttare la potenza
di un veterano
jQuery ha ancora molte frecce al suo arco e capirne funzionamento e funzioni
principali è molto utile a chiunque lavori su siti in JavaScript
rima di jQuery, creato nel 2006 come selettori CSS. Consentono di creare oggetti jQuery
P progetto Open Source dallo sviluppatore
John Resig, c'era una mancanza di coerenza
che rappresentano gli elementi selezionati, i quali
possono poi essere manipolati, modificati o collegati
tra i diversi browser e la scrittura di JavaScript per a gestori di eventi. Tra le più usate ci sono:
interagire con il DOM (Document Object Model, una $(selettore) : seleziona elementi HTML
rappresentazione strutturata dei contenuti di una utilizzando un selettore CSS;
pagina Web) poteva essere complicata e laboriosa. $(elemento) : incapsula un elemento HTML
Questa libreria ha portato un'interfaccia semplice e esistente in un oggetto jQuery;
TIP unificata per selezionare elementi HTML, manipolare $(funzione) : esegue una funzione quando
Per ulteriori il DOM e gestire eventi, consentendo agli sviluppatori il documento è pronto.
informazioni Web di scrivere meno codice JavaScript e di farlo in Le funzioni di manipolazione del DOM
sulla gestione modo più efficace. Anche se oggi c'è molto altro sul permettono di modificarne facilmente
degli eventi mercato, jQuery ha ancora molte frecce al suo arco il contenuto, la struttura e gli attributi,
visitate https://
(vedi box Ancora attuale dopo 17 anni) e conoscere consentendo di apportare modifiche dinamiche
learn.jquery.
com/events/ e
le sue principali caratteristiche e comandi, oltre alla pagina senza dover scrivere molto codice
familiarizzate con ai suoi plug-in salvatempo presentati a pag. 44 JavaScript puro. Tra quelle indispensabili
i metodi disponibili di questa rivista, può essere utilissimo. per il vostro arsenale trovate:
su https://api. .html() : ottiene o imposta il contenuto HTML
jquery.com/ Selezionare elementi e manipolare il DOM degli elementi selezionati;
category/events/. jQuery offre pratiche funzioni per selezionare .text() : ottiene o imposta il testo contenuto
Per gli effetti elementi HTML all'interno di un documento negli elementi selezionati;
potete invece Web in base a determinati criteri, come per esempio .val() : ottiene o imposta il valore degli elementi
far riferimento di input;
a https://learn.
.attr() : ottiene o imposta gli attributi degli
jquery.com/
effects/ e https://
elementi selezionati;
api.jquery.com/ .addClass() : aggiunge una o più classi CSS
category/effects/. agli elementi;
Per approfondire .removeClass() : rimuove una o più classi
la vostra CSS dagli elementi;
conoscenza .append() : aggiunge contenuti alla fine degli
della libreria e elementi selezionati;
risolvere problemi .prepend() : aggiunge contenuti all'inizio degli
è preziosissima la elementi selezionati;
community, con
.remove() : rimuove gli elementi selezionati dal DOM.
cui potete entrare
in contatto con
i collegamenti Gestire eventi e creare animazioni
raccolti in https:// Altri metodi di jQuery molto utili sono quelli che
jquery.org/ Il blog di jQuery (https://blog.jquery.com) è il punto di riferimento per tutte
consentono di collegare gestori di eventi a elementi
support/ . le novità e gli aggiornamenti, mentre sui Forum (https://bit.ly/3QI78BC) HTML e di definire come l'applicazione deve
e Stack Overflow (https://bit.ly/45TC46h) potete trovare ampio supporto rispondere a determinati eventi, come clic del mouse,
66 LINUX PRO 222

i suoi movimenti, le pressioni dei tasti, il caricamento
della pagina, ecc. Tra i più comuni ci sono: RICHIESTE ASINCRONE FACILI
.click() : associa un gestore di eventi al clic
degli elementi; “In jQuery, l'uso di AJAX
.on() : associa gestori di eventi personalizzati
agli elementi; è semplificato grazie a una serie
.off() : rimuove gestori di eventi associati
agli elementi; di metodi che velocizzano la
.trigger() : attiva un evento specifico su elementi.
jQuery offre anche delle funzioni per le creazione e gestione di richieste”
animazioni che consentono di migliorare
l'esperienza dell'utente aggiungendo
rapidamente effetti visivi dinamici alle pagine tutti i dettagli della richiesta, come
Web. Tra quelle essenziali abbiamo: il metodo HTTP, l'URL di destinazione, i dati
.hide() : nasconde gli elementi selezionati da inviare, i gestori di eventi e molto altro.
con un'animazione; Ecco un esempio di base del suo utilizzo:
.show() : mostra gli elementi selezionati $.ajax({
con un'animazione; url: "url_del_servizio",
.fadeIn() : fa apparire gli elementi gradualmente; type: "GET", // o "POST" per una richiesta POST
.fadeOut() : fa scomparire gli elementi data: { parametri: "valore" }, TIP
gradualmente; success: function (risposta) { Il creatore di
.animate() : esegue animazioni personalizzate // Gestire la risposta qui jQuery, John
sugli elementi. }, Resig, ha
Per applicare invece degli effetti si possono usare: error: function (errore) { originariamente
.slideDown() : mostra un elemento // Gestire gli errori qui sviluppato
con uno scorrimento verso il basso; } anche QUnit, un
framework di
.slideUp() : nasconde un elemento });
test utilizzato per
con uno scorrimento verso l'alto; Da conoscere poi anche questi metodi: testare il codice
.slideToggle() : alterna tra l'apertura e la chiusura .get() : esegue una richiesta HTTP GET; di jQuery stesso.
di un elemento con uno scorrimento. .post() : esegue una richiesta HTTP POST; Ora è una libreria
.load() : carica il contenuto di una risorsa esterna Open Source
Utilizzare AJAX con jQuery e lo inserisce negli elementi selezionati; indipendente
AJAX (Asynchronous JavaScript and XML) .getJSON() : semplifica il recupero di dati JSON utilizzata
è una tecnica di sviluppo che consente di da un server; per scrivere
effettuare richieste asincrone al server da una .getScript() : carica uno script JavaScript ed eseguire
pagina Web senza doverla ricaricare per intero. da una risorsa esterna e lo esegue. test unitari in
JavaScript.
Questo consente di aggiornarne dinamicamente i Questi sono solo alcuni esempi di metodi di jQuery
Trovate il
contenuti senza interrompere l'esperienza in varie categorie. La libreria offre una vasta progetto e la sua
dell'utente. In jQuery, l'uso di AJAX è semplificato gamma di funzionalità che semplificano il lavoro e documentazione
grazie a una serie di metodi che velocizzano la che, in abbinamento con i suoi plug-in, lo rendono all'indirizzo
creazione e la gestione di richieste. Uno dei più pratico. Potete trovare altre funzioni utili e https://qunitjs.
flessibili per effettuare richieste AJAX approfondimenti sull'uso della libreria all'indirizzo com.
personalizzate è $.ajax() . Permette di specificare https://bit.ly/3FJC7XH. LXP
ANCORA ATTUALE DOPO 17 ANNI

Secondo i dati raccolti da Stack più vecchi. Inoltre, molti attuali siti ed efficiente dei siti, garantendo
Overflow nel 2023 (https://bit. Web e applicazioni online sono stati un'esperienza utente fluida
ly/46UHTlb), jQuery è ancora originariamente realizzati con jQuery pur risparmiando risorse. jQuery
il terzo strumento più usato dagli e la loro migrazione a framework si integra anche con altre librerie
sviluppatori professionisti, preceduto più recenti può essere un processo e framework JavaScript, dandovi
solo da React e Node.js. Anche lungo e costoso. È quindi utile poterli molte possibilità di creare il vostro
se c'è chi sostiene che i framework mantenere ed espandere progetto in modo rapido ed efficace.
moderni lo abbiano reso poco utilizzandolo, considerando anche Infine, ma non meno importante,
pratico, infatti, ha ancora molti punti che la libreria si impegna a garantire ha una comunità enorme, attiva
di forza. Innanzitutto offre un'API la retrocompatibilità e che è possibile e disponibile che ha creato un'ampia
coerente che semplifica lo scripting usare il vecchio codice con le sue documentazione, tutorial, plug-in
attraverso varie versioni dei browser, versioni più recenti. Il design leggero e forum e che può aiutarvi a risolvere
rendendolo un'ottima scelta per di jQuery è anche un grande qualsiasi problema possiate
i progetti che coinvolgono browser vantaggio per il caricamento rapido incontrare mentre sviluppate.
LINUX PRO 222 67

Accademia del Codice
WEB APP
Pasti sempre sotto

controllo con l'app
Organizzare cosa mangiare può essere noioso e dispendioso
in termini di tempo: vendete una soluzione che semplifica la vita!
e c'è una cosa che tutti dobbiamo fare l'aspetto fondamentale è la definizione di "pasto".
TIP S è mangiare e organizzare i pasti richiede
tempo. Non vogliamo spendere troppo,
Il pasto può essere di due tipi principali: generico
o specifico. Un pasto generico non include piatti
I diagrammi non vogliamo mangiare troppe volte le stesse cose o altro, è semplicemente una rappresentazione
servono
che fanno ingrassare, preferiamo un po' di varietà, astratta. Per esempio, potrebbe essere una cena
anche come
ecc. Perché allora non creare una Web app per fuori, ordinare a domicilio, ecc. In questo caso
documentazione
del progetto. permettere di pianificare i pasti in modo semplice il pasto non necessita alcuna specifica aggiuntiva
Forniscono e immediato? Questo è il progetto più breve e e non richiede di aggiungere piatti: l'utente lo
un punto di semplice fra quelli che vi proponiamo su questo usa semplicemente come segnaposto. Il pasto
riferimento per numero e si occupa esclusivamente di una cosa: con uno o più piatti invece include una serie di
gli sviluppatori prepararvi a creare qualsiasi app imparando parametri in più che dipendono dai piatti stessi
che potrebbero a panificarne perfettamente la struttura. (pasto leggero o pesante, tempo di preparazione,
essere nuovi al La progettazione del flusso logico mediante ecc.) e può essere composto da un singolo piatto
progetto o per la diagrammi è una fase cruciale del processo (e quindi il piatto coincide con il pasto) oppure da
manutenzione e
di sviluppo del software. Promuove una più piatti (che quindi sono "figli" del pasto). Queste
gli aggiornamenti
comprensione comune dell'applicazione, migliora considerazioni e molte altre sono essenziali per
futuri.
Inoltre sono la comunicazione e aiuta a costruire creare un flusso di lavoro ordinato, per evitare a un
perfettamente un'applicazione Web più organizzata, efficiente certo punto del lavoro di rendersi conto di essersi
leggibili anche da e resistente agli errori. I diagrammi forniscono dimenticati una casistica e dover potenzialmente
investitori e altre una rappresentazione visiva della logica tornare a ritoccare tutta la code base fin dall'inizio.
parti coinvolte dell'applicazione, rendendo più facile sia per gli
che non hanno sviluppatori sia per gli stakeholder capire come Un diagramma di flusso come base di lavoro
dimestichezza interagiscono i diversi componenti. In tutte queste situazioni, non dovete mai iniziare
con la lettura La visualizzazione del flusso aiuta a identificare a scrivere anche solo una riga di codice se
del codice. potenziali complessità, dipendenze e aree non avete creato un diagramma di flusso che
che potrebbero richiedere ulteriori chiarimenti. consideri tutti i potenziali percorsi e che spieghi
I diagrammi di flusso, inoltre, spesso rivelano come farete interagire l'utente a ogni passaggio.
potenziali casi limite o scenari che potrebbero non Per farlo noi abbiamo utilizzato draw.io (https://
essere immediatamente evidenti esaminando solo drawio.com), che è gratuito, estremamente
il codice o i requisiti. L'identificazione precoce flessibile e che vi permette di salvare e
dei casi limite aiuta a costruire un'applicazione condividere in vari modi, ma voi potete usare
più robusta e resistente. qualsiasi sistema con cui vi trovate a vostro agio.
Invece di vedere direttamente il codice quindi
Dall'idea al progetto finito vedremo i vari passaggi, partendo con l'ideale
In queste due pagine ci focalizzeremo quindi clic fatto dall'utente sul pulsante di aggiunta
su come preparare un progetto in modo di un pasto al calendario che avrete predisposto.
che la scrittura del codice sia poi fluida e semplice. La prima domanda da farsi è se l'utente vuole
Anzitutto per qualsiasi app dovete ragionare sugli aggiungere un pasto nuovo o sceglierne uno
aspetti fondamentali e per questo progetto esistente. Se decide di usarne uno esistente,
68 LINUX PRO 222

viene visualizzata una modale in cui l'utente due opzioni: ricerca testuale del piatto o Un diagramma di
sceglie se essere guidato o se cercare inserimento di un piatto nuovo. Voi però potete, flusso per un'app
direttamente il pasto testualmente. Se quindi per esempio, aggiungere un percorso guidato deve essere
articolato ma non
sceglie di cercarlo usando il testo, userete come per i pasti applicato anche ai piatti. implicitamente
semplicemente un select con autocomplete Alla fine della scelta del primo piatto dovrete complesso. Anzi:
o con ricerca via AJAX: se l'utente decide di chiedere agli utenti se questo è un pasto con assicuratevi di non
inserirlo così, il lavoro è finito, basta aggiungerlo piatto unico o se ci sono più portate. Nel primo fare percorsi inutili
o eccessivamente
al calendario. Se invece desidera usarlo come base caso chiuderete il pasto e salverete mentre nel
lunghi e difficili da
per modificarlo e creare un pasto leggermente secondo caso farete ripetere l'aggiunta del piatto. leggere. Se infatti
diverso farete una cosa molto ordinata: caricherete sono complessi
i dati dopodiché lo farete riconfluire nel flusso Tradurre il diagramma in codice nel diagramma, lo
logico della creazione di un nuovo pasto, per Ora che avete strutturato perfettamente la vostra saranno ancora di
più nel codice!
riutilizzare il codice. Se invece l'utente vuole essere app non pensiate di poter già scrivere codice!
guidato nella ricerca, creerete un form che passo Perché anzitutto dovreste avere l'accortezza
dopo passo gli chiederà di affinare la sua scelta: di scrivere commenti nei file di script che emulino
vuole un pasto veloce o no? Vuole un pasto la struttura del diagramma: quando avrete finito
leggero o no? E via dicendo. A ogni risposta non dovrete fare altro che scrivere tutto il vostro
dovrete avere cura di verificare se ci sono codice con una guida testuale che vi evita errori
abbastanza pasti che rispondono ai nuovi requisiti e che vi accompagna durante tutto il progetto. LXP
e se non ce ne sono avvisare l'utente, in modo che
non finisca in un vicolo cieco.
Creazione di un pasto
Se invece l'utente ha deciso di creare un pasto
nuovo, viene visualizzato il form del pasto: se
l'utente arriva dal percorso di creazione basandosi
su un pasto esistente, verranno anche visualizzati
i suoi parametri e un elenco dei piatti coinvolti.
A questo punto, il pasto include piatti o è un pasto
generico? Se è generico, l'utente deve solo
compilare i campi essenziali che abbiamo visto
prima e il percorso è finito. Se invece include
dei patti va aperta una nuova finestra oppure una
nuova area di inserimento dati in cui l'utente potrà
aggiungere il primo piatto. Anche qui modellerete
il percorso in base a cosa vuole fare l'utente. In questa fase del diagramma vedete come il flusso logico è pensato per riutilizzare il codice nel caso
Per semplificarlo, noi abbiamo considerato solo in cui un utente desideri creare un pasto partendo da uno esistente
LINUX PRO 222 69

Il codice
WEB APP lo trovi
nel DVD
virtuale!
Fate risparmiare soldi

ai vostri utenti
Create una Web app per tenere traccia dei pagamenti ricorrenti,
partendo dalla struttura e arrivando a pubblicarla
er rimanere in tema con l'articolo di endpoint per l'API. Abbiamo quindi creato
TIP
Ne abbiamo già
P copertina, in queste pagine vedrete come
creare una Web app da vendere e trovate
la seguente struttura:
Directory app
parlato in questo tutto il codice sul DVD digitale. In questo caso La directory app è il punto in cui sono presenti
numero ma lo creerete un'app per tenere traccia dei pagamenti tutti i componenti. Come file, troverete:
ribadiamo per ricorrenti. Iscriversi a un servizio da pochi euro app.js: il file principale dell'applicazione;
completezza: al mese e poi dimenticarsene è un attimo, salvo functions.js: il file con le funzioni condivise;
cercate sempre poi vedere lievitare i costi mensili della carta .env: il file con tutte le password e le credenziali
di programmare di credito! Insieme creeremo quindi una Web app che non devono essere condivise con terzi
in inglese.
che permette di tenere traccia di questi pagamenti e non devono essere tracciate con git.
Vi garantisce
e che ha queste caratteristiche: Al suo interno ci sono due directory:
supporto
internazionale, - Aggiunta e modifica degli abbonamenti; Directory views
vi evita problemi - Visualizzazione su calendario; Qui troverete i template di tutte le pagine,
con caratteri - Visualizzazione come lista; sia il layout principale sia i contenuti che variano
accentati e vi - Sistema di avvisi per notificare gli utenti di pagina in pagina.
permette di un giorno prima del rinnovo di un abbonamento Directory public
vendere la vostra per permettere loro di disdire se vogliono; Questa è la directory accessibile sul Web.
app a un pubblico - Esportazione dei dati. Contiene tutti i file .js usati dai template
enorme! Per questa app useremo Node.js per il back-end e la directory asset che include fogli stile, ecc.
e sfrutteremo come template grafico Metronic
(vedi Tip a pagina 72). Composizione delle pagine
Per tutte le pagine userete una logica uniforme.
Struttura e progettazione Prenderete un layout di base che rappresenta
Per iniziare, manterremo la struttura molto il grosso della pagina. Userete poi un file
essenziale, visto che si tratta di una Web app di navigazione che viene aggiunto solo alla
che non richiede grandi calcoli lato server o tanti dashboard e infine avrete ovviamente i file
dei contenuti. Per renderizzare le pagine userete
express-ejs-layouts . Nel file app.js per visualizzare
ogni pagina userete una struttura di questo tipo:
// Route to display the calendar
app.get('/calendar', (req, res) => {
res.render('calendar', {
pageTitle: 'Calendar',
pageContent: 'calendar',
pageScript: '<script src="https://cdn.jsdelivr.net/
npm/fullcalendar@6.1.9/index.global.min.js"></
script><script src="calendar.js"></script>'
L'idea è quella di fornire non solo un elenco di abbonamenti sottoscritti });
ma anche una panoramica mensile e una annuale });
70 LINUX PRO 222

Qui state renderizzando il layout di base
(che di default si chiama layout.ejs) che include SCEGLIETE L'APP GIUSTA
questo frammento di codice:
<div id="kt_app_content" class="app-content"> “Usate questo codice per costruirci
<%- include(pageContent) %>
</div> attorno un'app ancora più completa in
layout.ejs contiene codice HTML identico
per tutte le pagine, solo il contenuto cambia grado di risolvere problemi che i vostri
e per il calendario che avete appena visto il file
si chiama calendar.ejs (".ejs" viene omesso per utenti hanno e avrete successo”
pageContent). layout.ejs include anche questo
frammento di codice a fine pagina:
<script src="/common.js"></script> calendar
<%- pageScript %> Questo è il calendario con tutti gli abbonamenti
Qui vedete che in tutte le pagine includiamo segnati e visualizzabile per mese, settimana, ecc.
le funzioni comuni a tutte mentre ci riserviamo new_subscription
una variabile per includere file JavaScript Qui creerete un nuovo abbonamento.
specifici per delle pagine. Nel caso del calendario, update_subscription/:subscription_id
abbiamo sia la libreria che permette di disegnare Qui modificherete l'abbonamento indicato.
il calendario, sia lo script ("calendar.js") che options
gestisce la pagina. Il codice di gestione delle Qui trovate tutte le opzioni di configurazione
route per la dashboard è un po' diverso invece: e di esportazione dei dati.
// Route to display the dashboard
function renderDashboardPage(req, res) { Partire dalla creazione
res.render('dashboard', { Inizierete a popolare il database di abbonamenti
pageTitle: 'Edit Subscription', con la pagina di aggiunta. Non vedremo insieme
pageContent: 'dashboard', il codice HTML, troppo lungo per queste pagine
navBar: 'navbar', e che troverete sul DVD digitale. Quello che vi
pageScript: '<script src="/dashboard.js"></script>' serve sapere è che ogni abbonamento ha nome,
}); descrizione, data del primo pagamento, ciclo di
} pagamento (mensile, settimanale, ecc.), durata del
ciclo (1 mese, 2 mesi, 3 mesi, ecc.), spesa e cartella.
// A single handler for multiple routes La cartella, o folder, è opzionale e serve all'utente
app.get('/dashboard', renderDashboardPage); a categorizzare meglio gli abbonamenti
app.get('/dashboard_all', renderDashboardPage); mettendoli in cartelle tematiche. Abbiamo anche
app.get('/dashboard_cancelled', previsto l'uso di tag che però non abbiamo ancora
renderDashboardPage); implementato: potete farlo voi se lo desiderate.
Inoltre ogni pagina ha un riepilogo dei costi
Siccome la dashboard, come poi vedrete, deve e dei numeri degli abbonamenti attivi, quindi in
gestire diversi casi (tutti gli abbonamenti, solo quelli ogni script troverete una funzione che carica i dati
attivi o solo quelli annullati) usando però lo stesso relativi e li visualizza. Vedremo quindi il codice
file di contenuto e lo stesso script, qui creerete una JavaScript che gestisce la pagina:
singola funzione per renderizzarla e reindirizzerete $(document).ready(function () {
lì le chiamate delle tre diverse route. Vedrete poi
che sarà il codice JavaScript a capire come gestire fetchDataAndRender(populateTotals);
i tre diversi casi. Creerete cinque route:
dashboard // AJAX request to fetch the list of folders
Qui troverete l'elenco degli abbonamenti, $.ajax({
filtrabile e modificabile. url: '/get_folders',
STRUTTURA DEL DATABASE E UTENTE FISSO

Una delle cose che non abbiamo sempre usato un ID utente 1 per user, che registra nome utente,
fatto noi per nessuna delle app tutte le operazioni: starà poi a voi email e valuta preferita;
è il sistema di login e registrazione, implementare questo sistema se currencies, che registra tutte
perché dipende dalle vostre volete commercializzare un'app le conversioni per le valute usate;
esigenze, dal vostro stack basata su questo codice. Troverete folders, che ha nome e ID delle
tecnologico e dalle vostre però l'SQL del database esportato, cartelle utilizzate;
competenze. In questa app quindi che non analizzeremo qui ma che subscriptions, che ha tutti i dati
vedrete, per esempio, che abbiamo molto semplicemente include 4 table: degli abbonamenti.
LINUX PRO 222 71

Il modulo di
aggiunta di un
abbonamento
è, come il
resto dell'app,
completamente
responsive.
Qui lo vedete su
due colonne ma su
dispositivi mobili lo
visualizzerete
su singola colonna
method: 'GET', if (response.status === 200) {

success: function (folders) { window.location.href = '/dashboard';
populateFolderDropdownSubscription(folders); } else {
}, alert('Failed to add subscription. Please try
error: function () { again.');
alert('Failed to fetch folders. Please try again }
TIP later.'); })
Che scegliate lo } .catch(error => {
stesso template }); alert('An error occurred. Please try again
che abbiamo later.');
usato noi o });
meno (Metronic,
}); });
https://
keenthemes.
com/metronic), il document.getElementById('addSubscriptionForm'). function populateTotals(folders, folder_id,
nostro consiglio addEventListener('submit', function (event) { subscriptions, currencyData) {
è di utilizzare event.preventDefault(); updateTotals(subscriptions, currencyData);
un modello per
il front-end. // Create a FormData object and populate it with the }
Ne trovate form data
tantissimi a const formData = new FormData(this); // 'this' refers Qui ci sono due elementi fondamentali.
prezzo molto to the form element Quando il documento è caricato, anzitutto, lo script
contenuto
fetchDataAndRender(populateTotals) recupera i dati
(facilmente entro
// Convert FormData to JSON per i totali e passa populateTotals come callback
i 50 euro) sul sito
ThemeForest const formDataJSON = {}; in modo che i dati vengano renderizzati una volta
(https:// formData.forEach((value, key) => { terminata la richiesta ( fetchDataAndRender è una
themeforest. formDataJSON[key] = value; funzione comune che vediamo dopo). Dopodiché
net/). Essendo }); c'è una richiesta AJAX che recupera l'elenco
fatti per siti Web di cartelle dal server. Quando la richiesta
e Web app, tutti // Send the data as JSON in the request body ha successo, viene richiamata la funzione
forniscono il fetch('/add_subscription', { populateFolderDropdownSubscription per popolare
codice sorgente, method: 'POST', l'elenco a discesa con le cartelle selezionabili
il che li rende
headers: { dall'utente se lo desidera. L'altro elemento è il
perfettamente
'Content-Type': 'application/json', codice che invia i dati presenti nel form al server
personalizzabili
in base alle }, sempre via AJAX. Quando l'utente preme sul
vostre esigenze body: JSON.stringify(formDataJSON), pulsante di invio del modulo, lo script impedisce
specifiche. }) l'invio al server dei dati tramite modulo per farlo
.then(response => { invece, appunto, via JavaScript. Crea un oggetto
72 LINUX PRO 222

Fate risparmiare soldi ai vostri utenti
FormData per raccogliere i dati del modulo

e lo converte in formato JSON, in modo che possa
essere inviato come corpo della richiesta in
formato JSON. Invia quindi una richiesta HTTP
POST all'endpoint /add_subscription sul server.
Infine gestisce la risposta del server: se lo stato
della risposta è 200 (che indica il successo),
reindirizza l'utente alla pagina /dashboard .
Se c'è un errore, lo visualizza. E visto che siamo
in tema di aggiunta dati, vediamo anche la pagina
di modifica, solo per le funzioni diverse rispetto
a quella di aggiunta:
function populateTotals(folders, folder_id,
subscriptions, currencyData) {
updateTotals(subscriptions, currencyData);
const subscriptionId = getLastURLSegment();
populateFolderDropdown();
populateEditSubscriptionForm(subscriptionId);
// Function to populate the edit_subscription form

function populateEditSubscriptionForm(subscription_
id) {
// Make an AJAX request to fetch the subscription
data
$.ajax({ }); La visualizzazione
a calendario
url: `/get_subscription/${subscription_id}`, }
è garantita da
method: 'GET', La prima funzione, rispetto allo script di Fullcalendar:
success: function (data) { creazione, si occupa di pre-popolare il modulo si popola molto
con i dati presi dal database usando la chiamata facilmente con i
dati già presenti
const date = new Date(data.next_payment_ a get_subscription . Per identificare quale
nel database.
date); abbonamento dobbiamo modificare, usiamo Per approfondire
la funzione getLastURLSegment() che si occupa le informazioni
// Get the date in a more user-friendly format di prendere l'ultimo segmento dell'URL, su Fullcalendar,
(e.g., "YYYY-MM-DD") che è l'ID dell'abbonamento: leggete l'articolo
sulla pianificazione
const formattedDate = date.toISOString(). function getLastURLSegment() {
dei pasti a pag. 66
slice(0, 10); const pathSegments = window.location.pathname.
split('/');
$('#subscription_name').text(data. return pathSegments[pathSegments.length - 1];
subscription_name); }
// Fill the form fields with the subscription data Alla scoperta della dashboard
$('#description').val(data.description); La dashboard elenca tutti gli abbonamenti
$('#next_payment_date').val(formattedDate); e vi permette di modificarli, disattivarli e filtrare
$('#billing_cycle_span').val(data.billing_cycle_ l'elenco. Non analizzeremo l'HTML ma ne vedremo
span); giusto un frammento per capire come questa
$('#billing_cycle_length').val(data.billing_ pagina sia leggermente diversa dalle altre.
cycle_length); <div id="kt_app_toolbar" class="app-toolbar d-flex
$('#price').val(data.price); flex-column py-6">
$('#currency').val(data.currency); <%- include(navBar) %>
$('#auto_renew').prop('checked', data.auto_ <div class="app-toolbar-wrapper d-flex align-items-
renew); center flex-stack flex-wrap gap-2 py-4 w-100">
$('#tags').val(data.tags); All'inizio del contenuto, infatti, la dashboard
$('#folder').val(data.folder); ha una barra di navigazione che permette
$('#subscription_id').val(subscription_id); di scegliere quali abbonamenti vedere (attivi,
annullati, tutti). Per questo motivo, solo in
}, questa pagina mettiamo l'include che vedete
error: function () { e che viene gestito dalla route con:
alert('Error retrieving subscription data.'); navBar: 'navbar'
} Naturalmente navbar.ejs è il file in cui abbiamo
LINUX PRO 222 73

method: 'GET',
success: function (folders) {
folderList = folders; // Store the list of folders
Nel menu di navigazione dovete illuminare la pagina in cui l'utente

si trova e per farlo userete uno script JavaScript che capisce dove $.ajax({
l'utente è in base all'URL attuale url: '/get_currency_data', // Fetch
currencyData first
method: 'GET',
messo il codice HTML relativo. Il codice della success: function (currencyData) {
dashboard è elaborato quindi lo vedremo pezzo // Update the conversion rate fields in
per pezzo. Cominciamo dal caricamento: the HTML
$(document).ready(function() {
// Get the current URL // Now fetch the subscription data

const currentURL = window.location.pathname; $.ajax({
url: '/get_subscriptions/'+subscriptions_
// Find the parent div with class "app-content- scope, // Fetch subscription data
menu" method: 'GET',
TIP const menuDiv = document.querySelector('.app- success: function (data) {
Un'applicazione content-menu'); var subscriptions = data;
di successo if(folder_id){
è quella che // Find all the menu items with class "menu-link" var subscriptions = data.
risolve problemi const menuLinks = menuDiv.querySelectorAll('. filter(function (subscription) {
reali o soddisfa menu-link'); // Replace 'folder_id' with the
esigenze actual property name that holds the folder ID in
autentiche per // Loop through each menu link and check if its href your data
i suoi utenti.
matches the current URL return subscription.folder ==
Ricercando e
menuLinks.forEach((menuLink) => { folder_id;
comprendendo
le esigenze if (menuLink.getAttribute('href') === currentURL) { });
degli utenti e // Add the "active" class to the parent div }
analizzando i menuLink.classList.add('active');
concorrenti, } // Filter subscriptions based on the
aumentate }); selected folder ID
le possibilità action(folders,folder_
di sviluppare fetchDataAndRender(updateAll); id,subscriptions,currencyData);
un'app di valore
e commerciabile,
}); },
che si distingua
Questo script di inizializzazione fa due cose. error: function () {
nel mercato
competitivo delle La prima è capire in che pagina l'utente si trova alert('Error retrieving subscription
app. L'analisi per illuminare il relativo testo nel menu di data.');
dei concorrenti navigazione. La seconda è recuperare tutti i dati }
consente di per renderizzare la pagina e delegare alla funzione });
individuare fetchDataAndRender() l'aggiornamento dei dati. },
le lacune o le Vediamo ora come funziona fetchDataAndRender() : error: function () {
carenze delle function fetchDataAndRender(action,folder_id) { alert('Error retrieving currency
loro offerte. Ciò // AJAX call to get subscription data for the conversion data.');
rappresenta
current user }
un'opportunità
});
per creare
un'applicazione let route = getLastURLSegment(); },
che eccelle dove error: function () {
gli altri non var subscriptions_scope = 'active'; alert('Failed to fetch folders. Please try again
riescono, dandovi later.');
un vantaggio if(route == "dashboard_all"){ }
competitivo. subscriptions_scope = "all"; });
È il caso di } else if(route == "dashboard_cancelled"){
questa, perché i subscriptions_scope = "cancelled"; }
concorrenti sono
} Anzitutto capisce dove l'utente si trova in modo
costosi e non
da effettuare la chiamata corretta per gli
particolarmente
ben fatti o $.ajax({ abbonamenti da visualizzare. Dopodiché fa a
flessibili! url: '/get_folders', // Update the URL to match catena tre chiamate: una per prendere le cartelle,
your Node.js endpoint che l'utente può poi usare per i filtri, una per i valori
74 LINUX PRO 222

di conversione fra valute per gestire abbonamenti

in diverse monete e quindi quella per gli OTTIMIZZATE LE ROUTE
abbonamenti stessi. Questa chiamata è influenzata
dallo "scope", cioè dall'ambito scelto e compreso “Cercate di non creare percorsi diversi
dall'URL (abbonamenti attivi, annullati o tutti).
Noterete anche che, se alla funzione di recupero per ogni scopo ma usate sotto-percorsi
dei dati è stata passata una variabile per la cartella,
i dati vengono filtrati prima di essere restituiti. raggruppandoli tematicamente per
Il callback updateAll , infine, si occupa di aggiornare
valori, elenco cartelle, ecc. (non lo riportiamo maggiore chiarezza”
qui per brevità). L'unica cosa che ci interessa
è che avvia la funzione displaySubscriptions()
passando l'elenco subscriptions . A questo punto getFullYear() + subscription.billing_cycle_length);
potete disegnare l'elenco degli abbonamenti: break;
function displaySubscriptions(subscriptions) { }
const subscriptionsTable = $('#subscriptions_table }
tbody'); }
subscriptionsTable.empty();
const firstDateObj = new Date(subscription.next_
subscriptions.forEach(function(subscription) { payment_date);
const row = $('<tr>');
row.append($('<td>').html('<a class="fs-1 mb-2
text-hover-primary text-gray-800 fw-bold" href="/
// Calculate the last payment date and next update_subscription/'+subscription.
renewal date id+'">'+subscription.subscription_name+'</
const { lastPaymentDate } = a><br><span class="badge badge-secondary">Started:
calculatePaymentDates(subscription.next_payment_ '+formatDate((firstDateObj.toISOString().split('T')
date, subscription.billing_cycle_span, subscription. [0]))+'</span>'));
billing_cycle_length);
row.append($('<td>').
const startDateObj = new Date(subscription.next_ text(formatDate(lastPaymentDate)));
payment_date); const nextRenewalDateObj = new
const currentDate = new Date(); Date(subscription.next_renewal_date);
row.append($('<td>').
// Calculate the total expenses from the text(formatDate(nextRenewalDateObj.toISOString().
subscription's start date split('T')[0]))); TIP
let totalExpenses = 0; row.append($('<td>').text(subscription.currency +
Sebbene
if (lastPaymentDate !== "Never" && startDateObj " " + subscription.price));
JavaScript sia
<= currentDate) { row.append($('<td>').text(`${subscription.billing_
uno strumento
const billingCycleExpense = cycle_length} ${subscription.billing_cycle_span}`)); prezioso per
parseFloat(subscription.price); row.append($('<td>').text(totalExpenses. migliorare
const billingCycleSpan = subscription.billing_ toFixed(2))); l'esperienza
cycle_span; row.append($('<td>').text(subscription.folder_ dell'utente,
name)); è fondamentale
// Calculate the total expenses usarlo con
while (startDateObj < currentDate) { // Add a new cell to display the cancellation giudizio e in
totalExpenses += billingCycleExpense; status combinazione
con il rendering
switch (billingCycleSpan) { const statusCell = $('<td>').html(subscription.
e l'elaborazione
case 'day': cancelled ? cancelledIcon() : activeIcon());
lato server.
startDateObj.setDate(startDateObj. Bilanciare la
getDate() + subscription.billing_cycle_length); row.append(statusCell); distribuzione
break; dei compiti tra il
case 'week': // Add a button for each row to toggle the server e il client
startDateObj.setDate(startDateObj. subscription status garantisce
getDate() + (subscription.billing_cycle_length * 7)); const actionCell = $('<td>'); un'applicazione
break; const toggleButton = $('<button>').text('Turn On/ più performante,
case 'month': Off').addClass('btn btn-light btn-sm'); accessibile e
manutenibile,
startDateObj.setMonth(startDateObj. toggleButton.on('click', function() {
con vantaggi in
getMonth() + subscription.billing_cycle_length); // Handle the click event to toggle the
termini di SEO
break; subscription status e sicurezza
case 'year': toggleSubscription(subscription.id); dei dati.
startDateObj.setFullYear(startDateObj. });
LINUX PRO 222 75

$.ajax({
url: `/toggle_subscription/${subscriptionId}`,
method: 'POST',
success: function(response) {
// Subscription status toggled successfully
// Now, fetch the updated subscription data
fetchSubscriptionDataAndRenderTable();
},
error: function() {
alert('Failed to toggle the subscription status.');
}
});
}
Quando l'utente clicca sul pulsante relativo, viene
aggiornato il database e vengono ricaricati i dati.
Configurazione e opzioni
L'ultima parte lato client dell'app riguarda le
opzioni. Le funzioni JavaScript hanno quattro
scopi. La prima cambia la valuta principale
ma abbiamo scelto di non implementarla
per ora: al momento l'app di default usa l'euro
Fornite opzioni ai vostri utenti in modo che possano configurare l'app ma il codice per cambiare la valuta
TIP come preferiscono e li renderete felici!
è già presente nei file che abbiamo creato.
La progettazione La seconda è quella per le valute:
dell'interfaccia actionCell.append(toggleButton); function updateConversionRates() {
utente è un row.append(actionCell); const usdRate = $('#usd_rate').val();
processo const gbpRate = $('#gbp_rate').val();
continuo. Deve subscriptionsTable.append(row);
evolversi nel }); $.ajax({
tempo in base al } type: 'POST',
feedback degli
Questa funzione si occupa di quattro cose: url: '/update_currency_data',
utenti, alle loro
1) Calcolare la data dell'ultimo pagamento, perché data: {
esigenze e ai
progressi della non è memorizzata nel database; USD: usdRate,
tecnologia. 2) Calcolare le spese totali per ogni abbonamento; GBP: gbpRate,
Che progettiate 3) Disegnare la tabella; // Include other currency rates
una nuova app 4) Durante il disegno, aggiungere un pulsante },
basandovi su per attivare e disattivare un abbonamento success: function(response) {
questa o che e il relativo listener. // All good
modifichiate la Questo è il cuore del lato client della vostra app: },
nostra versione il rendering è velocissimo e cambia dinamicamente error: function(error) {
dell'app, iniziate
non appena, per esempio, filtrate per cartella // Handle error
conducendo
o disattivate un abbonamento. Per filtrare gli }
un'accurata
ricerca sugli abbonamenti in base alla cartella c'è un listener });
utenti per sul menu a tendina relativo: }
ottenere // Event listener for the folder filter dropdown Siccome gli utenti possono aggiungere
informazioni sulle folderFilter.addEventListener('change', function () { abbonamenti in varie valute, dobbiamo conoscere
loro preferenze var selectedFolderId = folderFilter.value; il cambio. Potreste usare API di conversione valute
e sul loro if(selectedFolderId == "all"){ ma hanno un prezzo e siccome questa versione
comportamento. selectedFolderId = false; dell'app è a singolo utente, come spiegato,
Questa ricerca } abbiamo scelto di lasciare all'utente la possibilità
costituisce la
di indicare i valori dei cambi per dollaro e sterlina.
base per decisioni
fetchDataAndRender(updateAll,selectedFolderId); Una funzione updateConversionRatesFields()
di progettazione
informate. }); avviata al caricamento della pagina si occupa
Vi permette Come vedete, se l'utente seleziona una cartella, di riempire i valori presi dal vostro database.
di capire chi tutti i dati vengono aggiornati sulla base della L'altro scopo del codice della pagina delle opzioni
sono i vostri cartella scelta. Se è stato scelto di vedere tutti è permettere di creare cartelle: non riportiamo
utenti, cosa i dati, viene semplicemente scaricato l'elenco qui il codice perché è un semplice listener su
cercano e come completo. Infine, l'ultimo pezzo di codice riguarda un dropdown. L'ultimo scopo invece è una cortesia
si aspettano di l'attivazione/annullamento di un abbonamento: ai vostri utenti: un pulsante per esportare i dati
interagire con function toggleSubscription(subscriptionId) { in formato CSV nel caso desiderassero gestire
la vostra UI.
// AJAX call to toggle the subscription status queste informazioni al di fuori dell'app:
76 LINUX PRO 222

function exportToCSV() {
$.ajax({
url: '/get_subscriptions',
method: 'GET',
success: function(data) {
const subscriptions = data;
// Create a CSV string

let csvContent = 'data:text/csv;charset=utf-8,';
csvContent += 'Subscription Name,Next
Renewal Date,Amount to Pay,Billing Cycle\n';
subscriptions.forEach((subscription) => {
const row = [
subscription.subscription_name,
subscription.next_payment_date,
subscription.currency + subscription.
price,
`${subscription.billing_cycle_length}
${subscription.billing_cycle_span}`,
];
csvContent += row.join(',') + '\n';
});
Questo è l'aspetto
finale della vostra
// Create a CSV data URI Cosa vi serve per migliorarla Web app: non male
const encodedUri = encodeURI(csvContent); A questo punto avete in mano un'app fatta per un progetto
const link = document.createElement('a'); e finita che potete migliorare e proporre anche che potete mettere
link.setAttribute('href', encodedUri); in formato freemium. Quello che potete fare insieme in poco
tempo!
link.setAttribute('download', 'subscriptions. autonomamente è:
csv'); - Aggiungere il sistema di registrazione,
document.body.appendChild(link); che è essenziale per proporla. Potete farlo
link.click(); con Node.js oppure con PHP;
}, - Recuperare i cambi delle valute
error: function() { automaticamente;
alert('Error retrieving subscription data.'); - Acquistare la licenza del template grafico
} o creare un vostro pacchetto di asset.
}); Naturalmente potete poi aggiungere funzioni
} che trovate interessanti e che pensate possano
Questa chiamata AJAX recupera i dati, farvi raggiungere un pubblico più ampio e anche
dopodiché li formatta, crea un collegamento tradurre la vostra app, cosa che potete fare usando
per lo scaricamento e lo avvia. i nostri consigli dell'articolo di copertina. LXP
AVVISARE GLI UTENTI DELLE SCADENZE

Per tenere traccia degli require('nodemailer'); più di un abbonamento si rinnova
abbonamenti è essenziale essere const transporter = nodemailer. lo stesso giorno, compattiamo le
avvisati di quando si rinnovano e la createTransport({ informazioni in una singola email
vostra app deve fare anche questo. service: 'Gmail', per evitare di inviarne molteplici
Non vedremo tutto il codice, auth: { lo stesso giorno allo stesso utente
per brevità, ma sappiate anzitutto user: process.env.USER, (trovate tutto il codice relativo
che in Node.js dovete preparare pass: process.env.PASSWORD, sempre sul DVD). A questo sistema
uno scheduler che ciclicamente }, di base potete naturalmente
verifichi le scadenze: }); aggiungere preferenze come
const job = nodeCron.schedule('0 3 * * Ora non ci resta che fare due cose: quanto tempo prima essere
*', function() { 1) Calcolare la prossima data avvisati di un rinnovo (globalmente
Qui, per esempio, abbiamo di rinnovo di ogni abbonamento; o per singolo abbonamento)
impostato questo controllo alle tre 2) Controllare se uno o più e potete ovviamente scegliere
di notte di ogni giorno. Dopodiché abbonamenti di ogni utente il vostro provider preferito
abbiamo creato un mailer: scadono a breve e informarli (e più affidabile) per l'invio delle
const nodemailer = del fatto. A tal proposito, se email di avviso ai vostri utenti.
LINUX PRO 222 77

L’eco dei LUG
L’eco dei LUG

ABRUZZO IGLUG - Napoli e provincia LUG Rieti
I LUG AnxaLUG - Lanciano www.iglug.org https://rieti.ils.org
www.anxalug.org IRLUG - Irpinia LUGRoma 3
I LUG
rappresentano Il Pinguino - Teramo www.irlug.it www.lugroma3.org
da sempre il Non disponibile LUG-Ischia TorLUG - Università Tor Vergata - Roma
punto di OpenLUG - L’Aquila www.lug-ischia.org http://lug.uniroma2.it/
riferimento per Non disponibile LUG Acropoli
chiunque voglia www.linux.it/~ciccios/lugagropoli.htm LIGURIA
Pescara LUG
conoscere Neapolis Hacklab GE.P LUG - Genova
www.pescaralug.org
GNU/Linux.
Pollinux LUG - Pollutri www.officina99.org/hacklab.html https://geplug.altervista.org/
Ogni mese
dedicheremo Non disponibile Genova LUG
loro questo SSVLUG - San Salvo, Vasto, Termoli EMILIA ROMAGNA www.genovalug.altervista.org
spazio per la www.ssvlug.org Borgotaro LUG - Val Taro Govonis GNU/LUG - Savona
comunicazione TeateLUG - Chieti
http://btlug.it/ www.govonis.org
di nuovi progetti ERLUG TLug-TSL - Tigullio Ligure
Non disponibile
e appuntamenti. http://erlug.linux.it
TeLUG - Teramo http://tlug.linux.it/
Se hai qualcosa
Ferrara LUG
da segnalarci www.telug.it
www.ferrara.linux.it LOMBARDIA
scrivi a User Group Valle Roveto
ecodeilug@ FoLUG - Forlì BGLug - Bergamo e provincia
http://linuxvalley-os4.blogspot.com/
linuxpro.it http://folug.linux.it www.bglug.it
BASILICATA ImoLUG - Imola BGLug Valle Seriana - Valle Seriana
Basilicata LUG - Potenza e Matera www.imolug.org http://bglugvs.web3king.com/
www.baslug.org PANLUG - Vignola BrigX - Monza e Brianza
PLUG Non disponibile http://brigx.it
www.pignolalug.it PLUG - Parma GL-Como - Como
http://parma.linux.it www.gl-como.it
CALABRIA RELug - Reggio Emilia e provincia GLUX - Lecco e provincia
http://relug.linux.it
Bit01 www.lecco.linux.it
RiminiLug
www.associazionebit01.it GULLP - Gruppo Utenti Linux
www.riminilug.it Lonate Pozzolo
Bogomips - Bisignano
S.P.R.I.Te www.gullp.it
www.blug.it
http://sprite.csr.unibo.it HackLabCormano
CSLUG - Cosenza
UIELinux - Valle del Rubicone http://hacklabcormano.it
http://cslug.linux.it
www.uielinux.org LIFO - Varese
CzLug
Non disponibile www.lifolab.org
FRIULI VENEZIA GIULIA
HackLab Catanzaro LIFOS - Cinisello Balsamo
GOLUG - Gorizia
http://hacklab.cz www.lifos.org
www.golug.it
HackLab Cosenza Linux Var - Varese
LUG Pordenone
https://hlcs.it www.linuxvar.it
www.pnlug.it
Piana LUG - Piana di Gioia Tauro Lug8 - Gottolengo e Bassa Bresciana
LugTrieste
Non disponibile http://lugotto.linux.it
http://trieste.linux.it
SpixLug - Spezzano Albanese LugBS - Brescia e provincia
Non disponibile LAZIO http://lugbs.linux.it/
Verdebinario GioveLUG - Terracina Lug Castegnato - Castegnato
www.verdebinario.org www.giovelug.org www.kenparker.eu/LugCastegnato
Latina LUG LUG Legnano
CAMPANIA www.llg.it https://luglegnano.wordpress.com
GLUS LUG Privernum Volsca - Priverno (LT) LugMan - Mantova e provincia
www.liberarete.it/glus Non disponibile www.lugman.org
78 LINUX PRO 222

L’eco dei LUG
LugOB - Cologne e ovest bresciano PLUGS - Sassari L.U.G.A.R - Arezzo

www.lugob.org Non disponibile Non disponibile
Lugotto - Gottolengo (BS) PtLug - Pistoia e provincia
http://lugotto.linux.it SICILIA www.ptlug.org
POuL - Milano cLUG - Caltanissetta SLUG - Siena e provincia
www.poul.org Non disponibile www.siena.linux.it
TiLug - Pavia FreakNet MediaLab - Catania

TRENTINO ALTO ADIGE
http://pavia.linux.it www.freaknet.org
LinuxTrent - Trento
VIMELUG - Linux User Group Vimercate Free Circle
http://linuxtrent.it
http://vimelug.org www.thefreecircle.org
LugBz - Bolzano
Leonforte LUG www.lugbz.org
MARCHE
http://leonforte.linux.it
CMlug
LUG Catania UMBRIA
Non disponibile
www.catania.linux.it OrvietoLUG
FanoLUG
LUGSR - Siracusa www.orvietolug.it
www.fanolug.org
www.siracusa.linux.it LUG Perugia
GLM - Macerata www.perugiagnulug.org
MELUG - Messina
Non disponibile
Non disponibile
PDP Free Software VALLE D’AOSTA
Norp LUG - Noto, Pachino, Rosolini
https://pdp.linux.it SLAG - Aosta
Non disponibile
Non disponibile
MOLISE Poetry FreakNe
FrenterLUG - Larino http://poetry.freaknet.org VENETO
Non disponibile VPLUG Linux Planet - 0421ug - Provincia di Venezia
Provincia Caltanisetta www.0421ug.org
PIEMONTE
www.vplug.it BLUG - Belluno
BiLUG - Provincia di Biella
SputniX - Palermo http://belluno.linux.it
http://www.bilug.it GrappaLUG - Bassano del Grappa
www.sputnix.it
Gallug - Galliate https://grappalug.org/
www.gallug.it LegnagoLUG
TOSCANA
GLugTo Non disponibile
ACROS - Area di Versilia, Lucca,
www.glugto.org Linux Ludus - Villafranca (VR)
Massa Carrara
IvLug - Ivrea Linux User Group www.linuxludus.it
www.lug-acros.org
www.ivlug.it LugAnegA
Elbalinux
Linox Novara www.luganega.org
Non disponibile MontelLUG - Montebelluna
www.linoxnovara.org
ElsaGLUG - Val d’Elsa www.montellug.it
www.elsaglug.org FSUG Padova
PUGLIA
FLUG - Firenze www.fsugpadova.org
BriLUG - Brindisi
www.firenze.linux.it TVLUG - Treviso
Non disponibile
GOLEM - Empoli, Valdelsa www.tvlug.it
MurgiaLug - Santeramo in Colle
VELug - Venezia
Non disponibile http://golem.linux.it
www.velug.it
ManfredoniaLug - Manfredonia G.U.L.LI - Livorno
AViLUG Schio
https://www.manfredonialug.it www.livorno.linux.it
Non disponibile
SaLUG! - Salento GULP Pisa
Linux User Group Vicenza - LugVicenza
http://salug.it www.gulp.linux.it https://lugvi.it/
GuruAtWork - Grosseto e provincia
SARDEGNA www.guruatwork.com NAZIONALI
GNUraghe - Oristano Lucca LUG Gentoo Channel Italia
www.gnuraghe.org http://luccalug.it www.gechi.it
LINUX PRO 222 79

In edicola il 10 dei mesi pari
NEL PROSSIMO NUMERO Hai un argomento da proporci?

Scrivi a redazione@linuxpro.it
Chrome blindato
Crea tu l’estensione perfetta per la privacy e la sicurezza!
Il prezzo dell’abbonamento è calcolato in modo etico perché sia un chiara pienamente disponibile a valutare – e se del caso regolare – le eventuali spettanze di terzi per la
servizio utile e non in concorrenza sleale con la distribuzione in edicola. pubblicazione di immagini di cui non sia stato eventualmente possibile reperire la fonte. Informativa e
Consenso in materia di trattamento dei dati personali GDPR Reg. UE 679/2016 e del Codice Privacy d.l-
Arretrati: si acquistano on-line su www.sprea.it/arretrati gs. 196/03 cosi come modificato dalle disposizioni di adeguamento alla Legge Italiana D.Lgs 101/2018.
abbonamenti@sprea.it Tel 02 87168197 (lun-ven / 9:00-13:00 e 14:00-18:00) Nel vigore del GDPR Reg. UE 679/2016 e del Codice Privacy d.lgs. 196/03 cosi come modificato dalle
329 3922420 disposizioni di adeguamento alla Legge Italiana D.Lgs 101/2018. artt. 24 e 25, è Sprea S.p.A. (di seguito
anche “Sprea”), con sede legale in Via Torino, 51 Cernusco sul Naviglio (MI). Sprea S.p.a. tratta i dati
identificativi e particolari eventualmente raccolti nell’esercizio della prestazione contrattuale. La stes-
Bimestrale - prezzo di copertina 7,90 € FOREIGN RIGHTS sa La informa che i Suoi dati eventualmente da Lei trasmessi alla Sprea S.p.a., verranno raccolti, trat-
tati e conservati nel rispetto del decreto legislativo ora enunciato e nel pieno rispetto dell’art. 32 GDPR
www.linuxpro.it- redazione@linuxpro.it Paolo Cionti: Tel. 02 92432253 - paolocionti@sprea.it Reg. UE 679/2016 per le finalità di trattamento previste per adempiere agli obblighi precontrattuali,
La Divisione Informatica di Sprea edita anche: contrattuali e fiscali derivanti da rapporti con Lei in essere, per le finalità amministrative e di contabi-
SERVIZI CENTRALIZZATI lità, (con base giuridica contrattuale), per le finalità derivanti da obblighi di legge ed esercizio di difesa
WIN MAGAZINE - UBUNTU FACILE in giudizio, nonché per le finalità di promozione e informazione commerciale la cui unica base giuridica
APP JOURNAL - HACKER JOURNAL Art director: Silvia Taietti è basata sul consenso libero e incondizionato dell’interessato, nonché per le altre finalità previste dalla
Grafici: Alessandro Bisquola, Nicole Bombelli, Tamara Bombelli, Nicolò Digiuni, privacy policy consultabile sul sito www.sprea.it, connesse all’azienda.
Business Unit Manager: Massimiliano Zagaglia Si informa che, tenuto conto delle finalità del trattamento come sopra illustrate, il conferimento dei dati
Marcella Gavinelli, Luca Patrian necessari alle finalità è libero ma il loro mancato, parziale o inesatto conferimento potrà avere, come
Coordinamento: Chiara Civilla, Tiziana Rosato, Roberta Tempesta, Silvia Vitali conseguenza, l’impossibilità di svolgere l’attività e gli adempimenti precontrattuali e contrattuali come
Cover: Luca Patrian Amministrazione: Erika Colombo (responsabile), Silvia Biolcati, Irene Citino, previsti dal contratto di vendita e /o fornitura di prodotti e servizi.
La avvisiamo, inoltre, che i Suoi dati potranno essere comunicati e/o trattati (sempre nel rispetto della
Realizzazione editoriale a cura di: Dehive Sas di Andrea Orchesi Desirée Conti, Sara Palestra- amministrazione@sprea.it legge), anche all’estero, da società e/o persone che prestano servizi in favore della Sprea che sono state
Ufficio Legale: Francesca Sigismondi nominate responsabili del trattamento ai sensi dell’art- 28 GDPR Reg. UE 679/2016. Si specifica che non
sono effettuati trasferimenti dei dati al di fuori dell’Unione Europea. Si specifica che Sprea S.p.a non ef-
Sprea S.p.A. fettua trattamento automatizzato di informazione e dati che produca effetti giuridici che Lal riguardano
Sede Legale: Via Torino, 51 20063 Cernusco Sul Naviglio (Mi) - Italia Linux Pro, pubblicazione registrata al Tribunale di Milano il 08.02.2003 o che incida in modo analogo significativamente sulla Sua persona.
PI 12770820152- Iscrizione camera Commercio 00746350149 con il numero 74. ISSN: 1722-6163 In ogni momento Lei potrà chiedere la l’accesso ai sui dati, la rettifica dei suoi dati, la cancellazione dei
suoi dati, la limitazione al trattamento e la portabilità dei suoi dati, nonché poi esercitare la facoltà di
Per informazioni, potete contattarci allo 02 87168197 Autorizzazione ROC n° 6282 del 29/08/2001 opposizione al trattamento dei Suoi dati ovvero esercitare tutti i diritti previsti dagli artt. 15, 16, 17, 18,
20, 21 del GDPR Reg. UE 679/2016 e ss. Modifiche di adeguamento legislativo del D.Lgs. 196/03, così
Direttore responsabile: Luca Sprea come modificato dal D.Lgs 101/2018, mediante comunicazione scritta alla Sprea e/o direttamente al
CDA: Luca Sprea (Presidente), Alessandro Agnoli (Amministratore Delegato), personale Incaricato preposto al trattamento dei dati.
Giulia Spreafico (Divisione digital), Stefano Pernarella Lei potrà altresì esercitare i propri diritti rivolgendosi al Garante della Privacy, con Sede in Piazza
Distributore per l’Italia: Press-Di Distribuzione stampa e multimedia s.r.l. 20090 Segrate Venezia n. 11 – 00187 Roma, Centralino telefonico: (+39) 06.696771,Fax: (+39) 06.69677.3785. Per
informazioni di carattere generale è possibile inviare una e-mail a: garante@gpdp.it @pec.it.
ADVERTISING, SPECIAL PROJECTS & EVENTS Distributore per l’Estero: SO.DI.P S.p.A. Via Bettola, 18 - 20092 Cinisello Balsamo (MI)
Sprea S.p.a. La informa che Lei ha il diritto, ai sensi dell’art. 7 GDPR Reg. UE 679/2016 di revocare il
Segreteria: Emanuela Mapelli - Tel. 02 92432244 - emanuelamapelli@sprea.it consenso al trattamento dei suoi dati in qualsiasi momento.
Tel. +390266030400 - Fax +390266030269 - sies@sodip.it - www.sodip.it La lettura della presente informativa deve intendersi quale presa visione dell’Informativa ex art. 13 D.L-
gs. 196/03 e 13 GDPR Reg. UE 679/2016e l’invio dei Suoi dati personali alla Sprea varrà quale consenso
SERVIZIO QUALITÀ EDICOLANTI E DL espresso al trattamento dei dati personali secondo quanto sopra specificato.
Stampa: Arti Grafiche Boccia S.p.A. Via Tiberio Claudio Felice, 7- 84131 Salerno L’invio di materiale (testi, fotografie, disegni, etc.) alla Sprea S.p.A. deve intendersi quale espressa
Sonia Lancellotti, Luca Majocchi : Tel. 02 92432295 autorizzazione alla loro libera utilizzazione da parte di Sprea S.p.A. Per qualsiasi fine e a titolo gratuito,
distribuzione@sprea.it 351 5582739 Copyright: Sprea S.p.A. e comunque, a titolo di esempio, alla pubblicazione gratuita su qualsiasi supporto cartaceo e non, su
qualsiasi pubblicazione (anche non della Sprea S.p.A.), in qualsiasi canale di vendita e Paese del mondo.
ABBONAMENTI E ARRETRATI
Informativa su diritti e privacy
Abbonamenti: si sottoscrivono on-line su www.sprea.it/linuxpro La Sprea S.p.A. è titolare esclusiva della testata Linux Pro e di tutti i diritti di pubblicazione e diffusione
abbonamenti@sprea.it Tel 02 87168197 (lun-ven / 9:00-13:00 e 14:00-18:00) in Italia. L’utilizzo da parte di terzi di testi, fotografie e disegni, anche parziale, è vietato. L’Editore si di- Il materiale inviato alla redazione non potrà essere restituito.
SPECIALE
IN EDICOLA
DAL 7 DICEMBRE
RIPERCORRI LA STORIA DEL COMPUTER

DAGLI ANNI ‘70/‘90 PER RISCOPRIRE LE RADICI
DELLA TUA PASSIONE
Scansiona il QR Code
Acquistala su www.sprea.it/retrocomputer
versione digitale disponibile dal 4 dicembre
win mag retro 1_retro computer_210x285.indd 1 13/11/23 15:14

61 anni di storia,
tradizione e innovazione
L’industria grafica al servizio della filiera
della carta stampata
www.artigraficheboccia.com
tel: +39089303311
info@artigraﬁcheboccia.com*

Linux Pro N.222 - Dicembre 2023 - Gennaio 2024

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Linux Pro N.222 - Dicembre 2023 - Gennaio 2024

Caricato da

Copyright:

Formati disponibili

JQuery Ha ancora senso usarlo? Scoprilo con noi!

L’unica guida libera al mondo dell’Open Source PRO Touché 2.0.10

COPIA & VENDI

Sfrutta le API di Maps pagando solo centesimi a Google

Ecco la nuova versione

Bimestrale - N.222 - 7,90 €

UN VOLUME DA COLLEZIONE PER CHI

AC retrogamer 4_anni 80_210x285_senza data.indd 1 13/11/23 15:04

Costruire un’app come un professionista

cui partire. Vedrete con noi come scegliere

esigenze, come servire dati con Node.js o

COPIA & V PRO

PHP, come usare JavaScript per servire il front

Sfrutta le do dalla cod

il tuo sist o solo cen ti diamo

Copia e vendi la tua app!

Scoprite come creare applicazioni interessanti

abbastanza da essere vendute e solide a sufficienza

per garantirvi massima scalabilità!

58 Flatpak facili con un’interfaccia grafica 13/11/2023

Uno strumento efficiente e completo per gestire

LINUX PRO 222 1

COPIA & VENDI

20 Pianificare gli itinerari al meglio www.sprea.it/digital

04 Guida DVD 58 Flatpak facili con

Scoprite come creare applicazioni 60 Robot con braccio ∆ DESKTOP

controllato da PC e basato Fedora 39

tutti gli spostamenti sfruttando jQuery ha ancora molte frecce ∆ PROGRAMMAZIONE

l’API di Google senza spendere al suo arco e capirne ∆ RIVISTA 1.60.1

un capitale funzionamento e funzioni ∆ GTKDialog

tra i pixel 1.1.0

all’interno di uno o più video. 68 Pasti sempre sotto ∆ Erebus

Recensioni Organizzare cosa mangiare può

soluzione che semplifica la vita! FreeBSD 13.2

Tutorial Create una Web app per tenere

JQuery Ha ancora senso usarlo? Scoprilo con noi!

Cover story 1.000 server a costo zero

Touché 2.0.10 1.000 SERVER PRO

per diventare di sviluppo!

Python senza un maestro

Docker: dai dipendenze

COPIA & VENDI

I trucchi per usare

LA TUA APP al massimo VirtualBox

Ti regaliamo prestazioni affidabili e costanti, impedendo

noi il codice! imprevisti o di guasti al sistema. Ciò è

8 LINUX PRO 220 LINUX PRO 220 9

LINUX PRO 222 3

Sul DVD di Distro

4 LINUX PRO 222

1 Scegliere di installare Fedora 2 Selezionare il disco rigido

3 Avviare l’installazione 4 Configurare il sistema operativo

5 Creare l’account 6 Iniziare a usare la distribuzione

LINUX PRO 222 5

on parliamo spesso del kernel in particolare

LINUX PRO 222 7

COPIA & VENDI

S creare software, script, ecc.

8 LINUX PRO 222

COPIA & VE PRO

Partire col piede giusto:

gli stack tecnologici

o stack tecnologico è la colonna CSS (fogli di stile a cascata)

LINUX PRO 222 9