Desarrollé una aplicación móvil Angular ToDo usando NativeScript en solo 8 simples pasos

NativeScript es un marco móvil híbrido y multiplataforma de código abierto para crear aplicaciones móviles iOS y Android nativas con Angular, Vue.js, TypeScript o JavaScript.

El objetivo de esta publicación es construir y ejecutar un simple NativeScript Angular aplicación en TypeScript, utilizando Angular CLI. Puede descargar el código fuente del Aplicación móvil NativeScript Angular Todo desde el repositorio de github nativescript-todo-aplicación.

1. Primeros pasos con NativeScript

Debe configurar su entorno de desarrollo antes de poder hacer nada.

Instalar Node.js® y npm si aún no están en su máquina.

Si no tiene instalado NativeScript, puede instalarlo instalando Node.js.

Para instalar NativeScript, ejecute:

$ npm install -g nativescript

El paso final es instalar la herramienta de desarrollo para cada plataforma en la que desee implementar. Para Android, este es el SDK de Android. Para iOS, es XCode. Puedes seguir el guía de instalación en el sitio web de NativeScript para obtener instrucciones más detalladas sobre cómo configurar el software necesario para su entorno de desarrollo.
Una vez que haya configurado su entorno, ejecute:

$ tns doctor

2. Crear una nueva aplicación para Android e iOS

Antes de que podamos comenzar a codificar, necesitamos crear un nuevo proyecto. Esto se puede hacer ejecutando lo siguiente desde el Símbolo del sistema (Windows) o Terminal (Linux y Mac):

$ tns create TodoApp $ cd TodoApp
$ tns platform add android $ tns platform add ios (If you're not using a Mac, you cannot add and build for the iOS platform.)

3. Instale los complementos nativos necesarios

RadSideCajón es un componente que puede mostrar una vista oculta que contiene la interfaz de usuario de navegación o la configuración común. Una aplicación popular que utiliza la interfaz de usuario del cajón es la aplicación Android Play Store.

RadListView for NativeScript es un componente de lista de virtualización que proporciona las características más populares asociadas con escenarios donde se usa una lista de elementos. Todas estas funciones están integradas en un control con la idea de ahorrar tiempo al desarrollador y brindar una mejor experiencia. Las características principales del control incluyen:

  • animaciones de elementos
  • diferentes diseños y orientaciones
  • deslizar, reordenar, arrastrar, actualizar la lista al deslizar o cargar más elementos solo cuando sea necesario.

RadDataForm El complemento proporciona un enfoque fácil y versátil para crear formularios móviles basados ​​en los miembros públicos de un objeto de datos proporcionado. Utilice DataForm para:

  • Enlace un formulario a un objeto de datos con una sola línea de código;
  • Aproveche los más de 15 editores integrados (o proporcione su propio editor personalizado);
  • Crea grupos de editores, permite que se colapsen y dales estilo;
  • Mostrar un formulario en modo de solo lectura;
  • Tome el control de los datos recopilados con la validación de datos integrada: utilice un validador proporcionado o cree uno personalizado.

La aplicación que estamos creando utilizará el almacenamiento persistente, que guardará nuestros datos incluso después de que nuestra aplicación se haya cerrado. Después de todo, no queremos perder los datos de nuestra lista de tareas después de reiniciar nuestra aplicación.

En esta aplicación, estamos utilizando el SQLite de script nativo. Esto se puede hacer ejecutando lo siguiente desde el Símbolo del sistema (Windows) o Terminal (Linux y Mac):

$ tns plugin add nativescript-ui-sidedrawer $ tns plugin add nativescript-ui-listview $ tns plugin add nativescript-ui-dataform $ tns plugin add nativescript-sqlite

4. Configuración del enrutador angular

src/app/app-routing.módulo.ts

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from 'nativescript-angular/router'; 
const routes: Routes = [ 
      { 
            	path: '', 
                redirectTo: 'todo-list', 
                pathMatch: 'full' 
            }, 
            { 
            	path: 'todo-list', 
                loadChildren: './todo-list/todo-list.module#TodoListModule' 
            }, 
            { 
            	path: 'todo-detail', 
                loadChildren: './todo-detail/todo-detail.module#TodoDetailModule' }
]; 
@NgModule({ 
  imports: [NativeScriptRouterModule.forRoot(routes)], 
    exports: [NativeScriptRouterModule],
})
export class AppRoutingModule { }

5. Crear el módulo de funciones TodoListModule

src/app/todo-list/todo-list.module.ts

import { NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { NativeScriptUIListViewModule } from 'nativescript-ui-listview/angular';
import { TodoListRoutingModule } from './todo-list-routing.module';
import { TodoListComponent } from './todo-list.component';
import { TodoService } from '../services/todo.service'; 
@NgModule({ 
  imports: [
    	NativeScriptCommonModule, 
        TodoListRoutingModule], 
        NativeScriptUIListViewModule 
        ], 
        declarations: [TodoListComponent], 
        schemas: [NO_ERRORS_SCHEMA], 
        providers: [TodoService]
})
export class TodoListModule { }

6. Configurar las rutas del módulo de funciones

src/app/todo-list/todo-list-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { TodoListComponent } from './todo-list.component'; 
const routes: Routes = [ 
  { 
    path: '', 
    component: 'TodoListComponent' 
    }
]; 
@NgModule({ 
  imports: [NativeScriptRouterModule.forRoot(routes)], 
    exports: [NativeScriptRouterModule] 
})
export class TodoListRoutingModule { }

7. Creación del componente TodoList

src/app/todo-list/todo-list.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { RouterExtensions } from 'nativescript-angular/router';
import { ObservableArray } from 'tns-core-modules/data/observable-array';
import { DataItem } from './dataItem';
import * as app from 'application';
import { RadSideDrawer } from 'nativescript-ui-sidedrawer';
import { TodoService } from '../services/todo.service';
import { ListViewEventData, RadListView } from 'nativescript-ui-listview';
import { RadListViewComponent } from 'nativescript-ui-listview/angular';
import { View } from 'tns-core-modules/ui/core/view';
import * as dialogs from 'ui/dialogs'; 
@Component({ 
  selector: 'todo-list', 
    moduleId: module.id, 
    templateUrl: './todo-list.component.html', 
    styleUrls: ['todo-list.component.css']
}) 
export class TodoListComponent implements OnInit { 
  private _dataItems: ObservableArray<DataItem>; 
    public data: DataItem[] = []; 
    @ViewChild('myListView') listViewComponent: RadListViewComponent; 
    
   constructor( private _routerExtensions: RouterExtensions , private todoService: TodoService ) { } 
    get dataItems(): ObservableArray<DataItem> { 
    return this._dataItems; 
    } 
    ngOnInit(): void { 
    this.loadTodoList(); 
    } 
    loadTodoList() { 
    this.todoService.fetch().then((res) => { 
    this._dataItems = new ObservableArray(res); }); 
    } 
    onDrawerButtonTap(): void { 
    const sideDrawer = <RadSideDrawer>app.getRootView(); 
    sideDrawer.showDrawer(); 
    } 
    create(): void { 
    this._routerExtensions.navigate(['/todo-detail'], 
    { 
    animated: true, 
    transition: { 
    	name:'slide', 
        duration: 200, 
        curve:'ease' 
        } 
     }); 
  } 
  public onCellSwiping(args :ListViewEventData) { 
  	var swipeLimits = args.data.swipeLimits; 
    var currentItemView = args.object; 
    var currentView; 
    
    if (args.data.x > 200) { console.log('Notify perform left action'); 
    } else if (args.data.x < -200) { 
    console.log('Notify perform right action'); 
    } 
 } 
 public onSwipeCellStarted(args :ListViewEventData) { 
 	var swipeLimits = args.data.swipeLimits; 
    var swipeView = args['object']; 
    var leftItem = swipeView.getViewById<View>('edit-view'); 
    var rightItem = swipeView.getViewById<View>('delete-view'); 
    swipeLimits.left = leftItem.getMeasuredWidth(); 
    swipeLimits.right = rightItem.getMeasuredWidth(); 
    swipeLimits.threshold = leftItem.getMeasuredWidth() / 2; 
} 
public onLeftSwipeClick(args :ListViewEventData) { 
  var id = args.object.bindingContext.id;
    this.listViewComponent.listView.notifySwipeToExecuteFinished();
    this._routerExtensions.navigate(['/todo-detail'], { 
    	queryParams:{id: id }, 
        animated: true, 
        transition: { 
        	name:'slide', 
            duration: 200, 
            curve:'ease' 
            } 
        }); 
} 
public onRightSwipeClick(args) { 
  var id = args.object.bindingContext.id; 
    dialogs.confirm({ 
    title: 'Confirm Delete', 
    message: 'Are you sure you want to delete this item?', 
    okButtonText: 'Ok', 
    cancelButtonText: 'Cancel' 
    }).then(result => { 
   	 if (result) { 
    	this.todoService.deleteRecord(id).then((res) => { 
        	if (res.success) {
       this._dataItems.splice(this._dataItems.indexOf(args.object.bindingContext), 1); 
        } 
      }); 
    } 
  }); 
 }
}

8. Ejecución y depuración de la aplicación

Puede ejecutar la aplicación en su dispositivo ejecutando:

$ tns run

y luego la plataforma donde desea implementar. Aquí hay un ejemplo para Android:

$ tns run android

Esto instala automáticamente la plataforma Android por usted si aún no se ha instalado y luego ejecuta la aplicación en su dispositivo Android una vez instalado.

Una vez que la aplicación se está ejecutando, puede ejecutar tns livesync android –watch para actualizar automáticamente la aplicación cada vez que realice cambios en los archivos de origen.

NativeScript permite a los desarrolladores depurar su aplicación. Esto se hace con las herramientas de desarrollo de Chrome. Hay dos formas de hacer esto:

  • Si ya tiene una aplicación en ejecución, puede abrir una nueva ventana de terminal y ejecutar
$ tns debug android --start
  • Si aún no tiene una aplicación ejecutándose, use
$ tns debug android --debug-brk

Puede descargar el código fuente del Aplicación NativeScript Angular Todo desde el repositorio de github nativescript-todo-aplicación. Así que estos son los 8 sencillos pasos para construir un Aplicación móvil NativeScript Angular Todo.

Similar Posts

Leave a Reply

Your email address will not be published.