小程序动画从头开始

Okay, so it’s pretty basic. But I did technically build a web app.

好的，这很基本。 但是我确实从技术上构建了一个Web应用程序。

Granted, I followed a step-by-step guide, and barely strayed from the expertly laid path. So it was more like building Ikea furniture than carpentry.

当然，我遵循了循序渐进的指南，并且几乎没有偏离专家设定的路径。 因此，它更像是建造宜家家具而不是木工。

That said, this experience was extremely rewarding and left me with:

就是说，这种经历非常有益，给我留下了：

An elevated appreciation for developers

对开发人员的赞赏 A better understanding of the possibilities of web apps

更好地了解Web应用程序的可能性The beginning of a new skill

新技能的开始

什么是网络应用程序？(What is a Web App?)

It can be hard to draw the line between a website and a web application, however, I found this helpful:

很难在网站和Web应用程序之间划清界线，但是，我发现这很有帮助：

“Web applications are websites with functionality and interactive elements. Gmail, Facebook, YouTube, Twitter, etc. are all web apps that are dynamic, and built for user engagement.” (Essential Designs)

“ Web应用程序是具有功能和交互元素的网站。 Gmail，Facebook，YouTube，Twitter等都是动态的网络应用程序，旨在吸引用户。” (基本设计)

什么是API？ (What is an API?)

“APIs define the rules that programmers must follow in order to interact with a programming language, a software library, or any other software tool.” (Tyler Elliot Bettilyon)

“ API定义了程序员与编程语言，软件库或任何其他软件工具进行交互所必须遵循的规则。” (泰勒·艾略特·贝蒂莲)

我的网络应用 (My Web App)

The web application I built (assembled and edited) is made up of several pages and can perform actions like retrieving the weather via an API.

我构建(组装和编辑)的Web应用程序由几个页面组成，并且可以执行诸如通过API检索天气之类的操作。

The technologies involved include:

涉及的技术包括：

HTML & CSS — The structure and styling of the pages

HTML＆CSS —页面的结构和样式 Javascript —Type of code that makes it interactive

Javascript-使其具有交互性的代码类型Express.js — Framework of reusable Javascript code “snippets”

Express.js —可重用Javascript代码“代码段”的框架Node.js — Server to run my javascript code

Node.js —运行我JavaScript代码的服务器Heroku & Github— Where the server and code is hosted

Heroku＆Github-托管服务器和代码的位置Visual Studio Code — Software to edit code and upload it to Heroku

Visual Studio代码-编辑代码并将其上传到Heroku的软件

导航和页面(Navigation & Pages)

The pages of the application were HTML-based but saved in EJS files. “EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.” (ejs.co)

该应用程序的页面基于HTML，但保存在EJS文件中。 “ EJS是一种简单的模板语言，可让您使用普通JavaScript生成HTML标记。” ( ejs.co )

These files were a combination of plain HTML and additional markup. This additional markup allowed for smart things like pulling in other EJS files.

这些文件是纯HTML和其他标记的组合。 这个额外的标记允许一些聪明的事情，例如拉入其他EJS文件。

This was particularly handy for the content which appeared across multiple pages (eg. the header and navigation). These were saved as separate EJS files and could be reused with the markup on line 3 in the screenshot below:

对于出现在多个页面上的内容(例如标题和导航)，这尤其方便。 这些被保存为单独的EJS文件，可以与下面的屏幕快照中的第3行的标记一起使用：

Source: Author Supplied 资料来源：作者提供

The result was a familiar code (HTML) with some clever new features.

结果是带有一些聪明的新功能的熟悉的代码(HTML)。

集成API (Integrating an API)

The data from most web APIs can be accessed by sending an HTTP request to a URL. And, the GET method allows us to retrieve data from a service, like reading a specific item from a database.

通过将HTTP请求发送到URL，可以访问大多数Web API的数据。 并且，GET方法允许我们从服务中检索数据，例如从数据库中读取特定项。

In this example, we used a GET request to grab the weather data for a given city.

在此示例中，我们使用GET请求获取给定城市的天气数据。

Source: Author Supplied 资料来源：作者提供

It was a simple example, however, it perfectly illustrated the power of APIs.

这是一个简单的示例，但是，它完美地说明了API的强大功能。

建立一个数据库 (Set up a Database)

A database is a way of storing all your app’s data.

数据库是一种存储您所有应用程序数据的方式。

This course prescribed Firebase because it’s fast, free for simple apps, and handles user authentication easily

本课程规定了Firebase，因为它速度快，免费适用于简单的应用程序，并且可以轻松处理用户身份验证

In this example, we created a simple message board.

在此示例中，我们创建了一个简单的留言板。

It allowed you to post a text message, and it would be added to a running list of messages below.

它允许您发布文本消息，它将被添加到下面的消息运行列表中。

重要要点 (Key takeaways)

As I mentioned, this activity was extremely rewarding.

正如我提到的，这项活动非常有意义。

Here are three key things I learned from this experience:

这是我从这次经验中学到的三件事：

好的循序渐进的课程是关键 (A good step-by-step course was key)

To be honest, I had tried to do this in the past. However, I always got stuck before ever really getting started.

老实说，我过去曾尝试这样做。 但是，我总是在真正开始之前就被困住了。

Developing anything requires a lot of decisions. What server to use, what language to code in, which framework to use.

开发任何东西都需要很多决定。 使用哪种服务器，使用哪种语言编写代码，使用哪种框架。

Each will have its pros and cons, with passionate arguments on all sides. This makes it extremely difficult for newcomers to start.

每个人都有其优点和缺点，各方都有激烈的争论。 这使得新手很难上手。

I believe that not having to choose the “tech stack” was key to me starting and finishing this course.

我认为不必选择“技术栈”是我开始和完成本课程的关键。

学习新技能很有趣 (Learning a new skill is fun)

It was so exciting when it worked!

当它起作用时，真是太令人兴奋了！

I could type in an address and see the weather. And I knew what was happening in the background.

我可以输入地址并查看天气。 而且我知道后台发生了什么。

If you’re looking for a worthwhile activity and have never developed anything before, I’d highly recommend this.

如果您正在寻找有价值的活动并且从未开发过任何东西，我强烈建议您这样做。

尊重开发人员 (Elevated respect for developers)

Shout out to anyone who develops anything for a living!

向任何以谋生为生的人大喊大叫！

It was HARD to get my head around everything that was happening. And to not break anything.

让我全神贯注于发生的一切真是太难了。 并且不要破坏任何东西。

I was already amazed by the end-results I saw on websites like Product Hunt. And now I had a little more insight into what went into it.

在Product Hunt之类的网站上看到的最终结果已经让我感到惊讶。 现在，我对其中的内容有了更多的了解。

试一试 (Give it a try)

The course I followed is completely free, as are all of the tools they use. It takes about 1–2 hours to complete and is totally worth it!

我遵循的课程以及他们使用的所有工具都是完全免费的。 大约需要1-2小时才能完成，这是完全值得的！

翻译自: https://medium.com/the-innovation/i-built-a-web-app-from-scratch-heres-what-i-learned-100bd1f4e0b7

小程序动画从头开始

相关资源：四史答题软件安装包exe