原文链接：
https://levels.io/hoodmaps/
我公开展示了如何创建一个名为 Hoodmaps 的小型创业公司，从第一行代码到一款可以运行的 Web 应用，并最终登上 Reddit 首页，有超过 30 万人使用它。同时在 Twitch 和 Twitter 上记录了整个过程。https://youtu.be/FN144KdOIGM
我们从第一行代码开始：https://www.youtube.com/watch?v=q--QUbZ_258&t=1996s&ref=levels.io
…运行应用程序：
…到 Reddit 首页：
过程
我一直想记录从建立一个小型业余项目到成功启动并最终发展成为一家实际企业的整个过程。当你在新闻中听到一家成功的初创公司的消息时，他们可能已经成立了几年，而你根本不知道它是如何起步的。
你可能会想“好吧，我永远也做不到”，但你忘了 Uber、Airbnb 或 Google 也曾经只是从小型应用开始的。任何东西的第一个版本总是很糟糕。它本该如此。但随着迭代，它就会有所成就。对于初创公司来说，那个功能失调的小应用可能会成为每年 12 万美元的自力更生企业。或者被一家大公司以几百万美元收购。或者自己成长为一家价值 10 亿美元的 IPO 公司。或者什么都没有。你不知道会发生什么，直到你发布！
那么让我们回顾一下。因为这是有史以来第一次，我记录了发布前的每一个时刻。
问题
问题是，每次我去一个新地方旅行时，都很难弄清楚要去城市的哪些地方。我经常最终选择去旅游中心。我来自阿姆斯特丹，我知道 90% 的游客永远不会了解“真正的”阿姆斯特丹，因为他们只是呆在旅游中心。这是一个与荷兰文化无关的虚假地区。
那么我想要什么？我想快速了解一个城市的情况。哪些是很酷的“时尚”区域？哪里是比较富裕的地区？哪些地区更郊区化（对我来说可能很无聊？）。
解决方案
这个问题已经存在好几年了。2015 年，我的朋友 Amy 去阿姆斯特丹旅游时，她问我住哪儿。我给她画了这张地图。这很简单，但它至少能让人避开旅游区：
我为 @genericdreams 制作了一张阿姆斯特丹地图，上面只是阿姆斯特丹的几个地方，实际上它们仍然很真实且有趣 pic.twitter.com/aZ6Zaw2ZVH
— Pieter Levels @ 🇺🇸 (@levelsio) 2015 年 9 月 4 日
但是，如果我可以在一个 Web 应用中构建这个功能，我可以自己在地图上绘制代表不同类别的不同颜色，那会怎样呢？人们绘制的每种颜色都代表不同的类别。我会有时尚人士、游客、富人、郊区、商业区和学生区的颜色。如果我可以平均每个人的绘画并显示出来会怎样？就像众包一样，这样可行吗？所以，如果有 5 个人在一个区域上画的是旅游区，但有 8 个人画的是时尚人士，它会显示为时尚人士吗？
我们来试试吧.
我决定在 Twitch 上直播我的构建过程。我打算在直播的同时从一开始就编写代码。
第一天（2017-03-31)
📺 我正在 @twitch 上直播从零开始编写一个名为 Hood Maps 的新东西 👉 https://t.co/VNpJMQTuId pic.twitter.com/UpUKlFor2A
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 3 月 31 日
我将构建 Hoodmaps 的第一个原型。我的想法是制作一张任何人都可以绘制的地图，并按颜色对城市进行分类，进而引用某些类别，如“潮人”或“商务人士”。这样，你就可以更好地在城市中导航。
https://youtu.be/q--QUbZ_258
我从纯 HTML、CSS 和 JS 开始，然后看看能做成什么样。最后，我们得到了一个可以绘制颜色的地图。我们还将页面投入生产（在 Nomad List 的服务器上，但仍是如此）：
hoodmaps.io 的第一个版本在 @twitch 上线，耗时 ⏰ 2 小时 31 分钟 🌊 https://t.co/6AFA4Q96id
使用它：https://t.co/oblHoQCmgu pic.twitter.com/p8oTT8xt0N
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 3 月 31 日 第 1 天音乐：Rinse FM 播客 – Swamp 81 与 Loefah – 2017 年 3 月 30 日
第二天（2017-04-01https://youtu.be/rBUDudoxW18
（如果视频被屏蔽，请使用 VPN 连接到美国，这是音乐的原因）
我们将改善颜色，并将我们的绘图数据发送到服务器，以便保存并可供其他用户查看。第二天，我们得到了第一幅公开的绘图：
✨ 🗺Hood Maps 🌊 构建第 2 天直播 🔥 我们有一个概念证明 📝 人们画了这个😍
观看重播：https://t.co/Q2fmCtGQg3 pic.twitter.com/UHW8YuVyqI
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 4 月 1 日
第 2 天音乐：Rinse FM 播客 – Norwood Soul Patrol – 2017 年 3 月 26 日
第三天（2017-04-02)
我添加了数据规范化。这意味着我们不想绘制每个特定的 GPS 坐标，而是希望笔触引用更大的“区域”（例如 100 x 100 米），而不是特定的 GPS 点（1 x 1 米）。我们通过将 GPS 坐标（如 (53.23437348, -4.2338447)）更改为 (53.234, -4.233) 和 (53.23, -4.233) 和 (53.2, -4.2) 等来实现这一点。我们删除的每个小数，都会减少特定数据。通过规范化特定数据，我们总结了某个区域的颜色，并仅显示主要值。因此，如果大多数人说这个街区是旅游胜地，我们就会显示出来。稍后将详细介绍规范化。
https://youtu.be/MAs5TOozedQ ..第 2 部分：https://youtu.be/9XBOCY_LdGQ
从这里开始，事情开始变得困难，因为我们要处理数学和画笔大小等问题，简直就是地狱。这就是你后悔开始一个项目的地方。但我们坚持了下来！
我还优化了网站的移动版本：
耶！📲 🗺Hood Maps 的移动版本可以运行，仍在直播 https://t.co/VNpJMQTuId pic.twitter.com/KmaEFp0VBM
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 4 月 2 日
第 3 天音乐第 1 部分：Rinse FM 播客 – Redlight – 2017 年 3 月 27 日 第 3 天音乐第 2 部分：Rinse FM 播客 – Silencer – 2017 年 4 月 1 日
第四天（2014-04-04)https://youtu.be/Tq1uoC-lxy8
我们添加了域名 (http://hoodmaps.io)、Web 服务器的 NGINX 配置、来自 LetsEncrypt 的 SSL 证书，并进行了更多数据规范化。这一天进展缓慢，需要完成许多细枝末节的工作，才能让网站为用户上线：
现在在 @Twitch 上直播
我们将 – 添加域名 – 添加 SSL 到 Hoodmapshttps://t.co/VNpJMQTuId pic.twitter.com/9N800Pr3ru
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 4 月 3 日
这是最后一集视频，因为我们现在有了一个可以运行的应用程序。从这里开始，我将在这篇博文中讨论细节和增量更新。
帆布如视频所示，我一开始只用了一个基本的画布。Canvas 是一个很酷的相对较新的 HTML 标签，它允许你制作一个正方形的白色方框，然后使用 JavaScript 在其中进行绘制。现在，你可以使用 Canvas 标签和一些 JS 代码在 Photoshop 中用 HTML 完成任何你能想到的事情。我以前从未用过它，所以有点害怕。但我尝试了一下：
这很简单，只需弄清楚如何在按下鼠标按钮时在 JavaScript 中跟踪鼠标光标的坐标 (x, y)。然后每次鼠标移动时，您都会在其上绘图。Canvas 有一个名为“fillRect”的简单函数：
canvas.filLStyle=’red’; canvas.fillRect(x,y,width,height);
这只是画了一个红色的正方形。为什么是正方形？其实你可以把“正方形”画得尽可能小。所以你可以用正方形作为画笔。是的，你也可以画一个圆，但那没有意义，因为我的数据本质上是正方形的（例如一个纬度乘以一个经度点)！
将绘图保存到服务器每幅绘图都保存到一个数组中：
此数组包含所有坐标，包括加载页面时已存在的坐标。我切出新的坐标并将它们发送到服务器。
我对服务器上的 PHP 脚本执行 AJAX 调用（该脚本与 /index.php?action=draw 完全相同），并附带绘图。我不想让服务器过载，因此我缓冲绘图，然后执行 setTimeout() 计时器，每 5 秒将它们发送到服务器一次：
每次你画图时 setTimeout() 都会重置，所以除非你停止画图，否则我不会发送。如果你停止画图，我会在 5 秒内发送。
数据库
如果您不感兴趣，请随意跳过，但我现在将讨论如何设置数据库结构来保存从 JavaScript 发送到服务器的坐标。
地图上的每幅图画都保存在 SQLite 数据库中。我使用 SQLite 是因为它简单且快速，但如果你想同时进行多次写入，它绝对不是最佳选择（我们将在发布时发现这一点，请继续阅读).
从数据库读取地图上的每个坐标并检查条目。例如（这是伪代码）：
[52.37029884,4.8930113243] : [‘hipsters’,’suits’,’normies’,’normies’,’normies’,’hipsters’,’uni’,’hips
有 4 个条目，“潮人”是此地理坐标上最主要的类别。因此我们将其绘制为黄色（潮人类别的颜色）。
我保存了绘图及其精确的纬度和经度坐标（例如 52.37029884,4.8930113243）。您可以看到问题出现了。如果我将每个人的坐标保存得如此精确，它就会变成一堆乱七八糟的点。
如果你有大量数据，它看起来很酷，但显然没用：
我想了一会儿该如何解决这个问题。我可以用自己的点网格覆盖地球，这些点网格将指定区域。但所有这些似乎都太难了，同时有 100 个人在观看直播，等着我尽快解决这个问题。所以我想到了一个超级技巧：我只需从坐标中删除一些小数即可。因此 (52.37029884,4.8930113243) 变成 (52.370,4.893)，甚至更远 (52.37,4.89) 然后是 (52.3,4.8)。每删除一个小数，覆盖的面积就会增加约 10 倍，请参见：
问题是你得到了一个网格：
为了解决这个问题，我只需增加画笔尺寸直到它覆盖间隙：
画笔的大小取决于您所处的缩放级别。经过多次尝试，我得出了这个公式，它通常使地图上的每个点都足够大以覆盖任何间隙：
画笔大小 = Math.pow(2,map.zoom)/125;
map.zoom 是 Google Maps 的缩放级别，例如 14 表示相当深，3 表示可以看到地球。
我使用的另一个技巧是，在缩放级别高于 12 时（接近街道级别），我将首先绘制粗略的标准化数据（例如 53.233,4.138）：
...但随后我将使用较小的画笔在其上绘制缩放级别高于 12 的数据：
这意味着缩小时您会看到整个区域都是黄色，但放大时，您会看到它的背景是黄色，但添加了特定的详细颜色。例如，该区域是黄色（时髦），但那条街道是蓝色（商业）。这提供了动态细节，而不会在缩小时弄乱城市的大概览！
如果在这个缩放级别上，一个区域块实际上被刷成蓝色（商业），它将改变其上方的整个标准化块，整个东西都变成蓝色。
布局我的布局保持得相当基本。顶部有图例，但图例也是可点击的，并且在活动时会突出：
如果你点击它，你就进入了画笔模式。我添加了一个 Photoshop 风格的画笔光标，因为浏览器没有内置这样的光标：
删除了表情符号，现在只是一个 photoshop 风格的圆圈 pic.twitter.com/Xvp7kznsaM — Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 4 月 6 日
它的 CSS 只是一个圆圈 (border-radius:100%) 加一个边框 (0.5px solid rgb(0,0,0,0.35)) 的 div，用来模拟 Photoshop 的画笔光标：
.brush [ display:block; width:0.8em; margin-left:-0.5em; margin-top:-0.5em; height:1.1em; box-shadow:0px 0px 2px #fff; border:0.5px solid rgba(0,0,0,0.35); border-radius:100%; ]
如果单击拖动（手形）按钮，则会返回拖动模式。
还有一个画笔按钮可以直接开始刷漆。这一切实际上只是我记忆中的 Photoshop 的残留：
模糊像素的东西看起来很酷，但一个区域有一个尖锐的边缘，从“时髦人士”变成了“游客”，这毫无意义。
因此，在发布前一周，我决定尝试在图画中添加一个大模糊效果。为了使其更加渐进：
这产生了很大的影响。它使它看起来不那么干净，但从数据方面来看，它变得更加实用和有效。因为数据并不精确，所以视觉模糊更加真实。绘图也变得像 Photoshop 软笔刷一样。总的来说，体验更好。幸运的是，它现在只是一个 CSS 过滤器：
.map-canvas [ -webkit-filter:blur(25px); -moz-filter:blur(25px); filter:blur(25px); ]
发布前的吸引力基本应用完成后，它现在可以让您为世界上的任何地方涂色，保存并向您展示众包结果，我将其嵌入到我的网站 Nomad List 中，作为每个城市的“街区”页面：
这为它提供了一些基本的早期吸引力，更重要的是，它将在几个月内预先填充数据。附注：每当您之前的产品具有吸引力时，您都可以使用它来增加新产品的吸引力！
添加标签该网站现在处于预发布阶段，但已上线。它表现不错：
...但我需要一些额外的魔法才能让它真正吸引人（而不仅仅是通过 Nomad List 的嵌入）。
我无意中在标签中发现了这种魔力。
什么是标签？好吧，为了给地图提供更多信息，我想添加标记功能。标签可以用某人的观点描述位置或区域。比如“有很多咖啡店的时髦学生区”或“晚上最好避开的危险区域”。我不确定，所以我先问了 Twitter：
我应该在 https://t.co/idCjeBF2zG 中添加文本标签吗？这是模拟图。它会提供一些额外的元数据上下文吗？Pic.twitter.com/h8SP8qJggU
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 7 月 3 日
从技术上讲，它只是带有坐标的相同数据库条目，但包含文本标签：
纪元、用户 ID、纬度、经度、标签、UID
Epoch 是创建标签的时间戳。User_id 是用户的唯一指纹哈希。纬度、经度是位置。标签是文本字符串。UID 是数据库中的唯一键，它结合了 user_id、纬度、经度和标签。
我还添加了一个工具来将它们添加到用户界面中。一个简单的 [T] 按钮和一个文本框，当您单击某个地方时会打开。您输入一个文本标签，当您按回车键时，它会将其发送到服务器并将其放在地图上：
✨ 边喝酒边编码 🍺，这很有帮助，因为这真的很难：添加关于区域的主观文本标签 https://t.co/idCjeBF2zG pic.twitter.com/3ABxYCTGK8
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 7 月 3 日
突然开始流行起来
Hoodmaps Los Angeles 甚至没有做任何类似发布的事情，就开始自行流行起来：
🇺🇸洛杉矶的人们发现了 Hoodmaps，并开始疯狂地标记 pic.twitter.com/yfLympAoS5
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 7 月 6 日
显然有人已将其提交给 Reddit：
垃圾邮件发送者
然后我遇到了第一批垃圾邮件发送者，之后还会有更多：
现在收到奇怪的自动垃圾邮件，例如“不可缩放设置”，该死的脚本小子🙄。我会看看我是否可以制作一个自动禁止的东西 pic.twitter.com/ccBIH3xRzF
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 7 月 6 日
所有自动生成的奇怪单词垃圾邮件，不知道为什么 pic.twitter.com/uJOUg6Aodq
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 7 月 6 日
事实证明，他们自动提交了 205,603 个标签，例如“brontometer unretractable Pharisaism”。完全是胡说八道。
我尝试了 reCAPTCHA，但它会严重堵塞界面。所以我用 JS 编写了自己的加密魔法。它只是根据许多人为的线索确保它实际上是一个人在编写。如果我是 Facebook，它会在几分钟内被黑客入侵，但由于我只是一个小网站，所以没有人真正关心。
我还添加了标签的赞成和反对，希望人们会反对垃圾标签：
✨为文本标签添加了 @reddit 风格的点赞功能，这意味着现在任何人都可以添加标签，其他人可以点赞/删除标签 😱https://t.co/idCjeBWDYg pic.twitter.com/J2LWVobtmc
— Pieter Levels @ 🇺🇸 (@levelsio) 2017 年 7 月 3 日
垃圾邮件已解决！目前……
域名我现在有 hoodmaps.io、hoodmaps.org、hoodmaps.net，但没有 hoodmaps.com：但他们要价 1,795 美元！太疯狂了！我给他们发了一封匿名邮件，出价 1,000 美元：
什么？1,695 美元？这只低了 100 美元。我当时想，这根本就不行。
但是……AA(#@(#&(……我需要这个域名。它会立即增加它的声誉。如果它能在 .net 上获得关注，那么显然 .com 的价格在发布后会更高。
当我在 2014 年以 nomadlist.io 的形式推出 Nomad List 时，我不得不将 nomadlist.com 的价格从 8,000 美元降到 2,000 美元！这花了很长时间，但仍然是一大笔钱。所以，无论如何，我都会支付。但与此同时，1,695 美元的报价已经过期。所以无论如何，我会支付 1,795 美元。我可以用 Nomad List 的收入来支付。虽然它烧钱了，但对于仅仅是数字化的东西来说，这可是一大笔钱。如果 Hoodmaps 能赚回 2,000 美元，我就已经盈利了。所以我这样做了：发射现在它似乎已经准备好发布了。但是你从哪里开始呢？我想把它做好。发布是最重要的事情。在某些方面，它比产品更重要。你可以有一个普通的产品，但有一个很棒的发布，每个人都会谈论它。大多数时候，我看到优秀的产品，但发布却平庸无奇，最终会销声匿迹（这很可悲）。显然，最好的是有一个优秀的产品和一个很棒的发布。
这次发布，我将专注于 Product Hunt、Hacker News 和 Reddit。在那里出现后，希望它能被媒体报道（通过病毒式传播）。如果没有，我会自己做新闻宣传。
非常重要：每个平台都有自己的语言和氛围。这意味着要根据平台调整你的发布风格。我将讨论每种氛围。Twitter 促销我做了一件新事情。我游历了洛杉矶（我现在在那里待了一个月），并在现实生活中测试了 Hoodmaps。我从费尔法克斯开始，去了好莱坞高地，然后是韩国城，然后是银湖，然后交叉对照标签和类别是否准确。这很有趣，也证明了它确实有效。当然还有一些促销：
🔥为了此次发布，我今天在洛杉矶🇺🇸现场测试了 https://t.co/sdIVMcMNjE，第一站：西好莱坞的费尔法克斯 1/478 pic.twitter.com/AFKTTM8bn1 — Pietz @ 🇺🇸 (@levelsio) 2017 年 7 月 9 日
向 Product Hunt 推出Product Hunt 的氛围是快乐、积极的，有点营销的味道。所以让我们适应它吧。口号使用了表情符号，因为它们很可爱，可以增加参与度。这里有 PH'ers 的强烈心理暗示：这个过程正在阅读“众包”，好的，“城市地图”，好的，怎么做？“你可以画”，哦，很酷，我想试试！
我在周日午夜过 1 分钟提交了。因为那是发布的最佳时间。排名会刷新，你最有可能登上排行榜榜首。在 Product Hunt 排名中取得良好的开端是成功的一半，另一半是在接下来的 23 小时内保持这一排名。是的，这意味着我大约 36 个小时没有睡觉。牺牲。
我在推特上发布了它，并附上了 Product Hunt 的链接（很重要）：
💫 我的新创业公司 🗺 Hoodmaps 现已在 @producthunt 上线：众包 🌇 城市地图，您可以在上面绘图 👉 https://t.co/0sQ2XdvCfN pic.twitter.com/Zt8ZH3jWPA — Pietz @ 🇺🇸 (@levelsio) 2017 年 7 月 9 日
我迅速跳到评论区介绍产品，讲述它的故事，并立即回答人们评论的任何问题（并修复错误）。不过它确实起作用了。它进入了 # 1 并在那里停留了 24 小时。
在 Hacker News 上发布Hacker News 的氛围明显是怀疑论、知识分子，并且对营销和推销非常反感。“这 10 条增长黑客技巧将改变您的生活”在 HN 上永远行不通。
我没有在主板上发帖（我可以这样做），而是尝试了 Show HN：，它就像是一个展示板，展示您在 Hacker News 上做出的贡献。竞争更少，登顶的几率更大。获得高度点赞的 Show HN：也有机会登上头版。
我在这里使用了谦虚的口号，同样是“众包”，但我没有使用地图，而是使用了“可视化”，它更面向数据，这是 HN 工程师喜欢的。不要表情符号。不要可爱的东西。HN 讨厌可爱的东西。HN 会杀死小猫。
它在 HN 上引起了很好的反响，并在 Show HN: 上停留了大约一天。事后分析，也许我会把它发布到主板上，以获得更多关注。
发布到 RedditReddit 的氛围就像 Hacker News，但更主流，因此适用于任何主题。Reddit 也讨厌销售策略，并且对你的产品非常挑剔。如果你发布的内容有任何错误或无法按预期工作，它将不会被点赞，而是会在评论部分被摧毁。Reddit 是一个被宠坏的孩子，它拥有网络上最好的内容，而且都在争夺头版。
发布到 Reddit 是出了名的难。它必须完美。
显然，目标是登上头版。但我从未想到这真的会发生。在将 Nomad List 提交给 /r/dataisbeautiful 之前，我曾遇到过一次这种情况：2 年前在 /r/dataisbeautiful 上。评论相当尖锐，但它还是登上了头版。有了之前的成功，而且 Hoodmaps 也是 subrreddit /r/dataisbeautiful 的相关网站，因为它也是基于数据的（而且很漂亮），所以我提交了它。我需要在这里的标题准确无误，否则它就会消失。“我做了”让它变得个性化，“众包可视化”与面向数据的 subreddit 配合得很好。它描述性强、谦逊而简单。
就像 Product Hunt 一样，我直接跳到评论中，按照 /r/dataisbeautiful subreddit 的指导方针，解释了数据来源、流程以及我是如何构建它的。这花费了相当大的精力，但可能帮助很大。再说一遍，没有销售方面的废话：这个方法奏效了，直接登上了榜首，而且这次评论有 90% 都是正面的：
服务器崩溃
Hacker News 是全球排名第 3069 位最受欢迎的网站，Product Hunt 排名第 4271 位，而 Reddit 是全球排名第 23 位的网站：
这意味着，如果你在 Reddit 上获得关注，那么就和你的服务器说再见吧。
你知道登上 Reddit 首页的秘诀吗？保持服务器正常运行。99% 的网站在 Reddit 大量涌入时都无法保持服务器正常运行。Redditors 知道这一点，因为他们会看到一个网站位于 subreddit 的顶部，然后当他们点击链接时什么也没有发生。他们会直接跳过它（他们习惯了网站因“Reddit 效应”而崩溃的情况），并且不会点赞。这意味着，如果你不能保持服务器正常运行，它就会停止上升到顶部并消亡。这实际上是大多数网站（即使它们很棒）无法登上首页的原因。
你可以在发布期间在 Google Analytics 中看到它。你会看到你网站上的实时用户数量被困在网站停止响应的数字上。这意味着，除非你修复某些问题，使你的网站再次响应，否则你不会提高这个数字。
现在每秒有 500 人使用 Hoodmaps 绘图并将其发送到服务器。PHP 无法承受。我那低劣的代码无法承受。网站停止响应。点赞也停止了。
我给我的服务器管理员 Daniel Lockyer 发信息，让他随时待命，尽其所能提供帮助。最好让其他人在服务器上，因为当 Reddit 淹没你的服务器时，你需要所有人上场，快速迭代和测试快速修复以保持服务器正常运行。你只有短短几分钟的时间来修复这些问题。如果你的网站消失了 15 分钟，它可能会失去排名并再次消失。切换到静态修复启动时扩展问题的最快、最简单、最快捷的方法是将您的网站设为静态。这意味着每次用户进入时，您都无需加载服务器端（PHP、JS 等）应用程序来生成页面。相反，您只需向他们显示一个静态的非动态 HTML 文件。您可以这样做：
php./应用程序/index.php>./应用程序/index.html
我们现在有 1,000 个 HTML 文件，并更改了服务器配置 (NGINX) 以加载 HTML 而不是 PHP。这有严重的限制，因为您的内容不能再是动态的。就我而言，现在人们在地图上绘制的任何内容都会被保存，但不会显示在城市页面上，因为页面是静态的。但谁在乎呢。如果这意味着保持页面正常运行，您可以暂时减少功能！
将城市页面设为静态还不够。现在导致服务器崩溃的瓶颈是同时绘制和标记 500 人的地图的 AJAX 请求。我进入 JS 代码，简单地注释掉任何 AJAX 请求以卸载服务器，并禁用 PHP 服务器端代码以不再接受任何请求。
现在已完全静态化，AJAX 请求已禁用，所有写入都已禁用，以使服务器保持运行一段时间：https://t.co/DucBk1aERS pic.twitter.com/bfyG5I1D4q
— Pietz @ 🇺🇸 (@levelsio) 2017 年 7 月 9 日
成功了！网站又恢复了成功了。我们知道它成功了，因为我们突然在 Google Analytics 中看到实时用户数量上升：现在，我们网站上有近 795 名用户。这可不少。现在网站处于静态，但响应速度很快。现在我们更接近目标了，从第 3 页到第 2 页的顶部：
我们离目标已经非常近了。我已经很满意了。我和 Daniel（我的服务器管理员）之间的聊天变得安静了。我们都专注于刷新 Reddit 的首页。
首页!!!
然后突然……我们就在 Reddit 的首页上！我们做到了。我很高兴。现在我终于可以关掉笔记本电脑睡觉了。
谷歌在启动过程中关闭了我的电脑
但我睡不着。因为情况又变糟了。突然我收到报告说地图不再加载了：我用完了配额。Google Maps 使用 API 密钥，如果你的加载次数超过 100,000 次（我想是在一个月内），他们就会关闭你的服务。就这么简单。我被转到了他们的联系页面：
我必须等待 3 到 5 个工作日才能收到回复，才能向他们支付 10,000 美元以解锁配额。对于一家企业来说，对正在推出产品的潜在客户来说，这是一件可怕的事情！
我用我的个人账户创建了一个新的 API 密钥，现在它又可以使用了。我现在真的去睡觉了。
SWITCH TO MAPBOX
Switch to @mapbox — Burak Aslan (@deadlocked_d) 2017 年 7 月 10 日
第二天我醒来，又过了 2 个小时，地图超出了配额，人们无法使用它。Twitter 的人告诉我应该使用 Mapbox。他们会更灵活地处理配额，至少会让地图上线。花了 2 个小时才更改了所有的 JavaScript 代码。我不想为此使用框架。所以我只是重写了代码。像 Google 使用 (纬度，经度) 和 Mapbox 使用 (经度，纬度) 这样的烦人的东西，但最终它成功了！
更酷的是，Mapbox 有一个 3d 功能，只需一行代码即可启用。
不过，比花哨的 3D 更重要的是，这次地图保留了下来！
4chan
当然，任何可以匿名发帖的网站，4chan 都喜欢：幸运的是，我的垃圾邮件过滤器起作用了。但还是出现了一些种族主义内容。所以我添加了这个单词列表，它会立即禁止使用这些单词的人：
如果你在 https://t.co/WFo1SUwkzU 上写了一些种族主义的东西，它就会被 🐱 小猫 替换，然后你就会被迫观看一段让你欣喜若狂的视频 pic.twitter.com/ZQa0lGorHy
— Pietz @ 🇺🇸 (@levelsio) 2017 年 7 月 19 日
☺️ 发布后
从成功率和流量来看，这确实是我经历过的最好的产品发布日。它比 2014 年 Nomad List 的发布规模更大，因为这次发布在 24 小时内同步完成：超过 20 万人使用了 Hoodmaps，使用次数达 50 万次。
在这 200,000 人中，约有 29,566 人（占 7%）实际在地图上互动和绘画。这些人在地图上为 6,823,865 个点着色，即每个用户约 230 个点。更重要的是，他们在地图上标记了 11,922 个文本标签：从洛杉矶的“以为自己还在韩国的韩国人”到巴黎的“塞纳河边喝酒”再到曼哈顿的“戈登·盖柯崇拜者”。
有了这么多数据，我可以进行一些有趣的查询。比如，华人、韩国人、法国人和荷兰人的侨民住在哪里？
🇨🇳 中国、🇰🇷 韩国、🇫🇷 法国和 🇳🇱 荷兰移民（和侨民）在世界各地都有自己的社区吗？pic.twitter.com/8G5dgziile
— Pietz @ 🇺🇸 (@levelsio) 2017 年 7 月 15 日
对于众包数据，通常数据越多，对数据的解读就越准确。
货币化
我有一些想法，也尝试过。我想卖海报：但我没有卖出一张。我尝试销售本地商业广告：
✨ 货币化：企业可以认领某个城市的社区地图并添加文字广告。想想汽车经销商、餐馆等。pic.twitter.com/yeSyPVsfku
— Pietz @ 🇺🇸 (@levelsio) 2017 年 7 月 7 日
但我一个广告都没卖出去。我还有一个想法要测试。我想卖一张城市的层压纸板地图，人们看到这个后可以在上面画画：
✏️ 在我的首尔宾馆里发现了一张 IRL 社区地图。巨大的潜在市场 📍https://t.co/ecFwXScPgv @levelsio pic.twitter.com/jb7fMn4jpm
— Shane Reustle (@reustle) 2017 年 7 月 20 日
想想 Airbnb 等。你挂一张小地图，主人（或客人）可以用记号笔在上面画出该区域：
不过，我仍不确定是否要这样做，因为它将在某种程度上是物理的。我更愿意在这里找到一种基于软件的商业模式。出售数据会很酷，但我不知道从哪里开始。如果你有一个具体的想法，请告诉我。
结论
已验证
现在下任何重大结论都为时过早。但我知道问题是真实的。人们想知道在城市里去哪里。我验证了以视觉方式使用集体知识是一种解决方案。现在的挑战是如何让这个网站像 WikiVoyage 一样主流？我还不确定，但我会继续改进应用程序，同时监控流量。现在看起来不错。一般来说，网站上随时都有 25 到 75 人，已经 2 周了！
在公共场所建造
这是我第一次 100% 在公共场所建造。这很有压力，因为每个人都在看，老实说，我非常确信它甚至不会成为人们会使用的东西。但结果比预期的要好得多。公开构建它的有趣之处在于，每当我遇到困难时，都有 100 个人和我一起看，帮助我解决问题。这也让我有责任感，我不能懈怠，有人看着我建造。更棒的是，我公开构建它这一事实本身就很独特，而且是一种营销（它很有效，因为你一直读到这里！）。
这很痛苦
我只想说，你也可以做到。我现在有一些不公平的优势（比如大量的 Twitter 粉丝），但不要让这阻止你。但这需要牺牲：在直播中公开构建，你可能会在数百人面前失败，我熬夜 36 小时来保持服务器正常运行并组织发布。过去 2 周，我每天都在努力让应用程序保持运行。这不是一份日常工作。这是高度集中的努力，每个细节都需要完美。
点击发布这篇文章后，我会休息几周来恢复。
但这是值得的！
我希望这篇太长的博文没有让你感到太无聊，并能给你一点启发。今天就发布吧！
附注：如果你想关注我的更多故事，我也在推特上。我还写了一本名为 MAKE 的书，讲述如何在没有资金的情况下创业。查看我的故事列表或联系我。要收到我写新博文的提醒，你可以点击「查看原文」订阅。
