UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS

COORDINACIÓN DE COMPUTACIÓN Y MÓVILES

Ciclo II Desarrollo de Aplicaciones con Web Frameworks

Guía de Laboratorio No. 9 Primefaces

I. OBJETIVOS.

Que el estudiante utilice controles avanzados de JSF y los disponibles de Primefaces

Que el estudiante cree aplicaciones con JSF, JPA y EJB. Que el estudiante utilice JPQL para realizar consultas simples y con parámetros.

II. INTRODUCCION

PrimeFaces http://www.primefaces.org/ es una librería de componentes para JavaServer Faces (JSF) de código abierto que cuenta con un conjunto de componentes enriquecidos que facilitan la creación de las aplicaciones web. Primefaces está bajo la licencia de Apache License V2. Una de las ventajas de utilizar Primefaces, es que permite la integración con otros componentes como por ejemplo RichFaces o Bootsfaces.

Propiedades:

• Conjunto de componentes ricos (Editor de HTML, autocompletar, cartas, gráficas o paneles, entre otros).

• Soporte de ajax con despliegue parcial, lo que permite controlar qué componentes de la página actual se actualizarán y cuáles no.

• Muchos temas prediseñados.

• Componente para desarrollar aplicaciones web para teléfonos móviles, especiales para iPhones, Palm, Android y teléfonos móviles Nokia.

Pros y contras: En cuanto a la experiencia de los usuarios finales los componentes de Primefaces son amigables al usuario además que cuentan con un diseño innovador. Pero en lo que respecta al programador, es que sus desarrolladores no respetan un principio básico del desarrollo de componentes: la compatibilidad hacia atrás, es decir, un componente de una nueva versión

de Primefaces por lo general no es compatible al 100% con una aplicación desarrollada con la versión previa a la misma Puede consultar las implementaciones y ejemplos de los controles en el showcase oficial:

http://primefaces.org/showcase/

III. PROCEDIMIENTO

Paso 1: Inicie netbeans y wampserver. Procure tener disponible el servidor Glassfish. Paso 2. Crear base de datos con el script que se le proporciona a continuación Esquema:

Script:

create database poo2_capacitaciones; use poo2_capacitaciones; create table empleado( cod_empleado varchar(20) primary key, nombre varchar(50), apellido varchar(50), telefono varchar(9)); create table categorias( id_categoria int auto_increment primary key,

descripcion varchar(100)); insert into categorias (descripcion) values ('Informatica'), ('Human Capital'),('Psicologia'),('Business'); create table capacitaciones( id_capacitacion int auto_increment primary key, id_categoria int, descripcion varchar(400), fecha date, constraint foreign key (id_categoria) references categorias(id_categoria) ); create table capacitacion_empleado( id_capacitacion_empleado int auto_increment primary key, id_capacitacion int, cod_empleado varchar(20), fecha_inscripcion TIMESTAMP default now(), constraint foreign key (id_capacitacion) references capacitaciones(id_capacitacion), constraint foreign key (cod_empleado) references empleado(cod_empleado) );

Paso 3: Crear un nuevo proyecto denominado Capacitaciones. Utilice el contenedor de aplicaciones Glassfish. Agregue el soporte de JSF 2.2. Paso 4: Crear EntityClases from Database de la manera acostumbrada. (En Netbeans seleccione Nuevo->Persistencia-> EntityClases from Database). Defina el paquete donde se almacenará los EntityClases con el nombre de sv.edu.udb.model

La Unidad de Persistencia debe llamarse CapacitacionesPU

Paso 5: Descargar Primefaces del sitio oficial. http://www.primefaces.org/downloads Debe seleccionar la versión Community (no es necesario registrarse en el sitio)

Agregarlo a las librerías del proyecto, la versión para ésta guía es la 6.2 Adicionalmente agregar las librerías de MySQL y Bootsfaces Incluir los recursos (imágenes). Deberán agregarse dentro de la carpeta Web Pages de Netbeans.

Paso 6: Vamos a crear los respectivos Facades que realizarán las operaciones básicas de un CRUD. En netbeans busque “Session Beans for Entity Classes”.

Seleccione las EntityClasses creadas previamente.

Establezca el paquete sv.edu.model.facade para guardar las clases.

Paso 7: Agregar la clase JSFUtil.java en el paquete sv.edu.udb.util. El objetivo de la clase es mostrar mensajes globales. package sv.edu.udb.util; import javax.faces.application.FacesMessage; import javax.faces.context.FacesContext; public class JSFUtil { public static void addGlobalErrorMessage(String message){ FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, message,"Error")); } public static void addGlobalMessage(String message){ FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, message,"Info")); } } Paso 8: A continuación vamos a modificar dos de los facades agregados, para incorporarles funciones adicionales: EmpleadoFacade.java

package sv.edu.udb.model.facade; import java.util.List; import javax.ejb.Stateless; import javax.persistence.EntityManager; import javax.persistence.PersistenceContext; import javax.persistence.Query; import sv.edu.udb.model.Empleado; @Stateless public class EmpleadoFacade extends AbstractFacade<Empleado> { @PersistenceContext(unitName = "CapacitacionesPU") private EntityManager em;

@Override protected EntityManager getEntityManager() { return em; } public EmpleadoFacade() { super(Empleado.class); } /* INICIO DE LAS MODIFICACIONES */ /** * Listado de empleados por Capacitacion * @param idCapacitacion * @return */ public List<Empleado> empleadoPorCapacitacion(int idCapacitacion){ Query query = em.createQuery("SELECT C.codEmpleado FROM CapacitacionEmpleado C where C.idCapacitacion.idCapacitacion = :idCapacitacion"); query.setParameter("idCapacitacion", idCapacitacion); return query.getResultList(); } /* FIN DE LAS MODIFICACIONES */ }

CapacitacionEmpleadoFacade.java

package sv.edu.udb.model.facade; import java.util.Date; import javax.ejb.Stateless; import javax.persistence.EntityManager; import javax.persistence.PersistenceContext; import javax.persistence.Query; import sv.edu.udb.model.CapacitacionEmpleado; import sv.edu.udb.model.Capacitaciones; import sv.edu.udb.model.Empleado; import sv.edu.udb.util.JSFUtil; @Stateless public class CapacitacionEmpleadoFacade extends AbstractFacade<CapacitacionEmpleado> { @PersistenceContext(unitName = "CapacitacionesPU") private EntityManager em;

@Override protected EntityManager getEntityManager() { return em; } public CapacitacionEmpleadoFacade() { super(CapacitacionEmpleado.class); } /* INICIO DE LAS MODIFICACIONES */ /** * Para agregar un listado de empleados a una capacitación. * Recibe Un listado de códigos de empleados * Verifica que previamente no haya sido ingresado en la capacitación * y lo inserta en la tabla capacitacion_empleado * @param codigosEmpleados * @param idCapacitacion */ public void agregarEmpleadosACapacitacion(String [] codigosEmpleados, int idCapacitacion){ for(String codigo:codigosEmpleados){ Query query = em.createQuery("SELECT count(CE) FROM CapacitacionEmpleado " + " CE where CE.codEmpleado.codEmpleado = :codEmpleado " + " and CE.idCapacitacion.idCapacitacion = :idCapacitacion"); query.setParameter("codEmpleado", codigo); query.setParameter("idCapacitacion", idCapacitacion); Long validacionEmpleadoInscrito = (Long) query.getSingleResult(); if(validacionEmpleadoInscrito > 0){ JSFUtil.addGlobalErrorMessage("El empleado ya ha sido registrado:" + codigo); continue; } Empleado empleado = new Empleado(); empleado.setCodEmpleado(codigo); Capacitaciones capacitacion = new Capacitaciones(); capacitacion.setIdCapacitacion(idCapacitacion); CapacitacionEmpleado capacitacionEmpleado = new CapacitacionEmpleado(); capacitacionEmpleado.setCodEmpleado(empleado); capacitacionEmpleado.setIdCapacitacion(capacitacion);

capacitacionEmpleado.setFechaInscripcion(new Date()); this.create(capacitacionEmpleado); } JSFUtil.addGlobalMessage("Empleados agregados al curso."); } /* FIN DE LAS MODIFICACIONES */ }

Esquema del proyecto visto desde Netbeans:

Paso 9: Crear el fichero dock.xhtml que contendrá los enlaces a los módulos de la aplicación. Debe encontrarse en la carpeta resources proporcionada por el docente.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui" xmlns:h="http://xmlns.jcp.org/jsf/html" > <h:form> <p:dock position="bottom"> <p:menuitem value="Home" icon="/resources/images/calendar.png" url="/faces/index.xhtml"/> <p:menuitem value="Empleado" icon="/resources/images/employee.png" url="/faces/empleado.xhtml"/> <p:menuitem value="Training" icon="/resources/images/training.png" url="/faces/training.xhtml"/> </p:dock> </h:form> </html>

Paso 10: Crear el ManagedBean denominado CapacitacionesMB.java

package sv.edu.udb.controller; import java.util.List; import javax.ejb.EJB; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import sv.edu.udb.model.Capacitaciones; import sv.edu.udb.model.Categorias; import sv.edu.udb.model.facade.CapacitacionesFacade; import sv.edu.udb.model.facade.CategoriasFacade; import sv.edu.udb.util.JSFUtil; @ManagedBean

@RequestScoped public class CapacitacionesMB { @EJB CapacitacionesFacade capacitacionesFacade; @EJB CategoriasFacade categoriasFacade; private Capacitaciones capacitaciones;//<--Gegenerar Setters y Getters private Categorias categorias;//<--No tiene setter y getter public CapacitacionesMB(){ capacitaciones = new Capacitaciones(); categorias = new Categorias(); capacitaciones.setIdCategoria(categorias); } public List<Categorias> getListaCategorias(){ return categoriasFacade.findAll(); } public List<Capacitaciones> getListaCapacitaciones(){ return capacitacionesFacade.findAll(); } public String guardarCapacitacion(){ capacitacionesFacade.create(capacitaciones); capacitaciones = new Capacitaciones(); capacitaciones.setIdCategoria(categorias); JSFUtil.addGlobalMessage("Capacitacion Agregada"); return ""; } public String modificarCapacitacion(){ capacitacionesFacade.edit(capacitaciones); return ""; } /** * @return the capacitaciones */ public Capacitaciones getCapacitaciones() { return capacitaciones; } /**

* @param capacitaciones the capacitaciones to set */ public void setCapacitaciones(Capacitaciones capacitaciones) { this.capacitaciones = capacitaciones; } }

Nota: Si al ejecutar el ejercicio tiene un mensaje parecido a este:

Deshabilite las validaciones (Not null, Size) en cada uno de los EntityClases:

Paso 11: Editar index.xhtml. Se encargará de agregar nuevas capacitaciones al sistema.

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:b="http://bootsfaces.net/ui"> <h:head> <title>Capacitaciones</title> </h:head> <h:body> <h:form> <b:commandButton value="Agregar" type="button" onclick="PF('agregar').show()" class="btn btn-success" style="margin: 10px" />

</h:form> <p:panel> <p:dialog header="Agregar" widgetVar="agregar" modal="true" width="60%"> <p:panelGrid columns="1" style="width: 50%; margin: auto;text-align: center"> <h:form id="capacitaciones_agregar"> <h:outputText value="Programar Capacitaciones" /> <p:panelGrid columns="2" style="text-align: left"> <h:outputText value="Capacitacion" /> <h:inputText value="#{capacitacionesMB.capacitaciones.descripcion}" required="true" requiredMessage="Nombre requerido" /> <h:outputText value="Categoria" /> <p:selectOneMenu value="#{capacitacionesMB.capacitaciones.idCategoria.idCategoria}" filter="true" filterMatchMode="startsWith" > <f:selectItems var="cat" value="#{capacitacionesMB.listaCategorias}" itemLabel="#{cat.descripcion}" itemValue="#{cat.idCategoria}" /> </p:selectOneMenu> <h:outputText value="Fecha" /> <p:calendar showOn="button" value="#{capacitacionesMB.capacitaciones.fecha}" required="true" requiredMessage="Fecha requerida" /> </p:panelGrid> <b:commandButton action="#{capacitacionesMB.guardarCapacitacion()}" value="Guardar"> <f:ajax execute="@form" render="capacitacion_table capacitaciones_agregar"/> </b:commandButton> <h:messages /> </h:form> </p:panelGrid> </p:dialog> <b:dataTable id="capacitacion_table" var="capacitacion" value="#{capacitacionesMB.listaCapacitaciones}" > <b:dataTableColumn label="ID" value="#{capacitacion.idCapacitacion}" /> <b:dataTableColumn label="Descripcion" value="#{capacitacion.descripcion}" /> <b:dataTableColumn label="Fecha" > <h:outputText value="#{capacitacion.fecha}"> <f:convertDateTime pattern="dd/MM/yyyy" /> </h:outputText> </b:dataTableColumn> <b:dataTableColumn label="Categoria" value="#{capacitacion.idCategoria.descripcion}" /> </b:dataTable>

</p:panel> <ui:include src="/resources/dock.xhtml" /> </h:body> </html>

La primera vista completa debe contener lo siguiente:

Paso 12: Mantenimiento de Empleados Crear el ManagedBean EmpleadosMB.java

package sv.edu.udb.controller; import java.util.List; import javax.ejb.EJB; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import sv.edu.udb.model.Empleado; import sv.edu.udb.model.facade.EmpleadoFacade; import sv.edu.udb.util.JSFUtil; @ManagedBean @RequestScoped public class EmpleadosMB { private Empleado empleado; @EJB EmpleadoFacade empleadoFacade;//Generar Setter y Getter public EmpleadosMB(){ empleado = new Empleado();

} public String guardarEmpleado(){ Empleado tmpEmpleado = empleadoFacade.find(empleado.getCodEmpleado()); if(tmpEmpleado != null){ JSFUtil.addGlobalErrorMessage("Codigo empleado duplicado"); }else{ empleadoFacade.create(getEmpleado()); empleado = new Empleado(); JSFUtil.addGlobalMessage("Empleado agregado exitosamente"); } return ""; } public List<Empleado> getEmpleadosList(){ return empleadoFacade.findAll(); } /** * @return the empleado */ public Empleado getEmpleado() { return empleado; } /** * @param empleado the empleado to set */ public void setEmpleado(Empleado empleado) { this.empleado = empleado; } }

Paso 13: Crear el xhtml denominado empleado.xhtml Éste archivo contendrá el formulario para agregar nuevos empleados.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:b="http://bootsfaces.net/ui"> <h:head> <title>Empleados</title> </h:head> <h:body> <h:form> <b:commandButton value="Agregar" type="button" onclick="PF('agregar').show()" class="btn btn-success" style="margin: 10px" /> </h:form> <p:panel> <p:dialog header="Agregar" widgetVar="agregar" modal="true" width="60%"> <h:form id="empleado_form"> <p:panelGrid columns="1" style="width: 50%; margin: auto; text-align: center"> <h:outputText value="Formulario de empleado" /> <p:panelGrid columns="2"> <h:outputText value="Codigo" /> <h:inputText value="#{empleadosMB.empleado.codEmpleado}" required="true" requiredMessage="Codigo requerido" /> <h:outputText value="Nombre" /> <h:inputText value="#{empleadosMB.empleado.nombre}" required="true" requiredMessage="Nombre requerido"/> <h:outputText value="Apellido"/> <h:inputText value="#{empleadosMB.empleado.apellido}" required="true" requiredMessage="Apellido requerido" /> <h:outputText value="Telefono"/> <h:inputText value="#{empleadosMB.empleado.telefono}" required="true" requiredMessage="Telefono Requerido" validatorMessage="Telefono Incorrecto. Sugerido: 2222-2345 " > <f:validateRegex pattern="^[2|7|6]{1}[0-9]{3}-[0-9]{4}" /> </h:inputText> </p:panelGrid> <b:commandButton action="#{empleadosMB.guardarEmpleado()}" value="Guardar" class="btn btn-success"> <f:ajax execute="@form" render="empleado_table empleado_form" /> </b:commandButton> <h:messages /> </p:panelGrid> </h:form> </p:dialog>

<b:dataTable id="empleado_table" var="empleado" value="#{empleadosMB.empleadosList}"> <b:dataTableColumn label="Cod. Empleado" value="#{empleado.codEmpleado}" /> <b:dataTableColumn label="Nombre" value="#{empleado.nombre}" /> <b:dataTableColumn label="Apellido" value="#{empleado.apellido}" /> <b:dataTableColumn label="Telefono" value="#{empleado.telefono}" /> </b:dataTable> </p:panel> <ui:include src="/resources/dock.xhtml" /> </h:body> </html>

La vista debe tener la siguiente apariencia:

Paso 14: Crear el ManagedBean TrainingMB.java

package sv.edu.udb.controller; import java.util.List; import javax.ejb.EJB; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import sv.edu.udb.model.Capacitaciones; import sv.edu.udb.model.Empleado; import sv.edu.udb.model.facade.CapacitacionEmpleadoFacade; import sv.edu.udb.model.facade.CapacitacionesFacade; import sv.edu.udb.model.facade.EmpleadoFacade; @ManagedBean @RequestScoped public class TrainingMB {

private String codigosEmpleadosSeleccionado[]; private Integer idCapacitacion = 0; @EJB CapacitacionesFacade capacitacionesFacade; @EJB CapacitacionEmpleadoFacade capacitacionEmpleadoFacade; @EJB EmpleadoFacade empleadoFacade; public List<Capacitaciones> getCapacitacionesList(){ return capacitacionesFacade.findAll(); } public List<Empleado> getListaEmpleadosPorCapacitacion(){ return empleadoFacade.empleadoPorCapacitacion(idCapacitacion); } public String registrarEmpleado(){

capacitacionEmpleadoFacade.agregarEmpleadosACapacitacion(codigosEmpleadosSeleccionado, idCapacitacion);

return ""; } public String[] getCodigosEmpleadosSeleccionado() { return codigosEmpleadosSeleccionado; } public void setCodigosEmpleadosSeleccionado(String[] codigosEmpleadosSeleccionado) { this.codigosEmpleadosSeleccionado = codigosEmpleadosSeleccionado; } /** * @return the idCapacitacion */ public Integer getIdCapacitacion() { return idCapacitacion; } /**

* @param idCapacitacion the idCapacitacion to set */ public void setIdCapacitacion(Integer idCapacitacion) { this.idCapacitacion = idCapacitacion; } }

Paso 15: Crear training.xhtml Éste contendrá un TabView que servirá para mantener 2 formularios en un Tab. El primero mostrará un listado de capacitaciones.

El segundo tab permitirá agregar empleados a las capacitaciones.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <title>Capacitaciones y Empleados</title> </h:head> <h:body> <h:form> <p:tabView>

<p:tab title="Mostrar Capacitaciones"> <p:carousel value="#{trainingMB.capacitacionesList}" headerText="Capacitaciones" var="lista" itemStyle="text-align:center" responsive="true"> <h:panelGrid style="align-items: center"> <h:outputText value="#{lista.descripcion}"/> <h:outputText value="#{lista.fecha}"> <f:convertDateTime pattern="dd/MM/yyyy" /> </h:outputText> <h:outputText value="#{lista.idCategoria.descripcion}"/> </h:panelGrid> </p:carousel> </p:tab> <p:tab title="Agendar a Empleados"> <p:selectOneMenu value="#{trainingMB.idCapacitacion}"> <f:selectItems var="lista" value="#{trainingMB.capacitacionesList}" itemLabel="#{lista.descripcion}" itemValue="#{lista.idCapacitacion}" /> </p:selectOneMenu> <h:panelGrid columns="5" id="checkboxDT" > <p:selectCheckboxMenu id="menu" value="#{trainingMB.codigosEmpleadosSeleccionado}" label="Empleados" filter="true" filterMatchMode="startsWith" panelStyle="width:250px"> <f:selectItems value="#{empleadosMB.empleadosList}" var="listaEmpleados" itemLabel="#{listaEmpleados.nombre} #{listaEmpleados.apellido}" itemValue="#{listaEmpleados.codEmpleado}" /> </p:selectCheckboxMenu> <p:commandButton update="detalle" icon="ui-icon-search" value="Ver agregados" oncomplete="PF('dialogTraining').show()" /> <p:commandButton icon="ui-icon-plus" action="#{trainingMB.registrarEmpleado()}" value="Agregar seleccionados" ajax="false" /> </h:panelGrid> <p:dialog header="Capacitaciones" widgetVar="dialogTraining" modal="true" showEffect="fade" hideEffect="fade" resizable="false">

<p:outputPanel id="detalle" style="text-align:center;"> <p:dataList value="#{trainingMB.listaEmpleadosPorCapacitacion}" var="listaEmpleados" type="unordered" itemType="none" rowsPerPageLabel="5" styleClass="paginated"> <f:facet name="header"> Lista de empleados para esta capacitación </f:facet> <h:outputText value="#{listaEmpleados.nombre} #{listaEmpleados.apellido}" /> </p:dataList> </p:outputPanel> </p:dialog> <h:messages /> </p:tab> </p:tabView> </h:form> <ui:include src="/resources/dock.xhtml" /> </h:body> </html>

IV. Ejercicios Complementarios

Utilizando PrimeFaces, BootsFaces y EJB, cree una aplicación que permita registrar los sitios de interés de su localidad. Debe registrar las siguientes categorías:

• ID • Nombre

Y registre:

1. Parques 2. Centros Comerciales 3. Bibliotecas 4. Museos 5. Reserva Natural 6. Río 7. Balneario 8. Otros que considere necesarios.

Posteriormente debe registrar los sitios con los siguiente atributos:

• Id • Categoría_ID

• Nombre • Dirección • Fotografía (La fotografía puede ser un enlace url disponible en línea) • Coordenadas (latitud y longitud)

Finalmente debe mostrar un detalle del sitio de interés y mostrar un mapa con gmap https://www.primefaces.org/showcase/ui/data/gmap/basic.xhtml Tome en cuenta que para esto debe de agregar las coordenadas al mapa a partir de la información de la base de datos. Ejemplo: <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </h:head> <h:body> <f:view contentType="text/html"> <h1>Google Map</h1> <p:gmap center="13.7159035,-89.1536987" zoom="15" type="HYBRID" style="width:600px;height:400px" /> </f:view> </h:body> </html>

Nota: Investigue cómo obtener la api key javascript para sus mapas.