🐘 Crear una Base de Datos

🧠 ¿Qué es una base de datos?

Una base de datos es un contenedor organizado donde se almacena información estructurada para poder ser consultada, modificada y gestionada de manera eficiente.

En PostgreSQL, una base de datos:

• Es una unidad lógica independiente
• Contiene tablas, vistas, funciones, índices, esquemas, etc.
• Puede tener sus propios usuarios y permisos

👉 Piensa en PostgreSQL como un servidor, y dentro de él puedes tener múltiples bases de datos, cada una con su propio contenido.

---

📦 ¿Cuántas bases de datos puedo tener?

En PostgreSQL puedes tener:

• ✅ Múltiples bases de datos dentro de un mismo servidor
• ✅ No hay un límite fijo “práctico”, depende de:
• Recursos del sistema (memoria, CPU, disco)
• Configuración del servidor

Ejemplo:

• ventas_db
• clientes_db
• inventario_db
• test_db

💡 En entornos reales, es común separar bases de datos por:

• Aplicación
• Ambiente (dev, test, prod)

---

🏷️ Reglas y buenas prácticas para nombrar bases de datos

PostgreSQL es bastante flexible, pero hay recomendaciones importantes:

✅ Permitido

• Letras (a-z, A-Z)
• Números (0-9)
• Guion bajo (_)

⚠️ Consideraciones

• No deben empezar con números (aunque técnicamente puede requerir comillas)
• Evita espacios (requieren comillas y complican el uso)
• Evita caracteres especiales (@, #, -, etc.)

✅ Buenas prácticas

• Usar minúsculas
• Separar palabras con _
• Usar nombres descriptivos

✔️ Ejemplos correctos:

mi_base_datos

blog_app

ventas_2026

❌ Ejemplos a evitar:

"Mi Base"     -- requiere comillas siempre

123db         -- poco claro

base-datos    -- puede causar problemas

---

🛠️ Crear una base de datos en PostgreSQL

Hay varias formas de hacerlo. Aquí te muestro las más comunes.

---

🔹 Opción 1: Usando SQL (CREATE DATABASE)

Este es el método más directo.

CREATE DATABASE nombre_base_datos;

✅ Ejemplo:

CREATE DATABASE blog_postgres;

---

🔹 Opción 2: Con parámetros adicionales

Puedes personalizar la base de datos:

CREATE DATABASE blog_postgres

WITH

OWNER = postgres

ENCODING = 'UTF8'

LC_COLLATE = 'en_US.UTF-8'

LC_CTYPE = 'en_US.UTF-8'

TEMPLATE = template0;

🔎 Explicación rápida:

• OWNER: dueño de la base de datos
• ENCODING: codificación (UTF8 es lo recomendado)
• LC_COLLATE / LC_CTYPE: reglas de ordenamiento y clasificación
• TEMPLATE: base utilizada como plantilla

---

🔹 Opción 3: Desde la consola (psql)

Primero accedes a PostgreSQL:

psql -U postgres

Luego ejecutas:

CREATE DATABASE mi_app;

---

🔹 Opción 4: Usando comando CLI (createdb)

PostgreSQL incluye utilidades de línea de comandos:

createdb mi_base_datos

✅ Ejemplo:

createdb inventario_db

---

🔍 Ver bases de datos existentes

Dentro de psql, puedes listar todas las bases:

\l

o:

SELECT datname FROM pg_database;

---

🔄 Conectarse a una base de datos

Una vez creada, puedes conectarte así:

\c nombre_base_datos

✅ Ejemplo:

\c blog_postgres

---

🗑️ Eliminar una base de datos

Si necesitas borrarla:

DROP DATABASE nombre_base_datos;

⚠️ Ejemplo:

DROP DATABASE blog_postgres;

🚨 Importante:

• No puedes eliminar una base de datos si estás conectado a ella
• Esta acción es irreversible

---

🧩 Conceptos importantes relacionados

🔹 Base template1

Cada base nueva se crea a partir de una plantilla (template).

• template1: plantilla por defecto
• template0: plantilla “limpia” usada para configuraciones especiales

---

🔹 Base postgres

Es la base creada por defecto para administración. No suele usarse para aplicaciones.

---

💡 Buenas prácticas adicionales

• Usa nombres consistentes en todos tus ambientes:
• app_dev
• app_test
• app_prod
• Evita meter múltiples aplicaciones en una sola base (mejor separar)
• Define ownership desde el inicio (usuarios correctos)

---

✅ Conclusión

Crear una base de datos en PostgreSQL es sencillo, pero entender su estructura y buenas prácticas desde el inicio te ayudará a construir sistemas más organizados, escalables y mantenibles.

 

🐘 Introducción a PostgreSQL

¿Qué es PostgreSQL?

PostgreSQL (también conocido como Postgres) es un sistema de gestión de bases de datos relacional (RDBMS) de código abierto, potente, robusto y altamente extensible.

A diferencia de otras bases de datos, PostgreSQL no solo cumple con el estándar SQL, sino que también lo extiende con funcionalidades avanzadas que lo hacen adecuado tanto para aplicaciones simples como para sistemas complejos de nivel empresarial.

Algunas características destacadas:

• ✅ Código abierto y gratuito
• ✅ Cumple con el estándar SQL (muy cercano al estándar ANSI)
• ✅ Soporta transacciones ACID (Atomicidad, Consistencia, Aislamiento, Durabilidad)
• ✅ Extensible (puedes crear tus propios tipos de datos, funciones, operadores, etc.)
• ✅ Soporte para datos JSON y consultas híbridas (relacional + NoSQL)
• ✅ Alta confiabilidad y estabilidad en producción

👉 En pocas palabras: PostgreSQL es una base de datos flexible, confiable y muy potente, ideal para desarrolladores modernos.

---

📜 Un poco de historia

PostgreSQL tiene una historia interesante que lo diferencia de muchas otras bases de datos:

• 1986: El proyecto comienza en la Universidad de California en Berkeley, liderado por Michael Stonebraker, bajo el nombre POSTGRES.
• Década de 1990: Se añade soporte para SQL, y el proyecto pasa a llamarse PostgreSQL.
• 1996: Se libera oficialmente como software de código abierto.
• Desde entonces, ha sido mantenido por una comunidad global muy activa.

Uno de los objetivos iniciales del proyecto era superar las limitaciones de las bases de datos tradicionales de la época, introduciendo conceptos como:

• Tipos de datos avanzados
• Reglas (rules)
• Herencia de tablas
• Extensibilidad

Esto explica por qué PostgreSQL hoy en día es considerado uno de los motores más avanzados.

---

🧠 ¿Por qué es tan popular?

PostgreSQL ha ganado mucha popularidad en los últimos años, especialmente en arquitecturas modernas y entornos cloud. Algunas razones:

1. 🔧 Extensibilidad

Puedes personalizar PostgreSQL como quieras:

• Crear funciones en varios lenguajes (PL/pgSQL, Python, etc.)
• Definir tipos de datos propios
• Instalar extensiones (ej: PostGIS para geolocalización)

2. 📊 Soporte para múltiples tipos de datos

Además de tipos clásicos (INT, VARCHAR, DATE), también soporta:

• JSON / JSONB
• Arrays
• UUID
• XML
• Datos geoespaciales (con extensiones)

3. 🔒 Confiabilidad y consistencia

PostgreSQL es famoso por su integridad de datos:

• Transacciones completas (ACID)
• Control de concurrencia (MVCC)
• Recuperación ante fallos

4. 🌐 Comunidad y ecosistema

Cuenta con una comunidad muy activa y documentación oficial excelente.

---

🔄 Conceptos clave básicos

Antes de seguir con el tutorial, conviene entender algunos conceptos esenciales:

Concepto	Descripción
Base de datos	Contenedor principal de la información
Tabla	Estructura donde se almacenan datos en filas y columnas
Fila (row)	Registro individual
Columna	Atributo o campo
Schema	Organización lógica dentro de una base de datos
Índice	Estructura que mejora la velocidad de consultas
Consulta (SQL)	Instrucción para interactuar con la base de datos

---

🆚 PostgreSQL vs otras bases de datos

Comparación rápida:

Motor	Característica destacada
PostgreSQL	Más avanzado y extensible
MySQL	Más simple y muy usado en web tradicional
SQLite	Ligero, embebido
SQL Server	Ecosistema Microsoft

👉 PostgreSQL suele ser preferido cuando necesitas:

• Integridad de datos estricta
• Consultas complejas
• Escalabilidad y robustez

---

🚀 ¿Para qué se usa PostgreSQL?

Algunos casos comunes:

• Aplicaciones web (backend)
• Sistemas financieros
• Analítica de datos
• Microservicios
• Aplicaciones geoespaciales (PostGIS)
• APIs modernas con datos JSON

---

✅ Conclusión

PostgreSQL no es solo “otra base de datos”, sino una plataforma completa para gestionar datos de forma confiable y flexible. Su historia académica, su enfoque en estándares y su gran extensibilidad lo convierten en una herramienta clave para cualquier desarrollador. 

AngularJS | Lista dinámica para Agregar, Editar o Eliminar elementos

En este ejemplo usaremos un único input para agregar y editar elementos de la lista; los botones cambian según el modo (agregar o edición).

---

1. Estructura básica de HTML

Definimos el esquema inicial del documento.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con un solo input</title>
</head>
<body>
    <div>
        <!-- contenido de la app irá aquí -->
    </div>
</body>
</html>

---

2. Agregar AngularJS

Incluimos la librería AngularJS desde un CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
        integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

---

3. Definir la aplicación y el controlador

Inicializamos la aplicación Angular con ng-app="myApp" y vinculamos el controlador principal con ng-controller="myController". 

<html ng-app="myApp">
<body ng-controller="myController">

---

4. Input y botones dinámicos (Agregar / Actualizar / Cancelar)

Colocamos un input enlazado con ng-model="nuevaFruta" para capturar el texto. Los botones cambian según modoEdicion:

• Si no estamos en edición (modoEdicion === false) mostramos Agregar.

• Si estamos editando (modoEdicion === true) mostramos Actualizar y Cancelar.
  Esto permite reutilizar el mismo input para añadir y para editar.

<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-if="!modoEdicion" ng-click="agregarFruta()">Agregar</button>
<button ng-if="modoEdicion" ng-click="actualizarFruta()">Actualizar</button>
<button ng-if="modoEdicion" ng-click="cancelarEdicion()">Cancelar</button>

---

5. Lista con opciones de editar y eliminar

Mostramos la lista con ng-repeat. Cada elemento tiene:

• El texto de la fruta.

• Un botón Editar que carga el valor al input principal y pone la app en modo edición.

• Un botón Eliminar que remueve el elemento del array.
  Se usa track by $index para evitar problemas cuando hay elementos con el mismo valor.

<ul>
    <li ng-repeat="fruta in frutas track by $index">
        {{ fruta }}
        <button ng-click="editarFruta($index)">Editar</button>
        <button ng-click="eliminarFruta($index)">Eliminar</button>
    </li>
</ul>

---

6. Código AngularJS

Definimos el módulo y el controlador. Se inicializan las variables de estado (frutas, nuevaFruta, modoEdicion, indiceEdicion) y las funciones:

• agregarFruta() → valida y agrega al array, limpia el input.

• eliminarFruta(index) → remueve el elemento; si se estaba editando ese mismo elemento cancela la edición.

• editarFruta(index) → carga el elemento en el input y activa el modo edición guardando el índice.

• actualizarFruta() → valida y reemplaza el elemento en su índice, luego cancela la edición.

• cancelarEdicion() → restaura el estado a modo agregar.

<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        // Lista inicial
        $scope.frutas = ["Manzana", "Naranja", "Plátano"];

        // Modelo del input
        $scope.nuevaFruta = "";

        // Estado de edición
        $scope.modoEdicion = false;
        $scope.indiceEdicion = -1;

        // Agregar fruta: valida y añade al array
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) {
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = ""; // limpiar input
            }
        };

        // Eliminar fruta: quita del array y cancela edición si aplica
        $scope.eliminarFruta = function (index) {
            $scope.frutas.splice(index, 1);
            if ($scope.indiceEdicion === index) {
                $scope.cancelarEdicion();
            } else if ($scope.indiceEdicion > index) {
                $scope.indiceEdicion--;
            }
        };

        // Editar fruta: carga el valor en el input y activa modo edición
        $scope.editarFruta = function (index) {
            $scope.nuevaFruta = $scope.frutas[index];
            $scope.indiceEdicion = index;
            $scope.modoEdicion = true;
        };

        // Actualizar fruta: reemplaza el valor en la posición guardada
        $scope.actualizarFruta = function () {
            if ($scope.nuevaFruta && $scope.indiceEdicion > -1) {
                $scope.frutas[$scope.indiceEdicion] = $scope.nuevaFruta;
                $scope.cancelarEdicion();
            }
        };

        // Cancelar edición: limpia el input y restaura el modo agregar
        $scope.cancelarEdicion = function () {
            $scope.nuevaFruta = "";
            $scope.indiceEdicion = -1;
            $scope.modoEdicion = false;
        };
    });
</script>

---

7. Código completo

Integración de todo en una sola página:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con un solo input</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
            integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body ng-controller="myController">

    <div>
        <!-- Input principal: se usa para agregar y para editar -->
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">

        <!-- Botones que cambian según modoEdicion -->
        <button ng-if="!modoEdicion" ng-click="agregarFruta()">Agregar</button>
        <button ng-if="modoEdicion" ng-click="actualizarFruta()">Actualizar</button>
        <button ng-if="modoEdicion" ng-click="cancelarEdicion()">Cancelar</button>

        <!-- Lista con editar y eliminar -->
        <ul>
            <li ng-repeat="fruta in frutas track by $index">
                {{ fruta }}
                <button ng-click="editarFruta($index)">Editar</button>
                <button ng-click="eliminarFruta($index)">Eliminar</button>
            </li>
        </ul>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];
            $scope.nuevaFruta = "";
            $scope.modoEdicion = false;
            $scope.indiceEdicion = -1;

            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };

            $scope.eliminarFruta = function (index) {
                $scope.frutas.splice(index, 1);
                if ($scope.indiceEdicion === index) {
                    $scope.cancelarEdicion();
                } else if ($scope.indiceEdicion > index) {
                    $scope.indiceEdicion--;
                }
            };

            $scope.editarFruta = function (index) {
                $scope.nuevaFruta = $scope.frutas[index];
                $scope.indiceEdicion = index;
                $scope.modoEdicion = true;
            };

            $scope.actualizarFruta = function () {
                if ($scope.nuevaFruta && $scope.indiceEdicion > -1) {
                    $scope.frutas[$scope.indiceEdicion] = $scope.nuevaFruta;
                    $scope.cancelarEdicion();
                }
            };

            $scope.cancelarEdicion = function () {
                $scope.nuevaFruta = "";
                $scope.indiceEdicion = -1;
                $scope.modoEdicion = false;
            };
        });
    </script>

</body>
</html>

AngularJS | Lista dinámica con opción de eliminar elementos

Lista dinámica con opción de eliminar elementos

En este ejemplo aprenderás cómo agregar y eliminar elementos de una lista utilizando AngularJS y ng-repeat.

---

1. Estructura básica de HTML

Comenzamos con la estructura inicial de la página:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con ng-repeat</title>
</head>
<body>
    <div>
    </div>
</body>
</html>

---

2. Agregar AngularJS

Incluimos la referencia a la librería AngularJS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
        integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

---

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller para inicializar nuestra aplicación y enlazarla al controlador:

<html ng-app="myApp">
<body ng-controller="myController">

---

4. Input y botón para agregar frutas

Ahora creamos una caja de texto enlazada al modelo nuevaFruta y un botón que ejecuta el método agregarFruta():

<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-click="agregarFruta()">Agregar</button>

---

5. Lista con opción de eliminar

Mostramos los elementos usando ng-repeat. Cada fruta tiene un botón para eliminarla mediante la función eliminarFruta($index):

<ul>
    <li ng-repeat="fruta in frutas">
        {{ fruta }}
        <button ng-click="eliminarFruta($index)">Eliminar</button>
    </li>
</ul>

---

6. Código AngularJS

Definimos el módulo, el controlador y las funciones necesarias:

<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        // Lista inicial
        $scope.frutas = ["Manzana", "Naranja", "Plátano"];

        // Función para agregar frutas
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) {
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = "";
            }
        };

        // Función para eliminar frutas
        $scope.eliminarFruta = function (index) {
            $scope.frutas.splice(index, 1);
        };
    });
</script>

---

7. Código completo

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con ng-repeat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
            integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body ng-controller="myController">

    <div>
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
        <button ng-click="agregarFruta()">Agregar</button>

        <ul>
            <li ng-repeat="fruta in frutas">
                {{ fruta }}
                <button ng-click="eliminarFruta($index)">Eliminar</button>
            </li>
        </ul>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            // Lista inicial
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];

            // Función para agregar frutas
            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };

            // Función para eliminar frutas
            $scope.eliminarFruta = function (index) {
                $scope.frutas.splice(index, 1);
            };
        });
    </script>

</body>
</html>

AngularJS | Agregar elementos a una lista con ng-repeat

En este ejemplo veremos cómo agregar elementos dinámicamente a una lista usando AngularJS y ng-repeat.

---

1. Estructura básica de HTML

Comenzamos con un documento HTML simple:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Agregar elementos en tiempo real con ng-repeat</title>
</head>
<body>
    <div>
    </div>
</body>
</html>

---

2. Agregar AngularJS

Incluimos la librería AngularJS en la sección <head>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
        integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

---

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller:

<html ng-app="myApp">
<body ng-controller="myController">

---

4. Caja de texto y botón para agregar elementos

Creamos un input vinculado a la variable nuevaFruta y un botón que ejecuta la función agregarFruta():

<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-click="agregarFruta()">Agregar</button>

---

5. Lista con ng-repeat

Mostramos la lista de frutas, incluyendo algunas definidas por defecto, usando ng-repeat:

<ul>
    <li ng-repeat="fruta in frutas">{{ fruta }}</li>
</ul>

Cómo funciona:

• fruta in frutas recorre cada elemento del array $scope.frutas.

• {{ fruta }} muestra el valor de cada elemento en la vista.

• Cada vez que agregamos un nuevo elemento, la lista se actualiza automáticamente.

---

6. Código AngularJS

Definimos el módulo y el controlador, inicializamos la lista y creamos la función para agregar elementos:

<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        // Lista inicial
        $scope.frutas = ["Manzana", "Naranja", "Plátano"];

        // Función para agregar frutas
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) { // Validamos que no esté vacío
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = ""; // Limpiamos el input
            }
        };
    });
</script>

---

7. Código completo

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Agregar elementos en tiempo real con ng-repeat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
            integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body ng-controller="myController">

    <div>
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
        <button ng-click="agregarFruta()">Agregar</button>

        <ul>
            <li ng-repeat="fruta in frutas">{{ fruta }}</li>
        </ul>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            // Lista inicial
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];

            // Función para agregar frutas
            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };
        });
    </script>

</body>
</html>

---

✅ Este ejemplo muestra cómo crear una lista interactiva en AngularJS que se actualiza en tiempo real al agregar elementos con un input y un botón.