En los ocho posts anteriores construimos paso a paso un entorno completo: VS Code, Git, Node.js, Java, SQLcl con Wallet, Claude Code autenticado y el MCP Server conectado a nuestro esquema VUELOS en Oracle Autonomous Database. Llegamos al punto donde Claude Code puede hablar directamente con nuestra base de datos en lenguaje natural.
Hoy damos el siguiente paso: vamos a preparar la aplicación Oracle APEX sobre la que vamos a trabajar y entender esto que encontré en mis búsquedas por saber más y mas de todo este mundo que de verdad me voló la cabeza! Hablo del APEX Component Modifier!
No pensaba que tan pronto estaríamos trabajando de esta manera, la Inteligencia Artificial llegó para quedarse y hoy mas que nunca tenemos que adaptarnos o reinventarnos para seguir en la cancha y jugar el partido que nos toca jugar con los jugadores del momento!!!
¿Qué es el APEX Component Modifier?
El APEX Component Modifier, es una skill de Claude Code que nos va a permitir modificar componentes de APEX directamente desde la terminal de Visual Code, sin tocar la interfaz gráfica del App Builder!!!. Si te entusiasma la idea de ver cómo funciona quédate que te lo voy a mostrar paso a paso y después podrás hacer tus propias prácticas!
Antes de instalar cualquier cosa, es importante entender qué es lo que estamos por agregar a nuestro entorno.
El APEX Component Modifier es una skill para Claude Code creada por Oleksii Vykhrystiuk un profesional ucraniano con más de 20 años de experiencia en Data Engineering e IA, actualmente trabajando en Oracle en Berlín Alemania. No es un producto oficial de Oracle, sino una contribución personal a la comunidad que vale la pena conocer y explorar. La skill está disponible públicamente en GitHub bajo el usuario avhrst.
¿Qué es una skill en Claude Code?
Claude Code sabe programar en general, pero no conoce en profundidad las APIs propias de Oracle APEX. Una skill es un conjunto de archivos .md que se colocan en la carpeta .claude/skills/ del proyecto y le dan a Claude conocimiento específico sobre una tecnología. Es como darle un manual de instrucciones personalizado para que sepa exactamente cómo trabajar con nuestro stack.
¿Qué hace esta skill específicamente?
Según la documentación, no s dice que cuando invocamos el comando /apex PAGE:2 – Add item P2_STATUS as select list desde Claude Code, la skill ejecutará automáticamente un workflow de 9 pasos:
| Paso | Qué hace |
| 1. Verificar SQLcl | Confirma que SQLcl CLI está disponible y conectado |
| 2. Crear área de trabajo | Crea una carpeta con marca de tiempo y una rama Git si está en un repositorio |
| 3. Identificar el componente | Normaliza el selector del componente y resuelve IDs via apex list |
| 4. Exportar | Ejecuta apex export -split -expComponents para obtener los archivos de componentes |
| 5. Cargar referencias | Lee la documentación interna de la API de importación de APEX 24.2 y cualquier patrón específico de la aplicación |
| 6. Planificar | Divide el trabajo en cambios de BD y parches en los archivos APEX exportados |
| 7. Aplicar cambios en BD | Ejecuta scripts DDL/DML idempotentes via SQLcl |
| 8. Parchear archivos | Modifica los archivos SQL exportados con los cambios solicitados utilizando reglas de anclaje e ID seguras |
| 9. Importar y validar | Ejecuta el script de instalación a través de SQLcl y lo vuelve a exportar a diff |
Todo esto ocurre automáticamente, sin que tengamos que abrir el App Builder, buscar la página, editar propiedades manualmente ni reimportar nada. Solo escribimos en lenguaje natural lo que queremos y la skill hace el resto, no es brutal? Wooowww
Componentes soportados
La skill soporta una amplia gama de componentes de APEX:
- Nivel de página: páginas, regiones, items, botones, procesos, computaciones, ramas
- Acciones dinámicas: eventos y acciones (ciclo de vida completo de DA)
- Validaciones: validaciones a nivel de página y de elemento
- Informes: Informes Interactivos, Informes Clásicos, Grilla Interactiva
- Visualizaciones: JET Charts (barra, línea, torta), mapas
- Componentes compartidos: LOVs, esquemas de autorización, templates, archivos estáticos, opciones de compilación, entrada de listas
- Fuentes web: Fuentes de datos REST y módulos de código fuente web
- Y mucho más: Tarjetas, Formularios, Búsqueda Facetada, Navegación, Automatización
El entorno que ya tenemos
Una de las razones por las que tiene sentido instalar esta skill ahora es que ya tenemos todo el ambiente que necesita. Repasemos el estado actual:
| Requisito | Versión requerida | Estado |
| Claude Code CLI | Cualquier versión | Instalado (Post 6) |
| SQLcl | 25.1 o superior | 26.1.0.0 |
| Java | 17 o 21 | Java 21.0.11 |
| Conexión guardada en SQLcl | vuelos_mcp | Configurado (Post 8) |
| Aplicación APEX | App ID 100 (anota el ID de la tuya) | Vamos a crearla más adelante |
| settings.json | A configurar | Lo configuraremos más adelante |
Además necesitamos el archivo settings.json que define los valores por defecto del entorno (conexión, App ID y workspace), que lo vamos a configurar más adelante junto con la instalación de la skill.
Paso 1: Crear el workspace en Oracle APEX
Para poder trabajar con el APEX Component Modifier, necesitamos una aplicación APEX sobre la que operar. El primer paso es crear el workspace que va a contener nuestra aplicación, asociado al esquema VUELOS que ya tenemos instalado en nuestra Oracle ADB.
Desde OCI Console
Ingresamos a nuestra consola de OCI y navegamos a Developer Services → APEX Instances. Ahí vemos nuestra instancia demovuelos (Always Free, estado Available) que configuramos en posts anteriores.
Desde APEX Administration (INTERNAL)
Accedemos a APEX con el usuario INTERNAL / ADMIN y vamos a Manage Workspaces → Existing Workspaces → Create Workspace. Completamos el formulario:
- Database User: VUELOS (el esquema que ya tenemos instalado)
- Workspace Name: VUELOS
- Workspace Username: VUELOS_ADMIN
- Workspace Password: La contraseña que usaremos para acceder
Hacemos clic en Create Workspace y en segundos el workspace queda creado y asociado al esquema VUELOS. Desde ese momento podemos ingresar con el usuario VUELOS_ADMIN y tenemos acceso completo a todas las tablas del dataset: VUELOS, RESERVAS, CLIENTES, AGENCIAS, CIUDADES, PAÍSES y el resto de las tablas de referencia.
Paso 2: Crear la aplicación base
Con el workspace listo, el siguiente paso es crear una aplicación APEX que sirva de base para demostrar el APEX Component Modifier en acción. La skill trabaja sobre páginas y componentes de una aplicación existente, así que necesitamos tener al menos una app con algunas páginas creadas.
Usando el wizard de Create Application
Desde el App Builder del workspace VUELOS, hacemos clic en Create → New Application. Nombramos la aplicación Gestión de Vuelos y Reservas y agregamos tres páginas con el botón Add Page:
| Página | Tipo | Tabla |
| Vuelos | Interactive Report with Form | VUELOS |
| Reservas | Interactive Report with Form | RESERVAS |
| Clientes | Interactive Report with Form | CLIENTES |
En la sección Settings verificamos que el Schema sea VUELOS (o el nombre que le hayamos colocado). Dejamos la autenticación con Oracle APEX Accounts y hacemos clic en Create Application.
En pocos segundos APEX genera automáticamente todas las páginas, formularios, procesos y navegación. El resultado es una aplicación funcional con Home y las tres páginas de Interactive Report con sus respectivos formularios de edición.
Verificando el ambiente desde VS Code
Antes de proceder con la instalación de la skill, verificamos que el ambiente está en orden desde la terminal de VS Code. Estamos parados en el directorio de nuestro proyecto:
C:\Users\Clarisa\Documents\Proyectos\APEX\vuelos-reservas-app>
Verificamos SQLcl:
sql -version
SQLcl: Release 26.1.0.0 Production Build: 26.1.0.086.1709
Verificamos Java:
java -version java version "21.0.11" 2026-04-21 LTS Java(TM) SE Runtime Environment (build 21.0.11+9-LTS-211) Java HotSpot(TM) 64-Bit Server VM (build 21.0.11+9-LTS-211, mixed mode, sharing)
Como veos tenemos todo lo necesario el SQLcl 26.1.0.0 (muy por encima del 25.1 requerido) y Java 21.0.11 (exactamente una de las dos versiones soportadas). El ambiente está 100% listo.
Paso 3: Instalar la skill
Con el ambiente verificado, vamos a instalar el APEX Component Modifier.
Clonar el repositorio
En la terminal cmd de VS Code ejecutamos, nos vamos a la carpeta de nuestro proyecto, en mi caso:
C:\Users\Clarisa\Documents\Proyectos\APEX\vuelos-reservas-app>
Ejecutamos el siguiente comando:
git clone https://github.com/United-Codes/apex-component-modifier.git temp-apex-skill
Nota: El README menciona la URL https://github.com/avhrst/apex.git que no es accesible. El repositorio correcto y público del autor es https://github.com/avhrst/apex-component-modifier. En este post utilizamos el fork de United Codes (https://github.com/United-Codes/apex-component-modifier) que tiene exactamente el mismo contenido y ambas opciones son válidas.
Git descarga los 552 objetos del repositorio (521 KiB) incluyendo todos los archivos de la skill: global-patterns, references, templates y tools.
Copiar la skill al proyecto
Como estoy en un entorno windows utilizo este comando:
xcopy temp-apex-skill\.claude\skills\apex .claude\skills\apex /E /I
39 File(s) copied
Se copian los 39 archivos de la skill a la carpeta .claude/skills/apex de nuestro proyecto. Estos archivos incluyen la documentación de referencia completa de la API de importación de APEX 24.2 y los patrones globales para cada tipo de componente.
Limpiar el clon temporal
rmdir /S /Q temp-apex-skill
El directorio temporal queda eliminado y el proyecto queda limpio con solo la skill instalada en su lugar correcto.
Paso 4: Configurar settings.json
El último paso de la instalación es crear el archivo settings.json dentro de la carpeta .claude del proyecto. Este archivo le dice a la skill cuales son los valores por defecto del entorno: la conexión a usar, el ID de la aplicación y el workspace.
Desde la terminal de Visual Code ejecutamos:
type nul > .claude\settings.json
Se crea el archivo settings.json vacío dentro de la carpeta .claude. Luego ejecutamos:
code .claude\settings.json
Esto abre el archivo y pegamos el contenido del JSON manualmente.
Pegamos el siguiente contenido:
{
"env": {
"SQLCL_CONNECTION": "vuelos_mcp",
"APEX_APP_ID": "100",
"APEX_WORKSPACE": "VUELOS"
}
}
Ten en cuanta de colocar correctamente los valores de la conexión del SQLcl, el APP_ID y el nombre de tu Espacio de Trabajo.
Guardamos con Ctrl+S. Desde este momento la skill sabe automáticamente a que conexión conectarse, en que aplicación trabajar y en que workspace hacerlo, sin que tengamos que especificarlo en cada comando.
La estructura final del proyecto en el explorador de VS Code queda así:
.claude/ skills/ apex/ <- la skill instalada (39 archivos) settings.json <- conexion, App ID y workspace
Paso 5: La primera prueba
Con todo instalado y configurado, llega el momento de la verdad. Abrimos Claude Code en VS Code con Ctrl+Alt+I, creamos una New session y escribimos:
/apex PAGE:1 -- Describe page 1
Claude Code reconoce la skill /apex y comienza el workflow automáticamente. Lo primero que hace es pedirnos permiso para ejecutar comandos, ya que por seguridad Claude solicita aprobación antes de cada acción.
Seleccionamos la opción Yes, allow… for this project (just you) para que no nos vuelva a pedir permiso en este proyecto.
Lo que Claude Code ejecuta automáticamente, lo podemos ver en tiempo real en cada paso del workflow:
- Verificación de SQLcl: ejecuta sql -V y confirma la versión 26.1.0.0
- Lectura del settings.json: detecta la conexión vuelos_mcp, App 100, Workspace VUELOS
- Exportación: ejecuta el comando conectándose a la ADB:
- apex export -applicationId 100 -split -dir /tmp/apex-describe-p1 -expComponents “PAGE:1”
- Exporting Workspace VUELOS – application 100:Gestión de Vuelos y Reservas
- File ../../../../../../tmp/apex-describe-p1/f100/install_page.sql created
- Adaptación automática a Windows: al intentar listar los archivos exportados con rutas Linux (/tmp/), Claude Code detectó que estaba en Windows y cambió automáticamente a PowerShell para buscar en C:\tmp\. Esto lo hizo automáticamente sin que yo le dijera nada!.
- Análisis: lee los archivos SQL exportados y los interpreta con la documentación de referencia de APEX 24.2
El resultado
Claude Code devuelve una descripción completa y estructurada de la Página 1 – Home:
Page 1: Home
Attribute Value
Name Home
Alias HOME
Title Gestion de Vuelos y Reservas
Protection Level C (Checksum required)
Autocomplete OFF
Regions (2)
1. "Gestion de Vuelos y Reservas" - Hero Banner
Template: Hero region
Display position: REGION_POSITION_01 (top, above content)
Source: Static HTML - displays app icon only
Image: #APP_FILES#icons/app-icon-512.png (512px app icon)
2. "Page Navigation" - Navigation Cards
Template: Cards region, 4-column layout
Source: NATIVE_LIST driven by shared list ID 9356269287089598
Card options: Featured style, block layout, animated color fill
Items / Buttons / Processes / DAs / Branches
None - this is a purely navigational home page with no form elements
or server-side logic.
Summary: Page 1 is a standard APEX home page with a hero banner at the top
and a 4-column icon-based navigation card list below it.
Todo esto sin abrir el App Builder. Solo con un comando en lenguaje natural, Claude Code se conectó a nuestra Oracle ADB, exportó la página 1, leyó los archivos SQL generados y nos devolvió una descripción clara y estructurada de cada componente de la página.
Ejemplos de Uso
Para cerrar este post vamos a hacer un ejemplo concreto, vamos a ver el APEX Component Modifier en acción sobre nuestra aplicación. El objetivo es agregar un campo Observaciones al formulario de Vuelos (Página 3), vincularlo a una nueva columna en la tabla VUELOS y verificar que el dato se guarda correctamente. Y esto lo vamos a hacer con nuestro bello lenguaje natural, el español!
Antes del cambio, vemos que en la página 3 no está el campo Observaciones.
En una nueva sesión de Claude Code en nuestro Visual Code, ejecutamos:
Comando 1 – Agregar el campo al formulario:
/apex PAGE:3 -- Agregar un nuevo item de tipo área de texto P3_OBSERVACIONES con etiqueta Observaciones después del item CAPACIDAD_AVION
Claude Code ejecuta automáticamente el workflow completo: verifica SQLcl, lee el settings.json, exporta la página 3, analiza la estructura existente, genera el patch y reimporta la página a APEX. El resultado es el campo Observaciones visible en el formulario, pero sin columna en la base de datos todavía.
Comando 2 – Crear la columna y vincular el item:
Agregar la columna OBSERVACIONES de tipo VARCHAR2(4000) a la tabla VUELOS y vincular el item P3_OBSERVACIONES al proceso DML de la página para que guarde y recupere el dato correctamente.
Claude Code ejecuta el ALTER TABLE, re-exporta la página, parchea el item agregando p_source => ‘OBSERVACIONES’ y p_source_type => ‘REGION_SOURCE_COLUMN’, y reimporta todo.
La confirmación final llega en español:
"El proceso DML (Process Form Vuelos) ya es NATIVE_FORM_DML con REGION_SOURCE, por lo que ahora carga y guarda OBSERVACIONES automáticamente junto con los demás campos del formulario."
El resultado: el campo Observaciones aparece en el formulario, guarda datos en la base de datos y los muestra en el Informe Interactivo todo sin abrir el App Builder una sola vez.
Ahora en nuestra aplicación en APEX, refrescamos las columnas del informe interactivo, agregamos la columna para que se visualice y guardamos el informe como reporte primario.
Cargamos un valor en Observaciones desde el formulario:
Guardamos los cambios y podemos ver en el Informe Interactivo que se muestra lo que cargamos sin ningún problema.
Ahora viene la pregunta del millón!
¿Para qué usaría esto un desarrollador APEX en la vida real?
Te tengo que decir la verdad: agregar un campo de texto a un formulario no es algo que haría desde la terminal de VS Code. En el App Builder lo tengo listo en dos segundos!. Pero quería hacer este ejemplo para que veamos que lo que acaba de pasar aquí va mucho más allá de este ejemplo puntual.
Lo que probamos hoy es que Claude Code puede leer, entender y modificar una aplicación APEX sin que yo toque la interfaz gráfica. Eso abre un abanico amplio de posibilidades y debo decir muy interesantes para el trabajo real, por ejemplo:
- Documentación automática de aplicaciones. El comando /apex PAGE:X — Describe page X genera una descripción estructurada de cualquier página (eso lo vimos cuando le pedimos que describa la página 1. Esto es valioso para proyectos donde nadie documentó nada, o para incorporar a un nuevo desarrollador al equipo.
- Exploración de aplicaciones heredadas. Cuando recibo una aplicación que no conozco, puedo pedirle que describa cada página y obtener documentación estructurada en minutos en lugar de navegar manualmente por el App Builder.
La skill incluye comandos adicionales como /apex-learn y /apex-describe que según el README permiten exportar todos los componentes de una aplicación y analizarlos. Son casos de uso interesantes para documentación y auditoría que quedaron pendientes de explorar y te invito a que los pruebes.
Además, como vimos la skill permite aplicar cambios página por página mediante comandos individuales. No probamos ejecutar el mismo cambio en múltiples páginas en este post, pero dado que cada comando es independiente, podría repetirse tantas veces como sea necesario apuntando a distintas páginas.
Sobre el tema de las rutas de Windows: fue el obstáculo técnico más visible de esta experiencia, pero de verdad la IA se las arregló maravillosamente para cambiar a Powershell y seguir adelante sin que yo haga nada solo confirmar sus pasos dando clic al botón de Sí!!!. La skill fue diseñada pensando en Linux y Mac, y en Windows el comportamiento de SQLcl con rutas relativas genera algunos problemas que como vimos Claude Code resolvió de forma inteligente pero con más pasos de los necesarios. Es algo que vale la pena tener en cuenta si trabajamos en Windows y que seguramente mejorará a medida que la skill evolucione.
Ha sido un proceso de aprendizaje genuino. No todo salió a la primera, hubo errores, ajustes y momentos donde Claude Code tuvo que improvisar para resolver problemas de entorno. Pero el resultado final, fue que pudimos o mejor dicho Claude Code pudo crear un campo nuevo en la tabla VUELOS, crear un elemento de página nuevo en la página 3 de la aplicación de APEX y hacer que se guarde los datos reales, con dos comandos en español, eso es brutal!!!, no sé tú pero yo me quedé fascinada!.
La IA no reemplaza al desarrollador APEX. Pero sí puede ser una herramienta muy poderosa en manos de alguien que ya sabe lo que está haciendo. 🙂
Este es mi primer acercamiento a esta skill y hay mucho más por explorar y probar. Por eso te invito a que la instales y la pruebes, pero hacelo en un ambiente de pruebas y estudio, no en producción ni en una aplicación real, porque todavía no conocemos exactamente el comportamiento que puede tener ante ciertos pedidos.
Un detalle importante: la skill está escrita en inglés, y aunque como vimos hoy podemos escribir los comandos en español y Claude Code los interpreta correctamente, siempre existe la posibilidad de que algo se malinterprete y se aplique un cambio incorrecto. No es algo para tomar a la ligera cuando se trabaja con una base de datos real.
Estamos viviendo muchos cambios en la formas de trabajar y la IA es el punto central en estos cambios y para ello tenemos que tener mas que nunca los ojos abiertos y concentrarnos muy bien en lo que estamos haciendo, entender cada paso y no solo probar comandos sin leerlos. Ese es mi consejo para lo que aprendimos hoy. 🙂
Será hasta el próximo post. 🙂
