.net个人求职简介
As many of you know, I landed my first developer job at the end of June and I thought it would be great to use the challenge I was given as the subject of today's article.
你们中许多人都知道，我于 6月底找到了我的第一份开发人员工作 ，我认为使用我今天这篇文章所面临的挑战会很棒。
It is important to note that I used React to build my project, but this could have been completed with any front end framework or 'vanilla JavaScript'.
重要的是要注意，我使用React来构建我的项目，但这可以通过任何前端框架或“原始JavaScript”来完成。
Below is a list of topics we'll go over:
以下是我们将讨论的主题列表：
Accessing the Quip Automation API
- Creating spreadsheets/documents with the Quip API 使用Quip API创建电子表格/文档
Installing and using the Axios library (this is optional and you can make API requests without it but I like the syntax)
安装和使用Axios库(这是可选的，您可以在没有它的情况下发出API请求，但我喜欢语法)
Using qs package to stringify requests (this is not a requirement but I wanted to try something new and if it didn't work I always had the fallback of knowing Axios will stringify my requests by default)
使用qs包对请求进行字符串化(这不是必需的，但我想尝试一些新的东西，如果它不起作用，我总是会后悔知道Axios将默认情况下对我的请求进行字符串化)
For context, here is a snippet of the requirements as I received them:
对于上下文，这是我收到要求时的摘要：
"Create a front-end web app that interacts with the Quip API in the following ways:
“ 创建通过以下方式与Quip API交互的前端网络应用：
Create a spreadsheet (bonus points to import data into the newly created spreadsheet).
创建电子表格(奖励点，用于将数据导入到新创建的电子表格中)。
By import data, I mean upload an Excel spreadsheet, or copy and paste data into Quip spreadsheet.
导入数据是指上传Excel电子表格，或将数据复制并粘贴到Quip电子表格中。
Export a Quip spreadsheet to .xlsx
将Quip电子表格导出到.xlsx
Download (backup) a folder/multiple documents.
下载(备份)文件夹/多个文档。
Create the UI for the page in whatever way you see fit (buttons, dialog boxes, etc)."
以您认为合适的任何方式(按钮，对话框等)为页面创建UI。 ”
I was a little worried when I read the requirements as I wasn't exactly sure where to begin. So, I dug into the API docs and started soaking up information. Thankfully, no time limit was given to me but I wanted to be done with this as soon as possible to see where I stood in the interview process.
阅读要求时，我有点担心，因为我不确定从哪里开始。 因此，我研究了API文档并开始吸收信息。 值得庆幸的是，我没有时间限制，但我希望尽快完成这项工作，以了解我在面试过程中的立场。
To start, I designed a prototype of the finished product in Figma so I'd have a road map to go off of. This is not a required step, but it does make your project building experience run much smoother.
首先，我在Figma设计了最终产品的原型，因此我要制定一个路线图。 这不是必需的步骤，但这确实使您的项目构建体验运行起来更加流畅。
Alright, let's dig in!
好吧，让我们深入研究！
入门 (Getting Started)
I built my Nav, Footer, and Content components so I'd have a solid foundation for my app.
我构建了Nav，Footer和Content组件，因此为我的应用奠定了坚实的基础。
Each of these components return some basic JSX and there isn't much to them (If you'd like to see the code for each you can check out the project's GitHub repo).
这些组件中的每个组件都返回一些基本的JSX，并且没有太多(如果您想查看每个组件的代码，可以查看项目的GitHub repo )。
I decided the majority of the requests would be split between the App.js and CenterContent.js files.
我决定了大部分的要求将是分裂之间App.js和CenterContent.js文件。
For reference, here is my project structure:
供参考，这是我的项目结构：
You'll see me reference POST and GET requests throughout this post. If you aren't familiar with those now is a good time to do some research on those. I'll be honest in that I wasn't 100% on them when starting this project and had to go through some resources myself.
您会在整个帖子中看到我引用POST和GET请求。 如果您现在不熟悉这些内容，那么现在是对这些内容进行一些研究的好时机。 我会坦白地说，在开始这个项目时，我并不是100％地接受他们的工作，因此我必须自己浏览一些资源。
In a nutshell, a POST request is when we ask the server to accept some incoming data (that we are sending) - in our case that data comes in the form of creating a new spreadsheet file.
简而言之，POST请求是当我们要求服务器接受一些(正在发送的)传入数据时-在我们的情况下，数据以创建新电子表格文件的形式出现。
A GET request is when we ask the server to send us data from a specified resource on the server.
GET请求是当我们要求服务器从服务器上的指定资源向我们发送数据时。
I used the Insomnia REST Client to help debug issues with my requests. I'm working on a beginner's guide for it so stay tuned for that!
我使用Insomnia REST客户端来帮助调试请求中的问题。 我正在为此编写新手指南，请继续关注！
使用Quip API (Using the Quip API)
If you're like me, you've never heard of the Quip API and had no idea what it does. At its core, Quip is an automation tool that allows you to integrate with tools like SalesForce to make your sales team more collaborative.
如果您像我一样，则从未听说过Quip API，也不知道它会做什么。 Quip的核心是自动化工具，可让您与SalesForce等工具集成，以使您的销售团队更加协作。
For our purposes, we will be using it to create Excel spreadsheets on my Quip account (if you want to replicate this project you'll need to create a Quip account - it is free to do so).
为了我们的目的，我们将使用它在我的Quip帐户上创建Excel电子表格(如果要复制此项目，则需要创建一个Quip帐户-这是免费的)。
You'll also need to create a personal developer token in order to make requests. You can do that here (requires an account). Once you have your token, keep it in a safe spot because we'll be making use of it soon.
您还需要创建一个个人开发人员令牌才能发出请求。 您可以在这里进行操作 (需要一个帐户)。 有了令牌后，请妥善保管它，因为我们会尽快使用它。
To start, I installed Axios into my project by running npm install axios and then I import it into the files where I need to make my requests with import axios from "axios";
首先，我通过运行npm install axios将Axios安装到项目中，然后将其导入到需要import axios from "axios";的文件中import axios from "axios";
认证方式 (Authentication)
Before making any kind of requests to the server, I needed to authenticate with my credentials. I decided to put this in the App.js file inside a componentDidMount lifecycle method so it would load every time the page loads:
在向服务器发出任何类型的请求之前，我需要使用我的凭据进行身份验证。 我决定将其放置在componentDidMount 生命周期方法内的App.js文件中，这样它将在每次页面加载时加载：
So I built my function, I called my function and for a moment thought all is well, until I ran into this dreaded error:
因此，我构建了函数，调用了函数，片刻以为一切都很好，直到遇到了这个可怕的错误：
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $websiteName"Noooooooo!!! The dreaded CORS monster rears it's mighty head! (CORS is actually a useful intermediary between me and the server but can be annoying to deal with if you've never seen this error before).
不！ 可怕的CORS怪物举起了强大的脑袋！ (CORS实际上是我和服务器之间的有用中介，但是如果您之前从未见过此错误，可能会很烦恼)。
*Side note - if you've never seen this error before don't worry! I still don't fully understand it but I know enough to debug it. If you get stuck, check out the link above for some helpful info or look below for a quick work around.*
*旁注-如果您从未见过此错误，请不要担心！ 我仍然不完全了解它，但是我知道足以调试它。 如果您遇到困难，请查看上面的链接以获取一些有用的信息，或者查看下面的链接以快速解决。*
An easy way to get around this is to use a proxy like the CORS Anywhere free resource. Essentially, place this link https://cors-anywhere.herokuapp.com/ in front of your end point URL and it'll resolve the problem, for now.
解决此问题的一种简单方法是使用像CORS Anywhere免费资源这样的代理。 本质上，将此链接https://cors-anywhere.herokuapp.com/放置在端点URL之前，它现在可以解决问题。
This handy tool will allow you to make your requests while developing on localhost. If I were you, I would do some research before using this approach in production. Full disclaimer, I don't know enough about this little trick to tell you if it's safe to use in production or not.
这个方便的工具将允许您在localhost上进行开发时发出请求。 如果您是我，我会在生产中使用这种方法之前进行一些研究。 完全免责声明，我对这个小技巧还不够了解，无法告诉您在生产中是否可以安全使用。
So, after some tweaking of the authentication function I got the desired result to log to the console. Time to move on to making requests!
因此，在对身份验证功能进行了一些调整之后，我得到了所需的结果以登录到控制台。 是时候继续提出要求了！
发出请求 (Making Requests)
Now that my authentication is working, we're ready to make some requests. I knew I was going to make a POST request whenever I wanted to create a new document and that I also wanted to tie that action to the click of a button. So, below is my POST function:
现在我的身份验证工作正常了，我们准备提出一些请求。 我知道我想创建一个新文档时都会发出POST请求，并且我也想将该操作与单击按钮绑定在一起。 因此，以下是我的POST函数：
You'll notice this is where our qs package I mentioned at the beginning of this article comes into play. I'm not an expert but from what I gleaned after reading the docs on it, this package turns my request into a string to be sent to the server. If you prefer not to use this package that's no problem as Axios will do this by default. I know that qs offers more than just stringifying data but I'm unfamiliar with the full range of its capabilities.
您会注意到，这是我在本文开头提到的qs包发挥作用的地方。 我不是专家，但是从阅读有关文档后收集的内容来看，此程序包将我的请求转换为要发送到服务器的字符串。 如果您不想使用此软件包，那没有问题，因为Axios会默认执行此操作。 我知道qs提供字符串化数据，而且还不了解其全部功能。
Now, I want this function to fire when clicking a button. Thus, a basic button came to life!
现在，我希望在单击按钮时触发此功能。 这样，一个基本的按钮就变得生动起来了！
My POST function has been built, my button has been built, and the method tied to it. It's time to cross my fingers and see what my function spat out into the console:
我的POST函数已构建，我的按钮已构建，并且方法与之相关。 是时候让我不由自主了，看看我的功能在控制台中出现了什么：
At this point I'm over the moon! I'm beyond excited that I've gotten this API call to not only work but to return something as well. Now the real test...does this show up as a new spreadsheet on my Quip account?
此时，我已经过了月亮！ 我很高兴获得这个API调用，不仅可以正常工作，而且还可以返回一些东西。 现在进行真正的测试...这是否在我的Quip帐户中显示为新电子表格？
I have the console statement and the confirmation from my Quip account showing that I have successfully created a new spreadsheet - this is awesome! I'm ecstatic and I literally jumped out of my chair and yelled "YEEEEEEESSSSSS!!!" once I got both of these.
我收到控制台声明和Quip帐户的确认信息，表明我已经成功创建了一个新的电子表格-太棒了！ 我欣喜若狂，我从椅子上跳了起来，大喊“ YEEEEEEESSSSSS !!!”。 一旦我得到了这两个。
That feeling of getting something to work after struggling with it is like nothing else I've experienced in my professional life. I tell myself that I have to keep riding this wave of enthusiasm and elation so I push on to the next item on the list.
在苦苦挣扎之后得到工作的感觉就像我在职业生涯中从未经历过的。 我告诉自己，我必须继续保持这种热情和兴高采烈的浪潮，因此我继续进行清单中的下一项。
将数据导入到新创建的电子表格中 (Import Data Into the Newly Created Spreadsheet)
I had some great ideas for this section of the "assignment" but at this point it has been almost two weeks since I started this project and I'm anxious that the interviewer will have forgotten about it (i.e. me) or is getting impatient with me.
对于“分配”的这一部分，我有一些好主意，但是到现在，距我开始这个项目已经快两个星期了，我很担心面试官会忘记它(即我)或对它不耐烦我。
So, I scrap those grand plans and opt for something of a more simple nature so I can get this project turned in ASAP.
因此，我放弃了这些宏伟计划，选择了更为简单的方式，以便尽快完成该项目。
I built a small function to at least attach to the upload button so that I would have some type of functionality for it. At it's core, this function waits until a file has been uploaded, sets the state to the first element in the event target array, then creates headers based off of that information, with the eventual goal being it posts to my Quip account with that information.
我建立了一个小功能，至少要附加到上传按钮，这样我才可以使用某种功能。 从根本上讲，此功能将等待文件上传完毕，将状态设置为事件目标数组中的第一个元素，然后根据该信息创建标头，最终目标是将其与该信息一起发布到我的Quip帐户中。
However, you can tell by the comment at the top of this function block that I was unable to get it to work properly. However, I did not have time (at least I thought I didn't) to dig deep into this problem and get it fixed.
但是，您可以通过此功能块顶部的注释告诉我，我无法使其正常工作。 但是，我没有时间(至少我以为没有)来深入研究此问题并加以解决。
At this point, I've been working on this project after work and at night for over two weeks. I decide that it's time to turn it in without the other parts working (import, export, and downloading data).
在这一点上，我下班后和晚上一直从事这个项目超过两个星期。 我决定是时候打开它，而其他部分(导入，导出和下载数据)不起作用了。
最后的润色 (The Final Touches)
I know my project is unfinished and I'm beating myself up pretty hard about it. But, as an added bonus I decide that I'm going to design something in Figma as an added touch to help my chances of getting a call back.
我知道我的项目尚未完成，因此我正在努力地击败自己。 但是，作为一项额外的奖励，我决定我将在Figma中设计一些东西作为一种补充，以帮助我回电。
Here is the finished product modeled off of their current colors/font/theme:
这是根据当前颜色/字体/主题建模的成品：
那是一个包装 (And That's A Wrap)
With my project not finished but at a stopping point, I'm feeling not so good about my progress and my timing but I package everything up and throw it on GitHub. I throw in the above image and schedule an e-mail to go out the next morning at 9AM to the interviewer.I waited nearly 2 days with bated breath hoping to get some type of call back - something. It finally came as I was driving into work. The interviewer had gotten my project and wanted me to come in for another meeting with his lead developer.
由于我的项目还没有完成，但是到了一个停顿点，我对进度和时机感觉不太好，但是我将所有内容打包并放在GitHub上。 我投上了上图，安排了第二天早上9点发给面试官的电子邮件。我等了将近2天，屏住呼吸，希望能打回某种电话。 终于在我开车上班的时候来了。 面试官已经得到了我的项目，并希望我与他的首席开发人员再次开会。
I was terrified and excited all at the same time because I was thinking they wanted to bring me in to make fun of my code or to ask me what the hell I was thinking when I built this monstrosity. But that wasn't the case at all. I ended up getting a job offer from this project!
我同时感到恐惧和兴奋，因为我以为他们想让我加入以嘲笑我的代码，或者问我在构建这种怪异时我到底在想什么。 但这不是事实。 我最终从这个项目中获得了工作机会！
If you'd like the whole story about that, it can be found in my previous blog post about landing my first developer job.
如果您想了解有关此方面的全部故事，可以在我以前的博客文章中找到我的第一个开发人员职位。
I hope you've found some value out of this post. If you have let me know on Twitter or any of the other platforms I post on :D
希望您从这篇文章中发现了一些价值。 如果您在Twitter或其他平台上让我知道，我会在：D上发布
Also, I cross post most of my articles on great platforms like Dev.to and Medium so you can find my work there as well!
另外，我将我的大部分文章交叉发布在Dev.to和Medium等出色的平台上，因此您也可以在那里找到我的作品！
While you’re here why not sign up for my Newsletter – you can do that at the top right of the page on my blog. I promise I’ll never spam your inbox and your information will not be shared with anyone/site. I like to occasionally send out interesting resources I find, articles about web development, and a list of my newest posts.
当您在这里时，为什么不注册我的时事通讯 –您可以在我的博客页面右上角进行操作。 我保证我永远不会向您的收件箱发送垃圾邮件，并且不会与任何人/站点共享您的信息。 我偶尔会发送一些有趣的资源，有关Web开发的文章以及最新文章列表。
Have an awesome day filled with love, joy, and coding!
美好的一天充满爱，欢乐和编码！
翻译自: https://www.freecodecamp.org/news/conquering-job-interview-code-challenges-v2-0/
.net个人求职简介
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
