将数据添加到原型链上_对于更真实的FramerJS原型，只需添加数据

将数据添加到原型链上

by Marty Laurita

由Marty Laurita

对于更真实的FramerJS原型，只需添加数据 (For more realistic FramerJS prototypes, just add data)

“Data! Data! Data! I can’t make bricks without clay!”

“数据！ 数据！ 数据！ 没有粘土我就不能做砖头！”

“Data! Data! Data! I can’t make bricks without clay!” — Sir Arthur Conan Doyle

“数据！ 数据！ 数据！ 没有粘土，我不能做砖头！” -亚瑟·柯南·道尔爵士

Most interaction prototypes today serve one purpose: to convince your user that this prototype is what the “real thing” will look like and feel like.

今天，大多数交互原型都具有一个目的：让您的用户相信，该原型就是“真实事物”的外观和感觉。

In the past, designers have achieved this with fancy user interfaces, animations, and fluid transitions.

过去，设计人员通过精美的用户界面，动画和流畅的过渡来实现这一目标。

But those don’t quite cut it anymore. Users have become jaded to these tricks. They lived through the iPhone era, and now expect a fluid UI to come standard.

但是那些不再完全消除了。 用户已经厌倦了这些技巧。 他们经历了iPhone时代，现在希望流畅的UI成为标准。

So what’s the next frontier then? How can we convince people that a prototype is “real”?

那么下一个领域是什么？ 我们如何使人们相信原型是“真实的”？

By using real data.

通过使用真实数据。

FramerJS is a powerful code-based framework for building prototypes for your web apps and mobile apps. In this article, I’ll show you how you can use it to build a realistic prototype that features real data.

FramerJS是一个功能强大的基于代码的框架，用于为您的Web应用程序和移动应用程序构建原型。 在本文中，我将向您展示如何使用它来构建具有真实数据的真实原型。

As a rider of the Massachusetts Bay Transportation Authority (MBTA), I have the distinct pleasure of riding a transit system that is over 100 years old.

作为马萨诸塞州海湾运输局(MBTA)的骑手，我非常高兴地乘坐了一个已有100多年历史的运输系统。

As you can imagine, the trains aren’t always on time.

可以想象，火车并不总是准时到达的。

I’ve become relatively familiar with Framer, and as such, I decided to try and design an app to solve this problem.

我对Framer相对熟悉，因此，我决定尝试设计一个应用程序来解决此问题。

As a designer who has only a whisper of an understanding of code, this was daunting to say the least.

作为一个只对代码有耳语的设计师，至少可以说这令人畏惧。

I called up my brother, a talented computer science major at Tufts, and we got down to business.

我打电话给弟弟，塔夫茨大学的计算机科学专业人才，我们开始做生意。

寻找我们的用户 (Locating our users)

The first thing to do was find the user’s location in realtime.

要做的第一件事是实时查找用户的位置。

Today’s mobile browsers have this feature built-in.

当今的移动浏览器内置了此功能。

With two functions, you can get the latitude and longitude of your user.

通过两个功能，您可以获取用户的纬度和经度。

Then, you can just stick those coordinates into what’s called a hash table of key value pairs. In this table of data, the key might be “dog_breed” and the value might be “Pomeranian.” So now, you can call on that key whenever you need it, and it will return its corresponding value.

然后，您可以将这些坐标粘贴到键值对的哈希表中 。 在此数据表中，键可能是“ dog_breed”，值可能是“ Pomeranian”。 因此，现在，您可以在需要时随时调用该键，它将返回其对应的值。

Here’s what we ended up with:

这就是我们最终得到的结果：

#get locationgetLocation = () -> print “INSIDE GET LOC” navigator.geolocation.getCurrentPosition(showPosition);

showPosition = (position) -> print “INSIDE SHOW POS” gpsCoords = { “client_lat”: “#{position.coords.latitude}”, “client_lon”: “#{position.coords.longitude}” }

Now that we have the user’s exact location, it’s time for phase II.

现在我们有了用户的确切位置，该到第二阶段了。

找到我们的火车 (Locating our trains)

Getting the user’s location was the easy part. Now, we need to find and parse the API data from the MBTA.

获取用户的位置很容易。 现在，我们需要从MBTA查找并解析API数据。

Unfortunately, this organization is about as organized as any other under-funded government operation.

不幸的是，该组织的组织与其他任何资金不足的政府组织一样。

So, their code was — how should I put this — a little janky. Here’s what it looks like:

因此，他们的代码是-我该如何说-有点简陋。 看起来是这样的：

The data was nested in a combination of arrays and key value pairs. Some of them were data tables with just one entry. It took some time to understand how to pull out the data we needed.

数据嵌套在数组和键值对的组合中。 其中一些是只有一个条目的数据表。 花了一些时间来了解如何提取我们所需的数据。

Regardless, once we understood the structure, the idea was to grab the location data from the user’s browser and insert that into the API call to the MBTA. Then the MBTA API would return all data closest to that location.

无论如何，一旦我们了解了结构，其想法就是从用户浏览器中获取位置数据，并将其插入对MBTA的API调用中。 然后，MBTA API将返回最接近该位置的所有数据。

The first piece of data we wanted was the closest station to the current location:

我们想要的第一条数据是离当前位置最近的站点：

#grab MBTA station datadata = JSON.parse Utils.domLoadDataSync “http://realtime.mbta.com/developer/api/v2/stopsbylocation?api_key=De_WCTE-gkyYSitBw82YSw&lat=#{gpsCoords["client_lat"]}&lon=#{gpsCoords["client_lon"]}&format=json"  stops = data[“stop”]  stationText.html = null  for i in stops  if i[“parent_station_name”] != “” stationText.html = “The closest station to you is “ + i[“parent_station_name”] + “.”

Once we had the data, we then parsed it into something humans can read. We created a string (an English sentence) that said “The closest station to you is” and then tacked the station name on at the end. And Voila! The first step!

有了数据后，我们便将其解析为人类可以读取的内容。 我们创建了一个字符串(英语句子)，上面写着“离您最近的电台是”，然后在结尾处加上电台名称。 和瞧！ 第一步！

It worked like a charm!

它就像一个魅力！

Except not in Google Chrome.

除非不在Google Chrome中。

We quickly learned that for some strange reason, Google had decided to disable location APIs. Really Google? You don’t have enough billions to give some location data to the little guy?

我们很快了解到，出于某种奇怪的原因，Google决定禁用位置API。 真的是Google吗？ 您没有足够的资金来向小家伙提供一些位置数据吗？

But anyway, the prototype works great in Safari.

但是无论如何，该原型在Safari中效果很好。

After celebrating our initial success, we decided to make our lives hard again.

在庆祝我们最初的成功之后，我们决定再次努力生活。

What if we wanted to know not only the nearest station, but also how far the closest train was, where it was coming from, and how many minutes away it was?

如果我们不仅想知道最近的车站，还想知道最近的火车有多远，它从哪里来以及距离多少分钟，该怎么办？

Oh boy.

好家伙。

更多疯狂的数据 (More Crazy Data)

Now that we had a handle on how the MBTA data jives, we dove into a second API that provides (mostly) accurate train data.

现在我们已经掌握了MBTA数据如何运行的知识，我们深入到了第二个API，该API提供(主要是)准确的火车数据。

After some finagling, we had something like this:

经过一番讨价还价，我们得到了这样的东西：

#grab nearest train data data2 = JSON.parse Utils.domLoadDataSync “http://realtime.mbta.com/developer/api/v2/predictionsbystop?api_key=De_WCTE-gkyYSitBw82YSw&stop=#{i["stop_id"]}&format=json" routes = data2[“”] timeAway = data2[“mode”][0][“route”][0][“direction”][0][“trip”][0][“pre_away”] trainDir = data2[“mode”][0][“route”][0][“direction”][0][“direction_name”] trainLine = data2[“mode”][0][“route”][0][“route_name”] timeAwayRound = Utils.round timeAway/60, 0 stationText2.html = “The next “ + trainDir + “ “ + trainLine + “ train is “ + timeAwayRound + “ mins away.”

This grabs the “stop_id” (the nearest subway stop) from the first API, and plugs it into the request for the second API.

这会从第一个API获取“ stop_id”(最近的地铁站)，并将其插入对第二个API的请求中。

Then, we just have to wade through the data to extract what we need.

然后，我们只需要遍历数据即可提取所需信息。

“timeAway” gives us how far the nearest train is away, in seconds.

“ timeAway”以秒为单位提供了最近的火车有多远。

“trainDir” gives us the direction the train is headed.

“ trainDir”为我们提供了火车前进的方向。

And “trainLine” tells us which service line the train is on.

“ trainLine”会告诉我们火车在哪条服务线上。

Then we created a quick formula to turn seconds into minutes, and dumped all of that data into a string that made sense.

然后，我们创建了一个快速公式，将秒转换为分钟，并将所有数据转储到有意义的字符串中。

And voila! A little bit of quick UI, some fancy animation, and we had it!

瞧！ 一点点快速的UI，一些精美的动画，我们就拥有了！

外卖 (Takeaways)

I learned so much in building this. Working with real data is so liberating once you figure it out.

我在构建这个方面学到了很多东西。 一旦弄清了真实数据，就可以解放它们。

I cannot over-emphasize: if you haven’t gotten practice with reading API documentation yet, it can be quite frustrating. Be patient. It may take several hours to figure these out and get them working.

我不能过分强调：如果您还没有阅读API文档的实践，那可能会令人沮丧。 耐心一点。 解决这些问题并使它们正常工作可能需要几个小时。

The syntax has to be perfect. And I mean perfect.

语法必须是完美的。 我的意思是完美 。

But if you do get it, you’ll be standing there, playing with it and watching the numbers change with a smile on your face.

但是，如果您确实掌握了它，您将站在那儿，玩着它，看着数字随着微笑而变化。

And you’ll feel like, all of a sudden…you know kung fu.

突然之间，您会感觉……您知道功夫。

Thanks for reading. Give the prototype a try. I would love your feedback!

谢谢阅读。 试试看原型 。 我希望收到您的反馈！

Also, be sure to check out my first article about prototyping with FramerJS.

另外，请务必阅读我的第一篇有关使用FramerJS进行原型设计的文章 。

If you liked this, click the? below so other people will see this here on Medium.

如果您喜欢这个，请点击？ 下面，以便其他人可以在Medium上看到。

翻译自: https://www.freecodecamp.org/news/i-tried-framer-and-i-loved-it-part-2-31fdef35a1e2/

将数据添加到原型链上