Utilizzo della riga di comando

Inizia aprendo uno strumento familiare agli sviluppatori esperti e un nuovo migliore amico per quelli che hanno appena iniziato: la riga di comando. Per molti, la GUI (graphic user interface) ha relegato la CLI del computer allo stato di seconda classe. Ma ora, è il momento di riportarlo indietro (anche se la GUI non sta andando via in qualsiasi momento presto, soprattutto quando è necessario sfogliare il web per scaricare le istruzioni per la serie di strumenti della riga di comando).

Aprire una shell e creare una directory. Cambiare la propria directory di riferimento con la nuova creata. Una volta creata, l'applicazione ha una propria sottodirectory con il codice di partenza e la configurazione necessaria per iniziare a funzionare.

Lascia la riga di comando e ritorna al browser in modo da poter seguire le istruzioni per installare IBM Cloud Platform developer tools al collegamento. Gli Developer Tools offrono un approccio estensibile e ripetibile alla creazione e alla distribuzione di applicazioni cloud.

Installazione di Docker

L'utilizzo dei contenitori, come Docker, accelera lo sviluppo e facilita il test e supporta la distribuzione automatica. Un contenitore è una struttura leggera che non ha bisogno di un sistema operativo, ma solo del codice e della configurazione di tutto, dalle dipendenze alle impostazioni.

Docker è installato come parte di Developer Toolse ne hai bisogno. Il suo lavoro si svolge principalmente in background all'interno delle routine che affacciano la tua nuova app. Affinché i comandi di build funzionino è necessario che Docker sia in esecuzione. Create un account Docker online su Docker hub, eseguite l'applicazione Docker e accedete.

Installazione di Node.js

L'applicazione costruita utilizza Node.JS come motore lato server per eseguire il codice JavaScript di questa applicazione web. Per usare il gestore di pacchetti Node (npm) per gestire le dipendenze della propria applicazione, è necessario installare Node localmente. Inoltre, un'installazione locale di Node semplifica i test, accelerando lo sviluppo.

Prima di iniziare, è possibile considerare un gestore versioni, come Node Version Manager o nvm, per installare Node. Un gestore versioni riduce la complessità di gestione delle varie versioni di Node.js.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

...o 'wget (è necessario solo uno dei due, ma non entrambi; utilizzate quello disponibile sul vostro sistema):

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Oppure, per Windows, potete usare 'nvm per Windows con gli installatori e il codice sorgente al link.

Utilizzando nvm, installare Node.

nvm install v6.17.1

Qualsiasi approccio utilizzi dopo aver installato Node.js e npm (incluso con Node) sul tuo computer, congratulati per un lavoro ben avviato!

Installazione di Git

Probabilmente hai già familiarità con Git, in quanto è il sistema di controllo delle versioni del codice sorgente più utilizzato. Si usa Git in seguito, quando si crea una catena di strumenti per la distribuzione continua (CD) nella piattaforma IBM Cloud Per la consegna e la distribuzione continua. Se non avete un account GitHub, create un account personale pubblico e gratuito sul sito web di GitHub; altrimenti, accedete pure con qualsiasi altro account in vostro possesso.

Devi generare e caricare le chiavi SSH nel tuo profiloGitHub per l'accesso sicuro a GitHub da riga di comando. Tuttavia, fare ciò ora fornisce una buona pratica, poiché ripeti la procedura per l'istanza di GitHub utilizzata per la piattaforma IBM Cloud in seguito.

Per ora, scarica il desktop diGitHub ed esegui il programma di installazione. Al termine del programma di installazione, accedi a GitHub con il tuo account.

Immettere un nome e un'email (visualizzati pubblicamente) per tutti i commit nel repository. Una volta che l'applicazione è collegata al tuo account, ti potrebbe essere richiesto di verificare la connessione dell'applicazione tramite il tuo account GitHub online.

Distribuisci l'applicazione a IBM Cloud Platform.

Per ottenere l'applicazione iniziale con le modifiche apportate alla piattaforma IBM Cloud Si può distribuire utilizzando gli Developer Tools, ripetendo gli stessi passaggi eseguiti in precedenza.

1. Se non l'avete ancora fatto, o se avete riavviato o vi siete disconnessi, accedete alla IBM Cloud Utilizzando il comando 'login.

   ibmcloud login
   

2. Imposta l'endpoint API per la tua regione utilizzando il comando api.

   ibmcloud api cloud.ibm.com
   

3. Costruire l'applicazione per la consegna dell'applicazione con il comando build (come nell'esempio).

   ibmcloud dev build
   

   1. Continua e verifica l'applicazione localmente. Ciò consente di eseguire lo stesso codice localmente con il comando run.

   ibmcloud dev run
   

4. Distribuisci l'applicazione alla piattaforma IBM Cloud con il comando deploy.

   ibmcloud dev deploy
   

   Il codice mostra la sequenza di comandi utilizzati in questo esempio per costruire, testare e distribuire l'applicazione web iniziale.

   ibmcloud login --sso
   ibmcloud api cloud.ibm.com
   ibmcloud target --cf
   ibmcloud dev enable
   ibmcloud dev build
   ibmcloud dev run
   ibmcloud dev deploy
   

   Una volta terminato il processo, la piattaforma IBM Cloud riporta che l'app è stata caricata, distribuita e avviata correttamente. Se si è connessi anche alla console web della piattaforma IBM Cloud, si riceve una notifica sullo stato della propria applicazione. Ma, cosa più importante, puoi verificare che l'applicazione è stata distribuita visitando l'URL dell'applicazione segnalato da IBM Cloud Platform con un browser o dalla console web facendo clic sul pulsante View App.

   Verifica l'applicazione. La modifica visibile dal template dell'applicazione predefinito che era stato distribuito alla creazione dell'applicazione starter mostrata in seguito, dimostra che la distribuzione dell'applicazione a IBM Cloud Platform ha avuto esito positivo.

   

Crea un ramo Git

Ora, devi creare un ramo per l'ambiente di sviluppo locale da utilizzare con la tua fase di build di IBM Cloud Platform Delivery Pipeline:

1. Se si utilizza GitHub Desktop, fare clic sull'icona del ramo; viene richiesto di inserire un nome per il ramo. Questo esempio utilizza 'local-dev come nome.

   

2. Dopo aver creato il ramo, GitHub confronta i file locali sul ramo Local-dev con i file del repository sul ramo predefinito e segnala Nessuna modifica locale. Puoi ora fare clic su Publish per aggiungere il ramo creato sul tuo repository locale al tuo repository GitHub (come mostrato nella figura 5).

   

Ora che il ramo Local-dev è stato pubblicato nel repo 'GitHub della vostra catena di strumenti, lo stadio di compilazione della vostra piattaforma 'IBM Cloud 'Delivery Pipeline verrà attivato, seguito dallo stadio di distribuzione, ogni volta che vi si invia un commit. Non è necessario distribuire l'applicazione dalla CLI, poiché la distribuzione è stata integrata direttamente nel flusso di lavoro.

Impostazione delle credenziali di archiviazione

Devi configurare le credenziali Object Storage per la tua applicazione web, nonché un 'bucket' dove saranno archiviate e richiamate le immagini. La chiave API che verrà creata avrà bisogno delle credenziali HMAC di 'Object Storage, definite da 'Credenziali di servizio. I termini " access_key_id e " secret_access_key possono essere riconosciuti come un account AWS e un file di credenziali che contiene già le voci " aws_access_key_id e " aws_secret_access_key.

Dopo aver completato la creazione di una chiave API, scaricato e copiato le credenziali HMAC, completa la seguente procedura:

1. Nell'ambiente di sviluppo locale, inserire le credenziali nel percorso Windows %USERPROFILE%\\.aws\\credentials. Per gli utenti Mac/Linux, le credenziali devono essere inserite in ~/.aws/credentials). L'esempio mostra il contenuto di un tipico file di credenziali.

   [default]
   aws_access_key_id = {access_key_id}
   aws_secret_access_key = {secret_access_key}
   

2. Nella pagina web dell'applicazione creata utilizzando il comando CLI sulla piattaforma IBM Cloud Definire le credenziali necessarie come variabili d'ambiente secondo le migliori pratiche di sviluppo, accedendo alla piattaforma IBM Cloud E selezionare la propria applicazione, 'webapplication. Dalle schede, fare clic su Runtime.

3. Nella finestra Runtime, fare clic su Variabili d'ambiente all'inizio della pagina e scorrere fino alla sezione Definiti dall'utente, che consente di aggiungere le variabili.

4. Aggiungete due variabili: una con il valore del vostro 'access_key_id, usando 'AWS_ACCESS_KEY_ID come nome della chiave, e un'altra con il valore della vostra chiave di accesso segreta, chiamata 'AWS_SECRET_ACCESS_KEY. Queste variabili e i loro rispettivi valori sono utilizzati dall'applicazione per l'autenticazione con l'istanza di Object Storage quando eseguita su IBM Cloud Platform (vedi la figura 6). Quando hai terminato con le voci, fai clic su Save e IBM Cloud Platform riavvierà automaticamente l'applicazione al tuo posto.

   

Successivamente, oltre al Object Storage Portal per la tua istanza del servizio, aggiungi un bucket per contenere le tue immagini. Questo scenario utilizza il bucket denominato 'web-images.

Progettazione dell'applicazione

Esistono due attività principali che un utente dovrebbe poter effettuare con l'applicazione web della galleria di immagini semplice:

• Caricare le immagini da un browser web nel bucket Object Storage.
• Visualizzare le immagini nel bucket Object Storage in un browser web.

La seguente procedura si focalizza su come soddisfare queste due funzioni dimostrative invece di creare un'applicazione completamente sviluppata a livello di produzione. La distribuzione di questa esercitazione e lasciarla esposta e in esecuzione significa che chiunque trova l'applicazione può eseguire le stesse azioni: caricare i file sul tuo bucket IBM Cloud Object Storage e visualizzare tutte le immagini JPG già presenti nei loro browser.

Sviluppo dell'applicazione

Nel file 'package.json, all'interno dell'oggetto scripts, si vede come viene definito "start". Questo file viene utilizzato da IBM Cloud Platform per far sapere a Node di eseguire app.js ogni volta che viene avviata l'applicazione. Utilizzatela anche per testare l'applicazione in locale. Guardate il file principale dell'applicazione, che si chiama 'app.js. Questo è il codice che si è detto a Node.js di elaborare per primo quando si avvia l'applicazione con il comando 'npm start (o 'nodemon).

{
    "scripts": {
      "start": "node app.js"
    }
}

Il file app.js utilizza il nodo per caricare i moduli necessari per iniziare. Il framework Express crea l'applicazione come un singleton semplice denominato app. L'esempio termina (tralasciando per ora la maggior parte del codice) dicendo all'applicazione di ascoltare sulla porta assegnata e su una proprietà dell'ambiente, o su 3000 per impostazione predefinita. Quando si avvia con successo all'inizio, stampa un messaggio con l'URL del server sulla console.

var express = require('express');
var cfenv = require('cfenv');
var bodyParser = require('body-parser');
var app = express();
//...

// start server on the specified port and binding host
var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("To view your app, open this link in your browser: http://localhost:" + port);
});
//...

Vediamo come definire un percorso e le viste. La prima riga di codice indica al framework Express di utilizzare la cartella public per servire i file statici, che comprendono le immagini statiche e i fogli di stile utilizzati. Le righe successive indicano all'applicazione dove trovare i modelli delle viste nella cartella 'src/views e impostano il motore delle viste come EJS. Inoltre, il framework utilizza il middleware body-parser per esporre i dati delle richieste in arrivo all'applicazione come JSON. Nelle ultime righe dell'esempio, l'applicazione express risponde a tutte le richieste GET in arrivo all'URL dell'applicazione rendendo il modello di vista 'index.ejs.

//...
// serve the files out of ./public as your main files
app.use(express.static('public'));
app.set('views', './src/views');
app.set('view engine', 'ejs');
app.use(bodyParser.json());

var title = 'COS Image Gallery Web Application';
// Serve index.ejs
app.get('/', function (req, res) {
  res.render('index', {status: '', title: title});
});

//...

La seguente figura mostra di quale template di visualizzazione di indice viene eseguito il rendering e inviato al browser. Se si sta utilizzando nodemon, è possibile che il browser sia stato aggiornato quando sono state salvate le modifiche.

I nostri modelli di vista condividono il codice HTML tra i tag <head>...</head>; in modo da posizionarlo in un modello di inclusione separato. Questo modello (head-inc.ejs) contiene uno scriptlet (un binding per una variabile JavaScript ) per il titolo della pagina alla riga 1. La variabile 'title viene impostata in 'app.js e passata come dato per il modello di vista nella riga sottostante. Altrimenti, si utilizzano semplicemente alcuni indirizzi di CDN per prelevare 'Bootstrap CSS, 'Bootstrap JavaScript e 'JQuery. Infine, aggiungere un file styles.css statico personalizzato dalla directory pubic/stylesheets.

<title><%=title%></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous">
</script>

<link rel="stylesheet" href="stylesheets/style.css">

Il corpo della vista indice contiene le schede di navigazione in stile bootstrap e il modulo di caricamento in un layout di base fornito dagli stili CSS inclusi in bootstrap.

Considerate queste due specifiche per la vostra applicazione:

• Impostare il metodo del modulo su " POST e il tipo di codifica dei dati del modulo come multipart/form-data alla riga 24. Per l'azione del modulo, inviare i dati dal modulo all'applicazione sulla rotta "/". In seguito, fare un lavoro supplementare nella logica del router per gestire le richieste 'POST a quella rotta.

• Visualizza un feedback sullo stato del tentativo di caricamento di un file per l'utente. Questo feedback viene passato alla vista in una variabile chiamata "status" e viene visualizzato dopo il modulo di caricamento.

<!DOCTYPE html>
<html>

<head>
    <%- include('head-inc'); %>
</head>

<body>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="/">Home</a></li>
    <li role="presentation"><a href="/gallery">Gallery</a></li>
</ul>
<div class="container">
    <h2>Upload Image to IBM Cloud Object Storage</h2>
    <div class="row">
        <div class="col-md-12">
            <div class="container" style="margin-top: 20px;">
                <div class="row">

                    <div class="col-lg-8 col-md-8 well">

                        <p class="wellText">Upload your JPG image file here</p>

                        <form method="post" enctype="multipart/form-data" action="/">
                            <p><input class="wellText" type="file" size="100px" name="img-file" /></p>
                            <br/>
                            <p><input class="btn btn-danger" type="submit" value="Upload" /></p>
                        </form>

                        <br/>
                        <span class="notice"><%=status%></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

Prendiamo un momento per tornare a app.js. L'esempio imposta le rotte Express per gestire le richieste extra che vengono fatte all'applicazione. Il codice per questi metodi di instradamento si trova in due file nella cartella './src/routes del progetto:

• imageUploadRoutes.js: Questo file gestisce ciò che accade quando l'utente seleziona un'immagine e fa clic su Carica.

• galleryRoutes.js: questo file gestisce le richieste quando l'utente fa clic sulla scheda sulla scheda Galleria per richiedere la vista 'imageGallery.

//...
var imageUploadRoutes = require('./src/routes/imageUploadRoutes')(title);
var galleryRouter = require('./src/routes/galleryRoutes')(title);

app.use('/gallery', galleryRouter);
app.use('/', imageUploadRoutes);

//...

Caricamento di immagini

Consultare il codice di imageUploadRoutes.js. È necessario creare un'istanza di un nuovo router express e nominarlo 'imageUploadRoutes all'inizio. Successivamente, creare una funzione che restituisca 'imageUploadRoutes e assegnarla a una variabile chiamata 'router. Una volta completata, la funzione deve essere esportata come modulo per renderla accessibile al framework e al codice principale in 'app.js. Per separare la logica di instradamento dalla logica di caricamento è necessario un file controller chiamato 'galleryController.js. Poiché questa logica è dedicata all'elaborazione della richiesta in arrivo e alla fornitura della risposta appropriata, inserirla in questa funzione e salvarla nella cartella './src/controllers.

L'istanza del router del framework Express è il luogo in cui il " imageUploadRoutes è progettato per instradare le richieste per il percorso principale dell'applicazione ("/") quando viene utilizzato il metodo HTTP " POST. All'interno del metodo 'post del vostro 'imageUploadRoutes, utilizzate il middleware dei moduli 'multer e 'multer-s3 che è esposto dal 'galleryController come 'upload. Il middleware prende i dati e il file dal modulo di caricamento 'POST, li elabora ed esegue una funzione di callback. Nella funzione di callback, verificare che sia stato ottenuto un codice di stato HTTP di '200 e che sia stato caricato almeno un file nell'oggetto della richiesta. In base a queste condizioni, impostare il feedback nella variabile 'status e rendere il modello della vista indice con il nuovo stato.

var express = require('express');
var imageUploadRoutes = express.Router();
var status = '';

var router = function(title) {

    var galleryController =
        require('../controllers/galleryController')(title);

    imageUploadRoutes.route('/')
    	.post(
    		galleryController.upload.array('img-file', 1), function (req, res, next) {
                if (res.statusCode === 200 && req.files.length > 0) {
                    status = 'uploaded file successfully';
                }
                else {
                    status = 'upload failed';
                }
                res.render('index', {status: status, title: title});
            });

    return imageUploadRoutes;
};

module.exports = router;

In confronto, il codice del " galleryRouter è un modello di semplicità. Seguire lo stesso schema di 'imageUploadRouter e richiedere 'galleryController sulla prima riga della funzione, quindi impostare il percorso. La differenza principale è che si instrada la richiesta HTTP 'GET anziché 'POST e si invia tutto l'output nella risposta da 'getGalleryImages, che è esposto da 'galleryController nell'ultima riga dell'esempio.

var express = require('express');
var galleryRouter = express.Router();

var router = function(title) {

    var galleryController =
        require('../controllers/galleryController')(title);

    galleryRouter.route('/')
        .get(galleryController.getGalleryImages);

    return galleryRouter;
};
module.exports = router;

Successivamente, guarda il controller per la galleria.

Nota come hai configurato il caricamento multer, che tronca del codice che ignori per ora. Sono necessari i moduli 'ibm-cos-sdk, 'multer e 'multer-s3. Il codice mostra come configurare un oggetto S3 che punta a un endpoint server Object Storage. Per semplicità, si impostano staticamente valori come l'indirizzo dell'endpoint, la regione e il bucket, ma potrebbero essere facilmente referenziati da una variabile d'ambiente o da un file di configurazione JSON.

Definire upload in imageUploadRouter creando una nuova istanza multer con storage come unica proprietà. Questa proprietà indica al 'multer dove inviare il file dal 'multipart/form-data. Poiché la piattaforma IBM Cloud utilizza un'implementazione dell'API S3 Utilizza un'implementazione dell'API S3, impostare l'archiviazione come un oggetto 's3-multer. Questo oggetto s3-multer contiene una proprietà s3 assegnata all'oggetto s3. Esiste anche una proprietà bucket assegnata alla variabile myBucket, a cui viene assegnato il valore web-images. L'oggetto 's3-multer ora ha tutti i dati necessari per caricare i file nel secchio Object Storage quando riceve i dati dal modulo di caricamento. Il nome (o la chiave) dell'oggetto caricato è il nome file originale.

Utilizzare una data / ora come parte del nome file per mantenere l'univocità del nome file.

var galleryController = function(title) {

    var aws = require('ibm-cos-sdk');
    var multer = require('multer');
    var multerS3 = require('multer-s3');

    var ep = new aws.Endpoint('s3.us-south.cloud-object-storage.appdomain.cloud');
    var s3 = new aws.S3({endpoint: ep, region: 'us-south-1'});
    var myBucket = 'web-images';

    var upload = multer({
        storage: multerS3({
            s3: s3,
            bucket: myBucket,
            acl: 'public-read',
            metadata: function (req, file, cb) {
                cb(null, {fieldName: file.fieldname});
            },
            key: function (req, file, cb) {
                console.log(file);
                cb(null, file.originalname);
            }
        })
    });

    var getGalleryImages = function (req, res) { /* ... shown below ... */ };

    return {
        getGalleryImages: getGalleryImages,
        upload: upload
    };
};

module.exports = galleryController;

Per un test locale, un'attività utile è di visualizzare a schermo l'oggetto file nella console, console.log(file). Eseguire un test locale del modulo di caricamento e mostrare l'output del log della console del file.

{ fieldname: 'img-file',
originalname: 'Chrysanthemum.jpg',
encoding: '7bit',
mimetype: 'image/jpeg' }

Il feedback del callback dichiara che l'applicazione ha "caricato correttamente il file" quando è stato eseguito il test.

Visualizzazione e richiamo dell'immagine

Ricordiamo che in 'app.js, la riga di codice 'app.use('/gallery', galleryRouter); indica al framework express di usare quel router quando viene richiesto il percorso '/gallery. Tale router utilizza galleryController.js, definisce la funzione getGalleryImages, la firma della quale è stata precedentemente visualizzata. Utilizzando lo stesso oggetto 's3 impostato per la funzione di caricamento delle immagini, richiamare la funzione denominata 'listObjectsV2. Questa funzione restituisce i dati dell'indice che definiscono ciascuno degli oggetti del bucket. Per visualizzare le immagini all'interno dell'HTML, è necessario un URL immagine per ogni immagine JPEG nel secchio 'web-images da visualizzare nel modello di vista. La chiusura con l'oggetto dati restituito da 'listObjectsV2 contiene metadati su ogni oggetto del bucket.

Il codice esegue il loop di 'bucketContents alla ricerca di qualsiasi chiave di oggetto che finisca con ".jpg" e crea un parametro da passare alla funzione S3 'getSignedUrl. Questa funzione restituisce un URL firmato per qualsiasi oggetto quando si forniscono il nome del bucket e la chiave dell'oggetto. Nella funzione di callback, salvare ogni URL in un array e passarlo al metodo di risposta del HTTP Server 'res.render come valore di una proprietà chiamata 'imageUrls.

//...

    var getGalleryImages = function (req, res) {
        var params = {Bucket: myBucket};
        var imageUrlList = [];

        s3.listObjectsV2(params, function (err, data) {
            if (data) {
                var bucketContents = data.Contents;
                for (var i = 0; i < bucketContents.length; i++) {
                    if (bucketContents[i].Key.search(/.jpg/i) > -1) {
                        var urlParams = {Bucket: myBucket, Key: bucketContents[i].Key};
                        s3.getSignedUrl('getObject', urlParams, function (err, url) {
                            imageUrlList.push(url);
                        });
                    }
                }
            }
            res.render('galleryView', {
                title: title,
                imageUrls: imageUrlList
            });
        });
    };

//...

L'ultimo esempio di codice mostra il corpo del modello galleryView con il codice necessario per visualizzare le tue immagini. Ottenere l'array imageUrls dal metodo res.render() e iterare su una coppia di tag <div>...</div> nidificati. Ciascuno invia una richiesta GET per l'immagine quando viene richiesto l'instradamento /gallery.

<!DOCTYPE html>
<html>

<head>
    <%- include('head-inc'); %>
</head>

<body>
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="/">Home</a></li>
        <li role="presentation" class="active"><a href="/gallery">Gallery</a></li>
    </ul>
    <div class="container">
        <h2>IBM COS Image Gallery</h2>

        <div class="row">
            <% for (var i=0; i < imageUrls.length; i++) { %>
                <div class="col-md-4">
                    <div class="thumbnail">
                            <img src="<%=imageUrls[i]%>" alt="Lights" style="width:100%">
                    </div>
                </div>
            <% } %>
        </div>
    </div>
</body>

</html>

Verifica l'applicazione localmente da http://localhost:3000/gallery e visualizza la tua immagine.

Commit a Git

Ora che le funzioni di base dell'applicazione funzionano, eseguite il commit del codice nel vostro repo locale e poi inviatelo a GitHub. Utilizzando GitHub Desktop, fare clic su Modifiche (vedere Figura 11), digitare un riepilogo delle modifiche nel campo Riepilogo e quindi fare clic su Impegna in Local-dev.

Quando fai clic su sync, il tuo commit viene inviato al ramo local-dev remoto. Questa azione avvia le fasi di creazione e distribuzione in Delivery Pipeline.