Aprende el API IndexedDB de HTML5
5.0 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
102 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende el API IndexedDB de HTML5 to your Wishlist.

Add to Wishlist

Aprende el API IndexedDB de HTML5

La especificación para el manejo de base de datos en navegadores.
5.0 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
102 students enrolled
Last updated 3/2017
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • 4 Articles
  • 22 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • El alumno se familiarizará con los principales términos en el manejo del API IndexedDB
  • El alumno realizará una sencilla aplicación de Altas, Bajas y Cambios con IndexedDB
  • El alumnos aprenderá a manejar las versiones, añadir índices entre otras actividades con IndexedDB
  • El alumno desarrollará una aplicación de control de actividades con IndexedDB
View Curriculum
Requirements
  • Conocimientos básicos en HTML, CSS y JavaScript
  • Conocimientos básicos de desarrollo web
Description

En 2010 se dejó de dar soporte a WebSQL (SQLite en navegadores). La especificación de HTML5 para el manejo de base de datos en navegadores es IndexedDB. Tanto WebSQL como IndexedDB son soportados para dispositivos móviles. También se puede utilizar LocalStorage y SessionStorage, pero son más bien para almacenar cadenas. Esta base de datos, que no utiliza el lenguaje SQL, nos permite de manera potente, el manejo de datos de manera sencilla.

Los objetivos de este curso son:

  • El alumno se familiarizará con los principales términos en el manejo del API IndexedDB
  • El alumno realizará una sencilla aplicación de Altas, Bajas y Cambios con IndexedDB
  • El alumnos aprenderá a manejar las versiones, añadir índices entre otras actividades con IndexedDB
  • El alumno desarrollará una aplicación de control de actividades con IndexedDB

Revisaremos términos que no se manejan en las bases tradicionales como MySQL, donde desarrollamos nuestras estructuras con tablas. En IndexDB utilizaremos almacenes de objetos, donde podemos guardar estructuras de datos diferentes. También utilizaremos cursores para almacenar la lectura de los mismos.

Este curso no es un curso básico. Usted debe tener bases en las herramientas HTML, CSS3 y JavaScript. Este curso está dirigido a desarrolladores web que desee crear aplicaciones con el manejo de base de datos. Los presentes ejercicios son fácilmente exportables a dispositivos móviles con herramientas como Phonegap.








Who is the target audience?
  • Desarrolladores web con conocimientos básicos en HTML5, CSS y JavaScript
Students Who Viewed This Course Also Viewed
Curriculum For This Course
47 Lectures
05:01:55
+
Bienvenida al curso del API IndexedDB de HTML5
1 Lecture 04:05
+
Introducción al API IndexedDB de HTML5
8 Lectures 37:14
  • En 2010 se dejó de dar soporte a WebSQL (SQLite en navegadores).

  • La especificación para el manejo de base de datos en navegadores es IndexedDB.

  • Tanto WebSQL como IndexedDB son soportados para dispositivos móviles.

  • También se puede utilizar LocalStorage y SessionStorage, peo son más bien para almacenar cadena.
Preview 08:18

  • Almacén de objetos: Es el lugar donde los objetos quedan en forma persistente. Su nombre de ser único y válido en JavaScript.
  • Los objetos son almacenados en forma ordenada en base a las llaves.
  • Un almacén de objetos puede tener un generador de llaves y una ruta de llaves.
  • Si el almacén de objetos utiliza una ruta de llaves, éstas pueden ser internas o externas.
Preview 05:26

Toda base de datos tiene una versión, iniciando con la versión 1.

Sólo se puede tener una versión. Las versiones son manejadas en un número entero, no fracciones (1.0.0 no es aceptado).

Si se desea crear otra versión, se realiza al abrir la base de datos.

Al abrir una base de datos se disparan tres eventos:

  • Un evento si la apertura fue exitosa (success)

  • Un evento si la apertura fue erronea (error)

  • Un evento si hay un cambio de versión  (upgradeneeded).

El único momento cuando se puede actualizar o modificar el esquema de la base de datos, es en el evento upgradeneeded.

Preview 07:30

  • Una transacción es un conjunto determinado de operaciones de acceso y modificación de datos sobre una base de datos.

  • Cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.

  • Los tres modos de transacción son: readwrite, readonly y versionchange.

  • La única manera de crear y borrar almacenes de objetos es usar una transacción versionchange.

  • Una solicitud (request) es una operación por medio de la cual se lee o se escribe en una base de datos.

  • Toda solicitud representa una y solo una operación de lectura o escritura.

  • Se pueden escribir en forma independiente o unidas por medio de un punto.

Las transacciones dentro de la base de datos IndexedDB
05:24

  • Un índice es un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado.

  • El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado.

  • Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado.

  • Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

  • Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

Los índices en la base de datos IndexedDB
02:41

  • La llave es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos.

  • El almacén de objetos puede derivar una llave desde uno de tres orígenes:

    • un generador de llaves (autoIncrement),

    • una ruta de llave (keyPath) y

    • un valor indicado de forma explícita.
El concepto de llaves en IndexedDB
04:24

  • Un cursor es un mecanismo para iterar a través de múltiples registros con un rango de llaves.

  • El cursor tiene un origen que indica que índice o almacén de datos está iterando.

  • El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro.

  • Un rango de llaves es un intervalo continuo sobre algún tipo de datos utilizado para las llaves.

  • Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves.

  • Los rangos pueden limitarse o filtrarse con umbrales o rangos inferiores y superiores.
El manejo de los cursores en IndexedDB
03:29

En esta clase encontrarás los recursos de la sección en los recursos anexos

Apuntes de la primera sección
00:02
+
Una aplicación básica de ABC con IndexedDB
12 Lectures 01:26:13
  • Los pasos básicos para trabajar con IndexedDB son los siguientes:

    • Validar el navegador.

    • Abre una base de datos.

    • Crea un almacén de objetos en la base de datos.

    • Inicia una transacción y hace una petición (request) que hace alguna operación de la base de datos, tal como añadir o recuperar datos.

    • Espere a que se complete la operación por el listener de la clase correcta de eventos DOM .

    • Hace algo con el resultado (el cual puede ser encontrado en el objeto de request).

Preview 04:57

  • Algunos navegadores aún utilizan el prefijo del fabricante para manejar IndexedDB.

  • Estas versiones antiguas por lo general aún tienen buggs, por lo que se recomienda mejor no soportarlas

La validación de IndexedDB en los navegadores
08:02

  • Podemos generar una llave por medio de un generador de llaves (autoincrement) o un camino de llaves (keyPath).

  • Sin keyPath y sin  autoincrement: El control lo tiene el usuario, por ejemplo, las claves naturales, como matrícula del estudiantes, placas de un auto, número de empleado, etc.

  • Con keyPath sin autoincrement: Solo se pueden almacenar objetos JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de acceso de clave.

  • Con autoincrement, sin keypath: Este almacén de objetos puede contener cualquier tipo de valor. La clave se genera automáticamente, o puede proporcionar un argumento de clave independiente si desea utilizar una clave específica natural, como la matrícula del estudiante.

  • Con autoincrement y con keypath: Este “almacén de objetos” sólo puede contener objetos JavaScript. Normalmente se genera una clave y el valor de la clave generada se almacena en el objeto en una propiedad con el mismo nombre que la ruta de acceso de clave. Sin embargo, si una propiedad ya existe, el valor de esa propiedad se utiliza como clave en lugar de generar una nueva clave.

La apertura de la base de datos IndexedDB
10:23

  • En el evento onupgradeneeded no solo podemos modificar la estructura de la base de datos, también podemos añadir, modificar y borrar objetos, así como crear o eliminar índices.

  • Con el método createObjectStore() creamos los almacenes de datos pasando dos parámetros: el nombre y las opciones de las llaves.

  • Este último parámetro es opcional.

  • Las transacciones pueden ser:

    • readwrite

    • readonly

    • versionchange

Crear un almacén de objetos u objectStore
07:24

  • El resultado de una solicitud generada a partir de una llamada add () es la clave del valor que se agregó.

  • Tenga en cuenta que la función add () requiere que ningún objeto ya esté en la base de datos con la misma clave.

  • Si está intentando modificar una entrada existente, o no le importa si ya existe, puede usar la función put ().

Crear la transacción y la validación de datos
08:10

  • El resultado de una solicitud generada a partir de una llamada add () es la clave del valor que se agregó.

  • Tenga en cuenta que la función add () requiere que ningún objeto ya esté en la base de datos con la misma clave.

  • Si está intentando modificar una entrada existente, o no le importa si ya existe, puede usar la función put ().

Añadir un objeto a la base de datos
08:53

  • La función openCursor() toma varios argumentos.

  • En primer lugar, puede limitar el rango de elementos que se recuperan utilizando un objeto de rango de clave.

  • En segundo lugar, puede especificar la dirección que desea iterar.

  • En el ejemplo anterior, estamos iterando sobre todos los objetos en orden ascendente.

  • Si quieres seguir “barriendo” el cursor, entonces tienes que llamar al método continue () en el cursor.

  • Cuando haya llegado al final de los datos (o si no hay entradas que coincidan con su solicitud openCursor ()) todavía obtiene una devolución de llamada de éxito, pero la propiedad de resultado es indefinida.

  • Un patrón común con los cursores es recuperar todos los objetos en un almacén de objetos y agregarlos a un arreglo, como esto:

Desplegar la información con un cursor, primera parte
07:41

  • La función openCursor() toma varios argumentos.

  • En primer lugar, puede limitar el rango de elementos que se recuperan utilizando un objeto de rango de clave.

  • En segundo lugar, puede especificar la dirección que desea iterar.

  • En el ejemplo anterior, estamos iterando sobre todos los objetos en orden ascendente.

  • Si quieres seguir “barriendo” el cursor, entonces tienes que llamar al método continue () en el cursor.

  • Cuando haya llegado al final de los datos (o si no hay entradas que coincidan con su solicitud openCursor ()) todavía obtiene una devolución de llamada de éxito, pero la propiedad de resultado es indefinida.

  • Un patrón común con los cursores es recuperar todos los objetos en un almacén de objetos y agregarlos a un arreglo, como esto:

Desplegar la información con un cursor, segunda parte
10:01

Eliminar datos es muy similar a los procesos que hemos revisado:

Borrar un objeto del almacén en IndexedDB
08:18

Podemos leer un solo objeto de la base de datos por medio del método get(), anexado a una transacción.

Leer un objeto para modificarlo en IndexedDB
08:58

Por medio del método put() podemos guardar un objeto, si este no existe, o modificarlo, si es que este ya existe.

Modificar un objeto en una base de datos IndexedDB
03:24

En esta clase encontrará los apuntes de la segunda sección

Apuntes de la segunda sección
00:02
+
Afinar nuestra aplicación desarrollada con IndexedDB
10 Lectures 01:05:09
  • Un índice le permite buscar los valores almacenados en un almacén de objetos utilizando el valor de una propiedad del objeto almacenado en lugar de la clave del objeto.

  • Los índices tienen la capacidad de imponer restricciones simples en los datos almacenados.

  • Al establecer el indicador único al crear el índice, el índice asegura que no se almacenen dos objetos con ambos que tengan el mismo valor para la ruta de clave del índice.

  • Crear un índice:

    • objectStore.createIndex("autor", "autor", { unique: false });

    • objectStore.createIndex("titulo", "titulo", { unique: true });

Preview 04:57

Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.

Tenemos los siguientes métodos:

  • only: lee una llave específica.

  • lowerBound: lee de la llave específica hacia abajo.

  • upperBound: lee de la llave específica hacia arriba

  • bound: lee un rango de llaves, entre llave inicial y la llave final.

Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.

Controlar la versión de la base de datos en IndexedDB
05:56

Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.

Tenemos los siguientes métodos:

  • only: lee una llave específica.

  • lowerBound: lee de la llave específica hacia abajo.

  • upperBound: lee de la llave específica hacia arriba

  • bound: lee un rango de llaves, entre llave inicial y la llave final.

Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.

El objeto IDBKeyRange para seleccionar un rango de objetos
10:17

Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.

Tenemos los siguientes métodos:

  • only: lee una llave específica.

  • lowerBound: lee de la llave específica hacia abajo.

  • upperBound: lee de la llave específica hacia arriba

  • bound: lee un rango de llaves, entre llave inicial y la llave final.

Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.

El objeto IDBKeyRange, segunda parte
09:50

Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.

Tenemos los siguientes métodos:

  • only: lee una llave específica.

  • lowerBound: lee de la llave específica hacia abajo.

  • upperBound: lee de la llave específica hacia arriba

  • bound: lee un rango de llaves, entre llave inicial y la llave final.

Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.

El objeto IDBKeyRange, tercera parte
10:47

  • Por medio del método clear() podemos eliminar todos los objetos del almacén.
  • No se hace automáticamente ningún respaldo.
  • No hay manera de “deshacer” esta operación.
  • Cuidado.
El manejo de los cursores e índices en IndexedDB
07:52

  • Por medio del método clear() podemos eliminar todos los objetos del almacén.
  • No se hace automáticamente ningún respaldo.
  • No hay manera de “deshacer” esta operación.
  • Cuidado.
El método clear() para limpiar los objetos del almacén
07:01

  • Por medio del método deleteDatabase() podemos eliminar los almacenes de datos .
  • No se efectúa un respaldo automático.
  • No hay forma de “deshacer” la operación.
  • Cuidado!!!
Borrar una base de datos con DeleteDatabase en IndexedDB
04:48

  • Cuando hay un cambio de versión de la base de datos, existe la posibilidad de que el usuario tenga varias pestañas o tabuladores en el mismo navegador, con lo cual puede haber problemas.
  • Podemos enviarle un mensaje al usuario con el evento.
Bloquear la base de datos en el cambio de versión en IndexedDB
03:39

En esta clase podrás encontrar los apuntes de la sección 3

Apuntes a la sección 3
00:02
+
Crear una aplicación de control de actividades con IndexedDB
14 Lectures 01:46:27

Por medio de una base de datos IndexedDB realizaremos un sencillo sistema de control de actividades.

Preview 04:52

En este video crearemos la base de datos y los manejadores de eventos relacionados.

Crear la base de datos de la aplicación de control de actividades
07:30

En este video crearemos el almacén de datos y un índice relacionado.

Crear los almacenes para la aplicación de control de actividades
05:10

Por medio de un objeto Date() actualizaremos los campos de la fecha y crearemos un campo de tipo timestamp.

Función para actualizar la fecha
08:11

En este video crearemos la rutina para insertar los objetos en la base de datos.

Añadir los objetos a la base de datos de la aplicación
09:29

Por medio de un cursor podemos leer todos los objetos de la base de datos para añadirlos a un vector o arreglo, previo a ser desplegados en una tabla.

Leer los objetos en un cursor
07:07

Una vez que tenemos las actividades en un arreglo, procederemos a calcular los tiempos transcurridos, sobre todo cuando añadimos, modificamos o borramos una actividad.

Algoritmo para recalcular los tiempos de las actividades
10:25

Ya que tenemos todos los tiempos transcurridos en milisegundos, tenemos que convertirlo en horas, minutos o segundos, que es un formato que es inteligible para los usuario.

Calcular el tiempo transcurrido entre las actividades
09:54

Una vez que contamos con los tiempos transcurridos en un formato inteligible para los usuarios, procedemos a desplegarlos en una tabla y mostrarlos en la pantalla.

Desplegar la información con un cursor
11:18

Una vez que contamos con los tiempos transcurridos en un formato inteligible para los usuarios, procedemos a desplegarlos en una tabla y mostrarlos en la pantalla. (segunda versión).

Desplegar los datos en una tabla
06:43

En esta clase procederemos a crear la rutina que lee el objeto relacionado con la acción y la desplegamos en las cajas de entrada para que el usuario pueda modificarlo.

La rutina para modificar una actividad
08:50

Una vez que el usuario ha modificado los datos, deberemos guardar los cambios en la base de datos IndexedDB.

La rutina para actualizar los datos de un objeto modificado
04:43

En este video escribiremos la función para borrar el objeto seleccionado, previo a la confirmación del usuario.

Borrar un objeto del almacén en IndexedDB
05:49

La última rutina que escribiremos es borrar los almacenes de objetos, previa autorización del usuario ya que no hay forma de "deshacer" la operación.

Eliminar los registros de la base de datos en IndexedDB
06:26
+
Recursos del curso IndexedDB
2 Lectures 02:45

Con este video damos por concluido el curso de IndexedDB. Hasta pronto.

Despedida del curso API IndexedDB de HTML5
02:42

Ejercicios del curso IndexedDB
00:03
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
1,045 Reviews
13,087 Students
35 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.