Gestione del front-end con Webpack su Symfony

Symfony logo e webpack logo

In questo esempio ti mostrerò come installare e configurare Webpack per la gestione del front-end di un applicazione Symfony.

PREREQUISITI: In questo articolo darò per scontato che sia stato creato un nuovo progetto utilizzando la Symfony CLI. Se non sai come fare puoi seguire questo tutorial.


Cosa è Webpack?

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand.

– pagina GitHub di Webpack

Webpack è un assmblatore di bundle. Ciò significa che il compito principale di Webpack è quello di elaborare un insieme di asset composto da file JS/CSS/Immagini combinandoli in dei pacchetti chiamati bundle.
Ad esempio può essere usato per creare due bundle a partire dai file Javascript di un’applicazione: uno per i file specifici della webapp e uno contenente i file delle librerie installate.

Webpack prende in ingresso un set di file JS/CSS/JPG e li combina in bundle
Webpack prende in ingresso un set di file JS/CSS/JPG e li combina in bundle

Webpack non si limita a impacchettare le risorse front-end del progetto ma può essere utilizzato per ottimizzare al massimo le performance di un’applicazione. Questa possibilità però viene fornita ad un costo: Webpack è molto complesso. Nonostante gli sviluppatori abbiano cercato di semplificare sempre più le impostazioni versione dopo versione, ad oggi rimane abbastanza difficile impostare Webpack al meglio e capire cosa stia accadendo dietro le quinte. Proprio per questo motivo gli sviluppatori di Symfony hanno pensato di semplificarne l’utilizzo creando un wrapper chiamato webpack-encore.

Aggiungere una nuova pagina

La prima cosa da fare per iniziare la tua avventura nel mondo frontend è creare una nuova pagina web. Per farlo è necessario seguire due passaggi:

  • Creare una rotta (route): una rotta rappresenta l’URL della pagina (es /about) che verrà mappato su di un’azione del controller,
  • Creare un controller: un controller è una classe PHP che prende in ingresso la richiesta del browser e restituisce in uscita la risposta alla richiesta.

Ai fini di questo tutorial immaginiamo di creare l’home page del sito che risponderà alla rotta /. Per farlo la prima cosa da fare è creare una nuova classe PHP chiamata IndexController.php all’interno della cartella della cartella src/Controller/.

<?php
declare(strict_types=1);

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class IndexController extends AbstractController
{
    /**
     * @Route(path="/")
     */
    public function index(): Response
    {
        return $this->render(
            'index.html.twig'
        );
    }
}

Il metodo index() appena creato non fa altro che accettare una richiesta GET alla rotta / (definita tramite l’annotazione @Route) e rispondere renderizzando il file index.html.twig che andrai a definire ora.

NOTA: Twig è il template engine predefinito usato da Symfony.

All’interno della cartella src\templates crea un nuovo file e chiamalo index.html.twig ed inserisci il seguente contenuto:

{% extends 'base.html.twig' %}

{% block body %}
  <h1>Hello world!</h1>
{% endblock %}

A questo punto, se tutto ha funzionato correttamente, navigando sul sito all’indirizzo http://127.0.0.1:8000 dovresti essere visualizzare la nuova pagina appena creata con il messaggio “Hello world”.

La prima pagina web creata con Symfony e Twig
La prima pagina web creata con Symfony e Twig

Installare Webpack

Arrivato a questo punto hai realizzato la prima pagina web dell’applicazione utilizzando esclusivamente l’HTML ma come ogni sviluppatore web sa, per creare una pagina accattivante è necessario adornarla con del buon stile CSS e renderla interattiva aggiungendo del Javascript.
Ed è qui che entra in gioco Webpack per la creazione dei bundle CSS e JS con il codice dell’applicazione.

NOTA: Come accennavo nell’introduzione, gli sviluppatori di Symfony hanno realizzato un wrapper per Webpack che ne semplifica di gran lunga la configurazione chiamato webpack-encore. In questo tutorial farò sempre riferimento a quello ma è possibile adattare tutti i concetti riportati anche alla configurazione di Webpack “standard”.

La prima cosa da fare è ovviamente quella di installare sia il bundle PHP (tramite composer) che la libreria Javascript (tramite yarn) utilizzando i seguenti comandi:

 composer require symfony/webpack-encore-bundle
 yarn add @symfony/webpack-encore --dev

Al termine dell’installazione verrà creato automaticamente il file di configurazione di Webpack chiamato webpack.config.js e una cartella assets che andrà a contenere tutti i file CSS e JS del progetto.

La configurazione di default di Webpack

Analizziamo ora la configurazione di default webpack.config.js appena generata:

var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

Vediamo nel dettaglio cosa vanno ad impostare le istruzioni contenute in questo file di configurazione:

  • La prima cosa che Webpack va a controllare (righe 5-6) è l’ambiente da utilizzare per costruire i bundle. Nel caso in cui nessun ambiente sia stato impostato viene assunto di default che la build sia stata lanciata in modalità dev. Questo controllo viene fatto perché a seconda dell’ambiente utilizzato per lanciare la costruzione dei bundle vengono eseguite delle ottimizzazioni diverse (ad esempio il codice Javascript dell’ambiente di produzione sarà minificato mentre quello in sviluppo no).
  • Alle righe 11 e 13 viene indicato a Webpack quali sono le cartelle da utilizzare come output del suo processo di pacchettizzazione.
  • Alla riga 26 inizia il vero utilizzo di Webpack. In particolare con il comando addEntry() viene indicato a Webpack di generare un nuovo pacchetto a partire dal file indicato come argomento della funzione.
  • Alla riga 31 abbiamo la prima ottimizzazione che Webpack andrà ad eseguire sul nostro codice: splitEntryChunks() (vedi sezione dedicata)
  • Alla riga 35 abbiamo ancora un’altra ottimizzazione: enableSingleRuntimeChunk() (vedi sezione dedicata).
  • Alle righe 44 e 45 abbiamo ancora delle configurazioni di Webpack per le quali chiediamo esplicitamente di pulire la cartella di output ogni volta prima della build (cleanupOutputBeforeBuild())e di utilizzare le notifiche del sistema per informarci sullo stato di avanzamento della build (enableBuildNotifications()).
  • Le righe 46 e 48 indicano a Webpack di creare e servire i file map quando l’ambiente è in development e di aggiungere un numero di versione ai bundle generati quando invece l’ambiente è in produzione.
  • Infine alla riga 51 viene aggiunta una configurazione specifica per Babel. In particolare viene indicato a Babel di importare esclusivamente le polyfill che sono necessarie per il corretto funzionamento del codice Javascript scritto (useBuiltIns: 'usage‘) e che la versione di corejs installata è la 3 (corejs: 3).

All’interno della configurazione di default di Webpack sono abilitate le opzioni che comunemente vengono utilizzate nello sviluppo di un applicazione web con Symfony. Tuttavia già all’interno del file sono presenti altre righe di codice commentate che illustrano come sia possibile espandere il file di configurazione di default per aggiungere funzionalità extra (come la traspilazione Typescript o dei file Sass)

Ottimizzazione: SingleRuntimeChunk

Di default i moduli importati dagli script sono inizializzati una volta per ogni entry-point.

Questo vuol dire che se all’interno della stessa pagina vengono importati i due file scriptA.js e scriptB.js ed entrambi importano jQuery allora di quest’ultimo verranno inizializzate due istanze separate per i due script. Di conseguenza, se il primo script emette un evento all’interno della propria istanza jQuery allora questo non verrà intercettato dal secondo script (e viceversa).

Abilitando il SingleRuntimeChunk con l’istruzione enableSingleRuntimeChunk() viene creato un asset aggiuntivo chiamato runtime.js che, come suggerisce il nome, contiene il codice necessario ad inizializzare il runtime di Webpack.
Poiché in questo modo tutti i moduli vengono inizializzati da questo script allora tutti gli script importati all’interno della stessa pagina web condivideranno le stesse istanze dei moduli.
Quindi, tornando all’esempio con scriptA.js e scriptB.js all’interno della stessa pagina questa volta entrambi gli script si riferiranno alla medesima istanza di jQuery.

ATTENZIONE: abilitare o disabilitare il SingleRuntimeChunk è una scelta progettuale molto importante. In generale può essere una buna idea lasciarlo abilitato in modo che se in una pagina sono presenti più script questi condividano le stesse istanze dei moduli in comune. Tuttavia se stai realizzando una single-page application allora avere un runtime condiviso può essere un overhead non necessario.

NOTA PERSONALE: se nella tua applicazione utilizzi dei modali il cui contenuto viene caricato tramite AJAX e che al loro interno importano degli script allora potrebbe venire istanziato un nuovo runtime! Questo potrebbe portare all’impossibilità di comunicare tra il modale e il contenuto della pagina sottostante.

Per saperne di più sul single runtime chunk e per approfondire le opzioni di configurazione puoi consultare la pagina con la documentazione ufficiale.

Ottimizzazione: SplitEntryChunks

Abilitando splitEntryChunks() Webpack si occuperà di frammentare gli script in chunk di dimensioni minori ottimizzando le risorse necessarie al browser per valutare ed interpretare gli script.
Di default Webpack applicherà le seguenti regole per spezzare gli script in chunk:

  • I nuovi chunk devono essere condivisi tra più script oppure provengono dalla cartella node_modules;
  • Il nuovo chunk ha una dimensione maggiore di 30Kb (prima della compressione);
  • Il numero di richieste parallele da fare per scaricare i chunk on-demand è minore o uguale di 5;
  • Il numero di richieste parallele da fare per scaricare tutti i chunk necessari al rendering iniziale della pagina è minore o uguale di 3.

Per saperne di più sullo splitting dei chunks puoi consultare la pagina della documentazione ufficiale.

Creazione dei bundle

Una volta che Webpack è installato puoi iniziare a creare i bundle a partire dai tuoi script con il seguente comando da terminale:

yarn encore dev

Una volta che il comando sarà terminato, all’interno della cartella /public/build troverai i bundle appena realizzati.

Aggiunta di uno script

Arrivati a questo punto dovresti avere Webpack configurato e pronto per l’uso. Per verificare che tutto funzioni correttamente ti mostrerò come aggiungere uno script Javascript che al click di un bottone apra un alert del browser.

Come prima cosa aggiungi un bottone all’interno della pagina creata allo step precedente:

{% extends 'base.html.twig' %}

{% block body %}
  <h1>Hello world!</h1>
  <div>
    <button id="clickMeButton">Click me</button>
  </div>
{% endblock %}

Vai ora ad aggiungere un nuovo file Javascript chiamato homepage.js all’interno della cartella assets/js come mostrato di seguito:

const clickMeButton = document.getElementById('clickMeButton');

clickMeButton.addEventListener('click', function () {
  alert('Bottone clickato!');
});

Aggiungiamo il file appena creato a quelli che Webpack andrà ad analizzare per l’impacchettamento all’interno del bundle

.addEntry('homepage', './assets/js/homepage.js')

Aggiungi il nuovo script alla pagina appena creata

{% block javascripts %}
    {{ encore_entry_script_tags('homepage') }}
{% endblock %}

A questo punto ricompilando gli asset con Webpack (comando: yarn encore dev) e ricaricando la pagina, al click del bottone verrà mostrato l’alert appena creato.

Aggiunta di Bootstrap

Per dare un po’ di stile alla pagina aggiungi un framework CSS come Bootstrap.

 yarn add bootstrap

Aggiungi a Webpack una nuova entry:

.addStyleEntry('bootstrap', './node_modules/bootstrap/dist/css/bootstrap.css')

importa nella pagina il nuovo asset e aggiungi un po’ di stile

{% extends 'base.html.twig' %}

{% block body %}
  <div class="container">
    <h1>Hello world!</h1>
    <div class="row">
      <div class="col">
        <button id="clickMeButton" class="btn btn-primary">Click me</button>
      </div>
    </div>
  </div>

{% endblock %}

{% block stylesheets %}
  {{ encore_entry_link_tags('bootstrap') }}
{% endblock %}


{% block javascripts %}
  {{ encore_entry_script_tags('homepage') }}
{% endblock %}

Conclusioni

Sviluppare un applicazione web moderna e accattivante richiede l’integrazione di diverse conoscenze e di diversi strumenti di sviluppo che permettano di trarre il meglio dal mondo back-end e da quello front-end. Proprio per questo gli sviluppatori di Symfony hanno realizzato uno strumento come webpack-encore in grado di semplificare al massimo la gestione degli asset javascript e CSS.

Puoi scaricare il codice sorgente del progetto direttamente da GitHub:

https://github.com/lmillucci/symfony-webpack-example


Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram o a seguirmi su Twitter per non perderti nemmeno un post del mio blog.

Installare Python 3.8 su Ubuntu 18.04

E’ stato da poco rilasciata la versione 3.8 di Python! 🎉
Per sapere le novità introdotte dal nuovo update ti lascio il link all’articolo ufficiale della documentazione.

In questo post ti mostro come installarlo subito su Ubuntu 18.04 sfruttando un PPA aggiuntivo.

Installazione

Per installare subito l’ultimissima versione di python sul tuo sistema apri il terminale e digita i seguenti comandi:

sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt update
sudo apt install python3.8

NOTA: dallo stesso repository puoi scaricare anche le versioni 3.1, 3.5 e 3.7 di python (la versione 3.6 è quella fornita di default da Ubuntu)

Non appena l’installazione sarà finita potrai utilizzare la nuovissima versione di python utilizzando il comando python3.8

Python 3.8 installato
Python 3.8 installato

Conclusioni

Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Abilitare Google Authenticator sull’account PayPal

Nel campo dell’informatica per autenticazione si intende il processo attraverso il quale un software verifica (nel modo più affidabile possibile) l’identità dell’utente che vuole accedere ad un servizio.
In particolare, nel mondo della sicurezza informatica esistono 3 diversi fattori con i quali un utente può verificare la propria identità per autenticarsi:

  • Qualcosa che so: è il fattore più comune, è basato sul fatto che solo noi conosciamo la “parola d’ordine” che ci identifica. Appartengono a questa categoria le password ed i PIN di accesso.
  • Qualcosa che ho: questo fattore si riferisce ad un oggetto che solo io posso avere. Appartengono a questa categoria le smartcard ed i dispositivi che ti assegnano le banche per generare i pin (TOTP).
  • Qualcosa che sono: questo è il fattore di sicurezza considerato più sicuro in quanto fa riferimento ai nostri dati biologici. Appartengono a questa categoria la scansione delle impronte digitali e il riconoscimento del volto.

Fino a poco tempo fa per autenticarsi con buona sicurezza era sufficiente un autenticazione a singolo fattore. Per registrarsi ad un servizio bastava creare un username ed una password (qualcosa che so) ed il gioco era fatto.

Ma con il recente aumento degli attacchi informatici volti a rubare i database con le credenziali degli utenti è diventato evidente che un singolo fattore di autenticazione non è più sufficiente a proteggere un account. Giusto per riportare qualche numero, è notizia di quest’anno il furto di 773 milioni di email e 21 milioni di password.
E’ evidente che chi utilizza la stessa coppia di username e password per l’accesso a più servizi sia particolarmente vulnerabile a questo tipo di attacchi. Basta che un malintenzionato buchi quel vecchio forum a cui ti sei dimenticato di esserti iscritto per poter ottenere le tue credenziali e autenticarsi a tutti gli altri servizi che utilizzi senza alcuno sforzo.
Proprio per questo motivo sempre più aziende del mondo web hanno iniziato a richiedere un secondo fattore per l’autenticazione.

Tra i servizi che supportano l’autenticazione a due fattori ovviamente non poteva mancare PayPal. Fino a poco tempo fa però, il secondo fattore di autenticazione supportato da PayPal era l’SMS da ricevere sul proprio numero di telefono (qualcosa che ho). Sebbene questo sistema sia sicuramente meglio rispetto all’utilizzo di un singolo fattore è comunque considerato un meccanismo di autenticazione poco sicuro e molto scomodo da usare.
Infatti da assiduo utilizzatore di PayPal molte volte mi è capitato che l’SMS con il codice non arrivasse mai e fosse necessario richiederlo una seconda o addirittura una terza volta prima di poter effettuare un pagamento facendomi perdere una quantità ingente di tempo.

Finalmente però a PayPal hanno aggiunto la possibilità di generare i codice direttamente dal telefono dell’utente utilizzando un applicazione come Google Authenticator o Microsoft Authenticator.

Abilitare Google Authenticator come secondo fattore

La prima cosa da fare per poter abilitare Google Authenticator come secondo fattore di autenticazione è accedere al tuo profilo PayPal e aprire la pagina delle impostazioni tramite l’icona con l’ingranaggio in alto a destra.

Dashboard di PayPal da cui andare a modificare le impostazioni di sicurezza dell'account
Dalla pagina iniziale del profilo apri le impostazioni tramite l’ingranaggio in alto a destra

Nella pagina delle impostazioni devi selezionare la scheda Sicurezza e premere sul link Attiva (o Modifica nel caso in cui avessi avuto già attiva l’autenticazione a 2 fattori tramite SMS) della sezione Verifica a 2 passaggi

Pagina di configurazione della sicurezza di PayPal
Spostati nella scheda sicurezza e abilita (o modifica) la verifica a 2 passaggi

Se avevi già l’SMS come secondo fattore devi cercare la voce Aggiungi un dispositivo per poter aggiungere Google Authenticator (PayPal avrebbe anche potuto sforzarsi un po’ nel trovare un messaggio più significativo)

Se avevi l'SMS come secondo fattore di autenticazione devi trovare il link "Aggiungi un dispositivo"
Se avevi l’SMS come secondo fattore di autenticazione devi trovare il link “Aggiungi un dispositivo”

Ora PayPal ci chiederà se vogliamo aggiungere un nuovo numero di telefono per la ricezione degli SMS oppure se vogliamo utilizzare un applicazione di autenticazione. Ovviamente per poter aggiungere Google Authenticator dovrai scegliere di utilizzare un applicazione.

Aggiungi un app di autenticazione al tuo account PayPal
Aggiungi un’app come secondo fattore di autenticazione

A questo punto PayPal ti mostrerà il codice QR da scansionare con Google Authenticator per poter generare i codici temporanei da usare per l’accesso al tuo account.

Abilita il secondo fattore di autenticazione scansionande il QR code
Scansiona il codice QR con Google Authenticator per poter abilitare il secondo fattore di autenticazione

NOTA: a questo punto se hai un password manager o un luogo sicuro dove custodire le password ti consiglio caldamente di salvarti il codice QR o il PIN segreto che genera PayPal. In questo modo, se dovessi perdere o rompere il telefono su cui hai Google Authenticator potrai comunque accedere agevolmente al tuo account PayPal.

Conclusioni

Visto che l’account PayPal è un bersaglio molto goloso per un potenziale malintenzionato, se non l’hai ancora fatto, ti consiglio caldamente di attivare l’autenticazione a due fattori.
Inoltre ti consiglio di verificare se il tuo account email è stato coinvolto in qualche furto di dati inserendo il tuo indirizzo email all’interno di questo servizio offerto dai creatori di Firefox.


Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram o a seguirmi su Twitter per non perderti nemmeno un post del mio blog.

Creazione variabili d’ambiente su Mac Os X

variabili d'ambiente su mac

Una variabile d’ambiente è, come dice il nome, una variabile presente nell’interprete dei comandi e accessibile dai processi tramite meccanismi di gestione dipendenti dal sistema operativo in uso. Tipicamente può contenere valori che indichino il path di un file eseguibile, la posizione di una libreria, la shell di default o il valore di qualche impostazione di sistema.

Per sapere quali sono le variabili d’ambiente settate su Mac Os X ti basta aprire un terminale e digitare il comando printenv come riportato di seguito:

Lorenzos-MacBook-Pro:~ lorenzo$ printenv
TERM_PROGRAM=Apple_Terminal
SHELL=/bin/bash
HOME=/Users/lorenzo

Aggiungere una variabile d’ambiente alla sessione attiva

Per aggiungere temporaneamente alla sessione attiva una variabile d’ambiente esiste il comando export [nome_variabile]=[valore]

NOTA: usando questo metodo, una volta chiuso il terminale la variabile impostata verrà rimossa e sarà necessario ridefinirla ogni volta che la si vuole utilizzare.

Ad esempio per aggiungere la JAVA_HOME la sintassi da usare è:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home

Aggiungere una variabile d’ambiente a Mac OS X Mojave e precedenti

Nelle versioni di Mac OS X Mojave e precedenti la shell predefinita del sistema operativo è BASH per cui per aggiungere una variabile d’ambiente al sistema bisogna andare a modificare il file .bash_profile come riportato di seguito:

  • Apri il terminale e posizionati all’interno della tua home con il comando cd ~
  • Crea o modifica il file .bash_profile con il comando nano .bash_profile
  • Aggiungi la variabile d’ambiente che desideri utilizzando il comando export (es. export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home)
  • Premi ctrl+X per uscire dall’editor e conferma il salvataggio del file premendo il tasto Y
  • Chiudi e riapri il terminale

Aggiungere una variabile d’ambiente a Mac OS X Catalina e successivi

Nelle ultime versioni di Mac OS X Apple ha deciso di cambiare la shell di default del sistema operativo passando a ZSH. Per aggiungere una variabile d’ambiente a ZSH la procedura da seguire è molto simile a quella per le versioni precedenti ma il file da modificare si chiama .zprofile.
Ecco come fare:

  • Apri il terminale e posizionati all’interno della tua home con il comando cd ~
  • Crea o modifica il file .zprofile con il comando nano .zprofile
  • Aggiungi la variabile d’ambiente che desideri utilizzando il comando export (es. export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home)
  • Premi ctrl+X per uscire dall’editor e conferma il salvataggio del file premendo il tasto Y
  • Chiudi e riapri il terminale

PS: io utilizzo ZSH quotidianamente su Ubuntu, se ti interessa sapere quali plugin utilizzo leggi qui.

Verificare che la variabile sia stata aggiunta

Per verificare che la variabile d’ambiente sia stata effettivamente aggiunta al sistema basta utilizzare il comando printenv [nome_variabile] (ad esempio, per verificare che la JAVA_HOME sia stata aggiunta correttamente il comando da eseguire sarebbe printenv JAVA_HOME.

Conclusioni

Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram o a seguirmi su Twitter per non perderti nemmeno un post del mio blog.

Fonte

Come creare un’applicazione Symfony da Ubuntu

installazione di Symfony

Cos’è Symfony?

Symfony è un framework per la creazione di applicazioni web in PHP creato e sponsorizzato da SensioLabs.
Grazie alla moltitudine di componenti pronti all’uso e alle sue elevate performance Symfony è uno dei framework più diffusi per la creazione di progetti di medio/grandi dimensioni.
Inoltre la sua modularità consente di utilizzare questo framework per realizzare senza particolari problemi qualsiasi tipologia di applicazione come ad esempio: API, microservizi e applicazioni monolitiche.

Inoltre, a parer mio, la documentazione del framework è una delle migliori in circolazione. E questo è un fattore da non sottovalutare in particolar modo per chi è alle prime armi con un nuovo progetto Symfony.

Indice

Installazione di Symfony

Dopo questa brevissima introduzione a Symfony inizio subito a spiegarti come installare il framework su Ubuntu tramite la command line interface (CLI).

NOTA: questa procedura funziona anche utilizzando il sottosistema Linux all’interno di Windows 10 (WSL). Per cui puoi seguire gli step riguardanti l’installazione all’interno del sottosistema Linux e poi utilizzare Windows per scrivere il codice e visualizzare l’applicazione web.

1 – Installazione di PHP

Il requisito base per poter utilizzare un framework PHP, naturalmente, è quello di avere un installazione del linguaggio PHP all’interno del tuo computer.

Per poter utilizzare Symfony è richiesta almeno la versione 7.1.3 di PHP e che siano installate alcune estensioni del linguaggio come: Ctype, iconv, JSON, PCRE, Session, SimpleXML e Tokenizer. (Qui puoi trovare l’elenco delle dipendenze richieste)

Per installare tutte le dipendenze con un solo comando apri una nuova sessione del terminale e digita:

sudo apt install php libapache2-mod-php php-mbstring php-xmlrpc php-soap php-gd php-xml php-cli php-zip php-mysql php-curl

2 – Installazione di Composer

Un altro requisito fondamentale per poter creare una nuova applicazione Symfony è il gestore di pacchetti per il linguaggio PHP chiamato Composer. Tramite questo software è infatti possibile aggiungere, aggiornare e rimuovere le dipendenze esterne al progetto.

NOTA: Se in passato ti è capitato di lavorare con un framework Javascript allora ti sarai sicuramente imbattuto in npm o yarn per gestire le dipendenze. Composer è esattamente la stessa cosa, ma per il mondo PHP.

Per installare l’ultima versione di Composer digita i seguenti comandi nel terminale:

curl -sS https://getcomposer.org/installer -o composer-setup.php
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

Per verificare che l’installazione sia andata a buon fine devi aprire e richiudere il terminale e provare a lanciare il programma appena installato utilizzando il comando composer. Se digitando il comando composer ricevi un messaggio del tipo:

unable to find composer, get it at https://getcomposer.org/download/: exec: "composer": executable file not found in $PATH

Allora è possibile che tu non abbia riavviato il terminale oppure che qualcosa sia andato storto e che tu debba riprovare ad installare Composer nuovamente.

3 – Installazione di Git

Questo passaggio non è strettamente necessario ma è fortemente consigliato. Infatti, quando arriverà il momento di creare il progetto dell’applicazione Symfony tramite la CLI, se git non fosse installato e configurato, riceverai un messaggio d’errore.

Per installare git il comando da digitare è:

sudo apt install git-core

Per poter utilizzare git è necessario configurarlo inserendo nome utente ed indirizzo email con i seguenti comandi da terminale:

git config --global user.email "you@example.com"
git config --global user.name "Your Name" 

4 – Installazione della Symfony CLI

Una volta installate tutte le dipendenze necessarie, sei finalmente pronto per installare la CLI (Command Line Interface) di Symfony.

La prima cosa da fare è scaricare l’installer con il seguente comando:

wget https://get.symfony.com/cli/installer -O - | bash
Download della CLI di Symfony

A questo punto è possibile scegliere se installare la CLI livello globale (disponibile per tutti gli utenti del sistema) oppure a livello locale (limitando l’uso al solo utente corrente). Vediamo come fare in entrambi i casi:

4.1a – Installazione globale

Per installare la CLI globalmente rendendola disponibile a tutti gli utenti del sistema il comando da eseguire è:

mv $HOME/.symfony/bin/symfony /usr/local/bin/symfony

4.1b – Installazione locale

Per installare la CLI per il solo utente corrente devi aggiungere Symfony alle tue variabili d’ambiente. Per farlo puoi modificare il file .bashrc utilizzando i seguenti comandi

touch ~/.bashrc
echo 'export PATH="$HOME/.symfony/bin:$PATH"' >> ~/.bashrc 

4.2 – Verifica dell’installazione

Per verificare che l’installazione della CLI sia andata a buon fine è necessario riavviare il terminale (ti basta chiudere e riaprire) e digitare il comando symfony.
Se riceverai un messaggio simile a quello riportato nell’immagine qui sotto allora l’installazione sarà stata completata con successo e potrai finalmente iniziare a creare un nuovo progetto Symfony. 🎉

Symfony CLI installata correttamente

Bonus: configurare l’ambiente di Symfony con Docker

Se non vuoi perdere tempo ad installare PHP e la Symfony CLI all’interno del tuo PC e/o vuoi un ambiente di sviluppo che sia sempre lo stesso anche quando cambi il computer che utilizzi puoi utilizzare creare il progetto all’interno dei container Docker che ho preparato. (Se non sai come installare Docker su Ubuntu leggi qui)

Per usare Symfony all’interno di Docker ti basta clonare il repository linkato qui sotto, avviare i container con il comando docker-compose up -d --build e connetterti al container con docker exec -it symfony-environment bash

https://github.com/lmillucci/symfony-docker-environment

A questo punto configura git come descritto poco più sopra e continua a seguire i passaggi descritti di seguito per creare un nuovo progetto e per avviare il server.

Creazione di un nuovo progetto

Se hai seguito correttamente tutti i passaggi fino a questo punto allora sei finalmente pronto per creare il tuo primo progetto Symfony tramite la CLI. Senza perdere altro tempo, il comando da eseguire per creare un nuovo progetto tramite la CLI è il seguente:

symfony new --full my_symfony_app

NOTA: con il comando --full verranno installate automaticamente all’interno del progetto anche tutti i pacchetti che di solito sono necessari per creare un applicazione web completa. Omettendo il --full invece verrà creato un progetto con una configurazione minimale che è particolarmente indicato per creare microservizi o API.

NOTA2: con questo comando verrà creato un nuovo progetto chiamato my_symfony_app. Naturalmente puoi chiamare il progetto con un nome differente sostituendo my_symfony_app con il nome che vuoi utilizzare.

Avvio di Symfony

Arrivato a questo punto non resta che avviare l’applicazione Symfony appena creata. Normalmente sarebbe necessario configurare un server Apache o NGINX per poter servire un applicazione PHP ma grazie alla CLI di Symfony potrai avviare immediatamente il progetto appena creato utilizzando il server integrato (chiamato: Symfony Local Web Server).

Per avviare l’applicazione Symfony appena creata ti basta spostarti nella cartella del progetto e avviare il server con i seguenti comandi:

cd my_symfony_app
symfony serve

Una volta che il server si sarà avviato, visitando l’indirizzo http://127.0.0.1:8000/, potrai visualizzare la pagina di benvenuto di Symfony.

Benvenuto nella tua prima applicazione Symfony

Da questo punto in poi potrai modificare il codice PHP all’interno del progetto per iniziare a realizzare l’applicazione che desideri.

Bisogno di aiuto?

Se vuoi rimanere sempre aggiornato su ciò che posto in questo blog iscriviti al mio canale Telegram oppure, se hai bisogno di aiuto nel seguire questa guida o non ti è chiaro qualche passaggio puoi lasciarmi un commento qui sotto oppure scrivermi direttamente a t.me/lorenzomillucci.

Per sapere come gestire gli asset front-end tramite Webpack puoi consultare quest’altro articolo.

Fonte

Installare i driver per la scheda di rete RTL8821CE su Ubuntu 18.04

Se hai provato ad installare Ubuntu 18.04 su di un PC con la scheda di rete Realtek RTL8821CE avrai sicuramente notato che questa non viene riconosciuta dal sistema operativo.

In attesa che i driver di questa scheda di rete vengano aggiunti all’interno di Ubuntu è possibile installarli manualmente seguendo la procedura descritta di seguito.

Verificare di avere la scheda RTL8821CE

Per vedere quali schede di rete hai installato all’interno del tuo computer puoi usare il comando:

lspci | egrep -i --color 'network'

Se come risultato ottieni:

Network controller: Realtek Semiconductor Co., Ltd. RTL8821CE 802.11ac PCIe Wireless Network Adapter

Allora significa che nel tuo computer è presente la scheda in questione e puoi procedere all’installazione dei driver descritta di seguito.

Installare i driver

Per installare i driver devi usare i seguenti comandi:

sudo apt install --reinstall git dkms build-essential linux-headers-$(uname -r)
git clone https://github.com/tomaspinho/rtl8821ce
cd rtl8821ce
chmod +x dkms-install.sh
sudo ./dkms-install.sh

NOTA: affinchè la procedura vada a buon fine devi essere connesso ad internet. Puoi farlo utilizzando il cavo Ethernet al tuo modem oppure utilizzare il tuo smartphone in tethering connettendolo via USB.

A questo punto, riavviando il sistema, la scheda di rete dovrebbe essere finalmente riconosciuta dal sistema ed essere pronta per l’utilizzo.

NOTA: affinché l’installazione dei driver vada a buon fine devi avere Secure Boot disattivato all’interno di UEFI altrimenti potresti ricevere il seguente messaggio d’errore

Your system has UEFI Secure Boot enabled.                                   
 │                                                                             
 │ UEFI Secure Boot requires additional configuration to work with             
 │ third-party drivers.                                                       
 │                                                                             
 │ The system will assist you in configuring UEFI Secure Boot. To permit       
 │ the use of third-party drivers, a new Machine-Owner Key (MOK) has been     
 │ generated. This key now needs to be enrolled in your system's firmware.     
 │                                                                             
 │ To ensure that this change is being made by you as an authorized user,     
 │ and not by an attacker, you must choose a password now and then confirm     
 │ the change after reboot using the same password, in both the "Enroll       
 │ MOK" and "Change Secure Boot state" menus that will be presented to you     
 │ when this system reboots.

Rimozione dei driver

Nel caso in cui ci fossero problemi puoi sempre rimuovere i driver installati spostandoti nella cartella in cui li hai scaricati e digitando i comandi:

chmod +x dkms-remove.sh
sudo ./dkms-remove.sh

Conclusioni

Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram per non perderti nemmeno un post del mio blog.

Fonte

Evitare le fregature su Amazon con Keepa

Ti capita spesso di sfogliare la pagina delle offerte di Amazon?
Io quasi tutte le mattine sfoglio la pagina con le offerte di Amazon e controllo gli oggetti che ho aggiunto alla lista desideri nella speranza di trovare l’occasione irripetibile che mi faccia risparmiare qualche buon euro.

Il problema di Amazon è che tutti i prodotti sono sempre scontati e che i prezzi che applica sono molto variabili. Può benissimo capitare che un prodotto che tengo sott’occhio un giorno costi 20€, il giorno dopo 25€ per poi magari essere scontato per qualche ora a 10€.

Quindi, come posso fare per capire un prodotto è veramente in offerta o meno?
Proprio a questo scopo ti viene in aiuto un estensione per il browser chiamata Keepa che consente di tracciare i prezzi e le offerte dei prodotti di Amazon.

Prima di mostrarti come installare Keepa all’interno del tuo browser ti voglio fare un esempio concreto.

Prendiamo in considerazione il gioco per Nintendo Switch “Pokemon: Let’s Go“, puoi notare come il prezzo consigliato sia di 59,99€ mentre il prezzo applicato da Amazon sia di 49,99€.
Un risparmio di 10€ sul prezzo di listino potrebbe sembrare una buona offerta ma dopo aver installato Keepa nel tuo browser potrai notare che poco sotto i dettagli del prodotto è presente un grafico con l’andamento del prezzo negli ultimi 3 mesi.

Per cui, dal grafico è possibile notare subito due cose:

  • Benché il prezzo consigliato sia di 59,99€ il gioco non è mai stato a quel prezzo. Nel momento in cui era più costoso veniva comunque circa 56€ rendendo lo sconto attuale di 6€ anziché 10€;
  • In passato il gioco è costato decisamente meno, per cui è possibile che in futuro venga scontato nuovamente.

Sulla base di queste informazioni potresti convenire che, se non hai fretta, sia meglio attendere qualche altra offerta prima di acquistare il gioco.

Come installare Keepa

L’installazione di Keepa è veramente banale, bastano pochissimi click ed è disponibile per tutti i principali browser disponibili sul mercato.
Per installarlo direttamente nel tuo browser ti lascio di seguito i link diretti:

  • Estensione per Firefox: clicka qui e premi il pulsante Aggiungi a Firefox
  • Estensione per Chrome: clicka qui e premi il pulsante Aggiungi

Da questo punto in poi, per ogni pagina di Amazon che consulterai potrai trovare il grafico con l’andamento dei prezzi del prodotto subito dopo la sezione dedicata alle caratteristiche generali.

Conclusioni

Come hai potuto notare non tutti gli sconti di Amazon sono delle reali offerte. Questo non vuol dire che non ci siano mai offerte eccezionali su alcuni prodotti ma a volte le gli sconti proposti sono meno sensazionali di quello che sembrano. Grazie a Keepa potrai avere il polso sull’andamento del prezzo nel tempo e delle offerte dei prodotti che ti servono e potrai decidere con cognizione di causa se un offerta è veramente buona o se è soltanto una leggera riduzione di costo.

Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci. Inoltre ti invito ad iscriverti al mio canale Telegram per non perderti nemmeno un post del mio blog.

Come integrare un podcast di Spotify in una pagina web

Embed del podcast da Spotify

Se hai un podcast accessibile da Spotify oggi ti mostrerò come fare per includerlo all’interno di una pagina web.

NOTA: per poter creare il miniplayer da “embeddare” in una pagina web è necessario che tu abbia installato l’applicazione desktop di Spotify.

Includere un singolo episodio del podcast

Per includere uno specifico episodio di un podcast all’interno di una pagina web la procedura da seguire è:

  • Clickare sui tre puntini in corrispondenza dell’episodio da includere
  • Condividi
  • Copia codice di incorporamento
Generazione del codice di incorportamento per uno specifico episodio del podcast
Generazione del codice di incorportamento per uno specifico episodio del podcast

Spotify ti fornirà un codice HTML tipo questo:

<iframe src="https://open.spotify.com/embed-podcast/episode/1H3tiZsTClwbXvxZZSQwfW" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

che una volta inserito all’interno di una pagina web ti permetterà di ottenere un player come il seguente:

Includere l’ultimo episodio del podcast

Per includere un riproduttore sempre aggiornato con l’ultimo episodio uscito del podcast la procedura da seguire è:

  • Clickare sui tre puntini sotto il titolo del podcast
  • Condividi
  • Copia codice di incorporamento
 Generazione del codice di incorportamento per mostrare sempre l'ultimo episodio del podcast
Generazione del codice di incorportamento per mostrare sempre l’ultimo episodio del podcast

Spotify ti fornirà un codice HTML tipo questo:

<figure><iframe src="https://open.spotify.com/embed-podcast/show/5DsZVNVi7SwW7WDmU0joWr" width="100%" height="232"></iframe></figure>

che una volta inserito all’interno di una pagina web ti permetterà di ottenere un player come il seguente:

Includere il podcast in una pagina web

Per includere il podcast all’interno di una pagina web ti basta solo copiare il codice ottenuto da Spotify all’interno del codice HTML della tua pagina.

Inserimento del podcast all’interno di una pagina web

Includere il podcast in WordPress

Se hai intenzione di embeddare il podcast all’interno di una pagina realizzata con WordPress devi fare particolare attenzione al fatto che il blocco di testo in cui andrai ad incollare il codice di incorporamento fornito da Spotify sia di tipo HTML personalizzato. In caso contrario, al posto del riproduttore di Spotify, potresti visualizzare il codice di incorporamento come se fosse del testo.

Blocco di codice HTML di wordpress per includere il podcast
Blocco di codice HTML di WordPress per includere il podcast

Conclusioni

Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto  oppure scrivendomi direttamente a t.me/lorenzomillucci. Inoltre ti invito ad iscriverti al mio canale Telegram per non perderti nemmeno un post.

7 trucchi per affinare le tue ricerche su Google

Google search

Quante volte al giorno utilizzi Google per le tue ricerche? Grazie all’altissima precisione dei risultati ottenibili con una ricerca non stupisce il fatto che il famoso motore di ricerca sia il sito web più visitato al mondo. .

Io utilizzo quotidianamente Google per qualunque cosa: dalla documentazione di PHP al significato di qualche parola strana che mi ha colpito.

Usare il motore di ricerca per cercare qualcosa è semplice quanto digitare una parola chiave e premere invio sulla tastiera. Chiunque è in grado di fare ricerche su Google ma pochi conoscono l’esistenza di alcuni operatori che il motore di ricerca mette a disposizione per affinare ulteriormente i risultati ottenuti.
Con questo post ti voglio illustrare 7 operatori che possono farti risparmiare un po’ di tempo la prossima volta che effettui una ricerca sul web.

Indice

1 – Ricerca di frasi esatte

Per trovare tutte le pagine che contengano esattamente le parole cercate ti basta inserire il testo della ricerca tra doppi apici.

Ad esempio, per cercare il titolo di una canzone partendo da una frase puoi digitare sul motore di ricerca: "in the town where i was born lived a man who sailed to sea".
Esempio

2 – Includere nella ricerca anche i sinonimi

Esattamente al contrario dell’operatore precedente, per fare in modo che nella ricerca siano presenti anche i risultati contenenti sinonimi di una determinata parola ti basta utilizzare l’operatore tilde ~. (se anche te non ricordi come fare la tilde con la tastiera guarda qui)

Ad esempio, inserendo i termini di ricerca gestionale ~hotel troverai inclusi tra i risultati anche le pagine contenenti i sinonimi della parola hotel (ad esempio albergo).
Esempio

3 – Escludere risultati dalla ricerca

Per escludere dai risultati tutte le pagine che contengono una determinata parola basta anteporre alla parola da escludere il simbolo -.

Ad esempio per cercare tutte le informazioni sullo YouTuber human safari senza che compaiano i video di YouTube ti basta digitare nel motore di ricerca: human safari -youtube.
Esempio

4 – Limitare la ricerca ai risultati appartenenti ad un certo sito

Per limitare la ricerca ai soli risultati appartenenti ad un certo sito basta mettere prima dell’indirizzo del sito la parola chiave site:.

Nella vita di ogni programmatore spesso capita di dover cercare qualcosa sul forum stackoverflow e per limitare i risultati a questo sito la ricerca da fare è: site:stackoverflow.com symfony.
Esempio

NOTA: questo comando può essere anche utile per sapere quali pagine di un sito sono già nell’indice di Google e quali no.

5 – Limitare i risultati ai file con una determinata estensione

Per cercare tutti i file con una certa estensione basta preporre all’estensione cercata la parola chiave filetype:.
Questo comando è particolarmente utile abbinato al precedente per trovare tutti i risultati di un determinato sito.

Ad esempio per trovare tutti i documenti PDF presenti nel sito dell’agenzia delle entrate la ricerca da fare è: filetype: pdf site:agenziaentrate.gov.it.
Eempio

6 – Dizionario

Tramite la parola chiave define: è possibile utilizzare Google esattamente come se fosse un dizionario.

Ad esempio per sapere qual’è il significato esatto della parola pernicioso la ricerca da fare è define: pernicioso
Esempio

7 – Limitare la ricerca al titolo della pagina

Per limitare i risultati di ricerca a tutti i siti contenenti una parola o una frase nel titolo il comando da utilizzare è allintitile:.

Ad esempio per cercare tutte le pagine che hanno nel titolo Harry Potter la ricerca da fare è allintitle:"Harry Potter".
Esempio

Conclusioni

Esistono molti altri operatori che permettono di affinare ulteriormente i risultati forniti da Google ma questi sono quelli che io reputo i più importanti. Inoltre molti degli operatori citati possono essere combinati per fornire risultati sempre più precisi.

Te conosci qualche altro operatore o qualche altra combinazione meritevole di attenzione? Se si puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente nel mio canale Telegram oppure scrivendomi direttamente a t.me/lorenzomillucci.

Indicizzare un podcast su Google Podcast

Google podcast

Che il 2019 sarebbe stato l’anno dell’audio si sapeva già da un po’. Nei primi 5 mesi d quest’anno un po’ tutti i big della tecnologia hanno iniziato a presentare innovazioni legate al mondo dei podcast.
Tra i tanti non poteva mancare Google che, dopo l’annuncio al Google I/O, da ieri ha finalmente iniziato ad aggiungere ai risultati di ricerca i podcast.

Risultati di ricerca di google per il podcast di The Verge

Come indicizzare il podcast

La prima cosa da fare è verificare che il podcast non sia stato già indicizzato da Google. Per verificarlo ti devi collegare ai Publisher Podcast Tool e provare a generare un link diretto per il tuo podcast inserendo il link al feed RSS del podcast.

Se il link viene generato correttamente non c’è null’altro da fare. I tuoi ascoltatori saranno già in grado di trovare le puntate del podcast all’interno della pagina di ricerca di Google e di ascoltarle utilizzando Google Podcast.

Nel caso il link non venga generato devi verificare che il sito web associato al podcast rispetti le linee guida definite da Google.

Errore: This RSS feed is not currently indexed by Google Podcasts

Se utilizzi una piattaforma come Spreaker o Buzzsprout per distribuire il tuo podcast allora la pagina assegnata alla tua trasmissione rispetta già i requisiti necessari all’indicizzazione da parte di Google. Per cui non devi far altro che aspettare i tempi necessari a Google ad indicizzarle.

Se invece il tuo podcast è ospitato su una tua piattaforma devi accertarti di aderire perfettamente alle linee guida di Google.
In particolare dovrai creare una pagina nel tuo sito che descriva chiaramente le tematiche affrontate nel podcast. Questa pagina dovrà essere linkata nel feed RSS del podcast e dovrai accertarti che all’interno della pagine sia presente il seguente codice:

<link type="application/rss+xml" rel="alternate"
      title="Your Podcast's Name" href="Your podcast's RSS url"/>

Quando aggiungi questo blocco di codice al tuo sito presta la massima attenzione ai seguenti punti:

  • Il codice deve essere incluso solo nella home page del podcast. Non includerlo in tutte le pagine del sito web;
  • Accertati che sia l’unico elemento della pagina ad avere il tag rel="alternate";
  • Verifica che l’attributo title abbia esattamente lo stesso titolo del podcast;

Una volta fatto tutto ciò non ti resta che aspettare che Google indicizzi la tua pagina web. Ogni cambiamento al sito web non avviene istantaneamente, Google può impiegare anche 2-3 settimane prima di iniziare ad indicizzare il tuo podcast. Sfortunatamente non c’è un modo per far sapere a Google dell’esistenza del tuo podcast, ma sono loro che scansionando il tuo sito web ne verranno a conoscenza (esattamente come avviene per le pagine web e le immagini).
Puoi verificare l’effettiva indicizzazione del podcast utilizzando il tool Publisher Podcast Tool.

Hai già aggiunto il tuo podcast all’indice di Google? Puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente nel mio canale Telegram oppure scrivendomi direttamente a t.me/lorenzomillucci.