Ideario

Cómo utilizar MCP Server con Supabase y Cursor

Fri, 09 Feb 2024 19:46:00 -0500

Introducción

MCP Server es un protocolo open source para conectar diversas plataformas para alimentar un modelo largo de lenguaje.

En este caso, vamos a utilizar Supabase como base de datos y Cursor para usarlo en Composer, sea en modo agente o normal.

Instalación

Para ellos vamos a clonar el repositorio de MCP Server.

git clone git@github.com:modelcontextprotocol/servers.git

Ir a la carpeta de supabase.

cd servers/postgres/src/

Instalar las dependencias.

pnpm install

Construir el proyecto.

pnpm build

Instalación en Cursor

Para ello vamos a Cursor donde puedes agregar un MCP server de la siguiente manera.

Copia el path hasta el archivo index.js del MCP Server que acabamos de construir.

/Users/juanpablonunez/Documents/modelcontextprotocol/servers/postgres/src/index.js

Ve a la configuración de Cursor > Features > MCP Server

Click en “add new MCP server”

Selecciona el tipo de servidor “command” Agrega el nombre de descriptivo Y finalmente agrega el path del archivo index.js del MCP Server que acabamos de construir.

Este es el resultado si todo salió bien.

Ejecución

Para usarlo vas a composer y pide que te haga una búsqueda en la base de datos.

Conclusiones

Es una herramienta muy poderosa para conectar diversas plataformas para alimentar un modelo largo de lenguaje.
Es muy fácil de instalar y usar.
Es una herramienta que se puede usar en modo agente o normal.
Se puede conectar cualquier sistema creando nuestros propios MCP Server.
En este proyecto usamos Supabase como base de datos, pero se puede conectar cualquier base de datos PostgreSQL con este ejemplo.
Aquí estamos trabajando con un proyecto localmente, por eso el query string está con el usuario y contraseña de Supabase local de la base de datos.

Referencias

Como utilizar pnpm con Angular

Thu, 09 Mar 2023 19:46:00 -0500

Introducción

pnpm es un gestor de paquetes de javascript el cual una de sus mejores ventajas es reducir el tiempo de instalación de las dependencias

Instalación de pnpm

npm install -g pnpm

Configuración con angular

Proyecto nuevo

Utilizar el angular CLI con pnpm para crear un nuevo proyecto pnpm --package=@angular/cli dlx ng new amazing-project --package-manager pnpm\
El angular CLI nos preguntara las opciones de configuración y finalmente instala el proyecto

Al abrir el proyecto podemos ver el archivo pnpm-lock.yaml

Proyecto existente con npm

Ejecuta el comando de pnpm install y automáticamente creara el archivo pnpm-lock.yaml
Luego de eso borrar el archivo package-lock.json rm package-lock.json
Ejecutar pnpm start para confirmar que todo funciona correctamente

En caso de que el proyecto no funcione hay la opción de instalar las dependencias respetando las diferentes versiones requeridas por los paquetes mediante pnpm install --shamefully-hoist=true

Comparando la instalación de pnpm y npm en un proyecto nuevo

Considerando:

hemos instalado por primera vez el proyecto utilizando npm y pnpm.
existen los archivos package-lock.json y pnpm-lock.yaml
la carpeta node_modules no se encuentra en el proyecto

Instalación con npm

Duración: 14 segundos

Instalación con pnpm

Duración: 2.2 segundos

Por qué pnpm es mas rápido?

Debido a que pnpm almacena las dependencias en un solo sitio y crea enlaces simbólicos a la carpeta node_modules según se necesite, de esta forma evitar descargar los paquetes y reutiliza los preexistentes en la computadora.

Conclusiones

La instalación de un proyecto es definitivamente mas rápido con pnpm que con npm
La experiencia de desarrollo mejora al esperar menos tiempo en instalar las dependencias
Reducir el tiempo de instalación también reduce el costo por servicios de CI/CD

Referencias

Como usar images en Chat GPT

Mon, 27 Feb 2023 19:00:00 -0500

Explicacion

Para utilizar imagenes en ChatGPT utilizaremos la sintaxis de Markdown ya que esta puede mostrar una imagen desde una URL

![DESCRIPTION](IMAGE_URL)

Aprovechando esta funcionalidad utilizaremos la API de unplash para generar imagenes dado un texto.

Especificamente esta URL donde podemos obtener una imagen basado en el texto https://source.unsplash.com/400x400/?[texto a reemplazar]

Ejemplo

Para demostrar este metodo se creara un juego de adivinar el animal, el ChatGpt nos dara una serie de pistas sobre el animal que debemos adivinar, y nosotros responder con el nombre del animal.

El prompt a ser utilizado sera:

Actua como un juego interactivo para adivinar un animal, dame una pista a la vez, espera por mi respuesta para continuar con la siguiente pista, cuando adivine el animal devuelve un mensaje de "Felicitaciones" ![FotoAnimal](https://source.unsplash.com/800x400/?[animal]) reemplaza [animal] con el nombre del animal adivinado en ingles

Actua como un juego interactivo para adivinar un animal, dame una pista a la vez, espera por mi respuesta para continuar con la siguiente pista, cuando adivine el animal devuelve un mensaje de “Felicitaciones” reemplaza [animal] con el nombre del animal adivinado en ingles

Una vez adivinado el resultado se puede observar la imagen

Que es storybook y como utilizarlo en Angular?

Tue, 07 Feb 2023 19:00:00 -0500

Storybook es un entorno de desarrollo para construir componentes de interfaz de usuario. Te permite desarrollar tus componentes de forma aislada, lo que significa que no tienes que preocuparte por el resto de tu aplicación cuando trabajas en un componente específico.

Aqui una visión general de cómo utilizar Storybook en Angular.

Instalacion

La forma más rápida es ejecutando el siguiente comando npx storybook init

Y agregando al angular.json en la section de architect

{
  ...
  "architect": {
    ...
    "storybook": {
      "builder": "@storybook/angular:start-storybook",
      "options": {
        "browserTarget": "angular-cli:build",
        "port": 6006
      }
    },
    "build-storybook": {
      "builder": "@storybook/angular:build-storybook",
      "options": {
        "browserTarget": "angular-cli:build"
      }
    }
  }
}

Convirtiendo tu componente en una historia

Lo primero que tienes que hacer es crear un nuevo archivo llamado header.stories.ts en la carpeta del componente que deseas realizar.

Una vez hecho esto, puedes importar tu componente en el archivo y luego escribir tu historia. Una historia es simplemente una función que devuelve el componente sobre el cual quieres trabajar. Por ejemplo, si quisiéramos trabajar en un componente header, nuestra historia podría ser así

import { moduleMetadata } from '@storybook/angular';
import { HeaderComponent } from './header.component';
import { Story, Meta } from '@storybook/angular/types-6-0';

export default {
  title: 'Layout/Header',
  component: HeaderComponent,
} as Meta;

const Template: Story<HeaderComponent> = (args: HeaderComponent) => ({
  component: HeaderComponent,
  props: args,
});

export const header = Template.bind({});
header.args = {};

Creación de múltiples historias para un componente

A menudo resulta útil crear varias historias para un mismo componente, de modo que pueda ver cómo se comporta en diferentes situaciones. Por ejemplo, es posible que desee probar el header con un diferentes textos.

export const headerWithText = Template.bind({});
header.args = {
  today: '27-03-2021',
};

export const headerWithoutText = Template.bind({});
header.args = {
  today: '',
};

Cada argumento permitido dentro del args es parte un input dentro del componente

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderComponent {
  @Input() today = '';
}

De esta forma podemos ver como se comporta el header en con diferentes textos

Conclusiones

Desarrollar componentes de forma aislada sin preocuparte de la aplicación
Probar componentes en diferentes estados (por ejemplo, con diferentes datos)
Ver cómo se comporta los componentes en diferentes navegadores y tamaños de pantalla
Documentar componentes para que otros desarrolladores entiendan fácilmente cómo utilizarlo

Enlaces

How to create an APK from PWA?

Sat, 20 Jun 2020 19:00:00 -0500

Prerequisites

Has PWA all ready Important!
Install llama pack dependencies

OpenJDK 8 Download and uncompress it on ~/.java/ directory

tar xf ./openJDK-jdk.tar.gz -C ~/.java/
tar xf ./openJDK-jre.tar.gz -C ~/.java/

Optional Setup enviroment variable.

echo "export JAVA_HOME=\"/home/luis/.java/OpenJDK8U-jdk_xxx/jdk8u242-xxx\" >> ~/.bashrc"

Close all terminals for changes to take effect

Android command line tools Search section command line tools only Download and uncompress it on ~/Android/sdk/
```
unzip ./commandlinetools-linux-xxxx_latest.zip -d ~/Android/sdk/
```
Install llama-pack cli
```
npm i -g @llama-pack/cli
```

Execute llama-pack

Provide manifest.json url or manifest.webmanifest file

llama-pack init --manifest https://my-twa.com/manifest.webmanifest

Answer questions about twa

Domain being opened in the TWA:
Name of the application:

In keystore let’s press enter then it asks you about create a key store

First and Last names (eg: John Doe): Luis Reinoso
Organizational Unit (eg: Engineering Dept): Developer
Organization (eg: Company Name): Freenlance
Country (2 letter code): EC
// use the same password
Password for the Key Store: [hidden]
Password for the Key: [hidden]

Upload private key to google play console
Create asset link Using package fingerprint (SHA256) inside app sign go to Google Digital Asset Links

You will need the App package fingerprint (SHA256), to get it search for API Integrity and App Signing.

This will create a json then create a file named assetlinks.json and serve it from https://my-twa.com/.well-known/assetlinks.json.

Useful Checker https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://www.your-website-name.com&relation=delegate_permission/common.handle_all_urls

Build apk

llama-pack build

This generate the app-release-signed.apk

Upload to play store
Fill all data required from play store

References

llama pack cli

Angular storybook cheatsheet

Thu, 11 Jun 2020 19:00:00 -0500

Installation

npm install -g @storybook/cli

Go to angular project then execute

sb init

Remove angular stories examples

Create a new story.

  ng g component test

Create story file

test.stories.ts It should have stories before ts extension

export default {
title: 'Ideario Components',
component: IdearioComponent,
decorators: [
  moduleMetadata({ // imports
    imports: [CommonModule]
    })
  ]
};

Add module decorator

export const test = () => ({
  component: TestComponent,
  ...,
  moduleMetadata: {
    imports: [],
    declarations: [],
    providers: []
  },
});

Add props (inputs/outputs)

export const buttonWithProps = () => ({
  component: Button,
  props: {
    text: 'save',
    onClick: action('click this button'),
  },
});

Add ng-content

export const withContent = () => ({
  component: Button,
  template: `
  <ideario-button>
    <span>Super text</span>
  </ideario-button>
  `,
  moduleMetadata: {
    declarations: [IdearioButtonComponent]
  },
});

Fixing commons errors

On .storybook folder

100% height

Add to preview-body.html file

<style>
  #root {
    height: 100%;
  }
</style>

On Ionic

Page on blank

https://github.com/storybookjs/storybook/issues/7703

<style>
  html:not(.hydrated) body {
    display: block !important;
  }

</style>

No render components

Add to preview-head.html file

<script nomodule="" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.js"></script>

5 pasos para conseguir trabajo remoto como developer desde Ecuador sin ser programador Senior

Thu, 28 May 2020 19:00:00 -0500

Crea proyectos de software libre en Github.

¿Qué hacer?

Crear proyectos que te apasionen y empieza ya.

Razones

Aprendizaje sobre trabajo colaborativo.
Puedes solicitar code reviews. (ver bonus al final del post)
Se observa fácilmente cómo organizas tu código.
Facilidad para compartir código

Alimenta tu github.

¿Qué hacer?

Participar activamente en github. Puedes dar estrellitas, hacer un fork, leer código de otros, personalizarlo.

Razones

Github es el portfolio mainstream para un programador.
Aprendes sobre la marcha con código de otros.
Descubres nuevas librerías/funcionalidades.
Aprendes a buscar issues de tus librerías/frameworks favoritos.
Encuentras inspiración.
Personalizar funciones de programas para facilitarte la vida.

Practica inglés.

Qué hacer?

Inscríbete en un curso de ingles.
Usa una app de repetición espaciada. (anki, memrise).
Practíca con tu pareja.

Razones

Aumentas la probabilidad de:
- Obtener un trabajo excelentemente remunerado.
- Obtener un trabajo en otras latitudes del planeta.
- Obtener un trabajo donde eres parte de un equipo.

Un cv minimalista.

Qué hacer?

Un CV sin:

Sin foto.
Datos muy personales.
Gráficos poniendo en porcentajes tus habilidades.
Historial académico a menos que sea relevante.

Un CV con:

Máximo una hoja
Los logros de los proyectos que hiciste en github o por trabajo.
Las descargas de las librerías que has hecho.
Breve listado de tecnologías que sabes (no importa si piensas que no sabes mucho, pon lo que usaste para hacer los proyectos en github!)

Razones

Debe ser fácil de leer de un solo vistazo tu CV.

Aplica al empleo que deseas.

Qué hacer

Aquí hay dos formas:

Al azar: Por medio de búsquedas (menos probable)
Empresa objetivo: Una empresa donde te gustaría trabajar (más probable)

Al azar

Busca en google la tecnología que te guste seguido de la palabra jobs inserte aquí_su_tecnología jobs

Ejemplo: Angular jobs

Encontraras muchos portales y aplica.

Empresa objetivo

Ve la página principal de la empresa y busca la sección de careers.

Cuenta tu historia en la entrevista.

Qué hacer

Antes/Durante/Después de la parte técnica.

Cuenta sobre tu historia en la programación y sobre que tuviste que pasar para llegar a ese momento. Para eso ya tienes los proyectos que hiciste en github.

Bonus

Si deseas conseguir un empleo con Angular pero tienes alguna duda técnica con respecto a hacer alguna cosa en Angular.

Puedo ayudar para que encuentres la solución al problema técnico.
Puedo hacer code review de tu proyecto en github.
Podemos hacer pair programming remotamente.

Solo mándame un mensaje :wink:

Cómo navegar rápidamente entre archivos de proyectos de Angular en VSCode.

Mon, 06 Jan 2020 19:00:00 -0500

En base a mi experiencia esto depende de dos factores:

la estructura del proyecto.
el editor de texto que uses.

Para este post se usa el siguiente entorno:

editor de texto: VSCode
sistema operativo: Linux
proyecto: inventario-app

Estructura del proyecto

Partiendo de esta estructura

e2e/                         
src/                         
|- app/                      
|  |- core/                  
|  |- shared/                
|  |- app.component.*        
|  |- app.module.ts          
|  |- app-routing.module.ts  
|  +- ...                    
|- assets/                   
|- environments/             
|- theme/                    
|- translations/             
|- index.html                
|- main.scss                 
|- main.ts                   
|- polyfills.ts              
+- test.ts

Estructura de carpeta `/src`

src/                         
|- app/                      
|  |- bodega/                 crud bodega
|  |- core/                   funcionalidad principal
|  |- inicio/                 pantalla principal
|  |- login/                  login
|  |- main-nav/               barra de navegación
|  |- producto/               crud producto
|  |- registro/               sign in
|  |- shared/                 funcionalidad compartida
|  |- usuario/                crud usuario
|  |- app.component.*         
|  |- app.module.ts          
|  |- app-routing.module.ts

Estructura módulos

Lo ideal es dividir en módulos cada uno de los funcionalidades de tu aplicación dentro de cada módulo tener:

components
servicios locales
module file
routing module file

src/                         
|- app/                      
|  |- bodega/                          crud bodega
|  |  |- components/                   componentes de bodega
|  |  |  |- bodega-dialog              componente dialogo
|  |  |- bodega.component.ts               componente principal de bodega
|  |  |- bodega.module.ts                 módulo bodega
|  |  |- bodega-routing.module.ts         módulo routing bodega

Nombre de los archivos/carpetas

Realmente el nombre de los archivos recomiendo sea según la funcionalidad que este realice.

Editor de texto

El editor de texto te puede ayudar principalmente con sus atajos de teclado y los extensiones disponibles en el.

Atajos de teclado

Nota Los atajos aquí presentados pueden variar de sistema operativo y en posteriores versiones de VSCode

Para ver los atajos del teclado de VSCode

Buscar archivo: Simplemente pones en nombre del feature que buscas. Ctrl + p
Abrir o cerrar panel lateral: Permite más espacio para ver el archivo Ctrl + b
- Abierto
- Cerrado

Extensiones

vscode-angular2-files Desde la interfaz te permite crear modulos, componentes, entre otros.
vscode-ng-language-service Plugin que permite utilizar autocompletado y checkeo de errores en el template. Nota: Ten encuenta que debes tener en tu proyecto @angular/language-service >=v9.0.0
angular2-switcher Cambia entre archivos .ts .scss/.css .spec

Lectura recomendada

Guía estilo Angular

Roles en Angular

Sat, 04 Jan 2020 19:00:00 -0500

Usar ngx-permissions para validar roles usuarios https://github.com/AlexKhymenko/ngx-permissions

Instalar

npm install ngx-permissions  --save

Agregar al app.module

import { NgxPermissionsModule } from 'ngx-permissions';
...
@NgModule({
  imports: [
    NgxPermissionsModule.forRoot(),
  ]
  ..

En método login

import { NgxRolesService } from 'ngx-permissions';

constructor(private rolesService: NgxRolesService){}

login() {
  this.servicioAuthenticar(user).subscribe((credencialesDelUsuario) => {
    this.rolesService.addRole(credencialesDelUsuario.rol, []);
  })
}

para validar rutas para que accedan según usuario NgxPermissionsGuard fuente: rutas

// permite a differente de tipo rol Externo
{
      path: 'ciudad',
      component: 'CiudadComponent',
      canLoad: [NgxPermissionsGuard],
      data: {
        permissions: {
          except: 'Externo' // Externo es el rol que viene de la base de datos
        }
      }
    },

para validar en la vista *ngxPermissionsOnly fuente: controlling-access-in-views

<ng-container *ngxPermissionsOnly="['Administrador']">
  <button
    type="button"
    (click)="obtenerNombre()"
  >
    Obtener nombre
  </button>
</ng-container>

How to mock ActivatedRoute in Angular

Thu, 07 Mar 2019 19:00:00 -0500

Example applied to queryParams and params of ActivatedRoute

In this example we have a common use of ActivatedRoute. Read params from url example.component.ts

import { ActivatedRoute } from '@angular/router';
export class ExampleComponent implements OnInit {

  constructor(private activateRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe(params => {
      if (params['id_params']) {
        ...
      }
    });

    this.activatedRoute.queryParams.subscribe(params => {
      if (params['id_query_params']) {
        ...
      }
    });
  }

}

Mock is on useValue. Set same params of activatedRoute.params or activatedRoute.queryParams inside convertToParamMap

example.component.spec.ts

import { ExampleComponent } from './example.component';
import { ActivatedRoute, convertToParamMap } from '@angular/router';
import { of } from 'rxjs';
...

describe('ExampleComponent', () => {
  let component: ExampleComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [...],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { // Mock
            queryParams: of(
              {
                id_params: 'id_params_test'
              }
            ),
            params: of(
              {
                id_query_params: 'id_query_params_test'
              }
            )
          }
        }
      ],
      declarations: [ExampleComponent]
    }).compileComponents();
  }));
});

Common error related that this post solve:

No provider for ActivatedRoute

Ideario

Cómo utilizar MCP Server con Supabase y Cursor

Introducción

Instalación

Instalación en Cursor

Ejecución

Conclusiones

Referencias

Como utilizar pnpm con Angular

Introducción

Instalación de pnpm

Configuración con angular

Proyecto nuevo

Proyecto existente con npm

Comparando la instalación de pnpm y npm en un proyecto nuevo

Instalación con npm

Instalación con pnpm

Por qué pnpm es mas rápido?

Conclusiones

Referencias

Como usar images en Chat GPT

Explicacion

Ejemplo

Que es storybook y como utilizarlo en Angular?

Instalacion

Convirtiendo tu componente en una historia

Creación de múltiples historias para un componente

Conclusiones

Enlaces

How to create an APK from PWA?

Prerequisites

Execute llama-pack

Build apk

References

Angular storybook cheatsheet

Installation

Create a new story.

Create story file

Add module decorator

Add props (inputs/outputs)

Add ng-content

Fixing commons errors

100% height

On Ionic

Page on blank

No render components

5 pasos para conseguir trabajo remoto como developer desde Ecuador sin ser programador Senior

Crea proyectos de software libre en Github.

Alimenta tu github.

Practica inglés.

Un cv minimalista.

Aplica al empleo que deseas.

Al azar

Empresa objetivo

Cuenta tu historia en la entrevista.

Bonus

Cómo navegar rápidamente entre archivos de proyectos de Angular en VSCode.

Estructura del proyecto

Estructura de carpeta /src

Estructura módulos

Nombre de los archivos/carpetas

Editor de texto

Atajos de teclado

Extensiones

Lectura recomendada

Roles en Angular

How to mock ActivatedRoute in Angular

Estructura de carpeta `/src`