buenas tardes, el mejor y unico tutorial q explica todo y es realmente funcional. me podrias explicar como hacer para capturar el mail del login, ya que necesito limitar ciertas celdas a determinados usuarios.
excelente videooo!!! con información de calidad, me gustaria que pudieras hacer un video desplegando la aplicacion en la nube y realizanco las configuraciones para ello
Hola Punto Json, qué buena información que gentilmente brindás, en esto soy un aprendíz y me ayudás mucho con este video. Voy a escribir a tu correo por unas consultas si podés me respondés. Me encanta esto. Felicitaciones por difundir estos temas. Gracias totales. Un abrazo desde Salta Argentina.
Uff tremendo video, justo lo que necesito. Estoy creando una app para llevar el inventario de la carpinteria en la que trabajo y me bancan que estudie a la vez y esto me viene perfecto. Ahora a enrroscarme para hacerlo andar en Angular y hacer el .put muchas gracias brodi!!!
De nada don Bata! Conectarlo con Angular es molesto porque no podés usar la librería de nodeJs y hay que hacerlo basado en este proyecto. Para hacer que las variables gapi y gsi (creo que uso las 2 en este video) estén disponibles, tenés que declarar variables globales con esos nombres, así typescript no se queja de usar variables que no declaraste en ningún lado (porque se crean cuando importás las librerías). Suerte con eso! Cualquier cosa preguntame por acá o en el canal de discord.
@@daniel_toro_programacion Si quisieras usar la librería de node en una SPA tendrías que publicar tu clave secreta. La librería de node está hecha para trabajar en backend donde el usuario no puede meterse, si metés eso en frontend comprometés no sólo la seguridad de tu api, sino que hasta te puede generar cargos en tu cuenta de Google ($). Tenés que usar alguna configuración que no sea 100% client-side para poder hacer una conexión de largo plazo con la Google API.
Google tiene DE TODO. Muchísimas apis para de todo. Pero ojo que tiene tanto que te puede marear, andá investigando cuando tengas las necesidades de hacerlo!
Hola, me acabo de encontrar con este canal, explicas muy bien, te felicito. Yo tengo tiempo trabajando con Google Sheet, y hasta hace poco solo habia logrado crear aplicativo solo con Google Apps Script, hace poco comencé a explorar lo de la API de Google Sheet, lo que no he podido hacer es usar una "cuenta de servicio" en vez del todo ese proceso de autorización, ya que me parece un poco invasivo otorgar permisos de "modificar todas tus hojas de calculo" cuando la verdad no lo necesito, ya que solo quiero que se modifique una hoja de calculo, supongamos de mi propiedad. Entonces por lo que leí, si la aplicación no requiere usar datos del usuario se puede usar una "cuenta de servicio", pero la verdad no he llegado a enteder como generar eso en código.
Buenas! Hace ya varios años lo hice a eso, de la siguiente manera, puede ser que sea levemente distinto : Creé un usuario desde la consola de Google que es un usuario de sistema, o un usuario qué tiene un usuario y un token de acceso. Después desde la hoja de cálculo que quiero usar ponía compartir y ponía con permisos de edición al usuario qué creé en el paso anterior. Después usaba el usuario y token para autenticarme y hacer cambios en ese sheet. Todo eso lo hice en su momento con python y al día de hoy sigo usando esas herramientas para mi trabajo por lo que sé que todavía el método funciona. Tendría únicamente qué ver como hacerlo desde js
Estaba buscando alguna option que me funcionase como base de datos de un proyecto para un cliente. Es la digitalization de su menu el cual pueda ser accedido mediante qr. Si bien ya esta todo construido. Buscaba una forma sencilla, practica y muy facil de usar al cliente para que se encargue de mantener actualizada su lista de precios y productos. Esto porque no quiero gastarme un gran back porque es algo muy "sencillo" Supongo que esto podria funcionarme y darle el acceso a la google sheet a mi cliente. Cuestiones de que el haga las modificaciones en el sheet y se actualize en el front. No se, si estoy en lo correcto. Cualquier sugerencia te lo agredeceria. Para el front use react asi que seguro avanzare con node.js
Totalmente de acuerdo, de igual manera te agradeceríamos demasiado que pudieras conectarlo con un sistema de compra y venta, con todo y el proceso de carrito de compra y venta final por medio de tarjeta o efectivo. Siempre conectando como base de datos a GoogleSheets y siendo el punto principal la AUTOMATIZACIÓN
Me acabo de enganchar con la buena onda del canal Calo, aprovecho y te consulto por una pista sobre un tema de Google apps Script, en Calendar, se puede asociar la ejecucion de una function creada, a momento de producirse el evento, porque si atraves de los disparadores o activadores reconoce los eventos de calendar Crear, modificar o eliminar el evento, pero no logro encontrar nada respecto al momento de llegado el momento, mas alla de la generacion propia de la notificacion del evento. Mil gracias por una pista. Te voy a estar siguiendo, 😜
Buenas! Mirá, estoy pensando tu problema y se me ocurre algo, pero no sé que tanto se amolda a tu problema específico. Por lo que leí acá developers.google.com/apps-script/guides/triggers?hl=es-419 parece que no hay un activador para "cuando un evento de calendario sucede", PERO hay para cuando se crea o se edita un evento. Por lo cual, estoy pensando que quizás tenés que tener un bot que cuado escucha el activacor de ON_EVENT_UPDATED para ver la fecha del evento y automatizar la ejecución de tu función para ese momento. Eso sí, tendrías que guardar en algún lugar el ID del evento por si el mismo se modifica o se borra, así borrás la automatización que dejaste planeada, lo cual no creo que lo puedas hacer con Google Scripts. Se me ocurre sino que para solucionar ese problema te tendrías que hacer una pequeña app en Node.js o con lo que te manejes que tenga guardados todos los eventos futuros y que ejecute lo que tengas que ejecutar, pero sin Google Scripts. ¿Me hice entender? Cualquier cosa preguntame!
Si! Es gratis hasta un límite de uso mensual, que es altísimo. No estoy seguro de que esto sea técnicamente Google cloud, creo que lo que ellos llaman cloud a los servidores virtuales (no estoy seguro).
Muchísimas gracias, si pudieras subir algún tutorial para poder conectar la base de datos de wordpress para que cada vez que realice un cambio en GoogleSheets se refleje en wordpress y viceversa te lo agradecería infinitamente 🙏🏼🥺
Buenas! La verdad es que no tengo demasiada idea de como hacer eso. Principalmente porque no escribo en PHP (el lenguaje en el cual se programa en wordpress). Sin embargo se me ocurren un par de maneras de encarar el problema si lo hacés a mano: 1) Hacer todo desde wordpress: Escribir en tu servidor PHP un script que cada X tiempo revise si hay algo nuevo en el sheets y lo agrega a la BD, y que cada vez que vos hagas un cambio desde wordpress que se agregue a sheets. 2) Hacer todo desde Sheets, para esto habría que usar Google App Scripts (que es casi javascript), en donde creás código para que cuando aprietes un botón se haga una sincronización con Wordpress. 3) Hacer un programa aparte, en el lenguaje que sepas, que monitoree el sheets y la BD de wordpress para revisar constantemente si hubo algún cambio y replicarlo en el otro lado. 4) Si querés que todo esté sincronizado a tiempo real, entonces necesitarías 2 scripts, uno en wordpress que actualice el sheets cuando hacés un cambio y uno en google sheets para que actualice el wordpress cuando hacés un cambio. Pero si no te molesta hacerlo con herramientas externas, el proceso es muchísimo más sencillo, se pueden hacer automatizaciones con Zapier o herramientas similares: zapier.com/apps/wordpress/integrations/google-sheets?gad=1&gclid=CjwKCAjw4ZWkBhA4EiwAVJXwqTDdBO4W3wiMF-2-9zO68k14fgOLhuR8gaGy-a7P_R76DEQkZ8-k8xoCW7kQAvD_BwE Espero que todo esto te sirva! Saludos!
@@puntojson muchísimas gracias, espero poder desarrollarlo y en cuanto lo tengan se lo comparto para que usted pueda compartirlo con todos e incluso mejorarlo.
Buenas! La manera más irresponsable y fácil es haciendo todo lo mismo (cargando el script en html) y crear una variable global en el app.ts con el nombre de la librería, le podés poner tipo any o descargarte la definición de tipos que haya hecho otro. Después podés acceder desde todos los componentes o servicios a la api sin que te moleste typescript.
Hola! Te agradezco muchísimo este video, muy explicativo y fructífero. Te quiero consultar si se puede configurar esto mismo pero para un desarrollo de una extensión de Chrome, muchas gracias!
Me encantó el video, resolvió en gran parte dudas que tenia. He visto que el front lo ejecutas de manera local, entonces le das tu IP a OAuth para poder realizar las peticiones. Yo quiero hacer un front el cual muestre (solo seria printado de datos, no tendría más operaciones) las estadísticas de cada jugador de una liga de fútbol barrial que tenemos en un sheets (esta web seria de acceso publico), de este modo debería de hacer algún tipo de configuración diferente a la hora de autorizar un origen de javascript con OAuth? Muchas gracias por tu contenido
Buenas! Sí, tenés que primero hostear la página y luego ver que IP tiene asignado, lo podés hacer desde el inspector del navegador (viendo de donde vienen los recursos), después ponés esa IP en la lista de orígenes permitidos. Saludos!
Excelente video, de casusalidad tienes info de como usar la información desde una googlesheet para generar graficos e indicadores para desarrolla una dashboard. Seria de gran ayuda saludos
Buenas! Para eso deberías obtener los datos tal cual lo hacemos acá, y después hay que pasarle el control de crear los gráficos a otra librería, como puede ser Chartjs, Taucharts, Britecharts, etc... Lamentablemente no tengo ningún video en el tema (me lo anoto). Lo que quiero que te quede claro es que para hacer gráficos de manera sencilla vas a necesitar una librería dedicada sí o sí.
Buenas! No, no lo tengo aún. Lo que sí te puedo comentar lo siguiente, no hay librería oficial de google api para Angular, por lo cual hay que hacer todo a mano. Arrancaría creando un google.service.ts y después de ahí podrías extender esa clase a otra que sea sheets.service.ts En el servicio de google escribís todo lo que tenga que ver con autenticación, y el en el servicio de sheets todo lo que tenga que ver con las sheets en particular. ¿Me hago entender? Cualquier cosa preguntame!
Gran tutorial! Muchas gracias! Si en lugar de tener el index.html en local, lo tuviera alojado en google sites por ejemplo, cómo debería configurar las credenciales de OAuth 2.0? He probado copiando el código de ejemplo de la guía de inicio rápido con JavaScript en una sección de mi página de google sites y cuando presiono en autorizar siempre me da error de "redirect_uri_mismatch"
Si google sites tiene un IP dinámico entonces es algo que no podrías hacer directo desde front end, sino que tendrías que usar un backend con una direción IP estática. Ahora, si resulta que google sites sirve tu página siempre desde el mismo IP, podés entrar a tu google sites y revisar que dirección IP está usando, y usar esa para configurar las credenciales.
Genial! GRan explicación, te consulto: Necesito poder mostrar la info del google sheets en el front online, pero sin que nadie se tenga que autentificar. Qué cambios debería hacer?
Gracias! El método más sencillo sería dejar la hoja pública. Eso hace que puedas leer el link sin siquiera usar la librería de Google sheets, descargandote el archivo separado por comas (csv). En ese caso este tutorial no te estaría sirviendo 😞 Aunque no estoy seguro pero quizás se pueda leer una hoja pública directamente con la librería de sheets antes de iniciar sesión, habría que probarlo 👀
Hola, tu contenido es extremadamente interesante y además es lo que yo estaba buscando para solucionar un problema que tengo... pero claro, soy diseñador y no programador y llegado a cierto punto me pierdo o me duermo.. jejeje... sería posible transformar eso en un plugin de Wordpress para que sea fácil implementarlo si conocer código?
Me encantó tu comentario! Es lo más común encontrar esto extremadamente aburrido. Cuando elegís WordPress hay muchos pros, como la facilidad para hacer cosas sin programar y la "simpleza" de todo, pero hay muchas contras también, en donde se encuentra la que siempre querés hacer algo que no se puede... Las soluciones están, pero siempre pagando y terminás dependiendo de 20 plugins para cualquier sitio simple. Yo esquivo WordPress cada vez que puedo y en parte es porque no me siento cómodo con php. Seguramente alguien puede hacer ese plugin, pero dudo que lo haga gratis, ya que los servicios de Google cambian cada dos por tres y cuesta mantenerlos. Yo por mi parte con lo poco que sé de php y de crear plugins me llevaría muchísimo tiempo crearlo...
Hola Gonzalo, explicas super bien. Quisiera saber si me puedes orientar ya que necesito hacer una pagina parecida donde los usuarios de mi empresa ingresen los codigos referentes a un producto y a su vez estos se comparen con otra oja sheets para saber si uno de los codigos que ingresaron coincide con un pedido en espera. No se si me explique bien. Gracias de antemano por tu tiempo.
Buenas! Gracias por tu mensaje! Lo que haría yo es lo siguiente : En el sheets tiene que haber una columna qué diga si un pedido está terminado o en proceso, también en otra columna pueden estar los id de producto que requiere el pedido, separados por coma. Lees el sheets y filtras todos los pedidos que estén solamente en proceso, para cada columna en un array guardas los ids de cada producto (para cada pedido). Después comparas el ID ingresado con los id productos, al encontrar uno retornas true o el ID del pedido si lo tenés, si no encontrás nada devolvés false. Según el true o false después mostrás un cartel de éxito o no, eso lo podes hacer con una librería que se llama sweet alert si querés (Para que quede lindo) . De entiende lo que quise explicar? Estoy del celu asique quizás no me fui tan profundo. Cualquier cosa avisame!
@@puntojson que grande Gonzalo.. excelente. Si es cierto no hace falta hacerlo en otra hoja solo cuando agreguen los armazones que estan en espera se comparan con los que estan en stock y si coinciden sale la alerta de cual es la coincidencia y en que caja estan guardados. Gracias lo hare asi. PD: es una optica.
genial, hay una forma de no tener que logearse, es decir que no haya que dar autorización de google, que simplemente con entrar a la web me carguen los datos, mi idea es hacer una pagina de tiendas pero estas tienen que sacar información de un sheet, cada tienda tendría su sheet y asi poder insertar o quitar productos fácil
Desde front-end directamente solo se puede si el sheets está público. En ese caso tendrías que cargar el sheets en csv con un fetch (sin usar Google api) y usar esa data. Sino necesitás un server de node js o de cualquier otra tecnología, ahí se puede leer hojas privadas con Google apis y una service account.
excelente tutorial! que recomendarias para tener una aplicación similar que corra automaticamente desde un servidor actualizando Google sheets a partir de otros datos? algo realizado en python , node, o que tipo de app?
Tanto node como python te pueden servir para eso. Te recomendaría usar la herramienta con la que te sientas más cómodo. No vayas aprendiendo mil lenguajes para cada cosa que quieras. Te conviene por ahí manejarte con poquitos pero que te sirvan para hacer de todo.
Si es excel online (desde la nube) sí se puede, no lo hice nunca pero acá comienza la documentación que explica como hacerlo learn.microsoft.com/es-es/sharepoint/dev/general-development/excel-services-rest-api o acá learn.microsoft.com/es-es/sharepoint/dev/general-development/walkthrough-developing-a-custom-application-using-excel-web-services Si nunca hiciste algo parecido quizás sea mejor buscar un tutorial online!
che me encanto pero vos sabes que en el minuto 14:56 cuando decis que "Las funciones que se pasan como argumento a los parentesis addEventListener deberian no tener los parentesis" bueno justamente cuando ponia eso sin parentesis hacia que no se vieran los botones de auth. Y en al consola no tiraba error btw de ningun tipo.
@@puntojson igual por las dudas yo soy re nuevo en esto de programacion. Recien estoy empezando con las apis y demas jajajaja asi que no se fien de mi ahre gracias por el tuto esta genial!!!!
holaaa tengo una duda, primero que todo tu video me ayudo muchisimo y gracias, pero he creado un formulario y me funciona perfecto en la web del pc, puedo ver informacion del sheets, editar, agregar, eliminar y mas, pero el problema es que al ejecutarlo en la web de un celular despues de publicarlo no funciona, no se me activa la pestaña de concentimiento de ninguna forma, eh intentado hasta agergarlo en un boton para que se ejecute y nada, sabras tu que pueda ser o como poder solucionarlo, solo necesito que funcione en el celular y tendre todo resuelto, espero puedas ayudarme, muchas gracias!!!
Buenas! Vamos a ver si podemos obtener un poco más de información del problema a ver si vemos para donde arrancamos a solucionarlo. 1) ¿La ventana emergente se abre en PC cuando tenés el "modo celular" activado en las devtools? Para emular lo que haría un teléfono 2) ¿No tendrás algún adblocker o bloqueador de ventanas emergentes en el celu? Para descartar un teléfono mal configurado 3) ¿Probaste en más de un navegador en el celular? Para descartar un navegador que esté funcionando mal 4) ¿Podés ver si hay algún error en la consola en el celu? - No es tan fácil de ver esto (en chrome es conectando el celu a la pc, o haciendo en js que si hay algún error lo escriba en la página), pero si lo llegás a ver quizás acá se pueda ver claramente el problema. Con toda esta info quizás te pueda ayudar! Saludos
Hola muy buen video! una pregunta hay alguna forma de hacer lo mismo pero sin tener que seleccionar el correo de google y aceptar los permisos manualmente ? algo como configurar esos datos por defecto.
Sí, hay que hacer una "service account" en Google Console y usar esa cuenta para hacer la solicitud a Google. Tendrías que compartir esa Sheet con el mail que se genera para esa service account. Para ese caso no sirve la Google API y vas a tener que hacer todas solicitudes fetch a mano, es bastante molesto la verdad, evidencia que Google no quiere que hagas eso en principio, al menos desde Javascript en frontend. Es más sencillo con las herramientas que Google brinda para lenguajes como Python. El peligro de eso es que da a todos los clientes del sitio el mismo permiso. Espero que lo logres hacer!
Buenas! Muchas gracias por el video. Hay forma de hacerlo pero para el público? Osea un formulario que cualquiera pueda llenar sin tener que iniciar con su cuenta Google? Y que su respuesta me cargue una gsheet?
Buenas! Sí, se puede creando una service account "una cuenta de google para sistemas" que hace que puedas compartir ese sheet con esa cuenta. Y la service account genera un token que se usa a modo de contraseña para loguear a tu usuario. Sin embargo, esa práctica es no recomendada para frontend, ya que requiere que tengas tus credenciales de la cuenta en tu código de vista al cliente, lo cual lo hace inseguro..! Si trabajás en backend podés usar la biblioteca de google de nodejs para hacer eso..!
Hola, maravilloso video! He conseguido hacer todo lo que quería. Solo me queda una duda, ¿existe la posibilidad de que los datos de mi hoja se muestren en mi web sin que el usuario tenga que loguearse con su cuenta de google?
Buenas! En principio se puede si la hoja de cálculo está en modo público. Pero significa que cualquiera tiene acceso. Hace un tiempo hice esto creando un usuario "programático" que te genera una token qué permitía a un script mío acceder a un sheets privado,por lo cual sé que se puede. Lo que sí eso lo hice hace años y en otro lenguaje de programación asique no estoy seguro como hacerlo en JS. Seguramente Google mismo tiene un tutorial para eso.. Y si no está, tendré que hacerlo!
Gracias por la buena onda! Mmm la verdad es que no lo hice nunca, si está en alguna API, está en "Places" o en la de "Navigation" de Google API (Navigation es dificil de conseguir). developers.google.com/maps/documentation/javascript/places?hl=es-419 . Al ver la documentación parece que no se puede cargar los marcadores de un usuario, pero sí que se pueden mostrar marcadores creados en tiempo de ejecución o en el código, quizás eso te sirve!
@@andresj4353 Ufff perdón por pasarme de dificultad. Si se me ocurre algún buen proyecto que incluya un mapa seguro voy a intentar explicar esto..! Si se te ocurre algo, hablame!
Buenas! En la propiedad "range" que tengo en el llamado a la gapi.clients.spreadsheet.values podés poner los registros que querés buscar. Ahora, si lo querés es buscar algo que no sabés en que fila está, entonces vas a tener que traerte toda la fila y buscar a mano desde el front, por ejemplo utilizando el método .filter con los datos que vienen, no es lo ideal pero no se me ocurre en principio otro método..
Tengo una pregunta, es posible consultar una fila teniendo en cuenta un dato especifico ubicado en una columna? Algo asi cono un SELECT * FROM Turnos WHERE nombre = "juan"??
Si! De hecho hay una manera en donde la consulta estilo sql la podemos poner en la url de la sheet que vamos a consultar, enviando un parámetro "q" (de query) En la url. Lo usé hace como 1 mes asique está vigente. No estoy como para revisarlo ahora porque no estoy en casa pero buscalo qué existe..!
Consulta, en el minuto 22:20 por qué podes borrar el archivo de credenciales? Si lo borro dejarian de actualizarse los datos? Perdón apenas inicio con bases de datos!
Si te fijás bien, el archivo de credenciales siempre fue un comentario, no se usó para nada, por lo cual no infuía en la funcionalidad. Te podés fijar también que en el VScode el archivo credenciales.js siempre está nombrado en gris, lo que significa que ese archivo no está siendo usado. Básicamente lo usé como un block de notas
Muy buen tutorial, me surgio una duda, probando esto subi la aplicacion web a un servidor web basico, y funcionaba perfecto en navegador de escritorio, sin embargo si utilizo la aplicacion en mi celular no funciona, dice que se ha realizado una solicitud no valida, a este motivo, probe cambiando la vista del celular a escritorio y funciono, no se mucho sobre la api de google si me podrias explicar te lo agradceceria
Mm puede llegar a ser por tener deshabilitados los popups desde el celu? A mí del celu me funciona lo más bien, pero para que aparezca la ventana emergente de google, tengo que ponerle "permitir" a una solicitud que me hace. No sé sino que podría ser..!
@@puntojson muchas gracias por responder, la ventana de confirmacion de permisos de google aparece, sin embargo al darle confirmar no vuelve a la pagina desde donde se ejecuto, sino que manda el mensaje de error de google
Mmm realmente me dejaste K.O. Si me podés copiar y pegar bien el error y explciar mejor el ambiente en el que estás probando todo quizás se me puede ocurrir algo. Pero recién probé la herramienta que hice con este código y me anda bien en el celu, igual que en la PC.
hola, yo llegué acá por un error similar, en un con el sheet solo lo veo en el pc, en móvil se ve cortado a la mitad, creo que es un error de sheets que no carga correctamente en celulares
Buenas! Sí, sirve. Yo usé esto para un proyecto real en producción. Hay que cambiar las configuraciones de la consola de Google para que funcione desde el sitio web real y ya arranca.
@@puntojson Hola! Primero que nada te felicito por tus vídeos, excelente contenido. Segundo, quisiera saber como hiciste esa configuración para un proyecto real en producción. Es decir, como se configura para que cualquier usuario que utilice la app web pueda enviar los datos a Google Sheets?
Buenas Caus, gracias por la buena onda! No termino de entender exactamente que me estás pidiendo que no sea lo que respondí en el comentario anterior. Hay muchas variables a la hora de hacer un proyecto como este, por ejemplo: Querés que todos los usuarios usen el mismo sheets? Entonces tenés que crear un archivo sheets en modo público para editar (inseguro). Querés que cada usuario pueda acceder a sus archivos, pero los usuarios son "desconocidos"? Entonces tenés que publicar la app y Google te la tiene que aprobar. Querés evitarte la comprobación de google? Entonces la API la tenés que crear desde una cuenta empresa (que no sea @gmail) y todos los usuarios tienen que ser de tu mismo dominio. Si me explicás un poco a dónde estás teniendo problemas voy a hacer lo posible para ayudarrte!
@@puntojson Mil gracias por tu respuesta. Lo que quisiera hacer es que cualquier usuario que entre a la app web que ya esté subida en un host, mediante un formulario que diligencia, estos datos lleguen a un archivo google sheets. Para lograr esto que configuración debería realizar? Cabe resaltar que ya logré hacer la conexión en pruebas, quisiera saber que configuración debería realizar en producción.
@@caus_music Lo que tenés que hacer primero entonces es entrar a la cloud console, a la parte de api y pantalla de consentimiento y poner que querés que los usuario de la app sean "usuarios externos". Eso re va a requerir crear la pantalla de consentimiento y presentarla a autorizar en google.Una vez tengas eso tenés que entrar a las propiedades de la clave API y cambiar las restricciones de sitio web y poner la URL de tu frontend, también vas a tener que entrar a la pantalla de Oauth y agregar como origenes autorizados tu página. Espero que te sea de ayuda!
Hola Genio espero estés muy bien! yo quisiera poder contactarte para realizar algunas tareas por privado. se trata de un proyecto para mi empresa. y necesito colaboracion para conectar una app web crm con google sheet. muchas gracias por tu contenido
Buenas! Tenés que saber el IP de tu servidor y ponerlo en la lista blanca de la consola de google. Yo lo uso y no hice nada más que cambiar esa configuración.
Te aseguro que si en tu portfolio metés algo así tus chances de encontrar laburo suben una banda. Más allá de eso, te sirve para empezar a venderte particular!
Buenas, como estas? Tengo un error cuando le doy al botón de autorizar, directamente no me funciona. A alguien le paso lo mismo? Necesito solucionarlo lo antes posible
Saludos, muy buen video una pregunta. Cuando intento iniciar sesión con el correo me dice error 401, acceso bloqueado.. error de autorización podrías ayudarme?
Sí! Fijate que tu correo esté en la lista de correos permitidos en la consola de Google. Sino revisá tanto en la consola en la parte de la api y en la de oauth que tu página esté en la lista de orígenes permitidos (yo puse 127.0.0.1) en el video, fijate que dirección tiene tu compu! Probalo y avisame!
Mmm fijate si el origen lo pusiste sin la S de https. Sino la verdad tendría que chequearlo con tiempo y con vista al código 😞 Lo vas a tener que googlear porque se complica un poco por acá. Sin embargo si estás escribiendo en código abierto podría revisarlo en mi compu.
Veo que ya no existe informacion donde se diga como acceder desde .NET a google todo el codigo que uso dice que la pagina que intento acceder esta bloqueada.
Buenas! Google sigue teniendo su documentación de las apis con .net, asique no creo que esté completamente dada de baja. Seguramente hay otro problema dando vueltas!
Sí, podés guardar el token que Google te da en localstorage y utilizarlo para hacer las solicitudes a Google. Para ese caso no sé si usar la librería de Google será lo mejor o si te conviene usar la api de Google con código escrito por vos. Lamentablemente no tengo un ejemplo para darte 😞
Appscript es muy potente y sirve para un montón de cosas. Pero no estoy tan familiarizado con este tema, lo he usado solamente para crear mis funciones personalizadas dentro de una planilla.
Puede ser que se me haya escapado eso! Sin revisar supongo que es prácticamente igual que el get y el update, pero usando el método "delete" de la librería gapi.
Cuando estamos en frontend el .env no hace nada! Todos los datos que van en una solicitud a un server se pueden ver desde la pestaña "red" del inspector, asique no son privadas. Si hay que manejar datos privados, hay que hacer un server de backend o manejarse por otro lado. En frontend las variables secretas no existen.
![โอ้เธอช่าง... - บี้เดอะสกา ft. ต๋อง เทวัญ (Prod. by ป๋าเพชร) [Official MV]](http://i.ytimg.com/vi/zbWhiLFmVL0/mqdefault.jpg)
buenas tardes, el mejor y unico tutorial q explica todo y es realmente funcional. me podrias explicar como hacer para capturar el mail del login, ya que necesito limitar ciertas celdas a determinados usuarios.
Empece hace poco a ver tus tutoriales y la verdad son muy notritivos, muy bien explicados!!! muchas gracias por tus contenidos!!!
Muchas gracias, no solo aprendí como conectar sheets, sino también me resolvió muchas dudas que tenia de JavaScript. Muy claro y al punto. Saludos
Gracias!!!! Me voy a seguir esforzando para traer contenido así..
excelente videooo!!! con información de calidad, me gustaria que pudieras hacer un video desplegando la aplicacion en la nube y realizanco las configuraciones para ello
Hola Punto Json, qué buena información que gentilmente brindás, en esto soy un aprendíz y me ayudás mucho con este video. Voy a escribir a tu correo por unas consultas si podés me respondés. Me encanta esto. Felicitaciones por difundir estos temas. Gracias totales. Un abrazo desde Salta Argentina.
Buenas! Gracias por el lindo mensaje 😊 Escribime si querés a contacto@puntojson.com
Saludos desde Santa Fe
Uff tremendo video, justo lo que necesito. Estoy creando una app para llevar el inventario de la carpinteria en la que trabajo y me bancan que estudie a la vez y esto me viene perfecto.
Ahora a enrroscarme para hacerlo andar en Angular y hacer el .put
muchas gracias brodi!!!
De nada don Bata!
Conectarlo con Angular es molesto porque no podés usar la librería de nodeJs y hay que hacerlo basado en este proyecto.
Para hacer que las variables gapi y gsi (creo que uso las 2 en este video) estén disponibles, tenés que declarar variables globales con esos nombres, así typescript no se queja de usar variables que no declaraste en ningún lado (porque se crean cuando importás las librerías).
Suerte con eso! Cualquier cosa preguntame por acá o en el canal de discord.
@@puntojson Por que no se puede usar Node? solo se pueden usar cliente side ?
@@daniel_toro_programacion Si quisieras usar la librería de node en una SPA tendrías que publicar tu clave secreta. La librería de node está hecha para trabajar en backend donde el usuario no puede meterse, si metés eso en frontend comprometés no sólo la seguridad de tu api, sino que hasta te puede generar cargos en tu cuenta de Google ($).
Tenés que usar alguna configuración que no sea 100% client-side para poder hacer una conexión de largo plazo con la Google API.
muy genial, muchas gracias, no sabia que google tenia una api, cada vez me interesa mas ese tema, y cada vez se pone mas complejo, pero mas genial
Google tiene DE TODO. Muchísimas apis para de todo. Pero ojo que tiene tanto que te puede marear, andá investigando cuando tengas las necesidades de hacerlo!
Hola, me acabo de encontrar con este canal, explicas muy bien, te felicito. Yo tengo tiempo trabajando con Google Sheet, y hasta hace poco solo habia logrado crear aplicativo solo con Google Apps Script, hace poco comencé a explorar lo de la API de Google Sheet, lo que no he podido hacer es usar una "cuenta de servicio" en vez del todo ese proceso de autorización, ya que me parece un poco invasivo otorgar permisos de "modificar todas tus hojas de calculo" cuando la verdad no lo necesito, ya que solo quiero que se modifique una hoja de calculo, supongamos de mi propiedad. Entonces por lo que leí, si la aplicación no requiere usar datos del usuario se puede usar una "cuenta de servicio", pero la verdad no he llegado a enteder como generar eso en código.
Buenas! Hace ya varios años lo hice a eso, de la siguiente manera, puede ser que sea levemente distinto :
Creé un usuario desde la consola de Google que es un usuario de sistema, o un usuario qué tiene un usuario y un token de acceso. Después desde la hoja de cálculo que quiero usar ponía compartir y ponía con permisos de edición al usuario qué creé en el paso anterior. Después usaba el usuario y token para autenticarme y hacer cambios en ese sheet.
Todo eso lo hice en su momento con python y al día de hoy sigo usando esas herramientas para mi trabajo por lo que sé que todavía el método funciona. Tendría únicamente qué ver como hacerlo desde js
te mereces más vistas y más likes! sos un genio, muchas gracias
Estaba buscando alguna option que me funcionase como base de datos de un proyecto para un cliente. Es la digitalization de su menu el cual pueda ser accedido mediante qr. Si bien ya esta todo construido. Buscaba una forma sencilla, practica y muy facil de usar al cliente para que se encargue de mantener actualizada su lista de precios y productos. Esto porque no quiero gastarme un gran back porque es algo muy "sencillo" Supongo que esto podria funcionarme y darle el acceso a la google sheet a mi cliente. Cuestiones de que el haga las modificaciones en el sheet y se actualize en el front. No se, si estoy en lo correcto. Cualquier sugerencia te lo agredeceria. Para el front use react asi que seguro avanzare con node.js
Maravilloso video, muy explicado al detalle, muchas gracias
Graciass!
amigo videos de este tipo así seria genial que siguieras haciendo como para reservas y eso un estilo asi
No estaría mal un proyecto con un sistema de reservas y turnos! Muy interesante!!
Totalmente de acuerdo, de igual manera te agradeceríamos demasiado que pudieras conectarlo con un sistema de compra y venta, con todo y el proceso de carrito de compra y venta final por medio de tarjeta o efectivo. Siempre conectando como base de datos a GoogleSheets y siendo el punto principal la AUTOMATIZACIÓN
Increíble video, excelente explicación. Todo muy claro. Muchas gracias!
Me alegro de que te haya sido claro! Gracias por comentar :)
Es justo lo que buscaba CRACK! gracias.
Gracias a vossss
Me acabo de enganchar con la buena onda del canal Calo, aprovecho y te consulto por una pista sobre un tema de Google apps Script, en Calendar, se puede asociar la ejecucion de una function creada, a momento de producirse el evento, porque si atraves de los disparadores o activadores reconoce los eventos de calendar Crear, modificar o eliminar el evento, pero no logro encontrar nada respecto al momento de llegado el momento, mas alla de la generacion propia de la notificacion del evento. Mil gracias por una pista. Te voy a estar siguiendo, 😜
Buenas!
Mirá, estoy pensando tu problema y se me ocurre algo, pero no sé que tanto se amolda a tu problema específico.
Por lo que leí acá developers.google.com/apps-script/guides/triggers?hl=es-419 parece que no hay un activador para "cuando un evento de calendario sucede", PERO hay para cuando se crea o se edita un evento.
Por lo cual, estoy pensando que quizás tenés que tener un bot que cuado escucha el activacor de ON_EVENT_UPDATED para ver la fecha del evento y automatizar la ejecución de tu función para ese momento.
Eso sí, tendrías que guardar en algún lugar el ID del evento por si el mismo se modifica o se borra, así borrás la automatización que dejaste planeada, lo cual no creo que lo puedas hacer con Google Scripts.
Se me ocurre sino que para solucionar ese problema te tendrías que hacer una pequeña app en Node.js o con lo que te manejes que tenga guardados todos los eventos futuros y que ejecute lo que tengas que ejecutar, pero sin Google Scripts.
¿Me hice entender? Cualquier cosa preguntame!
¿Crear un proyecto en Google Cloud Para estos fines es Gratis?. ¡Muy bueno el video por cierto.!, resuelve muchisimas dudas.
Si! Es gratis hasta un límite de uso mensual, que es altísimo.
No estoy seguro de que esto sea técnicamente Google cloud, creo que lo que ellos llaman cloud a los servidores virtuales (no estoy seguro).
@@puntojson Te agradezco tu respuesta
Flaco sos un genio. Hermoso video
Gracias Ale :D
muchas gracias por compartir!!!!! Muy instructivo...
Gracias por pasarte y comentar!
yo arme algo asi con flask Y pyinstaller, ahora tengo una duda, existe un limite de solicitudes que se puede hacer a la Google Sheets API?
Muchísimas gracias, si pudieras subir algún tutorial para poder conectar la base de datos de wordpress para que cada vez que realice un cambio en GoogleSheets se refleje en wordpress y viceversa te lo agradecería infinitamente 🙏🏼🥺
Buenas! La verdad es que no tengo demasiada idea de como hacer eso. Principalmente porque no escribo en PHP (el lenguaje en el cual se programa en wordpress).
Sin embargo se me ocurren un par de maneras de encarar el problema si lo hacés a mano:
1) Hacer todo desde wordpress: Escribir en tu servidor PHP un script que cada X tiempo revise si hay algo nuevo en el sheets y lo agrega a la BD, y que cada vez que vos hagas un cambio desde wordpress que se agregue a sheets.
2) Hacer todo desde Sheets, para esto habría que usar Google App Scripts (que es casi javascript), en donde creás código para que cuando aprietes un botón se haga una sincronización con Wordpress.
3) Hacer un programa aparte, en el lenguaje que sepas, que monitoree el sheets y la BD de wordpress para revisar constantemente si hubo algún cambio y replicarlo en el otro lado.
4) Si querés que todo esté sincronizado a tiempo real, entonces necesitarías 2 scripts, uno en wordpress que actualice el sheets cuando hacés un cambio y uno en google sheets para que actualice el wordpress cuando hacés un cambio.
Pero si no te molesta hacerlo con herramientas externas, el proceso es muchísimo más sencillo, se pueden hacer automatizaciones con Zapier o herramientas similares:
zapier.com/apps/wordpress/integrations/google-sheets?gad=1&gclid=CjwKCAjw4ZWkBhA4EiwAVJXwqTDdBO4W3wiMF-2-9zO68k14fgOLhuR8gaGy-a7P_R76DEQkZ8-k8xoCW7kQAvD_BwE
Espero que todo esto te sirva! Saludos!
@@puntojson muchísimas gracias, espero poder desarrollarlo y en cuanto lo tengan se lo comparto para que usted pueda compartirlo con todos e incluso mejorarlo.
Increíble
Genial idea, igual necesito lo mismo, espero pronto encontrar algún vídeo sobre ello. 🎉
Muy bueno el video, Gracias por compartir. una consulta, Con Angular usando TS. como seria la conexión Auth? Gracias.
Buenas! La manera más irresponsable y fácil es haciendo todo lo mismo (cargando el script en html) y crear una variable global en el app.ts con el nombre de la librería, le podés poner tipo any o descargarte la definición de tipos que haya hecho otro. Después podés acceder desde todos los componentes o servicios a la api sin que te moleste typescript.
Hola! Te agradezco muchísimo este video, muy explicativo y fructífero. Te quiero consultar si se puede configurar esto mismo pero para un desarrollo de una extensión de Chrome, muchas gracias!
Gracias!
La verdad no tengo ni idea de extensiones de chrome 🥴 Perdón por la falta!
@@puntojson no hay ningún problema, muchas gracias a vos, excelente contenido!
Me encantó el video, resolvió en gran parte dudas que tenia. He visto que el front lo ejecutas de manera local, entonces le das tu IP a OAuth para poder realizar las peticiones. Yo quiero hacer un front el cual muestre (solo seria printado de datos, no tendría más operaciones) las estadísticas de cada jugador de una liga de fútbol barrial que tenemos en un sheets (esta web seria de acceso publico), de este modo debería de hacer algún tipo de configuración diferente a la hora de autorizar un origen de javascript con OAuth? Muchas gracias por tu contenido
Buenas! Sí, tenés que primero hostear la página y luego ver que IP tiene asignado, lo podés hacer desde el inspector del navegador (viendo de donde vienen los recursos), después ponés esa IP en la lista de orígenes permitidos.
Saludos!
Excelente video, de casusalidad tienes info de como usar la información desde una googlesheet para generar graficos e indicadores para desarrolla una dashboard. Seria de gran ayuda saludos
Buenas! Para eso deberías obtener los datos tal cual lo hacemos acá, y después hay que pasarle el control de crear los gráficos a otra librería, como puede ser Chartjs, Taucharts, Britecharts, etc...
Lamentablemente no tengo ningún video en el tema (me lo anoto).
Lo que quiero que te quede claro es que para hacer gráficos de manera sencilla vas a necesitar una librería dedicada sí o sí.
Hola Punto Json, excelente el tutorial. Tenés hecho uno donde la conección sea con Angular?. Saludos!!
Buenas! No, no lo tengo aún.
Lo que sí te puedo comentar lo siguiente, no hay librería oficial de google api para Angular, por lo cual hay que hacer todo a mano.
Arrancaría creando un google.service.ts y después de ahí podrías extender esa clase a otra que sea sheets.service.ts
En el servicio de google escribís todo lo que tenga que ver con autenticación, y el en el servicio de sheets todo lo que tenga que ver con las sheets en particular.
¿Me hago entender? Cualquier cosa preguntame!
Gracias por responder@@puntojson, saludos!!!
Gran tutorial! Muchas gracias!
Si en lugar de tener el index.html en local, lo tuviera alojado en google sites por ejemplo, cómo debería configurar las credenciales de OAuth 2.0? He probado copiando el código de ejemplo de la guía de inicio rápido con JavaScript en una sección de mi página de google sites y cuando presiono en autorizar siempre me da error de "redirect_uri_mismatch"
Si google sites tiene un IP dinámico entonces es algo que no podrías hacer directo desde front end, sino que tendrías que usar un backend con una direción IP estática.
Ahora, si resulta que google sites sirve tu página siempre desde el mismo IP, podés entrar a tu google sites y revisar que dirección IP está usando, y usar esa para configurar las credenciales.
tremendo video!!!! Muchas gracias!
Gracias a vos por pasarte Ale!
Genial! GRan explicación, te consulto: Necesito poder mostrar la info del google sheets en el front online, pero sin que nadie se tenga que autentificar. Qué cambios debería hacer?
Gracias! El método más sencillo sería dejar la hoja pública. Eso hace que puedas leer el link sin siquiera usar la librería de Google sheets, descargandote el archivo separado por comas (csv). En ese caso este tutorial no te estaría sirviendo 😞
Aunque no estoy seguro pero quizás se pueda leer una hoja pública directamente con la librería de sheets antes de iniciar sesión, habría que probarlo 👀
Gracias. La verdad que se entendió perfectamente
De nada! :)
Grias maquina!! el video me ayudo un monton!!
De nada! Gracias a vos por mirar!
Hola, tu contenido es extremadamente interesante y además es lo que yo estaba buscando para solucionar un problema que tengo... pero claro, soy diseñador y no programador y llegado a cierto punto me pierdo o me duermo.. jejeje... sería posible transformar eso en un plugin de Wordpress para que sea fácil implementarlo si conocer código?
Me encantó tu comentario! Es lo más común encontrar esto extremadamente aburrido.
Cuando elegís WordPress hay muchos pros, como la facilidad para hacer cosas sin programar y la "simpleza" de todo, pero hay muchas contras también, en donde se encuentra la que siempre querés hacer algo que no se puede... Las soluciones están, pero siempre pagando y terminás dependiendo de 20 plugins para cualquier sitio simple. Yo esquivo WordPress cada vez que puedo y en parte es porque no me siento cómodo con php. Seguramente alguien puede hacer ese plugin, pero dudo que lo haga gratis, ya que los servicios de Google cambian cada dos por tres y cuesta mantenerlos. Yo por mi parte con lo poco que sé de php y de crear plugins me llevaría muchísimo tiempo crearlo...
Hola Gonzalo, explicas super bien. Quisiera saber si me puedes orientar ya que necesito hacer una pagina parecida donde los usuarios de mi empresa ingresen los codigos referentes a un producto y a su vez estos se comparen con otra oja sheets para saber si uno de los codigos que ingresaron coincide con un pedido en espera. No se si me explique bien. Gracias de antemano por tu tiempo.
Buenas! Gracias por tu mensaje!
Lo que haría yo es lo siguiente :
En el sheets tiene que haber una columna qué diga si un pedido está terminado o en proceso, también en otra columna pueden estar los id de producto que requiere el pedido, separados por coma.
Lees el sheets y filtras todos los pedidos que estén solamente en proceso, para cada columna en un array guardas los ids de cada producto (para cada pedido).
Después comparas el ID ingresado con los id productos, al encontrar uno retornas true o el ID del pedido si lo tenés, si no encontrás nada devolvés false.
Según el true o false después mostrás un cartel de éxito o no, eso lo podes hacer con una librería que se llama sweet alert si querés (Para que quede lindo) .
De entiende lo que quise explicar? Estoy del celu asique quizás no me fui tan profundo. Cualquier cosa avisame!
@@puntojson que grande Gonzalo.. excelente. Si es cierto no hace falta hacerlo en otra hoja solo cuando agreguen los armazones que estan en espera se comparan con los que estan en stock y si coinciden sale la alerta de cual es la coincidencia y en que caja estan guardados.
Gracias lo hare asi.
PD: es una optica.
genial, hay una forma de no tener que logearse, es decir que no haya que dar autorización de google, que simplemente con entrar a la web me carguen los datos, mi idea es hacer una pagina de tiendas pero estas tienen que sacar información de un sheet, cada tienda tendría su sheet y asi poder insertar o quitar productos fácil
Desde front-end directamente solo se puede si el sheets está público. En ese caso tendrías que cargar el sheets en csv con un fetch (sin usar Google api) y usar esa data.
Sino necesitás un server de node js o de cualquier otra tecnología, ahí se puede leer hojas privadas con Google apis y una service account.
@@puntojson claro, la idea es ponerlo en publico para leer si y ya desde el sheet dar permiso a quien puede editarlo, lo voy a intentar asi
excelente tutorial! que recomendarias para tener una aplicación similar que corra automaticamente desde un servidor actualizando Google sheets a partir de otros datos? algo realizado en python , node, o que tipo de app?
Tanto node como python te pueden servir para eso. Te recomendaría usar la herramienta con la que te sientas más cómodo. No vayas aprendiendo mil lenguajes para cada cosa que quieras. Te conviene por ahí manejarte con poquitos pero que te sirvan para hacer de todo.
Excelente video, se podra hacer lo mismo con excel??
Si es excel online (desde la nube) sí se puede, no lo hice nunca pero acá comienza la documentación que explica como hacerlo learn.microsoft.com/es-es/sharepoint/dev/general-development/excel-services-rest-api o acá learn.microsoft.com/es-es/sharepoint/dev/general-development/walkthrough-developing-a-custom-application-using-excel-web-services
Si nunca hiciste algo parecido quizás sea mejor buscar un tutorial online!
@@puntojson muchas gracias por la información y excelente video!! 👍🏻
Este video me acompaña de la manito y explicas sólo lo que necesito saber, sin ir por tangentes. Un tutorial de la san puta
Gracias acelga! Me puso muy contento leerte 😊
Excelente video! Gracias 🥰🥰
😊😊
che me encanto pero vos sabes que en el minuto 14:56 cuando decis que "Las funciones que se pasan como argumento a los parentesis addEventListener deberian no tener los parentesis" bueno justamente cuando ponia eso sin parentesis hacia que no se vieran los botones de auth. Y en al consola no tiraba error btw de ningun tipo.
mmmmmmmmmm que quede este comentario por si hay gente con el mismo problema!
A mí obviamente me funcionó como lo hice en el video :/
@@puntojson igual por las dudas yo soy re nuevo en esto de programacion. Recien estoy empezando con las apis y demas jajajaja asi que no se fien de mi ahre gracias por el tuto esta genial!!!!
holaaa tengo una duda, primero que todo tu video me ayudo muchisimo y gracias, pero he creado un formulario y me funciona perfecto en la web del pc, puedo ver informacion del sheets, editar, agregar, eliminar y mas, pero el problema es que al ejecutarlo en la web de un celular despues de publicarlo no funciona, no se me activa la pestaña de concentimiento de ninguna forma, eh intentado hasta agergarlo en un boton para que se ejecute y nada, sabras tu que pueda ser o como poder solucionarlo, solo necesito que funcione en el celular y tendre todo resuelto, espero puedas ayudarme, muchas gracias!!!
Buenas! Vamos a ver si podemos obtener un poco más de información del problema a ver si vemos para donde arrancamos a solucionarlo.
1) ¿La ventana emergente se abre en PC cuando tenés el "modo celular" activado en las devtools? Para emular lo que haría un teléfono
2) ¿No tendrás algún adblocker o bloqueador de ventanas emergentes en el celu? Para descartar un teléfono mal configurado
3) ¿Probaste en más de un navegador en el celular? Para descartar un navegador que esté funcionando mal
4) ¿Podés ver si hay algún error en la consola en el celu? - No es tan fácil de ver esto (en chrome es conectando el celu a la pc, o haciendo en js que si hay algún error lo escriba en la página), pero si lo llegás a ver quizás acá se pueda ver claramente el problema.
Con toda esta info quizás te pueda ayudar!
Saludos
Hola muy buen video! una pregunta hay alguna forma de hacer lo mismo pero sin tener que seleccionar el correo de google y aceptar los permisos manualmente ? algo como configurar esos datos por defecto.
Sí, hay que hacer una "service account" en Google Console y usar esa cuenta para hacer la solicitud a Google. Tendrías que compartir esa Sheet con el mail que se genera para esa service account. Para ese caso no sirve la Google API y vas a tener que hacer todas solicitudes fetch a mano, es bastante molesto la verdad, evidencia que Google no quiere que hagas eso en principio, al menos desde Javascript en frontend. Es más sencillo con las herramientas que Google brinda para lenguajes como Python.
El peligro de eso es que da a todos los clientes del sitio el mismo permiso.
Espero que lo logres hacer!
gracias mr. beast argentino programador.
Mmm podría hacer un sorteo de un millón de dólares.....
Tendría que juntar el millón primero, pero después podría!
Buenas! Muchas gracias por el video. Hay forma de hacerlo pero para el público? Osea un formulario que cualquiera pueda llenar sin tener que iniciar con su cuenta Google? Y que su respuesta me cargue una gsheet?
Buenas! Sí, se puede creando una service account "una cuenta de google para sistemas" que hace que puedas compartir ese sheet con esa cuenta. Y la service account genera un token que se usa a modo de contraseña para loguear a tu usuario. Sin embargo, esa práctica es no recomendada para frontend, ya que requiere que tengas tus credenciales de la cuenta en tu código de vista al cliente, lo cual lo hace inseguro..!
Si trabajás en backend podés usar la biblioteca de google de nodejs para hacer eso..!
Hola, maravilloso video! He conseguido hacer todo lo que quería.
Solo me queda una duda, ¿existe la posibilidad de que los datos de mi hoja se muestren en mi web sin que el usuario tenga que loguearse con su cuenta de google?
Buenas! En principio se puede si la hoja de cálculo está en modo público. Pero significa que cualquiera tiene acceso.
Hace un tiempo hice esto creando un usuario "programático" que te genera una token qué permitía a un script mío acceder a un sheets privado,por lo cual sé que se puede. Lo que sí eso lo hice hace años y en otro lenguaje de programación asique no estoy seguro como hacerlo en JS.
Seguramente Google mismo tiene un tutorial para eso.. Y si no está, tendré que hacerlo!
estan geniales los videos, sabes como conectarse a maps desde tu propia cuenta para sacar datos de navegacion que hiciste? no pude hacerlo yo
Gracias por la buena onda!
Mmm la verdad es que no lo hice nunca, si está en alguna API, está en "Places" o en la de "Navigation" de Google API (Navigation es dificil de conseguir). developers.google.com/maps/documentation/javascript/places?hl=es-419 . Al ver la documentación parece que no se puede cargar los marcadores de un usuario, pero sí que se pueden mostrar marcadores creados en tiempo de ejecución o en el código, quizás eso te sirve!
@@puntojson no me da para entender lo que dijiste pero me pondre a leer. gracias! necesito hacer algun proyecto para hacer un portfolio
@@andresj4353 Ufff perdón por pasarme de dificultad. Si se me ocurre algún buen proyecto que incluya un mapa seguro voy a intentar explicar esto..! Si se te ocurre algo, hablame!
@@puntojson no pasa nada, estamos en el camino del autodidacta. podrias hacer un discord y hacer una comuna
Hola, como puedo hacer para obtener una fila especifica, comparando datos. Por ejemplo extraer la información de un registro específico.
Buenas! En la propiedad "range" que tengo en el llamado a la gapi.clients.spreadsheet.values podés poner los registros que querés buscar. Ahora, si lo querés es buscar algo que no sabés en que fila está, entonces vas a tener que traerte toda la fila y buscar a mano desde el front, por ejemplo utilizando el método .filter con los datos que vienen, no es lo ideal pero no se me ocurre en principio otro método..
Tengo una pregunta, es posible consultar una fila teniendo en cuenta un dato especifico ubicado en una columna? Algo asi cono un SELECT * FROM Turnos WHERE nombre = "juan"??
Si! De hecho hay una manera en donde la consulta estilo sql la podemos poner en la url de la sheet que vamos a consultar, enviando un parámetro "q" (de query) En la url.
Lo usé hace como 1 mes asique está vigente.
No estoy como para revisarlo ahora porque no estoy en casa pero buscalo qué existe..!
Consulta, en el minuto 22:20 por qué podes borrar el archivo de credenciales? Si lo borro dejarian de actualizarse los datos? Perdón apenas inicio con bases de datos!
Si te fijás bien, el archivo de credenciales siempre fue un comentario, no se usó para nada, por lo cual no infuía en la funcionalidad. Te podés fijar también que en el VScode el archivo credenciales.js siempre está nombrado en gris, lo que significa que ese archivo no está siendo usado.
Básicamente lo usé como un block de notas
@@puntojson gracias y disculpa la pregunta.. pero muchisimas gracias me sirve demasiado tu video!!
Muy buen tutorial, me surgio una duda, probando esto subi la aplicacion web a un servidor web basico, y funcionaba perfecto en navegador de escritorio, sin embargo si utilizo la aplicacion en mi celular no funciona, dice que se ha realizado una solicitud no valida, a este motivo, probe cambiando la vista del celular a escritorio y funciono, no se mucho sobre la api de google si me podrias explicar te lo agradceceria
Mm puede llegar a ser por tener deshabilitados los popups desde el celu?
A mí del celu me funciona lo más bien, pero para que aparezca la ventana emergente de google, tengo que ponerle "permitir" a una solicitud que me hace.
No sé sino que podría ser..!
@@puntojson muchas gracias por responder, la ventana de confirmacion de permisos de google aparece, sin embargo al darle confirmar no vuelve a la pagina desde donde se ejecuto, sino que manda el mensaje de error de google
Mmm realmente me dejaste K.O.
Si me podés copiar y pegar bien el error y explciar mejor el ambiente en el que estás probando todo quizás se me puede ocurrir algo. Pero recién probé la herramienta que hice con este código y me anda bien en el celu, igual que en la PC.
hola, yo llegué acá por un error similar, en un con el sheet solo lo veo en el pc, en móvil se ve cortado a la mitad, creo que es un error de sheets que no carga correctamente en celulares
Muchas gracias.
Gracias a vos por pasarte y comentar!
Buenas tardes, si pongo en x tiempo este revisando si hay cambios del google sheet, hay algun limite de peticiones?
Buen video ✌🏼
Buenas! Limite hay para el gratuito, pero si no recuerdo mal es altisimo. Dudo que llegues.
y puedo darle más de un documento? necesito que me lea muchas planillas.
pd: eres bueno, gracias
Si se puede! En el "response = await ..." cargamos un sheets, nada nos prohibe repetir esa líneas y conectarnos a todas las sheets que queramos.
Hola, ¿Cómo estás? excelente video. Está genial la App... Pregunta, si necesito subir la app web a un servidor real, no serviría este método?
Buenas! Sí, sirve. Yo usé esto para un proyecto real en producción.
Hay que cambiar las configuraciones de la consola de Google para que funcione desde el sitio web real y ya arranca.
@@puntojson Hola! Primero que nada te felicito por tus vídeos, excelente contenido. Segundo, quisiera saber como hiciste esa configuración para un proyecto real en producción. Es decir, como se configura para que cualquier usuario que utilice la app web pueda enviar los datos a Google Sheets?
Buenas Caus, gracias por la buena onda! No termino de entender exactamente que me estás pidiendo que no sea lo que respondí en el comentario anterior.
Hay muchas variables a la hora de hacer un proyecto como este, por ejemplo:
Querés que todos los usuarios usen el mismo sheets? Entonces tenés que crear un archivo sheets en modo público para editar (inseguro).
Querés que cada usuario pueda acceder a sus archivos, pero los usuarios son "desconocidos"? Entonces tenés que publicar la app y Google te la tiene que aprobar.
Querés evitarte la comprobación de google? Entonces la API la tenés que crear desde una cuenta empresa (que no sea @gmail) y todos los usuarios tienen que ser de tu mismo dominio.
Si me explicás un poco a dónde estás teniendo problemas voy a hacer lo posible para ayudarrte!
@@puntojson Mil gracias por tu respuesta. Lo que quisiera hacer es que cualquier usuario que entre a la app web que ya esté subida en un host, mediante un formulario que diligencia, estos datos lleguen a un archivo google sheets. Para lograr esto que configuración debería realizar? Cabe resaltar que ya logré hacer la conexión en pruebas, quisiera saber que configuración debería realizar en producción.
@@caus_music Lo que tenés que hacer primero entonces es entrar a la cloud console, a la parte de api y pantalla de consentimiento y poner que querés que los usuario de la app sean "usuarios externos". Eso re va a requerir crear la pantalla de consentimiento y presentarla a autorizar en google.Una vez tengas eso tenés que entrar a las propiedades de la clave API y cambiar las restricciones de sitio web y poner la URL de tu frontend, también vas a tener que entrar a la pantalla de Oauth y agregar como origenes autorizados tu página.
Espero que te sea de ayuda!
No lo pude hacer andar, será que ahora google cambio como se autentica todo ?
Es cierto que cambió algunas cosas, no puedo probar el proyecto ahora porque no tengo más esa clave api ni el tengo esa hoja de sheets. :/
Hola, esto también jala los códigos de appsript
Buenas!
No, en principio no obtiene los script de appscript que tengas, todo lo de Appscript se escribe con las herramientas de Google
Hola Genio espero estés muy bien! yo quisiera poder contactarte para realizar algunas tareas por privado. se trata de un proyecto para mi empresa. y necesito colaboracion para conectar una app web crm con google sheet. muchas gracias por tu contenido
Buenas Ale! Que buena noticia!
Enviame tus datos de contacto a contacto@puntojson.com si querés y charlamos.
Hola, como podría utilizar el formulario desde otra IP que no sea servidor local?
Buenas!
Tenés que saber el IP de tu servidor y ponerlo en la lista blanca de la consola de google. Yo lo uso y no hice nada más que cambiar esa configuración.
Faaaaaa, listo para conseguir trabajo
Te aseguro que si en tu portfolio metés algo así tus chances de encontrar laburo suben una banda.
Más allá de eso, te sirve para empezar a venderte particular!
Buenas, como estas?
Tengo un error cuando le doy al botón de autorizar, directamente no me funciona. A alguien le paso lo mismo?
Necesito solucionarlo lo antes posible
Buenas! Perdón la tardanza.
Me decís que error tenés? Sin eso se complica bastante!
se puede hacer con un documento google sheets ya hecho antes?
Sí, sin problema. Antes o después, la app y el sheets son 2 cosas individuales que hablan entre sí
@@puntojson gracias !!
Saludos, muy buen video una pregunta. Cuando intento iniciar sesión con el correo me dice error 401, acceso bloqueado.. error de autorización podrías ayudarme?
Sí! Fijate que tu correo esté en la lista de correos permitidos en la consola de Google.
Sino revisá tanto en la consola en la parte de la api y en la de oauth que tu página esté en la lista de orígenes permitidos (yo puse 127.0.0.1) en el video, fijate que dirección tiene tu compu!
Probalo y avisame!
@@puntojson Si están en la lista y el origen ya lo verifique con el mío y esta perfecto, pero sigue sin funcionar, que podría ser?
Mmm fijate si el origen lo pusiste sin la S de https.
Sino la verdad tendría que chequearlo con tiempo y con vista al código 😞
Lo vas a tener que googlear porque se complica un poco por acá. Sin embargo si estás escribiendo en código abierto podría revisarlo en mi compu.
Veo que ya no existe informacion donde se diga como acceder desde .NET a google todo el codigo que uso dice que la pagina que intento acceder esta bloqueada.
Buenas!
Google sigue teniendo su documentación de las apis con .net, asique no creo que esté completamente dada de baja. Seguramente hay otro problema dando vueltas!
Gracias crack!
A su servicio 😊
Pero sera posible no tener que autenticar cada vez?
Sí, podés guardar el token que Google te da en localstorage y utilizarlo para hacer las solicitudes a Google. Para ese caso no sé si usar la librería de Google será lo mejor o si te conviene usar la api de Google con código escrito por vos. Lamentablemente no tengo un ejemplo para darte 😞
@@puntojson Gracias de todas formas. Excelente tutorial.
Hay una forma de hacerlo por medio de appscript
Es pregunta o afirmación? Me gustaría más información sobre eso de apps scripts, yo traté al principio pero solo me devolvió error de CORS
Appscript es muy potente y sirve para un montón de cosas. Pero no estoy tan familiarizado con este tema, lo he usado solamente para crear mis funciones personalizadas dentro de una planilla.
No consigo como usar este codigo en c# webforms
Perdón, pero de C# webforms no tengo nada de idea :/
pero no dice como eliminar una fila
Puede ser que se me haya escapado eso! Sin revisar supongo que es prácticamente igual que el get y el update, pero usando el método "delete" de la librería gapi.
Pesimo me da Error 401: invalid_client y ahi quede :(
Veo que hay mucha gente con problemas, voy a tener que hacer un tutorial nuevo!
Gente guraden las claves en un archivo .env y las importaan donde necesiten, asi no se filtran
Cuando estamos en frontend el .env no hace nada! Todos los datos que van en una solicitud a un server se pueden ver desde la pestaña "red" del inspector, asique no son privadas.
Si hay que manejar datos privados, hay que hacer un server de backend o manejarse por otro lado. En frontend las variables secretas no existen.
Utilizar esto, es gratis?
Sí! Pero tenés un límite de uso, que si sos una empresa chica te mega sobra. No lo recuerdo ahora pero hacé de cuenta que son millones de usos por mes