我在幾個小時內建立了一個電影串流網站 - 這是它的進展情況

我在 48 小時內建立了一個電影串流網站 - 這是如何進行的

幾週前，我偶然發現了幾個電影串流網站，它們似乎根本沒有任何後端。他們使用 TMDB 等 API 來提取電影數據，並使用 vidsrc.dev 來串流實際視訊。這讓我開始思考：「為什麼不自己嘗試呢？」如果我可以建立類似的東西（電影串流網站），但沒有後端，只有 React 和一些巧妙的 API，會怎麼樣？

所以，我決定挑戰自己。我給自己設定了一個 48 小時的挑戰，要建立一個電影串流網站。沒有後端，沒有資料庫——只有前端的 React，以及一些用於提取電影資料和處理串流媒體的 API。我想，「我將從頭開始，看看我能取得什麼成就，並一路學習很多東西。」

如果您是開發人員，您就會知道想要解決一些大問題的感覺。我花了很多時間學習 React、遵循教程並建立小型專案。雖然這些很有趣並且有教育意義，但我想要一些更具挑戰性的東西——一些真實的東西。我實際上可以使用的東西。電影串流網站似乎是一個完美的主意。

為什麼？那麼，電影串流網站無所不在，對嗎？但並非所有這些都有複雜的後端；有些使用簡單的 API 來提取電影資料和串流內容。我想我也可以做同樣的事情，學習很多關於 React 的知識，當然，最終會得到一個有趣的小專案來與其他人分享。但真正激勵我的是親自動手並從頭開始建立一些有用的東西的想法。這不是關於完美，甚至不是讓一切都正確——而是關於建立一些有效的東西，然後找出如何改進它。

旅程：啟動專案

一旦有了這個想法，我就立即開始建立該網站。第一步是設定 React 應用程式。最初的設定很順利——得益於我完成的所有這些教程，我熟悉了 React。然而，當我必須將所有東西連接在一起時，真正的挑戰開始了。

該網站的核心是從 TMDB（最受歡迎的電影資料庫之一）中提取電影資料。我還需要一種串流電影的方法，這就是 vidsrc.dev 的用武之地。它很簡單：我使用 TMDB 獲取電影標題、海報和詳細信息，然後從 vidsrc 中提取實際的串流連結。

但事情是這樣的——React 非常適合建立 UI，但是當涉及到構建具有大量元件和邏輯的應用程式時，它可能會變得有點混亂。我有很多重複的程式碼。電影串流媒體頁面和連續劇串流頁面具有幾乎相同的程式碼，用於顯示媒體、處理錯誤和呈現介面。我一開始並沒有太多考慮可重複使用性，但從長遠來看，它最終讓我痛苦不已。

這不只是重複程式碼的問題，而是缺乏結構的問題。我沒有重複使用組件並創建更模組化的方法，而是複製並貼上了大量邏輯。這導致了一些技術債務，而且說實話，程式碼不太乾淨。但當時，我更專注於讓事情快速運轉，而不是讓一切變得完美。

出了什麼問題：我的程式碼醜陋的真相

程式碼可以工作，但遠非完美。正如我之前提到的，有很多重複的程式碼。我建構電影和連續劇串流組件的方式不可擴展。例如，我硬編碼了太多，現在很難在不觸及大量現有程式碼的情況下添加新功能。

應用程式的電影和連續劇部分本質上是相同的。我沒有創建可重複使用的元件或將邏輯分解為可管理的部分。現在，我計劃重新審視程式碼並重構它。該計劃是透過將其分解為可重複使用的較小的組件來使其更加模組化。我還想將邏輯抽象化為處理常見任務的函數，例如獲取資料或渲染元件，因此我不必重複自己。

這是提高專案可維護性的重要一步。我需要專注於使應用程式可擴展且更簡潔，而不是僅僅將程式碼放在一起以趕上最後期限。我還在考慮使用 Tailwind CSS 之類的東西來改進樣式並使應用程式更快回應。我已經學會如何讓 UI 在小螢幕上運作，但我絕對可以改進設計和使用者流程，使其更加精緻。

下一步：改進和擴展項目

儘管網站已經啟動並運行，但我仍然想用它做很多事情。接下來的步驟對於將其變成不僅實用而且專業的東西至關重要。

首先，我計劃重構程式碼以提高可重用性。我將重寫這些元件，以確保它們可以在網站的不同部分中重用，而無需重複邏輯。這將使添加新功能（例如用戶身份驗證或電影推薦）變得更加容易。

說到使用者驗證，我正在考慮使用 PocketBase 來處理使用者帳戶。這將允許用戶註冊、登入和個性化他們的電影體驗——甚至可以保存他們最喜歡的電影或創建自訂播放清單。這是我希望在最初 48 小時內有時間做的事情之一，但它絕對在路線圖上。

我正在探索的另一個令人興奮的想法是使用 Tauri 建立應用程式的桌面版本。 Tauri 允許我將 React 應用程式打包成適用於 Windows、Mac 和 Linux 的本機桌面應用程式。這將為用戶打開一個全新的可訪問性水平，並使串流媒體體驗更加無縫。

更大的圖景：成長、學習與前進

歸根結底，整個經歷都是關於成長的。建立這個網站教會了我很多東西——不僅僅是 React，還包括解決問題、時間管理和重構的重要性。這個計畫並不完美，但這是一個巨大的學習機會。

事情是這樣的：我還沒說完。還有很多需要改進的地方，我很高興能夠解決這些問題。我現在還沒有所有的答案，但我致力於學習和改進。這就是開發的美妙之處——它不是第一次就把所有事情都做對，而是一次就把所有事情都做對。這是隨著時間的推移迭代和成長。

所以，對於任何想要開始一個專案的人來說——不要害怕弄髒你的手。即使你的程式碼一開始並不完美，你也會一路學到很多。誰知道呢？也許你的下一個 48 小時專案會變得更大更好。

我會做更多的項目，敬請期待更多。

在 https://lensloria.netlify.app/ 找到網站
在 https://github.com/Debronejacobs/React-Based-Web-App-for-Streaming-Movies-and-TV-Shows.git

中尋找程式碼

以上是我在幾個小時內建立了一個電影串流網站 - 這是它的進展情況的詳細內容。更多資訊請關注PHP中文網其他相關文章！