Creare un'applicazione Web Node.js con Azure Cosmos DBBuild a Node.js web application using Azure Cosmos DB

Questa esercitazione relativa a Node.js illustra come usare Azure Cosmos DB e l'API di DocumentDB per archiviare e accedere ai dati da un'applicazione Node.js Express ospitata in Siti Web di Azure.This Node.js tutorial shows you how to use Azure Cosmos DB and the DocumentDB API to store and access data from a Node.js Express application hosted on Azure Websites. Verrà creata una semplice applicazione di gestione delle attività basata su Web, un'app ToDo, che consente di creare, recuperare e completare le attività.You build a simple web-based task-management application, a ToDo app, that allows creating, retrieving, and completing tasks. Le attività vengono memorizzate come documenti JSON in Azure Cosmos DB.The tasks are stored as JSON documents in Azure Cosmos DB. Questa esercitazione illustra la creazione e la distribuzione dell'app e fornisce informazioni dettagliate sulle operazioni in ogni frammento di codice.This tutorial walks you through the creation and deployment of the app and explains what's happening in each snippet.

Schermata dell'applicazione My Todo List creata in questa esercitazione Node.js

Non si ha tempo di completare l'esercitazione e si preferisce ottenere semplicemente la soluzione completa.Don't have time to complete the tutorial and just want to get the complete solution? Non è un problema, è possibile ottenere la soluzione di esempio completa da GitHub.Not a problem, you can get the complete sample solution from GitHub. Per istruzioni su come eseguire l'app, vedere il file Readme.Just read the Readme file for instructions on how to run the app.

PrerequisitiPrerequisites

Suggerimento

Questa esercitazione Node.js presuppone già una certa esperienza nell'uso di Node.js e di Siti Web di Azure.This Node.js tutorial assumes that you have some prior experience using Node.js and Azure Websites.

Prima di seguire le istruzioni di questo articolo, verificare che siano disponibili gli elementi seguenti:Before following the instructions in this article, you should ensure that you have the following:

Passaggio 1: Creare un account del database di Azure Cosmos DBStep 1: Create an Azure Cosmos DB database account

Creare prima di tutto un account Azure Cosmos DB.Let's start by creating an Azure Cosmos DB account. Se si ha già un account o si usa l'emulatore Azure Cosmos DB per questa esercitazione, è possibile andare al Passaggio 2: Creare una nuova applicazione Node.js.If you already have an account or if you are using the Azure Cosmos DB Emulator for this tutorial, you can skip to Step 2: Create a new Node.js application.

  1. In una nuova finestra del browser accedere al portale di Azure.In a new browser window, sign in to the Azure portal.
  2. Fare clic su Nuovo > Database > Azure Cosmos DB.Click New > Databases > Azure Cosmos DB.

    Riquadro Database nel portale di Azure

  3. Nella pagina Nuovo account immettere le impostazioni per il nuovo account Azure Cosmos DB.In the New account page, enter the settings for the new Azure Cosmos DB account.

    ImpostazioneSetting Valore consigliatoSuggested value DescrizioneDescription
    IDID Immettere un nome univocoEnter a unique name Immettere un nome univoco per identificare l'account Azure Cosmos DB.Enter a unique name to identify this Azure Cosmos DB account. Poiché alI'ID fornito viene aggiunto documents.azure.com per creare l'URI, usare un ID univoco ma facilmente identificabile.Because documents.azure.com is appended to the ID that you provide to create your URI, use a unique but identifiable ID.

    L'ID può contenere solo lettere minuscole, numeri e il segno meno (-) e deve avere una lunghezza compresa tra 3 e 50 caratteri.The ID can contain only lowercase letters, numbers, and the hyphen (-) character, and it must contain 3 to 50 characters.
    APIAPI SQLSQL L'API determina il tipo di account da creare.The API determines the type of account to create. Azure Cosmos DB offre cinque API per soddisfare le esigenze dell'applicazione, ovvero SQL (database di documenti) Gremlin (grafo), MongoDB, SQL (database di documenti), Tabella di Azure e Cassandra, per ognuna delle quali è attualmente necessario un account separato.Azure Cosmos DB provides five APIs to suits the needs of your application: SQL (document database), Gremlin (graph database), MongoDB (document database), Azure Table, and Cassandra, each which currently require a separate account.

    Selezionare SQL perché in questo avvio rapido si sta creando un database di documenti su cui è possibile eseguire query tramite la sintassi SQL e a cui è possibile accedere tramite l'API DocumentDB.Select SQL because in this quickstart you are creating a document database that is queryable using SQL syntax and accessible with the DocumentDB API.

    Altre informazioni sull'API di DocumentDBLearn more about the DocumentDB API
    SottoscrizioneSubscription Sottoscrizione in usoYour subscription Selezionare la sottoscrizione di Azure da usare per l'account Azure Cosmos DB.Select Azure subscription that you want to use for this Azure Cosmos DB account.
    Gruppo di risorseResource Group Creare un nuovo gruppo di risorseCreate new

    Immettere quindi lo stesso nome univoco specificato sopra in IDThen enter the same unique name as provided above in ID
    Selezionare Crea nuovo, quindi immettere il nome di un nuovo gruppo di risorse per l'account.Select Create New, then enter a new resource-group name for your account. Per semplicità si può usare lo stesso nome usato come ID.For simplicity, you can use the same name as your ID.
    PercorsoLocation Selezionare l'area più vicina agli utentiSelect the region closest to your users Selezionare la posizione geografica in cui ospitare l'account Azure Cosmos DB.Select geographic location in which to host your Azure Cosmos DB account. Usare la località più vicina agli utenti per offrire loro la massima velocità di accesso ai dati.Use the location that's closest to your users to give them the fastest access to the data.
    Abilita ridondanza geograficaEnable geo-redundancy Lasciare vuotoLeave blank Consente di creare una versione replicata del database in una seconda area abbinata.This creates a replicated version of your database in a second (paired) region. Lasciare vuoto.Leave this blank.
    Aggiungi al dashboardPin to dashboard SelezionareSelect Selezionare questa casella per aggiungere il nuovo account di database al dashboard del portale e accedervi più facilmente.Select this box so that your new database account is added to your portal dashboard for easy access.

    Fare quindi clic su Crea.Then click Create.

    Pannello Nuovo account per Azure Cosmos DB

  4. La creazione dell'account richiede alcuni minuti,The account creation takes a few minutes. Durante la creazione dell'account il portale visualizza il riquadro Deploying Azure Cosmos DB (Distribuzione di Azure Cosmos DB) a destra, quindi potrebbe essere necessario scorrere a destra del dashboard per visualizzare il riquadro.During account creation the portal displays the Deploying Azure Cosmos DB tile on the right side, you may need to scroll right on your dashboard to see the tile. È presente anche un indicatore di stato nella parte superiore della schermata.There is also a progress bar displayed near the top of the screen. È possibile esaminare lo stato di avanzamento nelle due aree.You can watch either area for progress.

    Riquadro Notifiche del portale di Azure

    Al termine della creazione dell'account verrà visualizzata la pagina L'account Azure Cosmos DB è stato creato.Once the account is created, the Congratulations! Your Azure Cosmos DB account was created page is displayed.

Passare ora al pannello dell'account Cosmos DB e fare clic su Chiavi, perché questi valori verranno usati nell'applicazione Web che verrà creata successivamente.Now navigate to the Cosmos DB account blade, and click Keys, as we use these values in the web application we create next.

Screenshot del portale di Azure, che mostra un account Cosmos DB, con il pulsante Chiavi evidenziato nel pannello dell'account Cosmos DB e i valori di URI, CHIAVE PRIMARIA e CHIAVE SECONDARIA evidenziati nel pannello Chiavi

Passaggio 2: Creare una nuova applicazione Node.jsStep 2: Create a new Node.js application

A questo punto si creerà un progetto base Node.js Hello World usando il framework Express .Now let's learn to create a basic Hello World Node.js project using the Express framework.

  1. Aprire il terminale preferito, ad esempio il prompt dei comandi di Node.js.Open your favorite terminal, such as the Node.js command prompt.
  2. Passare alla directory in cui si vuole archiviare la nuova applicazione.Navigate to the directory in which you'd like to store the new application.
  3. Usare il generatore di Express per generare una nuova applicazione denominata todo.Use the express generator to generate a new application called todo.

     express todo
    
  4. Aprire la nuova directory todo e installare le dipendenze.Open your new todo directory and install dependencies.

     cd todo
     npm install
    
  5. Eseguire la nuova applicazione.Run your new application.

     npm start
    
  6. È possibile visualizzare la nuova applicazione passando con il browser all'indirizzo http://localhost:3000.You can view your new application by navigating your browser to http://localhost:3000.

    Informazioni su Node.js - schermata dell'applicazione Hello World in una finestra del browser

    Per arrestare l'applicazione, premere quindi CTRL+C nella finestra del terminale e fare clic su y per interrompere il processo batch.Then, to stop the application, press CTRL+C in the terminal window and then click y to terminate the batch job.

Passaggio 3: Installare moduli aggiuntiviStep 3: Install additional modules

Il file package.json è uno di quelli creati nella radice del progetto.The package.json file is one of the files created in the root of the project. Questo file contiene un elenco di moduli aggiuntivi necessari per l'applicazione Node.js.This file contains a list of additional modules that are required for your Node.js application. In seguito, quando si distribuirà questa applicazione in un sito Web di Azure, il file verrà usato per determinare quali moduli devono essere installati in Azure per supportare l'applicazione.Later, when you deploy this application to Azure Websites, this file is used to determine which modules need to be installed on Azure to support your application. Per l'esercitazione, è necessario installare altri due pacchetti.We still need to install two more packages for this tutorial.

  1. Tornare al terminale e installare il modulo async tramite npm.Back in the terminal, install the async module via npm.

     npm install async --save
    
  2. Installare il modulo documentdb tramite npm.Install the documentdb module via npm. Questo è il modulo in cui risiedono tutte le funzionalità avanzate di Azure Cosmos DB.This is the module where all the Azure Cosmos DB magic happens.

     npm install documentdb --save
    
  3. Con un rapido controllo del file package.json dell'applicazione si dovrebbero notare i moduli aggiuntivi.A quick check of the package.json file of the application should show the additional modules. Questo file indica ad Azure quali pacchetti scaricare e installare durante l'esecuzione dell'applicazione.This file will tell Azure which packages to download and install when running your application. Dovrebbe essere simile all'esempio seguente.It should resemble the example below.

     {
       "name": "todo",
       "version": "0.0.0",
       "private": true,
       "scripts": {
         "start": "node ./bin/www"
       },
       "dependencies": {
         "async": "^2.1.4",
         "body-parser": "~1.15.2",
         "cookie-parser": "~1.4.3",
         "debug": "~2.2.0",
         "documentdb": "^1.10.0",
         "express": "~4.14.0",
         "jade": "~1.11.0",
         "morgan": "~1.7.0",
         "serve-favicon": "~2.3.0"
       }
     }
    

    Ciò indicherà a Node (e più avanti ad Azure) che l'applicazione dipende da questi moduli aggiuntivi.This tells Node (and Azure later) that your application depends on these additional modules.

Passaggio 4: Uso del servizio Azure Cosmos DB in un'applicazione NodeStep 4: Using the Azure Cosmos DB service in a node application

Al termine delle operazioni iniziali di installazione e configurazione, si può passare allo scopo effettivo di questa esercitazione, che consiste nello scrivere qualche riga di codice usando Azure Cosmos DB.That takes care of all the initial setup and configuration, now let’s get down to why we’re here, and that’s to write some code using Azure Cosmos DB.

Creare il modelloCreate the model

  1. Nella directory del progetto creare una nuova directory denominata models nella stessa directory del file package.json.In the project directory, create a new directory named models in the same directory as the package.json file.
  2. Nella directory models (modelli) creare un nuovo file denominato taskDao.js.In the models directory, create a new file named taskDao.js. Questo file conterrà il modello per le attività create dall'applicazione.This file will contain the model for the tasks created by our application.
  3. Nella stessa directory models (modelli) creare un altro nuovo file denominato docdbUtils.js.In the same models directory, create another new file named docdbUtils.js. Questo file conterrà porzioni di codice utile e riutilizzabile, che verrà usato nell'applicazione.This file will contain some useful, reusable, code that we will use throughout our application.
  4. Copiare il codice seguente in docdbUtils.jsCopy the following code in to docdbUtils.js

     var DocumentDBClient = require('documentdb').DocumentClient;
    
     var DocDBUtils = {
         getOrCreateDatabase: function (client, databaseId, callback) {
             var querySpec = {
                 query: 'SELECT * FROM root r WHERE r.id= @id',
                 parameters: [{
                     name: '@id',
                     value: databaseId
                 }]
             };
    
             client.queryDatabases(querySpec).toArray(function (err, results) {
                 if (err) {
                     callback(err);
    
                 } else {
                     if (results.length === 0) {
                         var databaseSpec = {
                             id: databaseId
                         };
    
                         client.createDatabase(databaseSpec, function (err, created) {
                             callback(null, created);
                         });
    
                     } else {
                         callback(null, results[0]);
                     }
                 }
             });
         },
    
         getOrCreateCollection: function (client, databaseLink, collectionId, callback) {
             var querySpec = {
                 query: 'SELECT * FROM root r WHERE r.id=@id',
                 parameters: [{
                     name: '@id',
                     value: collectionId
                 }]
             };               
    
             client.queryCollections(databaseLink, querySpec).toArray(function (err, results) {
                 if (err) {
                     callback(err);
    
                 } else {        
                     if (results.length === 0) {
                         var collectionSpec = {
                             id: collectionId
                         };
    
                         client.createCollection(databaseLink, collectionSpec, function (err, created) {
                             callback(null, created);
                         });
    
                     } else {
                         callback(null, results[0]);
                     }
                 }
             });
         }
     };
    
     module.exports = DocDBUtils;
    
  5. Salvare e chiudere il file docdbUtils.js .Save and close the docdbUtils.js file.

  6. All'inizio del file taskDao.js aggiungere il codice seguente per fare riferimento a DocumentDBClient e docdbUtils.js creati in precedenza:At the beginning of the taskDao.js file, add the following code to reference the DocumentDBClient and the docdbUtils.js we created above:

     var DocumentDBClient = require('documentdb').DocumentClient;
     var docdbUtils = require('./docdbUtils');
    
  7. Quindi, aggiungere il codice per definire ed esportare l'oggetto Task.Next, you will add code to define and export the Task object. Si occupa dell'inizializzazione dell'oggetto Task e della configurazione del database e della raccolta documenti che verranno usati.This is responsible for initializing our Task object and setting up the Database and Document Collection we will use.

     function TaskDao(documentDBClient, databaseId, collectionId) {
       this.client = documentDBClient;
       this.databaseId = databaseId;
       this.collectionId = collectionId;
    
       this.database = null;
       this.collection = null;
     }
    
     module.exports = TaskDao;
    
  8. Aggiungere quindi il codice seguente per definire metodi aggiuntivi nell'oggetto Task che consentano l'interazione con i dati archiviati in Azure Cosmos DB.Next, add the following code to define additional methods on the Task object, which allow interactions with data stored in Azure Cosmos DB.

     TaskDao.prototype = {
         init: function (callback) {
             var self = this;
    
             docdbUtils.getOrCreateDatabase(self.client, self.databaseId, function (err, db) {
                 if (err) {
                     callback(err);
                 } else {
                     self.database = db;
                     docdbUtils.getOrCreateCollection(self.client, self.database._self, self.collectionId, function (err, coll) {
                         if (err) {
                             callback(err);
    
                         } else {
                             self.collection = coll;
                         }
                     });
                 }
             });
         },
    
         find: function (querySpec, callback) {
             var self = this;
    
             self.client.queryDocuments(self.collection._self, querySpec).toArray(function (err, results) {
                 if (err) {
                     callback(err);
    
                 } else {
                     callback(null, results);
                 }
             });
         },
    
         addItem: function (item, callback) {
             var self = this;
    
             item.date = Date.now();
             item.completed = false;
    
             self.client.createDocument(self.collection._self, item, function (err, doc) {
                 if (err) {
                     callback(err);
    
                 } else {
                     callback(null, doc);
                 }
             });
         },
    
         updateItem: function (itemId, callback) {
             var self = this;
    
             self.getItem(itemId, function (err, doc) {
                 if (err) {
                     callback(err);
    
                 } else {
                     doc.completed = true;
    
                     self.client.replaceDocument(doc._self, doc, function (err, replaced) {
                         if (err) {
                             callback(err);
    
                         } else {
                             callback(null, replaced);
                         }
                     });
                 }
             });
         },
    
         getItem: function (itemId, callback) {
             var self = this;
    
             var querySpec = {
                 query: 'SELECT * FROM root r WHERE r.id = @id',
                 parameters: [{
                     name: '@id',
                     value: itemId
                 }]
             };
    
             self.client.queryDocuments(self.collection._self, querySpec).toArray(function (err, results) {
                 if (err) {
                     callback(err);
    
                 } else {
                     callback(null, results[0]);
                 }
             });
         }
     };
    
  9. Salvare e chiudere il file taskDao.js .Save and close the taskDao.js file.

Creare il controllerCreate the controller

  1. Nella directory routes (route) del progetto creare un nuovo file denominato tasklist.js.In the routes directory of your project, create a new file named tasklist.js.
  2. Aggiungere il seguente codice al file tasklist.js.Add the following code to tasklist.js. In questo modo vengono caricati i moduli DocumentDBClient e asincroni usati da tasklist.js.This loads the DocumentDBClient and async modules, which are used by tasklist.js. Viene anche definita la funzione TaskList a cui viene passata un'istanza dell'oggetto Task definito in precedenza:This also defined the TaskList function, which is passed an instance of the Task object we defined earlier:

     var DocumentDBClient = require('documentdb').DocumentClient;
     var async = require('async');
    
     function TaskList(taskDao) {
       this.taskDao = taskDao;
     }
    
     module.exports = TaskList;
    
  3. Continuare ad aggiungere codice al file tasklist.js aggiungendo i metodi showTasks, addTask e completeTasks:Continue adding to the tasklist.js file by adding the methods used to showTasks, addTask, and completeTasks:

     TaskList.prototype = {
         showTasks: function (req, res) {
             var self = this;
    
             var querySpec = {
                 query: 'SELECT * FROM root r WHERE r.completed=@completed',
                 parameters: [{
                     name: '@completed',
                     value: false
                 }]
             };
    
             self.taskDao.find(querySpec, function (err, items) {
                 if (err) {
                     throw (err);
                 }
    
                 res.render('index', {
                     title: 'My ToDo List ',
                     tasks: items
                 });
             });
         },
    
         addTask: function (req, res) {
             var self = this;
             var item = req.body;
    
             self.taskDao.addItem(item, function (err) {
                 if (err) {
                     throw (err);
                 }
    
                 res.redirect('/');
             });
         },
    
         completeTask: function (req, res) {
             var self = this;
             var completedTasks = Object.keys(req.body);
    
             async.forEach(completedTasks, function taskIterator(completedTask, callback) {
                 self.taskDao.updateItem(completedTask, function (err) {
                     if (err) {
                         callback(err);
                     } else {
                         callback(null);
                     }
                 });
             }, function goHome(err) {
                 if (err) {
                     throw err;
                 } else {
                     res.redirect('/');
                 }
             });
         }
     };
    
  4. Salvare e chiudere il file tasklist.js .Save and close the tasklist.js file.

Aggiungere config.jsonAdd config.js

  1. Nella directory del progetto creare un nuovo file denominato config.js.In your project directory create a new file named config.js.
  2. Aggiungere quanto segue a config.json.Add the following to config.js. Definisce le impostazioni e i valori di configurazione necessari per l'applicazione.This defines configuration settings and values needed for our application.

     var config = {}
    
     config.host = process.env.HOST || "[the URI value from the Azure Cosmos DB Keys blade on http://portal.azure.com]";
     config.authKey = process.env.AUTH_KEY || "[the PRIMARY KEY value from the Azure Cosmos DB Keys blade on http://portal.azure.com]";
     config.databaseId = "ToDoList";
     config.collectionId = "Items";
    
     module.exports = config;
    
  3. Nel file config.js aggiornare i valori HOST e AUTH_KEY usando i valori presenti nel pannello Chiavi dell'account Azure Cosmos DB nel portale di Microsoft Azure.In the config.js file, update the values of HOST and AUTH_KEY using the values found in the Keys blade of your Azure Cosmos DB account on the Microsoft Azure portal.
  4. Salvare e chiudere il file config.js .Save and close the config.js file.

Modificare il file app.jsModify app.js

  1. Nella directory del progetto aprire il file app.js .In the project directory, open the app.js file. Questo file è stato creato in precedenza quando è stata creata l'applicazione Web Express.This file was created earlier when the Express web application was created.
  2. Aggiungere il codice seguente all'inizio del file app.jsAdd the following code to the top of app.js

     var DocumentDBClient = require('documentdb').DocumentClient;
     var config = require('./config');
     var TaskList = require('./routes/tasklist');
     var TaskDao = require('./models/taskDao');
    
  3. Questo codice definisce il file di configurazione da usare e procede con la lettura dei valori da questo file in alcune variabili che si useranno a breve.This code defines the config file to be used, and proceeds to read values out of this file into some variables we will use soon.
  4. Sostituire le due righe seguenti nel file app.js :Replace the following two lines in app.js file:

     app.use('/', index);
     app.use('/users', users); 
    

    con il frammento seguente:with the following snippet:

     var docDbClient = new DocumentDBClient(config.host, {
         masterKey: config.authKey
     });
     var taskDao = new TaskDao(docDbClient, config.databaseId, config.collectionId);
     var taskList = new TaskList(taskDao);
     taskDao.init();
    
     app.get('/', taskList.showTasks.bind(taskList));
     app.post('/addtask', taskList.addTask.bind(taskList));
     app.post('/completetask', taskList.completeTask.bind(taskList));
     app.set('view engine', 'jade');
    
  5. Queste righe definiscono una nuova istanza dell'oggetto TaskDao con una nuova connessione a Azure Cosmos DB, usando i valori letti dal file config.js, inizializzano l'oggetto task e quindi associano le azioni modulo ai metodi nel controller TaskList.These lines define a new instance of our TaskDao object, with a new connection to Azure Cosmos DB (using the values read from the config.js), initialize the task object and then bind form actions to methods on our TaskList controller.
  6. Infine, salvare e chiudere il file app.js. La procedura è quasi terminata.Finally, save and close the app.js file, we're just about done.

Passaggio 5: Creare un'interfaccia utenteStep 5: Build a user interface

È ora possibile passare alla realizzazione di un'interfaccia utente che consenta a un utente di interagire con l'applicazione.Now let’s turn our attention to building the user interface so a user can actually interact with our application. L'applicazione Express creata usa Jade come motore di visualizzazione.The Express application we created uses Jade as the view engine. Per altre informazioni su Jade, vedere http://jade-lang.com/.For more information on Jade please refer to http://jade-lang.com/.

  1. Il file layout.jade della directory views viene usato come modello globale per altri file .jade.The layout.jade file in the views directory is used as a global template for other .jade files. In questo passaggio verrà modificato in modo da usare Twitter Bootstrap, un toolkit che semplifica la progettazione di un sito Web di aspetto gradevole.In this step you will modify it to use Twitter Bootstrap, which is a toolkit that makes it easy to design a nice looking website.
  2. Aprire il file layout.jade nella cartella views e sostituire il contenuto con quanto segue:Open the layout.jade file found in the views folder and replace the contents with the following:

    doctype html
    html
      head
        title= title
        link(rel='stylesheet', href='//ajax.aspnetcdn.com/ajax/bootstrap/3.3.2/css/bootstrap.min.css')
        link(rel='stylesheet', href='/stylesheets/style.css')
      body
        nav.navbar.navbar-inverse.navbar-fixed-top
          div.navbar-header
            a.navbar-brand(href='#') My Tasks
        block content
        script(src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js')
        script(src='//ajax.aspnetcdn.com/ajax/bootstrap/3.3.2/bootstrap.min.js')
    

    Ciò in effetti comunica al motore Jade di eseguire il rendering di una parte del codice HTML per l'applicazione e crea un blocco denominato content tramite cui è possibile fornire il layout per le pagine di contenuto.This effectively tells the Jade engine to render some HTML for our application and creates a block called content where we can supply the layout for our content pages.

    Salvare e chiudere il file layout.jade .Save and close this layout.jade file.

  3. Aprire il file index.jade , la visualizzazione che sarà usata dall'applicazione, quindi sostituire il contenuto del file con quanto segue:Now open the index.jade file, the view that will be used by our application, and replace the content of the file with the following:

     extends layout
     block content
        h1 #{title}
        br
    
        form(action="/completetask", method="post")
          table.table.table-striped.table-bordered
            tr
              td Name
              td Category
              td Date
              td Complete
            if (typeof tasks === "undefined")
              tr
                td
            else
              each task in tasks
                tr
                  td #{task.name}
                  td #{task.category}
                  - var date  = new Date(task.date);
                  - var day   = date.getDate();
                  - var month = date.getMonth() + 1;
                  - var year  = date.getFullYear();
                  td #{month + "/" + day + "/" + year}
                  td
                    input(type="checkbox", name="#{task.id}", value="#{!task.completed}", checked=task.completed)
          button.btn.btn-primary(type="submit") Update tasks
        hr
        form.well(action="/addtask", method="post")
          .form-group
            label(for="name") Item Name:
            input.form-control(name="name", type="textbox")
          .form-group
            label(for="category") Item Category:
            input.form-control(name="category", type="textbox")
          br
          button.btn(type="submit") Add item
    

Questo estende il layout e fornisce contenuto per il segnaposto content già visto in precedenza nel file layout.jade.This extends layout, and provides content for the content placeholder we saw in the layout.jade file earlier.

In questo layout sono stati creati due moduli HTML.In this layout we created two HTML forms.

Il primo modulo contiene una tabella per i dati e un pulsante che consente di aggiornare gli elementi mediante la pubblicazione nel metodo /completetask del controller.The first form contains a table for our data and a button that allows us to update items by posting to /completetask method of our controller.

Il secondo modulo contiene due campi di input e un pulsante che consente di creare un nuovo elemento tramite la pubblicazione nel metodo /addtask del controller.The second form contains two input fields and a button that allows us to create a new item by posting to /addtask method of our controller.

Ciò è tutto quanto è necessario per il funzionamento dell'applicazione.This should be all that we need for our application to work.

Passaggio 6: Esecuzione dell'applicazione in localeStep 6: Run your application locally

  1. Per testare l'applicazione nel computer locale, eseguire npm start nel terminale per avviare l'applicazione, quindi aggiornare la pagina http://localhost:3000 del browser.To test the application on your local machine, run npm start in the terminal to start your application, then refresh your http://localhost:3000 browser page. L'aspetto della pagina dovrebbe essere simile all'immagine seguente:The page should now look like the image below:

    Schermata dell'applicazione MyTodo List in una finestra del browser

    Suggerimento

    Se viene visualizzato un errore relativo al rientro nel file layout.jade o nel file index.jade, assicurarsi che le prime due righe in entrambi i file siano giustificate a sinistra, senza spazi.If you receive an error about the indent in the layout.jade file or the index.jade file, ensure that the first two lines in both files is left justified, with no spaces. Se sono presenti spazi davanti alle prime due righe, rimuoverli, salvare entrambi i file e quindi aggiornare la finestra del browser.If there are spaces before the first two lines, remove them, save both files, then refresh your browser window.

  2. Usare i campi Elemento, Nome elemento e Categoria per immettere una nuova attività e quindi fare clic su Aggiungi elementi.Use the Item, Item Name and Category fields to enter a new task and then click Add Item. Viene creato un documento in Azure Cosmos DB con queste proprietà.This creates a document in Azure Cosmos DB with those properties.

  3. La pagina verrà aggiornata e verrà visualizzato il nuovo elemento creato nell'elenco ToDo.The page should update to display the newly created item in the ToDo list.

    Schermata dell'applicazione con un nuovo elemento nell'elenco ToDo

  4. Per completare un'attività, è sufficiente selezionare la casella di controllo nella colonna Complete e quindi fare clic su Update tasks.To complete a task, simply check the checkbox in the Complete column, and then click Update tasks. Viene aggiornato il documento già creato.This updates the document you already created.

  5. Per arrestare l'applicazione, premere CTRL+C nella finestra del terminale e quindi fare clic su Y per interrompere il processo batch.To stop the application, press CTRL+C in the terminal window and then click Y to terminate the batch job.

Passaggio 7: Distribuire il progetto di sviluppo dell'applicazione in Siti Web di AzureStep 7: Deploy your application development project to Azure Websites

  1. Se non è ancora stato fatto, abilitare un repository Git per il sito Web di Azure.If you haven't already, enable a git repository for your Azure Website. Per istruzioni su come eseguire questa operazione, vedere l'argomento Distribuzione dell'archivio Git locale nel servizio app di Azure .You can find instructions on how to do this in the Local Git Deployment to Azure App Service topic.
  2. Aggiungere il sito Web di Azure come Git remoto.Add your Azure Website as a git remote.

     git remote add azure https://username@your-azure-website.scm.azurewebsites.net:443/your-azure-website.git
    
  3. Distribuire mediante push al sito remoto.Deploy by pushing to the remote.

     git push azure master
    
  4. Dopo alcuni secondi, Git completerà la pubblicazione dell'applicazione Web e avvierà un browser in cui sarà possibile visualizzare quanto realizzato in esecuzione in Azure.In a few seconds, git will finish publishing your web application and launch a browser where you can see your handiwork running in Azure!

    Congratulazioni.Congratulations! Si è creata la prima applicazione Web Express Node.js usando Azure Cosmos DB e la si è pubblicata in Siti Web di Azure.You have just built your first Node.js Express Web Application using Azure Cosmos DB and published it to Azure Websites.

    Per scaricare o fare riferimento all'applicazione di riferimento completa per questa esercitazione, vedere GitHub.If you want to download or refer to the complete reference application for this tutorial, it can be downloaded from GitHub.

Passaggi successiviNext steps