Midwest JS Project Source on Full Stack Node Development, Available

En agosto participé en Medio Oeste JS ubicado en Minneapolis, Minnesota. Como ya sabrás, soy un gran fan del desarrollo de aplicaciones completas con JavaScript. Esto es exactamente lo que había presentado en la conferencia.

Mi sesión fue muy concurrida y muchos desarrolladores aprendieron a utilizar Node.js con Couchbase para desarrollar una API RESTful, y Angular como capa de cara al cliente.

Como prometí, voy a revisar el material que repasé durante la presentación para que los conceptos y el código puedan reproducirse y ampliarse.

De cara al futuro, se supone que tienes Servidor Couchbase, Node.jsy el Marco iónico CLI instalado y configurado. Couchbase será la base de datos NoSQL, Node.js impulsará nuestro backend, y Ionic Framework nos dará un frontend web impulsado por Angular.

El proyecto creado en Midwest JS permitía almacenar información sobre videoconsolas y videojuegos para varias consolas. Esto demostró el uso de CRUD así como las relaciones entre documentos NoSQL y cómo Couchbase lo hace fácil.

Creación de Node.js con Couchbase NoSQL Backend

Antes de comenzar el desarrollo, necesitamos crear un nuevo proyecto Node.js. Desde la línea de comandos, ejecuta lo siguiente:

npm init -y
npm install couchbase express body-parser uuid cors --save

1 2	npm init -y npm instale couchbase express cuerpo-analizador uuid cors --guardar

El comando anterior creará un proyecto paquete.json e instalar las dependencias de nuestro proyecto. El cors nos permitirá usar Node y Angular localmente en dos puertos diferentes sin obtener errores de compartición de recursos entre orígenes. El uuid nos permitirá generar cadenas únicas para utilizarlas como claves de documento. La dirección body-parser nos permitirá enviar datos JSON en peticiones HTTP. Usaremos Express y Couchbase que explican los otros dos paquetes.

Crear un app.js dentro de tu proyecto. Contendrá todo el código fuente de nuestra aplicación Node.js. Como ejemplo, debería tener el siguiente aspecto:

var Couchbase = require("couchbase");
var Express = require("express");
var BodyParser = require("body-parser");
var UUID = require("uuid");
var Cors = require("cors");

var app = Express();
var N1qlQuery = Couchbase.N1qlQuery;

app.use(BodyParser.json());
app.use(BodyParser.urlencoded({ extended: true }));
app.use(Cors());

var cluster = new Couchbase.Cluster("couchbase://localhost");
var bucket = cluster.openBucket("default", "");

app.get("/consoles", (request, response) => {});
app.post("/console", (request, response) => {});
app.post("/game", (request, response) => {});
app.get("/games", (request, response) => {});
app.get("/game/:id", (request, response) => {});

var server = app.listen(3000, () => {
    console.log("Listening on port " + server.address().port + "...");
});

var Couchbase = requiere("couchbase");

var Express = requiere("express");

var BodyParser = requiere("body-parser");

var UUID = requiere("uuid");

var Cors = requiere("cors");

var aplicación = Express();

var N1qlQuery = Couchbase.N1qlQuery;

aplicación.utilice(BodyParser.json());

aplicación.utilice(BodyParser.urlencoded({ ampliado: verdadero }));

aplicación.utilice(Cors());

var grupo = nuevo Couchbase.Grupo("couchbase://localhost");

var cubo = grupo.openBucket("por defecto", "");

aplicación.consiga("/consolas", (solicitar, respuesta) => {});

aplicación.Correo electrónico:("/consola", (solicitar, respuesta) => {});

aplicación.Correo electrónico:("/juego", (solicitar, respuesta) => {});

aplicación.consiga("/juegos", (solicitar, respuesta) => {});

aplicación.consiga("/juego/:id", (solicitar, respuesta) => {});

var servidor = aplicación.escuche(3000, () => {

consola.registro("Escuchando en el puerto " + servidor.dirección().puerto + "...");

});

Observa que hemos importado cada una de las dependencias descargadas, inicializado y configurado Express, y conectado a un Bucket en nuestro cluster Couchbase.

Tendremos cinco puntos finales de API RESTful diferentes para esta aplicación.

Lo primero lógico sería crear una videoconsola para poder añadirle juegos. Echa un vistazo al siguiente código endpoint:

app.post("/console", (request, response) => {
    if(!request.body.title) {
        return response.status(401).send({ "message": "A `title` is required." });
    }
    var id = UUID.v4();
    request.body.type = "console";
    bucket.insert(id, request.body, (error, result) => {
        if(error) {
            return response.status(500).send(error);
        }
        response.send(result);
    });
});

aplicación.Correo electrónico:("/consola", (solicitar, respuesta) => {

si(!solicitar.cuerpo.título) {

devolver respuesta.estado(401).enviar({ "mensaje": "Se requiere un "título"." });

}

var id = UUID.v4();

solicitar.cuerpo.tipo = "consola";

cubo.insertar(id, solicitar.cuerpo, (error, resultado) => {

si(error) {

devolver respuesta.estado(500).enviar(error);

}

respuesta.enviar(resultado);

});

En la lógica anterior, estamos validando que a título existe en nuestra solicitud. Si es así, generaremos un nuevo id, asignaremos un tipo a los datos de nuestra petición, e insertarlos en Couchbase. La respuesta de éxito o fracaso de la inserción será devuelta al cliente, que finalmente será una aplicación Angular.

Para buscar consolas de videojuegos, tendremos que hacer una consulta basada en la variable tipo propiedad. Por esta razón, tendremos que utilizar una consulta N1QL en lugar de una búsqueda por id.

app.get("/consoles", (request, response) => {
    var statement = "SELECT `" + bucket._name + "`.*, META().id FROM `" + bucket._name + "` WHERE type = 'console'";
    var query = N1qlQuery.fromString(statement);
    query.consistency(N1qlQuery.Consistency.REQUEST_PLUS);
    bucket.query(query, (error, result) => {
        if(error) {
            return response.status(500).send(error);
        }
        response.send(result);
    });
});

aplicación.consiga("/consolas", (solicitar, respuesta) => {

var declaración = "SELECT `" + cubo.Nombre + "`.*, META().id FROM `" + cubo.Nombre + "WHERE type = 'console'";

var consulta = N1qlQuery.fromString(declaración);

consulta.coherencia(N1qlQuery.Coherencia.SOLICITUD_PLUS);

cubo.consulta(consulta, (error, resultado) => {

si(error) {

devolver respuesta.estado(500).enviar(error);

}

respuesta.enviar(resultado);

});

La consulta N1QL no es más que un simple SELECCIONE que encontraríamos en SQL. Después de ejecutar la consulta, devolveríamos la respuesta al cliente.

Esto nos lleva a los videojuegos propiamente dichos. Las cosas se ponen un poco más complejas, pero no más difíciles.

app.post("/game", (request, response) => {
    if(!request.body.title) {
        return response.status(401).send({ "message": "A `title` is required." });
    } else if(!request.body.cid) {
        return response.status(401).send({ "message": "A `cid` is required." });
    }
    var id = UUID.v4();
    request.body.type = "game";
    bucket.insert(id, request.body, (error, result) => {
        if(error) {
            return response.status(500).send(error);
        }
        response.send(result);
    });
});

aplicación.Correo electrónico:("/juego", (solicitar, respuesta) => {

si(!solicitar.cuerpo.título) {

devolver respuesta.estado(401).enviar({ "mensaje": "Se requiere un "título"." });

} si no si(!solicitar.cuerpo.cid) {

devolver respuesta.estado(401).enviar({ "mensaje": "Se requiere un `cid`". });

}

var id = UUID.v4();

solicitar.cuerpo.tipo = "juego";

cubo.insertar(id, solicitar.cuerpo, (error, resultado) => {

si(error) {

devolver respuesta.estado(500).enviar(error);

}

respuesta.enviar(resultado);

});

En la lógica del endpoint anterior, planeamos insertar un nuevo videojuego en la base de datos. Esto no es diferente de lo que vimos al insertar una nueva consola de videojuegos en la base de datos. Estamos definiendo un tipo pero también nos aseguramos de que cid existe. En cid será un id de consola que nos permitirá establecer una relación con nuestros datos.

Cuando tienes relaciones, tienes ÚNASE A operaciones.

app.get("/games", (request, response) => {
    var statement = "SELECT game.title AS game_title, console.title AS console_title FROM `" + bucket._name + "` AS game JOIN `" + bucket._name + "` AS console ON KEYS game.cid WHERE game.type = 'game'";
    var query = N1qlQuery.fromString(statement);
    query.consistency(N1qlQuery.Consistency.REQUEST_PLUS);
    bucket.query(query, (error, result) => {
        if(error) {
            return response.status(500).send(error);
        }
        response.send(result);
    });
});

aplicación.consiga("/juegos", (solicitar, respuesta) => {

var declaración = "SELECT game.title AS game_title, console.title AS console_title FROM `" + cubo.Nombre + "` AS game JOIN `" + cubo.Nombre + "` AS console ON KEYS game.cid WHERE game.type = 'game'";

var consulta = N1qlQuery.fromString(declaración);

consulta.coherencia(N1qlQuery.Coherencia.SOLICITUD_PLUS);

cubo.consulta(consulta, (error, resultado) => {

si(error) {

devolver respuesta.estado(500).enviar(error);

}

respuesta.enviar(resultado);

});

En el endpoint anterior, estamos haciendo otra consulta N1QL, pero esta vez tenemos una consulta ÚNASE A operación. No es útil devolver un cid cuando se buscan videojuegos, así que ÚNASE A y sustituye esa información por el título de la consola del otro documento.

Lo mismo ocurre cuando buscamos un videojuego concreto:

app.get("/game/:id", (request, response) => {
    if(!request.params.id) {
        return response.status(401).send({ "message": "An `id` is required." });
    }
    var statement = "SELECT game.title AS game_title, console.title AS console_title FROM `" + bucket._name + "` AS game JOIN `" + bucket._name + "` AS console ON KEYS game.cid WHERE game.type = 'game' AND META(game).id = $id";
    var query = N1qlQuery.fromString(statement);
    bucket.query(query, { "id": request.params.id }, (error, result) => {
        if(error) {
            return response.status(500).send(error);
        }
        response.send(result);
    });
});

aplicación.consiga("/juego/:id", (solicitar, respuesta) => {

si(!solicitar.parámetros.id) {

devolver respuesta.estado(401).enviar({ "mensaje": "Se requiere un `id`". });

}

var consulta = N1qlQuery.fromString(declaración);

cubo.consulta(consulta, { "id": solicitar.parámetros.id }, (error, resultado) => {

si(error) {

devolver respuesta.estado(500).enviar(error);

}

respuesta.enviar(resultado);

});

La alternativa al uso de N1QL y ÚNASE A sería hacer dos búsquedas basadas en el id. No hay nada malo en esta práctica, pero en mi opinión es más fácil dejar que la base de datos se encargue de un ÚNASE A en lugar de intentar ÚNASE A a través de la capa de aplicación.

Esto nos lleva al frontend del cliente.

Creación de Ionic Framework con Angular Frontend

Como se mencionó anteriormente, esta vez estamos utilizando Ionic Framework que utiliza un sabor de Angular. Elegí esto porque me sentía demasiado perezoso para crear un frontend atractivo con Bootstrap o Foundation.

Con la CLI de Ionic Framework disponible, ejecute lo siguiente:

ionic start pwa sidemenu

1	iónico iniciar pwa sidemenu

El comando anterior creará un proyecto llamado pwa utilizando Ionic Framework sidemenu plantilla.

La plantilla base es útil, pero no tiene todo lo que necesitamos. Tenemos que añadir algunas páginas a la aplicación.

Utilizando los generadores de Ionic Framework, o manualmente, cree un archivo consolas, juegosy juego página. Cada una de estas páginas debe tener un archivo HTML, SCSS y TypeScript y cada directorio de página debe estar en el directorio páginas directorio.

Abra el archivo app/app.component.ts y que tenga el siguiente aspecto:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { GamesPage } from '../pages/games/games';
import { ConsolesPage } from '../pages/consoles/consoles';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = GamesPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Games', component: GamesPage },
      { title: 'Consoles', component: ConsolesPage }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

importar { Componente, VerNiño } de @angular/core;

importar { Navegación, Plataforma } de iónico-angular;

importar { Barra de estado } de @ionic-native/status-bar;

importar { SplashScreen } de @ionic-native/splash-screen;

importar { JuegosPágina } de '../páginas/juegos/juegos';

importar { ConsolasPágina } de '../páginas/consolas/consolas';

@Componente({

templateUrl: app.html

})

exportar clase MyApp {

@VerNiño(Navegación) nav: Navegación;

rootPage: cualquier = JuegosPágina;

páginas: Matriz<{título: cadena, componente: cualquier}>;

constructor(público plataforma: Plataforma, público statusBar: Barra de estado, público splashScreen: SplashScreen) {

este.inicializarApp();

// utilizado para un ejemplo de ngFor y navegación

este.páginas = [

{ título: Juegos, componente: JuegosPágina },

{ título: Consolas, componente: ConsolasPágina }

];

}

inicializarApp() {

este.plataforma.listo().entonces(() => {

// Bien, la plataforma está lista y nuestros plugins están disponibles.

// Aquí puedes hacer cualquier cosa nativa de nivel superior que necesites.

este.statusBar.styleDefault();

este.splashScreen.ocultar();

});

}

abrirPágina(página) {

// Restablecer el contenido nav para tener sólo esta página

// en este caso no queremos que se muestre el botón de retroceso

este.nav.setRoot(página.componente);

}

Observe que hemos importado JuegosPágina y ConsolasPáginaactualizó el páginas y establecer la página raíz por defecto como JuegosPágina. De este modo habremos configurado la navegación y la página predeterminada cuando se inicie la aplicación.

Para completar la configuración, también tenemos que modificar el proyecto de app/app.module.ts archivo. Que tenga el siguiente aspecto:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from "@angular/http";

import { MyApp } from './app.component';
import { GamesPage } from '../pages/games/games';
import { GamePage } from '../pages/game/game';
import { ConsolesPage } from '../pages/consoles/consoles';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    GamesPage,
    GamePage,
    ConsolesPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    GamesPage,
    GamePage,
    ConsolesPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

importar { BrowserModule } de @angular/platform-browser;

importar { ErrorHandler, NgModule } de @angular/core;

importar { IonicApp, IonicErrorHandler, IonicModule } de iónico-angular;

importar { HttpModule } de "@angular/http";

importar { MyApp } de './app.component';

importar { JuegosPágina } de '../páginas/juegos/juegos';

importar { Página de juego } de '../páginas/juego/juego';

importar { ConsolasPágina } de '../páginas/consolas/consolas';

importar { Barra de estado } de @ionic-native/status-bar;

importar { SplashScreen } de @ionic-native/splash-screen;

@NgModule({

declaraciones: [

MyApp,

JuegosPágina,

Página de juego,

ConsolasPágina

importaciones: [

BrowserModule,

HttpModule,

IonicModule.forRoot(MyApp),

arranque: [IonicApp],

entryComponents: [

MyApp,

JuegosPágina,

Página de juego,

ConsolasPágina

proveedores: [

Barra de estado,

SplashScreen,

{proporcionar: ErrorHandler, useClass: IonicErrorHandler}

]

})

exportar clase AppModule {}

Observe que hemos importado cada una de nuestras nuevas páginas y las hemos añadido a la carpeta declaraciones y entryComponents matrices del @NgModule bloque.

Ahora podemos centrarnos en el desarrollo de la aplicación y en conectarla a nuestra API.

Abra el archivo src/pages/games/games.ts y hacer que se vea como lo siguiente. Vamos a desglosar lo que sucede a continuación.

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { Http, Headers, RequestOptions } from "@angular/http";
import "rxjs/Rx";
import { GamePage } from "../game/game";

@Component({
    selector: 'page-games',
    templateUrl: 'games.html'
})
export class GamesPage {

    public games: Array<any>;

    public constructor(public navCtrl: NavController, private http: Http, private modalCtrl: ModalController) {
        this.games = [];
    }

    public ionViewDidEnter() {
        this.http.get("http://localhost:3000/games")
            .map(result => result.json())
            .subscribe(result => {
                this.games = result;
            });
    }

    public create() {
        let gameModal = this.modalCtrl.create(GamePage);
        gameModal.onDidDismiss(data => {
            let headers = new Headers({ "Content-Type": "application/json" });
            let options = new RequestOptions({ headers: headers });
            this.http.post("http://localhost:3000/game", JSON.stringify(data), options)
                .subscribe(result => {
                    this.games.push({ "game_title": data.title, "console_title": ""});
                });
        });
        gameModal.present();
    }

}

importar { Componente } de @angular/core;

importar { NavController, ModalController } de iónico-angular;

importar { Http, Cabeceras, RequestOptions } de "@angular/http";

importar "rxjs/Rx";

importar { Página de juego } de "../juego/juego";

@Componente({

selector: página-juegos,

templateUrl: juegos.html

})

exportar clase JuegosPágina {

público juegos: Matriz<cualquier>;

público constructor(público navCtrl: NavController, privado http: Http, privado modalCtrl: ModalController) {

este.juegos = [];

}

público ionViewDidEnter() {

este.http.consiga("http://localhost:3000/games")

.mapa(resultado => resultado.json())

.suscríbase a(resultado => {

este.juegos = resultado;

});

}

público crear() {

deje gameModal = este.modalCtrl.crear(Página de juego);

gameModal.onDidDismiss(datos => {

deje cabeceras = nuevo Cabeceras({ "Tipo de contenido": "application/json" });

deje opciones = nuevo RequestOptions({ cabeceras: cabeceras });

este.http.Correo electrónico:("http://localhost:3000/game", JSON.stringify(datos), opciones)

.suscríbase a(resultado => {

este.juegos.pulse({ "game_title": datos.título, "console_title": ""});

});

gameModal.presente();

}

Dentro del JuegosPágina tenemos una variable pública llamada juegos. Como es público, será accesible a través del HTML. Contendrá todos los juegos devueltos desde la aplicación Node.js.

Cuando se carga la página, queremos consultar nuestro endpoint. Nunca es una buena idea hacer esto en el archivo constructor por lo que en su lugar utilizaremos el método ionViewDidEnter método. Después de emitir la solicitud, el resultado se transforma en JSON y luego se carga en nuestra variable pública.

Si queremos crear un nuevo juego en nuestra base de datos, las cosas son un poco diferentes. Vamos a mostrar un cuadro de diálogo modal y recoger la entrada.

public create() {
    let gameModal = this.modalCtrl.create(GamePage);
    gameModal.onDidDismiss(data => {
        let headers = new Headers({ "Content-Type": "application/json" });
        let options = new RequestOptions({ headers: headers });
        this.http.post("http://localhost:3000/game", JSON.stringify(data), options)
            .subscribe(result => {
                this.games.push({ "game_title": data.title, "console_title": ""});
            });
    });
    gameModal.present();
}

público crear() {

deje gameModal = este.modalCtrl.crear(Página de juego);

gameModal.onDidDismiss(datos => {

deje cabeceras = nuevo Cabeceras({ "Tipo de contenido": "application/json" });

deje opciones = nuevo RequestOptions({ cabeceras: cabeceras });

este.http.Correo electrónico:("http://localhost:3000/game", JSON.stringify(datos), opciones)

.suscríbase a(resultado => {

este.juegos.pulse({ "game_title": datos.título, "console_title": ""});

});

gameModal.presente();

}

En crear mostrará nuestro método Página de juego que estará en formato modal. Cualquier dato introducido en el formulario en el modal será devuelto al JuegosPágina y se envía mediante una solicitud HTTP a la API.

Antes de echar un vistazo a Página de juegoveamos el HTML que potencia JuegosPágina.

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Games</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="create()">
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <button ion-item *ngFor="let game of games">
            {{game.game_title}}
<span class="item-note">{{game.console_title}}</span>
</button> </ion-list> </ion-content>

<ion-cabecera>

<ion-barra de navegación>

<botón ion-botón menuToggle>

<ion-icono nombre="menú"></ion-icono>

</botón>

<ion-título>Juegos</ion-título>

<ion-botones fin>

<botón ion-botón icono-sólo (haga clic en)="create()">

<ion-icono nombre="añadir"></ion-icono>

</botón>

</ion-botones>

</ion-barra de navegación>

</ion-cabecera>

<ion-contenido acolchado>

<ion-lista>

<botón ion-artículo *ngFor="el juego de los juegos">

<span clase="artículo-nota">{{juego.título_consola}}</span>

</botón> </ion-lista> </ion-contenido>

En el HTML anterior, hacemos un bucle a través de nuestro código público juegos array. Cada objeto de la matriz se muestra en la pantalla dentro de una lista. Angular hace todo el trabajo pesado por nosotros.

Abra el archivo src/pages/game/game.ts e incluya lo siguiente:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Http, Headers, RequestOptions } from "@angular/http";
import "rxjs/Rx";

@IonicPage()
@Component({
    selector: 'page-game',
    templateUrl: 'game.html',
})
export class GamePage {

    public consoles: Array<any>;
    public input: any;

    constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, private http: Http) {
        this.consoles = [];
        this.input = {
            "cid": "",
            "title": ""
        }
    }

    ionViewDidEnter() {
        this.http.get("http://localhost:3000/consoles")
            .map(result => result.json())
            .subscribe(result => {
                for(let i = 0; i < result.length; i++) {
                    this.consoles.push(result[i]);
                }
            });
    }

    public save() {
        this.viewCtrl.dismiss(this.input);
    }

}

importar { Componente } de @angular/core;

importar { IonicPage, NavController, NavParams, ViewController } de iónico-angular;

importar { Http, Cabeceras, RequestOptions } de "@angular/http";

importar "rxjs/Rx";

@IonicPage()

@Componente({

selector: página-juego,

templateUrl: juego.html,

})

exportar clase Página de juego {

público consolas: Matriz<cualquier>;

público entrada: cualquier;

constructor(público navCtrl: NavController, público navParams: NavParams, público viewCtrl: ViewController, privado http: Http) {

este.consolas = [];

este.entrada = {

"cid": "",

"título: ""

}

ionViewDidEnter() {

este.http.consiga("http://localhost:3000/consoles")

.mapa(resultado => resultado.json())

.suscríbase a(resultado => {

para(deje i = 0; i < resultado.longitud; i++) {

este.consolas.pulse(resultado[i]);

}

});

}

público guardar() {

este.viewCtrl.desestimar(este.entrada);

}

Esta lógica modal es similar a lo que ya hemos visto. Habrá un formulario vinculado a HTML y TypeScript. Cuando el ionViewDidEnter se consulta la información de la consola. Esta información de la consola se utilizará finalmente para una lista de radio que el usuario puede seleccionar.

Cuando el usuario selecciona el guardar los datos vinculados en el formulario público se pasan al método anterior JuegosPágina página.

El HTML que alimenta este modal, que se encuentra en src/pages/game/game.html se ve así:

<ion-header>
    <ion-navbar>
    <ion-title>New Game</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item>
            <ion-label stacked>Title</ion-label>
            <ion-input type="text" [(ngModel)]="input.title"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Console</ion-label>
            <ion-select [(ngModel)]="input.cid">
                <ion-option *ngFor="let console of consoles" value="{{ console.id }}">{{ console.title }}</ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
            <button ion-button full (click)="save()">Save</button>
        </ion-item>
    </ion-list>
</ion-content>

<ion-cabecera>

<ion-barra de navegación>

<ion-título>Nuevo Juego</ion-título>

</ion-barra de navegación>

</ion-cabecera>

<ion-contenido acolchado>

<ion-lista>

<ion-artículo>

<ion-etiqueta apilado>Título</ion-etiqueta>

<ion-entrada tipo="texto" [(ngModel)]="entrada.titulo"></ion-entrada>

</ion-artículo>

<ion-artículo>

<ion-etiqueta>Consola</ion-etiqueta>

<ion-seleccione [(ngModel)]="entrada.cid">

<ion-opción *ngFor="la consola de las consolas" valor="{{ console.id }}">{{ consola.título }}</ion-opción>

</ion-seleccione>

</ion-artículo>

<ion-artículo>

<botón ion-botón completo (haga clic en)="save()">Guardar</botón>

</ion-artículo>

</ion-lista>

</ion-contenido>

Tenemos una lista simple que compone nuestro formulario. Los elementos del formulario están ligados a nuestra variable TypeScript y la información de la consola se repite para rellenar un HTML seleccione elemento.

Esto nos lleva a la página final del frontend Angular.

Abra el archivo src/pages/consolas/consolas.ts e incluya lo siguiente:

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import { Http, Headers, RequestOptions } from "@angular/http";
import "rxjs/Rx";

@Component({
  selector: 'page-consoles',
  templateUrl: 'consoles.html'
})
export class ConsolesPage {

    public consoles: Array<any>;

    public constructor(public navCtrl: NavController, private http: Http, private alertCtrl: AlertController) {
        this.consoles = [];
    }

    public ionViewDidEnter() {
        this.http.get("http://localhost:3000/consoles")
            .map(result => result.json())
            .subscribe(result => {
                this.consoles = result;
            });
    }

    public create() {
        let alert = this.alertCtrl.create({
            title: 'Add Console',
            inputs: [
                {
                    name: 'title',
                    placeholder: 'Title'
                },
                {
                    name: 'year',
                    placeholder: 'Year'
                }
            ],
            buttons: [
                {
                    text: 'Cancel',
                    role: 'cancel',
                    handler: data => {
                        console.log('Cancel clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: data => {
                        let headers = new Headers({ "Content-Type": "application/json" });
                        let options = new RequestOptions({ headers: headers });
                        this.http.post("http://localhost:3000/console", JSON.stringify(data), options)
                            .subscribe(result => {
                                this.consoles.push(data);
                            }, error => {});
                    }
                }
            ]
        });
        alert.present();
    }

}

importar { Componente } de @angular/core;

importar { NavController, NavParams, AlertController } de iónico-angular;

importar { Http, Cabeceras, RequestOptions } de "@angular/http";

importar "rxjs/Rx";

@Componente({

selector: página-consolas,

templateUrl: consolas.html

})

exportar clase ConsolasPágina {

público consolas: Matriz<cualquier>;

público constructor(público navCtrl: NavController, privado http: Http, privado alertCtrl: AlertController) {

este.consolas = [];

}

público ionViewDidEnter() {

este.http.consiga("http://localhost:3000/consoles")

.mapa(resultado => resultado.json())

.suscríbase a(resultado => {

este.consolas = resultado;

});

}

público crear() {

deje alerta = este.alertCtrl.crear({

título: Añadir consola,

entradas: [

{

nombre: título,

marcador de posición: Título

{

nombre: año,

marcador de posición: Año

}

botones: [

{

texto: Cancelar,

papel: cancelar,

manipulador: datos => {

consola.registro("Cancelar clic);

}

{

texto: Guardar,

manipulador: datos => {

deje cabeceras = nuevo Cabeceras({ "Tipo de contenido": "application/json" });

deje opciones = nuevo RequestOptions({ cabeceras: cabeceras });

este.http.Correo electrónico:("http://localhost:3000/console", JSON.stringify(datos), opciones)

.suscríbase a(resultado => {

este.consolas.pulse(datos);

}, error => {});

}

]

});

alerta.presente();

}

Aunque no es muy diferente de lo que ya hemos visto, tenemos una nueva característica. Estamos utilizando un cuadro de diálogo emergente para recoger información sobre nuevas consolas de videojuegos.

Cuando se cierra la ventana emergente, se ejecuta lo siguiente:

handler: data => {
    let headers = new Headers({ "Content-Type": "application/json" });
    let options = new RequestOptions({ headers: headers });
    this.http.post("http://localhost:3000/console", JSON.stringify(data), options)
        .subscribe(result => {
            this.consoles.push(data);
        }, error => {});
}

manipulador: datos => {

deje cabeceras = nuevo Cabeceras({ "Tipo de contenido": "application/json" });

deje opciones = nuevo RequestOptions({ cabeceras: cabeceras });

este.http.Correo electrónico:("http://localhost:3000/console", JSON.stringify(datos), opciones)

.suscríbase a(resultado => {

este.consolas.pulse(datos);

}, error => {});

}

Esto tomará la información encontrada en el formulario y la enviará vía HTTP a nuestra API que a su vez guardará la información de la consola en la base de datos.

Impresionante, ¿verdad?

El HTML que se encuentra en el proyecto src/pages/consolas/consolas.html tiene el siguiente aspecto:

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Consoles</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="create()">
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
        <button ion-item *ngFor="let console of consoles">
            {{ console.title }}
            <span class="item-note" item-right>
                {{ console.year }}
            </span>
        </button>
    </ion-list>
</ion-content>

<ion-cabecera>

<ion-barra de navegación>

<botón ion-botón menuToggle>

<ion-icono nombre="menú"></ion-icono>

</botón>

<ion-título>Consolas</ion-título>

<ion-botones fin>

<botón ion-botón icono-sólo (haga clic en)="create()">

<ion-icono nombre="añadir"></ion-icono>

</botón>

</ion-botones>

</ion-barra de navegación>

</ion-cabecera>

<ion-contenido>

<ion-lista>

<botón ion-artículo *ngFor="la consola de las consolas">

</span>

</botón>

</ion-lista>

</ion-contenido>

De nuevo, es casi idéntico a los otros archivos HTML que hemos visto.

Conclusión

Acabas de recibir un resumen de todo lo que repasé en Midwest JS 2017. Vimos cómo crear una API Node.js que se comunica con Couchbase, nuestra base de datos NoSQL, así como crear un frontend usando Angular y Ionic Framework. Estos son sólo algunos componentes de una aplicación de pila completa.

Para más información usando Node.js con Couchbase, consulte la Portal para desarrolladores de Couchbase. Si quieres que vuelva a Midwest JS, házmelo saber en los comentarios.

Nic Raboy, Defensor del Desarrollador, Couchbase

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

Todos los mensajes

Midwest JS Project Source on Full Stack Node Development, Disponible

Creación de Node.js con Couchbase NoSQL Backend

Creación de Ionic Framework con Angular Frontend

Conclusión

Autor

Publicado por Nic Raboy, Defensor del Desarrollador, Couchbase

Dejar una respuesta Cancelar respuesta