ОБНОВЛЕНИЕ: 30.07.18 Instagram обновил общий доступ к своему медиа JSON, поэтому теперь вам нужно войти на instagram.com в браузере, чтобы использовать Evertab. Но теперь вы можете видеть и личные аккаунты, на которые вы подписаны!

Хотя я многому научился за время работы в Академии Грейс Хоппер, я никогда не строил ничего самостоятельно. У меня всегда была команда. Было здорово работать в команде, особенно с некоторыми из самых умных и трудолюбивых людей, которых я знаю в своей жизни. Однако это никогда не заставляло меня учиться самостоятельно. Я научился, и я определенно внес большой вклад, но всегда была зависимость, в моей голове всегда была мысль: «Да ничего страшного, если я не знаю, моя команда позаботится об этом и научит меня. ”

Теперь, когда я закончил учебу, тренировочные колеса отключены. Нет больше подстраховки. Сейчас я «инженер-программист». Мне нужна уверенность в том, что я могу создавать и изучать вещи самостоятельно.

Сначала я отталкивал это, в основном из-за страха: что, если я начну и наткнусь на препятствия, и я не смогу их разрешить? Что, если я пытаюсь использовать свои новые навыки, а потом понимаю, что на самом деле ничему не научился? Что, если после всей тяжелой работы и времени я просто не стану инженером-программистом? И все было бы напрасно.

Но затем у меня был момент «соберись, женщина». Я знаю, что могу это сделать. Я знаю, что не дурак. Я знаю, что способен. Итак, я начал работать над расширением Chrome.

Зачатие

Я решил сделать что-то, что заменит страницу новой вкладки по умолчанию. Изначально я получил идею от использования Momentum. Потом моя подруга Рэйчел сделала Archillension. После того, как я посмотрел на оба этих прекрасно сделанных расширения, я начал спрашивать: А что, если я хочу создать что-то, что использует изображения от« @assemblyapp , компании, у которой есть мобильное приложение, в котором люди могут создавать графический дизайн». Я всегда рад, когда они публикуют новую картинку, и я хочу, чтобы она была на моей новой вкладке!

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

Имея в виду, я начал свой путь # IMadeAThing.

Instagram API - это боль, с которой работать 😱

Когда я проводил свое исследование, я натолкнулся на то, что https://www.instagram.com/[user_id ]/mpmedia предоставит вам объект JSON со всей информацией этого человека (последние 20 сообщений). Так что я подумал: «Отлично! Я могу просто отправить запрос на получение ajax! Это достаточно просто! " Но потом я узнал о CORS.

Механизм совместного использования ресурсов между источниками (CORS) останавливает междоменный доступ к данным и, таким образом, не позволяет моему расширению получать данные с instagram.com. Итак, я решил использовать Instagram API. Введите первый Roadblock. Что такое URI перенаправления для расширения Chrome, у которого нет сервера? После долгого времени Stackoverflowing я решил создать учетную запись Instagram для своего расширения, чтобы я мог использовать URL-адрес.

Instagram очень строг в отношении того, к чему пользователи песочницы могут и не могут получить доступ через его API. Вот и второе препятствие: разработчики больше не могут использовать API для «разовых» проектов, то есть они не могут искать мультимедиа с помощью тега. Поскольку это действительно не препятствие, через которое я мог бы перепрыгнуть, я отклонился: мое расширение может отображать мультимедиа только от указанного имени пользователя.

После настройки HTML / CSS (что было для меня концом) я научился извлекать контент из Instagram API. Но затем наступает мой третий блокпост. Я мог использовать только свою учетную запись, так как пользователи песочницы могут только просматривать медиафайлы других пользователей песочницы в вашем приложении (чтобы получить пользователей песочницы в вашем приложении, вам нужно будет пригласить их, и они должны будут принять). Поэтому, будучи единственным пользователем расширения, работать будет только мой токен доступа.

Ну почему у меня нет доступа к режиму разработки! Да, это моя четвертая реклама в формате Roadblock 3.1. Instagram разрешает разработчикам доступ к своему API только для определенных случаев использования.

Половина из этих вариантов выдала мне сообщение «не поддерживается». Даже для тех, кого они поддерживают, они потребовали от меня заполнить заявку, которая включает видео-скринкаст. Поэтому я сделал скринкаст, зная, что с вероятностью 99% они не одобрят. (Также спасибо Instagram за такую ​​безопасность 👏.)

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

После 30 минут дуться наступил еще один момент «соберись, женщина». Я подумал про себя: «должен быть способ». Я вернулась к своему верному парню, он же Google.

Оказалось, что мои навыки поиска в Google не помогли

Если вы еще не подумали об этом до этого момента, вот оно. $ .getJSON. Как. Делал. I. Мисс. Это?!? !!? Я определенно пытался выяснить, как получить URL-адреса из «https://www.instagram.com/[user_id visible/pivemedia. И я каким-то образом позволил этому драгоценному камню $ .getJSON ускользнуть.

Благодаря этим новообретенным знаниям я был одновременно взволнован и немного опечален. В восторге от того, что я мог продолжать что-то делать, мне было также грустно, потому что я не использовал много кода, на написание которого тратил много времени. Но волнение определенно превзошло печаль (особенно зная, что теперь мне не нужно беспокоиться о безопасном хранении токенов доступа). Итак, я вернулся к этому. А потом ... внезапно все готово.

Эвертаб

Спустя бесчисленное количество часов мое расширение, Evertab, наконец, готово (получите его здесь 😃). Я назвал его Evertab, потому что это постоянно меняющаяся вкладка, и, конечно же, я разработал логотип с помощью Assembly.

Я почти уверен, что прослезился, когда пробовал свое новое творение.

Поскольку Evertab принимает любые публичные дескрипторы Instagram, существует бесчисленное множество комбинаций фотографий. Я сидел за своим столом, проводил час, пробуя разные ручки, и каждый раз это был новый опыт!

Что я узнал как разработчик и как личность

Оглядываясь назад, я понимаю, что ни одно из моих препятствий на пути не было действительно препятствием. Для неопытного разработчика были просто трудности. Но знаете что, я ОЧЕНЬ горжусь собой. Это первый сольный проект, над которым я работал, и он много для меня значит. Это определенно было путешествие, и я многому научился на этом пути.

Вот несколько вещей, которые я узнал:

Технически

Подробная информация о создании расширения для Chrome

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

API веб-хранилища

Это было похоже на волшебство, когда данные сохраняются.

Instagram API

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

jQuery, HTML5 и& CSS

Я бы не сказал, что научился этому в ходе этого проекта. Это были все вещи, которые я знал раньше, но забыл (некоторые из них) из-за того, что нечасто использовал их. Было определенно много моментов типа «о да, это». И, конечно же, я отточил свои навыки работы с флексбоксом.

Управление проектом

Я научился управлять своим временем для проекта. Определенно возможно самостоятельно следовать гибкой методологии. Я также узнал, что в следующий раз мне следует потратить больше времени на исследования, прежде чем на самом деле заниматься кодированием. Это предотвратит еще один момент $ .getJSON и сэкономит драгоценное время.

Лично
я сильно вырос на этом пути. Было много раз, когда я хотел сдаться, но каждый раз, когда это происходило, я выходил из этого. Я понял, что пока я продолжаю настаивать, все возможно. Это вселило во меня уверенность, и я очень рад работать над своим следующим проектом - сайтом с полным портфолио.

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

Я вижу свое будущее, имея гораздо больше разных проектов. И еще мне не терпится устроиться на работу профессиональным инженером (да, я ищу! См. Мое резюме здесь!) Я не инженер-программист, я инженер-программист.

А пока наслаждайтесь Evertab (см. Скриншоты ниже) и оставляйте мне отзывы!

Да, и я также научился писать сообщения в блоге.

- люблю, Кайсин 🐙