2017

Pedro Lara {Dev}

Código, Libros y Podcast

Resolviendo el error: angular is not installed. Try running `bower install

No hay comentarios
Pedro Lara

Este error aparece con frecuencia luego de instalar gulp. Aunque muchos sugieren resolverlo modificando el fichero  .bowerrc  sustituyendo "app / bower_components" por"app / bower_components" y modificando el fichero gulpfile.js eliminando algunas lineas y agregando otras, la mejor solución es modificar este fichero totalmente como dice este hilo en Github: 1299 

En mi caso, luego de modificar el fichero, me empezó a presentar el error:  Invalid call to lazypipe().pipe(): no stream creation function specified


Este error lo resolvemos, como nos recomienda Valentin Ibanez , modificando el fichero gulpfile.js de la siguiente manera:

var lintScripts = lazypipe () 
.pipe ($. jshint, '.jshintrc') 
.pipe ($. jshint.reporter, 'jshint-stylish');
var styles = lazypipe () 
.pipe ($. autoprefixer, 'last 1 version') 
.pipe (gulp.dest, '.tmp / styles');
en lugar de
var lintScripts = lazypipe () 
.pipe ($ .jshint) // '.jshintrc' 
.pipe ($. jshint.reporter, 'jshint-stylish');
var styles = lazypipe () 
.pipe ($. sass, { 
outputStyle: 'expanded', 
precision: 10 
}) 
.pipe ($. autoprefixer, { 
browsers: ['last 2 version'] 
})) 
.pipe (gulp.dest) , yeoman.temp + '/ styles');

No hay comentarios :

Publicar un comentario

Ionic serve bash: ionic: command not found

No hay comentarios
Pedro Lara

Luego de varios meses de haber instalado nodejs y Ionic en Windows y tener todo funcionando buen, precisamente en el momento en que me encargan un proyecto nuevo, cuando trato de arrancar el servidor con ionic serve me aparecen varios errores que me forzan a tener que instalar todo nuevamente.

Luego de instalar nodejs y ionic de manera global me aparece el siguiente error que me retraso varias horas.


Luego de varias búsquedas en internet pudé encontrar varias posibles soluciones que le funcionaban a los demás pero a mi no.Finalmente, lo que me di cuenta que por alguna razón ionic se instaló en una carpeta diferente a la global de npm. Ejecutando la sentencia npm root -g, me aparecía la siguiente ruta: C:\ionicProyect\1.myApp\Program\node_modules, en lugar  de  /usr/local/lib/node_modules.

La solución fue cambiar el prefijo de configuración de npm. Para hacerlo ejecuté la sentencia: npm config set prefix /usr/local. Sin embargo, esta solución no me funcionó del todo desde Git bash, pues no me movía la raíz a /usr/local, sino que lo hacia a una ruta diferente:



Finalmente volví a ejecutar la sentencia npm config set prefix /usr/local, pero esta vez desde la linea de comandos: 




Esta vez si me movió la carpeta a la raíz correspondiente. Volví a instalar ionic de manera global y todo funciona correctamente.

No hay comentarios :

Publicar un comentario

Subir múltiples imágenes con laravel

No hay comentarios
Pedro Lara
22 - 09 - 2017








En esta ocasión vamos a ver cómo podemos subir varias imágenes simultáneamente a nuestro servidor y guardarlas en una base de datos de Mysql usando Laravel.
Empecemos:

Para este ejemplo vamos a utilizar un formulario HTML  bastante sencillo ya que  contendrá  sólo un imput: images. Sin embargo las imágenes también pueden ser  enviadas a través  de  una aplicación móvil y va a funcionar.

<html>
<head>
<title>Subir imágenes</title>
</head>
<body>

/*Ahora llamamos el action que se encargará de procesar las imágenes que vamos a enviar a nuestro servidor. Para poder enviar las imágenes es necesario colocar enctype="multipart/form-data"  para indicarle al navegador que estamos enviando varios archivos.*/

<form  action=" miservidor.com/UploadImage" method="post"  enctype="multipart/form-data"  >

/*Para poder subir imágenes nuestro input debe ser de tipo file y además debemos indicar que es un array images[] */
<INPUT type="file" name=" images[]">
<br>
<INPUT type="submit" name="enviar" value="enviar" >
</form>
</body> </html>

 Ahora vamos a crear la función que recibirá las imágenes en nuestro servidor, las moverá a una carpeta y guardará el nombre en la base de datos de Mysql. Pero antes debemos crear el endpoint en nuestro archivo de rutas:

Route::post(' UploadImage','ImageController@store');

Como puede observarse, en la ruta anterior hemos hecho referencia a un controlador llamado ImageController  y a su método store. En  consecuencia debemos crear este controlador con su  método. Esto lo podemos hacer con la siguiente sentencia desde la línea de comandos:

php artisan make:controller ImageController

 Esta sentencia nos creará un controlador con el nombre indicado (ImageController). Ahora dentro del controlador creamos la función store la cual  procesará nuestras imágenes:

public function store( Request $request){
                }

También es necesario crear la tabla en nuestra base de datos y su respectivo modelo para guardar el nombre de las imágenes.Para crear un modelo en laravel debemos de ejecutar la siguiente sentencia desde la linea de comandos:

php artisan make:model User

La sentencia anterior nos creará un modelo el cual usaremos para hacer crud a nuestra tabla de imágenes. 

Ya que tenemos creado nuestro modelo, nuestra tabla y nuestro controlador, pasemos ahora a trabajar con el método que procesará nuestras imágenes. 

El usuario puede enviar  sólo una  imagen, pero puede enviar más de una. Así que, para acceder a cada una de las imágenes en caso de que el usuario envié varias, vamos a crear un bucle foreach:

foreach ($request->file('imagen') as $file) {
                }

Dentro de este bucle lo primero que hacemos es colocarle un nombre a cada una de las imágenes que recibimos:

$filename= 'collection_'.time().$file->getClientOriginalName();

En este ejemplo le he colocado el prefijo  'collection_' más la hora en formato unix con la función  time(). Además le he concatenado el nombre original de la imagen con la función getClientOriginalName(). Esto es  para tratar que no se repitan los nombres de las imágenes. Sin embargo, existen otros métodos para colocarle prefijos aleatorios. Cada uno debe escoger el que más les convenga.

Luego procedemos a mover las imágenes a una carpeta que ya debemos haber creado dentro del directorio público de Laravel:

$file->move('Files/', $filename);

Para saber exactamente donde se encuentra la carpeta publica de nuestro proyecto podemos hacer uso de la función public_path().  Y dentro de la ruta que nos devuelve esta función creamos un directorio para guardar nuestras imágenes. En este  caso, hemos creado un directorio de nombre Files dentro de la carpeta Public.

Lo que sigue es guardar el nombre completo (nombre+ ruta)  de nuestras imágenes dentro la base de datos. Otra opción sería guardar las imágenes como base64, pero en este ejemplo  prefirimos guardar sólo el nombre. Para esto inicializamos nuestro  modelo:

$filemodel=new Image;

Guardamos el nombre:

$filemodel->name=$filename;

Posteriormente, validamos que las imágenes se hayan guardado:

if ($filemodel->save()) {
                    $response['success'] = 'true';
                    $response['message'] = 'images Added Successfully!';
                } else {
                    $response['success'] = 'false';
                    $response['message'] = 'Error in saving data try again!';
                }

Al final nuestra función quedaría de la siguiente manera:

public function store( Request $request){
foreach ($request->file('imagen') as $file) {
  $filename= 'collection_'.time().$file->getClientOriginalName();
  $file->move('Files/', $filename);
  $filemodel=new Image;
  $filemodel->name=$filename;
  if ($filemodel->save()) {
                    $response['success'] = 'true';
                    $response['message'] = 'images Added Successfully!';
                } else {
                    $response['success'] = 'false';
                    $response['message'] = 'Error in saving data try again!';
                }


}
return json_encode($response);  


Todo muy fácil, hasta la próxima


Videos relacionados



No hay comentarios :

Publicar un comentario

Libro de TypeScrip pdf | Descargar Gratis

No hay comentarios
    Computadora personalTypeScript (TS) se está conviertiendo en el lenguaje de programación estándar para trabajar con JavaScript. Permite que podamos escribir código con menos errores, más sencillo, coherente, fácil de probar, más limpio y sólido. Teléfono móvil con flecha de izquierda a derecha



    • Tipos de datos
    • Fat arrow
    • Desestructuración
    • Estructuración
    • Promesas
    • Generators
    • Esperas asincrónicas - Async Await
    • Clases
    • Decorators
    • Módulos
    • Sistemas de automatización
    • Consejos


    No hay comentarios :

    Publicar un comentario

    Directiva Angular para validación de NIF/NIE

    No hay comentarios
    Un tema muy interesante en Angular 2 es el uso de directivas. En la página oficial de Angular 2 se encuentra una documentación bastante didactica acerca de las diversas directivas de este este frameworks. En esta ocasión les comparto el uso de una de estas directivas: NgIf.  

    Directiva NgIfNg

    No hay comentarios :

    Publicar un comentario