今年夏天,当极具创意的Naomi Scott向我询问我是否愿意在一个项目上合作时,我感到很高兴。在她过去在 Beggars Group(Rough Trade、Matador Records 和 4AD 的所在地)的生活中,我们为包括 The Breeders、Stephen Malkmus 和 Parquet Courts 在内的非凡摇滚表演制作了互动网站。这些网站的创建和使用总是一样有趣,所以我很高兴能开始开发一个新网站。

简介

Naomi 询问建立一个网站的可行性,该网站创建个性化的、可共享的天气预报来庆祝Homeshake的新专辑,标题恰如其分_UNDER THE WEATHER_。目的是创造一种体验,从专辑中选择一首歌曲以完美搭配您当地的天气条件——如果下雨,一首忧郁的曲目,在美好的一天更快一点——并能够分享你的图片预测和歌曲到 Twitter 和 Facebook。客户还要求与 Spotify 集成,以允许访问者将他们推荐的曲目直接保存到他们的流媒体库中。

[布鲁克林的家庭震动预测](https://res.cloudinary.com/practicaldev/image/fetch/s--9ILsQq5P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/grwwe91ickc3udosdizv.png)

外面很冷留在一些曲调

在我在Ralph Creative的日常工作中,客户经常要求我们构建生成器,以动态生成带有个性化元素的图像,供访客分享。 Spotify 集成也是熟悉的领域,因为我与 Naomi 合作过的许多网站都涉及创建自定义播放列表(比如我们庞大的Matador Decade网站)。从访客那里推断天气数据对我来说是一个新领域,但我喜欢挑战! Naomi 开始着手设计网站的外观和感觉,我搭建了一个新的 Vue.js 项目——我喜欢的前端框架——开始试验和构建。

定位访客

经过一番研究,我决定使用OpenWeather API,它有一个免费计划,每月提供非常慷慨的 100 万次调用。但首先,我需要一种方法来确定访问者的位置,或者让他们获得世界任何地方的预报。正确的解决方案最终是三个免费 API 的组合:OpenWeather、FreeGeoIP 和 Google Maps。

由于 OpenWeather 没有自己的地理定位功能,一个不错的选择是通过 AJAX 在页面加载时 pingFreeGeoIP。他们的免费 API 允许每小时 15,000 个请求,并提供大量有用的信息,让我们可以最好地猜测访问者的位置,包括城市、州和国家名称,以及纬度/经度坐标(然后我们可以将其传递给 OpenWeather 以确保准确性)。

axios
  .get("https://freegeoip.app/json/")
  .then(response => {
    this.city = [response.data.city, response.data.region_code]
      .join(", ");
    this.coords.lat = response.data.latitude;
    this.coords.lon = response.data.longitude;
  });

进入全屏模式 退出全屏模式

但是,我们不想强迫访问者只获得我们为其 IP 确定的位置的预测——它总是有可能不准确,我们认为人们可能会喜欢看到为其他城市和地区推荐的歌曲世界的。

很快就发现 OpenWeather 的文本查询功能有点失败,这更有理由找到一个让我们发送坐标而不是地名的解决方案。为此,我最终使用了一个熟悉且直观的组件:Google MapsPlace AutocompleteAPI。这将允许访问者键入世界任何地方的部分名称,选择结果,然后向我们提供坐标以馈送到 OpenWeather。

生成预测

有了纬度/经度坐标,我向 OpenWeather 发送了一个 AJAX 请求,并接收到有关该位置的大量信息:当前日期、时间和时区(很重要,因为选择的位置可能在世界的另一端),以及其他一些有趣的信息:天气描述、“感觉”温度和风速。然后我稍微整理一下数据:将适用国家的摄氏温度转换为华氏温度,将温度四舍五入为整数,并使用博福特风标获得风况的简要描述(“微风”、“风暴”等)基于转换为节的速度。

在这一点上,我们只需要一种方法将当前的天气状况与专辑中的一首歌曲配对。虽然 Spotify 确实通过他们的 API 提供了一些令人着迷的音频功能,包括可跳舞性、能量和节奏,但我们觉得在这里更人性化会有所帮助,因为我们只处理 12 首曲目。 Naomi 能够根据曲目的情绪为每首歌曲分配独特的天气场景,并为我提供了一个列表(见下文),以便使用 OpenWeather 的条件代码进行调整。

[Homeshake 轨道](https://res.cloudinary.com/practicaldev/image/fetch/s--qxy-zJJc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/y83i3ooz1avwp16f42jn.png)

我们为天气状况使用了非常科学的表情符号量表

使其可共享

这种类型的可共享生产网站的最佳案例之一是产生病毒活动的火花,引导更多人获得体验。要创建阻力最小的路径,最好通过合并直接链接以将个性化结果发布到 Twitter 和 Facebook 来简化共享。

为了实现这一点,我实现了一个后端来创建和存储图像;一个久经考验的 PHP 堆栈,带有 ImageMagick 来为每个预测制作定制的 PNG 图像,以及 MySQL 来存储相应的短 URL。这些短 URL 有两个主要用途:它们具有指示社交网络呈现相应自定义图像(1200x630 像素 PNG)的 Open Graph 元标记,它们将传入流量重定向到主页,以便新访问者可以从头开始体验。

[Twitter 可分享](https://res.cloudinary.com/practicaldev/image/fetch/s--V7HBrHmH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/y4l0juup39uykyrvc9e5.png)

由网站的分享按钮自动填充的推文

添加波兰语

当 Naomi 和我围绕新专辑发行建立网站时,我们的目标是捕捉专辑美学的感觉——尽可能从封面艺术和音乐视频中汲取灵感——并将其变为现实。 UNDER THE WEATHER 封面的粗略外观和内夹克的混浊外观非常适合该网站。

知道 Naomi 会设计图形来表示每种可能的天气条件,我建议尝试线煮\ 风格的动画,其中每个元素都被多次绘制,为原本静态的线条提供微妙的生命。我们认为结果最终有很多个性!

[动画](https://res.cloudinary.com/practicaldev/image/fetch/s--gKgIgqhp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/ppfed9lkqj6xktqm3a1e.gif)

加载屏幕上的动画

总结

我真的很喜欢将现实生活中的天气条件和音乐推荐的概念结合到一个为伟大艺术家定制的作品中。这个网站还有一个额外的好处是可以在看到访问者分享他们的预测之后搜索 Twitter。截至本博客,我们已经生成了 2,000 多个预测和计数!

请在homeshake.net/forecast尝试该网站。 ☀️

# javascript # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue