Backend Loopback

Presentado por

Capacitaciones GoTouch

Taller:  Desarrollo de

Generalidades

Loopback

Backend

Herramientas de desarrollo

Aplicaciones Nativas

  • Desarrollada en el lenguaje de programación de la plataforma original.
  • Con buenas prácticas de programación, se puede sacar el mayor rendimiento en los dispositivos.

  • Entorno de desarrollo integrado muy definido para cada plataforma.

Híbridas

Aplicaciones

Android

Híbridas

Aplicaciones

Lenjuage de programación oficial:  Java

 

Plataformas:

 

IDE: Android Studio

 

Android

Híbridas

Aplicaciones

/java

IOS

Híbridas

Aplicaciones

Lenguaje de programación oficial: Swift, Objective-C

 

Plataformas: Mac

 

IDE: XCode

Consecuencias del desarrollo de aplicaciones nativas

  1. Desarrollo de dos soluciones.
  2. Tecnologías totalmente diferentes.
  3. Modelos de programación distintos.
  4. El doble de la carga de Trabajo.

Híbridas

Aplicaciones

Apps Híbridas

Híbridas

Aplicaciones

Fundamentos

¿Cómo funcionan?

Son aplicaciones hechas con herramientas de desarrollo web.

Híbridas

Aplicaciones

¿Cómo funcionan? pt 2

Son aplicaciones hechas con herramientas de desarrollo web.

Híbridas

Aplicaciones

  • Depuración en tiempo real.
  • No necesario instalar el app para cada cambio.

¿Cómo funcionan? pt 3

Son aplicaciones hechas con herramientas de desarrollo web.

Híbridas

Aplicaciones

Creación de un proyecto Nativo (Android, IOS)

Tiempo de desarrollo.

Visualización mediante el WebView

¿Qué herramientas usamos?

  • Git como versionamiento de los proyectos de Ionic.

Híbridas

Aplicaciones

  • Principal fuente de todos los recursos que utilizamos para desarrollar aplicaciones híbridas.
  • GoTouch tiene un repositorio privado de todos los proyectos.

GIT

¿Qué herramientas usamos?

  • Node.js es un runtime de JavaScript creado en el motor de JavaScript V8 de Chrome.

  • Node.js utiliza un modelo de E/S no bloqueado y controlado por eventos que lo hace liviano y eficiente.

Híbridas

Aplicaciones

NODE JS

¿Qué herramientas usamos?

  • Es el registro de software más grande del mundo.

  • Los desarrolladores de código abierto  usan npm para compartir y tomar prestados paquetes.

  • El CLI se ejecuta desde una terminal. Así es como la mayoría de los desarrolladores interactúan con npm.

Híbridas

Aplicaciones

NPM

¿Qué herramientas usamos?

  • Ionic es un marco de desarrollo de aplicaciones móviles HTML5 destinado a la creación de aplicaciones móviles híbridas.
  • Ionic viene con elementos de interfaz de usuario móvil de estilo muy nativo y diseños que obtendría con un SDK nativo en iOS o Android.

 

 

Híbridas

Aplicaciones

IONIC Framework

¿Qué herramientas usamos?

 

  • Android Studio proporciona las herramientas más rápidas para crear aplicaciones en cada tipo de dispositivo Android.

 

 

 

Híbridas

Aplicaciones

SDK Android

¿Cómo configuramos un DE ?

Híbridas

Aplicaciones

¿Cómo depuramos nuestras apps?

Híbridas

Aplicaciones

  • El navegador permite visualizar e interactuar con la aplicación.
  • Pues la mayor parte de las funcionalidades están implementadas en JavaScript

Entrenamiento

Híbridas

Aplicaciones

Tecnologías Web

Trabajemos con HTML5

Instrucciones en el siguiente enlace: https://goo.gl/pKsSTA

Híbridas

Aplicaciones

No olviden preguntar en caso de dudas.

Trabajemos con Estilos

Híbridas

Aplicaciones

Instrucciones en el siguiente enlace: https://goo.gl/pZvTTR

No olviden preguntar en caso de dudas.

Trabajemos con TypeScript

El siguiente tutorial está tomado de esta referencia.

Híbridas

Aplicaciones

Utilizaremos NPM

npm install -g typescript

Es importante tener  Node.JS instalado.

Trabajemos con TypeScript

El siguiente tutorial está tomado de esta referencia.

Híbridas

Aplicaciones

creamos un archivo con extensión .ts

nano index.ts

Hazlo en una carpeta dedicada sólo a este proyecto.

Trabajemos con TypeScript

El siguiente tutorial está tomado de esta referencia.

Híbridas

Aplicaciones

Introducimos la siguiente función

Hazlo en una carpeta dedicada sólo a este proyecto.

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Trabajemos con TypeScript

El siguiente tutorial está tomado de esta referencia.

Híbridas

Aplicaciones

Revisemos la terminal y veamos el resultado.

ls

> index.js index.ts

Trabajemos con TypeScript

Híbridas

Aplicaciones

Usemos el html creado en el paso anterior y agregamos el script.

.JS

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>


        <!-- todo lo demás -->

	<script type="text/javascript" src="index.js"></script>
</body>
</html>

Trabajemos con TypeScript

Híbridas

Aplicaciones

Modificamos nuestro script y provemos el tipado.

.TS

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

Trabajemos con TypeScript

Híbridas

Aplicaciones

Datos estructurados en typescript

.TS

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

Trabajemos con TypeScript

Híbridas

Aplicaciones

Datos estructurados en typescript

.TS

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Juan", "E.", "Navarro");

document.body.innerHTML = greeter(user);

Consumo de datos API

Híbridas

Aplicaciones

Utilizaremos NPM

npm install -g json-server

Es importante tener  Node.JS instalado.

Consumo de datos API

Híbridas

Aplicaciones

Definamos datos estructurados

Notación de JSON

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Consumo de datos API

Híbridas

Aplicaciones

Liberemos dichos datos a un servidor.

http://localhost:3000/posts/1

json-server --watch db.json

Prueba del servidor

Iniciemos

Híbridas

Aplicaciones

Desarrollo en Ionic 2

¿Qué vamos a realizar?

Vamos a realizar un  diccionario Español-Bribri.

 

Híbridas

Aplicaciones

¿Qué recursos tenemos?

-Ya hemos trabajado con html5, css y typeScript asi que ya tenemos la base del desarrollo.

-Tenemos instalado las herramientas

-Un editor de texto

 

Híbridas

Aplicaciones

¿Cuál es nuestra fuente de datos?

Vamos a utilizar JsonServer como el ejercicio pasado.

La nueva base de datos es esta:

 

Híbridas

Aplicaciones

Pantalla principal

Híbridas

Aplicaciones

Desarrollo en Ionic 2

Iniciemos un proyecto

Lo primero que vamos a hacer es crear nuestra aplicacion de ionic ejecutando en consola.

Híbridas

Aplicaciones

Integración de versionamiento de Código

Vamos a irnos a https://github.com/BerthaBrenes/Taller-Ionic

y le damos fork.

Híbridas

Aplicaciones

Compilación

Híbridas

Aplicaciones

Desarrollo en Ionic 2

Chatbots

Taller

Compilacion de Ionic

Cada vez que queramos correr esta aplicacion debemos ejecutar por un lado el server y por otro el app

$ Ionic serve
$ json-server db.json

Instalación

Híbridas

Aplicaciones

Desarrollo en Ionic 2

Made with Slides.com