Crea un database e un'istanza del servizio IBM Cloudant

Il tuo primo passo è creare un'istanza del servizio IBM Cloudant e quindi creare un database. Puoi crearne uno dalla console o utilizzando i comandi CLI. Inoltre, crea le credenziali del servizio che puoi passare alla tua applicazione.

1. Crea un'istanza del servizio IBM Cloudant, attieniti alla procedura in Introduzione a IBM Cloudant. Denominare l'istanza CloudantFruitCounter. Assicurati di completare l'attività creando le tue credenziali del servizio.
2. Apri il dashboard IBM Cloudant per la tua istanza e fai clic su Crea database.
3. Nella finestra Crea database, immettere il nome database fruitcounter.
4. Non selezionare l'opzione Partizionato e fare clic su Crea.

Verifica la tua applicazione localmente

Prima di creare il tuo codice come un'applicazione in Code Engine, verifica il tuo codice localmente per assicurarti che funzioni correttamente.

1. Richiama le credenziali del servizio IBM Cloudant dal dashboard IBM Cloudant. Per ulteriori informazioni sul richiamo delle credenziali, vedi Creazione delle credenziali del servizio.

2. Imposta le variabili di ambiente con i valori dalle credenziali del servizio.

   export CLOUDANT_URL=<your_url>
   

   export CLOUDANT_APIKEY=<your_key>
   

   export DBNAME="fruitcounter"
   

3. Clonare il repository fruit-counter, passare a questa directory, quindi installare e avviare le dipendenze.

   git clone https://github.com/IBM/CodeEngine
   cd CodeEngine/fruit-counter
   npm install
   npm run start
   

4. Aprire un browser e passare a http://localhost:8080.

5. Scegli la tua frutta preferita e invia la tua scelta. L'app accetta la tua scelta e visualizza un totale parziale di scelte.

Puoi verificare che la tua scelta di frutta sia stata registrata in Cloudant andando al tuo dashboard del database IBM Cloudant.

Vediamo come funziona questo programma.

Questa applicazione è una semplice applicazione Node.js che utilizza due pacchetti principali.

• @ibm-cloud/cloudant per connettersi a IBM Cloudant e per leggere e scrivere i dati.
• Express per creare un server Web che consenta agli utenti di inviare la propria scelta di frutta e visualizzare un totale corrente dei propri dati.

Questa applicazione è composta da due file principali.

server.js

Il file server.js viene utilizzato per eseguire il server web e comunica con Cloudant. Dopo che un utente ha selezionato una scelta di frutta, la pagina di front-end inoltra il valore alla rotta /fruit (vedi sotto), la funzione app.route memorizza un nuovo documento in Cloudant con la scelta di frutta e quindi legge nuovamente il totale parziale per tornare alla pagina di front-end.

L'operazione di lettura utilizza un documento di progetto Cloudant e una vista MapReduce per aggregare documenti. Per ulteriori informazioni sulle viste e sui documenti di progetto, consultare Creazione di viste(MapReduce).

index.html

Il file index.html è la pagina web dell'applicazione che utilizza il framework Vue.js. Quando questa pagina viene caricata, vengono visualizzate le opzioni di frutta disponibili.

Dopo aver inoltrato la tua scelta, il framework effettua una richiesta HTTP POST con la tua selezione di frutta all'instradamento /fruit dell'applicazione. La restituzione dell'applicazione contiene il totale corrente delle scelte di frutta, che viene quindi visualizzato.

Distribuzione della tua applicazione a Code Engine

Ora che comprendi come funziona questa applicazione, puoi distribuirla a Code Engine. Puoi seguire la procedura per distribuire un'applicazione da un repository pubblico, specificando CODEENGINEREPO come tuo repository di immagine. Assicurati di includere le variabili di ambiente che hai raccolto e impostato localmente nel passo 2.

Poiché hai clonato il repository quando hai verificato la tua applicazione localmente, puoi utilizzare il comando app create per creare un'immagine dalla tua origine locale e distribuire la tua applicazione che fa riferimento a questa immagine generata.

1. Esegui il comando app create. È necessario fornire un nome per l'applicazione e l'ubicazione del codice origine. Il seguente esempio crea un'applicazione denominata myfruitcounter che utilizza la strategia di docker e fornisce l'ubicazione per il codice sorgente nella directory corrente (.). Devi anche impostare le variabili di ambiente per il collegamento a Cloudant.

   ibmcloud ce app create --name myfruitcounter --build-source . --strategy dockerfile --env CLOUDANT_URL=<your_url> --env CLOUDANT_APIKEY=<your_key> --env DBNAME=fruitcounter  
   

   Output di esempio

   Creating application 'myfruitcounter'...
   Packaging files to upload from source path '.'...
   Submitting build run 'myfruitcounter-run-220727-142949868'...
   Creating image 'private.us.icr.io/ce--6ef04-n2lgvg2l59v/app-myfruitcounter:220727-1929-y8ej0'...
   Waiting for build run to complete...
   Build run status: 'Running'
   Build run completed successfully.
   Run 'ibmcloud ce buildrun get -n myfruitcounter-run-220727-142949868' to check the build run status.
   Waiting for application 'myfruitcounter' to become ready.
   Configuration 'myfruitcounter' is waiting for a Revision to become ready.
   Ingress has not yet been reconciled.
   Waiting for load balancer to be ready.
   Run 'ibmcloud ce application get -n myfruitcounter' to check the application status.
   OK                                                
   
   https://myfruitcounter.n2lfrg2876v.us-south.codeengine.appdomain.cloud
   

2. Verifica l'applicazione aprendo l'URL fornito per l'applicazione di selezione della frutta. Scegli la tua frutta preferita e invia. Viene visualizzato il totale parziale delle scelte di frutta. È possibile aggiornare l'applicazione e scegliere un altro frutto. L'aggiunta viene visualizzata nel totale parziale.