Bringing Your User Profile Store to Mobile with NativeScript and Angular

Siguiendo por la senda de los almacenes de perfiles de usuario, habíamos visto anteriormente cómo crear uno con Node.js y Couchbase NoSQL así como un cliente web front-end para él usando Angular. ¿Qué pasaría si quisiéramos llevar esto a una aplicación móvil, que es la norma para todas las aplicaciones a partir de ahora.

Hay muchos frameworks móviles diferentes por ahí y tenemos la suerte de que algunos incluso soportan Angular, que es lo que habíamos utilizado en el ejemplo anterior. Vamos a ver cómo convertir nuestro front-end cliente a móvil usando NativeScript y Angular.

Antes de seguir adelante, se supone que has completado los dos tutoriales anteriores, uno sobre creación del backend de la tienda de perfiles y el otro en creación del front-end web de la tienda de perfiles. También vamos a suponer que su entorno de desarrollo está configurado para el desarrollo móvil, ya sea Android, iOS, o ambos.

El flujo de eventos en esta aplicación coincidirá con lo que vimos en la versión web.

Crear un nuevo proyecto NativeScript con Angular

Asumiendo que tienes el NativeScript CLI instalado y configurado, ejecuta lo siguiente para crear un nuevo proyecto:

tns create profile-project-ns --ng

1	tns crear perfil-proyecto-ns --ng

En --ng en el comando anterior es importante porque significa que estamos creando un proyecto Angular en lugar de un proyecto NativeScript Core.

Por ahora, el CLI de NativeScript no comparte las capacidades del CLI de Angular de generar componentes. Por esta razón, vamos a tener que crear cada uno de los archivos HTML y TypeScript manualmente.

Si estás en Mac o Linux, ejecuta lo siguiente desde el proyecto NativeScript:

mkdir -p app/login
mkdir -p app/register
mkdir -p app/blogs
mkdir -p app/blog
touch app/login/login.component.html
touch app/login/login.component.ts
touch app/register/register.component.html
touch app/register/register.component.ts
touch app/blogs/blogs.component.html
touch app/blogs/blogs.component.ts
touch app/blog/blog.component.html
touch app/blog/blog.component.ts

mkdir -p aplicación/inicio de sesión

mkdir -p aplicación/regístrese en

mkdir -p aplicación/blogs

mkdir -p aplicación/blog

toque aplicación/inicio de sesión/inicio de sesión.componente.html

toque aplicación/inicio de sesión/inicio de sesión.componente.ts

toque aplicación/regístrese en/regístrese en.componente.html

toque aplicación/regístrese en/regístrese en.componente.ts

toque aplicación/blogs/blogs.componente.html

toque aplicación/blogs/blogs.componente.ts

toque aplicación/blog/blog.componente.html

toque aplicación/blog/blog.componente.ts

Si estás en Windows, simplemente crea esos directorios y archivos manualmente. Si realmente quisieras, podrías copiar estos directorios y archivos de tu proyecto web desde la carpeta tutorial anterior.

Definición de los componentes para representar cada pantalla

Empezando en la misma dirección que la versión web, vamos a centrarnos en el inicio de sesión del usuario. Abra el proyecto app/login/login.component.ts e incluya el siguiente código:

import { Component } from '@angular/core';
import { Http, Headers, RequestOptions } from "@angular/http";
import { Router } from "@angular/router";
import "rxjs/Rx";

@Component({
    moduleId: module.id,
    selector: 'app-login',
    templateUrl: './login.component.html'
})
export class LoginComponent {

    public input: any;

    constructor(private http: Http, private router: Router) {
        this.input = {
            "email": "",
            "password": ""
        };
    }

    public login() {
        if(this.input.email && this.input.password) {
            let headers = new Headers({ "content-type": "application/json" });
            let options = new RequestOptions({ headers: headers });
            this.http.post("http://localhost:3000/login", JSON.stringify(this.input), options)
                .map(result => result.json())
                .subscribe(result => {
                    this.router.navigate(["/blogs"], { "queryParams": result });
                });
        }
    }

}

importar { Componente } de @angular/core;

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

importar { Router } de "@angular/router";

importar "rxjs/Rx";

@Componente({

moduleId: módulo.id,

selector: app-login,

templateUrl: './ingreso.component.html'

})

exportar clase Componente de inicio de sesión {

público entrada: cualquier;

constructor(privado http: Http, privado enrutador: Router) {

este.entrada = {

"email": "",

"contraseña": ""

};

}

público inicio de sesión() {

si(este.entrada.correo electrónico && este.entrada.contraseña) {

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

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

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

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

.suscríbase a(resultado => {

este.enrutador.navegue por(["/blogs"], { "queryParams": resultado });

});

}

El código anterior es exactamente lo que vimos en la versión web con dos excepciones. He eliminado la referencia CSS ya que no creamos un archivo CSS por componente. También he añadido un moduleId para que las rutas relativas puedan funcionar con nuestro componente. Ambos son elementos relacionados con Angular que no tienen nada que ver con NativeScript.

El HTML es donde las cosas son diferentes. Abra el archivo app/login/login.component.html e incluya el siguiente marcado XML:

<ActionBar title="{N} Profile Store"></ActionBar>
<StackLayout class="form">
    <StackLayout class="input-field">
        <Label text="Email" class="label font-weight-bold m-b-5"></Label>
        <TextField class="input" [(ngModel)]="input.email" autocapitalizationType="none"></TextField>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Label text="Password" class="label font-weight-bold m-b-5"></Label>
        <TextField class="input" secure="true" [(ngModel)]="input.password" autocapitalizationType="none"></TextField>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Button class="btn btn-primary" text="Login" (tap)="login()"></Button>
    </StackLayout>
    <StackLayout class="input-field">
        <Label text="Register here." [nsRouterLink]="['/register']" class="text-center"></Label>
    </StackLayout>
</StackLayout>

</StackLayout>

</StackLayout>

<Botón clase="btn btn-primary" texto="Iniciar sesión" (pulse)="login()"></Botón>

</StackLayout>

</StackLayout>

NativeScript tiene su propio marcado para la interfaz de usuario. Las mismas reglas se aplican en términos de Angular, pero la creación de componentes de interfaz de usuario es un poco diferente.

Por ejemplo, seguimos utilizando el [(ngModel)] pero en lugar de div etiquetas, tenemos StackLayout tags.

Veamos ahora el componente de registro. Abra el archivo app/register/register.component.ts e incluir el siguiente TypeScript:

import { Component } from '@angular/core';
import { Http, Headers, RequestOptions } from "@angular/http";
import { Router } from "@angular/router";
import "rxjs/Rx";

@Component({
    moduleId: module.id,
    selector: 'app-register',
    templateUrl: './register.component.html'
})
export class RegisterComponent {

    public input: any;

    public constructor(private http: Http, private router: Router) {
        this.input = {
            "firstname": "",
            "lastname": "",
            "email": "",
            "password": ""
        };
    }

    public register() {
        if(this.input.email && this.input.password) {
            let headers = new Headers({ "content-type": "application/json" });
            let options = new RequestOptions({ headers: headers });
            this.http.post("http://localhost:3000/account", JSON.stringify(this.input), options)
                .map(result => result.json())
                .subscribe(result => {
                    this.router.navigate(["/login"]);
                });
        }
    }

}

importar { Componente } de @angular/core;

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

importar { Router } de "@angular/router";

importar "rxjs/Rx";

@Componente({

moduleId: módulo.id,

selector: app-register,

templateUrl: './register.component.html'

})

exportar clase RegistrarComponente {

público entrada: cualquier;

público constructor(privado http: Http, privado enrutador: Router) {

este.entrada = {

"nombre": "",

"apellido": "",

"email": "",

"contraseña": ""

};

}

público regístrese en() {

si(este.entrada.correo electrónico && este.entrada.contraseña) {

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

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

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

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

.suscríbase a(resultado => {

este.enrutador.navegue por(["/login"]);

});

}

Una vez más, los únicos cambios que hemos hecho en el código anterior, en comparación con el ejemplo anterior, es en la eliminación de CSS y moduleId Además.

No está nada mal cuando se trata de crear aplicaciones web y móviles multiplataforma, ¿verdad?

El HTML de la interfaz de usuario que alimenta la lógica de TypeScript se encuentra en el archivo app/register/register.component.html y tiene este aspecto:

<ActionBar title="{N} Profile Store"></ActionBar>
<StackLayout class="form">
    <StackLayout class="input-field">
        <Label text="First Name" class="label font-weight-bold m-b-5"></Label>
        <TextField class="input" [(ngModel)]="input.firstname" autocapitalizationType="none"></TextField>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Label text="Last Name" class="label font-weight-bold m-b-5"></Label>
        <TextField class="input" [(ngModel)]="input.lastname" autocapitalizationType="none"></TextField>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Label text="Email" class="label font-weight-bold m-b-5"></Label>
        <TextField class="input" [(ngModel)]="input.email" autocapitalizationType="none"></TextField>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Label text="Password" class="label font-weight-bold m-b-5"></Label>
        <TextField class="input" secure="true" [(ngModel)]="input.password" autocapitalizationType="none"></TextField>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Button class="btn btn-primary" text="Register" (tap)="register()"></Button>
    </StackLayout>
    <StackLayout class="input-field">
        <Label text="Login here." [nsRouterLink]="['/login']" class="text-center"></Label>
    </StackLayout>
</StackLayout>

</StackLayout>

</StackLayout>

</StackLayout>

</StackLayout>

<Botón clase="btn btn-primary" texto="Registro" (pulse)="register()"></Botón>

</StackLayout>

</StackLayout>

Los dos últimos componentes no van a ser diferentes de lo que ya estamos experimentando.

Abra el archivo app/blogs/blogs.component.ts e incluya el siguiente código TypeScript:

import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions } from "@angular/http";
import { Router, ActivatedRoute } from "@angular/router";
import { Location } from "@angular/common";
import "rxjs/Rx";

@Component({
    moduleId: module.id,
    selector: 'app-blogs',
    templateUrl: './blogs.component.html'
})
export class BlogsComponent implements OnInit {

    private sid: string;
    public entries: Array<any>;

    public constructor(private http: Http, private router: Router, private route: ActivatedRoute, private location: Location) {
        this.entries = [];
    }

    public ngOnInit() {
        this.location.subscribe(() => {
            let headers = new Headers({ "authorization": "Bearer " + this.sid });
            let options = new RequestOptions({ headers: headers });
            this.http.get("http://localhost:3000/blogs", options)
                .map(result => result.json())
                .subscribe(result => {
                    this.entries = result;
                });
        });
        this.route.queryParams.subscribe(params => {
            this.sid = params["sid"];
            let headers = new Headers({ "authorization": "Bearer " + params["sid"] });
            let options = new RequestOptions({ headers: headers });
            this.http.get("http://localhost:3000/blogs", options)
                .map(result => result.json())
                .subscribe(result => {
                    this.entries = result;
                });
        });
    }

    public create() {
        this.router.navigate(["/blog"], { "queryParams": { "sid": this.sid } });
    }

}

importar { Componente, OnInit } de @angular/core;

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

importar { Router, Ruta activada } de "@angular/router";

importar { Ubicación } de "@angular/common";

importar "rxjs/Rx";

@Componente({

moduleId: módulo.id,

selector: app-blogs,

templateUrl: './blogs.component.html'

})

exportar clase BlogsComponente implementa OnInit {

privado sid: cadena;

público entradas: Matriz<cualquier>;

público constructor(privado http: Http, privado enrutador: Router, privado ruta: Ruta activada, privado ubicación: Ubicación) {

este.entradas = [];

}

público ngOnInit() {

este.ubicación.suscríbase a(() => {

deje cabeceras = nuevo Cabeceras({ "autorización": "Portador" + este.sid });

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

este.http.consiga("http://localhost:3000/blogs", opciones)

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

.suscríbase a(resultado => {

este.entradas = resultado;

});

este.ruta.queryParams.suscríbase a(parámetros => {

este.sid = parámetros["sid"];

deje cabeceras = nuevo Cabeceras({ "autorización": "Portador" + parámetros["sid"] });

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

este.http.consiga("http://localhost:3000/blogs", opciones)

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

.suscríbase a(resultado => {

este.entradas = resultado;

});

}

público crear() {

este.enrutador.navegue por(["/blog"], { "queryParams": { "sid": este.sid } });

}

No hay cambios que ver en lo anterior aparte de los dos mencionados anteriormente, por lo que podemos pasar a nuestro HTML para la página.

Abra el archivo app/blogs/blogs.component.html e incluya el siguiente código HTML:

<ActionBar title="{N} Profile Store">
    <ActionItem text="New" ios.position="right" (tap)="create()"></ActionItem>
    <NavigationButton text="Back"></NavigationButton>
</ActionBar>
<GridLayout rows="*, auto" columns="*">
    <ListView [items]="entries" class="list-group" row="0" col="0">
        <ng-template let-entry="item">
            <StackLayout class="list-group-item">
                <Label text="{{ entry.title }}" class="h2"></Label>
                <Label text="{{ entry.content }}"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <StackLayout row="1" col="0" padding="10" backgroundColor="#F0F0F0">
        <Label text="Logout" [nsRouterLink]="['/login']"></Label>
    </StackLayout>
</GridLayout>

<Botón de navegación texto="Atrás"></Botón de navegación>

</ActionBar>

<ng-plantilla deje-entrada="item">

</StackLayout>

</ng-plantilla>

</ListView>

</StackLayout>

</GridLayout>

Finalicemos esta aplicación con el último componente que ofrece nuestra API de tienda de perfiles y el front-end web.

Abra el archivo app/blog/blog.component.ts e incluye esto:

import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions } from "@angular/http";
import { ActivatedRoute } from "@angular/router";
import { Location } from "@angular/common";
import "rxjs/Rx";

@Component({
    moduleId: module.id,
    selector: 'app-blog',
    templateUrl: './blog.component.html'
})
export class BlogComponent implements OnInit {

    private sid: string;
    public input: any;

    public constructor(private http: Http, private route: ActivatedRoute, private location: Location) {
        this.input = {
            "title": "",
            "content": ""
        };
    }

    public ngOnInit() {
        this.route.queryParams.subscribe(params => {
            this.sid = params["sid"];
        });
    }

    public save() {
        if(this.input.title && this.input.content) {
            let headers = new Headers({
                "content-type": "application/json",
                "authorization": "Bearer " + this.sid
            });
            let options = new RequestOptions({ headers: headers });
            this.http.post("http://localhost:3000/blog", JSON.stringify(this.input), options)
                .map(result => result.json())
                .subscribe(result => {
                    this.location.back();
                });
        }
    }

}

importar { Componente, OnInit } de @angular/core;

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

importar { Ruta activada } de "@angular/router";

importar { Ubicación } de "@angular/common";

importar "rxjs/Rx";

@Componente({

moduleId: módulo.id,

selector: app-blog,

templateUrl: './blog.component.html'

})

exportar clase BlogComponent implementa OnInit {

privado sid: cadena;

público entrada: cualquier;

público constructor(privado http: Http, privado ruta: Ruta activada, privado ubicación: Ubicación) {

este.entrada = {

"título: "",

"contenido": ""

};

}

público ngOnInit() {

este.ruta.queryParams.suscríbase a(parámetros => {

este.sid = parámetros["sid"];

});

}

público guardar() {

si(este.entrada.título && este.entrada.contenido) {

deje cabeceras = nuevo Cabeceras({

"tipo de contenido": "application/json",

"autorización": "Portador" + este.sid

});

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

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

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

.suscríbase a(resultado => {

este.ubicación.volver();

});

}

Si no ha copiado el archivo CSS, no olvide eliminarlo del directorio @Componente como se ha visto en los componentes anteriores.

La interfaz de usuario HTML que acompaña a este TypeScript se encuentra en el proyecto app/blog/blog.component.html y tiene el siguiente aspecto:

<ActionBar title="{N} Profile Store">
    <NavigationButton text="Back"></NavigationButton>
</ActionBar>
<StackLayout class="form">
    <StackLayout class="input-field">
        <Label text="Title" class="label font-weight-bold m-b-5"></Label>
        <TextField class="input" [(ngModel)]="input.title" autocapitalizationType="none"></TextField>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Label text="Content" class="label font-weight-bold m-b-5"></Label>
        <TextView class="input" [(ngModel)]="input.content" autocapitalizationType="none"></TextView>
        <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
    <StackLayout class="input-field">
        <Button class="btn btn-primary" text="Save" (tap)="save()"></Button>
    </StackLayout>
</StackLayout>

<Botón de navegación texto="Atrás"></Botón de navegación>

</ActionBar>

</StackLayout>

</StackLayout>

<Botón clase="btn btn-primary" texto="Guardar" (pulse)="save()"></Botón>

</StackLayout>

Ahora mismo puedes estar rascándote la cabeza con todo este marcado XML de NativeScript. Cómo Angular trabaja con la interfaz de usuario no ha cambiado, pero si usted está interesado en aprender sobre el marcado NativeScript, echa un vistazo a su documentación oficial. Familiarícese con el StackLayout, GridLayout y etiquetas de componentes de interfaz de usuario individuales.

La unión hace la fuerza

Hemos creado todos estos componentes Angular para NativeScript, pero no los hemos unido a través del Router Angular.

En la versión web de esta guía, la información sobre la ruta se encontraba en la sección app.module.ts archivo. Si bien podríamos hacer eso, NativeScript lo dividió en un archivo separado.

Abra el archivo app/app.routing.ts e incluya lo siguiente:

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { LoginComponent } from "./login/login.component";
import { RegisterComponent } from "./register/register.component";
import { BlogsComponent } from "./blogs/blogs.component";
import { BlogComponent } from "./blog/blog.component";

const routes: Routes = [
    { path: "", redirectTo: "/login", pathMatch: "full" },
    { path: "login", component: LoginComponent },
    { path: "register", component: RegisterComponent },
    { path: "blogs", component: BlogsComponent },
    { path: "blog", component: BlogComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

importar { NgModule } de "@angular/core";

importar { NativeScriptRouterModule } de "nativescript-angular/router";

importar { Rutas } de "@angular/router";

importar { Componente de inicio de sesión } de "./login/login.component";

importar { RegistrarComponente } de "./register/register.component";

importar { BlogsComponente } de "./blogs/blogs.component";

importar { BlogComponent } de "./blog/blog.component";

const rutas: Rutas = [

{ ruta: "", redirectTo: "/login", pathMatch: "completo" },

{ ruta: "login", componente: Componente de inicio de sesión },

{ ruta: "registrar", componente: RegistrarComponente },

{ ruta: "blogs", componente: BlogsComponente },

{ ruta: "blog", componente: BlogComponent }

];

@NgModule({

importaciones: [NativeScriptRouterModule.forRoot(rutas)],

exportaciones: [NativeScriptRouterModule]

})

exportar clase AppRoutingModule { }

Gran parte del código anterior vino con nuestra nueva plantilla de proyecto. Importamos cada uno de nuestros componentes, y creamos una ruta para ellos.

Del mismo modo, los componentes deben importarse en la carpeta del proyecto app/app.module.ts archivo. Abra este archivo e incluya lo siguiente:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { AppComponent } from "./app.component";

import { LoginComponent } from "./login/login.component";
import { RegisterComponent } from "./register/register.component";
import { BlogsComponent } from "./blogs/blogs.component";
import { BlogComponent } from "./blog/blog.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptHttpModule,
        NativeScriptFormsModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        RegisterComponent,
        BlogsComponent,
        BlogComponent
    ],
    providers: [],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

importar { NgModule, NO_ERRORES_ESQUEMA } de "@angular/core";

importar { Módulo NativeScript } de "nativescript-angular/nativescript.module";

importar { AppRoutingModule } de "./app.routing";

importar { NativeScriptHttpModule } de "nativescript-angular/http";

importar { Módulo NativeScriptForms } de "nativescript-angular/forms";

importar { AppComponent } de "./app.component";

importar { Componente de inicio de sesión } de "./login/login.component";

importar { RegistrarComponente } de "./register/register.component";

importar { BlogsComponente } de "./blogs/blogs.component";

importar { BlogComponent } de "./blog/blog.component";

@NgModule({

arranque: [

AppComponent

importaciones: [

Módulo NativeScript,

AppRoutingModule,

NativeScriptHttpModule,

Módulo NativeScriptForms

declaraciones: [

AppComponent,

Componente de inicio de sesión,

RegistrarComponente,

BlogsComponente,

BlogComponent

proveedores: [],

esquemas: [

NO_ERRORES_ESQUEMA

]

})

exportar clase AppModule { }

Además de importar cada componente y añadirlo a la carpeta declaraciones también importamos algunos módulos, como el módulo NativeScriptHttpModule y Módulo NativeScriptForms. En Angular puro, se denominan HttpModule y Módulo de formularios.

En teoría, la aplicación está lista para funcionar.

Resolución de problemas de seguridad en el transporte de aplicaciones (ATS) para iOS

Como la API de Node.js y Couchbase se ejecuta localmente, estamos usando HTTP en lugar de HTTPS. iOS arrojará errores si intentamos acceder a recursos HTTP.

Esto se puede solucionar fácilmente añadiendo una política ATS.

Abra el archivo app/App_Resources/iOS/Info.plist y añade lo siguiente junto al otro XML:

<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true />
</dict>

<dic>

<clave>NSAllowsArbitraryLoads</clave>

</dic>

Lo anterior esencialmente listas blancas todos los puntos finales HTTP. No es seguro para producción, pero sí para pruebas.

Más información sobre ATS en aplicaciones NativeScript se puede leer en un artículo anterior que escribí titulado, Solucionar problemas de seguridad en el transporte de aplicaciones de iOS 9 en NativeScript.

Conclusión

Usted acaba de ver lo fácil que era tomar su cliente web front-end y convertirlo en móvil usando NativeScript y Angular. El ejemplo de la tienda de perfiles de usuario se convirtió rápidamente en un ejemplo de pila completa utilizando la pila de JavaScript. Teníamos un Node.js con Servidor Couchbase backend, Angular web front-end y NativeScript mobile front-end.

El siguiente paso, u opción, sería utilizar los componentes de Couchbase Mobile en lugar de llamadas HTTP contra la API.

Nic Raboy, Defensor del Desarrollador, Couchbase

1 Comentarios

raziela enero 4, 2019 a 12:42 pm

Hola,

He intentado ejecutar este código pero POST no funciona. Cuando intento registrarme obtengo el siguiente error. De en línea me doy cuenta de que http://localhost no funciona en android sdk. Yo uso la dirección IP tanto 10.0.2.2 y 127.0.0.1 pero sigue recibiendo el mismo error.
JS: ERROR Respuesta con estado: 200 para URL: null

Inicia sesión para responder

Dejar una respuesta Cancelar respuesta

Lo siento, debes estar conectado para publicar un comentario.

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

Lleve su tienda de perfiles de usuario al móvil con NativeScript y Angular

Crear un nuevo proyecto NativeScript con Angular

Definición de los componentes para representar cada pantalla

La unión hace la fuerza

Resolución de problemas de seguridad en el transporte de aplicaciones (ATS) para iOS

Conclusión

Autor

Publicado por Nic Raboy, Defensor del Desarrollador, Couchbase

1 Comentarios

Dejar una respuesta Cancelar respuesta