domingo, 26 de mayo de 2024

Tratamiento de arreglo en java

En Java, los arreglos (o arrays) son estructuras de datos que permiten almacenar múltiples valores del mismo tipo en una sola variable. Un manejador de arreglos puede referirse a varias cosas, desde la creación y manipulación de arreglos, hasta el uso de clases y métodos de utilidades para trabajar con ellos.

Creación y Manipulación Básica de Arreglos

Declaración e Inicialización de Arreglos

Puedes declarar e inicializar arreglos de diferentes maneras. Aquí hay algunos ejemplos:

// Declarar e inicializar un arreglo de enteros con un tamaño específico
int[] intArray = new int[5];

// Declarar e inicializar un arreglo de enteros con valores específicos
int[] anotherIntArray = {1, 2, 3, 4, 5};

// Declarar un arreglo de cadenas (Strings)
String[] stringArray = new String[3];

// Inicializar el arreglo de cadenas
stringArray[0] = "Hello";
stringArray[1] = "World";
stringArray[2] = "Java";

// Acceder a elementos del arreglo
System.out.println(intArray[0]); // Acceder al primer elemento
System.out.println(anotherIntArray[2]); // Acceder al tercer elemento

Utilización de Clases y Métodos de Utilidades

Clase Arrays

La clase java.util.Arrays proporciona métodos estáticos que son muy útiles para manejar arreglos, tales como:

Impresión: Arrays.toString()

Ordenamiento: Arrays.sort()

Búsqueda: Arrays.binarySearch()

Relleno: Arrays.fill()

Comparación: Arrays.equals()

Te dejo algunos ejemplos:

import java.util.Arrays;

public class ArrayUtilsExample {
    public static void main(String[] args) {
        int[] intArray = {5, 3, 8, 2, 9};

        // Imprimir el arreglo
        System.out.println("Original array: " + Arrays.toString(intArray));

        // Ordenar el arreglo
        Arrays.sort(intArray);
        System.out.println("Sorted array: " + Arrays.toString(intArray));

        // Buscar un elemento en el arreglo (debe estar ordenado)
        int index = Arrays.binarySearch(intArray, 8);
        System.out.println("Index of 8: " + index);

        // Rellenar el arreglo con un valor específico
        Arrays.fill(intArray, 1);
        System.out.println("Array after fill: " + Arrays.toString(intArray));

        // Comparar dos arreglos
        int[] anotherArray = {1, 1, 1, 1, 1};
        boolean areEqual = Arrays.equals(intArray, anotherArray);
        System.out.println("Arrays are equal: " + areEqual);
    }
}

Manejo de

Arreglos Multidimensionales Java

también soporta arreglos multidimensionales, como los arreglos bidimensionales (matrices).

public class MultiDimensionalArrayExample {
    public static void main(String[] args) {
        // Declarar e inicializar un arreglo bidimensional
        int[][] matrix = {
            {1, 2, 3},
            {4, 5, 6},
            {7, 8, 9}
        };

        // Acceder a elementos del arreglo bidimensional
        System.out.println("Element at row 1, column 2: " + matrix[1][2]);

        // Imprimir el arreglo bidimensional
        for (int i = 0; i < matrix.length; i++) {
            for (int j = 0; j < matrix[i].length; j++) {
                System.out.print(matrix[i][j] + " ");
            }
            System.out.println();
        }
    }
}

Listas de Arreglos con ArrayList

Aunque los arreglos son útiles, la clase ArrayList de java.util proporciona una manera más flexible de manejar colecciones de datos que pueden cambiar de tamaño dinámicamente.

import java.util.ArrayList;

public class ArrayListExample {
    public static void main(String[] args) {
        // Crear un ArrayList de enteros
        ArrayList arrayList = new ArrayList<>();

        // Agregar elementos
        arrayList.add(10);
        arrayList.add(20);
        arrayList.add(30);

        // Acceder a elementos
        System.out.println("Element at index 1: " + arrayList.get(1));

        // Imprimir el ArrayList
        System.out.println("ArrayList: " + arrayList);

        // Remover un elemento
        arrayList.remove(1);
        System.out.println("After removal: " + arrayList);

        // Iterar sobre el ArrayList
        for (int element : arrayList) {
            System.out.println(element);
        }
    }
}

Conclusión

El manejo de arreglos en Java incluye la declaración, inicialización y manipulación de arreglos simples y multidimensionales, así como el uso de la clase Arrays para operaciones comunes. Además, ArrayList ofrece una alternativa más flexible cuando se necesita una estructura de datos que pueda cambiar de tamaño dinámicamente. Utilizando estas herramientas y técnicas, puedes gestionar y manipular datos de manera eficiente en tus aplicaciones Java.

Tipos de datos en JAVA, datos Primarios

En Java, los datos primarios (o tipos de datos primitivos) son los tipos de datos básicos que no se derivan de otros tipos y se utilizan para definir variables de tipo simple. Los tipos de datos primitivos en Java son ocho, y cada uno tiene un propósito específico, un rango de valores y un tamaño en memoria definido. Aquí están los ocho tipos de datos primitivos en Java:


Tipos de Datos Primitivos en Java

byte


Descripción: Tipo de datos enteros con signo.

Tamaño: 8 bits.

Rango de valores: -128 a 127.

Ejemplo:

byte a = 100;
byte b = -50;

short


Descripción: Tipo de datos enteros con signo de tamaño pequeño.

Tamaño: 16 bits.

Rango de valores: -32,768 a 32,767.

Ejemplo:

short a = 1000;
short b = -2000;

int


Descripción: Tipo de datos enteros estándar con signo.

Tamaño: 32 bits.

Rango de valores: -2^31 a 2^31-1 (aproximadamente -2.14 mil millones a 2.14 mil millones).

Ejemplo:

int a = 100000;
int b = -200000;

long


Descripción: Tipo de datos enteros grandes con signo.

Tamaño: 64 bits.

Rango de valores: -2^63 a 2^63-1 (aproximadamente -9.22 quintillones a 9.22 quintillones).

Ejemplo:

long a = 10000000000L;
long b = -20000000000L;

float


Descripción: Tipo de datos de punto flotante de precisión simple.

Tamaño: 32 bits.

Rango de valores: Aproximadamente ±1.4E-45 a ±3.4E38, con 7 dígitos de precisión.

Ejemplo:

float a = 3.14f;
float b = -3.14f;

double


Descripción: Tipo de datos de punto flotante de precisión doble.

Tamaño: 64 bits.

Rango de valores: Aproximadamente ±4.9E-324 a ±1.8E308, con 15 dígitos de precisión.

Ejemplo:

double a = 3.141592653589793;
double b = -3.141592653589793;

boolean


Descripción: Tipo de datos lógicos.

Tamaño: No está claramente definido en términos de bits, pero usualmente representado como un byte.

Valores posibles: true o false.

Ejemplo:

boolean isTrue = true;
boolean isFalse = false;

char


Descripción: Tipo de datos de carácter, que representa un solo carácter Unicode.

Tamaño: 16 bits.

Rango de valores: '\u0000' (o 0) a '\uffff' (o 65,535).

Ejemplo:

char a = 'A';
char b = 'B';

Ejemplo de Uso de Todos los Tipos Primitivos en un Programa

public class PrimitivesExample {
    public static void main(String[] args) {
        // Tipos enteros
        byte byteVar = 100;
        short shortVar = 1000;
        int intVar = 100000;
        long longVar = 10000000000L;

        // Tipos de punto flotante
        float floatVar = 3.14f;
        double doubleVar = 3.141592653589793;

        // Tipo booleano
        boolean booleanVar = true;

        // Tipo char
        char charVar = 'A';

        // Mostrar valores
        System.out.println("byteVar: " + byteVar);
        System.out.println("shortVar: " + shortVar);
        System.out.println("intVar: " + intVar);
        System.out.println("longVar: " + longVar);
        System.out.println("floatVar: " + floatVar);
        System.out.println("doubleVar: " + doubleVar);
        System.out.println("booleanVar: " + booleanVar);
        System.out.println("charVar: " + charVar);
    }
}

Estos son los tipos de datos primitivos en Java, cada uno con su propio tamaño, rango de valores y propósito específico. Utilizarlos adecuadamente según el contexto del programa es esencial para escribir código eficiente y eficaz.

jueves, 18 de abril de 2024

Como ganar dinero desde casa

Esta vez nos iremos un poco diferente a lo que siempre escribimos en este blog. ya que este tema es algo que me viene aconteciendo desde hace unos días y esto es.

Como ganar dinero desde casa.

Nada es fácil en esta vida, principalmente la parte de tener un ingreso sin salir de casa, lo mas cordial seria un trabajo parcial el cual te permita pasar mas tiempo en casa que fuera de la misma, sin embargo encontrar este tipo de trabajo es bastante raro ya sin mencionar lo difícil que puede llegar a ser, sin embargo existen varias herramientas que nos pueden ayudar a facilitar este punto.

Trabajo remoto:

Para los que somos desarrolladores esto puede ser bastante fácil ya que solo basta con empezar a aplicar en las empresas que ofertan trabajo remoto (Home Office) aun que para ello es necesario mucha preparación principalmente si apenas estas comenzando, debes dominar diversos tipos de lenguajes de desarrollo sin mencionar las diversas metodologías que debes de poder controlar y lo disciplinado que debes de ser para lograr un buen trabajo remoto, lo mas común que puedes encontrar de home office es el desarrollo de paginas web. para ello se requiere principalmente de un control en lo que se refiere al análisis de los requerimientos del cliente así como de un buen diseño y arquitectura de sistemas. Las herramientas que veo en este tipo de trabajo son (css, less, javascript, nodeJS, php, java, python, sql, mysql, SQLserver, PLSQL).

YouTube:

Los creadores de contenido en YouTube siempre se la pasan en casa o bien haciendo lo que decíamos que de niños haríamos. (viajar), sin embargo es un tema mucho mas tedioso de lo que se ve, si eres nuevo en esto te comento, deberás de tener conocimiento por muy básico que parezca de edición de video ya que de esto depende mucho que un video sea bueno o no, aun que también existen diversas herramientas que te ayudan a mejorar en tu contenido tales como canva, filmora, adobe PremierePro, iMovie, lightworks entre otros.

Blogger: 

Así es, este medio también te permite el ingreso de dinero sin salir de casa, con la variante de que este es un poco mas lento que los anteriores. ya que se requiere de un flujo constante de usuarios leyendo tu contenido por lo que se requiere que estés actualizándolo lo mas pronto posible.

por ultimo mas no el menos importante. cabe mencionar que para cumplir con este medio se requiere de mucha dedicación y constancia pues el tener un negocio desde casa requiere de mucho esfuerzo, no por algo existe ese dicho bien mencionado, el que quiera tienda que la atienda. 

Aplicaciones:

Por otro lado existen las aplicaciones de encuestas por paga

Una de ellas es ATTAPOLL la cual la encuentran en dispositivos móviles al igual que en pagina web para la computadora les dejo aquí https://encuestaspagadas.mx/? el enlace.

 

Bueno por el momento son los que recuerdo y se me hacen bastante prácticos, si conoces algún otro. te pido me lo hagas saber en un comentario. 


Nos leemos en la próxima.

martes, 27 de junio de 2023

Manipulación de JSON en JavaScript: Transposición de Datos

¡Hola a todos! Estamos de vuelta con un nuevo artículo sobre JavaScript. Esta vez, exploraremos un tema fundamental pero a menudo repetitivo: cómo trabajar con JSON. Vamos a sumergirnos directamente en el código, donde mostraremos cómo transponer valores de filas a columnas en un arreglo JSON.


¿Qué es la Transposición de Datos?

La transposición de datos implica cambiar la orientación de los datos, es decir, convertir filas en columnas y viceversa. En este artículo, te mostraré cómo hacerlo usando JavaScript.


La Función transpuesta

La función transpuesta se encarga de transponer los valores de un objeto JSON. A continuación, se explica cómo funciona esta función paso a paso:


Código de la Función

/**
 * Función transpuesta: Transpone valores de filas a columnas en un arreglo JSON.
 * @param {Object} obj - El objeto JSON que contiene los datos a transponer.
 * @returns {Array} - El nuevo arreglo con los valores transpuestos.
 */
function transpuesta(obj) {
    var rtn = [];
    var key = {};
    var x = 0;

    // Función de comparación de objetos
    var c = function(a, b) {
        return JSON.stringify(a) === JSON.stringify(b);
    };

    // Recorre el arreglo o JSON que recibe
    $.each(obj.arr, function(i, v) {
        var nObj = {};
        var keys = Object.keys(v);
        
        // Crea un objeto sin las llaves y valores a transponer
        for (var j = 0; j < keys.length; j++) {
            if (keys[j] !== obj.field.structure.value && keys[j] !== obj.value) {
                nObj[keys[j]] = v[keys[j]];
            }
        }

        var rn = -1;

        // Evalúa si la llave ya tiene un objeto asociado
        if (Object.keys(key).length == 0) {
            key['a_' + x] = { k: nObj, r: rtn.length };
            x++;
        } else {
            var existe = false;
            for (var y = 0; y < x; y++) {
                if (c(key['a_' + y].k, nObj)) {
                    existe = true;
                    rn = key['a_' + y].r;
                }
            }

            if (!existe) {
                key['a_' + x] = { k: nObj, r: rtn.length };
                x++;
            }
        }

        var tmpObj = {};
        $.extend(tmpObj, nObj);

        var k = obj.field.structure;
        var prp = k.prepend + (v[k.value] + "").replace(k.rp[0] || '', k.rp[1] || '') + k.append;

        if (rn == -1) {
            tmpObj[prp] = v[obj.value];
            rtn.push(tmpObj);
        } else {
            rtn[rn][prp] = v[obj.value];
        }
    });

    return rtn;
}

Ejemplo de Uso

Vamos a ver un ejemplo práctico de cómo usar esta función.


JSON de Entrada

var jsn = [
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 312, equivalencia: 'XY-A1'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 504, equivalencia: 'XY-A3'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 312, equivalencia: 'XY-A4'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 1272, equivalencia: 'XY-A6'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 960, equivalencia: 'XY-A7'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 624, equivalencia: 'XY-A8'}
];

Invocación de la Función

var jsonRtn = transpuesta({
    arr: jsn,
    field: {
        structure: {
            prepend: 'E_',
            value: 'equivalencia',
            rp: ['-', '_'],
            append: '_PZ'
        }
    },
    value: 'pieza'
});

Resultado

La función transpuesta transformará los datos de la siguiente manera:

console.log(jsonRtn);
/*
[
    {
        folio: 4401685,
        fecha: '20/07/2022',
        orden: 352673,
        identificador: 44156245,
        E_XY_A1_PZ: 312,
        E_XY_A3_PZ: 504,
        E_XY_A4_PZ: 312,
        E_XY_A6_PZ: 1272,
        E_XY_A7_PZ: 960,
        E_XY_A8_PZ: 624
    }
]
*/

Conclusión

En este artículo, hemos aprendido a transponer valores en un arreglo JSON usando JavaScript. Esta técnica es útil para reorganizar datos y hacerlos más manejables para diferentes propósitos.


Si este artículo te ha sido útil, por favor, deja tu comentario y comparte tu experiencia. Gracias por leernos y hasta la próxima.

miércoles, 2 de noviembre de 2022

Validacion de datos en ExcelJS

 Hoy les traigo a la mano la información para poder crear datavalidation con ExcelJS o bien un dropdownlist en los archivos exportados desde java, sin mas por el momento vamos al codigo.


Un dataValidation permite agregar dropdownlist a una hoja de excel esta puede ser asignada por medio de un array de tipo string o bien hacer referencia de la informacion en otra hoja.


En el ejemplo de hoy veremos el caso de crear la lista a partir de la referencia de otra hoja del mismo documento, para ello creamos nuestro objeto Workbook. 


  
     var workbook = new ExcelJS.Workbook();
     workbook.creator = 'DivingJS';
     workbook.lastModifiedBy = 'inovania.blogspot.com';
     workbook.created = new Date();
     
  

Ahora por el momento agregaremos el primer registro que bien puede servir como header del documento para ello.

	var workSheet=workbook.addWorksheet("sheet_1");
    workSheet.addRow(["item 1","item 2", "item 3"]);

Aquí agregamos el contenido de la segunda hoja

	var workSheet_2=workbook.addWorksheet("sheet_2");
    workSheet_2.addRow(["elemento 1"]);
    workSheet_2.addRow(["elemento 2"]);
    workSheet_2.addRow(["elemento 3"]);
    workSheet_2.addRow(["elemento 4"]);
    workSheet_2.addRow(["elemento 5"]);
    workSheet_2.addRow(["elemento 6"]);
    

Una vez teniendo esto lo que sigue es agregar la regla para poder generar el dataValidation, esto queda de la siguiente manera.

    worksheet.getCell("B2").dataValidation = {
         type: 'list',
         allowBlank: true,
         showInputMessage: true,
         showErrorMessage: true,
         formulae: ["=sheet_2!$A$1:$A$6"]

Ahora bien, recibe los parametros allowBlank , showInputMessage, showErrorMessage, type, formulae. la propiedad type corresponde al tipo de dato que estará alojado en la celda seleccionada en este caso una lista.

En el parámetro formulae recibe un arreglo o en este caso la referencia para hacer un arreglo el cual lo encontrara en la hoja 2 asociado de la celda A1 a la celda A6. 

De esta manera es como referenciamos a otra hoja para crear nuestra lista.

Por ultimo exportamos el archivo y listo.

   await workbook.xlsx.writeBuffer()
         .then(buffer => saveAs(new Blob([buffer]),obj.name))
         .catch(err => console.log(err));

No olvides seguirme para ser de los primeros a quienes les llegue la notificación de lo que se publique.

martes, 23 de agosto de 2022

Snake part_1

En este capitulo comenzaremos con una serie de tutoriales para crear el clásico juego de Snake, por el momento será solo en javascript, dibujando los frames en la etiqueta canvas.


En esta entrada comenzamos con la parte de html y css con el enlace a JS.

index.html

<canvas class="mcv" height="600" id="canvas" width="400"></canvas>


Por el momento el código html lo dejamos de con eso damas, mientras que el apartado css 

estilo.css

.mcv {
    border: solid 0px;
    box-shadow: 0px 0px 5px 2px #404040;
    float: left;
}

Comenzamos con el javascript de la siguiente manera.

Para este punto quiero mencionar que en este caso estoy comenzando a usar los objetos de tipo clase en javaScript.

El codigo comienza en con lo siguiente.

Game.js

class Game{
     //constructor de la clase
     constructor(){
          this.c = document.getElementById("canvas");
          this.ctx = this.c.getContext("2d");
     }
     //evento inicial de la clase
     //nos ayudara a iniciar los demas objetos
     init(){
          var ts = this;
          this.interval = setInterval(function() {
               ts.update();
          }, 500);
     }
     //evento que pintara lo que veremos
     draw(){
          this.ctx.clearRect(0,0,this.c.width,this.c.height);
          this.ctx.beginPath();
          this.ctx.font = "12px Verdana";
          this.ctx.fillStyle="green";
          this.ctx.fillText('inovania.blogspot.com', 50, 50);
          this.ctx.stroke();
     }
     //evento que actualiza el estado del juego.
     update(){
          this.draw();
     }
}
//llamado de la clase
new Game().init();

Dejamos hasta aquí la entrada.



No olvides seguirme para ser de los primeros en recibir las notificaciones de la continuidad del juego.


lunes, 1 de agosto de 2022

El Manejo de Arreglos en Java: Implementación del Método Slice

El manejo de arreglos es una característica fundamental en prácticamente cualquier lenguaje de programación. Algunos lenguajes permiten agregar y eliminar elementos de un arreglo fácilmente, y en este artículo veremos cómo implementar una función similar en Java. En particular, crearemos un método slice para trabajar con arreglos.

Para este ejemplo, usaremos un arreglo de tipo String.


Implementación del Método Slice

La función slice permite eliminar un elemento de un arreglo, ya sea por valor o por índice. A continuación se presenta el código:
    /**
     * Méthod slice, permite eliminar un elemento del arreglo
     * 
     * @param value variable de tipo Object en formato arreglo
     * @return arreglo de tipo String que contiene el nuevo arreglo
     */
    public String[] slice(Object... value){
        String[] arr=null;
        int pos=-1;
        String element = null;
        for (Object value1 : value) {
            if (value1 instanceof java.lang.String)
                element = value1.toString();
            if (value1 instanceof java.lang.Integer)
                pos=(int) value1;
            if (value1 instanceof java.lang.String[])
                arr = (String[]) value1;
        }
        String[]temp = new String[arr.length-1];
        int i=0,x=0;
        for(String a : arr){
            if(element!=null&&!a.equalsIgnoreCase(element)){
                temp[i]=a;
                i++;
            }
            if(pos>-1){
                if(i!=pos){
                    temp[x]=a;
                    x++;
                }
                i++;
            }
        }
        return temp;
    }

Uso del Método Slice

A continuacion muestro como se usa el metodo.

        
public static void main(String[] args) {
    // Creación del arreglo inicial
    String[] b = {"uno", "dos", "tres", "cuatro", "cinco", "seis", "siete"};
    
    // Eliminación del elemento "cuatro"
    b = slice(b, "cuatro");
    // Eliminación del elemento en la posición 1
    b = slice(b, 1);
    
    // Imprimir el arreglo resultante
    for (String b1 : b) {
        System.out.println(b1);
    }
}

Explicación del Código

Declaración del Método:
    El método slice acepta una lista variable de argumentos (Object... value), permitiendo flexibilidad en los parámetros
Identificación de Parámetros:
    Se identifica si cada parámetro es un String, un Integer, o un arreglo de String
Creación del Nuevo Arreglo:
    Se crea un nuevo arreglo (temp) de tamaño reducido para almacenar los elementos restantes después de la eliminación
Eliminación por Valor o Índice
  • Si se proporciona un String, se eliminan todas las apariciones de ese valor.
  • Si se proporciona un Integer, se elimina el elemento en esa posición
Impresión del Resultado
    El arreglo resultante se imprime en la consola

Conclusión

En este artículo, hemos implementado un método slice en Java que permite eliminar elementos de un arreglo por valor o por índice. Este tipo de manipulación de arreglos es común en muchos lenguajes de programación y puede ser muy útil en diversos contextos.

Espero que encuentres útil este método y que puedas integrarlo en tus proyectos. Si tienes alguna pregunta o comentario, no dudes en dejar un comentario a continuación. ¡Gracias por leer!

Metodo Push en Java

 El método push nos ayuda en la construcción de arreglo en JavaScript a diferencia del desarrollo en java, este método aparte de agregar elementos al arreglo incrementa en 1 la longitud del mismo. sin embargo en Java no existe tal método así que es necesario construirlo para ello vamos al código.

Para este ejemplo será un código push para un arreglo de tipo String.

Sin mas les dejo aquí el código.
/**
     * Autor<b>innovania.blogspot.com</b><br />
     * <br />
     * Metodo <b>push</b>: permite agregar un elemento al arreglo ya existente<br />
     * @param arr arreglo que se esta agregando el elemento value<br />
     * @param value valor a agregar <br />
     * @return nuevo arreglo con elemento value en la posicion final del arreglo
     */
public String[] push(String[] arr,String value){
    String[] temp = new String[arr.length];
    System.arraycopy(arr, 0, temp, 0, arr.length);
    arr= new String[temp.length+1];
    System.arraycopy(temp, 0, arr, 0, temp.length);
    arr[temp.length]=value;
    return arr;
}

Explicación del código. 

Comienza creando un arreglo igualando la longitud al arreglo que esta entrando.

Copia el arreglo entrante al temporal.

Construye un nuevo arreglo tomando la longitud del arreglo temporal mas 1.

Copia el contenido del arreglo temporal en el nuevo arreglo.

Agrega el valor del push en la ultima posición de ahora nuevo arreglo.

Retorna el nuevo arreglo con el nuevo valor agregado.


Ya por ultimo queda el llamado. 


    IncrementArray app = new IncrementArray();
        String[] a ={"uno","dos","tres"};
        a=app.push(a,"cuatro");
        a=app.push(a,"cinco");
        for (String a1 : a) {
            System.out.println(a1);
        }
Sin mas por el momento me despido, espero les ayude, si tienes dudas deja tu comentario y con gusto resolvemos juntos las dudas.


jueves, 28 de julio de 2022

Exportar Imagen en Excel JS

 Hola a todos, en este momento aremos un archivo de excel a partir de la informacion en un arreglo de propiedades, entre estas propiedades estará una constante con images en base64.
Para ello utilizaremos las librerias de exceljs.js y FileSaver.js puedes acceder a estas librerías en las siguientes direcciones.


<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js" type="text/javascript"> </script>
 <script crossorigin="anonymous" integrity="sha512-UnrKxsCMN9hFk7M56t4I4ckB4N/2HHi0w/7+B/1JsXIX3DmyBcsGpT3/BsuZMZf+6mAr0vP81syWtfynHJ69JA==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"> </script>


A partir de aquí lo que sigue es preparar nuestra información.

  var arreglo = [{ name: "Jane Doe",foto:'data:image/png;base64,/9j/4QAYRXhpZgAAS...'},{ name: "John Doe",foto:'data:image/png;base64,/9j/4QAYRXhpZgAAS...'}];
 var cols= [{field:'name',title:'Nombre'},{field:'foto',title:'IMAGEN'}];
  
Una vez que tenemos el insumo creamos nuestra función.
  async function exportFile(arry,cols,fileName){
     var workbook = new ExcelJS.Workbook();
     workbook.creator = 'inovania.blogspot.com';
     workbook.lastModifiedBy = 'inovania.blogspot.com';
     workbook.created = new Date();
     var worksheet =  workbook.addWorksheet('Sheet 1');
     var grd={
          columns:cols,
          data:array
     };
     var arrRow=[];
     grd.columns.map((e,i) => {
          arrRow.push(e.title);
     });
     worksheet.addRow(arrRow);
     for(var e=0;e<grd.data.length;e++){
          var arrDt = [];
          var logo;
          for(var x=0;x<grd.columns.length;x++){
               var c = grd.columns[x].field;
               if(x==0){
                    logo = workbook.addImage({
                         base64: grd.data[e][c],
                         extension: 'jpg',
                    });
                    arrDt.push("");
               }else{
                    arrDt.push(grd.data[e][c]);
               }
          }
          worksheet.addRow(arrDt);
          worksheet.addImage(logo, ('A'+(e+2)+":"+"A"+(e+2)));
     }
     await workbook.xlsx.writeBuffer()
          .then(buffer => saveAs(new Blob([buffer]),fileName+".xlsx"))
          .catch(err => console.log(err) );
};
  
Con esto solo nos queda el llamado el cual queda de la siguiente manera

  exportFile(arreglo,cols,"archivoInnovania");
De esta manera queda nuestro objeto capas de exportar imagenes en base64 en un archivo de excel.

Cabe mencionar que la función worksheet.addImage(img,rango); ocupa dos parámetros el primero es la imagen y el segundo parámetro es un rango de celdas, en este caso lo deje en la misma celda, pasándole como rango desde la celda ( A1 hasta la celda A1) A1:A1, simulando que este será un rango de celdas.


Quedo en espera de sus comentarios, hasta la proxima.

domingo, 8 de mayo de 2022

Creación y lectura de archivo desde java

 Hola a todos, está es una entrada mas al respecto en esta nota, explicare como crear y leer un archivo desde java.

Primero que nada una disculpa por la demora de mis entradas. Siguiendo con lo que nos truje, vamos a nuestro editor de mejor preferencia, en mi caso usare netbeans.

Para ello creamos un nuevo documento que será nuestra toma de decisiones.

Principal.java


package com.diving.inovania;

import java.io.FileWriter;
import java.io.IOException;

/**
 *
 * @author inovania.blogspot.com
 */
public class Principal {
    public static void main(String[] args) {
        Principal app = new Principal();
        app.createFile();
    }
}

El código encargado de la creación y escritura del documento queda de la siguiente manera

public void createFile() {
   FileWriter wr;
     try {
         wr = new FileWriter(path+"filename.txt");
         wr.write("Este es un archivo creado desde java\n");
         wr.write("Continua en\n");
         wr.write("https://inovania.blogspot.com");
         wr.close();
     } catch (IOException e) {
         System.out.println("Ocurrio un error: " + e.getMessage());
     }
}

Pero no siempre estaremos creando y sobre escribiendo el mismo documento. Es decir hay ocasiones en que se requiere abrir un archivo leerlo y agregar algo nuevo o simplemente leerlo. Para ello el siguiente metodo.

public String readFile() {
    Scanner sc;
        StringBuilder sb = new StringBuilder();
    try {
        File f = new File("E:\\Oscar\\blog\\filename.txt");
        sc = new Scanner(f);
        while (sc.hasNextLine()) {
            sb.append(sc.nextLine()).append("\n");
        }
        sc.close();
    } catch (FileNotFoundException e) {
        System.err.println("Erro al leer el archivo: " + e.getMessage());
    }
    return sb.toString();
}

De esta manera tenemos tanto la lectura como escritura del mismo archivo.

Sin mas por el momento me despido, no sin antes pedirles sus comentarios. hasta la proxima.


lunes, 7 de marzo de 2022

Java desde cero

Hola a todos, en esta entrada estaré escribiendo el comienzo de un nuevo tutorial, el cual vamos a ir viendo la creación y ejecución de java desde un editor de texto común hasta las herramientas propias de java.


Para ello es necesario contar con el paquete JRE y JDK, una vez obtenidos continuamos con el editor de texto que deseen y avanzamos.

Comenzamos con un archivo con extensión .java lo llamaremos.

HolaMundo.java


  public class HolaMundo{
  	public static void main(String[] args){
    	System.out.println("Hola Mundo");
    }
  }
  

Una vez que tengamos el archivo continuaremos con cmd posicionándonos en la ubicación del archivo HolaMundo.java ejecutando el siguiente comando.

_>: javac HolaMundo.java

Este comando compila el código en este momento se muestran todos los errores obtenidos durante la compilación, de salir todo bien se estará creando un archivo con el extensión .class.

El siguiente comando a ejecutar.

_>: java HolaMundo

Esta vez sin la extensión java ya que por ahora lo que estaremos ejecutando será el código compilado, de aquí en adelante si se realiza un cambio en el código, se debe de recompilar ejecutando javac seguido de java.






Por el momento es todo, no olvides comentar, que opinas al respecto. al igual que hacerte un seguidor y recibir las notificaciones de las siguientes publicaciones.

jueves, 5 de marzo de 2020

Chat Privado con NodeJs parte 5 ( Creando estilo a ventana privada ) Final.

Continuando con el proyecto del chat privado con node js, es momento de finalizar, de antemano les agradezco el prestarme su tiempo para leerme y continuar con el proyecto, entrada tras entrada.


Comencemos, Es hora de dar fin al proyecto concluyendo con el estilo a la ventana privada de nuestro chat, para ello, nos vamos a nuestro archivo chatstyle.css agregando los siguientes estilos.

chatstyle.css

body {
    font: 13px Helvetica, Arial;
}
.contentUser {
    border: solid 1px;
    width: 300px;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    height: 500px;
}
ul#usersActivos {
    list-style: none;
    padding: 0;
    height: 445px;
    overflow: hidden;
    overflow-y: scroll;
}
.title-users {
    padding: 1em;
    background-color: #2f2f5d;
    text-align: center;
    color: #f1f1f1;
    cursor: move;
}
#usersActivos li {
    border-bottom: solid 1px;
    padding: 0.75em;
    cursor: pointer;
}
#usersActivos li div {
    font-size: 1.15em;
}
.conv-privada {
    border: solid 1px #a0a0a0;
    width: 300px;
    position: absolute;
    left: 300px;
    background-color: #fafafa;
}
.cnt-title {
    padding: 0.5em;
    background-color: #2f2f5d;
    color: white;
    cursor: move;
}
.cnt-conv {
    height: 250px;
    overflow: hidden;
    background-color: #f7f4f4;
    overflow-y: scroll;
    margin-bottom: 0.25em;
}
.cntControl {
    border-top: solid 1px;
}
.conv {
    list-style: none;
    padding: 0.15em;
}
.conv li {
    margin: 0.15em;
    padding: 0.5em;
}

.msg-amigo {
    background-color: #bfbaf7;
}

.msg-propio {
    text-align: right;
    background-color: #a9c9e4;
}
.msg-amigo div, .msg-propio div {
    word-break: break-all;
}
.msg-propio span, .msg-amigo span {
    font-size: 0.75em;
}
.conv-close {
    position: absolute;
    right: 0.75em;
    font-style: initial;
    cursor: pointer;
    font-size: 1.25em;
    top: 0.25em;
}
.conv-finalizada {
    height: 26.15em;
    width: -webkit-fill-available;
    background: #3e3e3e5c;
    position: absolute;
    top: 2em;
}


Hagamos un resumen de lo expuesto.

La estructura del proyecto deberá haber quedado de la siguiente manera.


El archivo chatstyle.css quedará como lo muestro anteriormente, ahora, control.js queda de la siguiente manera:

Control.js

var socket = io();
var btnLogin = document.getElementById('btnLogin');
var lg = document.getElementById('login');
btnLogin.onclick=function(){
 var usr = document.getElementById('user');
 if((usr.value.trim()).length>0){
  socket.emit('connectUser',usr.value);
  window.datos={
   user:usr.value,
   clave: socket.id
  };
  window.document.title = usr.value;
 }
}
socket.on('isLogin',function(value){
 if(typeof window.datos != 'undefined'){
  lg.setAttribute('hidden','');
  var userActivos = document.getElementById('usersActivos');
  userActivos.parentNode.removeAttribute('hidden');
  userActivos.innerHTML = "";
  for(var i = 0; i0){
   ntf.textContent=dta.user+" is writing...";
  }else{
   ntf.textContent='';
  }
 }
});
socket.on('isDisconnected',function(dta){
 if(document.getElementById(dta.clave)!=null){
  var ntf = document.getElementById('isW_'+dta.clave);
  ntf.textContent=dta.user+" is disconnected";
  var block = create({type:'DIV',class:'conv-finalizada'});
  var cnt = document.getElementById(dta.clave);
  cnt.appendChild(block);
 }
});
function create(dta){
 var obj = Object.keys(dta);
 var elemento = document.createElement(dta.type);
 for( var i = 0; i < obj.length; i ++ ){
  if(obj[i]!='type'){
   elemento.setAttribute(obj[i],dta[obj[i]]);
  }
 }
 return elemento;
}
function draggable_2(title, content) {
    var px = 0, py = 0;
    var dragObj = null;
    var obj = content || title;
    obj.style.position = "absolute";
    title.addEventListener('mousedown', function () {
        obj.addEventListener('mousedown', onMouseDown);
        function onMouseDown(a) {
            px = a.layerX;
            py = a.layerY;
            dragObj = obj;
        }
        obj.addEventListener('mouseup', function (e) {
            obj.removeEventListener('mousedown', onMouseDown, false);
            dragObj = null;
        });
        obj.addEventListener('mousemove', function (e) {
            var x = e.pageX - px;
            var y = e.pageY - py;
            if (dragObj == null)
                return;
            dragObj.style.left = x + "px";
            dragObj.style.top = y + "px";
        });
    });
}
function armaVentanaPrivada(clave,to){
 if(document.getElementById(clave)==null){
  var cnt = create({type:'DIV','id':clave,class:'conv-privada'});
  var emClose = create({type:'EM',class:'conv-close'});
  var ttl = create({type:'DIV',class:'cnt-title'});
  var cntCnv = create({type:'DIV',class:'cnt-conv','id':'cntCnv_'+clave});
  var lista = create({type:'UL',class:'conv','id':'conv_'+clave});
  var cntCtr = create({type:'DIV',class:'cntControl'});
  var notificacion = create({type:'DIV',class:'is-writing',id:'isW_'+clave});
  var txtMsg = create({type:'TEXTAREA',name:'entrada',rows:'4','id':'inpMsg_'+clave,'style':'resize:none;width:225px;'});
  var btn = create({type:'BUTTON','id':'btn_'+clave,'style':'float: right;padding: 0.7em;margin-top: 0em;padding-top: 1.5em;padding-bottom: 2em;position: absolute;'});
  ttl.textContent=to;
  btn.textContent="Aceptar";
  emClose.textContent='X';
  cntCtr.appendChild(txtMsg);
  cntCtr.appendChild(btn);
  cntCnv.appendChild(lista);
  ttl.appendChild(emClose);
  cnt.appendChild(ttl);
  cnt.appendChild(cntCnv);
  cnt.appendChild(notificacion);
  cnt.appendChild(cntCtr);
  document.body.appendChild(cnt);
  draggable_2(ttl,cnt);
  txtMsg.onkeyup=function(){
   socket.emit('imWriting',{
    user:window.datos.user,
    clave:window.datos.clave,
    length: this.value.length,
    recibe:to
   });
  }
  emClose.onclick = function(){
   cnt.remove();
  }
  btn.onclick = function(){
   if((txtMsg.value.trim()).length>0){
    socket.emit('send_message',{
     recibe:to,
     envia:{user:window.datos.user,clave:window.datos.clave},
     message:txtMsg.value
    });
    agregaMensaje(lista,1,window.datos.user,txtMsg.value, cntCnv);
    txtMsg.value = '';
    txtMsg.focus();
   }
  }
  return {lista:lista,content:cntCnv};
 }else{
  return {lista:document.getElementById('conv_'+clave), content: document.getElementById('cntCnv_'+clave)};
 }
}
function agregaMensaje(ul,cve,de,msg,cntCnv){
 var dvm = create({type:'DIV'});
 var li = create({type:'LI',class:((cve==1)?'msg-propio':'msg-amigo')});
 var spn = create({type:'SPAN'});
 var fd = new Date();
 var time = fd.getHours()+":"+fd.getMinutes()+":"+fd.getSeconds();
 spn.textContent= ((cve==1)?time+" "+de:de+" "+time);
 dvm.textContent= msg;
 li.appendChild(spn);
 li.appendChild(dvm);
 ul.appendChild(li);
 cntCnv.scrollTo(0,cntCnv.scrollHeight);
}
draggable_2(document.getElementById('ttlUsersActivos'), document.getElementById('cntUsersActivos'));


El lado del cliente, es decir el index, debera quedar de la siguiente manera.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>inovania</title>
          <script type="text/javascript" src="/socket.io/socket.io.js"></script>
          <link rel="stylesheet" type="text/css" href="/css/chatstyle.css">
     </head>
     <body>
          <div class="login" id="login">
               <input type="text" id="user" placeholder="UserName"><button id="btnLogin">Aceptar</button>
          </div>
          <div class="contentUser" id="cntUsersActivos" hidden>
               <div class="title-users" id="ttlUsersActivos">Usuarios Activos</div>
               <ul id="usersActivos"></ul>
          </div>
          <script type="text/javascript" src="/js/control.js"></script>
     </body>
</html>





y por ultimo el app.js queda de la siguiente manera.

app.js


var express = require("express");
var app = express();
var http = require("http").createServer(app);
var io = require("socket.io")(http);
var path = require("path");
var users = [];
app.get('/',function(req,res){
 res.sendFile(__dirname+"/pages/index.html");
});
var publicDir = path.join(__dirname,'/');
app.use(express.static(publicDir));
io.on('connection',function(socket){
 socket.on('disconnect',function(){
  var keys =  Object.keys(users);
  var existe = false;
  var disconnected = {};
  for( var i = 0;i < keys.length; i ++ ){
   if( users[keys[i]] == socket.id ){
    disconnected.user = keys[i];
    disconnected.clave = users[keys[i]];
    delete users[keys[i]];
    existe = true;
   }
  }
  if(disconnected.hasOwnProperty('user')){
   io.emit('isDisconnected',disconnected);
  }
  if(existe){
   var nKeys = Object.keys(users);
   var arrRtn = [];
   for( var i = 0;i < nKeys.length; i ++ ){
    arrRtn.push({'user':nKeys[i], 'clave': users[nKeys[i]]});
   }
   io.emit('isLogin',arrRtn);
  }
 });
 socket.on('connectUser',function(user){
  var existe = false;
  var keys =  Object.keys(users);
  var arrRtn=[];
  for( var i = 0;i < keys.length; i ++ ){
   arrRtn.push({'user':keys[i], 'clave': users[keys[i]]});
   if( users[keys[i]] == socket.id ){
    existe = true;
   }
  }
  if(!existe){
   users[user]=socket.id;
   arrRtn.push({'user':user, 'clave': socket.id});
  }
  io.emit('isLogin',arrRtn);
 });
 socket.on('send_message',function(data){
  var socketId = users[data.recibe];
  io.to(socketId).emit("newMessage",data);
 });
 socket.on('imWriting',function(dta){
  var socketId = users[dta.recibe];
  io.to(socketId).emit("isWriting",dta);
 });
});
http.listen(8420,function(){
 console.log('listening');
});



Anterior

Sin mas por el momento, me despido... Te invito a dejar tu comentario, que te parecio el tutorial, si quieres que le agregemos algo mas, o si tienes sugerencias al respecto.


Saludos, hasta la proxima.


miércoles, 26 de febrero de 2020

Chat Privado con NodeJs parte 4 ( Creación de ventana privada )

En chat privado con NodeJs.

Como les comente en la entrada anterior, vimos como generar la lista de usuarios y mandarla a las ventanas ( usuarios ) conectados.

Creando la venta privada.


Ahora veremos como hacer la ventana de conversación privada a manera que valla quedando de la siguiente manera...

Por ahora comenzaremos con los siguientes cambios.

app.js

//
 socket.on('send_message',function(data){
  var socketId = users[data.recibe];
  io.to(socketId).emit("newMessage",data);
 });

Este código trata de lo siguiente, obtenemos de dta -> el usuario quien va a recibir el mensaje, extraemos el socket.id de la lista de usuarios  y reenviamos dta directo a la función newMessage, por otro lado en control.js estaremos haciendo muchos mas cambios.

Comenzando por el echo de agregar la siguiente linea a la función isLogin.

control.js

   liUser.onclick=newConversacion;

newConversacion:


Se encarga de invocar la función armaVentanaPrivada la cual construirá lo necesario para que se tenga una conversación privada con cierto usuario.

control.js

function newConversacion(e){
 var to = e.target.innerText;
 var clave = e.target.getAttribute('clave');
 armaVentanaPrivada(clave, to);
}

function armaVentanaPrivada(clave,to){
 if(document.getElementById(clave)==null){
  var cnt = create({type:'DIV','id':clave,class:'conv-privada'});
  var emClose = create({type:'EM',class:'conv-close'});
  var ttl = create({type:'DIV',class:'cnt-title'});
  var cntCnv = create({type:'DIV',class:'cnt-conv','id':'cntCnv_'+clave});
  var lista = create({type:'UL',class:'conv','id':'conv_'+clave});
  var cntCtr = create({type:'DIV',class:'cntControl'});
  var notificacion = create({type:'DIV',class:'is-writing',id:'isW_'+clave});
  var txtMsg = create({type:'TEXTAREA',name:'entrada',rows:'4','id':'inpMsg_'+clave,'style':'resize:none;width:225px;'});
  var btn = create({type:'BUTTON','id':'btn_'+clave,'style':'float: right;padding: 0.7em;margin-top: 0em;padding-top: 1.5em;padding-bottom: 2em;position: absolute;'});
  ttl.textContent=to;
  btn.textContent="Aceptar";
  emClose.textContent='X';
  cntCtr.appendChild(txtMsg);
  cntCtr.appendChild(btn);
  cntCnv.appendChild(lista);
  ttl.appendChild(emClose);
  cnt.appendChild(ttl);
  cnt.appendChild(cntCnv);
  cnt.appendChild(notificacion);
  cnt.appendChild(cntCtr);
  document.body.appendChild(cnt);
  draggable_2(ttl,cnt);
  txtMsg.onkeyup=function(){
   socket.emit('imWriting',{
    user:window.datos.user,
    clave:window.datos.clave,
    length: this.value.length,
    recibe:to
   });
  }
  emClose.onclick = function(){
  cnt.remove();
 }
 btn.onclick = function(){
  if((txtMsg.value.trim()).length>0){
   socket.emit('send_message',{
    recibe:to,
    envia:{user:window.datos.user,clave:window.datos.clave},
    message:txtMsg.value
   });
   agregaMensaje(lista,1,window.datos.user,txtMsg.value, cntCnv);
   txtMsg.value = '';
   txtMsg.focus();
  }
 }
 return {lista:lista,content:cntCnv};
}else{
 return {lista:document.getElementById('conv_'+clave), content: document.getElementById('cntCnv_'+clave)};
}
}
                
Para esta función le pasaremos dos parámetros, clave la cual es el socket.id de quien esta enviando el mensaje o bien a quien se va a enviar el mensaje y como segundo parámetro es el nombre del usuario. La acción de esta función, es bastante básica.
  • Pregunta si ya existe una conversación para la clave que se está pasando como parámetro
    • de ser así retornará un objeto de dos propiedades, { lista: el objeto de lista de conversación, content: el objeto contenedor de la conversación } 
  • Si no existe la conversación con la clave que se esta pasando, se construirá la ventana flotante.
    • Ahora bien, al botón se agrega el evento click, el cual va a extraer el contenido del text área y se enviara a la función send_message pasando le un objeto con las propiedades, 
    • {
      • recibe: el id del socket a quien queremos enviar el mensaje,
      • envia: { 
        • user: usuario que está enviando el mensaje, 
        • clave: clave del usuario que envia el mensaje 
        • }, 
      • message: el contenido del textarea 
    • }
  • Ahora bien. A la caja de texto se agrega el evento keyup el cual siempre y cuando el value de esta caja sea mayor a 1 en ese caso se envía una petición a la función imWriting pasando como parámetro un objeto con las características.
    • {
      • user: usuario que envía,
      • clave: clave del usuario que envía,
      • length: longitud de texto escrito,
      • recibe: id de usuario que recibirá la notificación
    • }
  • De esta manera el usuario con quien se esta conversando sabrá que se esta escribiendo su respuesta a  su comentario.

Debido a que del lado del servidor tenemos un reenvio del mensaje, o bien, recibiendo el mensaje de alguien, es necesario hacer la función newMessage quedando de la siguiente manera.

control.js

//
socket.on('newMessage',function(value){
 var obj = armaVentanaPrivada(value.envia.clave,value.envia.user);
 agregaMensaje(obj.lista,2,value.envia.user,value.message,obj.content);
 var ntf = document.getElementById('isW_'+value.envia.clave);
 ntf.textContent='';
});


Como pueden ver en la función armaVentanaPrivada se invoca una función llamada create, bueno esta funcion esta construida de la manera que sirve para poder hacer los elementos del dom pasando solo las propiedades del elemento, 

control.js

//
function create(dta){
 var obj = Object.keys(dta);
 var elemento = document.createElement(dta.type);
 for( var i = 0; i < obj.length; i ++ ){
  if(obj[i]!='type'){
   elemento.setAttribute(obj[i],dta[obj[i]]);
  }
 }
 return elemento;
}

Para concluir me quedan un par de funciones que agregar, en este caso las funciones que muestran cuando el usuario con quien estamos hablando esta escribiendo o bien cuando el usuario con quien estamos hablando se desconecta.

control.js

socket.on('isWriting',function(dta){
 if(document.getElementById(dta.clave)!=null){
  var ntf = document.getElementById('isW_'+dta.clave);
  if(dta.length>0){
   ntf.textContent=dta.user+" is writing...";
  }else{
   ntf.textContent='';
  }
 }
});
socket.on('isDisconnected',function(dta){
 if(document.getElementById(dta.clave)!=null){
  var ntf = document.getElementById('isW_'+dta.clave);
  ntf.textContent=dta.user+" is disconnected";
  var block = create({type:'DIV',class:'conv-finalizada'});
  var cnt = document.getElementById(dta.clave);
  cnt.appendChild(block);
 }
});


Se me estaba olvidando una de las funciones mas importantes del tema, el agregar el mensaje a nuestra conversación, quedando de la siguiente manera.

control.js

function agregaMensaje(ul,cve,de,msg,cntCnv){
 var dvm = create({type:'DIV'});
 var li = create({type:'LI',class:((cve==1)?'msg-propio':'msg-amigo')});
 var spn = create({type:'SPAN'});
 var fd = new Date();
 var time = fd.getHours()+":"+fd.getMinutes()+":"+fd.getSeconds();
 spn.textContent= ((cve==1)?time+" "+de:de+" "+time);
 dvm.textContent= msg;
 li.appendChild(spn);
 li.appendChild(dvm);
 ul.appendChild(li);
 cntCnv.scrollTo(0,cntCnv.scrollHeight);
}

Sin mas por el momento me despido, esperando que me dejen sus comentarios, que tal les ha parecido el tutorial hasta ahora, si quienren que se agrege algo mas o si me pase de algo....


No olvides hacerte un seguidor y estar al pendiente de la proxima entrada en la cual mostraremos como hacer el estilo a la ventana privada.


hasta pronto.

Anterior                                                                                     Siguiente

lunes, 24 de febrero de 2020

Chat Privado con NodeJs parte 3 ( Estilo a lista de usuarios )

Continuando con el tema del chat es momento de embellecer nuestra lista de usuarios.

Es el momento de crear y modificar el archivo  chatStyle.css en la carpeta raíz/css/chatstyle.css, para ello, lo creamos y comenzamos a agregar los estilos a las diferentes clases.

chatstyle.css

body {
    font: 13px Helvetica, Arial;
}
.contentUser {
    border: solid 1px;
    width: 300px;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    height: 500px;
}
ul#usersActivos {
    list-style: none;
    padding: 0;
    height: 445px;
    overflow: hidden;
    overflow-y: scroll;
}
.title-users {
    padding: 1em;
    background-color: #2f2f5d;
    text-align: center;
    color: #f1f1f1;
    cursor: move;
}
#usersActivos li {
    border-bottom: solid 1px;
    padding: 0.75em;
    cursor: pointer;
}
#usersActivos li div {
    font-size: 1.15em;
}


Esto dejara una lista de usuarios con el siguiente estilo

Y es así como concluimos esta entrada... 



Esperare sus comentarios, si no se han unido al blog, agrégalo como favorito. 




Chat privado con nodeJs Parte. 2 ( Conexion y registro de usuarios )

Historia:


Continuando con el proyecto de chat privado con nodeJs ahora veremos como hacer los métodos del lado del servidor.

Desde este lado nos encargaremos de hacer que los clientes se conecten entre si poniendo un intermediario a la conversación.

En este caso los archivos a modificar son, index.html, app.js y control.js, agregando las siguientes lineas.

Código:


index.html
<!-- pantalla login -->
   <div class="login" id="login">
      <input type="text" id="user" placeholder="UserName">
      <button id="btnLogin">Aceptar</button>
   </div>
<!-- plantilla de usuarios -->
   <div class="contentUser" id="cntUsersActivos" hidden>
        <div class="title-users" id="ttlUsersActivos">Usuarios Activos</div>
        <ul id="usersActivos"></ul>
   </div>

Este fragmento se va directo al body del index, dando pie a un input el cual contendra el usuario y un boton que mandara la petición al app.js para asignar un nombre al socket que se acaba de conectar. La acción la agregamos al.

control.js

var btnLogin = document.getElementById('btnLogin');
btnLogin.onclick=function(){
 var usr = document.getElementById('user');
 if((usr.value.trim()).length>0){
  socket.emit('connectUser',usr.value);
  window.datos={
   user:usr.value,
   clave: socket.id
  };
  window.document.title = usr.value;
 }
}


Obtenemos el elemento btnLogin y le asignamos la función click, mediante la cual le decimos que obtenga del input su valor y lo mande a la función ('conectUser') que se encuentra en app.js ademas de crear una variable global en window llamada [" datos "] con los parametros user y clave, por ultimo se cambia el titulo de la ventana dandole el nombre del usuario que se a conectado.

Ademas de agregar el evento click al botón, hay que agregar la función de la recepción de usuarios del lado del cliente, es decir, la parte que agrega usuarios a nuestra lista.

control.js

var lg = document.getElementById('login');
socket.on('isLogin',function(value){
 if(typeof window.datos != 'undefined'){
  lg.setAttribute('hidden','');
  var userActivos = document.getElementById('usersActivos');
  userActivos.parentNode.removeAttribute('hidden');
  userActivos.innerHTML = "";
  for(var i = 0; i<value.length; i ++ ){
   if(value[i].clave!=window.datos.clave){
    var liUser = document.createElement('LI');
    var divUser = document.createElement('DIV');
    divUser.textContent=value[i].user;
    divUser.setAttribute('clave',value[i].clave);
    liUser.setAttribute('clave',value[i].clave);
    liUser.appendChild(divUser);
    userActivos.appendChild(liUser);
   }
  }
 }
});


socket.on( 'isLogin') se encarga de escuchar del lado del cliente, las emisiones del servidor, app.js, en este caso leemos cada uno de los usuarios agregandolos o eliminandolos de nuestra lista.

Ahora bien, del lado del app es necesario explicar lo siguiente. crearemos un arreglo llamado users en el cual se agrega el usuario que se acaba de conectar, modificando la funcion de disconnect, preguntamos por el id que se esta desconectando, para asi eliminar el usuario correspondiente del lado del cliente.

app.js

var users = [];
io.on('connection',function(socket){
 socket.on('disconnect',function(){
  var keys =  Object.keys(users);
  var existe = false;
  for( var i = 0;i < keys.length; i ++ ){
   if( users[keys[i]] == socket.id ){
    delete users[keys[i]];
    existe = true;
   }
  }
  if(existe){
   var nKeys = Object.keys(users);
   var arrRtn = [];
   for( var i = 0;i < nKeys.length; i ++ ){
    arrRtn.push({'user':nKeys[i], 'clave': users[nKeys[i]]});
   }
   io.emit('isLogin',arrRtn);
  }
 });
 socket.on('connectUser',function(user){
  var existe = false;
  var keys =  Object.keys(users);
  var arrRtn=[];
  for( var i = 0;i < keys.length; i ++ ){
   arrRtn.push({'user':keys[i], 'clave': users[keys[i]]});
   if( users[keys[i]] == socket.id ){
    existe = true;
   }
  }
  if(!existe){
   users[user]=socket.id;
   arrRtn.push({'user':user, 'clave': socket.id});
  }
  io.emit('isLogin',arrRtn);
 });
});


Agregamos la función connectUser pasando como parámetro al usuario recién conectado, primero preguntamos si el usuario nuevo existe, de ser así no se hace nada, de lo contrario si no existe se agrega al arreglo y finalmente se envía al cliente en el arreglo de usuarios.




Por ahora es todo, espero sus comentarios.

Unete a mi blog, para asi poder estar al tanto de la siguiente entrada.



Anterior             Siguiente

domingo, 23 de febrero de 2020

Chat privado con NodeJS

Historia:


Anteriormente les deje una entrada con el tema Principios con NodeJs en el cual les hablo de como iniciar un proyecto de hola mundo con node js.

Bueno ahora les traigo un proyecto con la idea de hacer un chat privado, bastante básico y sencillo de hacer.

Sin mas comenzamos.

Instalacion:


Primero que nada comencemos con la instalacion de node js la cual es muy sencilla, bajamos el instalador correspondiente a nuestro sistema en mi caso es windows de 64 bits.

Link: https://nodejs.org/es/download/



La instalación es bastante sencilla como cualquier programa, Instalar-> siguiente -> siguiente 
->siguiente -> finalizar, una vez instalado lo que sigue es la construcción de nuestro proyecto, en xampp\htdocs creamos una carpeta la cual sera nuestro chat. para ello seguimos los siguientes pasos...

Configuracion:



   C:\xampp\htdocs>mkdir inovaniachat

una vez creada la carpeta inicializamos el proyecto,

     npm init


instalamos express y socket.io

        npm install express@4.15.2
        npm install socket.io


con ello tenemos todo lo necesario para continuar con nuestro proyecto, lo que sigue es hacer el index.html y nuestra app.js  quedando con el siguiente codigo.

Código:


index.html

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>inovania</title>
          <script type="text/javascript" src="/socket.io/socket.io.js"></script>
          <link rel="stylesheet" type="text/css" href="/css/chatstyle.css">
     </head>
     <body>
          <script type="text/javascript" src="/js/control.js"></script>
     </body>
</html>



control.js

var socket = io();


app.js

var express = require("express");
var app = express();
var http = require("http").createServer(app);
var io = require("socket.io")(http);
var path = require("path");

app.get('/',function(req,res){
 res.sendFile(__dirname+"/pages/index.html");
});
var publicDir = path.join(__dirname,'/');
app.use(express.static(publicDir));

io.on('connection',function(socket){
 console.log('user is connected');
 socket.on('disconnect',function(){
  console.log('user is disconnected');
 });
});
http.listen(8420,function(){
 console.log('listening');
});


Les dejo aquí un vídeo de referencia.

Sin mas por el momento los espero en la próxima entrada.



Deja tu comentario, si tienes cuenta de google, hazte un seguidor de inovania para que te lleguen las notificaciones de los siguientes post.

Siguiente