我开发了一个整合学校内信息的应用程序

2 年 ago
宇, 华
2 minutes

首先

我作为学习的输出结果进行开发。
我目前正在学习编程，并且没有实际工作经验，所以可能会包含技术上的错误，请在评论中告诉我不合适的描述，谢谢。

开发的应用程序

ogp.png

开发的背景

在我剛開始學習的時候，我在看工程師轉職頻道的時候不知道從哪個開始看。
即使現在，我仍然記錄著已經看過和還沒看過的影片，並在Notion上進行管理。
我還想藉此機會將影片中提到的應用程式資訊、有用的Qiita文章和書籍資訊整合到一個地方來管理。

实施功能

    • 動画一覧、詳細表示

 

    • タイムスタンプ機能

 

    • メモ機能

 

    • Qiita一覧機能、詳細機能

 

    • 書籍一覧機能

 

    Twitter共有機能

主要功能

视频列表

76c04f38dcb5ad83f38e7f17b1b6eed1.jpeg

请参考

 

我使用 react-youtube 来嵌入视频。
只需将视频的 id 传递给 videoId，就可以轻松地嵌入 YouTube 视频。

 

yarn add react-youtube
yarn add -D @types/youtube

Qiita列表

我使用Qiita API创建了一个应用，用于整理学校生撰写的令人惊叹的应用介绍文章等内容。

59b8fb29be020de50e773d072b5550dd.gif

参照

 

在实施这个方案之前，我们写了一篇文章。

 

书籍列表

1b48602bd935da09e3f4c96fc6ea2964.jpeg

请参考https://developers.google.com/books/docs/overview?hl=ja。

在实施这一点时，我写了一篇文章。

 

时间戳

dfd2e48c665ad535ba29522f6d8cbddf.gif
const handleTimestamp = () => {
    //再生を一時停止
    player?.pauseVideo();
    //再生時間を取得
    setTime(player?.getCurrentTime());
};

从文件中

暂停播放正在播放的视频。

 

返回从开始视频播放到现在经过的时间，以秒为单位。

 

使用这些组合获取停止的秒数。
将秒数转换为小时和分钟的方法是参考了这篇文章。

 

日：通过Math.floor(sec / 86400)来获取指定秒数sec除以86400秒（1天）所得到的结果的整数部分。
时间：通过Math.floor(sec / 3600)来获取指定秒数sec除以3600秒（1小时）所得到的结果的整数部分。
分：通过Math.floor(sec % 3600 / 60)来获取指定秒数sec除以3600秒（1小时）所得到的余数除以60秒（1分钟）所得到的结果的整数部分。
余秒：通过Math.floor(sec / 60)来获取指定秒数sec除以60秒所得到的余数。

const secInt = parseInt(secValue.toString(), 10);
const hours = Math.floor(secInt / 3600);
const minutes = Math.floor((secInt - hours * 3600) / 60);
const seconds = secInt - hours * 3600 - minutes * 60;

主要使用的技术

Next.js 版本为 v13.4.10
TypeScript 版本为 v5.1.6
Tailwind CSS 版本为 v3.3.3

节点版本v18.16.0
Express版本v4.18.2

Prisma v5.0.0
PostgreSQL

eslint ESLint 是一个用于 JavaScript 代码的静态分析工具，用来识别和报告代码中的问题。

prettier Prettier 是一个代码格式化工具，它可以自动调整代码的样式，使其具有一致的风格。

husky Husky 是一个 Git 钩子工具，可以在项目中的特定事件发生时执行脚本。

lint-staged Lint-staged 是一个用于在 Git 暂存区域中运行代码检查工具的工具，可以帮助在提交前进行代码质量的检查。

swr SWR 是一个 React Hooks 库，用于处理数据获取与缓存，它提供了简单易用的接口。

zod Zod 是一个 TypeScript 运行时验证库，可以帮助开发者对数据进行类型验证和解析。

zustand Zustand 是一个用于管理 React 状态的库，它提供了简单且高性能的状态管理。

react-hook-form React Hook Form 是一个用于处理表单的库，它基于 React Hooks 提供了方便的表单处理方法。

react-icons React Icons 是一个提供了多种矢量图标的库，可以方便地在 React 项目中使用。

react-loader-spinner React Loader Spinner 是一个用于显示加载动画的组件，它提供了多种样式的加载动画效果。

react-select React Select 是一个用于创建自定义下拉选择框的库，它提供了丰富的功能和样式定制选项。

react-share React Share 是一个用于分享内容到社交媒体的库，它提供了简单易用的分享功能。

react-toastify React Toastify 是一个用于显示弹出通知的库，可以在 React 应用中轻松地展示通知消息。

react-twitter-embed React Twitter Embed 是一个用于在 React 应用中嵌入 Twitter 媒体内容的库，可以方便地展示推文或媒体。

react-youtube React YouTube 是一个用于在 React 应用中嵌入 YouTube 视频的库，可以方便地展示 YouTube 视频内容。

 

SWR

我们选择了一种名为SWR的缓存管理库。

 

const Profile = () => {
  const [profile, setProfile] = useState(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    (async () => {
      setLoading(true)

      const res = await fetch('/api/user')
      setProfile(await res.json())

      setLoading(false)
    })()
  }, [])

  if (profile === null || loading) {
    return <div>loading</div>
  }

  return <div>hello {profile.name}</div>
}

这段代码使用了 useSWR 后可以更简洁地编写。

import useSWR from 'swr'
 
function Profile () {
  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
 
  // データをレンダリングする
  return <div>{data.name}</div>
}

eslint,prettier,husky,lint-staged 可以在代码开发过程中帮助团队保持代码质量和一致性的工具。

为了保持代码的整洁，我设置了在提交时自动进行代码验证和格式化的设置。

 

React-Hook-Form 是和 Zod 结合的一个选项。

由于使用了 react-hook-form，所以我使用了 zod 这个模式验证工具。
zod 是一个 TypeScript 的模式验证工具。
它作为 react-hook-form 的官方插件提供，可以使用 zodResolver 插件将其集成进来。
除了 zod，还提供了 Yup、Zod、Joi、Vest、Ajv 等其他选项。

 

const schema = z.object({
  name: z.string(),
  age: z.number(),
})

type Schema = z.infer<typeof schema>

:
const { register, handleSubmit } =
    useForm <Schema>
    {
      resolver: zodResolver(schema),
    }

 

其他

 

参考了这篇文章，关于Render.com免费计划的休眠策略。

 

使用教材的时间达到制作的过程中

 

接下来

我现在正在编写测试代码。
同时根据用户的反馈来进行改进。

最终

我希望将来继续学习，并创造出对他人有用的服务。虽然我的表达不够流利，但感谢您一直阅读到最后。

bannerAds