Desarrollo, General, Tecnología, Tutoriales

Como unir AngularJS y Cordova para generar aplicaciones móviles (parte 2)

29 agosto, 2018 | ercobo

Y aquí seguimos… dos entradas seguidas… guau…

Venimos de Como unir AngularJS y Cordova para generar aplicaciones móviles (parte 1) y vamos a continuar donde lo dejamos.

Hasta el momento hemos creado los dos proyectos y unido los archivos base package.json.

Ahora es el momento de continuar.

Para que todo funcione, hay que hacer un par de modificaciones en unos archivos de angular.

En el archivo main.ts del proyecto de angular, hay que modificarlo de tal forma que quede similar al siguiente:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

let onDeviceReady = () =&gt; {
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err =&gt; console.log(err));
};

document.addEventListener('deviceready', onDeviceReady, false);

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

let onDeviceReady = () => {

platformBrowserDynamic().bootstrapModule(AppModule)

.catch(err => console.log(err));

};

document.addEventListener('deviceready', onDeviceReady, false);

Con esto le indicamos que Angular estara atento al evento onDeviceReady que se generará en la aplicación móvil. Y le indicamos que fije un vigilante (listener) al evento “deviceready”.

Despues, deberemos ir al index.html y efectuar un par de cambios. El primero es cambiar la etiqueta “base” para que la ruta haga referencia al directorio actual donde se encuentre la aplicación (esto tiene sentido ya que utilizará la carpeta donde se instale la aplicación en el dispositivo). Así que hay que hacer que quede así:

&lt;base href="./"&gt;

1	<base href="./">

Despues debemos añadir la referencia al archivo “cordova.js” que será el encargado de proporcionar la interfaz con todos los plugins de Cordova y al dispositivo.

&lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;

1	<script type="text/javascript" src="cordova.js"></script>

Con estos pasos ya estaríamos en condiciones de compilar y probar la aplicación, por lo que será necesario instalar todas las dependencias de node, compilar angular, añadir las plataformas a probar en cordova y compilar o correr el proyecto. Los pasos básicamente con los siguientes comandos (1 linea por comando)

npm install
ng build
cordova platform add browser
cordova platform add android

npm install

ng build

cordova platform add browser

cordova platform add android

Si queremos probar en modo local, se puede ejecutar un servidor local que correrá en el puerto 8000 con

cordova serve

1	cordova serve

Si tenemos un dispositivo (Android por ejemplo) conectado al pc y con la depuración y demás requisitos instalados, y queremos ejecutar la aplicación sobre el, se puede ejecutar el siguiente comando.

cordova run android

1	cordova run android

A partir de este punto entramos en las consideraciones para el desarrollo, aquí es donde probablemente haya quien lo haga de forma diferente y mejor. Yo por mi parte para ir haciendo los cambios y poderlos observar lo que hago es situar a angular en modo compilación continua cada vez que detecta cambios en el código fuente con:

ng build --watch

1	ng build --watch

Despues arranco el servidor Cordova con el comando anterior serve, y lo que hago es que cada vez que hago algún cambio relevante y quiero probarlo en cordova, ejecuto el comando

cordova prepare

1	cordova prepare

O bien si solo voy a colocar una plataforma (Android por ejemplo)

cordova prepare android

1	cordova prepare android

Y después, según la plataforma, o bien ya puedo comprobarlo directamente (en el navegador) o vuelvo a ejecutar el run del dispositivo.

cordova run android

1	cordova run android

Nota: Un último apunte. Si teneis instalado el sdk de android y teneis algún android virtual, el siguiente comando arranca ese dispositivo virtual para poder efectuar el desarrollo si no teneis uno físico disponible.

cordova emulate android

1	cordova emulate android

En otra entrada continuaré con este desarrollo, y escribiré sobre cómo he conseguido hacer una integración continua con este proyecto, Visual Studio Team Services y HockeyApp, para poder tener Integración continua con el repositorio y poder distribuir las apps que se hagan por los betatesters antes de subirlo a las tiendas. Ese paso también lo abordaré… cuando aprenda a hacerlo jeje…

¡Muchos saludos y gracias por leerme!

Desarrollo, Tecnología, Tutoriales

Laravel. Implementando CORS

27 mayo, 201727 mayo, 2017 | ercobo

Un pequeño inciso.

Al desarrollar la parte con angular y tratar de realizar el login y que funcione correctamente con la API, os podreis encontrar con el problema de que las peticiones desde el login de angular a la api os den un resultado diciendo que son fallidas porque se piden desde otro recurso (otro servidor, otra ip, etc).

Al final, para sitios de desarrollo, lo mejor es que activeis la cabecera “Access-Control-Allow-Origin” en el servidor que esteis utilizando.

Por ejemplo en apache incluyendo en el htaccess de la api esto:

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

Header set Access-Control-Allow-Origin "*"

Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Header always set Access-Control-Max-Age "1000"

Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

y ademas, os recomiendo instalaros alguna extensión que os permita manejar el tema de cors a vuestro antojo.

En firefox he instalado esta: https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

Y en Google Chrome esta: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=es

Si veis que os salen este tipo de errores, antes de maldecir a vuestro servidor o vuestro pc, comprobad esto y al menos dejadlo “libre” en vuestro servidor de desarrollo, en el de producción será otra cosa.

Saludos.

Desarrollo, Tecnología, Tutoriales

Angular. Entornos (environments)

25 mayo, 2017 | ercobo

Antes de continuar con el desarrollo de angular, hemos de colocar un par de cosas.

Hasta este momento hemos estado desarrollando la parte de angular de forma local, es decir, todo funcionaba dentro de la propia app e incluso al compilarla para tenerla en el servidor de producción las rutas y demas factores hacían referencia a rutas “locales”.

Pero para poder empezar a consumir los datos de la api que estamos desarrollando en paralelo en las entradas referidas a Laravel, hemos de comenzar a separar los entornos de “desarrollo” y de “producción”.

En angular, al crear un proyecto, se habrá creado una carpeta y unos archivos llamados “environment”, que serán los que usaremos para poder definir las variables de entorno que vayamos necesitando para el proyecto.

Lo normal es encontrarnos con dos archivos, uno para el entorno de desarrollo, “environment.ts”, y otro para producción, “environment.prod.ts”.

En este momento la unica variable que nos va a hacer falta es la url de nuestra api, por lo que modificaremos los archivos para incluir lo siguiente:

apiUrl:'http://urltoapi/'

1	apiUrl:'http://urltoapi/'

Cambiando “urltoapi” a los valores adecuados para nuestros servidores.

Así que, una vez hechos estos cambios, hasta ahora utilizabamos

ng build

ng build

Para construir la aplicación, sin embargo a partir de ahora le indicaremos que use el entorno de producción. Sin parámetros usará el archivo “environment.ts” que es el de desarrollo. De esta forma el comando resultante es:

ng build --env=prod

1	ng build --env=prod

Y si ademas queremos minimizar los archivos para que queden compilados de manera que ocupen lo mínimo posible usaremos:

ng build --prod --env=prod

1	ng build --prod --env=prod

En estos archivos podremos colocar las variables que necesitemos, a la hora de usarlas será necesario incluir en nuestros archivos de servicios, controladores, etc… el siguiente codigo:

import { environment } from '../../environments/environment';

1	import { environment } from '../../environments/environment';

Así podremos utilizar las variables definidas en estos archivos de la forma usual.

Desarrollo, Tecnología, Tutoriales

Angular. Implementando Login.

18 mayo, 201718 mayo, 2017 | ercobo

Hasta este momento hemos tenido siempre visible nuestra app angular con la parte publica (la que va a ver cualquier usuario que entre a la app).

¿Qué ocurre si vamos a implementar una administración?

Bueno, pues es el momento de empezar a separar cosas y usar las rutas de Angular para el funcionamiento. Lo que vamos a hacer es separar nuestra app, de momento, en tres rutas: “client” (para los visitantes), “login”, para el formulario de entrada a la administración, y “admin” para la administración en si.

Para ello, hay que modificar un poco nuestra aplicación.

Comenzamos por crear un nuevo modulo con ng generate module routes. Con esto generaremos un nuevo archivo en el que vamos a colocar la logica de nuestras rutas de aplicación para que pueda funcionar.

A partir de aquí, tendremos que rellenar todos los campos para que las rutas sean reconocidas y utilizadas en nuestra app. Así que vamos por pasos:

routes\routes.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './../admin/main/main.component';
import { LoginComponent } from './../common/login/login.component';
import { IndexComponent } from './../frontend/index/index.component';

// - Routes instead of RouteConfig
// - RouterModule instead of provideRoutes
const routes: Routes = [
  {
    path: 'admin',
    component: MainComponent,
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'client',
    component: IndexComponent,
  },
  {
    path: '',
    redirectTo: 'client',
    pathMatch: 'full'
  },
];

// - Updated Export
export const routing = RouterModule.forRoot(routes);


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class RoutesModule { }

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { Routes, RouterModule } from '@angular/router';

import { MainComponent } from './../admin/main/main.component';

import { LoginComponent } from './../common/login/login.component';

import { IndexComponent } from './../frontend/index/index.component';

// - Routes instead of RouteConfig

// - RouterModule instead of provideRoutes

const routes: Routes = [

{

path: 'admin',

component: MainComponent,

{

path: 'login',

component: LoginComponent

{

path: 'client',

component: IndexComponent,

{

path: '',

redirectTo: 'client',

pathMatch: 'full'

];

// - Updated Export

export const routing = RouterModule.forRoot(routes);

@NgModule({

imports: [

CommonModule

declarations: []

})

export class RoutesModule { }

app.component.html. Este únicamente necesita estar compuesto por

JavaScript

<router-outlet></router-outlet>

1

<router-outlet></router-outlet>
main.ts. Aquí indicaremos nuestro modulo de rutas y que se utilicen en el inicio del modulo de la app.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { routing } from './app/routes/routes.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule, [routing]);

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

import { routing } from './app/routes/routes.module';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule, [routing]);

app.module.ts. Aqui tenemos que declarar las rutas e importarlas para que sean usadas correctamente. Sino habrá errores.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './routes/routes.module'; // ROUTING HERE!

import { AppComponent } from './app.component';
import { NavComponent } from './frontend/nav/nav.component';
import { DishesComponent } from './frontend/dishes/dishes.component';
import { DrinksComponent } from './frontend/drinks/drinks.component';
import { WinesComponent } from './frontend/wines/wines.component';
import { ContactComponent } from './frontend/contact/contact.component';
import { FooterComponent } from './frontend/footer/footer.component';
import { LoginComponent } from './common/login/login.component';
import { MainComponent } from './admin/main/main.component';
import { IndexComponent } from './frontend/index/index.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    DishesComponent,
    DrinksComponent,
    WinesComponent,
    ContactComponent,
    FooterComponent,
    LoginComponent,
    MainComponent,
    IndexComponent,
  ],
  imports: [
    BrowserModule,
    routing,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { routing } from './routes/routes.module'; // ROUTING HERE!

import { AppComponent } from './app.component';

import { NavComponent } from './frontend/nav/nav.component';

import { DishesComponent } from './frontend/dishes/dishes.component';

import { DrinksComponent } from './frontend/drinks/drinks.component';

import { WinesComponent } from './frontend/wines/wines.component';

import { ContactComponent } from './frontend/contact/contact.component';

import { FooterComponent } from './frontend/footer/footer.component';

import { LoginComponent } from './common/login/login.component';

import { MainComponent } from './admin/main/main.component';

import { IndexComponent } from './frontend/index/index.component';

@NgModule({

declarations: [

AppComponent,

NavComponent,

DishesComponent,

DrinksComponent,

WinesComponent,

ContactComponent,

FooterComponent,

LoginComponent,

MainComponent,

IndexComponent,

imports: [

BrowserModule,

routing,

FormsModule,

HttpModule

providers: [],

bootstrap: [

AppComponent

]

})

export class AppModule { }

Ahora generaremos los componentes que formarán el login y la entrada a la administración.

ng generate component common\login. Con esto generaremos el componente del formulario de login.
ng generate component admin\main. Con esto generamos el componente de entrada a la administración.
ng generate service services\login. Con esto generaremos el servicio que se encargara de procesar los datos.

Y finalmente los poblaremos. De momento en la clase login está una clase “User” con los datos a pelo, en otra entrega utilizaremos un servicio para consumir los datos de la API que creamos con Laravel para hacer el login.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

export class User {
  constructor(
    public email: string,
    public password: string) { }
}

var users = [
  new User('admin@admin.com','adm9'),
  new User('user1@gmail.com','a23')
];

@Injectable()
export class LoginService {

  constructor(
    private _router: Router){}

  logout() {
    localStorage.removeItem("user");
    this._router.navigate(['login']);
  }

  login(user){
    var authenticatedUser = users.find(u => u.email === user.email);
    if (authenticatedUser && authenticatedUser.password === user.password){
      localStorage.setItem("user", authenticatedUser.email);
      this._router.navigate(['admin']);
      return true;
    }
    return false;

  }

   checkCredentials(){
    if (localStorage.getItem("user") === null){
        this._router.navigate(['login']);
    }
  }
}

import { Injectable } from '@angular/core';

import { Router } from '@angular/router';

export class User {

constructor(

public email: string,

public password: string) { }

}

var users = [

new User('admin@admin.com','adm9'),

new User('user1@gmail.com','a23')

];

@Injectable()

export class LoginService {

constructor(

private _router: Router){}

logout() {

localStorage.removeItem("user");

this._router.navigate(['login']);

}

var authenticatedUser = users.find(u => u.email === user.email);

if (authenticatedUser && authenticatedUser.password === user.password){

localStorage.setItem("user", authenticatedUser.email);

this._router.navigate(['admin']);

return true;

}

return false;

}

checkCredentials(){

if (localStorage.getItem("user") === null){

this._router.navigate(['login']);

}

import { Component, ElementRef, OnInit } from '@angular/core';
import {LoginService, User} from '../../services/login.service';

@Component({
  selector: 'app-login',
  providers: [LoginService],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    public user = new User('','');
    public errorMsg = '';

    constructor(private _service:LoginService) {

    }

    login() {
        if(!this._service.login(this.user)){
            this.errorMsg = 'Failed to login';
        }
    }

    ngOnInit() {
    }

}

import { Component, ElementRef, OnInit } from '@angular/core';

import {LoginService, User} from '../../services/login.service';

@Component({

selector: 'app-login',

providers: [LoginService],

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

public user = new User('','');

public errorMsg = '';

constructor(private _service:LoginService) {

}

if(!this._service.login(this.user)){

this.errorMsg = 'Failed to login';

}

ngOnInit() {

}

<div class="container">
    <div class="title">
        Welcome
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="input-field col s12">
                <input [(ngModel)]="user.email" id="email" type="email" class="validate">
                <label for="email">Email</label>
            </div>
        </div>

        <div class="row">
            <div class="input-field col s12">
                <input [(ngModel)]="user.password" id="password" type="password" class="validate">
                <label for="password">Password</label>
            </div>
        </div>

        <span>{{errorMsg}}</span>
        <button (click)="login()" class="btn waves-effect waves-light" type="submit" name="action">Login</button>
    </div>
</div>

Welcome

</div>

<label for="email">Email</label>

</div>

<label for="password">Password</label>

</div>

<span>{{errorMsg}}</span>

<button (click)="login()" class="btn waves-effect waves-light" type="submit" name="action">Login</button>

</div>

main.component.ts

import { Component, OnInit } from '@angular/core';
import {LoginService, User} from '../../services/login.service';

@Component({
  selector: 'app-login',
  providers: [LoginService],
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor(
        private _service:LoginService){}

    ngOnInit(){
        this._service.checkCredentials();
    }

    logout() {
        this._service.logout();
    }

}

import { Component, OnInit } from '@angular/core';

import {LoginService, User} from '../../services/login.service';

@Component({

selector: 'app-login',

providers: [LoginService],

templateUrl: './main.component.html',

styleUrls: ['./main.component.css']

})

export class MainComponent implements OnInit {

constructor(

private _service:LoginService){}

ngOnInit(){

this._service.checkCredentials();

}

logout() {

this._service.logout();

}

main.component.html

<div class="container">
    <div class="content">
        <span>Congratulations, you have successfully logged in!!</span>
        <br />
        <a (click)="logout()" href="#">Click Here to logout</a>
    </div>
</div>

<span>Congratulations, you have successfully logged in!!</span>

<br />

<a (click)="logout()" href="#">Click Here to logout</a>

</div>

Con todos estos pasos, si comprobamos en nuestro navegador (teniendo encendido el servidor de angular de desarrollo, claro, con npm start), podremos ver que las rutas funcionan.

La ruta raíz (“/” o ” “) nos redirige automaticamente a la parte cliente (lo que hemos estado personalizando hasta ahora).

La ruta de administración (“admin”) nos redirige al formulario de login (ruta “login”) si no nos hemos autentifcado, y nos muestra el mensaje de autenticación correcta y el link de logout.

Y con esto estamos en condiciones de ir desarrollando tanto la administración como la parte cliente.

En proximas entradas iremos viendo componentes, servicios y datos necesarios. Tambien volveremos a Laravel cuando haya detalles que impliquen nuevas situaciones con la API.

Muchas gracias por seguir hasta aquí 🙂

Actualizacion: una cosa más, para que funcione en el servidor apache, una vez compilada la web con ng build --prod es necesario que exista un archivo .htaccess con el siguiente contenido. Sino, las rutas no funcionaran:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} -s [OR]

RewriteCond %{REQUEST_FILENAME} -l [OR]

RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

Desarrollo, Tecnología, Tutoriales

AngularJS. Añadiendo el menú superior.

14 mayo, 2017 | ercobo

Una vez que en la entada anterior hemos conseguido que se integre bootstrap con angular, es el momento de comenzar a personalizar la aplicación para nuestros fines.

Como voy a utilizar parte de un desarrollo anterior hecho con Codeigniter, Bootstrap y JQuery, parte del código está ya hecho, solo hay que adaptarlo a nuestra nueva disposición para que se muestre adecuadamente.

Pero antes de empezar, habrá que preparar el entorno. En mi caso he decidido separar las funciones de “frontend” y de “backend”, por lo que voy a generar una estructura de carpetas dentro del proyecto de la forma adecuada. También voy a colocar los recursos del proyecto en una carpeta “assets”, que a su vez tendré separada por los elementos que lo componen y por las dos funciones.

Al final nos encontramos en este momento con una estructura como la siguiente:

Como se puede ver, “assets” está separado en los tipos de elementos (css, js, media), y a su vez “media” está separado en sus tipos de elementos (iconos, imagenes, videos, etc), y dentro de cada una esta dividida por su ámbito de accion (frontend, backend y global). Esta estructura es la elegida por mi, por lo que cada cual puede optar por crear la que quiera, pero para sencillez a la hora de encontrar los elementos, recomiendo que al menos la carpeta “assets” esté creada dentro de la carpeta “src/app”.

Una vez realizado y colocado los elementos que vayamos a utilizar, modificaremos el archivo “nav.component.html” que creamos en la sección anterior para que quede de esta forma:

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <a class="navbar-brand" href="/"><img src="./assets/media/images/global/logotipojcs.png" alt="Inicio WebApp"></a>
        </div>
        <div class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li>
                    <a href="/listado/platos/"><img src="./assets/media/images/global/platos.png" alt="Logo platos" height="40"><span class="textomenu">&nbsp;PLATOS</span></a>
                </li>
                <li>
                    <a href="/listado/bebidas/"><img src="./assets/media/images/global/bebidas.png" alt="Logo bebidas" height="40"><span class="textomenu">&nbsp;BEBIDAS</span></a>
                </li>
                <li>
                    <a href="/listado/vinos/"><img src="./assets/media/images/global/vinos.png" alt="Logo vinos" height="40"><span class="textomenu">&nbsp;VINOS</span></a>
                </li>
                <li>
                    <a href="/contacto/">
                        <img src="./assets/media/images/global/contacto.png" alt="Bonvivapp Logotipo" height="40"><span class="textomenu">&nbsp;CONTACTO</span></a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

</button>

</div>

<li>

<a href="/listado/platos/"><img src="./assets/media/images/global/platos.png" alt="Logo platos" height="40"><span class="textomenu"> PLATOS</span></a>

</li>

<li>

<a href="/listado/bebidas/"><img src="./assets/media/images/global/bebidas.png" alt="Logo bebidas" height="40"><span class="textomenu"> BEBIDAS</span></a>

</li>

<li>

<a href="/listado/vinos/"><img src="./assets/media/images/global/vinos.png" alt="Logo vinos" height="40"><span class="textomenu"> VINOS</span></a>

</li>

<li>

<img src="./assets/media/images/global/contacto.png" alt="Bonvivapp Logotipo" height="40"><span class="textomenu"> CONTACTO</span></a>

</li>

</ul>

</div>

</div>

Nota: cabe aclarar que aún no he colocado las rutas de los enlaces (elementos “a”), por lo que aunque en nuestra app de prueba ya se vean los resultados, los enlaces no funcionan.

Tambien he modificado el archivo index.html, para que muestre de favicon el logotipo adecuado, y no el de angular.

Desarrollo, General, Tecnología, Tutoriales

Angularjs: Añadiendo Jquery y Bootstrap.

13 mayo, 201713 mayo, 2017 | ercobo

Vamos a empezar a ver el desarrollo de nuestra webapp para el frontend del proyecto.

En la sección anterior instalamos las herramientas necesarias, y ahora vamos a empezar a modificar para ir viendo los cambios.

Os recomiendo seguir este curso: https://www.udemy.com/curso-de-angular-4-desde-cero-hasta-profesional/. Yo únicamente iré comentando aquí las cosas que sean específicas para el proyecto que estoy desarrollando en estas entradas.

El primer paso para nuestro proyecto, es asegurarnos de que todas las dependencias están colocadas correctamente. Por si acaso no estuvieran, instalamos jquery y bootstrap en nuestro proyecto, de esta forma:

npm install jquery --save
npm install bootstrap --save
npm install font-awesome --save

npm install jquery --save

npm install bootstrap --save

npm install font-awesome --save

Despues modificaremos nuestro archivo “angular-cli.json” y añadiremos las siguiente dependencias de css en la sección styles:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],

"styles": [

"../node_modules/bootstrap/dist/css/bootstrap.css",

"../node_modules/font-awesome/css/font-awesome.css",

"styles.css"

En este momento, si ejecutamos un “npm start” el proyecto ya tendrá las dependencias colocadas.

Para comenzar, vamos a implementar una plantilla base de boostrap, para ver que todo está correcto. Así que modificaremos el archivo “app.component.html” para que tenga el siguiente contenido:

<div class="container">
  <div class="starter-template">
    <h1>Angular Styling Bootstrap</h1>
    <p class="lead">This tutorial shows how to use Bootstrap and Font Awesome with an app generated by angular-cli.</p>
  </div>
</div>

<h1>Angular Styling Bootstrap</h1>

<p class="lead">This tutorial shows how to use Bootstrap and Font Awesome with an app generated by angular-cli.</p>

</div>

Y cambiaremos el archivo “styles.css” que incluye con el siguiente contenido:

body {
  padding-top: 5rem;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

body {

padding-top: 5rem;

}

.starter-template {

padding: 3rem 1.5rem;

text-align: center;

}

Con esto habremos personalizado la base, pero ahora vamos a incluir la barra de navegación de bootstrap. Para ello crearemos un nuevo componente con el comando ng generate component frontend/nav (la parte “frontend” no es necesario incluirlo para que nos genere el componente, pero yo lo incluyo porque voy a diferenciar los componentes que pertencen a la parte “frontend” o “pública” de la app, y a los componentes de una sección “backend” o de “administración”.

Una vez creado el componente nav, lo incluiremos en la web, modificando el archivo “app.component.html” e incluyendo en el <app-nav></app-nav> antes de la apertura del div “container”, quedando el archivo de esta forma:

<app-nav></app-nav>
<div class="container">
  <div class="starter-template">
    <h1>Angular Styling Bootstrap</h1>
    <p class="lead">This tutorial shows how to use Bootstrap and Font Awesome with an app generated by angular-cli.</p>
  </div>
</div>

<app-nav></app-nav>

<h1>Angular Styling Bootstrap</h1>

<p class="lead">This tutorial shows how to use Bootstrap and Font Awesome with an app generated by angular-cli.</p>

</div>

Una vez hecho esto, veremos una frase “nav works!” por encima del contenido que teniamos antes.

En este momento modificaremos el archivo “nav.component.html” para que tenga el siguiente contenido:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Angular Styling Bootstrap</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
  <ul class="nav navbar-nav pull-right">
    <li class="nav-item">
      <a class="nav-link" href="https://medium.com/@beeman"><i class="fa fa-medium" aria-hidden="true"></i></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://twitter.com/@beeman_nl"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://github.com/beeman"><i class="fa fa-github" aria-hidden="true"></i></a>
    </li>
  </ul>
</nav>

<a class="navbar-brand" href="#">Angular Styling Bootstrap</a>

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#">About</a>

</li>

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</li>

</li>

</li>

</ul>

</nav>

Y con esto en el navegador podremos comprobar que se ha añadido la barra de navegación con los estilos de bootstrap.

¡Estamos listos para continuar! y empezar a definir los componentes de la parte pública.

Desarrollo, Tecnología, Tutoriales

Angularjs. Instalando el entorno.

10 mayo, 2017 | ercobo

Comenzamos con Angularjs.

A estas alturas ya deberíamos tener instalado nodejs y las herramientas necesarias. Por si acaso, voy a hacer un pequeño resumen (para Windows).

Instalar nodejs desde https://nodejs.org/en/. Yo me descargué la versión actual (en el momento de crear esta entrada la 7.10.0)
Instalamos la CLI de Angular. Si no estamos seguros de si lo tenemos o no, lo mejor es hacer limpieza primero y reinstalar.
- Ejecutar npm cache clean.
- Vaciar el directorio %userdata%\AppData\Roaming\npm\node_modules.
- Ejecutar npm install -g @angular/cli@latest (así tendremos la ultima versión disponible).
- Ejecutar npm install -g bower (para tener Bower disponible).
- Ejecutar npm install -g gulp (para tener disponible Gulp).
- Ejecutar npm install -g webpack (si queremos webpack en la versión de este momento de forma global).
Crearemos el proyecto con ng new web (he llamado web al proyecto de la web con angular… sigo siendo original).

Una vez instalado todos los elementos, con npm start desde una consola se compilará y ejecutará un miniservidor web local para empezar a desarrollar nuestra app con Angular.

Desarrollo, Tecnología, Tutoriales

Laravel 5.4. Middlewares

8 mayo, 2017 | ercobo

Hasta el momento, y siguiendo la serie de entradas de Laravel, hemos conseguido que nuestra api tenga el modulo CRUD de usuarios, y que esté securizada para que solo los usuarios que tengan el token adecuado funcione.

Ahora es el momento de añadir un paso más en la securización de nuestra aplicación Laravel, en este caso adaptar las peticiones para que únicamente los usuarios con un rol/nivel adecuado puedan ejecutar según qué funciones.

Los middleware, son funciones que nos permiten agregar filtros a cada petición HTTP realizada por un usuario en una aplicación. La finalidad de este componente es disminuir la carga de trabajo en los controladores y proporcionar una solución mucho más simple y estándar a la hora de aplicar las restricciones necesarias en el proyecto.

Lo primero será crear el Middleware que vamos a utilizar, en este caso LevelMiddleware.

$ php artisan make:middleware LevelMiddleware

1	$ php artisan make:middleware LevelMiddleware

Qué nos generará un archivo como el siguiente:

<?php

namespace App\Http\Middleware;

use Closure;

class LevelMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request);
    }
}

<?php

namespace App\Http\Middleware;

use Closure;

class LevelMiddleware

{

/**

* Handle an incoming request.

* @param \Illuminate\Http\Request $request

* @param \Closure $next

* @return mixed

public function handle($request, Closure $next)

{

return $next($request);

}

De momento no hace nada más que mandar la petición ($request) al siguiente elemento dentro del framework para que sea tratado. Más adelante lo modificaremos.

Pero antes, vamos a incluirlo en la aplicación para que se pueda utilizar cuando se hagan las llamadas adecuadas. Para esto, incluiremos nuestro Middleware en el archivo Kernel.php, en las zonas adecuadas, en este caso en el array $routeMiddleware, quedando así:

protected $routeMiddleware = [
        //'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth' => \App\Http\Middleware\VerifyAccessKey::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'level' => \App\Http\Middleware\LevelMiddleware::class,
    ];

protected $routeMiddleware = [

//'auth' => \Illuminate\Auth\Middleware\Authenticate::class,

'auth' => \App\Http\Middleware\VerifyAccessKey::class,

'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,

'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,

'can' => \Illuminate\Auth\Middleware\Authorize::class,

'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,

'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,

'level' => \App\Http\Middleware\LevelMiddleware::class,

];

Y modificaremos el archivo de rutas “web.php” para incluir este middleware en las peticiones de la api que no sean la del login, en este momento la del grupo de usuarios, quedando este grupo asi:

Route::group(['middleware' => ['auth:api','level']], function(){
            Route::get('users/showactives', 'UsersController@showactives');
            Route::get('users/shownotactives', 'UsersController@shownotactives');
            Route::resource(
                'users',
                'UsersController',
                ['only' => ['index', 'store', 'update', 'destroy', 'show']]
            );

        });

Route::group(['middleware' => ['auth:api','level']], function(){

Route::get('users/showactives', 'UsersController@showactives');

Route::get('users/shownotactives', 'UsersController@shownotactives');

Route::resource(

'users',

'UsersController',

['only' => ['index', 'store', 'update', 'destroy', 'show']]

);

});

Con esto ya estará colocado para que funciones nuestro middleware, y se ejecutará despues de que se haya ejecutado el de “auth:api”, que definimos anteriormente para que sea el verificador de token.

Si quereis ver que se ejecuta el middleware, antes de empezar a modificarlo, probar con un cliente rest alguna de las rutas anteriores, y añadid esta linea en el archivo “LevelMiddleware.php”, antes del return que se creó por defecto:

return response()->json(['error' => 'notlevel' ], 403);

1	return response()->json(['error' => 'notlevel' ], 403);

Vereis que al ejecutarlo os devuelve el error de “notlevel”.

Y a partir de aquí, tras modificarlo adecuadamente, se podrá utilizar para que las funciones que se deseen estén limitadas por el nivel del usuario, proporcionando la separación para nuestra aplicación.

Desarrollo, General, Tecnología, Tutoriales

Laravel 5.4: Securizando la API

6 mayo, 2017 | ercobo

Bueno, de las entradas anteriores ya tenemos listo el CRUD de usuarios y las rutas para las llamadas.

Ahora voy a seguir las indicaciones de https://styde.net/api-rest-con-laravel-5-1-proteccion-con-access-key/ para poder securizar la API.

Una vez seguidos los pasos de este tutorial para generar la access key de toda la aplicación y securizarla de manera que nadie que no tenga esa clave la pueda utilizar, es el momento de generar la llamada de login para que un usuario pueda loguearse en la aplicacion con una llamada y recibir un access token que le sirva para poder utilizarla.

Cuándo se creó la tabla de usuarios, se añadió un campo de “api_token” que se autogeneraba cuando se guardaba el usuario por primera vez, así que ahora es el momento de generar la llamada de login. Si recordais del paso anterior, en el archivo “routes/web.php” ya incluimos la ruta de login, para estas llamadas.

También os puede pasar que, despues de seguir los pasos del tutorial de styde.net, os esteis encontrando que las llamadas os devuelven un 401 not authorized si intentais las llamadas sin incluir el access token que ahí está generado.

Pero vamos por pasos. Lo primero es generar el controlador y el modelo que usaremos para el login

PS \api\laravel> php artisan make:controller LoginController
Controller created successfully.
PS \api\laravel> php artisan make:model Models\Login
Model created successfully.
PS \api\laravel>

PS \api\laravel> php artisan make:controller LoginController

Controller created successfully.

PS \api\laravel> php artisan make:model Models\Login

Model created successfully.

PS \api\laravel>

E incluir la función login() en la clase del controlador, y el modelo, por lo que quedaría así:

<?php

namespace App\Http\Controllers;

use App\Models\Login;
use Illuminate\Http\Request;

class LoginController extends Controller
{
    //
    public function login()
    {
        //
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Login;

use Illuminate\Http\Request;

class LoginController extends Controller

{

public function login()

{

}

Si estamos siguiendo los pasos, ahora mismo al probar la url de login nos pueden pasar dos cosas: o bien nos de el ok sin contenido, o bien nos de un 401 not authorized. Esto ultimo se debe a la comprobación que hace la clase “VerifyAccessKey” que generamos para securizar la API. Lo que tenemos que conseguir es que no haga esta comprobación si las rutas de uso son “/” o “/v1/login”.

Para ello, tendremos que modificar lo siguiente (o al menos lo que a mi me ha funcionado):

En App\Http\Kernel.php, ha quedado así:

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
            \App\Http\Middleware\VerifyAccessKey::class,
        ],
    ];

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        //'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth' => \App\Http\Middleware\VerifyAccessKey::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    ];
}

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel

{

/**

* The application's global HTTP middleware stack.

* These middleware are run during every request to your application.

* @var array

protected $middleware = [

\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,

\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,

\App\Http\Middleware\TrimStrings::class,

\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,

];

/**

* The application's route middleware groups.

* @var array

protected $middlewareGroups = [

'web' => [

\App\Http\Middleware\EncryptCookies::class,

\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,

\Illuminate\Session\Middleware\StartSession::class,

\Illuminate\Session\Middleware\AuthenticateSession::class,

\Illuminate\View\Middleware\ShareErrorsFromSession::class,

\App\Http\Middleware\VerifyCsrfToken::class,

\Illuminate\Routing\Middleware\SubstituteBindings::class,

'api' => [

'throttle:60,1',

'bindings',

\App\Http\Middleware\VerifyAccessKey::class,

];

/**

* The application's route middleware.

* These middleware may be assigned to groups or used individually.

* @var array

protected $routeMiddleware = [

//'auth' => \Illuminate\Auth\Middleware\Authenticate::class,

'auth' => \App\Http\Middleware\VerifyAccessKey::class,

'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,

'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,

'can' => \Illuminate\Auth\Middleware\Authorize::class,

'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,

'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,

];

}

En App\routes\web.php, modifcar el grupo para el prefijo “v1”, ha quedado así:

Route::group(
    [
        'prefix' => 'v1'
    ],
    function () {
        Route::post(
            'login',
            'LoginController@login'
        );
        Route::group(['middleware' => 'auth:api'], function(){
            Route::resource(
                'users',
                'UsersController',
                ['only' => ['index', 'store', 'update', 'destroy', 'show']]
            );
        });
    }
);

Route::group(

[

'prefix' => 'v1'

function () {

Route::post(

'login',

'LoginController@login'

);

Route::group(['middleware' => 'auth:api'], function(){

Route::resource(

'users',

'UsersController',

['only' => ['index', 'store', 'update', 'destroy', 'show']]

);

});

}

);

En App\Http\Middleware\VerisyCsrfToken.php, añadir al array $except la ruta de login:

protected $except = [
        //
        'v1/login*'
    ];

protected $except = [

'v1/login*'

];

Ya tenemos la api segura para las llamadas que no sean la raíz y el login. Ahora es el momento de que ese login haga algo. Únicamente va a tener una funcion login para hacer la petición, y devolverá 3 datos para que sean guardados en la sesión del usuario.

LoginController.php

<?php
/**
 * PHP Version 7
 * Login Controller
 *
 * @category Controllers
 * @package  CartaDigitalJCS
 * @author   Javier Cobos Sanz <javier@jcsconsultoria.com>
 * @license  http://www.gnu.org/copyleft/gpl.html GNU General Public License
 * @link     https://cartadigitaljcs.xyz/
 */
namespace App\Http\Controllers;

//use App\Models\Login;
use Illuminate\Http\Request;
use App\Models\Login;

/**
 * LoginController Class
 *
 * @category Class
 * @package  CartaDigitalJCS
 * @author   Javier Cobos Sanz <javier@jcsconsultoria.com>
 * @license  http://www.gnu.org/copyleft/gpl.html GNU General Public License
 * @link     https://cartadigitaljcs.xyz/
 */
class LoginController extends Controller
{
    /**
     * Login Function
     *
     * @param  Request $request Request for login
     * @return array Array of result
     */

    public function login(Request $request)
    {
        if ($request->has('user')) {
            //
        } else {
            return response()->json(['error' => 'withoutuser' ], 401);
        }
        if ($request->has('password')) {
            //
        } else {
            return response()->json(['error' => 'withoutpassword' ], 401);
        }
        $user = $request->input('user');
        $password = $request->input('password');
        $login = new login();
        $login->setuser($user);
        $login->setpassword($password);
        if ($login->attempt()) {
            // Authentication passed...
            $userdata=$login->getuserdata();
            $result=[
                'usuario'=>$userdata->user,
                'email'=>$userdata->user_email,
                'token'=>$userdata->token,
                'result'=>'ok'
            ];
            //return response()->json($result);
            return response()->json($result);
        } else {
            return response()->json(['error' => 'unauthorized' ], 401);
        }
    }
}

<?php

/**

* PHP Version 7

* Login Controller

* @category Controllers

* @package CartaDigitalJCS

* @author Javier Cobos Sanz <javier@jcsconsultoria.com>

* @license http://www.gnu.org/copyleft/gpl.html GNU General Public License

* @link https://cartadigitaljcs.xyz/

namespace App\Http\Controllers;

//use App\Models\Login;

use Illuminate\Http\Request;

use App\Models\Login;

/**

* LoginController Class

* @category Class

* @package CartaDigitalJCS

* @author Javier Cobos Sanz <javier@jcsconsultoria.com>

* @license http://www.gnu.org/copyleft/gpl.html GNU General Public License

* @link https://cartadigitaljcs.xyz/

class LoginController extends Controller

{

/**

* Login Function

* @param Request $request Request for login

* @return array Array of result

public function login(Request $request)

{

if ($request->has('user')) {

} else {

return response()->json(['error' => 'withoutuser' ], 401);

}

if ($request->has('password')) {

} else {

return response()->json(['error' => 'withoutpassword' ], 401);

}

$user = $request->input('user');

$password = $request->input('password');

$login = new login();

$login->setuser($user);

$login->setpassword($password);

if ($login->attempt()) {

// Authentication passed...

$userdata=$login->getuserdata();

$result=[

'usuario'=>$userdata->user,

'email'=>$userdata->user_email,

'token'=>$userdata->token,

'result'=>'ok'

];

//return response()->json($result);

return response()->json($result);

} else {

return response()->json(['error' => 'unauthorized' ], 401);

}

Models/Login.php

<?php

namespace App\Models;

use Illuminate\Support\Facades\DB;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Hash;


class Login extends Model
{
    private $user;
    private $password;
    private $userid;
    private $usertoken;
    private $userdata;
    //
    public function setuser($user)
    {
        $this->user=$user;
    }
    public function setpassword($password)
    {
        $this->password=$password;
    }
    public function getuserid()
    {
        return $this->userid;
    }
    public function getusertoken()
    {
        return $this->usertoken;
    }
    public function getuserdata()
    {
        return $this->userdata;
    }
    public function attempt()
    {
        $users = DB::table('users')->select(
            'usuario as user',
            'email as user_email',
            'clave as password',
            'api_token as token'
        )->where(
            [
                ['usuario', '=', $this->user],
            ]
        )->first();
        if (Hash::check($this->password, $users->password)) {
            $this->userdata=$users;
            return true;
        } else {
            return false;
        }
    }
}

<?php

namespace App\Models;

use Illuminate\Support\Facades\DB;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Support\Facades\Log;

use Illuminate\Support\Facades\Hash;

class Login extends Model

{

private $user;

private $password;

private $userid;

private $usertoken;

private $userdata;

public function setuser($user)

{

$this->user=$user;

}

public function setpassword($password)

{

$this->password=$password;

}

public function getuserid()

{

return $this->userid;

}

public function getusertoken()

{

return $this->usertoken;

}

public function getuserdata()

{

return $this->userdata;

}

public function attempt()

{

$users = DB::table('users')->select(

'usuario as user',

'email as user_email',

'clave as password',

'api_token as token'

)->where(

[

['usuario', '=', $this->user],

]

)->first();

if (Hash::check($this->password, $users->password)) {

$this->userdata=$users;

return true;

} else {

return false;

}

Con esto ya tenemos hecho el login y el usuario recibe un token para poder interactuar después con el resto de la API.

En este punto, hemos de cambiar el verificador de token. Al final queda de esta forma:

<?php

namespace App\Http\Middleware;

use Closure;
use App\Models\Login;

class VerifyAccessKey
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $key = $request->input('usertoken');
        if ($key==null) {
            $key = $request->headers->get('usertoken');
            if ($key==null) {
                return response()->json(['error' => 'notoken' ], 401);
            }
        }
        $login=new login();
        $login->setusertoken($key);
        if ($login->attemptwithtoken()) {
            return $next($request);
        } else {
            return response()->json(['error' => 'tokennovalido' ], 401);
        }
    }
}

<?php

namespace App\Http\Middleware;

use Closure;

use App\Models\Login;

class VerifyAccessKey

{

/**

* Handle an incoming request.

* @param \Illuminate\Http\Request $request

* @param \Closure $next

* @return mixed

public function handle($request, Closure $next)

{

$key = $request->input('usertoken');

if ($key==null) {

$key = $request->headers->get('usertoken');

if ($key==null) {

return response()->json(['error' => 'notoken' ], 401);

}

$login=new login();

$login->setusertoken($key);

if ($login->attemptwithtoken()) {

return $next($request);

} else {

return response()->json(['error' => 'tokennovalido' ], 401);

}

Y tras esto habra que modificar y probar adecuadamente el controlador de usuarios para ver que todas las llamadas se producen correctamente y ver que si no está el token no funciona y no autoriza a efectuar la operación.

Por hoy es suficiente…

Desarrollo, Tecnología, Tutoriales

Laravel 5.4. API. Rutas de la aplicación

6 mayo, 2017 | ercobo

Continuemos.

Ahora es el momento de preparar las rutas de la aplicación que van a hacer que la magia funcione.

Para ello, en Laravel disponemos de los archivos situados en la carpeta “routes”, que de momento los que nos interesan son los archivos “api.php” y “web.php”. La diferencia entre cada uno de ellos es que la ruta de acceso será diferente, para la api todas las rutas incluirán al inicio la ruta “/api/” y los de web no la incluirán.

Dicho esto, y para separar mejor las rutas de la api y las diferentes modifcaciones, voy a tomar la costumbre de nombrar las llamadas con la versión de la API que utilice, “v1”, “v2”, etc… así será más sencillo luego a la hora de documentarlo.

Bien, para incluir todas las rutas del manejo de usuarios creadas en el anterior post, hemos de incluir en el archivo “web.php” lo siguiente:

Route::group(
[
'prefix' => 'v1',
'middleware' => 'auth:api'
],
function () {
Route::resource(
'users',
'UsersController',
['only' => ['index', 'store', 'update', 'destroy', 'show']]
);
Route::post(
'login',
'LoginController@login'
);
}
);


(Lo sé, ya estoy incluyendo la ruta de login y algunas cosas más, que detallaré después.

Con esto conseguimos que cuando se efectue la llamada a nuestros metodos a través de la ruta “/v1/users” reaccionen igual que hasta ahora.

Así que, al final, si ejecutamos el comando para ver las rutas conseguiremos algo como esto:

Route::group(

[

'prefix' => 'v1',

'middleware' => 'auth:api'

function () {

Route::resource(

'users',

'UsersController',

['only' => ['index', 'store', 'update', 'destroy', 'show']]

);

Route::post(

'login',

'LoginController@login'

);

}

);

(Lo sé, ya estoy incluyendo la ruta de login y algunas cosas más, que detallaré después.

Con esto conseguimos que cuando se efectue la llamada a nuestros metodos a través de la ruta “/v1/users” reaccionen igual que hasta ahora.

Así que, al final, si ejecutamos el comando para ver las rutas conseguiremos algo como esto:

+--------+-----------+-----------------+---------------+----------------------------------------------+--------------+
| Domain | Method    | URI             | Name          | Action                                       | Middleware   |
+--------+-----------+-----------------+---------------+----------------------------------------------+--------------+
|        | GET|HEAD  | /               |               | Closure                                      | web          |
|        | GET|HEAD  | api/users       |               | Closure                                      | api,auth:api |
|        | POST      | v1/login        |               | App\Http\Controllers\LoginController@login   | web,auth:api |
|        | GET|HEAD  | v1/users        | users.index   | App\Http\Controllers\UsersController@index   | web,auth:api |
|        | POST      | v1/users        | users.store   | App\Http\Controllers\UsersController@store   | web,auth:api |
|        | GET|HEAD  | v1/users/{user} | users.show    | App\Http\Controllers\UsersController@show    | web,auth:api |
|        | PUT|PATCH | v1/users/{user} | users.update  | App\Http\Controllers\UsersController@update  | web,auth:api |
|        | DELETE    | v1/users/{user} | users.destroy | App\Http\Controllers\UsersController@destroy | web,auth:api |
+--------+-----------+-----------------+---------------+----------------------------------------------+--------------+

+--------+-----------+-----------------+---------------+----------------------------------------------+--------------+

+--------+-----------+-----------------+---------------+----------------------------------------------+--------------+

| | GET|HEAD | / | | Closure | web |

| | GET|HEAD | v1/users/{user} | users.show | App\Http\Controllers\UsersController@show | web,auth:api |

| | PUT|PATCH | v1/users/{user} | users.update | App\Http\Controllers\UsersController@update | web,auth:api |

| | DELETE | v1/users/{user} | users.destroy | App\Http\Controllers\UsersController@destroy | web,auth:api |

+--------+-----------+-----------------+---------------+----------------------------------------------+--------------+

Y modificando o añadiendo las rutas que queramos podremos ir montando nuestra api con los modulos necesarios.

Desarrollo, General, Tecnología, Tutoriales

Laravel 5.4: Comenzando API. CRUD Usuarios

6 mayo, 20176 mayo, 2017 | ercobo

Continuamos con este “cursillo – aprendizaje” sobre crear una aplicación con Laravel y Angular.

Lo primero con lo que vamos a comenzar es con las operaciones CRUD básicas para los usuarios de la aplicación.

Lo primero será crear el controlador que usaremos para estas funciones, para lo que será necesario ejecutar el siguiente comando:

php artisan make:controller UsersController –resource

1	php artisan make:controller UsersController –resource

Con el modificador –resource conseguiremos que nos cree el controlador con un esqueleto basico de todas las funciones básicas para el manejo de los usuarios (aparte de las CRUD, las necesarias para manejar las vistas y formularios relacionados con la creación, update, etc).

Una vez conseguido esto, editaremos el archivo routes\web.php y añadiremos lo siguiente:

Route::resource(
'users',
'UsersController',
['only' => ['index', 'store', 'update', 'destroy', 'show']]
);

Route::resource(

'users',

'UsersController',

['only' => ['index', 'store', 'update', 'destroy', 'show']]

);

(si, de momento lo vamos a meter en la ruta web, para irlo probando, más adelante lo ingresaremos en una api con autenticación).

Con este código conseguimos que se reconozcan las rutas necesarias para las operaciones. Como en este caso estamos creando una api que no tendrá “vistas” (formularios o webs que ver) podemos obviar rutas y decirle que únicamente utilice las relativas al CRUD.

También hemos de crear el modelo. En este momento voy a ir creando modelos (aunque se pueden usar factorías y demás opciones, eso ya lo dejo de momento a la investigación de cada uno, o para más adelante). Para ello el comando es

php artisan make:model Models/Users

1	php artisan make:model Models/Users

Nota: un apunte, si ejecutamos directamente el comando de crear modelo con el modificador resource, como en el controlador, ya nos creara el modelo y el controlador enlazados (lo cual nos agilizará un poco estos pasos)

Y ahora hay que meterse en harina.

Con el siguiente comando podemos ver una lista de las rutas que están incluidas en este momento. Así veremos los métodos y opciones que se van a utilizar para las operaciones.

php artisan route:list

1	php artisan route:list

Y ahora se tratará de ir modificando las funciones en el controlador y o el modelo para ir adaptando el control de usuarios.

Dejo por ejemplo el código (sin finalizar) de la función de guardar un usuario

public function store(Request $request)
{
//
try{
$user =new Users();
$user->usuario = $request->name;
$user->email = $request->email;
$user->clave = bcrypt($request->password);
$user->api_token= str_random(60);
$user->save();
$result=[
'usuario'=>$user->usuario,
'email'=>$user->email,
'created' => true
];
return $result;
}
catch(Exception $e){
return "Error fatal - ".$e->getMessage();
}
}

public function store(Request $request)

{

try{

$user =new Users();

$user->usuario = $request->name;

$user->email = $request->email;

$user->clave = bcrypt($request->password);

$user->api_token= str_random(60);

$user->save();

$result=[

'usuario'=>$user->usuario,

'email'=>$user->email,

'created' => true

];

return $result;

}

catch(Exception $e){

return "Error fatal - ".$e->getMessage();

}

Tras modificar todas las funciones, estaremos listos para el siguiente paso Smile

Desarrollo, Tecnología, Tutoriales

Laravel 5.4 y Angular 4. Base de datos.

4 mayo, 20176 mayo, 2017 | ercobo

Continuamos con esta serie de entradas de un proyecto con Laravel.

Dado que voy a utilizar Laravel como backend y voy a generar una API REST con este framework, es hora de prepararlo.

Así que vamos con ello.

Preparando la base de datos.

Lo primero de todo proyecto es preparar la base de datos.

En estas lides nos va a resultar muy útil el sistema de “migraciones” (migrates) y “semillas” (seeds) de Laravel.
No me voy a detener mucho tiempo en definir que son, para eso recomiendo mirar la documentación.

User Migrate.

Para empezar, al menos en este proyecto, modificaremos el archivo “2014_10_12_000000_create_users_table.php”, que es un archivo de migración que se copia al iniciar el proyecto con composer para generar la tabla de usuarios, y ya que está, para que complicarnos.
No pongo todos los campos que voy a utilizar en la vase de datos, únicamente alguno o los no relevantes.
Todas las migraciones tienen dos funciones, la función up() y la down(), que son las acciones al crear la base de datos o cuando se hace algún rollback, respectivamente. En la función up() incluiremos lo siguiente:

Schema::create(
'users', function (Blueprint $table) {
$table->increments('idusuarios');
$table->string('usuario');
$table->string('email')->unique();
$table->string('api_token', 60)->unique();
}
);

Schema::create(

'users', function (Blueprint $table) {

$table->increments('idusuarios');

$table->string('usuario');

$table->string('email')->unique();

$table->string('api_token', 60)->unique();

}

);

Levels Migrate

En mi caso, y para la aplicación, voy a incluir un sistema de niveles, por lo que es necesario una tabla que guarde los niveles a utilizar.
Para crear el migrate que se encargará de crear la base de datos.

php artisan make:migrate create_levels_table

1	php artisan make:migrate create_levels_table

Una vez creado, le generaremos los campos necesarios (idlevel y name) en el código de la misma manera que para el usuario.

En este caso, lo más recomendable es insertar algunas filas, para lo que será necesario que utilicemos los seeders de Laravel para rellenar esos huecos.

Para empezar, crearemos un Seeder, que se guardará en la carpeta Database/seeds

 php artisan make:seeder LevelsTableSeeder

1	php artisan make:seeder LevelsTableSeeder

Una vez creado, al entrar a modificarlo observaremos que únicamente tiene la función run(), donde se ejecutarán los procesos que rellenaran las filas de la tabla.

Aquí en este caso, voy a incluir los registros necesarios (ya que mi plan para esta tabla es un numero finito y relativamente asequible de mantener), aunque se puede automatizar con Factorias. Así que, de momento, incluiré el siguiente código:

DB::table('levels')->insert([
'name' => 'Básico',
'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
]);

DB::table('levels')->insert([

'name' => 'Básico',

'created_at' => Carbon::now()->format('Y-m-d H:i:s'),

]);

Nota: que no se os olvide incluir el uso de Carbon en esta clase, porque sino no funcionará. Añadid

use Carbon\Carbon;

1	use Carbon\Carbon;

al inicio del archivo, en la sección de uses.

Una vez generado el archivo del seed, es necesario indicar que se ejecutará. Para ello, lo primero es modificar el archivo “App\Database\seeds\DatabaseSeeder.php”, en el cual hay que añadir la clase seed que acabamos de crear, así que dentro de la función run de este archivo incluiremos una línea por cada seeder que queramos ejecutar:

 $this->call(UsersTableSeeder::class);

1	$this->call(UsersTableSeeder::class);

Una vez hecho todo esto, para ejecutar estos seeds hay tres formas principales:

 php artisan db:seed
 php artisan db:seed --class=UserTableSeeder

1 2	php artisan db:seed php artisan db:seed --class=UserTableSeeder

O bien ejecutarlo cuando se hace un migrate:refresh (explicado debajo).

Utilizando migrates y seeds

Ahora es el momento de hacer que Laravel ejecute estas migraciones y rellenos de datos.

Para ello, el comando a ejecutar es :

 php artisan migrate

1	php artisan migrate

Para que se ejecuten los seeds es necesario ejecutar el siguiente:

 php artisan db:seed

1	php artisan db:seed

Pero si quereis regenerar la base de datos completa e incluir los cambios, lo mejor es ejecutar:

 php artisan migrate:refresh --seed

1	php artisan migrate:refresh --seed

Esto hará que se reinicie todos los campos y migraciones de la base de datos.

Nota: es posible que os dé un error, en estos casos antes del migrate:refresh o de ejecutar los seeds, es recomendable ejecutar lo siguiente:

 composer dump-autoload

1	composer dump-autoload

Para que se regenere el árbol de clases que utilizará luego artisan.

Conclusión

De esta forma, y tras generar todos los migrates y seeds necesarios para todos los campos y tablas de la base de datos que vaya a utilizar nuestra aplicación, estaremos preparados para poder empezar a meternos en harina para generar las rutas, controladores, modelos, etc, que va a necesitar nuestra aplicación.

Qué seguiremos con ello en el siguiente capítulo.

Gracias por seguir hasta aquí 😉

Javier Cobos Sanz

Programación, Sístemas, Redes…

Etiqueta: Tutorial

Como unir AngularJS y Cordova para generar aplicaciones móviles (parte 2)

Laravel. Implementando CORS

Angular. Entornos (environments)

Angular. Implementando Login.

AngularJS. Añadiendo el menú superior.

Angularjs: Añadiendo Jquery y Bootstrap.

Angularjs. Instalando el entorno.

Laravel 5.4. Middlewares

Laravel 5.4: Securizando la API

Laravel 5.4. API. Rutas de la aplicación

Laravel 5.4: Comenzando API. CRUD Usuarios

Laravel 5.4 y Angular 4. Base de datos.

Preparando la base de datos.

User Migrate.

Levels Migrate

Utilizando migrates y seeds

Conclusión