Categorías
Desarrollo y Programación

Solución al ERROR 1698 (28000): Access denied for user

Este problema me ocurrió en un sistema Raspberry Pi con Ubuntu Server y MySQL, a continuación las versiones que utilizo:

  • Ubuntu 20.04 LTS
  • mysql  Server version: 8.0.20-0ubuntu0.20.04.1 (Ubuntu)

Procedimiento para replicar el error

Después de configurar el server MySQL y hacer mysql_secure_installation mi usuario queda configurado, pero al intentar conectarse con el comando:

 mysql -u root -p

Nos muestra el error:

ERROR 1698 (28000): Access denied for user 'root'@'localhost'

Soluciones Alternativas:

La mayoría de las soluciones te piden deshabilitar las funciones que vienen en MySQL 8.0 habilitadas por defecto ¿que beneficio tiene quitar las opciones de seguridad por utilizar un sistema obsoleto?

Solución:

Ingresar a MySQL con el comando sudo

 sudo mysql -u root

Listar todos los usuarios que se tienen para validar el tipo de autenticación.

SELECT User, Host, plugin FROM mysql.user;

Lo que nos muestra una lista de usuarios como:

+------------------+-----------+-----------------------+
| User             | Host      | plugin                |
+------------------+-----------+-----------------------+
| debian-sys-maint | localhost | caching_sha2_password |
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session    | localhost | caching_sha2_password |
| mysql.sys        | localhost | caching_sha2_password |
| root             | localhost | auth_socket           |
+------------------+-----------+-----------------------+
5 rows in set (0.00 sec)

El usuario que creamos con el asistente de mysql_secure_installation tiene un tipo de autenticación auth_socket lo que no nos permite iniciar sesión.

Crear usuario con el SHA-2

Recuerden otorgar los permisos correspondientes de acceso.

CREATE USER 'elporfirio'@'localhost'
IDENTIFIED WITH caching_sha2_password BY 'MyPassword2020*';

Editar usuario para cambiar a SHA-2

ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'MyPassword2020*';

¿Problemas con un password poco seguro? Revisa la información más abajo.

Nuestro usuario ya debería aparecer abajo el ejemplo con el creado y el editado, notar que root tiene ahora el nuevo plugin:

mysql> SELECT User, Host, plugin FROM mysql.user;
+------------------+-----------+-----------------------+
| User             | Host      | plugin                |
+------------------+-----------+-----------------------+
| debian-sys-maint | localhost | caching_sha2_password |
| elporfirio       | localhost | caching_sha2_password |
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session    | localhost | caching_sha2_password |
| mysql.sys        | localhost | caching_sha2_password |
| root             | localhost | caching_sha2_password |
+------------------+-----------+-----------------------+
6 rows in set (0.00 sec)

Ahora que el usuario ya tiene el plugin: caching_sha2_password ya puedes iniciar sesión normalmente con el usuario que decidas:

mysql -u elporfirio -p

Solucionado y listo para utilizar tu base de datos MySQL en su última versión.

Problemas con la seguridad de la contraseña

Puedes revisar el medium de micheleberardi para tener mas informción de las politicas de seguridad.

Referencias:

Categorías
Gamer

Solución al error NP-41372-7 en PS4

Con este error no es posible iniciar un juego, al iniciar aparece una pantalla azul con este código y no es posible jugar.

En mi caso me paso con Crash Bandicoot N’sane Trilogy, pero busque en internet y sucede con Call of Duty, Battlefield, Dead By Daylight y no dudo que otros.

NO es necesario entrar en modo seguro, borrar completamente la información de la PS4 o eliminar tus juegos.

– elporfirio

Diagnóstico

  1. No es posible iniciar un juego con tu usuario.
  2. Crea un nuevo usuario.
  3. Ingresa con ese usuario al juego.
  4. Si el juego funciona normalmente puedes solucionarlo como explico a continuación.

Solución

  1. Respalda tus datos guardados (ya sea local o con el servicio PS Plus).
  2. Desactiva tu PS4 como tu consola principal.
  3. Cierra sesión de PlayStation Network.
  4. Elimina tu usuario (local) de la consola.
  5. Crea un nuevo usuario e inicia sesión en playstation network (con tus accesos de tu viejo usuario).
  6. Descarga tu respaldo de datos guardados.
  7. Inicia la aplicación.

Opciones Adicionales

Al eliminar tu cuenta puedes restablecer los ajustes de fábrica del PS4, para eliminar todo rastro de alguna configuración que no funcione.

Categorías
Desarrollo y Programación

Importar y Exportar con Javascript ES6

Bienvenidos a otra valiosa información en internet totalmente en español, en esta ocasión vamos a ver cómo importar y exportar variables, funciones, expresiones y clases con JavaScript.

Actualizaciones:
– Elimine paréntesis de la declaración de clases

Exports Default

Cuando se utiliza un default para exportar, se puede utilizar cualquier nombre para importar.

Función Anónima

// helpers.js
export default function() {
  // Do something
}

// index.js
import Awesomeness from './helpers'

console.log(Awesomeness); // ƒ(){}

Función

// helpers.js
export default function hiDude() {
  // Do something
}

// index.js
import Awesomeness from './helpers'

console.log(Awesomeness); // ƒ hiDude(){}

No es posible tener más de un “export default” en un archivo, así que no lo intentes en casa.

– La comunidad PRO de JavaScript

Clase Anónima

Recordar que las clases son un tipo de objeto con superpoderes.

// classes.js
export default class {
  // rest of class
}

// index.js
import ImportantClass from './classes'

console.log(ImportantClass); // ƒ _default(){}

Clase

// classes.js
export default class Person {
  // rest of class
}

// index.js
import ImportantClass from './classes'

console.log(ImportantClass); // ƒ Person(){}

Variables

// constants.js
const PI = 3.1416;
export default PI;

// index.js
import PIValue from './constants'

console.log(PIValue); // 3.1416

Otro método para exportar variables:

// constants.js
const PI = 3.1416;
export {PI as default};

// index.js
import PIValue from './constants'

console.log(PIValue); // 3.1416

Este último también sirve para las funciones:

// constants.js
function getPI(){
  return 3.1416
}
export {getPI as default};

// index.js
import PIValue from './constants'

console.log(PIValue); // ƒ getPI(){}

Named Exports

A diferencia de los default, en este tipo si es necesario dar un nombre a nuestra variable, método, etc.

Exportar por separado

export function add(){
  // add something
}

export class Person {
  // class definition
}

export const PI = 3.1416;

export let car = {
  paintColor: 'red'
}

Exportar todo en una sentencia

function add(){
  // add something
}

class Person {
  // class definition
}

const PI = 3.1416;

let car = {
  paintColor: 'red'
}

export { add, Person, PI, car };

Para importar estos elementos (cualquiera de las 2 formas anteriores) es necesario utilizar el nombre que se les dio al momento de exportar:

import { add, Person, PI, car } from './helpers'

console.log(add); // ƒ add(){}
console.log(Person); // ƒ Person(){}
console.log(PI); // 3.1416
console.log(car); // { paintColor: 'red' }

Exportar named y default

En el caso de las named, deben importarse entre los corchetes y el default queda fuera de los corchetes.

// important.js
export add() {
  // do add
}

export const maxValue = 999;

export default class Calculator {
  // Calculator class
}
// index.js
import Calc, { maxValue, add } from './important'

// Recordar que el default no importa el nombre
console.log(Calc); // ƒ Calculator() {}
console.log(maxValue); // 999
console.log(add); // ƒ add() {}

No es posible hacer un “named export” con una función anónima o una expresión. Siempre es necesario que tenga un nombre.

– La comunidad PRO de JavaScript

Exportar con un nombre diferente (alias)

En algunos casos nos puede ayudar darle un nombre diferente a nuestros exports.

function add(){
  // add something
}

function divide(){
  // divide something
}

export { add as plus, divide as split };

Al momento de importar es necesario importar con ese nuevo nombre que le asignamos, sin embargo nuestros métodos conservaran la referencia a su nombre original.

import { plus, split } from './calculator.js'

console.log(plus); // ƒ add() {} <-- add en vez de plus
console.log(split); // ƒ divide() {}

Exportar desde otros archivos

Si aunque el uso de este tipo no es muy común, es posible hacerlo. Supongamos que tenmos un archivo pruncipal:

export default add() {
  // add something
}

export multiply() {
  // multiply something
}

ahora podemos tener un exportador que agrupe de uno o diferentes archivos:

export {
  default,
  multiply
} from './calculator'

Ahora podemos importar del nuevo archivo:

import add, { multiply } from './operations'

console.log(add); // ƒ add() {}
console.log(multiply): // ƒ multiply {}

Exportar desde otros archivos con alias

De igual forma que antes podemos utilizar alias para exportar y renombrar.

export {
  default as plus,
  multiply
} from './calculator'

Ahora que nuestros default pasaron a ser named, es necesario importarlos con ese nuevo nombre:

import { plus, multiply } from './operations-alias'

console.log(plus); // ƒ add() {}
console.log(multiply): // ƒ multiply {}

Importar con alias

Es posible también agregar un alias al momento de importar.

import { plus as suma, multiply as multiplicar } from './operations-alias'

Esto es útil cuando importamos métodos con el mismo nombre que vengan de distintos archivos. A continuación 2 métodos con el mismo nombre pero en distintos archivos:

export getAge() {}
export getAge() {}

Ahora si queremos utilizarlos podemos asignarles un alias:

import { getAge as grandFatherAge } from './grandfather';
import { getAge as fatherAge } from './father';

console.log(grandFatherAge);
console.log(fatherAge);

Exportar todo

Es posible utilizar el comodín “*” para exportar todos los elementos, tomemos como ejemplo el siguiente archivo.

export function add(){
  // add something
}

export class Person {
  // class definition
}

export const PI = 3.1416;

export let car = {
  paintColor: 'red'
}

export default helloWorld(){
  // say hello
}

Y al momento de exportar solo necesitamos lo siguiente:

export * from './examples';

Al hacer un export con * , el método default no se exporta por lo que debe exportarse por separado.

– La comunidad PRO de JavaScript

Para exportar además el método default necesitamos lo siguiente:

export { default } from './examples';
export * from './examples';

En caso de existir más de un default es necesario utilizar los alias.

Importar todo

Al importar con * es necesario asignar un alias, este alias ahora será un objeto con todo lo importado (incluido el default):

import * as exampleMethods from './examples';

console.log(exampleMethods.add); // ƒ add(){}
console.log(exampleMethods.Person); // ƒ Person(){}
console.log(exampleMethods.PI); // 3.1416
console.log(exampleMethods.car); // { paintColor: 'red' }
console.log(exampleMethods.default); // ƒ helloWorld() {}

Es posible importar el default por separado, aunque de igual forma existirá en nuestro objeto:

import exampleDefault, * as exampleMethods from './examples';

console.log(exampleMethods.default); // ƒ helloWorld() {}
console.log(exampleDefault); // ƒ helloWorld() {}

Ahora si a andar desnudos por la casa

Ahora que sabes todas las formas de importar y exportar modulos, variables, etc. es hora de mostrarle al mundo que estas a punto de ser un ninja del Javascript o que ya eres un ninja avanzado.

Si te gusto el post o tienes alguna duda deja tu comentario y no olvides seguirme por el resto de redes sociales.

Un saludo 😀 y nos vemos en la siguiente publicación.

Categorías
Desarrollo y Programación

Mis herramientas de desarrollo en Mac

De nuevo le hice una instalación de sistema operativo a mi iMac (19D76) para actualizar a la versión 10.15 MacOS Catalina.

Así que en esta ocasión les compartiré todas las aplicaciones que instalo al año 2020 para mi trabajo como desarrollador web y aplicaciones.

Instalar MacOS Catalina desde un USB

Se requiere tener una USB de 16Gb para crear el instalador, para crear la usb mágica seguir el tutorial oficial de Apple aquí.

La instalación es un proceso sencillo, pero el resto toma tiempo de descarga, de buscar y personalizar herramientas.

Instalar XCode Mandatorio

Para herramientas de desarrollo como Git y comandos como CURL o WGET necesitamos una extensión para la terminal, además de otras librerías. Instalar Xcode es la opción más sencilla y más pesada, así que mientras instala sugiero ver o leer algo que no consuma internet.

Necesitamos abrir Xcode al menos una vez para aceptar los términos y generar la licencia.

Habilitar la instalación de cualquier aplicación en Mac

Aplicaciones de terceros no son permitidas en Mac desde la versión 10.13, para habilitarlas necesitamos un comando en la terminal

sudo spctl --master-disable

La terminal definitiva

La terminal que viene con el Mac tiene muchas cualidades pero si queremos sacarle jugo debemos optar por la iTerm Terminal

Esteroides adicionales a la terminal

Ahora que tenemos iTerm Terminal, podemos trabajar libremente con bash, o meterle más potencia y trabajar con zsh, para más placer vamos a instalar OhMyzsh.

Gestor de Paquetes

Si has desarrollado ultimamente conocerás cosas como NPM, Yarn, Maven, Composer, etc. Bueno pues para Mac existe Brew: un gestor de paquetes que hace lo mismo pero para utilidades de desarrollo, desde Git hasta MySQL.

Este paquete además instala los Command Line Tools de Xcode

Un IDE para controlarlos a todos

Aquí todo depende de tus gustos, así que cualquier IDE que te acomode es el mejor para instalar, en mi caso utilizo los de Jetbrains, con su herramienta Toolbox, solo es elegir la aplicación requerida e instalar.

Control de versiones con Git + Sourcetree

El control de versiones lo hago con línea de comandos, pero cuando tenemos prisa podemos cometer errores que no se pueden ver tan fácilmente, para verlos recomiendo Sourcetree que nos facilita algunas tareas.

Chrome el mejor Navegador para Mac

Por supuesto google chrome es el navegador definitivo para Mac, Safari tiene unas herramientas de desarrollo complicadas, Firefox tiene errores con atajos de teclado y otros tienen una pésima compatibilidad

Y es todo por ahora

A partir de aquí depende en que tecnología vas a desarrollar pues las aplicaciones varían para un Nativo iOS, Android, o un react-native, PHP, angular, etc.

Y ustedes ¿Qué herramientas utilizan? dejenla en los comentarios.

Categorías
Opinión

Temas para el examen EGEL Ceneval de Computación e Informática

Hace tiempo que salí de la universidad de la carrera de Ingeniería de Sistemas y Comunicaciones, me titule por el examen general de conocimientos.

En estos días contamos con el apoyo de ex-alumnos que se habían titulado por el mismo medio, la verdad es que no recuerdo mucho de lo que nos platicaron, pero no debes preocuparte si lo tuyo es la computación.

Recordar que el examen tiene variantes y no podrás copiar al de al lado pues no vienen con el mismo código.

Este examen es válido para casi cualquier licenciatura/ingeniería en sistemas o computación, así que pueden variar los temas aunque en la base de ciencias básicas es la misma (según pláticas con otras carreras similares dentro del plantel).

Les daré el mismo consejo que me dieron a mí “no se preocupen”, hay muchas formas de titularse aparte del examen, si fallan simplemente tendrán que tomar otra vía, como titularse por bitácora de trabajo o la espantosa Tesis.

¿El examen EGEL CENEVAL es fácil?

Sí, siempre y cuando te dediques a cosas relacionadas con computación y tecnología en general, desde configurar una impresora o agregar un email a un cliente como Outlook o Thunderbird.

Y es más fácil si se te da la tecnología, esas curiosidades como “personalizar la firma de mi celular”, “como tener un dominio web propio”, “como conectar la impresora en red”, “como hacer que el wifi llegue a toda la casa”, “como activar mi windows pirata” 🙅🏻‍♂️, etc. Son buenas bases que te harán más apto para el examen

¿Debería hacerlo?

Si solo vas a la escuela para cumplir con tus papás, aunque no entiendes ni el porqué de las materias que te dan. La verdad es que mejor no.

El estrés y la tensión de estar horas sentado (mínimo 6) frente a una hojas de papel es traumático, para al final obtener algo reprobatorio y decepcionarse de la vida.

Como lo dije el examen no es para todos, existen otros métodos que se pueden acoplar más a tu forma de ser. Tengo compañeros que no lo pasaron (si y hablo que ya es el 2020 y soy egresado de hace 6 años). Ellos no se titularon pero ya tienen un trabajo estable, una familia a quien cuidar y pueden dormir tranquilos sin preocupaciones económicas.

¿Que temas vienen en el examen EGEL CENEVAL?

La siguiente es una lista de los posibles temas que recuerdo, la verdad todo depende de la versión que les toque. Es una mezcla con una lista rápida que hice hace tiempo, la verdad no se si lo escribí bien.

Redes, Infraestructura y Soporte

  • Calculo de redes
  • Tipos de sistemas (crm, mis, tos)
  • Modelo OSI (todas las capas)
  • Los puertos y para que se usan (FTP, SSH, SMTP)
  • Redes
    • Protocolos
    • Tipologías
    • Tecnologías
    • Estándares de la IEEE
  • Mantenimiento y soporte en general
    • Casos prácticos de cuantas computadoras conectar
    • Software de uso diario para oficina

Desarrollo de Software

  • Ciclo de vida del software
  • Tipos de pruebas para software (beta, alpha, caja negra, caja blanca)
  • Modelos de software
    • Dra.
    • Cascada
    • Win.win
    • Espiral
  • Herramientas de modelado
    • entrevista
    • documentación
    • cuestionarios
    • observación 
  • Base se datos
    • SQL
    • Diseño de bases (nada de programación)
  • Ingeniería del software
    • Ciclos de vida
    • Herramientas CASE
    • Diagramas
  • Programación
    • Sentencias
    • Decisión
    • Bucles

Microcontroladores y Hardware

  • Micro controladores
    • Lógica OR, AND, XOR
  • Modelos de PICs más comunes
  • Entrada y salida de microcontroladores comunes.

Recomendaciones personales

  • Ir con ropa muy cómoda
  • Levantarse temprano e ir bien desayunado
  • Desestresarse la tarde antes del examen (ir al cine, oír música, jugar en linea) pero no se duerman más de las 10 de la noche.
  • Pedir a un familiar que vaya después a dejarles comida (hay hora de comida entre las fases del examen) o que los acompañe.
  • Llevar más de 1 lápiz, un sacapuntas y goma de confianza.
  • Si van familiares a acompañando que se lleven revistas, cargador y todo por que la espera será larga para ellos.

Y pues es todo lo que tengo que recomendarles, por ahora. Mucha suerte y relájense no es para tanto.

Mi desempeño en el EGEL CENEVAL

Ah por si se lo preguntaban, tuve desempeño sobresaliente (de lo más alto). Y pues egrese de mi universidad con promedio de 7.8 , no soy un genio, más bien soy vago que me gusta hacer las cosas fáciles así que no deberían preocuparse mucho.

Si tienen algo que aportar pueden dejarlo en los comentarios. Gracias por leer y nos leemos en el siguiente post.

Categorías
Personal

Este es mi propósito y dolor de año nuevo

Comenzando con mis angustia o un sentimiento de impotencia en este año 2020, soy Porfirio Chávez y estoy escribiendo esto quizá para mi futuro yo, o para alguien que me pueda ayudar con una carga que ya no soporto solo.

Como propósito este año me dispongo a escribir cada cosa que siento que me lastima o preocupa, pues a la fecha no tengo a alguien a quién poder compartir, así que si el Porfirio del futuro está leyendo esto, espero que ya no estés pasando por este dolor que tengo hoy.

Estoy casado desde el 11 de Enero de 2017 y mi relación con mi esposa ha comenzado a hacerse mucho más difícil cada día que pasa.

Vivimos en casa de mi padre quién es viudo desde hace 2 años, tiene 74 años (si no mal recuerdo), aunque tenemos dormitorio separado compartimos la cocina y zona de lavado por lo que solo nos vemos en la hora de la comida mayormente.

Mi papá no es la persona más expresiva ni tampoco es cálido, sin embargo es la persona que me crió por bastante tiempo y aunque no concordamos en muchas ideas lo quiero mucho. Gracias a él soy la persona que existe hoy en día.

Mi esposa es muy expresiva aunque no habla mucho, llevamos 2 años de casados y 7 años de novios, tampoco tenemos las mismas ideas lo que está bien, es muy detallada en lo que hace pero no es una persona que me gustaría volver a conocer.

La relación entre esposa y familia nunca fueron de las mejores, mi mamá que en paz descanse tenía un genio muy hiriente a la hora de decir las cosas, yo mismo tuve muchos problemas con ella cuando vivía y muchos de sus comentarios eran muy hirientes, no era una mala persona solo que sus bondades las mencionaré en otro punto.

Esa relación, lo que se puede decir tóxica poco a poco fue un agregado para el carácter de mi esposa, hasta parece que el día de hoy aprendió esa forma de herir de forma muy elegante a la gente.

Quizá es solo mi percepción pero estos dos años de casados han sido los más dolorosos que recuerdo y no me gusta vivir así, cada día existe un altercado con alguna diferencia de ideas o alguna actitud que lastima. Muchas veces estas situaciones son por tonterías como en cualquier matrimonio, pero cada una se va acumulando sobre la anterior y es difícil sobrellevarlo.

Al despertar, ya despierto a la defensiva esperando ver que es lo que pasa, y hasta una tonteria como tardar mucho en el baño la tomo como una agresión, en fin es una serie de eventos que podría explicar en un libro completo, pero no es el objetivo de este blog si no empezar a tomar nota a partir de este primer día del año.

Lo que me lleva al día de hoy 1ro de enero del 2010, como lo mencione antes mi esposa y mi papá no comparten estilos de pensamiento (obviamente por que fue una crianza distinta) sin embargo tienen muchos roses que se presentan frecuentemente por cosas estupidas.

Por estos roses mi papá ha tomado una actitud reservada hacia lo que expresa a mi esposa, y mi esposa a su vez a tomado una actitud de indiferencia a lo que viene de mi padre, una relación de desprecio común y corriente disfrazada de dar la mejor cara y tener una buena actitud.

Esta actitud por supuesto es mucho desgaste y no se puede mantener siempre, de hecho es raro que dure más de un par de horas al día.

El más tranquilo suele ser mi padre, no se si por los años de experiencia o por que está en la última etapa de su vida, o por su capacidad cognitiva que se desgasta con los años, pero toma el resto de su vida sin mi madre tratando de ocuparse en casa, quizá hace cosas sin mucho provecho o destruye lo que hizo ayer y lo vuelve a hacer pero trata de llevar su vida tranquilo.

Mi esposa también es muy tranquila, agradable en general, pero cuando se encuentra con mi papá comienza esa actitud indiferente, de desagrado que rápidamente salta a la vista.

A veces mi esposa tiene un gesto amable y se preocupa u ofrece cosas tan sencillas como un plato de comida o una servilleta, sin embargo cuando mi papá tiene un gesto amable mi esposa responde con una indiferencia total (al menos esa es mi percepción).

Esto paso hoy justamente, mi padre tomó la iniciativa de dar la mano, un abrazo y felicitar por el inicio de año, ya saben como tratando de iniciar bien, a lo que mi esposa su reacción fue más como de chin tengo que aceptar esto más de fuerza que de querer, volteando la mirada y con un saludo de meh.

El ver esa acción frente a mis ojos acumulo otro peso más a esta carga de vivir con esa mujer, he platicado muchas veces con ella pero las cosas se le olvidan y al igual que yo prefiere dejar las cosas a un lado y seguir como si nada, eso estaría bien pero sus acciones siguen siendo las mismas.

Por eso escribo esto, sabiendo que es algo público y que quizá alguien ahí fuera me ayude a entenderlos sin que esto me duela, o que me ayude a separarme de esta relación que me genera tanta angustia.

No sé, esto fue el primer día del año así que no quiero ni imaginar lo que viene. Por lo menos me he podido desahogar un poco y evitar hacer cosas que me lastimen más.

Llevo una carga muy pesada y no tengo con quién compartirla, así que espero no haber ofendido o preocupado a quien sea y si existe alguien como yo ahí fuera, le envío un abrazo.

Feliz año 2020 que THE ALL FATHER los bendiga

Categorías
Gadgets

Teclado en español latinoamerica para MacOS

Configura tu teclado en español latinoamerica para MacOS, ahora puedes utilizar ese teclado gamer / oficina como se debe, aunque no sea de Apple.

Este post complementa el video de youtube donde explico como instalar la distribución a español latinoamerica:

En este enlace se pueden encontrar los archivos para cambiar el teclado a español México y Distribución Latinoamerica:
http://bit.ly/tecladoMX

Yo he probado esto con un teclado Gamer Allow FPS de HyperX

Categorías
Desarrollo y Programación

React dar formato a números

Hola, bienvenidos a otro tutorial en esta ocasión con React a dar formato a un número para mostrarlo en pantalla.

Vamos a trabajar en el aspecto visual deseado sin necesidad de cambiar el dato original, es decir meramente vamos a trabajar con la estética del número.

Este material está basado en la información que encontré en este hilo de Stackoverflow.

Para esto dejo el siguiente videotutorial, espero que les sea útil como material de apoyo.

Además dejo el código final en la parte de abajo para que revisen si algo no funciona como debe.

import React from "react";
import "./App.css";
function FormatNumber({ number }) {
return (
<span style={{ color: "red" }}>
{new Intl.NumberFormat("ES-MX", {
style: "currency",
currency: "MXN"
}).format(number)}
</span>
);
}
class App extends React.Component {
state = {
number: 0
};
handleChange = event => {
this.setState({
number: event.target.value > 999999999 ? 999999999 : event.target.value,
});
};
render() {
const { number } = this.state;
return (
<div className="App">
<h1>
Hola dinero <FormatNumber number={number} />
</h1>
<input type="number" onChange={this.handleChange} />
</div>
);
}
}
export default App;

Pueden dejar sus dudas o comentarios en está publicación o en el video, nos leemos en el siguiente tutorial.

Feliz día a todos 😄

Referencias

Categorías
Desarrollo y Programación

Como hacer peticiones http en PHP sin CURL

Vamos a hacer peticiones a servicios http o APIs con PHP sin CURL, este último muchas veces está bloqueado por el hosting y no es posible hacer peticiones a enlaces externos.

Vamos a utilizar la librería Requests for PHP en nuestro entorno de desarrollo local, así que es importante tener el manejador de dependencias: composer.

Instalación de Requests

Para instalar la librería es necesario ejecutar el siguiente comando:

composer require "rmccue/requests"

Nuestro composer.json debería verse como la siguiente imagen

composer.json (ejemplo)

Así debería lucir el árbol de dependencias y archivos:

Dependencias

Peticiones HTTP Get con PHP

Y listo a partir de ahora podemos solicitar datos a servicios y APIs externos, yo tuve esta necesidad pues algunos servicios de los que consumo no permiten solicitudes desde el browser.

<?php
include('vendor/rmccue/requests/library/Requests.php');
Requests::register_autoloader();
$url = 'https://jsonplaceholder.typicode.com/posts';
$response = Requests::get($url);
## $response->body es el resultado de la petición
echo(json_encode($response));
view raw httpGetRequest.php hosted with ❤ by GitHub

Peticiones HTTP Post con PHP

Si queremos enviar datos, debemos colocarlos dentro de un array. Es importante conocer el tipo de envío que debemos hacer en post, ya sea para un multipart/form-data o un application/json.

Este dato debemos revisarlo con el proveedor del servicio, si es necesario enviar llaves de autenticación u otro dato en las cabeceras, podemos agregar este dato en otro array.

<?php
include('vendor/rmccue/requests/library/Requests.php');
Requests::register_autoloader();
$url = 'https://jsonplaceholder.typicode.com/posts';
$postData = array([
'title' => 'Hola Mundo',
'body' => 'Este es un ejemplo de envio con POST',
'userId' => 1,
]);
$headers = array([
'Content-type' => 'application/json; charset=UTF-8'
]);
$responsePost = Requests::post($url, null, $postData);
echo json_encode($responsePost);
view raw httpPostRequest.php hosted with ❤ by GitHub

Peticiones HTTP PUT, PATCH y DELETE con PHP

El resto de peticiones se pueden hacer con los métodos:

Requests::put($url, $headers, $data, $options);
Requests::patch($url, $headers, $data, $options);
Requests::delete($url, $headers, $options);

Status Code y Headers de Peticiones HTTP con PHP

Para obtener el codigo de estado se obtiene de la variable de respuesta:

$response->status_code

En el caso de la cabecera es necesario agregar el nombre de la cabecera requerida. NOTA: no distingue entre mayusculas y minusculas

$response->headers['Date'];

Comentarios Finales

Esta por demás decirlo, pero siempre que importen la librería al proyecto es necesario subirla a su host para que funcione, así que la carpeta vendor ahora debería estar incluida en el servidor.

Las cabeceras de autenticación se envían en el array de $headers, pero se debe consultar con el proveedor del servicio cuales se deben enviar.

Y listo ya no es necesario preocuparse por que el servidor tenga soporte para CURL, que tengan felices proyectos y que todo vaya sin bugs, un Saludo afectuoso y nos vemos en el siguiente tutorial.

Categorías
Desarrollo y Programación

Sumar Radio button con Javascript

Este problema lo obtuve de los foros de cristalab del usuario mariassssss, el usuario busca sumar los valores de unos input radio con javascript:

Aquí el post original: http://foros.cristalab.com/javascrip-t122822/

Me tomé la libertad de corregir el codigo, quitar las funciones que no estaban en uso y hacer la operación que necesita sin moverle mucho.

<html>
<head>
<title>CAFETERIA</title>
<meta charset="utf-8" />
<style>
body {
background-color: #e1e637;
}
h1 {
color: #ff090e;
}
legend {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>CAFETERIA</h1>
<form>
<legend>SELECCIONE EL PLATO PRINCIPAL</legend>
<input type="radio" id="n1" name="principal" value="12" /> Caldo de pollo
Q12.00 <br /><br />
<input type="radio" id="n2" name="principal" value="20" /> pescado frito
Q20.00<br /><br />
<input type="radio" id="n3" name="principal" value="25" /> revolcado
Q25.00<br /><br />
<legend>SELECCIONE SU BEBIDA</legend>
<input type="radio" id="n4" name="bebida" value="7" /> CocaCola Q7.OO<br /><br />
<input type="radio" id="n5" name="bebida" value="4" /> Jamaica Q4.00<br /><br />
<input type="radio" id="n6" name="bebida" value="5" /> Sprite Q5.00<br /><br />
<legend>SELECCIONE SU POSTRE</legend>
<input type="radio" id="n7" name="postre" value="7" /> Pastel de fresa
Q7.oo<br /><br />
<input type="radio" id="n8" name="postre" value="5" /> Helado de Chocolate
Q5<br /><br />
<input type="radio" id="n9" name="postre" value="9" /> Coctel de frutas
Q9.00<br /><br />
<button>Obtener TOTAL</button>
</form>
<script>
// buscar el <form> y guardarlo en una variable
const form = document.querySelector('form');
// decir que en el evento enviar se sume el total
form.addEventListener('submit', obtenerTotal);
function obtenerTotal(event) {
// evitar enviar el formulario que ocasiona que se refresque la pagina
event.preventDefault();
// obtener todos los input radio
const formData = new FormData(event.target);
// convertir los valores a String, o colocar un 0 si no elegieron algo
const principal = parseInt(formData.get('principal') || '0', 10);
const bebida = parseInt(formData.get('bebida') || '0', 10);
const postre = parseInt(formData.get('postre') || '0', 10);
const result = principal + bebida + postre;
alert("la suma es:" + result);
}
</script>
</body>
</html>

A diferencia del código original no es necesario ir a recuperar el valor por input, si no obtener todo el formulario y sacar los valores necesarios.

Es algo primitivo pero este formData estaría listo para enviar a en una request y obtener los datos a partir de este elemento y sus correspondientes names.

Entre las mejoras se puede poner un array para obtener los datos requeridos, pero como no estaba la problemática descrita, pues decidí omitir.