我如何使用 ChatGPT 和 Next.js 构建我的第一个开源项目。24 小时内有 10k 用户

傷城~ 2024-05-02 20:09 1阅读 0赞

介绍，我以前从未编码过，这对我来说看起来非常难，2 个月前我决定为什么不现在。🤷♀️

我的朋友建议我从开源项目开始，还帮助我完成了最初的简单设置步骤。

我几乎在每一步都使用了 ChatGpt，从弄清楚如何设置、安装、将 API 连接到代码的含义，如何重写函数或更改大小。

现在我要详细介绍一下我构建的第一个项目。

### 您将在本文中找到什么？ ###

动图

![3349e7677aae1995e37bd1879e261ff5.gif][]

我从🥚进化到🐥

🥚 第 1 步。设置环境🥚 第 2 步 。 查找  
开源项目并在其 上 构建

### 我构建的项目是什么？ ###

Linkedin Post Generator - 用于创建为 Linkedin 生成的 AI 的帖子生成器。

[https://zhifj.com][https_zhifj.com]

在 GitHub 上[telegeram1.com][]

动图

![0971ff86e652bb433c5f9ca036e79c0d.gif][]

下面我分享了发布第一天并在 LinkedIn 上流行起来的所有统计数据。

### 为什么使用 Linkedin 帖子生成器？ ###

首先，我在 Linkedin 平台上试验了一段时间。

我花了很多时间在 linkedin 上写帖子，比如每个帖子至少 1 小时，并且正在考虑捷径。🤯

因此，我分析了 100 多个不同的创作者和 300 多个不同的提示，以找到更快地生成更有效的帖子的方法。

所以，在这里我将逐步分享我所做的基础知识。

### 🥚 第 1 步. 设置环境 ###

#### 摆茶具 ####

在我开始之前，我得到了设置包管理器的建议，比如 tea 来处理开发环境。

🥹 这些词在这一点上仍然是未知的“包管理器”

当我得到它时，茶会帮助安装 node、npm、vercel 和我开发所需的任何其他包。

所以合而为一。

#### 使用 TypeScript 和 Tailwindcss 设置 Next.js ####

我有一个基本的了解，即我需要前端。

我被教导从生成一个新的 Next.js 项目开始。同样使用 TypeScript 和 Tailwind CSS，所以请遵循以下步骤：

<code>npx create-next-app
 
 # ---
 # you'll be asked the following prompts
 What is your project named? my-app
 Would you like to add TypeScript with this project? Y/N
 # select `Y` for typescript
 Would you like to use ESLint with this project? Y/N
 # select `Y` for ESLint
 Would you like to use Tailwind CSS with this project? Y/N
 # select `Y` for Tailwind CSS
 Would you like to use the `src/ directory` with this project? Y/N
 # select `N` for `src/` directory
 What import alias would you like configured? `@/*`
 # enter `@/*` for import alias
 </code>

### 🥚 第 2 步。查找开源项目并在此基础上构建 ###

我使用了这两个开源项目：

1.  Twitter Alghoritm [GitHub - coryetzkorn/twitter-algorithm: The official Twitter ranking algorithm][GitHub - coryetzkorn_twitter-algorithm_ The official Twitter ranking algorithm] 所以我可以根据 Linkedin 的算法对用户的帖子输入进行评分。

![4295031eff85b725c92f77cefe16656e.png][]

2.推特生物生成器

[https://github.com/Nultlope/twitterbio][https_zhifj.com]  
这个帮助我弄清楚了如何连接 Open.AI 并用它为 Linkedin 生成帖子。在当前代码中它生成了 BIO

![5a59a191db2931fd91af04cd153b2792.png][]

为了分别设置和打开每个项目，我将它们以 zip 格式下载到我的计算机上

![45c7ca2888b9baddfe3bfccbf12faeb7.png][]

### 🐣 Step.3 弄清楚代码 ###

所以我有点被我所看到的震惊了，一开始我什么都想不通。

所以我做了什么，我向 ChatGPT 询问了我的应用程序的基本结构。

我把里面的每一个页面代码都抄下来，问它是做什么的，基本上就是问怎么修改。所以我开始有了一个更好的主意，应用程序前端在哪里，CSS 在哪里。

我仍然没有完全了解所有内容并且遗漏了这些东西，但我认为这绝对是快速学习。

我向 ChatGPT 提出的一些请求非常基本，现在对我来说真的很清楚，那时我问了所有问题，都是愚蠢的问题。

![c356a821e75d9483aa76a10eeaca93bb.png][]

### 🐣 Step 4 构建项目 ###

因此，在了解了一些基础知识之后，我继续进行自己的更改。开始在这些项目之上构建应用程序。

它有两部分=排名+生成器

#### Linkedin 帖子生成器算法 ####

排名是根据不同的标准对您的帖子进行排名，从而提高性能。

我使用以下函数为 Linkedin 已知的内容改编了算法：

1.  检测多个主题标签的功能
2.  检测图像或视频的功能
3.  检测帖子中网址的功能
4.  支持使用表情符号的帖子的功能
5.  宣传负面内容的功能
6.  像后期格式化一样优先中断的功能。
7.  减少行长度的功能
8.  提问功能

与 Twitter 算法相比，Linkedin 并不公开。

<code>
 // function to detect multiple hashtags
 function multipleHashtags({ post }: PostData): Rank {
 const regex = /#[\w-]+/g;
 const hashtags = post.match(regex);
 const lowerCasePost = post.toLowerCase();
 
 if (hashtags && hashtags.length > 3) {
 return {
 score: 0.5,
 message: `Too many hashtags.`,
 };
 }
 if (hashtags && hashtags.length <= 3) {
 if (
 lowerCasePost.includes("#follow") ||
 lowerCasePost.includes("#comment") ||
 lowerCasePost.includes("#like")
 ) {
 return {
 score: 0.5,
 message: `Avoid using hashtags like "follow," "comment," or "like".`,
 };
 }
 return {
 score: 1,
 message: `Combine general and specific hashtags.`,
 };
 }
 
 return {
 score: 1.0,
 };
 }
 
 // function to detect image or video
 function imageVideoBoost({ postMedia }: PostData): Rank {
 const has_media = postMedia;
 if (has_media) {
 return {
 score: 2.0,
 // message: `Contains image or video.`,
 };
 }
 return {
 score: 1.0,
 };
 }
 
 
 // function to detect urls in post
 function postHasUrl({ post }: PostData): Rank {
 const regex =
 /https?:\/\/[\w-]+(\.[\w-</span

[3349e7677aae1995e37bd1879e261ff5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/7c167994c8774293afd2dfd679015706.gif
[https_zhifj.com]: https://zhifj.com
[telegeram1.com]: http://telegeram1.com
[0971ff86e652bb433c5f9ca036e79c0d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/f4b713afbce645e28e782d94a04845ad.gif
[GitHub - coryetzkorn_twitter-algorithm_ The official Twitter ranking algorithm]: http://zhifj.com
[4295031eff85b725c92f77cefe16656e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/ba536539a8384118a0e856cf46c4e4c9.png
[5a59a191db2931fd91af04cd153b2792.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/a431ebc454a14c138678260a9cd06db9.png
[45c7ca2888b9baddfe3bfccbf12faeb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/0e44c9d906a84949bb6e3ed481975fe9.png
[c356a821e75d9483aa76a10eeaca93bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/355a7495e07c41b7b542997b63098a46.png