iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

30天製作專題紀錄-虛擬女友 系列

我目前是大學四年級,面對即將要到來的大學專題競賽,我將利用這次機會來記錄這30天的製作過程。
將以聊天機器人的概念,利用網頁來呈現虛擬女友。

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21 30天製作專題紀錄-美化UI

那我們最重要的聊天室部分完成了最後頁面部分就剩下最底部的輸入區~那麼首先一樣先將需要的物件一一列出,首先是輸入訊息的方格,再來還有輸入訊息的按鍵。 <di...

DAY 22

Day22 30天製作專題紀錄-美化UI

那今天就要將CSS的部分給他完成,首先先對輸入區的框架做排版,而大小外觀部分就跟標題區一樣,框架部分我們就快速帶過~ .chat_input {...

DAY 23

Day23 30天製作專題紀錄-UI功能

今天就要開始往功能的部分前進~首先先來製作聊天室最重要的功能,就是將輸入的訊息呈現在聊天室,那功能要寫在哪呢~既然是輸入訊息的部分,一定是寫在我們之前製作的輸入...

DAY 24

Day24 30天製作專題紀錄-UI功能

在開始寫JavaScript之前,想跟各位介紹一下JavaScript是什麼,以及為什麼要用它。那對於剛接觸HTML的人來說一開始都不懂HTML CSS JS之...

DAY 25

Day25 30天製作專題紀錄-UI功能

今天就要來實現輸入訊息的功能,那我會直接貼程式碼再來一一介紹。 let message = []; // 送出訊息的function functio...

DAY 26

Day26 30天製作專題紀錄-UI功能

那我們今天就繼續完成呈現輸入訊息的部分,昨天的部分跟今天的內容是連在一起的,所以各位要把他們連在一起看喔~ message += '<div cl...

DAY 27

Day27 30天製作專題紀錄-UI功能

我們今天就來將最後的部分講解完吧~ el.scrollTop = el.scrollHeight; // 輸入成功後清除輸入欄內容 if...

DAY 28

Day28 30天製作專題紀錄-研究動機

我們實作部分在昨天已經暫時完成一個重要的部分,雖然後面還有很多要增加的功能,但目前的話想先完成書面的部分,順便湊字數這樣~一舉兩得而我們原本是預定要往虛擬女友的...

DAY 29

Day29 30天製作專題紀錄-研究方法

今天就是寫聊天室的介紹以及研究方法 介紹聊天機器人前端部分,需要有使用者與聊天機器人的對話平台,基本具備功能則需要使用者能夠輸入對話且聊天機器人能針對使用者...

DAY 30

Day30 30天製作專題紀錄-完賽感言

在完賽感言前把昨天研究方法沒打完的部分補充一下 研究方法基本框架寫好後,就可以開始增加功能的部分,因為分成三個部分所以由上至下來逐一增加需要的物件,標題區需...