Costruzione di un Front-End alimentato da WordPress: introduzione e installazione

Italian (Italiano) translation by Piergiorgio Sansone (you can also view the original English article)

Nella serie introduttiva riguardante le API REST di WordPress, abbiamo studiato le funzionalità di base fornite dalla API e la flessibilità offerta dal back end di WordPress nella costruzione delle Apps. Abbiamo visto anche le risorse, rotte e i metodi supporti per eseguire le operazioni CRUD.

In questa serie sulla creazione di un front-end WordPress-powered con l'API REST di WP e AngularJS, dovremo indicare le conoscenze acquisite nella serie introduttiva, da utilizzare. Impareremo come possiamo sfruttare questa conoscenza per separare il modello convenzionale tema-admin fino ad ora supportato da WordPress . Noi pianificheremo e costruiremo un'applicazione a pagina singola (che ho chiamato Quiescent) con un back-end WordPress che sarà caratterizzato da post, utenti, categorie e liste di pagine. Dovremo configurare il routing AngularJS e costruire una direttiva personalizzata e controller per le risorse indicate in precedenza.

Nella prima parte della serie, ci impegneremo :

a valutare i requisiti per costruire il front-end con l'aiuto di wireframe
scaricare e installare il pacchetto HTML bare bones per iniziare a lavorarci
costruire un plugin WordPress a supporto basato sulle valutazioni precedenti.

Così iniziamo valutando i requisiti per la costruzione del front-end.

Pianificando le cose esterne

La parte iniziale all'inizio di qualsiasi progetto deve valutare i requisiti di progetto e di conseguenza programmando le cose fuori. Questo pone solide basi per il progetto e ci aiuta a pensare con chiarezza in termini di funzionalità e caratteristiche dell'applicazione.

Come accennato prima, abbiamo bisogno di liste di pagine e singole pagine per le seguenti tre risorse:

Post
Categorie
Utenti

Parliamo prima della creazione di modelli per la risorsaposts. Avremo bisogno di due modelli per questa risorsa, un modello di lista ed un modello di post singolo. Il modello lista , mostrerà un particolare numero di post con i link per la paginazione per andare dal precedente al successivo set di post. Il modello di singlolo post mostrerà un singolo post per pagina.

Sotto il wireframe della pagina della lista di post:

Ed a seguire, c'è il wireframe del modello di pagina singola.

Come potete vedere in wireframe sopra indicati, i requisiti sono piuttosto semplici, seguono un qualsiasi modello blog standard. Ma quando mettiamo a confronto i wireframe sopra citati con la risposta standard che fornisce l'API REST di WP per i post, incorriamo nella conclusione che i seguenti elementi non sono presenti nell'oggetto risposta standard:

in primo piano, il link immagine
il nome dell'autore
il nome della categoria e ed i collegamenti

Quindi abbiamo bisogno di modificare la risposta per la risorsa post per includere questi elementi. Lo faremo in questo tutorial creando il plugin di supporto per WordPress.

Adesso analiziamo i requisiti per le risorse Categorie e Utenti osservando i seguenti due wireframes.

Sotto il wireframe per il modello categoria:

E qui abbiamo il wireframe per il modello utente:

Osservando i due wireframe sopra, è chiaro che non richiedono la registrazione di eventuali campi aggiuntivi nelle loro risposte standard. Ma se osserviamo attentamente la pagina del profilo autore, abbiamo bisogno di aggiungere una dimensione ulteriore gravatar per compensare le dimensioni dell'immagine nel nostro HTML. Questa funzionalità può essere ottenuta anche nel plugin di supporto.

Uno dei principi fondamentali e più sostenuti dell'ingegneria del software è il principio DRY (Don't Repeat Yourself). Analizzando il mockup sopra, vediamo che il profilo di post viene ripetuto su quasi tutti i modelli di profilo in una forma o un' altra. Quindi andremo avanti e realizzeremo una direttiva AngularJS comune per la lista dei post da utilizzare su tutti i modelli di cui sopra, e questa direttiva comprenderà funzionalità tra cui postare l'impaginazione e il recupero di un sottoinsieme di tutti i messaggi per i parametri forniti.

Ora che abbiamo valutato i requisiti generali per la compilazione dell'applicazione, possiamo approfondire la parte di codifica a partire dalla sezione successiva.

Requisiti per il tutorial

Prima di incominciare a lavorare sull'applicazione, è necessario avere alcune applicazioni installate sul vostro sistema. Queste applicazioni sono:

un'installazione di WordPress con il plugin WP REST API abilitato e alcuni dati demo
Git per clonare il repository HTML (non necessario, però, dal momento che è possibile anche scaricare il repository direttamente dal sito GitHub tramite GUI).
Node. js per lavorare con i comandi di npm e gulp
GulpJS per l'esecuzione di attività di riduzione e ottimizzazione nel pacchetto HTML

Se è da un pò che sviluppate sul web, c'è una buona probabilità che abbiate già questa roba installata nel sistema. In caso contrario, vi consiglio di che dare un'occhiata al loro siti ufficiali ed alla documentazione.

Scaricare e installare il pacchetto HTML

Per rendervi le cose più facile nel seguire, ho già costruito i modelli HTML base, per i wireframe che abbiamo analizzato sopra.

Prima di tutto, è necessario copiate il repository del pacchetto HTML da GitHub:

1	$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git

Dopo che avete copiato il repository, è necessario spostarsi nella directory utilizzando il seguente comando:

1	$ cd path/to/cloned/repository

Non importa se si utilizza OS X, Windows o Linux, perché il comando cd precedente funziona su quasi tutti i sistemi operativi.

Ora è necessario installare i moduli di Node.js utilizzando:

1	$ npm install

Il comando precedente impiegherà del tempo per completarsi, a seconda della velocità della vostra connessione internet.

Dopo aver installato i moduli necessari, è possibile infine compilare il sorgente con il comando gulp:

$ gulp

Questo produce una nuova cartella denominata dist che contiene l'origine compilato per HTML e dei suoi assests.

Il comando install npm che abbiamo eseguito sopra consente inoltre di installare un modulo di node.js denominato http-server che consente di impostare un server HTTP di base all'interno di qualsiasi directory in modo facile e veloce. È possibile controllare il sorgente compilato navigando nella directory dist ed eseguendo il seguente comando:

1	$ http-server

Questo visualizzerà alcuni indirizzi sullo schermo per il server che è possibile immettere nel tuo browser per iniziare a visualizzare il codice HTML.

$ http-server
Starting up http-server, serving ./
Available on:
    https:192.168.0.104:8080
    http:192.168.56.1:8080
    http:127.0.0.1:8080
Hit CTRL-C to stop the server

Questo è tutto su come scaricare e compilare il pacchetto base di HTML che funziona come la spina dorsale per il nostro sviluppo futuro.

Costruire il Plugin Quiescent Companion

Dopo aver scaricato e installato i moduli necessari per il pacchetto HTML, siamo ora pronti per creare la funzionalità lato server per supportare il front-end.

Nella sezione precedente, abbiamo analizzato i requisiti per la costruzione del front-end con l'API REST di WP e AngularJS. Diamo ancora un occhiata agli elementi di cui abbiamo bisogno per la realizzazione del front-end.

Foto di presentazione per il post. Abbiamo anche bisogno di registrare una nuova dimensione dell'immagine in WordPress per rappresentare la dimensione dell'immagine nel nostro HTML.
Nome dell'autore del post. Questo può essere recuperato utilizzando l'ID dell'autore che è disponibile nell'oggetto risposta standard.
Elenco delle categorie associate al post. Ciò sarà possibile utilizzando l'ID del post.
Una nuova dimensione dell'immagine per il gravatar rappresentare la dimensione dell'immagine profilo autore nel nostro HTML.

Così abbiamo bisogno di tre campi aggiuntivi per la risorsa di post e anche bisogno di aggiungere nuovi formati di immagine per l'immagine consigliato e l'utente gravatar.

Iniziamo creando una nuova directory per nostro plugin nella cartella /wp-contet/plugins e chiamiamolo quiescent-companion. All'interno di tale directory, creare un nuovo file PHP denominato quiescente-companion.php e incollare il codice seguente per la definizione di plugin:

<?php
/**
 * Plugin Name: Quiescent Companion
 * Description: Plugin to work with the Quiescent WP REST API theme
 * Author: Bilal Shahid
 * Author URI: http://imbilal.com
 */

Se avete seguito insieme a me la mia serie introduttiva sull'API REST di WP, quindi avete già imparato a modificare la risposta del server per una particolare risorsa utilizzando il metodo register_rest_field(). Se non l'avete ancora vista, vi consiglio di farlo controllando l'articolo su come modificare le risposte del server.

Il metodo register_rest_field() accetta tre argomenti per il nome della risorsa da modificare, il nome del campo e una matrice di argomenti per il campo. Questa matrice di argomenti contiene il callback di recupero, il callback di aggiornamento e lo schema del campo.

Ecco il codice per l'aggiunta di un campo personalizzato per l'immagine del post consigliato:

<?php
/**
 * Modifying the response for the Post object
 */
function quiescent_modify_post_response() {
    // adding a field for the featured image
    register_rest_field( 'post', 'quiescent_featured_image', array(
        'get_callback'  	=> 'quiescent_get_featured_image',
        'update_callback'	=> null,
        'schema'                => null
    ) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );

Il metodo register_rest_field() viene chiamato con l'azione di rest_api_init.

È sempre una buona pratica anteporre al nome del campo personalizzato un prefisso in modo che non entri in conflitto con qualsiasi altro campo in futuro. Quindi abbiamo chiamato il nostro campo personalizzato quiescent_featured_image . Il metodo responsabile per il recupero di questa immagine consigliata è quiescent_get_featured_image, e definiamo come indicato di seguito:

<?php
/**
 * Function to retrieve featured image link
 */
function quiescent_get_featured_image( $post, $field_name, $request ) {
    $attachment_id = $post['featured_media'];
    $attachment_info = wp_get_attachment_image_src( $attachment_id, 'quiescent_post_thumbnail' );
    return $attachment_info[0];
}

Questo metodo passa tre argomenti la matrice post, il nome del campo e l'oggetto di richiesta. La matrice del post contiene le informazioni necessarie relative il post corrente, incluso l'ID, il titolo,il contenuto, ecc. Utilizzando queste informazioni, possiamo recuperare tutte le informazioni arbitrarie associate al post. Quindi utilizziamo l'ID media post consigliati per recuperare il link dell'immagine consigliata del post attraverso il metodo wp_get_attachment_image_src().

In aggiunta al codice di cui sopra per la registrazione del campo personalizzato per il link di presentazione del post, abbiamo, di conseguenza, anche bisogno di registrare un formato immagine personalizzata :

<?php
/**
 * Adding image size for the featured image
 */
function quiescent_add_image_size() {
    add_image_size( 'quiescent_post_thumbnail', 712, 348, true );
}
add_action( 'init', 'quiescent_add_image_size' );

Il codice precedente utilizza il metodo add_image_size() per la registrazione di una nuova dimensione dell'immagine di 712 px di 348 px e utilizziamo quiescent_post_thumbnail come nome della nuova dimensione dell'immagine.

Salvate il codice e assicurartevi che il plugin Quiescent Companion sia attivato nel vostro WP admin. Inviate una richiesta di test per l'itinerario di /wp/v2/posts e il server restituirà il link dell'immagine consigliato nel campo quiescent_featured_image nell'oggetto response:

...
"tags": [],
"quiescent_featured_image": "http://localhost/wordpress/wp-content/uploads/2016/02/hot-chocolate-1058197_1920-712x348.jpg",
"_links": {
...

Ora che abbiamo aggiunto il link della foto di presentazione con successo nella risposta, gli altri due campi restanti da aggiungere sono, la lista delle categorie ed il nome dell'autore.

Per aggiungere il nome visualizzato dell'autore del post, modifichiamo la funzione quiescent_modify_post_response() per includere un'altra chiamata al metodo register_rest_field() simile al seguente:

<?php
// adding a field for author name
register_rest_field( 'post', 'quiescent_author_name', array(
    'get_callback'      => 'quiescent_get_author_name',
    'update_callback'   => null,
    'schema'            => null
) );

Noi chiamiamo questo campo personalizzato quiescent_author_name e la funzione di callback per il recupero del valore di questo campo è la seguente:

<?php
/**
 * Function to retrieve author name
 */
function quiescent_get_author_name( $post, $field_name, $request ) {
    return get_the_author_meta( 'display_name', $post['author'] );
}

Qui usiamo il metodo get_the_author_meta() per recuperare il nome visualizzato dell'autore del post.

Per l'ultimo campo per i nomi di categoria, la chiamata al metodo register_rest_field() è come segue:

<?php
// adding a field for categories
register_rest_field( 'post', 'quiescent_categories', array(
    'get_callback'      => 'quiescent_get_categories',
    'update_callback'   => null,
    'schema'            => null
) );

La chiamata di cui sopra dovrebbe andare all'interno della funzione quiescent_modify_post_response(). Il metodo di callback di recupero quiescent_get_categories() è:

<?php
/**
 * Function to retrieve categories
 */
function quiescent_get_categories( $post, $field_name, $request ) {
    return get_the_category( $post['id'] );
}

Il codice sopra utilizza il metodo get_the_category() per recuperare le categorie dal post corrente. Il metodo restituisce un array di oggetti, ed ogni oggetto rappresenta una categoria che appartiene al post corrente.

Ora che abbiamo scritto tutto il codice di cui sopra, i tre nuovi campi sono stati aggiunti all'oggetto risposta standard per la risorsa Post. Questi tre campi nuovi sono:

quiescent_featured_image
quiescent_author_name
quiescent_categories

Per impostazione predefinita, la risposta standard per la risorsa Utenti contiene l'URL avatar per le dimensioni 24 px, 48 px e 96 px. L'ultima cosa che dobbiamo fare ora è aggiungere un URL per un gravatar di ulteriori 207 px di dimensione per la risorsa Utenti. Quindi, creare una nuova funzione denominata quiescent_modify_user_response() e gancio per l'azione di rest_api_init:

<?php
/**
 * Modifying the response for the User object
 */
function quiescent_modify_user_response() {
    
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );

All'interno di questa funzione, aggiungiamo una chiamata al metodo register_rest_field() per aggiungere un campo denominato quiescent_avatar_url per l'oggetto utente:

<?php
/**
 * Modifying the response for the User object
 */
function quiescent_modify_user_response() {
    // adding a field for 207 X 207 avatar
    register_rest_field( 'user', 'quiescent_avatar_url', array(
        'get_callback'      => 'quiescent_get_user_avatar',
        'update_callback'   => null,
        'schema'            => null
    ) );
}

Il metodo di callback quiescent_get_user_avatar() è come segue:

<?php
/**
 * Retrieving the avatar for the user
 */
function quiescent_get_user_avatar( $user, $field_name, $request ) {
    $args = array(
        'size'  => 207
    );
    
    return get_avatar_url( $user['id'], $args );
}

Questo metodo utilizza il metodo get_avatar_url() per restituire l'URL per un gravatar di dimensioni 207 px di 207 px.

Invia una richiesta GET per il percorso /wp/v2/users e il server restituirà un campo aggiuntivo denominato quiescent_avatar_url insieme all'oggetto di risposta standard:

1	...
2	"quiescent_avatar_url": "http://0.gravatar.com/avatar/?s=207&d=mm&r=g",
3	...

Questo è tutto circa la costruzione del plugin companion.. Il codice sorgente compilato può essere scaricato dal repository Envato Tuts + GitHub.

Ora che il plugin è stato completato, siamo pronti ad andare avanti e iniziare a lavorare con AngularJS per creare modelli, percorsi e servizi per le risorse, che faremo nella parte successiva della serie.

Cosa vedremo dopo?

In questo tutorial, abbiamo gettato le basi per la creazione di un front-end WordPress-powered utilizzando l'API REST di WP e AngularJS. Abbiamo analizzato i requisiti di progetto con wireframes e creato un companion plugin per il backup dei front-end.

Nella parte successiva della serie, inizieremo ad utilizzare il pacchetto HTML che abbiamo scaricato precedentemente in questa esercitazione. Eseguiremo il bootstrap dell'app AngularJS, configureremo il routing e creeremo servizi RESTful per le risorse post, utenti e categorie, quindi restate sintonizzati...