如何成为Web开发人员—编写第一个Web应用程序

Where to begin? This is perhaps the most common question asked by all newcomers to IT. There are so many sites around that offer all kinds of courses, and the popularity ratings of languages ​​change frequently. But even if you have already decided what to study, finding a competent source of information becomes an even bigger problem.

从哪里开始? 这可能是所有IT新手提出的最常见问题。 周围有很多提供各种课程的站点,并且语言的受欢迎程度经常变化。 但是,即使您已经决定要学习什么,找到一个有效的信息资源也将成为一个更大的问题。

选择问题 (Problem of choice)

Usually, for many, acquaintances who already work in IT become such a source. How did you start? What did you read? What to study? Where to look? Do you need to buy courses? Often, most of the questions remain unanswered.

通常,对于许多人来说,已经在IT部门工作过的熟人会成为这种来源。 你是怎么开始的? 你读了什么? 要学习什么? 在哪里看? 您需要购买课程吗? 通常,大多数问题仍未得到解答。

As for me, my path to programming was difficult and thorny, despite the fact that I have an IT education. Part of my life after graduation was spent within the walls of one company, where my duties were reduced to the Enikeian ones.

对于我来说,尽管我接受过IT教育,但我的编程道路还是艰难而棘手的。 毕业后我一生的一部分时间都花在一家公司的围墙里,在那里,我的职责沦落为恩尼克式的职责。

Then a period came in my life during which I practically did not touch the laptop and, as a result, completely lost my experience. Development technologies change so quickly that such a long five-year break greatly affected the value of the knowledge that I had.

然后是我生命中的一段时期,在此期间,我几乎没有触摸笔记本电脑,结果完全失去了经验。 开发技术变化如此之快,以至于漫长的五年中断极大地影响了我所拥有知识的价值。

Based on my experience, I can say that for the first job you need to have an idea of ​​algorithms, know several data structures, understand what variables are, and understand how functions work. It doesn’t matter which language you decide to learn, it is important to understand what it is suitable for. As a rule, this helps to decide, but if in your case it did not work, then let’s try to figure it out together.

根据我的经验,我可以说第一份工作需要了解算法,了解几种数据结构,了解什么是变量,以及了解函数的工作方式。 您决定学习哪种语言都无关紧要,了解适合的语言很重要。 通常,这有助于做出决定,但是如果您的情况不起作用,那么让我们尝试一起解决。

您实际需要什么? (What do you actually need?)

Image for post
Photo by Halacious on Unsplash
HalaciousUnsplash上的 照片

One of the most common mistakes beginners make is learning everything at once. The best solution is to start learning in one direction. As a rule, having learned at least one language, the following are given much easier and faster. All languages ​​can be conventionally divided into languages ​​with a high entry threshold and a low one. Obviously, learning a language with low thresholds is faster, but as you learn, you may experience a loss of interest. Study those languages ​​that you really like, not those that are easier to learn.

初学者犯的最常见错误之一是立即学习所有内容。 最好的解决方案是从一个方向开始学习。 通常,至少学过一种语言,以下内容会变得更加容易和快捷。 可以按惯例将所有语言分为入门级别高和入门级别低的语言。 显然,学习低门槛的语言会更快,但是随着学习,您可能会失去兴趣。 学习您真正喜欢的语言,而不是那些更容易学习的语言。

First, it is worth deciding on the objectives of the study. Each language prevails in a particular area. For example, if you decide to do a backend, then languages ​​such as PHP, Python, Go are more suitable for this. If your preferences are closer to the front end, then I think JavaScript for the client and Web site, as well as Swift and Java for developing mobile applications, are better suited here. If, however, you have always dreamed of writing a game that will top all the top ratings, then you should plunge headlong into C# / C ++ and similar languages.

首先,值得确定研究目标。 每种语言都在特定区域盛行。 例如,如果您决定做一个后端,那么PHPPythonGo之类的语言更适合于此。 如果您的偏好更接近前端,那么我认为用于客户端和网站的JavaScript以及用于开发移动应用程序的Swift和Java更适合这里。 但是,如果您一直梦想编写一款将所有顶级游戏都排在首位的游戏,那么您应该全力投入C#/ C ++和类似语言。

It will be very fortunate to find a mentor to help guide you on the right track. Many people make the mistake of starting with expensive courses, ending up learning what they might not need at all. In this case, the mentor will be able to suggest whether you need this information and what other materials will be useful at this stage of training.

能够找到一位导师来指导您走上正确的道路将非常幸运。 许多人错误地开始了昂贵的课程,最终学习了他们根本不需要的东西。 在这种情况下,指导者将能够建议您是否需要此信息以及在此培训阶段还可以使用哪些其他材料。

一点练习 (A little practice)

Programming is an experience that you can only gain through practice. The theory is great and necessary, but by learning only it, you cannot start writing code. Only a lot of practice will teach you how to overcome the challenges that a developer has to face on a daily basis. As a result, in practice, you will develop the habit of looking for the simplest approach to solving a problem. And then, you will move on to improving your code, trying to find a nicer and faster solution.

编程是一种只能通过实践获得的经验。 该理论是伟大且必要的,但是仅学习它,就无法开始编写代码。 只有大量的实践可以教您如何克服开发人员每天必须面对的挑战。 结果,在实践中,您将养成寻找最简单的方法来解决问题的习惯。 然后,您将继续改进代码,试图找到更好,更快的解决方案。

For a programmer, the process of learning and improving their skills never ends. Over time, you will get used to programming every day, and while you have not yet had time to decide on the choice of language and start your training, I want to show you what can be developed by just learning one language a little.

对于程序员而言,学习和提高技能的过程永无止境。 随着时间的流逝,您将每天习惯编程,虽然您还没有时间决定语言的选择并开始培训,但我想向您展示只要稍微学习一种语言就能发展出什么。

Let’s write together a small website that will determine your location and show the weather.

让我们一起写一个小型网站,它将确定您的位置并显示天气。

First, you need to define the structure of the project. In the future, this will help to organize the code more correctly and clearly and speed up development. In this example, it is not a complex structure, where for each file type its own folder is defined.

首先,您需要定义项目的结构。 将来,这将有助于更正确,更清晰地组织代码并加快开发速度。 在此示例中,它不是复杂的结构,其中为每个文件类型定义了自己的文件夹。

Image for post

Next, let’s describe the HTML file. HTML is a page markup language that describes the content displayed in the browser. Let’s sketch out the so-called “skeleton”. It must contain the <html/>and tags <body/>, and we will place the page styles in<head/>

接下来,让我们描述HTML文件。 HTML是一种页面标记语言,用于描述浏览器中显示的内容。 让我们勾勒出所谓的“骨架”。 它必须包含<html/>和标签<body/> ,我们将页面样式放在<head/>

index.html

index.html

Now let’s connect the files we have and decide which libraries we will work with. To display the map, I decided to use leafletjsthe weather stack service to get weather data. leafletjsallows us to display various maps on the page, and the weather stack has a Rest API that we will use to get the weather data. Rest API - Representational State Transfer - in fact, it is a tool for the interaction of a service located on the network with your application.

现在,让我们连接已有的文件,并确定将使用哪些库。 为了显示地图,我决定使用leafletjs天气堆栈服务来获取天气数据。 leafletjs允许我们在页面上显示各种地图,并且天气堆栈具有Rest API,我们将使用该API获取天气数据。 Rest API-代表性状态转移-实际上,它是用于将网络上的服务与您的应用程序进行交互的工具。

First, let’s include files with styles and js code for further use. When connecting, please note that if the code that you are going to use is not on your server, then the full HTTP source address is written. The path to the local folder is specified relative to the edited HTML file.

首先,让我们包含带有样式和js代码的文件,以备将来使用。 连接时,请注意,如果您要使用的代码不在服务器上,则会写入完整的HTTP源地址。 相对于已编辑HTML文件,指定了本地文件夹的路径。

index.html

index.html

<body/>Is the tag that usually contains the entire body of the page. We placed in it <div/>with id="map". In this <div/>we will put our map, and idwill help us find it. In the weather.js file, we will place the logic. Here we will declare a function weather(), it will describe all the logic for obtaining the current coordinates and weather at your location, as well as drawing the map. Let's start by getting geolocation and a map.

<body/>是通常包含页面整个正文的标记。 我们使用id="map"将它放在<div/> 。 在此<div/>我们将放置地图,而id将帮助我们找到它。 在weather.js文件中,我们将放置逻辑。 在这里,我们将声明一个weather()函数,它将描述获取您所在位置的当前坐标和天气以及绘制地图的所有逻辑。 让我们从获取地理位置和地图开始。

weather.js

weather.js

In order to get our coordinates, we will use the function navigator.geolocation.getCurrentPosition(). It takes 3 arguments:

为了获得我们的坐标,我们将使用功能navigator.geolocation.getCurrentPosition() 。 它需要3个参数:

  • a function that will be called if the data is received successfully;

    如果成功接收到数据将被调用的函数;
  • a function that will be called in case of an error;

    发生错误时将被调用的函数;
  • options.

    选项。

The object Lallows you to work with the library leafletjsand display the map and marker on it. To be able to obtain coordinates, the user must give permission to determine his geolocation. If the permission is received and the coordinates are determined successfully, then we can draw the map in the place we need. As you can see from the screenshot, I used a non-standard marker, the library makes it possible to use different icons.

对象L允许您使用库leafletjs并在其上显示地图和标记。 为了能够获取坐标,用户必须授予权限来确定其地理位置。 如果获得许可并成功确定了坐标,则可以在所需位置绘制地图。 从屏幕截图中可以看到,我使用了非标准标记,该库使使用不同图标成为可能。

Image for post

To change the marker, it is enough to set a constant in which you must specify three parameters:

要更改标记,只需设置一个常量即可,其中必须指定三个参数:

  • path to an icon that is located locally;

    位于本地的图标的路径;
  • the size of the icon, its height and width;

    图标的大小,高度和宽度;
  • anchor to determine the position of the marker pointer.

    定位以确定标记指针的位置。

Then, we add our marker to the map and show the site where we are now. In the code, it is desirable for the most part to be used for declaring variables const, if the variable will not change.

然后,我们将标记添加到地图上并显示该站点现在所在的位置。 在代码中,如果变量不会更改,则大部分都希望用于声明变量const

weather.js

weather.js

If an error occurs during code execution, it is considered good practice to let the user know that something went wrong. For simplicity, let's display it using a function alert().

如果在代码执行过程中发生错误,则最好让用户知道某些地方出了问题。 为了简单起见,让我们使用alert()函数显示它。

Now let’s get down to getting weather data. First, we need to register at https://weatherstack.com/ in order to get the api key. With the help of this key, we will be able to contact the api and from there receive all the necessary data in order to be able to draw them on the page in the future. After that, we make a request to the service using ajax, and if the request worked fine, we get an object with weather data. Let’s create several variables in which we will write the received data on temperature, humidity, data update time and an icon.

现在让我们开始获取天气数据。 首先,我们需要在https://weatherstack.com/上注册才能获取api密钥。 在此键的帮助下,我们将能够联系api,并从那里接收所有必要的数据,以便将来能够在页面上绘制它们。 之后,我们使用ajax向服务发出请求,如果请求正常运行,我们将获得一个包含天气数据的对象。 让我们创建几个变量,在其中写入接收到的有关温度,湿度,数据更新时间和图标的数据。

weather.js

weather.js

In <body/>add <div/>and <span/>, we will write data from our variables there.

<body/>添加<div/><span/> ,我们将从那里的变量中写入数据。

index.html

index.html

weather.js

weather.js

You should end up with something like this:

您应该以如下形式结束:

Image for post

It looks very crooked and bad, to make it nice to look at, let’s add some styles to style.css :

为了使它看起来不错,它看起来非常弯曲和不好,让我们为style.css添加一些样式:

style.css

style.css

Now we have a beautiful map with a convenient location for the weather. Not bad for the first application. However, there is one thing left — our weather itself does not update, so we can add an update to our application, at regular intervals. At the end of the code, we will add a function call setInterval()that will determine our geolocation once a minute and make a second request to the weather service.

现在,我们有了一张美丽的地图,并为天气提供了便利的位置。 对于第一个应用程序来说还不错。 但是,还有一件事-天气本身不会更新,因此我们可以定期向应用程序添加更新。 在代码的结尾,我们将添加一个函数setInterval() ,该函数将每分钟确定一次地理位置,并向气象服务再次发出请求。

Image for post

For this, we need to rewrite the code a little. We will move the initialization of the map out of the function so that it does not happen every time, and leave the rest of the code in the function.

为此,我们需要稍微重写一下代码。 我们将映射的初始化移出函数,以免每次都不会发生,并将其余代码保留在函数中。

weather.js

weather.js

Now the weather updates itself once a minute. Mission accomplished, all great.

现在天气每分钟更新一次。 任务完成了,一切都很好。

接下来要读什么? (What next to read?)

  • https://www.codecademy.com/ is a resource for learning many languages. Training is built in the form of problem-solving, also on the site.

    https://www.codecademy.com/是学习多种语言的资源。 培训也是在现场以解决问题的形式进行的。

  • https://learn.javascript.ru/ — modern JavaScript tutorial. Here you can learn JS from scratch to advanced concepts.

    https://learn.javascript.ru/ —现代JavaScript教程。 在这里,您可以从头学习JS到高级概念。

  • https://www.udemy.com/ — contains more than one hundred thousand courses on various topics. Access to the site is paid, so it is better to come here when you have more or less decided on the direction.

    https://www.udemy.com/-包含有关各种主题的十万门课程。 该站点的访问权是付费的,因此,当您或多或少确定了方向后,最好来这里。

  • Robert Martin, Clean Code — This book is worth reading when you have some programming experience. It talks about good coding practices and design patterns.

    罗伯特·马丁(Robert Martin),《 Clean Code》 —当您有一定的编程经验时,这本书值得一读。 它讨论了良好的编码实践和设计模式。

得出结论 (Drawing conclusions)

In general, we can say that it is never too late to start programming. You should not be afraid of failures at the beginning of the path, because everyone has them, the main thing is that you have a desire, and everything else will come with time. Working as a programmer is a constant improvement and acquisition of new knowledge. Join various communities, attend conferences, and read more of someone else’s code. It doesn’t matter what your first job is, just take it as an opportunity for experience. Many companies are ready to take and train a person who has the potential and desires to develop. Educate yourself and you will succeed.

通常,我们可以说开始编程永远不会太晚。 您不必惧怕失败的开始,因为每个人都有失败,最主要的是您有一种渴望,而其他一切都会随着时间而来。 从事程序员工作是对新知识的不断改进和掌握。 加入各个社区,参加会议并阅读其他人的代码。 首要工作是什么都没有关系,只需将其作为体验的机会即可。 许多公司已准备好接受并培训有潜力和渴望发展的人。 教育自己,您就会成功。

The code can be found in the GitHub repository.

该代码可以在GitHub存储库中找到。

翻译自: https://medium.com/swlh/how-to-become-a-web-developer-writing-your-first-web-application-a17f3cf4d795

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值