JavaScript магазин на Google Таблицах. Часть 1

[@GrourDenis]

Как же приятно наблюдать как работает профи ) Александр большое спасибо за то что делитесь знаниями!

[@RomanPoliakh]

По поводу того как обратиться к листам, есть не очевидный способ - в части ссылки которую мы дописываем после ID таблицы, вместо "/od6/" нужно написать "/1/", тогда ссылка будет соответствовать первому листу таблицы, "/2/" - второму листу и т.д., имена листов роли не играет.

[@НаталіяРезнік-я8х]

Спасибо! Я пол гугла перелопатила, но это лучшее и самое понятное видео, как использовать на сайте данные из гугл таблиц!

[@ДмитрийСамсонов-щ4ф]

Очень понравился урок, спасибо вам за знания и мы ждём продолжения.)

[@itgid]

Их есть у меня. Сегодня вечером или завтра утром будет.

[@user-kamesas]

Круто, вот видео по работе с гугл таблицами тяжело найти. Спасибо!!!

[@itgid]

Пожалуйста. Сам 2 или 3 дня документацию читал. У гугла очень плохо с документированием. Отстают на много версий.

[@choogoy]

Александр, спасибо за ваш труд) недели 2 назад столкнулся с проблемой чтения данных из гугл-таблицы. видимо изменился вид запроса, но теперь выдает ошибку 404. не могли бы вы помочь с этой проблемой. спасибо)

[@sancho-paska]

ребята, обратите внимание на скобки, которые в цикле ` ` . Я очень долго мучился, чтобы понять в чем проблема: в консоли вылетала ошибка "Failed to load resource: the server responded with a status of 404 (Not Found) ". Но когда присмотрелся внимательней - увидел, что это не простые одинарные кавычки, а те, которые возле тильды. JavaScript решает, спасибо за уроки! Балуете нас))))

[@ГрифонВещий]

Отлично! На ванильном JS вообще была бы красота. Конечно с точки зрения безопасности, такой подход сомнительный, хотя речь здесь о другом. Благодарю за урок!

[@stanisaw6894]

а что не так с безопасностью?

[@digitalturkistan1857]

Спасибо. я не успеваю учиться очень много полезных уроков

[@efreetomsk]

Отличное видео, большое спасибо! Было пару проблем с «Доступом» к таблице и с «`», но все получилось)) Большое спасибо за урок!!!!

[@ЮрийВаколов-с9с]

Спасибо большое за понятное объяснение и востребованное видео!

[@alekseyradari730]

автор КРУТЕЙШИЙ, дай бог ему здоровья и долгих лет жизни!

[@emil5861]

Очень даже интересно. С jQuery намного проще и наглядней. Все веб девелоперы обязаны знать хотябы его основы. Удачи!

[@GraxS]

В канаве будешь лежать со своим jQuery

[@eurorock5912]

Александр - спасибо за урок! Лайк и респект! Единственное - очень хочу, чтобы вы сделали курс по созданию чего-то (может простой информационный сайт) полностью, за что заказчик на фрилансе готов платить. Не кусочками, а целым проектом. На JS (наверное, Express.js + vue.js). Но это только мои хотелки...

[@itgid]

Понимаете, здесь разные цели. Для youtube нужны ролики небольшие по времени и с законченной мыслью. Проект - это много черновой работы не интересной пользователям. Его можно и нужно делать группой энтузиастов. Сейчас думаю над этой мыслью.

[@eurorock5912]

Александр, не соглашусь по поводу ютюба. Знаю много классных видео на английском по созданию всего проекта на JS, а значит - проблемы в ютюбе нет (могу ссылки предоставить). Но то, что это большой объём работы - согласен полностью) А если вы на этом не зарабатываете - то зачем вам надо тратить время и силы на это?) Здесь к вам претензий нет никаких, и так много хорошего сделали) Но моя мысль была в том, чтобы вы сделали видео по полному процессу создания чего-то законченного и необъёмного. Я не большой знаток JS, чтобы указать какие именно небольшие проекты можно делать, чтобы это было востребовано заказчиками сейчас или в ближайшем будущем. Просто помню ваше видео по "курсу биткоина", где вы упомянули про продолжение, но что-то я его не нашёл. Уверен, что вам самому трудно всё это систематизировать (разрозненные задачи обо всём), поэтому и хотелось бы чего-то цельного, от А до Я, но востребованного на рынке... Надеюсь, не отнял у вас много времени своей писаниной и мыслями) Добра вам!)

[@itgid]

Да, спасибо. Я думаю. Последние две недели думаю, вертиться мысль.

[@andreidetenkov]

Проект это очень много времени, а время это 💰. Вы готовы платить за контент?

[@eurorock5912]

Andrey Detenkov, да, здесь есть проблемка. В русском ютюбе монетизация за просмотры совсем не такая, как в нормальном, увы... Поэтому автору респект за то, что он делает это здесь. Что касается лично моей готовности, то я как раз-то и платил за курсы по моей специализации (вордпресс), пусть и находил потом почти такие же бесплатные. И если мне автор, Александр, покажет, на чём здесь мне можно зарабатывать с применением технологий на JS (а мне они реально нравятся), то я скажу даже больше - я буду заинтересован, чтобы он не делал их бесплатными, чтобы не плодить ненужную мне конкуренцию!))) Но проблема в том, что платных курсов хватает сейчас в интернете, а у Александра есть свой стиль и мне он нравится, но жду для себя практического применения) И причём мне-то интересны небольшие проекты, потому что я фрилансер, и мне никто не будет давать большие проекты, обычно ими занимаются целые команды. А вы, Андрей, что думаете про это?

[@jusupmunanbekov7477]

Очень добрейший разработчик

[@ВладимирК-ь9г]

Спасибо, отличный урок! Удачи Вам!

[@aeroxwood483]

Спасибо за Ваши уроки! Подскажите, пожалуйста, функцию showGoods можно назвать callback-функцией, если она вызывается из другой функции или callback это только функция, которая передается в качестве аргумента?

[@itgid]

CallBack функция - это функция которая будет вызвана после завершения основного кода функции. Имя callback передается в качестве аргумента. Поскольку у нас showGoods не передается в качестве аргумента (нужно смотреть код, на память не помню) - то назвать ее callback не корректно.

[@aeroxwood483]

Спасибо!

[@itgid]

Вам спасибо!

[@petrvictorovich]

А загрузка данных на Гугл - будет? Поделитесь актуальной информацией по ГуглАПИ!

[@АлександрГрадинар-ф7б]

Очень круто и просто. Благодарю)

[@ilyakozel5472]

Переписывали на чистый js?

[@dobrynia777]

Александр, а как делаются web-сервисы? Например кнопка заказа обратного звонка на сайт. У пользователя есть ЛК, в ЛК он может добавлять сайты. Для каждого сайта есть настройки кнопки (цвет, текст, куда отправлять заявку). На сайт подключается одним JS файлом. Где почитать как это делается? Не хотите на такую тему записать уроки? За видео лайк, также интересно как записывать заявки с сайта в Google таблицу.

[@ivandavydenko1278]

Подскажите, есть ли вариант на чистом js?

[@itgid]

Да

[@itsollustrifugate6955]

У меня есть база на sql, которая весит 700 терабайт, и в одной только таблице хранится 400 миллионов строк + 300 столбцов (параметров), а таблиц много. Данная база еще наполняется, через месяц будет увеличина как минимум в 2 раза))) Возможно такую "малюсенькую" базу данных разместить на Google Таблицах + сделать вывод этих данных на сайте?

[@alexkoch1063]

Спасибо отличное видео, но я тоже на чистый JS

[@GennadiyRybin]

Спасибо за поучительное видео! Вполне себе годное решение для лендинга, чтобы не городить WordPress. Жалко что в возвращаемом json только один лист таблицы, как ни пробовал - только первый лист. А так можно было бы и мультиязычность красиво сделать.

[@itgid]

Ну нужно понимать, что это суррогат - упрощенная до абсурда идея работы с базой. Поверьте сильно сложные проекты здесь делать можно но это будет намного сложнее чем работать с базой.

[@dmitriyegorov4764]

Очень крутой урок! Спасибо!

[@dimageorgiev5798]

Отличный урок спасибо !

[@andreidetenkov]

Ошибка была в том, что вы не закрыли кавычки " в подключении shop.js. Хотелось бы на vanilla JS все таки. Почему бы не оспользовать .map или for...of(in) ???

[@Хим-ик]

Для тех у кого будут ошибки с подключением таблицы. Файл => Опубликовать таблицу

[@АлександрГрадинар-ф7б]

Благодарю, помог)

[@yakut54]

Спасибо, дядька! Каждый раз что то новое от тебя узнаю =)

[@sherlockholmes494]

Спасибо!!! Жду продолжение!

[@АндрейА-ъ9у]

Александр,снова jquery....))))конечно js и только js

[@itgid]

Ну ок. Перепишу на JS.

[@АндрейА-ъ9у]

JavaScript решает спасибо

[@itgid]

Почему?

[@kawaikaino5277]

JavaScript решает не понимаю , стремления людей написать все на чистом js, в данном проекте - разницы не будет... ведь с jq эстетичнее код

[@ДмитрийШаповалов-б6е]

Есть просто те, которые не знают JQ ))

[@КсьонжикМихайло]

18:00 помогите пж... с этого момента у меня не получается...

[@amirkurbonov3098]

показывает ошибку Unexpected identifire в этой строке out += '${data[i]['gsx$name']['$t']}'; Не понимаю, в чем ошибка?

[@alexeska739]

Спасибо Вам JS ATLANT!!!!!!!!

[@andykud63]

Автору респект! Посмотрел не весь плейлист. С группированными строками есть ролик?

[@VladLive]

возможно задам странный вопрос, но может подскажет кто, как правильно добавить картинку в гугл таблицу, чтобы была ссылкой, как на примере. Спасибо)

[@itgid]

руками, прописали адрес.

[@VladLive]

не, не с платформы, а вот допустим свою картинку с компьютера, как добавить в таблицу, чтобы потом получит ссылку на нее?

[@itgid]

у вас даже с обычным сайтом так не получиться, для начала вы должны загрузить картинку на сервер доступный в сети интернет, и потом давать на нее ссылку. Вы можете, кстати, загрузить картнику в папку на гугл документах, сделать картинку доступной, скопировать на нее ссылку и вставить в таблицу.

[@wepko]

А так можно ? Афигеный видео ролик

[@itgid]

Ага!

[@mvlikhachev]

интересно бы было разобрать реализацию кнопки "добавить товар" чтобы он в гугл таблицы добавлял следующую строку)

[@DiHandUkr]

по состоянию на 2018-07-14 вот что выдает Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на spreadsheets.google.com/ (лист расшарен на полный доступ всему инету был)

[@Yaleks91]

Файл => Опубликовать таблицу, ссылку менять не надо, мне помогло, может кому спустя года будет актуально)

[@GloriousJenya]

однозначно лойс ждем еще серий

[@H336-p1v]

Еее, звук божественный 👌👌👌

[@miragemirage2328]

А что на счет индексации данных товаров, картинки будут ли кэшироваться? Спасибо за крутую наводку.

[@nat.Donskaya]

Спасибо, очень полезные видео!!! Пожалуйста, подскажите, есть возможность получить текстовую версию кодов из уроков?

[@vvv7220]

Интересно, а можно ли использовать гугл таблицу со списком юзеров которым разрешен вход на сайт? Типа такой базы данных. Я хочу сделать корпоративный сайт на 100 человек работников которые работают в нашем цехе. Но сайт динамическим делать не хочется, так как пока мало знаний для этого.

[@itgid]

можно, но по ссылке может получить человек доступ к google таблице и увидеть данные. А ссылку он может вытянуть из кода.

[@sancho-paska]

это не сложно реализовать на PHP и MySQL

[@itgid]

это и нужно делать с помощью backend.

[@vvv7220]

Да это не важно. Сайт ничего секретного не содержит. А вход работников по табельному номеру, чисто для статистики посещения. Да понятно что надо делать с базой данных плюс php. Но я еще яваскрипт азы только осваиваю

[@david_9891]

Здравствуйте! Можно потом сделать видео про разбивку товаров по категориям? С разными таблицами

[@itgid]

У меня чувство, что вы уже взяли заказ :)

[@david_9891]

JavaScript решает Ну если можно, сделайте такие уроки

[@olegtok]

мне тоже интересно, как можно таблицу на разные группы разбить, но не для магазина, а я адаптирую, чтобы выводить список песен и разбивать их по жанрам. а песни в таблицу забивать, сделав предварительно дополнительный столбец с жанрами

[@itgid]

Можно и по группам. Просто реализация категорий может быть разными способами. Постараюсь сделать.

[@shtas89]

Спасибо Александр! Очень помогло ваше видео про таблицы. Пожалуйста подскажите как обратиться к другим листам этого же документа (у меня несколько листов а данные вижу только с первого)

[@ashama8699]

а как подключится к второму листу ?

[@itgid]

Посмотрите вывод массивов, там есть ссылки на листы!

[@VellarionVVS]

@@itgid Можно поподробнее, я не нашел ссылок на листы

[@m2in-mandms]

Здравствуйте, Алекс. Спасибо Вам за нелёгкий труд по просвещению в области IT-технологий. Несколько месяцев назад опираясь на Ваши уроки и в частности на материалы ЭТОГО (JavaScript магазин на Google Таблицах) плейлиста сделал себе сайт-учёта работ своих учеников (преподаю в IT Академии Шаг Гомель РБ). На днях решил создать новую таблицу и соответственно сайт по новым группам и НЕ смог подключиться к Google-таблицам по описанному Вами способу (ни JS, ни Jquery не помогли) выдаёт ошибку загрузки данных... Видимо что-то поменялось в API-методах. Хотя надо признать что сайт, сделанный несколько месяцев назад, продолжает исправно работать... Пытался самостоятельно разобраться с документацией, но знаний и опыта не хватило :( Если есть возможность-желание, сделайте видео-урок дополнение к этому плейлисту с разъяснениями по загрузке Google-таблиц. Заранее ОГРОМНОЕ спасибо...

[@m2in-mandms]

и ещё - а можно показать как сделать подключение не google-таблиц, а просто excel-файла, который будет или на хосте с сайтом (в его каталоге) или в облаке???

[@AlekseyNaumov_734]

google перешел с API v3 на API v4. Я вот тоже озадачился этой проблемой, пока не могу найти решение по подключению таблиц.

[@ashjj5306]

Забыл вставить закрывающую кавычку по этому ошибку давал "shop/shop.js (10:40)

[@kawaikaino5277]

решил повторить и получил в консоли "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access"

[@kawaikaino5277]

Не, все перепробовал - не работает... Даже нашел в документации demo. developers.google.com/gdata/samples/spreadsheet_sample Тупо висит Loading..........

[@itgid]

Смотрите, работа с AJAX и JSON - это работа с протоколом http, т.е. обращение к серверу. Мы сейчас запускаем это локально без сервера, из-за чего браузер ругается на cross-origin request. По хорошему если вы закинете решение в интернет - проблем не будет. Чтобы запускать локально пробуйте в Firefox - она разрешает запросы, хоть и ругается, или последние версии Хрома.

[@itgid]

Также такой вывод может быть если доступ на стороне таблиц открыт неверно.

[@olegtok]

тоже не работает. попробовал в Firefox - ошибка следующая: Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на spreadsheets.google.com/feeds/list/bla-bla-bla/od6/public/values?alt=json. (Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»). Соответсвенно, вместо bla-bla-bla - адрес ссылки. В доступе стоит, доступ для чтения всем, кто имеет ссылку

[@olegtok]

немного разобрался, если использовать ссылку на ваш файл, то все работает, соответственно, что-то не так с доступом к моему файлу, хотя у меня все настройки такие же, как в вашем демо, однако вы взяли уже готовую таблицу с настроенными доступами и не показали, что именно вы включали, возможно, какой-то пункт я упустил и, похоже, не я один.. покажите, пожалуйста, что именно надо включить в доступе (по шагам). спасибо

[@ФахриддинМирзак]

Здраствуйте можете подсказать API Sheets v3 был отклонен. Как можно подключить новый верси??

[@ШамильАлисултанов-т6э]

Крутой видос :-)

[@itgid]

Спасибо!

[@aNDy-qh1em]

Крятяк, молодца, отличный видос! Может еще покажешь как обновлять таблицу с товаром из базы, скажем MySQL? А также как передавать данные в таблицу ..

[@ДмитрийШаповалов-б6е]

Круто ! )

[@itgid]

Спасибо!

[@ДмитрийШаповалов-б6е]

Так это Вам спасибо. Очень ценный и полезный материал делаете. ) И главное, материал преподносится понятно и хорошо. )

[@mishafomin3973]

Добрый день. У меня есть прайс(гугл таблица) к которому доступ по ссылке. Как можно его парсить подскажите плиз?

[@heegru]

Александр, посмотрите пожалуйста мой урок по созданию интернет магазина на гугл таблицах kzbin.info/www/bejne/eWqWhJmQp8t3f7M У вас в видео есть небольшая неточность. Когда вы подключаете API вы используете ссылку со словом public. На сколько я помню, в этом случае документ должен быть не только открыт для чтения, но и еще и опубликован. А в видео вы про публикацию не говорите.

[@СытыйКролик-ъ7ы]

Помогите, как создать 2 таблицы с 2 разными товарами, или как между например 10 товаров над 5 поставить, например, "Игрушки" а в первой что бы оставался "Google shop"

[@УрдабаевБахытжан]

Всем добра!!! А этот способ все ще актуален на 04.03.2020?

[@КтотоНезнает]

как просто загрузить готовый шаблон сайта в гугл диск чтобы он радотал,а не показывал html код при переходе,или все файлы в папке шаблона.

[@FaceBook-bd3xo]

а вы выложите данный код?

[@АндрейДемидов-с1х]

Не работал код в начале, потому что не было закрывающих двойных кавычек ", в подключении js файла.

[@СергейТ-ц3ь]

нифига что то не работает. Где то можно скачать ваш пример?

[@monolit-8346]

Это безопаснее php my Admin?

[@itgid]

о какой безопасности может идти речь если эти таблицы доступны всем?

[@monolit-8346]

Если с ключом доступа сделать?

[@ashama8699]

добрый день, как получить доступ к следующим листам кто знает?

[@itgid]

В приходящем массиве вроде есть листы?

[@ashama8699]

ссылку можете оставить буду очень благодарен

[@itgid]

Как дома буду,

[@ashama8699]

хорошо , ооочень буду ждать )))

[@ashama8699]

буду ждать, очень

[@sevdev9374]

Jquery работает нормально, часть функций отваливается из за slim версии, если поправить на min все будет ок проверено.

[@denisborisov4749]

У некоторых может js не запуститься, попробуйте в html написать ""

[@nikolasexpress7005]

Вот такая промлема в меня Failed to load docs.google.com/spreadsheets/d/1mSYUTZYX9dTjDQS0YCFWHQZrnfdziRsgt3MdgTdkca0/edit?usp=sharing: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. переискал весь нет и нет ответа

[@antonbuketov1072]

попробуй задачку сделать, перевести число в пропись, на js. 100 -> сто.

[@kapotonai]

Помогите пожалуйста.Запускаю на OpenServere. $(document).ready(function(){ $.getJSON("docs.google.com/spreadsheets/d/1fTmeg-_D9blzxjnHeT4gEmLJCvsd4VA2REYawHRdkoc/edit#gid=0",function(data){ console.log(data); }); }) В консоли выдает: Failed to load docs.google.com/spreadsheets/d/1fTmeg-_D9blzxjnHeT4gEmLJCvsd4VA2REYawHRdkoc/edit#gid=0: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. Доступ выставлял для всех.Что я делаю не правильно?

[@РоманТамазян-е2ж]

Понравилась !!!!

[@КсьонжикМихайло]

извените у меня появилась проблема... мне говорит syntaxError

[@itgid]

без вашего кода ничем не могу помочь.

[@КсьонжикМихайло]

Сделайте переход с кнопки купить на новую страницу с этим товаром

[@dimitripasmore]

GetJSON не работает.

[@alexandrbrown3801]

У меня возникла проблема с возвратом json. В ссылке поменял "od6" на "1". Может кому пригодится

[@seonhighlightsvods9193]

Я розумію, шо модуль магазину на гугл таблицях цікаво, за що і дякую,але в мене є ідея для наступного міні курсу. Створення внутрішньо сайтової валюти, яка дається за певні дії, наприклад, як голоси в вк (щоправда там не за дії) ну але суть думаю зрозуміла. Проте там , мабуть, потрібно використаим MySQL для збереження так званих очків на сайті, що не є зовсім темою вашого каналу

[@itgid]

добрий день спасибі . Якщо можна - докладніше обьясните, дуже цікава ідея

[@seonhighlightsvods9193]

JavaScript решает дякую за відповідь, тобто створити сайт на якому потрібна реєстрація для кожного учасника і власний профіль і за певній дії користувачу будуть нараховуватись умовні очки і він буде мати якесь місце в рейтингу. Скажемо подібне є на шахових сайтах де є рейтинг по виграних партіях. Не знаю чи це буде вам цікаво і чи підійте каналу, адже там використовувати прийдеться не лише js

[@itgid]

цікаво, але виходить потрібен ресурс на якому ці бали будуть нараховуватися?

[@seonhighlightsvods9193]

JavaScript решает мабуть, якщо чесно я ще не дуже шарю в вебі , але ідея є. Дякую за канал і успіхів. А і можна запитання де ви навчались і де краще вчитись програмісту ?

[@itgid]

Навчався сам. Інтернет в основному.

[@antonustinoff7716]

В данный момент этот способ не рабочий к сожалению...

[@petrvictorovich]

Разработаю интернет-магазин - дёшево! Срок 3 дня. =)

[@monolit-8346]

Вау!

[@НадеждаКотельникова-щ5п]

Как же избежать ошибки блокировки все-таки? Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на cors.io.spreadsheets.google.com/feeds/list/1GVl_DtW3OUkKpDMpAwbC31-H9dilqcJz48EooJaSqcQ/od6/public/values?alt=json. (Причина: не удалось выполнить запрос CORS).

[@timurtimurov9431]

У кого будет CORS ошибка поменяйте od6 на 1

[@ISmarket]

у меня все равно не работает

[@NeedForHeavyMetal]

Кто из 2022? получилось обратиться к таблицам?

[@ЛитвинЛюбомир-р1ч]

а Appscript? Америка на ньому сидить) крута технологія

[@fannik7603]

+