[{"data":1,"prerenderedAt":616},["ShallowReactive",2],{"navigation-id":3,"page-\u002Fid\u002Ftutorials\u002Fcsv-catalog-tutorial":133,"\u002Fid\u002Ftutorials\u002Fcsv-catalog-tutorial-surround":611},[4],{"title":5,"path":6,"stem":7,"children":8,"page":26},"Id","\u002Fid","id",[9,27,48,77,90,96],{"title":10,"path":11,"stem":12,"children":13,"page":26},"Panduan Memulai","\u002Fid\u002Fgetting-started","id\u002F1.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Pengenalan","\u002Fid\u002Fgetting-started\u002Fintroduction","id\u002F1.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Instalasi","\u002Fid\u002Fgetting-started\u002Finstallation","id\u002F1.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"Referensi Konfigurasi","\u002Fid\u002Fgetting-started\u002Fconfiguration","id\u002F1.getting-started\u002F3.configuration",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Composables","\u002Fid\u002Fcomposables","id\u002F2.composables",[32,36,40,44],{"title":33,"path":34,"stem":35},"useGSheet","\u002Fid\u002Fcomposables\u002Fuse-gsheet","id\u002F2.composables\u002F1.use-gsheet",{"title":37,"path":38,"stem":39},"useGSheetAsObject","\u002Fid\u002Fcomposables\u002Fuse-gsheet-as-object","id\u002F2.composables\u002F2.use-gsheet-as-object",{"title":41,"path":42,"stem":43},"useGSheetRow","\u002Fid\u002Fcomposables\u002Fuse-gsheet-row","id\u002F2.composables\u002F3.use-gsheet-row",{"title":45,"path":46,"stem":47},"useGSheetWrite","\u002Fid\u002Fcomposables\u002Fuse-gsheet-write","id\u002F2.composables\u002F4.use-gsheet-write",{"title":49,"path":50,"stem":51,"children":52,"page":26},"Mode Autentikasi","\u002Fid\u002Fauth-modes","id\u002F3.auth-modes",[53,57,61,65,69,73],{"title":54,"path":55,"stem":56},"Gambaran Umum Mode Autentikasi","\u002Fid\u002Fauth-modes\u002Foverview","id\u002F3.auth-modes\u002F1.overview",{"title":58,"path":59,"stem":60},"Mode GViz (Google Visualization API)","\u002Fid\u002Fauth-modes\u002Fgviz","id\u002F3.auth-modes\u002F2.gviz",{"title":62,"path":63,"stem":64},"Mode Ekspor CSV","\u002Fid\u002Fauth-modes\u002Fcsv","id\u002F3.auth-modes\u002F3.csv",{"title":66,"path":67,"stem":68},"Mode Google Apps Script","\u002Fid\u002Fauth-modes\u002Fappscript","id\u002F3.auth-modes\u002F4.appscript",{"title":70,"path":71,"stem":72},"Mode API Key","\u002Fid\u002Fauth-modes\u002Fapikey","id\u002F3.auth-modes\u002F5.apikey",{"title":74,"path":75,"stem":76},"Mode Service Account","\u002Fid\u002Fauth-modes\u002Fservice-account","id\u002F3.auth-modes\u002F6.service-account",{"title":78,"path":79,"stem":80,"children":81,"page":26},"Integrasi AI","\u002Fid\u002Fai","id\u002F4.ai",[82,86],{"title":83,"path":84,"stem":85},"Agent Skills (Integrasi AI)","\u002Fid\u002Fai\u002Fagent-skills","id\u002F4.ai\u002F1.agent-skills",{"title":87,"path":88,"stem":89},"Model Context Protocol (MCP)","\u002Fid\u002Fai\u002Fmcp","id\u002F4.ai\u002F2.mcp",{"title":91,"path":92,"stem":93,"children":94},"Demo Langsung","\u002Fid\u002Fdemos","id\u002F5.demos\u002Findex",[95],{"title":91,"path":92,"stem":93},{"title":97,"path":98,"stem":99,"children":100,"page":26},"Tutorial Praktis","\u002Fid\u002Ftutorials","id\u002F6.tutorials",[101,105,109,113,117,121,125,129],{"title":102,"path":103,"stem":104},"Gambaran Umum Tutorial","\u002Fid\u002Ftutorials\u002Foverview","id\u002F6.tutorials\u002F0.overview",{"title":106,"path":107,"stem":108},"Tutorial Apps Script Web App","\u002Fid\u002Ftutorials\u002Fappscript-tutorial","id\u002F6.tutorials\u002F1.appscript-tutorial",{"title":110,"path":111,"stem":112},"Tutorial Langkah demi Langkah Lengkap","\u002Fid\u002Ftutorials\u002Fstep-by-step","id\u002F6.tutorials\u002F1.step-by-step",{"title":114,"path":115,"stem":116},"Tutorial Analytics GViz SQL","\u002Fid\u002Ftutorials\u002Fgviz-sql-tutorial","id\u002F6.tutorials\u002F2.gviz-sql-tutorial",{"title":118,"path":119,"stem":120},"Tutorial Katalog Produk CSV","\u002Fid\u002Ftutorials\u002Fcsv-catalog-tutorial","id\u002F6.tutorials\u002F3.csv-catalog-tutorial",{"title":122,"path":123,"stem":124},"Tutorial Inventaris API Key","\u002Fid\u002Ftutorials\u002Fapikey-tutorial","id\u002F6.tutorials\u002F4.apikey-tutorial",{"title":126,"path":127,"stem":128},"Tutorial HR & Payroll Service Account","\u002Fid\u002Ftutorials\u002Fservice-account-tutorial","id\u002F6.tutorials\u002F5.service-account-tutorial",{"title":130,"path":131,"stem":132},"Tutorial Sheet Routing Map","\u002Fid\u002Ftutorials\u002Fsheets-routing-tutorial","id\u002F6.tutorials\u002F6.sheets-routing-tutorial",{"id":134,"title":118,"body":135,"description":605,"extension":606,"icon":607,"links":607,"meta":608,"navigation":607,"path":119,"seo":609,"stem":120,"__hash__":610},"docs_id\u002Fid\u002F6.tutorials\u002F3.csv-catalog-tutorial.md",{"type":136,"value":137,"toc":601},"minimark",[138,142,145,150,176,192,194,198,597],[139,140,141],"p",{},"Pelajari cara me-stream data CSV mentah dari Google Sheets publik untuk merender katalog produk berkinerja tinggi.",[143,144],"hr",{},[146,147,149],"h2",{"id":148},"_1-setup","1. Setup",[151,152,153,162,168],"ol",{},[154,155,156,157,161],"li",{},"Buat Google Sheet publik bernama ",[158,159,160],"strong",{},"Katalog Toko",".",[154,163,164,165,161],{},"Bagikan sheet sebagai ",[158,166,167],{},"Anyone with the link can view",[154,169,170,171,175],{},"Tambahkan Spreadsheet ID ke ",[172,173,174],"code",{},".env",":",[177,178,183],"pre",{"className":179,"code":180,"filename":174,"language":181,"meta":182,"style":182},"language-env shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","GSHEET_SPREADSHEET_ID=spreadsheet-id-publik-kamu\n","env","",[172,184,185],{"__ignoreMap":182},[186,187,190],"span",{"class":188,"line":189},"line",1,[186,191,180],{},[143,193],{},[146,195,197],{"id":196},"_2-implementasi-komponen-vue","2. Implementasi Komponen Vue",[177,199,204],{"className":200,"code":201,"filename":202,"language":203,"meta":182,"style":182},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Ambil grid CSV mentah\nconst { data: rawRows, pending } = await useGSheet('A1:E100', {\n  sheet: 'products'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"catalog\">\n    \u003Ch1>Katalog Toko Publik\u003C\u002Fh1>\n\n    \u003Cdiv v-if=\"pending\">\n      Me-stream data CSV...\n    \u003C\u002Fdiv>\n    \u003Ctable v-else>\n      \u003Ctr\n        v-for=\"(row, rIdx) in rawRows\"\n        :key=\"rIdx\"\n      >\n        \u003Ctd\n          v-for=\"(cell, cIdx) in row\"\n          :key=\"cIdx\"\n        >\n          {{ cell }}\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftable>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Fcatalog.vue","vue",[172,205,206,238,245,299,316,324,334,341,351,374,395,400,421,427,437,450,459,475,490,496,505,520,535,541,547,558,569,578,588],{"__ignoreMap":182},[186,207,208,212,216,220,223,226,229,233,235],{"class":188,"line":189},[186,209,211],{"class":210},"sMK4o","\u003C",[186,213,215],{"class":214},"swJcz","script",[186,217,219],{"class":218},"spNyl"," setup",[186,221,222],{"class":218}," lang",[186,224,225],{"class":210},"=",[186,227,228],{"class":210},"\"",[186,230,232],{"class":231},"sfazB","ts",[186,234,228],{"class":210},[186,236,237],{"class":210},">\n",[186,239,241],{"class":188,"line":240},2,[186,242,244],{"class":243},"sHwdD","\u002F\u002F Ambil grid CSV mentah\n",[186,246,248,251,254,257,259,263,266,269,272,275,279,283,286,289,292,294,296],{"class":188,"line":247},3,[186,249,250],{"class":218},"const",[186,252,253],{"class":210}," {",[186,255,256],{"class":214}," data",[186,258,175],{"class":210},[186,260,262],{"class":261},"sTEyZ"," rawRows",[186,264,265],{"class":210},",",[186,267,268],{"class":261}," pending ",[186,270,271],{"class":210},"}",[186,273,274],{"class":210}," =",[186,276,278],{"class":277},"s7zQu"," await",[186,280,282],{"class":281},"s2Zo4"," useGSheet",[186,284,285],{"class":261},"(",[186,287,288],{"class":210},"'",[186,290,291],{"class":231},"A1:E100",[186,293,288],{"class":210},[186,295,265],{"class":210},[186,297,298],{"class":210}," {\n",[186,300,302,305,307,310,313],{"class":188,"line":301},4,[186,303,304],{"class":214},"  sheet",[186,306,175],{"class":210},[186,308,309],{"class":210}," '",[186,311,312],{"class":231},"products",[186,314,315],{"class":210},"'\n",[186,317,319,321],{"class":188,"line":318},5,[186,320,271],{"class":210},[186,322,323],{"class":261},")\n",[186,325,327,330,332],{"class":188,"line":326},6,[186,328,329],{"class":210},"\u003C\u002F",[186,331,215],{"class":214},[186,333,237],{"class":210},[186,335,337],{"class":188,"line":336},7,[186,338,340],{"emptyLinePlaceholder":339},true,"\n",[186,342,344,346,349],{"class":188,"line":343},8,[186,345,211],{"class":210},[186,347,348],{"class":214},"template",[186,350,237],{"class":210},[186,352,354,357,360,363,365,367,370,372],{"class":188,"line":353},9,[186,355,356],{"class":210},"  \u003C",[186,358,359],{"class":214},"div",[186,361,362],{"class":218}," class",[186,364,225],{"class":210},[186,366,228],{"class":210},[186,368,369],{"class":231},"catalog",[186,371,228],{"class":210},[186,373,237],{"class":210},[186,375,377,380,383,386,389,391,393],{"class":188,"line":376},10,[186,378,379],{"class":210},"    \u003C",[186,381,382],{"class":214},"h1",[186,384,385],{"class":210},">",[186,387,388],{"class":261},"Katalog Toko Publik",[186,390,329],{"class":210},[186,392,382],{"class":214},[186,394,237],{"class":210},[186,396,398],{"class":188,"line":397},11,[186,399,340],{"emptyLinePlaceholder":339},[186,401,403,405,407,410,412,414,417,419],{"class":188,"line":402},12,[186,404,379],{"class":210},[186,406,359],{"class":214},[186,408,409],{"class":218}," v-if",[186,411,225],{"class":210},[186,413,228],{"class":210},[186,415,416],{"class":231},"pending",[186,418,228],{"class":210},[186,420,237],{"class":210},[186,422,424],{"class":188,"line":423},13,[186,425,426],{"class":261},"      Me-stream data CSV...\n",[186,428,430,433,435],{"class":188,"line":429},14,[186,431,432],{"class":210},"    \u003C\u002F",[186,434,359],{"class":214},[186,436,237],{"class":210},[186,438,440,442,445,448],{"class":188,"line":439},15,[186,441,379],{"class":210},[186,443,444],{"class":214},"table",[186,446,447],{"class":218}," v-else",[186,449,237],{"class":210},[186,451,453,456],{"class":188,"line":452},16,[186,454,455],{"class":210},"      \u003C",[186,457,458],{"class":214},"tr\n",[186,460,462,465,467,469,472],{"class":188,"line":461},17,[186,463,464],{"class":218},"        v-for",[186,466,225],{"class":210},[186,468,228],{"class":210},[186,470,471],{"class":231},"(row, rIdx) in rawRows",[186,473,474],{"class":210},"\"\n",[186,476,478,481,483,485,488],{"class":188,"line":477},18,[186,479,480],{"class":218},"        :key",[186,482,225],{"class":210},[186,484,228],{"class":210},[186,486,487],{"class":231},"rIdx",[186,489,474],{"class":210},[186,491,493],{"class":188,"line":492},19,[186,494,495],{"class":210},"      >\n",[186,497,499,502],{"class":188,"line":498},20,[186,500,501],{"class":210},"        \u003C",[186,503,504],{"class":214},"td\n",[186,506,508,511,513,515,518],{"class":188,"line":507},21,[186,509,510],{"class":218},"          v-for",[186,512,225],{"class":210},[186,514,228],{"class":210},[186,516,517],{"class":231},"(cell, cIdx) in row",[186,519,474],{"class":210},[186,521,523,526,528,530,533],{"class":188,"line":522},22,[186,524,525],{"class":218},"          :key",[186,527,225],{"class":210},[186,529,228],{"class":210},[186,531,532],{"class":231},"cIdx",[186,534,474],{"class":210},[186,536,538],{"class":188,"line":537},23,[186,539,540],{"class":210},"        >\n",[186,542,544],{"class":188,"line":543},24,[186,545,546],{"class":261},"          {{ cell }}\n",[186,548,550,553,556],{"class":188,"line":549},25,[186,551,552],{"class":210},"        \u003C\u002F",[186,554,555],{"class":214},"td",[186,557,237],{"class":210},[186,559,561,564,567],{"class":188,"line":560},26,[186,562,563],{"class":210},"      \u003C\u002F",[186,565,566],{"class":214},"tr",[186,568,237],{"class":210},[186,570,572,574,576],{"class":188,"line":571},27,[186,573,432],{"class":210},[186,575,444],{"class":214},[186,577,237],{"class":210},[186,579,581,584,586],{"class":188,"line":580},28,[186,582,583],{"class":210},"  \u003C\u002F",[186,585,359],{"class":214},[186,587,237],{"class":210},[186,589,591,593,595],{"class":188,"line":590},29,[186,592,329],{"class":210},[186,594,348],{"class":214},[186,596,237],{"class":210},[598,599,600],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":182,"searchDepth":189,"depth":240,"links":602},[603,604],{"id":148,"depth":240,"text":149},{"id":196,"depth":240,"text":197},"Bangun katalog produk e-commerce menggunakan stream ekspor CSV langsung.","md",null,{},{"title":118,"description":605},"_OWtKAHoC7BV9Q4XtgPFWHwCDTyCyVk6iocWCDFpMO4",[612,614],{"title":114,"path":115,"stem":116,"description":613,"children":-1},"Bangun dashboard analitik penjualan dinamis dengan filter query SQL GViz.",{"title":122,"path":123,"stem":124,"description":615,"children":-1},"Bangun sistem pelacak stok & inventaris publik menggunakan GCP API Key.",1786088234721]