我还是那个失业的产品经理，我又写了一个程序： IP 工具箱

[jason5ng32]

TLDR

还是在 ChatGPT 和 Github Copilot 的帮助下，我又写了一个 IP 工具箱：

主要实现：

1. 从多个来源显示本机的 IP ，包括两个 IPv4 来源，两个 IPv6 来源
2. 显示所有 IP 的相关信息，包括国家、地区、ASN 、地理位置等
3. 检测一些网站的可用性：Google, Github, Youtube, ChatGPT 等
4. 检测 WebRTC 连接时使用的 IP
5. 可以通过小工具查询任意 IP 的信息
6. 根据可用性检测结果，返回目前是否可以访问全世界网络的提示

体验与吐槽地址： https://github.com/jason5ng32/MyIP 。

正文

没上班之后确实有点闲，每天除了健身遛狗打游戏骑摩托车，就是和 ChatGPT 各种聊天。

继上一次在 ChatGPT 的帮助下写了一个 Chrome 扩展（之前的帖子： https://v2ex.com/t/988213 ）后，我的程序员朋友跟我说：

「你这个原生的 JS 我看着有点不舒服，为什么你不学一下 vue.js ？」

行，那就学一学，反正有 ChatGPT ，怕啥。

产品经理做事通常是目标驱动的，比如老板说，这个需求你得做，那这就是我的目标，老板你说什么都对，我爱你，老板。

于是，我给自己设了一个目标：写一个 IP 工具箱，替换我经常用的第三方服务，比如 ip.skk.moe 。

然后，我就开始干了。这个程序一共花了我差不多 12 个小时，大致上是这样分配的：

1. 花了 1 小时阅读 vue.js 的文档，先学一学基本的思路
2. 花 9 个小时与 ChatGPT 聊天，完成程序的 90% 的代码
3. 花 1 小时修改样式
4. 花 1 小时看了一下 TVB 电视剧放松

讲真，这比我想象中要快，作为一个只是在 10 多年前玩过 WordPress 的 PHP 和 CSS2 的产品经理，再次感叹几件事：

1. ChatGPT 的确实牛逼
2. vue.js 给我带来了新的体验，仿佛打开了一种新的思路（虽然大部分代码不是我写的，但阅读代码让我了解了一种新的工作流程和多人协作方式）
3. 感谢开源，感谢各种前端框架，真是省事啊

其实，之前的工作作为产品经理，对各种开源的框架是有耳闻的，但毕竟我的工作就是指着程序员鼻子干活然后找老板邀功，并没有真正感受这些框架给落地的开发工作带来的便利性，这回，真正感受到了。

作为一种「老人」对年轻人的油腻般忠告也好，一种感叹也好，我觉得产品经理是应该多掌握一些技术的。

资源

体验地址： https://jason5ng32.github.io/MyIP/

源代码： https://github.com/jason5ng32/MyIP

谢谢看到这里的各位大佬。

20231126 更新：

1. 增加 DNS Leaks 检测
2. 增加两个中国的 IP 检测源
3. 增加地图显示开关

20231127 更新：

1. 增加暗黑模式
2. 为移动版增加简约模式

没想到快 300 个 stars 了，失业产品经理表示很欣慰。也同时感受到程序员群体的有爱。

1500+ 星星了……着实是受宠若惊。

已经 2000 星星了，每天差不多有 1000 人在使用，有点喜出望外。

[dofy]

写个自传吧，书名替你想好了：《产品经理学会写代码之后 - 我的后半生》

[googlefans]

@dofy 哈哈哈

[cue]

阿禅加油。

不过好像有个问题，部署在 Github 上，好像只能识别到国内的 IPv6 地址和机场的 IPv4 地址，识别不到国内的 IPv4 地址。

[BeijingBaby]

《产品经理重生之写代码》

[goodokgood1]

IP 地址库相当不准确

[dvbs2000]

被产品经理职位耽误了的攻城狮

[jason5ng32]

@cue 这个和挂在哪里无关哈，因为不是通过 Github 服务器去识别 IP 。

[jason5ng32]

@goodokgood1 或许我该换另外一个免费服务。

[swulling]

还挺实用的。

[Rabbit233]

每次刷新网页获取到的延迟偏高呀，需要再次点击那个延迟刷新按钮才正常

[Lentin]

https://no-ip.cn/
我之前弄了个简易版的

[jason5ng32]

@Rabbit233 或许我可以改一下，在其它部分加载完之后，再执行延迟测试。

[jason5ng32]

@Rabbit233 加了延迟，可以看看。

[huguadao]

缺个运营系列就全了👍

[jason5ng32]

@huguadao 我之前创业做教育的时候……我教的就是运营，哈哈哈哈哈

[jason5ng32]

@Lentin 调研时貌似有看到你这个网站。

[huguadao]

@jason5ng32 好吧，你赢了

[Lentin]

@jason5ng32 #16 https://github.com/nb5p/MyIP 就是这个改的 加了个暗色模式=。=

[jason5ng32]

@huguadao 赢毛，都失业了 😭

[jason5ng32]

@Lentin 对对对，我看的是这个。你倒是提醒我，或许我可以加一个暗黑模式……（有空的时候）

[huguadao]

@jason5ng32 😂我都失业一年多了

[bian2023]

加个国内 IP 归属地检测吧
类似 ip.skk.moe 那种，上面的国内的（如果分流了），下面是国外的

[woshinide300yuan]

强烈建议顶部 4 格+1 格，显示国内地址。
有时候拿本机 IP 还得滚一下页面到最下面，尝试用所谓#WebRTC 往往通过 UDP 直连进行建立……里的信息，太麻烦了。

[cond0r]

赞，可以再加一个 dns leak

[likooo125802023]

换个思路，不做 IT 行业的产品经理，如何？

[jason5ng32]

@cond0r 好提议。我准备加一下。

[jason5ng32]

@woshinide300yuan 应你的需求，添加了 2 个中国的 IP 检测来源。提交。

[woshinide300yuan]

@jason5ng32 谢谢。 感觉工具就是应该快进快出！之前的 4 格全都是海外 IP ，看不出相互之间的区别，反而要增加一个滚动页面的动作才能找到页面下方的真实 IP ，怪累人的。 谢谢啦。

[jason5ng32]

@cond0r 已加。

[zenoven]

赞一个，作为程序员我却没了心力写东西，该反思下自己了

[lawyi]

对 "通过 ChatGPT 写的。大概来回 50 个回合" 这个聊天内容非常感兴趣，能否分享借鉴下

[dence]

我也和楼上相同想法，想请教下具体是怎么样和 chatgpt 聊天能写出完整的项目

[jason5ng32]

@Lentin 我也加了暗黑模式了，哈哈哈哈哈

[lifekevin]

不错不错，点个 star

[wu00]

作为一个开发，自己设计产品后，会觉得以前怼产品怼得稍微有点过了；
作为一个产品，自己开发项目后，有啥感受

[maemolee]

刚才在即刻看到你了，有 80 多个 star 了，很强！

[jason5ng32]

@wu00 我在大小公司都工作过，也创过业，分享一点不成熟的小见解。

创业公司里我觉得还好，因为团队小，大家都工作交集多，双方的互相理解也就越多。

而在大公司里，由于分工和责权非常明确，不同角色的做事方向和方式就容易产生矛盾。

比如，产品经理更关注做什么，程序员更关注怎么做。

这导致了程序员经常觉得产品经理没想清楚，但是产品经理没想清楚其实是个常态。这也导致了产品经理经常觉得程序员做得慢，因为他觉得自己已经在当时想清楚了，最难的事已经做完了，怎么程序员还需要那么长时间去开发。

比如，对变与不变的接受程度不同导致的矛盾。

产品经理更面向市场和老板，这是两个大变量，他们的变化会导致产品需求的变化，从而可能导致有些开发工作终止、变更、重来。我之前经历过不少这种情况，吵架是在所难免的。吵完架之后喝个酒继续做事也就过去了。

比如，双方对技术理解和用户理解的不同导致的矛盾。

研发经常怼产品经理的一句话是，这个需求是你想象的，不值得做。反过来，产品经理经常说的是，这个需求很简单，应该一下子就做出来。

于是，双方就觉得对方都是个「小可爱」，互相在心里骂了起来，但是，骂归骂，活儿还得干，久而久之，互相膈应。

其实我觉得很多矛盾都可以通过台面上和抽烟区的交流解决，但是，主动沟通往往是有难度的，而且，许多时候，主动沟通这件事，在产品经理那里还要衡量性价比。

以前我带产品团队时，很强调团队成员一定要多学技术，因为懂技术我们才知道：


1. 技术是什么
2. 技术可以为我做什么
3. 如何更好地与程序员沟通

可惜的是，在没有兴趣使然的情况下，让产品经理主动学技术，不是那么简单的一件事。

[cPO3Im7cn3lD39cU]

想问问 这个工具的价值和意义在哪里
我觉得 做点差异化 没人做的工具更好
虽然可能做出来的是极度小众的没啥流量和用户
但是这些用户一旦使用，那就是极高价值的用户，未来做销售，转化肯定更高

[jason5ng32]

@tpjaord 谢谢你的建议。不过我有一些不同的看法。

首先，这是我的学习项目，学代码也是我的一种兴趣爱好。学习，往往从模仿开始。

其次，工作和爱好能够融合自然是好事，但大多数时候不能融合。因此，它们大多数时候是分开计划和分开执行的。就像有些人跑步、骑摩托车，你不会把这些爱好和商业价值关联起来去思考。我们可以是个「双面人」，商业时商业，爱好时爱好。

第三，愚以为，在基本的温饱问题解决之后，并不需要把每件事都思考得那么商业，不累吗？

[Mickeyy]

楼主这执行力牛的，有两个问题想请教楼主
1. 是 GPT 3.5 还是 4.0 ？
2. 楼主能不能分享下，如何高效的和 ChatGPT 对话？尤其是写代码方面。

[mzname]

感谢😂从楼主的小站里又学了几个名词
以前只知道用 ip 检测网站检测自己代理开没开成功 hhh

[go233]

我也有一个 https://yestool.org/my-ip-search/ 我这个可以查代理后的 ip😀

[go233]

楼主可以分享一下与 chatGPT 对话过程吗？感觉这个完整的与 gpt 对话构建产品的案例比较少。您这个项目虽然只是查 ip 但也是一个完整的小项目了，非常适合作为案例来学习。如果可以分享到 github 的话，那么 star 也会更多一些。😀

[galaxynexus]

@tpjaord 想到了就去做，不需要考虑那么多，瞻前顾后只会一事无成，完成比完美重要 100 条街

[jason5ng32]

@Mickeyy 用的 GPT4 。不建议用 3.5 ，实在差太远。在写代码方面我不是专家，但最近确实也有一些小心得，大致上的做法是，作为对话发起者，你也是需求方，你的需求首先必须很清晰。其次，你需要把需求拆成很多子需求，这些子需求最终应该是可以独立运行的函数。这样的话，你就可以每次让 ChatGPT 做一件小事，而不是立马写一个「伟大的程序」。

其实我觉得整个对话过程，跟我作为产品经理写文档、与研发沟通的过程很像。总分总结构、正着说一遍、反着说一遍。

[LHRUN]

@jason5ng32 4.0 有推荐的地方吗

[axiongawei]

真的不错！赞一个老铁

[superliwei]

我遇到的最糟糕的所谓产品经理就是那些个觉得自己会一点技术就不用尊重程序员的人。所以，GPT 如果给了你能写代码的错觉那就糟了。

[jason5ng32]

@superliwei 也存在一种可能，当学到一点的时候，觉得自己很厉害；再学一点之后，觉得有很多东西要学，根本学不完。然后对那些有专业知识有经验人的产生了更多的尊重。

[microka]

https://ipcheck.ing/ 真不错！

[jason5ng32]

@microka 庆祝星星数破千时花巨款买的……

[s4nd]

看说明里有一条：支持 PWA ，没找到在哪呢

[jason5ng32]

已经 2000 星星了……真是惊喜和意外

[toan]

收藏了！

[wonderfulcxm]

可以啊

[Cloud9527]

厉害啊，0 基础编程搞得吗？

[qqjt]

赞，动手能力可以

[helloWorldzsj]

挺好用的，收藏了

[jason5ng32]

@Cloud9527 有一丢丢 PHP 经验。大概 16 年前学的。

[starcode]

执行力不错，可以搞点小创业。

[lstz]

可以考虑做个论坛，毕竟产品经理还是要回归运营路线

[since2021]

我这里显示 region 是一个省 city 是另一个省

[ahaoa]

这个很好用啊
本来都是用 whatismyipaddress.com 或者其他单独查 ip 的
现在就用这个了

[jason5ng32]

@lstz 那可能早晚会变成一个讨论翻墙方案的论坛

[jason5ng32]

@ahaoa 谢谢您

[fresco]

虽然不用 支持一下 期待更实用的作品

[tmkook]

我梯子挂的全局怎么取到我的真实 IP 的呀？

[fenglirookie]

你这个样式是你自己手写的吗。看起来还挺厉害诶 我就是写不好样式 写出来很丑

[jason5ng32]

@fenglirookie 基础样式是 Bootstrap 自带的

[fenglirookie]

@jason5ng32 我就是用这个类似的 css 库写出来的也不好看，不会排版

[goodokgood1]

恭喜作者，现在相当棒了，请问你的 ipcheck.ing 是采用了哪家的 IP 数据库？

[allenby]

噢噢，是这个哇，最近经常用好像是 appbin 给的推荐