用 AI只需3个步骤, 不会写代码的小白也能5分钟就能上线一个电影推荐网站(保姆级教程!)

开发者掘金 2024-12-12 18:32:40 浏览数 (100)
反馈

大家好,我是【开发者掘金】的松鼠。

今天给大家带来一篇超详细、面对零基础小白搭建电影推荐网站的教程。

先给大家看一个网站页面的截图,大家认为开发出这个网站并上线正常需要多久?

640 (0)

但我要告诉大家,这只是松鼠在 5 分钟内写出来并部署上线的,你信吗?

不信继续往下看下面的教程。

前情提要:本期项目教程为纯前端项目,哪怕你没学过编程也能实现。更多有趣的项目会在下周更新在【副业变现实战营】的专栏中。

今天的教程主要分为三个部分。

1️⃣ 用API获取电影数据(无需搭建服务端,解决电影数据来源问题)

2️⃣ 一句话描述需求,用 AI 帮助你写代码。(不会写代码的同学看这个教程也能看得懂!)

3️⃣ 一键部署(点击一下就能部署到线上,真正无脑写网站)

坐好,松鼠要开始装X了!

01


注册TMDB 账户

首先打开网站:https://www.themoviedb.org/

注册账户的目的是先拿到 TMDB 的 API 账户,有了这个,我们在接下来的项目中就可以获取到电影的数据了。

1️⃣注册账户,注册流程就不多说了,都是中文,懂得都懂

2️⃣创建 API,选择注册为个人主体,非盈利项目。如下图

640 (1)640 (2)

2️⃣ 在填写完一系列的表单后,我们终于拿到了想要的 API 数据了,你需要记录下这些信息。

640 (3)

02


二、打开 AI 网站

打开 AI 网站:https://bolt.new/

第一步流程,当然是注册账号了,注册账号这个过程实在是过于简单,为了不显得文章过于冗长,在这里就开门见山到最关键的步骤。

首先,你需要在输入框中描述你想要创建的网站的样子,为了更好的帮助大家理解,我给个我写好的提示词(当然,推荐大家详细描述出自己的需求,下面的例子只是简单描述,便于大家理解。

请帮我创建一个电影推荐网站,电影推荐网站的数据来源于的数据https://www.themoviedb.org/,他们有提供公开的 api,api 密钥为:“xxxx”,API 读访问令牌:“xxxx”,请根据我的需求,创建一个电影推荐网站。

640 (4)

AI 会开始逐步分析你的需求并开始写代码,去实现你想要的需求。

很短的时间,AI 就帮我们写好了代码,你可以在右侧看到AI成功实现了这个页面

640 (5)


03


3️⃣部署上线

当你认为 AI成功实现了你的功能后,你就可以开始安排部署上线你的网站了。

点击右上角的小火箭,进行部署

640 (6)

部署成功后,AI 会给你一个部署后的访问入口,你就可以拿这个入口进行访问了

640 (7)

当然如果你想将这份代码部署在自己的服务器上,也可以点击这里下载源码包。

640 (8)


当你拿到访问地址后,你就可以在浏览器中输入网址,感受下你用 AI 做出来的网站如何了。

松鼠测试了下,无论是热门电影还是高分电影,都能正常访问

640 (9) 

其次搜索功能也能正常使用,我们来测试下搜索下“西虹市首富”

640 (10)

OK,功能实现的都非常完美!

如果你想实现更复杂的需求,那么你就要在最初描述需求时详细描述,越具体的需求,AI 实现的效果就越接近你的想法

今天的教程就到这里就结束了。你学会了吗?

在文章的末尾,也给大家浅浅的安利下开发者掘金的【副业变现实战营】的专栏

在这个专栏里,我们在下周会给大家提供更多 AI 实操的项目/更多更前沿的掘金和副业信息。

例如:零基础小白如何借助 AI 快速开发小程序/ App的更多保姆级教程。

质量肯定会比公众号的内容更高,更详细。

具体的就不多说了,大家可以看下面的图了解。

640 (11)


0 人点赞