Firebase: No existe método de facturación asociado con las cuenta

lunes, octubre 12th, 2020

Anteriormente no era necesario tener un método de facturación asociado a tu cuenta para poder hacer deploys de funciones Firebase, el plan gratuito era suficiente. A partir de la migración a nodejs 10.00 de las funciones Firebase de Cloud Functions, es necesario que cuentes con un método de facturación válido. Es posible que recibas un mensaje como el siguiente

HTTP Error: 400, Billing account for project '68817281782' is not found. Billing must be enabled for activation of service(s) 'cloudbuild.googleapis.com,containerregistry.googleapis.com' to proceed.

Para solventarlo simplemente debes cambiar tu plan y registrar tu método de pago en la consola de firebase, para que entiendas mejor lo que ha sucedido te dejo los 3 planes de facturación :

  1. Spark: gratuito, ideal para empezar con tu primera app
  2. Flame: por un cobro de 25 dls mensuales, podrías incrementar las cuotas de consumo, en número de transacciones por día.
  3. Blaze: aqui se te cobra por lo que consumes.

Atención : A partir de Enero de 2020 Google elimina el plan FLAME y quedan disponibles únicamente el plan Spark y Blaze activos, en principio esto no significaría gran diferencia si cuentas con un plan SPARK, a menos que tengas funciones de google deployadas en Google Cloud Function.

Si tienes funciones de Cloud Functions activa en tu proyecto debes migrar tus proyectos al plan Blaze. tus cuotas gratuitas se mantendrían disponibles y siempre que no las sobrepases no se te cobrará nada, aunque si debes contar con un medio de pago registrado, si es este tu caso debes hacer lo siguiente:

Las cuotas disponibles al momento de escribir este articulo octubre 2020 son las siguientes:

  • 2 Millones de invocaciones por mes
  • 400 mil GB- por segundo al mes
  • 200 mil CPU segundos al mes

Más información sobre los planes de facturación aqui

Cambiar el plan facturación de tu proyecto de firebase

Puedes cambiar el plan de facturación de tu proyecto dando click en la imagen

A continuación google te pedirá que selecciones el plan de uso Blaze

Firebase es parte de Google Cloud Platform que es la nube de servicios para desarrolladores de google, puesto que estas dos plataformas comparten los proyectos es necesario que configures en Google Cloud Platform la forma de pago.

ya puedes aceptar los términos del contrato

A continuación ya puedes ingresar los datos de tu tarjeta y tus datos de facturación, recuerda que esto es para tener una tarjeta de credito o debito asociada a Google Cloud Platform, pero todavía falta regresar a la consola de firebase y seleccionar el plan Blaze.

Dirigite a la consola de Firebase y selecciona el plan Blaze

Una buena idea es que configures una alerta de presupuesto para evitar que los gastos se te disparen desmedidamente ante un inesperado crecimiento en el uso de tu app

Si tienes dudas sobre el plan con que cuentas en este momento te sugiero que consultes en la configuración de tu proyecto, tal y como se indica en la imagen a continuación

Debes tener el Plan Blaze

Si tienes dudas sobre los planes de facturación y cuotas gratis te recomiendo visites el siguiente enlace

Planes de Facturación en Firebase

Una vez ya tienes tus plan de pagos establecido para tu proyecto puedes ejecutar el comando para el deploy de la función

firebase deploy --only functions

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Crear un nuevo proyecto de Firebase

lunes, octubre 12th, 2020

Paso 1) Crear un proyecto nuevo de firebase de pruebas, aceptamos los términos del contrato y le damos continuar

Paso 2) Aceptar la configuración del google analitycs

Paso 3) seleccionar la ubicación de tu google analitycs

A continuación le damos click en crear proyecto

Paso 4) Configurar la primera aplicación en firebase, en nuestro caso para angular debemos seleccionar la opcion de aplicación web

Seleccionamos la opción de aplicación web

Seleccionamos las opciones de configurar un hosting para que podamos almacenar funciones y otros archivos necesarios

Si estuviéramos trabajando con un proyecto web, tendríamos que usar las librerías cargadas en los head de nuestro archivo HTML, pero en nuestro caso los ejemplos de este blog, se harán usando la librería de angularfire2. En esta parte solo le damos siguiente, si tu proyecto fuese en html directamente, si tendrías que copiar estas cabeceras.

Instala la CLI (Command Line Input) para trabajo con firebase, esta te servirá para que puedas ejecutar comandos de firebase directamente en la consola, recuerda que para hacerlo debe tener el manejador de paquetes npm, y la última versión de nodejs instalada en tu sistema operativo.

npm install -g firebase-tools

Ahora que ya tienes instalado la CLI de Firebase, puedes ejcutar comandos para inicio de sesión en firebase deployar en el hosting y otros comandos. Te dejo algunos a continuación:

firebase login 
firebase init 
firebase deploy 
Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Problemas al trabajar con firebase functions

lunes, octubre 12th, 2020

Puede que al momento de crear funciones de firebase, te de un error como el que sigue

Error: Failed to list Firebase projects. See firebase-debug.log for more info.

Si es ese el caso te recomiendo que revises el archivo firebase-debug.log en él puedes encontrar mayor información sobre los errores, pero un error común es que el token de inicio de sesión este desfasado, si es este tu caso, debes re logearte para poder trabajar con funciones

Tu archivo de firebase-debug.log mostrará algo como lo siguiente

Request had invalid authentication credentials.

Recuerda

Simplemente debes escribir el siguiente comando

firebase logout

Lo anterior te deslogeara para que puedas ingresar de nuevo, al hacerlo el token de inicio de sesión se refrescará

firebase login 

Al volver a logear se renovara el token de inicio de sesión y ya podrá ser posible seleccionar un proyecto existente, o bien crear uno nuevo.

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Instalar un nuevo proyecto en Angular 10

lunes, septiembre 21st, 2020

Advertencia: antes de empezar debes instalar NodeJS y package manager, sacaremos pronto un tutorial acerca de como hacerlo para windows y Linux.

Para crear un nuevo proyecto en Angular 10 debes tomar en cuenta algunos cambios en la sintaxis de los comandos, a continuación te doy mas detalles al respecto:

Paso 1 ) Crear un nuevo proyecto

Crear un nuevo proyecto con el siguiene comando

ng new NuevoProyecto

Al hacerlo angular creará una carpeta con el nombre «NuevoProyecto» y dentro copiara todos los archivos necesarios para que tu proyecto funcione, no intentes entender que hay dentro de cada una de esas carpetas, ya que son todas las librerías base para que tu proyecto compile. Cada proyecto angular al momento de escribir este articulo tiene un peso aproximado de 500 mb, esto puede variar de acuerdo a tu versión o librerías que ocupes

Paso 2) Instalar librerías complementarias

En mi caso fue necesario instalar estas librerías , dependiendo de la versión de NPM que estés usando tal vez no las necesites; si al momento de correr tu proyecto angula-cli te las solicita puede ejecutar este comando.

npm i @angular-devkit/schematics
npm i @angular-devkit/core

Si tienes dudas sobre si debes o no instalar estas dependencias de desarrollo, ejecuta en tu terminal el siguiente comando (recuerda que debes estar en el directorio de tu proyecto, justo donde este el archivo package.json)

ng version

Si en la salida de este comando aparece lo siguiente ya lo tienes instalado

Hasta aquí ya puedes empezar a trabajar con tu proyecto, crear componentes e instalar más dependencias, a continuación instalaremos las librerías necesarias para conectarse a una base de datos firebase.

Paso 3) Instalar Firebase

La librería de angularfire2 es la que te permite conectarte a la api de firebase, dependiendo de tu versión del npm tal vez necesites incluir el parámetro –save para que la librería se te agregue como dependencia, aunque a partir de la versión 5 de npm todas se instalan como dependencia.

npm install firebase angularfire2 --save

Al terminar debes tener algo como la siguiente imagen

Paso 4) Instalar material

Material es un patrón de diseño para aplicaciones que google implementa en muchos de sus productos, como angular es de google, también incluye este patrón de diseño, yo lo describiría como una especie de librería visual para hacer que tus aplicaciones tengan mejor presentación.

ng add @angular/material

A continuación el Angular CLI te pedirá el tema a utilizar y al terminar tendrás un resultado como el siguiente:

No es obligación incluir material en tus aplicaciones angular, puedes agregar un estilo diferente incluyendo una librería como bootstrap 4, o bien desarrollando tus propios estilos, en otro post abordaremos este tema.

Paso 5) Probar que el material funciona

Una vez que ya tienes la librería de material instalada, debemos probarlo para asegurar que funcione correctamente, para ellos haz lo siguiente:

Por ejemplo si queremos agregar un Slider que es un componente para simular un switch corredizo (ver imagen )


ejemplo de slider

Tendremos que ir primeramente al app.module.ts y luego agregar la importación del componente.

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora buscar el archivo html del componente app.component.html principal y agrega el siguiente selector (el selector es la etiqueta html que hala el componente a su presentación visual en el html )

<mat-slider min=»1″ max=»100″ step=»1″ value=»1″></mat-slider>

Existen más componentes que puedes agregar, no solo el Slider, a continuación te dejo unos cuantos componentes:

Material List

Agregando otros componentes de Angular Material

import {MatListModule} from '@angular/material/list';

Se agrega ahora los list del material al archivo app.component.html

<mat-list>
    <mat-list-item> Pepper </mat-list-item>
    <mat-list-item> Salt </mat-list-item>
    <mat-list-item> Paprika </mat-list-item>
  </mat-list>

OJO: siempre hay que añadir la sentencia de importación en el module.ts

Material Icons

Existe un componente para agregar iconos

import {MatIconModule} from '@angular/material/icon';

Agregar algunos iconos

<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">accessibility_new</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">dialpad</mat-icon>

Firebase

Generar la base de datos tal como se indica aqui: crear una base de datos firebase(pendiente )

Una vez ya tenemos la base de datos de firebase, debemos crear una variable de entorno en el archivo environment.ts ahí debes copiar la firebaseConfig de tu base de datos, esto normalmente se hace en la consola de Firebase, solo para que tenga una idea, esta llave se parece a lo siguiente

firebase: {
    apiKey: "ajhajhjshdjshdjshdjshdjhsj",
    authDomain: "tubase-sv34.firebaseapp.com",
    databaseURL: "https://tubase-sv34.firebaseio.com",
    projectId: "tubase-sv34",
    storageBucket: "tubase-sv34.appspot.com",
    messagingSenderId: "s2736726372",
    appId: "1:s2736726372:web:s2736726372",
    measurementId: "F_HHDH73"
  }

El archivo environment.ts se verá como el que sigue

export const environment = {
  production: false,
  firebase: {
    apiKey: "ajhajhjshdjshdjshdjshdjhsj",
    authDomain: "tubase-sv34.firebaseapp.com",
    databaseURL: "https://tubase-sv34.firebaseio.com",
    projectId: "tubase-sv34",
    storageBucket: "tubase-sv34.appspot.com",
    messagingSenderId: "s2736726372",
    appId: "1:s2736726372:web:s2736726372",
    measurementId: "F_HHDH73"
  }
};

Ahora que ya tienes la constante firebase declarada, debes incluirla en tu archivo del app.module.ts, para que sea pública en todo el proyecto

También debes importar la librerías del angularfire. Agregar las siguientes importaciones en la sección inicial del archivo app.module.ts

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';

También debes importarlos el @NgModule del mismo archivo, recuerda que esta directiva une todos los módulos y los presenta en uno solo, como las librerías de angularfire2 son externas van en la sección imports, los componentes que nosotros desarrollemos esos si van en la sección declarations , el archivo app.module.ts quedará mas o menos como te lo muestro a continuación:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creando el modelo de la base de datos

Comando para crear el modelo

ng generate class nuevo/user --type=model

importar al componente que queremos usarlo

import {User } from '../nuevo/user.model';

Una vez importado hay que delcararlo dentro de la clase del componente

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


FoxPro y el DOM XML

miércoles, agosto 5th, 2020

Que es el DOM

Document Object Model, o bien Modelo de objetos de documentos. El DOM es un estandar de miscrosoft para representar archivos XML HTML y otros documentos de marcado extensible, es decir documentos que usan los simbolos «<>» para construir un contenido.

Ejemplo:

<NuevoDocumento>
<titulo>
Documento Hola Mundo 
</titulo>
<cuerpo>
Cuerpo del documento
</cuerpo>
</NuevoDocumento>

Los archivos XML pueden ser muy parecidos al HTML que se usa para páginas web, pero en realidad son cosas distintas, el XML es un lenguaje mas ordenado en el cual los nodos e información descriptiva esta delimitadamente con claridad. El HTML por ejemplo tu puedes abrir una etiqueta tras otra sin preocuparte de cumplir estandares, los navegadores leerán el documento a como de lugar.

Estrutura básica de arbol de un DOM

El DOM por lo tanto es la forma de representar estos objetos, y susa mucho en programación para brindar una forma estandarizada de acceder a la informacion de los documentos.

The save method serializes the DOM tree.
Imagen gracias a Microsoft : https://docs.microsoft.com/en-us/previous-versions/windows/desktop/ms763802(v=vs.85)

La idea detrás del DOM es contar con una forma estructurada de mostrar información y hacerla accesible para los programas que utilizan los datos, para hacerlo los parseadores de XML crean un arbol de nodos.

  1. Arbol del DOM
    1. Elemento Raiz
      1. Elemento Hijo1
        1. Texto del Elemento
      2. Elemento Hijo 2
        1. Texto del Elemento

Lo anterior es una representación simple de un DOM, retomaremos mas adelante esta estructura para explicar un par de cosas.

Que se necesita para leer XML con FOXPRO

Hace años ya que Microsoft implemento su tecnología de webservices para el tratamiento de documentos XML, recuerdo bien esto porque era apenas un adolescente y estudiante de bachillerato, cuando se anunció con bombo y plantillo toda la estrategia punto net que dominaría la agenda de desarrollo para los próximos años.

En aquella época el acceso a nuestro país era practicamente nulo (1998) y muchos todavía no entendiamos de que se trataba todo este asunto de los web services y los XML; se hablaba mucho de que los sitios web eran islas de información y que para poder extraer toda esta información atrapada en esas islas se necestiba crear puertos vias de comunicacion entre ellas para que los datos circulasen libremente.

El resultado fueron los servicios XML, como dije antes Microsoft anunciaba esta tecnología con bombo y platillo pues era su mayor apuesta por la nube, en aquellos entonces simplemente le deciamos internet.

MSXML y los servicios XML

El MSXML es un standar para varios lenguajes, Jscript VbScript .NET, C y C++, por lo que no es exclusivo para FOXPRO, lo que sucede es que se accede por medio de COM. Punto NEt tiene su propia libreria para XML integrada en el Framework por lo que no es recomendable utilizarlo en esta plataforma de desarrollo.

Existen varias versiones del MSXML, de la wikipedia les comparto la siguiente tabla.

MSXML 3.0 MSXML3MSXML 6.0 MSXML6
Version más antigua Es la última version
Se entrego con Windows XP, Internet Explore 6.0, 7.0,8.0, Windows XP SP2Se entrega con : Sql Server Visual Studio, Punto NET Framework, Windows Vista, Windows 7, Windows XP SP3,

Historia de MSXML

Toda esta serie de estandares, herramientas y librerías se le bautizo con el nombre de MSXML Microsoft XML Core Service. recuerdo que a todos los que habiamos aprendido algo de lenguaje Java en aquella época nos parecía una copia burda del JDK, y es que ene efecto lo fue, punto net, MSXML y otra tecnologías eran una copia descarada de todo lo que Sun Microsystem (Dueña de Java en aquel entonces), ahora ya nadie lo recuerda.

Trabajar con XML y FOXPRO

Con la llegada de la factura electrónica a muchos paises de Latinoamérica algunos progamas viejos desarollados en foxpro, tuvieron que adaptarse para el trabajo con los xml que producen las plataformas de las administraciones fiscales; por lo que muchos programadores se vieron en la necesidad de aprender esta tecnología, yo soy uno. A continuación te comparto lo aprendido.

Leer Un Archivo XML con FOXPRO

Antes que nada crearemos un archivo XML válido para poder trabajar con él, que luego iremos extendiendo para ir demostrando los ejemplos.

<ElementoRaiz>
  <Hijo1>Chepe</Hijo1>
  <Hijo2>Juan</Hijo2>
</ElementoRaiz>

Por el momento es un archivo sencillo, solo para demostrar algunas funciones básicas. Recuerda que los archivos XML no pueden llevar espacios en los nombres de los nodos por ejemplo : «Elemento Raiz» tambien no deben llevar tildes o caracteres especiales; debes tomar en cuenta las minusculas y mayusculas para trabajar con los nodos.

Pasemos pues a la lectura del archivo anterior

Para leer archivos XML con FoxPro debes primero crear una instancia del objeto MSXML, esto se hace realizando los siguiente pasos:

Paso 1) Crear el objeto MSXML

Debes crear el objeto MSXML y luego cargar el archivo que contiene el archivo XML para ello usamos el método Load

lcFile="ejemplo.xml"
loXML= CREATEOBJECT('MSXML2.DOMDocument')
loXML.LOAD(lcFile)

Paso 2) Obtener algun nodo

El siguiente paso es obtener algún nodo para poder trabajar con él, para ello usaremos el método selectSingleNode()

node= loXML.selectSingleNode("//")

Te preguntarás que significan las dos barritas o plecas «//». Esto significa que podemos acceder a todos los nodos del segundo nivel del archivo xml y obtener el texto del mismo, poniendo las 2 plecas obtendremos acceso a los 2 nodos hijos del archivo de ejemplo XML es decir que obtenemos los nodos de Chepe y Juan

Paso 3) Extraer el texto de dicho nodo.

Ahora que ya tenemos creado el objeto node ya se puede obtener el texto del mismo, la ventaja es que al hacerlo, obtendremos una representacion en xml de todos los subnodos, o bien el texto del nodo.

?node.text

La propiedad Text nos devuelve la siguiente salida :

Chepe Juan 

El anterior ejemplo todo junto queda asi:

lcFile="events.xml"
loXML= CREATEOBJECT('MSXML2.DOMDocument')
loXML.LOAD(lcFile)
node= loXML.selectSingleNode("//")
?node.text

El anterior ejemplo es sumamente sencillo, solo para entender como se organizan los nodos y como obtener algun texto del archivo XML, sin embargo existen más métodos y propiedades que puedes usar, las detallaremos mas adelante en este articulo.

Entender las rutas de acceso a los nodos

Algo importante que debes comprender antes de trabajar con nodos es como funcionan las rutas de acceso o «paths» para obtener un nodo, casi todo lo que tengas que hacer con un archivo XML tiene que ver con obtener el nodo correcto.

Por ejemplo en el archivo XML solo hay dos niveles, por lo que simplificamos el acceso a los textos del nodo Hijo1 e Hijo2 simplemente escribiendo dos plecas, pero que pasaría si estos los hijos tuvieran un nivel mas de descripción por ejemplo un sub nodo edad.

<ElementoRaiz>
<Hijo1> 
   <Nombre>Chepe</Nombre>
   <Edad>12</Edad>
</Hijo1>
<Hijo2>
   <Nombre>Juan</Nombre>
   <Edad>7</Edad>
</Hijo2>
</ElementoRaiz>

Se ha creado un sub nodo nombre y otro edad, ahora que pasa si deseo acceder solo a los ementos del nodo Hijo1, ¿cómo debo escribir la ruta de acceso a ese nodo ?

node= loXML.selectSingleNode("//Hijo1")

El resultado al consultar la propiedad text del nodo seria y la edad y el nombre juntos:

Chepe12 

A continuacion te dejo una pequeña tabla donde puesde ver las posible rutas y el resultado según se use para nuestro archivo de ejemplo:

selectSingleNode(«//Hijo1»)Chepe12
selectSingleNode(«//Hijo2»)Juan7
selectSingleNode(«//Hijo1/Edad»)12
selectSingleNode(«//Hijo2/Edad»)7
selectSingleNode(«//Hijo1/Nombre»)Chepe
selectSingleNode(«//Hijo2/Nombre»)Juan

La propiedad XML de un node

Si deseas devolver la estructura xml del nodo puedes hacerlo, recuerda que el objetivo de usar XML es que puedas obtener un documento estructurado y no simplemente una cadena de texto, un archivo estructurado te permite un mejor control sobre los datos y cuando se trat ade XML tu puedes definir en el mismo archivo a el documento, de modo que la aplicacion que lo leera no tiene que saber de antemano cual es la estrucutura de dicho archivo.

Por ejempo la propiedad XML del Objeto NODE del ejemplo anterior nos devuelve lo siguiente:

node= loXML.selectSingleNode("//")
?node.xml

Salida :

<ElementoRaiz>
	<Hijo1><Nombre>Chepe</Nombre><Edad>12</Edad></Hijo1>
	<Hijo2><Nombre>Juan</Nombre><Edad>7</Edad></Hijo2>
</ElementoRaiz>

Los anteriore sejemplos sirven bien para un solo nodo, pero si lo que necesito es recorrer todos los nodos de un XML y leer sus valores entonces necesito el objeto NodeList, en el próximo parrafo te explico este objeto.

Recorrer los elementos de un XML en FOXPRO

Si lo que necesitamos es recorrer por medio de una estructura for todos los elementos de un archivo XML en FoxPro, entonces necesitamos recurrir al objeto nodeList.

node= loXML.selectSingleNode("//")
oNodeList=node.childNodes
FOR EACH nde IN oNodeList
	?nde.text
ENDFOR  

La salida del anterior ejemplo seria como sigue:

Chepe12 
Juan7 

Tambien puede acceder a un elemento directamente por metio de la propiedad ITEM, por ejemplo si deseo acceder al elemento Hijo1 lo haríamos así:

?oNodeList.item(0).text

Recuerda que en fox las matrices empiezan con 1 pero en este objeto los elementos empiezan en cero 0, por lo que no debes confundirte sobre todo en caso que utilices un bucle «for n=1 to » , en ese caso el ejemplo anterior debería quedar así:

FOR i=1 TO oNodeList.length
  ?oNodeList.item(i-1).text
ENDFOR

La salida sería exactamente la misma que cuando usamos ForEach, si te fijas bien, verás que le hemos restado uno al indice del bucle FOR esto es por que los elementos en el objeto nodeList, empiezan en cero

Chepe12 
Juan7 

Crear un archivo XML con FOXPRO

Próximamente

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Google Maps en Visual Foxpro

sábado, agosto 1st, 2020

En el siguiente post exploraremos las posibilidades de mostrar paginas web Html5 incrustadas en un formulario de Visual Fox Pro.

A lo largo del tiempo muchos desarrolladores de Visual FoxPro  hemos sufrido la inminente obsolescencia de Internet Explorer, a pesar de que la última versión es la 11.0, al incluir el control Internet Explorer en nuestros formularios las paginas web simplemente no se muestran bien  por que no soportan las etiquetas de CSS modernas o etiquetas HTML5 como por ejemplo la etiqueta de vídeo.

Por ejemplo si tu quieres mostrar una pagina que contenga el siguiente código HTML no funcionará por que el control Intenet Explorer sigue anclado a la versión 7 que salio haya por el año 2006.

<video width=»320″ height=»240″ controls>  <source src=»movie.mp4″ type=»video/mp4″>  <source src=»movie.ogg» type=»video/ogg»>Your browser does not support the video tag.</video>

Basado en un post encontrado en el blog de Rick Strahl’s   existe una manera de poder «hackear» el registro de windows para que pueda emular Internet explorer 11.0 en los formularios de Foxpro a continuación el proceso:

Paso 1) Modificar el registro de windows:

1.1) Menu Inicio>ejecutar>regedit

1.2)Buscar la clave:

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

1.3) y en ella generamos una nueva clave valor Dword32 

1.4) asignar por nombre vfp9.exe 

1.5) poner por valor 11001 decimal 

Recapitulando : 

  1. Abrir Regedit 
  2. Buscar :HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
  3. Crear un nuevo valor Dword32
  4. Asignar nombre vfp9.exe 
  5. Poner valor 11001

Paso 2) Creando el formulario para desplegar el mapa 

Una vez hemos modificado el registro, cuando agreguemos un control para navegar en Foxpro sera capaz de reconocer código Html5 como la ya mecionada  etiquetas de vídeo; asi como tambien Mapas de Google Maps; por lo que bastará con abrir Foxpro cortar y pegar el siguiente código en la ventana de comandos y listo tendremos un mapa en nuestro form directamente incrustado.

Public Mapform1
Mapform1=Newobject(«MapForm»)
Mapform1.Show
Read Events
Define Class MapForm As Form
    Height = 500
    Width = 500
    ShowWindow = 2
    AutoCenter = .T.
    Caption = «Google Maps «
    WindowState = 0
    Name = «Form1»
    Add Object olecontrol1 As OleControl With ;
        oleclass=»shell.explorer.2″,;
        Top = 0, ;
        Left = 0, ;
        Height = 444, ;
        Width = 528, ;
        Anchor = 15, ;
        Name = «Olecontrol»

Procedure init
        thisform.Olecontrol.navigate(«maps.google.com»)
    Endproc

Procedure Destroy
        Clea Events
    Endproc

enddefine 

El resultado sera un mapa de Google insertado sin problemas, puedes desplazarte y moverte como quieras sobre el mapa tal cual si estuvieras en una ventana de Internet Explorer 11.0:

En próximos  Post exploraremos la posibilidad de poder indicar las coordenadas de Longitud y Latitud para posicionar el mapa en una ubicación en especifico, así como poder indicar el zoom deseado por medio de código FOXPRO.



Nota: Asegúrate de tener instalada la última versión de Internet Explorer, que es la versión 11

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Visual Foxpro vs C#

sábado, agosto 1st, 2020

Hace tiempo que he empezado la migración a un nuevo lenguaje de programación, desde que Microsoft anunció en marzo de 2007  que no habría Versión diez para Microsoft Visual FoxPro  cientos de miles de desarrolladores quedaron huérfanos en cuanto al futuro que tendría esta fabulosa herramienta.

Nueve años después de aquel fatídico anuncio la comunidad de Foxeros sigue vibrante y entusiasta, muchos´reniegan de abandonar al tan preciado zorro que durante años les ha brindado la herramienta perfecta para desarrollar sus soluciones de software.

No voy a negar la efectividad del Zorro durante años he trabajado con esta herramienta y los resultados han sido mas que satisfactorios, la rapidez para tener listo un proyecto con esta herramienta es asombrosa, comparables quizá la rapidez con que se obtendría desarrollos bajo los lenguajes mas modernos de hoy en día como Python o   Ruby.

He probado muchos otros lenguajes en busca de dar con la tierra prometida a la cual migrar en busca de ese nuevo lenguaje que permita igualar o superar las capacidades del siempre bien ponderado Visual FoxPro.

C#

Tratare de explicar la ventajas de forma breve por la que un desarrollador foxpro debería migrar a .Net  bajo el lenguaje de programa C#. a continuación tres  de ellas.

Orientación a Objetos

Los que somos foxeros hemos disfrutado de la orientación a objetos desde la versión 3, lanzada en junio de 1995 (fuente: wikipedia ) por lo que hablar de ella quizá no parezca emocionante a primera vista, sin embargo explicare algunas que quizá llamen tu atención a continuación:

  1. Interfaces: si algunas vez has querido heredar características de dos o mas clases padre en Foxpro y no has podido amarás esta capacidad que puede realizarse en C# y la mayoría de lenguajes orientados a objetos pero que en foxpro no existe.
  2. Clases abstractas: básicamente de lo que hablamos con abstracción es poder usar una clase sin instanciarla, es decir podemos llamar a sus métodos sin necesidad de crear un objeto nuevo
  3. Serializar objetos: con C# puedes serializar objetos para luego realizar operación con ellos en forma clara y transparente, ¿para que sirve esto ? por ejemplo en c# puedes crear una consulta SQL que devuelva un conjunto de registros los cuales se vacían en un array de objetos, este array se usa luego para actualizar los cambios en la base de datos (explicare un poco mas de esto cuando hable sobre MVC)

IDE de Desarrollo

Hay que decir que el IDE de desarrollo de  Foxpro pertenece a la década pasada; se han hecho importante mejoras en él a partir de la comunidad https://vfpx.codeplex.com/ con muchos add-ons que se integran al IDE y que además son gratuitas, si embargo no son suficientes.

Visual Studio es una fantástica herramienta de programación, puede que muchos estén en desacuerdo conmigo, pero yo me atrevería a decir que junto a Eclipse,  Visual Studio es el mejor IDE del mercado.

Podría hablar de muchas características pero entre todas me enfocare en dos que a mi juicio son maravillosas:

  1. Manage Nuget Package: traducido seria algo así como manejador de paquetes de piezas, y sirve para poder instalar directamente en tus proyectos clases y características automáticamente, es como si con un comando pudiéramos descargar e instalar las Foxcharts dentro de  nuestro proyecto, sin acudir al website para bajarlas y luego copiarlas al directorio local de nuestro proyecto.
  2. Command Window: La ventana de comandos de Foxpro es una vieja conocida para todos los que venimos del mundo Fox; Visual Studio la integra ahora y le agrega mas funciones, no es todavia como en Fox, donde se puede digitar cualquier código en la ventana de comandos y el este se ejecuta,  pero hay que decir que funciona bastante bien, sobre todo si trabajas con Entity Framework (explicaré un poco mas de Entity Framework en otra entrada )

Desarrollo para la WEB

Desarrollar directamente para la web no es posible en Foxpro, si bien existen algunas soluciones  como ActiveVFP siguen siendo una solución  forzada, aunque debo decir en su favor que no conozco ActiveVFP; por lo que hablaré de lo que si conozco: MVC y Razor de .NET.

¿Que Es Razor? seria difícil de explicarlo si nunca has desarrollado bajo el paradigma MVC (Modelo Vista Controlador) por lo que simplificando diré que es una manera fácil  de generar código HTML sin conocer HTML, con Razor tu tomas una Tabla y automáticamente te crea el código HTML necesario para mostrar, actualizar, insertar y borrar registros de la base de datos, todo esto sin saber nada de HTML.

Finalmente el Modelo Vista Controlador de .NET es avanzado en todas sus características, yo he trabajado mucho tiempo con codeigniter sin embargo MVC 5 lo supera en cuanto a la simplicidad y transparencia del código que se escribe, solo alcanzado recientemente con las ultimas versiones de Laravel.

Conclusión

En conclusión no pretendo ser un fanático de C# pero si destacar aquellas características que son demandadas hoy en día en los proyectos de desarrollo modernos, puede que todavía no hayas experimentado la necesidad de cambiar de lenguaje, pero tarde o temprano lo quieras o no llegará; iré compartiendo mis experiencias en este Blog acerca de cada uno de los lenguajes que voy conociendo y en los cuales voy desarrollando,  en este abanico de posibilidades C# simplemente es uno más, pero que con el tiempo he ido descubriendo que se ajusta mejor a las necesidades que los desarrolladores de fox necesitan.

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Actualizar Angular y no tener problemas

sábado, julio 11th, 2020

Uno de los aspectos más criticados de angular es el incremento continuo de versiones, y es que las versiones de angular se suceden a un ritmo vertiginoso, puedes sentirte abrumado cuando acabas de terminar un proyecto y te das cuenta que la última versión lo deja obsoleto, aunque hayas usado la última cuando lo iniciaste.

Es por eso que te recomiendo que mantengas actualizados tus proyectos lo más pronto posible, tratando de aplicar los parches y actualizaciones mayores o menores lo antes posible. Pero… cómo actualizar angular y no tener problemas.

Consideraciones antes de actualizar angular

Debes tomar en cuenta algunos aspectos sobre las versiones de angular y cómo se aplican a tus proyectos para no tener problemas.

El equipo de Angular tiene en mente que los cambios realizados afecten en lo mínimo la estabilidad de tus proyectos, con todo no siempre se puede mantener la compatibilidad entre versiones, y en algunas ocasiones debes correr scripts para poder adaptar una versión antigua a una más reciente

Las actualizaciones se dividen así:

Actualizaciones Mayores:

Estos implica que los cambios realizados en las características pueden afectar la estabilidad de tu proyecto, antes de actualizar a una versión mayor debes asegurar bien que tu proyecto podrá soportar los cambios

Actualizaciones menores

Las actualizaciones menores son totalmente compatibles hacia atrás puedes realizarlas sin problema y sin preocupaciones

Parches

Los parches están libres de todo riesgo, no debes preocuparte por ellos mas que de mantenerlos al día en tu proyecto, pues resuelven asuntos de seguridad y cosas menores

Recomendaciones para actualizar

Si tienes que actualizar angular a una versión menor bajo una misma versión mayor, como por ejemplo de la 7.2.11 a la 7.5.9 entonces debes hacerlo directamente, sin realizar actualizaciones intermedias, es decir que puedes no tienes que instalar la 7.3, 7.4 para llegar a la 7.5 puedes hacerlo directamente.

Pero si tienes que actualizar una versión mayor antigua a la más reciente, te recomiendo que lo hagas paso a paso, por ejemplo si tuvieras que actualizar de la versión 4.5.2 a la versión 7.5.9, debes aplicar primero la versión 5.0 luego la 6.6 y por ultimo la versión deseada.

Cómo actualizar angular

Paso 1) Desinstalar las versiones anteriores

npm uninstall -g angular-cli
npm uninstall -g @angular/cli

Paso 2) Borrar el caché de NPM

npm cache clean --force

Paso 3) Instalar la última versión de angular

npm install -g @angular/cli@latest

Recuerda que si tienes Debian como yo y estas usando NVM lo que instales con NPM activo se queda ahí, por ejemplo si tenias la version 10.16.3 y luego actualizar ahi el angular, entonces esa versión solo estará disponible cuando tengas seleccionada la versión 10.16.3, si todavía no sabes que es NVM visita el siguiente post

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Problema con Debian y node js

sábado, julio 11th, 2020

Una de las ventajas de usar Debian como SO para la programación y el desarrollo de aplicaciones, es sin duda, su gran estabilidad, esto se logra sobre la base de repositorios probados y depurados por una larga comunidad de usuarios. Pero esta misma fortaleza puede llegar a convertirse en su mayor debilidad, cuando de usar lo últimos releases en paquetería de terceros se trate.

Esto es lo que me paso, cuando usaba Debian 9 Stretch y quise instalar node js para trabajar con angular, resulta que cuando lo instalaba siempre me lo dejaba en la versión 4.8.1 pero para trabajar con angular necesitaba la versión 10 y no había forma de instalarlos desde los repositorios de Debian.

La solución llegó con una herramienta llamada NVM (Node Version Manager ) , esta herramienta te permitirá seleccionar la versión de Node Js que desees con un simple comando, puedes cambiar de la versión 4 a la versión 10 en un momento , y luego volver a la versión 4 si así lo necesitas.

¿Cómo instalar NVM en Debian ?

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh

Puedes verificar el contenido de instalador con

nano install_nvm.sh

Correr el script con bash para que se instale

bash install_nvm.sh

Podríamos reiniciar el equipo o simplemente cerrar sesión, pero mejor aplicas el siguiente comando para que emule el reinicio

source ~/.profile

Otro comandos de utilidad NVM

Ver las versiones disponibles con el comando NVM

nvm ls-remote

El comando anterior te mostrará todas las versiones disponibles desde la mas antiguas hasta la mas reciente, pero seleccionaremos una version estable

Seleccionamos la versión 10.16.3 con el comando siguiente

nvm install v10.16.3

Ahora la pongo en uso con el siguiente comando

nvm use  v10.16.3

Si desea saber cual es la versión de node que tienes en uso, debes correr el siguiente comando

nvm ls

Con esto ya podemos actualizar el NPM a la última versión

npm install -g npm@latest

confirmamos el NPM -V

npm -v 

Si necesita limpiar el cache

npm cache clean --force

si deseas borrar el cache del npm puedes usar este comando

npm cache clean --force

Espero que este pequeño tutorial te ayude a resolver los problemas de node js y debian, dejame un comentario si tienes algún problema

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Conversiones de fecha útiles entre MYSQL, PHP Y JavaScript

lunes, julio 6th, 2020

El tema de las fecha es un asunto serio, conversiones aqui, formatos allá, y compatibilizar todo entre diferentes lenguajes y bases de datos, es todo un aprendizaje aparte. He decidido recopilar en este post todos aquellos comando útiles de conversiones de fechas y otros trucos que me han servido y que puedas utilizar si acaso lo consideras útil.

Comandos de fecha para Mysql

A continuación los comandos útiles para Mysql

1)Devolver una fecha de acuerdo a tu huso horario

A menos que tu servidor este en tu oficina o en tu país, difícilmente estará en el mismo huso horario, por lo general los servidores están en EEUU ya sea en la costa oeste o este, casi siempre en otro huso horario al de tu país, por esa razón cuando trabajes con campos Datetime en mysql debes hacer un pequeño ajuste para mostrar los resultados.

Por ejemplo puede ser que tu servidor se encuentre 6 horas después que tu país, por lo que cuando realizamos consultas debemos presentarlas con un ajuste:

date(DATE_SUB(fecha, INTERVAL 6 HOUR))

Puedes cambiar el número 6 ajustándose al horario de tu país con la función DATE_SUB(campo, INTERVAL valor intervalo)

El intervalo puede ser cualquiera de estos :

  1. MICROSECOND
  2. SECOND
  3. MINUTE
  4. HOUR
  5. DAY
  6. WEEK
  7. MONTH
  8. QUARTER
  9. YEAR
  10. SECOND_MICROSECOND
  11. MINUTE_MICROSECOND
  12. MINUTE_SECOND
  13. HOUR_MICROSECOND
  14. HOUR_SECOND
  15. HOUR_MINUTE
  16. DAY_MICROSECOND
  17. DAY_SECOND
  18. DAY_MINUTE
  19. DAY_HOUR
  20. YEAR_MONTH

Comandos de fecha para PHP

Dejaré aqui los comando útiles par a php

1)Cómo obtener la fecha inicial y la fecha final de un mes en php

Cuando necesitas consultar una tabla por sus campos de fecha, quizá te sea útil establecer unos parámetros de fecha para un periodo por default, que generalmente es el mes actual, así puedes mostrar el conjunto de datos mas reciente y luego permitir al usuario que cambie la fecha para que pueda consultar otro conjunto de registros. El comando para hacerlo es el siguiente:

Comando para obtener el primer día del mes actual

$cFecha1=date('Y-m-01');

Comando para obtener el último día del mes actual

$cFecha2=date('Y-m-t');

Comandos para fechas de JavaScript

Aquí te comparto comandos para javascript. A los que venimos de lenguajes antiguos el manejo de las fechas en javascript nos puede parecer desconcertante, por ejemplo el método getday() no te devuelve el día de una fecha sino un entero que representa el dia de la semana; si lo que deseas es el día del mes entonces debes usar getDate().

Te recuerdo que este blog es para programadores que vienen de lenguajes viejos y que todavía no han hecho el pase a lenguajes web, si eres nativo de la web, nuestro contenido bien puede parecer trivial o demasiado básica.

1)Cómo generar la fecha inicial y final de un mes en JavaScript

Al igual que con Php es posible que necesites obtener la primera fecha y la última para enviar los parámetros de una consulta.

Para obtener la fecha inicial:

var dt= new Date();
var dtFirst=Date(1,dt.getMonth()+1,dt.getYear()+1900);

Para obtener la fecha final:

var dt= new Date();
var y = dt.getFullYear();
var m = dt.getMonth();
var dtEnd= new Date(y, m + 1, 0);
        

2)Preparar una fecha en formato válido para mysql en JavaScript

Sucede que cuando realizas consultas a una base de datos Mysql necesita enviar las fechas ya formateadas, así el procesamiento se realiza en el lado del cliente y tu servidor no se ve cargado con procesamiento extra innecesariamente. Te comparto una función que puedes uar en JavaScript para convertir a formato Mysql

function convertDateMysql(strDate){
            const parts = strDate.split('/');
            const day = parts[0];
            const month = parts[1];
            const year = parts[2];
            return year+"-"+month.padStart(2, "0")+"-"+day.padStart(2, "0");
		}

Iré dejando mas código útil para el tratamiento de fecha.

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest



Redes sociales