Как многие из вас знают, я получил свою первую работу разработчика в конце июня и подумал, что было бы здорово использовать поставленную передо мной задачу в качестве темы сегодняшней статьи.
Важно отметить, что я использовал React для создания своего проекта, но это можно было бы сделать с помощью любой внешней среды или «ванильного JavaScript».
Ниже приведен список тем, которые мы рассмотрим:
- Доступ к Quip Automation API
- Создание электронных таблиц/документов с помощью API Quip
- Установка и использование библиотеки Axios (это необязательно, и вы можете делать запросы к API без нее, но мне нравится синтаксис)
- Использование пакета qs для упорядочивания запросов (это не является обязательным требованием, но я хотел попробовать что-то новое, и если это не срабатывало, у меня всегда был запасной вариант, зная, что Axios по умолчанию упорядочивает мои запросы)
- Выполнение запросов POST и GET
Для контекста, вот фрагмент требований, как я их получил:
«Создайте интерфейсное веб-приложение, взаимодействующее с API Quip следующими способами:
- Создайте электронную таблицу (бонусные баллы за импорт данных во вновь созданную таблицу).
- Под импортом данных я подразумеваю загрузку электронной таблицы Excel или копирование и вставку данных в электронную таблицу Quip.
- Экспорт электронной таблицы Quip в формат .xlsx
- Загрузить (создать резервную копию) папки/несколько документов.
Создайте пользовательский интерфейс для страницы так, как считаете нужным (кнопки, диалоговые окна и т. д.)».
Я немного волновался, когда читал требования, так как не знал, с чего начать. Итак, я покопался в документации по API и начал впитывать информацию. К счастью, мне не дали никаких ограничений по времени, но я хотел покончить с этим как можно скорее, чтобы увидеть, на каком этапе интервью я стою.
Для начала я разработал прототип готового продукта в Figma, чтобы у меня была дорожная карта, от которой можно было бы отталкиваться. Это необязательный шаг, но он значительно упрощает процесс создания проекта.
Хорошо, давайте копать!
Начиная
Я создал свои компоненты навигации, нижнего колонтитула и контента, чтобы иметь прочную основу для своего приложения.
Каждый из этих компонентов возвращает некоторый базовый JSX, и в них нет ничего особенного (если вы хотите увидеть код для каждого, вы можете проверить репозиторий проекта на GitHub).
Я решил, что большинство запросов будут разделены между файлами App.js и CenterContent.js.
Для справки, вот структура моего проекта:
В этом посте вы увидите, как я ссылаюсь на запросы POST и GET. Если вы не знакомы с ними, сейчас самое время провести небольшое исследование. Я буду честен в том, что я не был на 100% в них, когда начинал этот проект, и мне пришлось самому пройти через некоторые ресурсы.
В двух словах, запрос POST — это когда мы просим сервер принять некоторые входящие данные (которые мы отправляем) — в нашем случае эти данные поступают в форме создания новый файл электронной таблицы.
Запрос GET — это когда мы просим сервер отправить нам данные из указанного ресурса на сервере.
Я использовал Insomnia REST Client для устранения проблем с моими запросами. Я работаю над руководством для начинающих, так что следите за новостями!
Использование Quip API
Если вы похожи на меня, вы никогда не слышали об API Quip и понятия не имели, что он делает. По своей сути Quip — это инструмент автоматизации, который позволяет вам интегрироваться с такими инструментами, как SalesForce, чтобы повысить совместную работу вашей команды по продажам.
В наших целях мы будем использовать его для создания электронных таблиц Excel в моей учетной записи Quip (если вы хотите воспроизвести этот проект, вам необходимо создать учетную запись Quip — это можно сделать бесплатно).
Вам также потребуется создать личный токен разработчика, чтобы делать запросы. Вы можете сделать это здесь (требуется учетная запись). Получив токен, храните его в надежном месте, потому что мы скоро им воспользуемся.
Для начала я установил Axios в свой проект, запустив npm install axios, а затем импортировал его в файлы, где мне нужно делать запросы с помощью import axios from "axios";.
Аутентификация
Прежде чем делать какие-либо запросы к серверу, мне нужно было пройти аутентификацию с моими учетными данными. Я решил поместить это в файл App.js внутри метода жизненного цикла componentDidMount, чтобы он загружался каждый раз при загрузке страницы:
Итак, я построил свою функцию, я вызвал ее и на мгновение подумал, что все в порядке, пока не столкнулся с этой ужасной ошибкой:
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $websiteName"Неееет!!! Ужасный монстр CORS поднимает свою могучую голову! (CORS на самом деле является полезным посредником между мной и сервером, но может раздражать, если вы никогда раньше не видели эту ошибку). *Примечание: если вы никогда не сталкивались с этой ошибкой, не волнуйтесь! Я до сих пор не до конца понимаю его, но знаю достаточно, чтобы его отладить. Если вы застряли, перейдите по ссылке выше, чтобы получить полезную информацию, или посмотрите ниже, чтобы быстро решить проблему.*
Простой способ обойти это — использовать прокси, такой как бесплатный ресурс CORS Anywhere. По сути, поместите эту ссылку https://cors-anywhere.herokuapp.com/ перед URL-адресом вашей конечной точки, и на данный момент это решит проблему.
Этот удобный инструмент позволит вам делать запросы во время разработки на локальном хосте. На вашем месте я бы провел небольшое исследование, прежде чем использовать этот подход в производстве. Полный отказ от ответственности, я недостаточно знаю об этом маленьком трюке, чтобы сказать вам, безопасно ли его использовать в производстве или нет.
Итак, после некоторой настройки функции аутентификации я получил желаемый результат для входа в консоль. Пора переходить к запросам!
Делать запросы
Теперь, когда моя аутентификация работает, мы готовы сделать несколько запросов. Я знал, что буду делать POST-запрос всякий раз, когда захочу создать новый документ, и что я также хотел связать это действие с нажатием кнопки. Итак, ниже моя функция POST:
Вы заметите, что именно здесь вступает в игру наш пакет qs, о котором я упоминал в начале этой статьи. Я не эксперт, но из того, что я понял после прочтения документации, этот пакет превращает мой запрос в строку для отправки на сервер. Если вы предпочитаете не использовать этот пакет, это не проблема, так как Axios сделает это по умолчанию. Я знаю, что qs предлагает больше, чем просто преобразование данных в строки, но я не знаком со всеми его возможностями.
Теперь я хочу, чтобы эта функция срабатывала при нажатии кнопки. Таким образом, базовая кнопка ожила!
Моя функция POST была построена, моя кнопка была построена и к ней привязан метод. Пришло время скрестить пальцы и посмотреть, что моя функция выплюнула в консоль:
На данный момент я на седьмом небе от счастья! Я очень рад, что этот вызов API не только работает, но и возвращает что-то. Теперь настоящий тест… отображается ли это как новая таблица в моей учетной записи Quip?
У меня есть выписка из консоли и подтверждение из моей учетной записи Quip, показывающее, что я успешно создал новую электронную таблицу — это потрясающе! Я в восторге, буквально вскочил со стула и закричал: «ДАААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААА! как только я получил оба из них.
Это чувство того, что что-то заработало после борьбы с этим, не похоже ни на что другое, что я испытывал в своей профессиональной жизни. Я говорю себе, что должен продолжать нестись на этой волне энтузиазма и восторга, поэтому перехожу к следующему пункту в списке.
Импорт данных во вновь созданную электронную таблицу
У меня было несколько отличных идей для этого раздела «задания», но на данный момент прошло почти две недели с тех пор, как я начал этот проект, и я беспокоюсь, что интервьюер забудет об этом (т.е. обо мне) или станет нетерпеливым. меня.
Итак, я отказываюсь от этих грандиозных планов и выбираю что-то более простое, чтобы я мог завершить этот проект как можно скорее.
Я создал небольшую функцию, чтобы, по крайней мере, прикрепить ее к кнопке загрузки, чтобы у меня была какая-то функциональность для нее. По своей сути, эта функция ждет, пока файл не будет загружен, устанавливает состояние для первого элемента в целевом массиве события, затем создает заголовки на основе этой информации, с конечной целью — отправить эту информацию в мою учетную запись Quip. .
Однако по комментарию в верхней части этого функционального блока вы можете сказать, что мне не удалось заставить его работать должным образом. Однако у меня не было времени (по крайней мере, я думал, что нет), чтобы вникнуть в эту проблему и исправить ее.
На данный момент я работаю над этим проектом после работы и ночью уже более двух недель. Я решаю, что пришло время сдать его без работы других частей (импорт, экспорт и загрузка данных).
Последние штрихи
Я знаю, что мой проект незакончен, и я очень корю себя за это. Но в качестве дополнительного бонуса я решаю, что я собираюсь разработать что-то в Figma в качестве дополнительного штриха, чтобы повысить свои шансы на перезвон.
Вот готовый продукт, созданный по образцу их текущих цветов/шрифта/темы:
И это обертка
Поскольку мой проект еще не закончен, но находится в точке остановки, я чувствую себя не очень хорошо в отношении своего прогресса и времени, но я все упаковываю и выкладываю на GitHub. Я добавляю изображение выше и планирую отправить электронное письмо интервьюеру на следующее утро в 9 утра.
Я прождал почти 2 дня, затаив дыхание, надеясь, что мне перезвонят — что-нибудь. Это наконец пришло, когда я ехал на работу. Интервьюер получил мой проект и хотел, чтобы я пришел на еще одну встречу с его ведущим разработчиком.
Я был напуган и взволнован одновременно, потому что думал, что они хотят привлечь меня, чтобы посмеяться над моим кодом или спросить, о чем, черт возьми, я думал, когда создавал это чудовище. Но это было совсем не так. В итоге я получил предложение о работе от этого проекта!
Если вам нужна вся история об этом, ее можно найти в моем предыдущем блоге Пост о получении моей первой работы разработчиком.
Я надеюсь, что вы нашли какую-то ценность в этом посте. Если вы дали мне знать в Твиттере или на любой другой платформе, на которой я публикую посты :D
Кроме того, я размещаю большинство своих статей на отличных платформах, таких как freeCodeCamp, Dev.to и Medium, чтобы вы могли найти мои работы и там!
Пока вы здесь, почему бы не подписаться на мою новостную рассылку — вы можете сделать это в правом верхнем углу страницы моего блога. Я обещаю, что никогда не буду спамить ваш почтовый ящик, и ваша информация не будет передана никому/сайту. Мне нравится время от времени рассылать интересные ресурсы, которые я нахожу, статьи о веб-разработке и список моих последних сообщений.
Удачного дня, наполненного любовью, радостью и программированием!
