Esta clase es la corrección de la mitad de la clase anterior.
Introducción
Qué aprenderás sobre API con Sails.js
Presentando el proyecto
Comenzando con Sails
Introducción a Sails.js
Estructura de archivos
Preparación del ambiente de desarrollo
Setup de Espacio de Trabajo
Generando rutas REST con blueprint
Instalación de MongoDB
Conexión a Mongo
Instalar MySQL y usarlo con Sails (a través de WaterLine)
CRUD
Entendiendo operaciones CRUD
Crear modelo de rodada
Crear app de Ionic
Obtener todas las Rodadas: preparando la aplicación para mostrar datos
Obtener todas las Rodadas: mostrando los datos
Crear Rodada: recibiendo parámetros desde la URL
Crear Rodada: enviando información desde el formulario
Actualizar Rodada
Eliminar Rodadas
Autenticación y Usuarios
Obtener Rodada
Crear Modelo y Controller de Usuarios
Implementar validación de modelo
Nueva versión de la librería Joi
Crear Usuario
Cifrado de contraseña
Implementación de Login
Sistemas Externos
Uso de JSON Web Token
Policies: verificar si usuario está loggeado
Agregar usuario a Ride
Preparando la App para implementar el Login y Sign up
Implementando Login
Implementando Sign up
Agregar puntos de Rodada
Obtener API Keys para Clima y Distancias
Integración Google Geocoding: definiendo la lógica
Integración Google Geocoding: probando la funcionalidad
Integración Weather API
Desplegar clima, distancia y tiempo en cada punto de Rodada
Cierre
Cierre
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En el desarrollo de aplicaciones, entender cómo manejar datos compuestos es fundamental para gestionar de manera eficiente la información que llega a tu aplicación. Ionic, al igual que otros frameworks, ofrece herramientas para ello. Aquí te explicaré cómo puedes implementar un modelo de datos utilizando Ionic, llevando tu proyecto al siguiente nivel.
Los modelos en Ionic son estructuras que encapsulan datos y sus características. Por convención, es buena práctica acompañar el modelo con un objeto vacío de ese modelo. Así se logra una estructura clara y fácil de mantener en el código.
export class Raiz {
id?: string;
wayPoints?: any[];
aerod?: string;
startPoint?: string;
endPoint?: string;
}
const defaultRaiz: Raiz = {
id: '',
startPoint: '',
endPoint: ''
};
Aquí, el uso del operador ?
denota que el atributo no es requerido. De este modo, flexible y extendible, puedes definir estructuras de datos adaptables a tus necesidades.
Después de crear un modelo, necesitas integrarlo en los servicios para gestionar eficientemente la información. Así es como se hace en Ionic:
import { Injectable } from '@angular/core';
import { Raiz } from '../models/raiz';
@Injectable({
providedIn: 'root'
})
export class RaizService {
private raices: Raiz[] = [];
constructor() {}
getRaices(): Raiz[] {
return this.raices;
}
}
Aquí se indica que el servicio utiliza una lista de modelos Raiz
, permitiendo la manipulación centralizada de estos datos.
El paso final es la vinculación de los datos obtenidos del modelo en tu interfaz HTML. Esto se logra utilizando directivas de Angular, que permiten listar elementos dinámicos:
<div *ngFor="let raiz of raices">
<h1>{{raiz.id}}</h1>
<p>{{raiz.startPoint}} to {{raiz.endPoint}}</p>
</div>
Utiliza *ngFor
para iterar sobre la lista de raices
y desplegar su contenido. De esta manera, el usuario final podrá ver los elementos en su aplicación.
Cuando trabajas con servicios y modelos, es posible que experimentes problemas como variables que aparecen no definidas o servicios que no responden. Algunas estrategias de solución incluyen:
El dominar cómo se implementan modelos y servicios en Ionic no solo te permite estructurar mejor los datos en tus aplicaciones, sino que mejora la eficiencia y escalabilidad del código. ¡Continúa explorando y profundizando en estas habilidades para impulsarte como desarrollador de Ionic!
Aportes 6
Preguntas 0
Esta clase es la corrección de la mitad de la clase anterior.
Recuerden reiniciar el servidor de sails, para que tome los parametros de CORS.
Por que mejor no combinaron los dos videos para que solo vieramos uno 😦
Alguien me puede indicar como agregó esa sintaxis de angular en la etiqueta <ion-card> 😦
✌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?