Как многие из вас знают, я приземлился мой первый разработчик работа В конце июня, и я подумал, что было бы здорово использовать проблему, которую мне давали как предмет современной статьи.
Важно отметить, что я использовал реагировать на создание моего проекта, но это могло быть дополнено любым передним каркасом или «Vanilla JavaScript».
Ниже приведен список тем, которыми мы перейдем:
- Доступ к API автоматизации quip
- Создание электронных таблиц/документов с apip api
- Установка и использование Axios Библиотека (это необязательно, и вы можете сделать запросы API без него Но мне нравится синтаксис)
- Использование QS пакет Чтобы затрагивать запросы (это не требование, но я хотел попробовать что-то новое, и если это не сработало, у меня всегда было затруднение знания Axios, по умолчанию будет строить мои запросы)
- Делать ПОЧТА и Получить Запросы
Для контекста вот фрагмент требований, как я их получил:
« Создайте интерфейсное веб-приложение, которое взаимодействует с API apip следующими способами:
- Создайте электронную таблицу (бонусные баллы для импорта данных в недавно созданную электронную таблицу).
- По импортным данным я имею в виду загрузить электронную таблицу Excel или скопируйте и вставьте данные в Squip Sputshiet.
- Экспортируйте электронную таблицу quip на .xlsx
- Скачать (резервное копирование) папка/несколько документов.
Создайте пользовательский интерфейс для страницы в любом случае, вы видите Fit (кнопки, диалоговые окна и т. Д.). “
Я был немного обеспокоен, когда я прочитал требования, когда я не был точно уверен, с чего начать. Итак, я выкопал в документы API и начал замачивать информацию. К счастью, мне не было дано ограничение по времени Но я хотел сделать с этим как можно скорее, чтобы увидеть, где я стоял в процессе собеседования.
Для начала я спроектировал прототип готового продукта в Фигме, поэтому у меня будет дорожная карта, чтобы выйти из. Это не требуемый шаг, но это делает ваш опыт здания проекта намного более гладким.
Хорошо, давайте копать!
Начиная
Я построил свои компоненты NAV, нижнего колонтитула и контента, поэтому у меня будет прочная основа для моего приложения.
Каждый из этих компонентов возвращает некоторые основные JSX, и для них не много (если вы хотите увидеть код для каждого вы можете проверить проект Github Repo ).
Я решил, что большинство запросов будут разделены между App.js и Centercontent.js файлы.
Для справки, вот моя структура проекта:
Вы увидите меня справочника и получите запросы на протяжении всего этого поста. Если вы не знакомы с теми, что сейчас хорошее время, чтобы сделать некоторые исследования на тех. Я буду честен тем, что я не был на 100% на них при запуске этого проекта и должен был пройти некоторые ресурсы.
В двух словах пост запрос есть, когда мы просим сервер до Принять Некоторые входящие данные (которые мы отправляем) – в нашем случае, когда данные поставляются в форме создания нового файла электронной таблицы.
Запрос на получение – это когда мы просим сервер до Отправить данные США с указанного ресурса на сервере.
Я использовал Insomnia red Client Чтобы помочь отлаживать проблемы со своими запросами. Я работаю над руководством новичка для этого, поэтому оставайтесь на том, чтобы настроиться за это!
Используя api apip
Если вы похожи на меня, вы никогда не слышали о API apip и понятия не имели, что это делает. В своем ячем, quip – это инструмент автоматизации, который позволяет интегрировать с помощью таких инструментов Salesforce Чтобы сделать вашу торговую группу более совместным.
Для наших целей мы будем использовать его, чтобы создать электронные таблицы Excel на моей учетной записи SWIP (если вы хотите воспроизвести этот проект, вам нужно создать учетную запись quip – это бесплатно сделать это).
Вам также потребуется создать личный токен разработчика, чтобы сделать запросы. Вы можете сделать это здесь (Требуется счет). Как только у вас есть токен, сохраните его в безопасном месте, потому что мы будем использовать его в ближайшее время.
Для начала я установил Axios в мой проект, запустив NPM Install Axios. И тогда я импортирую его в файлы, где мне нужно сделать мои запросы Импорт Axios из «Axios»;
Аутентификация
Прежде чем делать какие-либо запросы на сервер, мне нужно было аутентифицироваться с моими полномочиями. Я решил поставить это в App.js Файл внутри ComponentDidmount метод жизненного цикла Так что это будет загружать каждый раз, когда страница загружает:
Поэтому я построил свою функцию, я позвонил своей функции и на мгновение думал, что все хорошо, пока я не побежал в эту страшную ошибку:
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $websiteName"
Noooooooo !!! Страшный CORS Монстр снят свою могущественную голову! (CORS на самом деле является полезным посредником между мной и сервером, но можно раздражать, если вы никогда не видели эту ошибку раньше).
* Side Note – если вы никогда не видели эту ошибку, прежде чем не волноваться! Я до сих пор не полностью понимаю Но я достаточно знаю, чтобы отладить это. Если вы застряли, проверьте ссылку выше для некоторой полезной информации или посмотрите ниже для быстрой работы. *
Простой способ обойти это – использовать прокси, как Рост Где угодно Бесплатный ресурс. По сути, поместите эту ссылку https://cors-anywhay.herokuapp.com/ перед вашим конечным точкой URL и это решает проблему на данный момент.
Этот удобный инструмент позволит вам сделать ваши запросы при развитии на localhost . Если бы я был тобой, я бы сделал некоторые исследования, прежде чем использовать этот подход в производстве. Полный отказ от ответственности Я не знаю достаточно об этом маленьком трюке, чтобы сказать вам, если он будет безопасен в использовании в производстве или нет.
Итак, после того, как некоторая настройка функции аутентификации я получил желаемый результат для входа в консоль. Время двигаться дальше, чтобы сделать запросы!
Делать запросы
Теперь, когда моя аутентификация работает, мы готовы сделать некоторые запросы. Я знал, что собираетесь сделать запрос на почту всякий раз, когда я хотел создать новый документ, и что я также хотел связать это действие на кнопку. Итак, ниже моя функция почты:
Вы заметите, что это где наш QS упаковка Я упомянул в начале этой статьи в игру. Я не эксперт, но от того, что я почерпнул после прочтения документов, этот пакет превращает мою просьбу в строку, которая будет отправлена на сервер. Если вы предпочитаете не использовать этот пакет, это не проблема, как Axios сделаю это по умолчанию. Я знаю, что QS предлагает больше, чем просто настраивание данных Но я незнаком с полным спектром его возможностей.
Теперь я хочу, чтобы эта функция стреляла при нажатии на кнопку. Таким образом, базовая кнопка ожила!
Моя запись построена, моя кнопка была построена, и метод привязан к нему. Пришло время пересечь мои пальцы и посмотреть, какова моя функция в консоль:
На этот момент я над Луной! Я за пределами взволнован, что я получил этот API, чтобы не только работать, но, а также что-то и что-то. Теперь настоящий тест … это появится как новая электронная таблица на моей учетной записи quip?
У меня есть консольное утверждение и подтверждение от моей учетной записи SWIP, показывающей, что я успешно создал новую электронную таблицу – это потрясающе! Я в восторге, и я буквально выпрыгнул из своего стула и кричал “yeeeeeesssssssssssssssss !!! ” Как только я получил оба из них.
Это чувство получения чего-то для работы после борьбы с ним, как ничто, я испытывал в моей профессиональной жизни. Я говорю себе, что я должен продолжать ехать на этой волне энтузиазма и въезда, поэтому я нажимаю на следующий элемент в списке.
Импорт данных в вновь созданную электронную таблицу
У меня были несколько отличных идей для этого раздела «присвоения», но в этот момент было почти две недели, так как я начал этот проект, и я тревоюсь, что интервьюер будет забыть об этом (то есть меня) или становится нетерпеливым меня.
Итак, я ломаю эти грандиозные планы и выбираю что-то из более простой природы, поэтому я могу получить этот проект как можно скорее.
Я построил небольшую функцию, по крайней мере, прикрепите к кнопке загрузки, чтобы у меня был какой-то тип функциональности для него. При этом эта функция ждет, пока файл не будет загружено, устанавливает состояние на первый элемент в массиве целевого элемента события, затем создает заголовки, основанные на этой информации, с возможной целью, являющейся IT-сообщениями в моей учетной записи с этой информацией Отказ
Тем не менее, вы можете сказать по комментарию в верхней части этого функционального блока, который я не смог заставить его работать должным образом. Тем не менее, у меня не было времени (по крайней мере, я думал, что я не) глубоко копать в эту проблему и исправить ее.
На данный момент я работал над этим проектом после работы и ночью более двух недель. Я решаю, что пришло время превратить его без других частей, работающих (импорт, экспорт и загрузку данных).
Последние касания
Я знаю, что мой проект незавершен, и я очень сильно избиваю себя об этом. Но, как дополнительный бонус, я решу, что я собираюсь спроектировать что-то в Figma Как добавленное прикосновение, чтобы помочь моим шансам позвонить обратно.
Вот готовый продукт, смоделированный от их текущих цветов/font/theme:
И это обертывание
С моим проектом не закончил, но на точке остановки я чувствую себя не так хорошо о моем прогрессе и моем времени Но я все впадаю и бросил его на Github. Я бросаю выше изображение и запланируйте электронное письмо, чтобы выйти на следующее утро в 9 утра к интервьюеру. Я ждал почти 2 дня с замаровным дыханием, надеясь получить тип связи – что-то. Наконец, пришло так, как я ехал в работу. Интервьюер получил мой проект и хотел, чтобы я пришел на другую встречу со своим ведущим разработчиком.
Я был в ужасе и взволнован все в то же время, потому что я думал, что хотелось довести меня, чтобы смеяться над моим кодом или спросить меня, что, черт возьми, Я думал, когда я построил эту чудовищность. Но это вообще не так. Я закончил получить предложение о работе от этого проекта!
Если вам понравилась вся история об этом, ее можно найти в моем предыдущем блоге пост о посадке моей первой работы разработчика.
Я надеюсь, что вы нашли какой-либо значение из этого поста. Если вы дайте мне знать на Twitter или любая из других платформ, на которых я опубликую: D
Кроме того, я пересекаю большинство моих статей на отличных платформах, таких как Dev.to и Середина Таким образом, вы можете найти мою работу там так же!
Пока вы здесь, почему бы не подписаться на мой Рассылка – Вы можете сделать это в правом верхнем углу страницы на моем блог . Я обещаю, что никогда не спамут свой почтовый ящик, и ваша информация не будет передана с кем угодно/сайт. Мне нравится время от времени отправлять интересные ресурсы, которые я нахожу, статьи о веб-разработке, а также список моих новейших постов.
Удивительный день, наполненный любовью, радостью и кодировкой!
Оригинал: “https://www.freecodecamp.org/news/conquering-job-interview-code-challenges-v2-0/”