從零開始建立一個字典網站:開始前構思

--

前篇:從零開始建立一個字典網站:大綱

畫面構思

架構簡圖

構思產品原因

頁面資訊

一個頁面可以顯示所有我所需要的資訊:

  1. 字義
  2. 字源
  3. 其他

最主要目的是要方便我之後的查詢,可以一目了然的擁有我需要的資訊,而目前有 API 的部份是只有萌典 API 可以作為字義的來源。

其他資料因為沒有 API 可供使用,所以目前打算先用外部連結為主,就會需要根據當前查看的字來決定這些外部連結需要連結到哪裡。

Layout

目前 layout 就參照畫面構思那樣,主要就是按照需要的資訊排序下來。

而因為大多時候都是用手機去查詢,所以 RWD 的部份就要注意手機版,而 Layout 大致長得差不多,就只是一些元件的樣式不太一樣(因為比較狹窄)。

內容

字義

由於萌典 API 提供的字義不一定完美契合需求,所以會另外放上其他來源的解釋,也是以提供外部連結為主,而且平常這部份是隱藏起來,要透過點擊才會出現。

這樣當發現這個字義解釋不是很完美的時候,就可以透過這樣的方式更快找到符合所需的字義。

字源

主要這邊沒有看到很好的 API(如果有,請告訴我),所以要顯示資料可能要用到爬蟲的方式,而目前會以先做出一個基本功能的網站為主,所以會先採用已經打好的外部連結的方式來達成。

所以模式會是字源來源網站的名稱,然後點下去就是該網站該字源的網址,會直接開新分頁,連過去。

另外一點是目前也比較少見好的字源來源,所以會鎖定至少三個字源來源的網站,如果有發現更多,就會用隱藏的方式藏起來,當使用者覺得不夠好,就可以另外點開來看到,並且連過去。

其他

其他內容目前規劃的是造句網,也是會使用外部連結的方式,這邊的用意最主要是因為希望使用者可以針對查的字的意思來造句,直到他了解這個字詞的字義為止。

而常常會想不到句子來造句,所以也會額外提供這個部份的內容來供使用者參考。

--

--

Hugh's Programming life

我是前端兼後端工程師,主要在前端開發,包括 React、Node.js 以及相關的框架和技術。之前曾擔任化工工程師的職位,然而對電腦科技一直抱有濃厚的熱情。後來,我參加了轉職課程並開設這個部落格紀錄我的學習過程。於2020年轉職成功後,我一直持續精進技能、擴展技術範疇跟各種對人生有正面意義的學習,以增加我的工作能力。