COMO INTEGRAR GOOGLE SHEETS CON WIX GRATIS | CODE

Hey, cómo vamos? Aquí les traigo este nuevo tutorial COMO INTEGRAR GOOGLE SHEETS CON WIX STUDIO. Podrás traer la información desde tu hoja de google hasta tu sitio en Wix gratis!

VER PRIMERO ESTE VÍDEO

https://youtu.be/Zf9LV_LBhdU

CONTINUA CON EL TUTORIAL ->

https://youtu.be/KtQ4EQKXsEU

Doc https://dev.wix.com/docs/velo/articles/velo-package-readmes/google-sheets-integration#googlesheetjs

CODE backend - getData.web.js

import { getValues } from '@velo/google-sheets-integration-backend';
import wixSecretsBackend from "wix-secrets-backend";

import { Permissions, webMethod } from "wix-web-module";

export const getSecretSheetId = webMethod(
    Permissions.Anyone,
    async () => {
        const id = await wixSecretsBackend.getSecret("sheetId");
        return id;
    }
)

export const getValuesWrapper = webMethod(
    Permissions.Anyone,
    async (range) => {
        try {
            validateRange(range);
            try {
                const sheetId = await getSecretSheetId();
                const result = await getValues(sheetId, range);
                const response = result.data.values;
                return response;
            } catch (err) {
                return Promise.reject("Get values failed. Info: " + err);
            }
        } catch (validationError) {
            return Promise.reject(validationError.toString());
        }
    }
)

export const validateRange = webMethod(
    Permissions.Anyone,
    (range) => {
        const regex = /([a-zA-Z0-9:!]+)/g;
        const match = range.match(regex);
        if (!match || match.length !== 1 || match[0] !== range) {
            throw new Error(`Input range is invalid (got: ${range})`);
        }
    }
)

---

CODE HOME (FRONTEND)

import { getValuesWrapper } from "backend/getData.web.js";

$w.onReady(function () {
    registerHandlers();
});

function registerHandlers() {
    $w("#getButton").onClick(() => getValuesFromSheet());
}

function setDataRepeater(dataObject) {
	dataObject.map((item, index)=> item._id = `tx${index}` )
    $w("#repeater1").data = dataObject;
    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#nombre").text = itemData.nombre;
        $item("#apellido").text = itemData.apellido;
        $item("#email").text = itemData.email;
        $item("#genero").text = itemData.genero;
    })
}

async function getValuesFromSheet() {
    try {
        const data = (await getValuesWrapper("A1:E6"));
        console.log("response", data);
        const headers = data[0];
        const rows = data.slice(1);

        let repeaterData = [];
        rows.forEach((row) => {
            const repeaterItem = {};
            row.forEach((col, index) => {
                repeaterItem[headers[index]] = col;
            })
            repeaterData.push(repeaterItem)
        })
        setDataRepeater(repeaterData)

        // $w("#nameOutput").value = nombre;
        // $w("#emailOutput").value = email;
    } catch (err) {
        showMessage(err.toString());
    }
}

function showMessage(msg) {
    $w("#showMsg").text = msg;
    $w("#showMsg").expand();
    setTimeout(() => {
        $w("#showMsg").collapse();
    }, 5000);
}

Gracias por llegar hasta aquí, deja tus comentarios!

---

#wix #code #velo #googlesheets #google #wix #integration #free #gratis