iT邦幫忙

3

CMoney軟體工程師戰鬥營_期末專題製作_Week 17

  • 分享至 

  • xImage
  •  

是時候來清這裡灰塵了/images/emoticon/emoticon37.gif
這兩週實在是過得水深火熱
接下來我會補齊這兩週事件
17週多半是在刻畫面,後期開始接api
18週就是大量的接api,跟補上還沒做的功能和畫面

老樣子!
我會用前後對照方式呈現(還好製作過程有截圖)

以下是大量產圖的17週:
申明:本週都是開發時方便用的色塊,美術部分都是在後面兩週補上


上一週先做好大廳空間
所以這週著重在個人空間上面

  • 1 房間草圖

首先我也想做跟大廳一樣3D空間感
所以也是拿一個乾淨的3D圖來做底
https://ithelp.ithome.com.tw/upload/images/20210630/201355341zsuVgEQBR.png

背景上色
https://ithelp.ithome.com.tw/upload/images/20210630/201355342QyYOCgVHW.png
遇到的問題:因為他背景同色,我無法直接填滿某區塊顏色,所以就用了網站去圈選我要的區域後再填色
使用的工具網站:https://pixlr.com/tw/e/
ps(我做遊戲也是靠著這網站來解決圖片相關事情)
然後這篇有我使用的配色網:https://coolors.co/

接著我開始擺上我要用的功能-草圖
https://ithelp.ithome.com.tw/upload/images/20210630/20135534UI7ie3kLPT.png
紅色圈圈處就是將來我要做的功能
這邊一一介紹:(按照我實作順序(重要程度))

  • 書櫃:個人看板,類似於部落格,裡面會有查看看板,發文,預覽及留言功能
  • 日記:房主才能使用,可以編輯文字和圖片,月曆可以查看哪些天有紀錄
  • 電腦:聊天室,可以和另外六位室友私訊
  • 照片:可以放三張照片當擺設
  • 衣櫃:更換房間樣式

完成圖
https://ithelp.ithome.com.tw/upload/images/20210630/20135534x3Y02dY5MF.png


  • 2 部落格草圖
    文章預覽草圖:
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534ZFukc4mIQw.png
    原本想坐旋轉木馬,花一早上,失敗了就改掉,改成熟悉的拉霸~
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534oe504UYYIi.png
    以下是後來考慮的,我的後端夥伴說還是之前三個文章呈現就好
    完成圖-文章預覽畫面
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534baThk3foYz.png
    完成圖-文章發文(之後有改版)
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534eRUuFsTOzn.png

  • 3 部落格留言板
    文章瀏覽與留言板草圖:
    (文章附圖版草圖)
    https://ithelp.ithome.com.tw/upload/images/20210630/201355345CPywoKEq3.png
    完成圖
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534GV8WcoCHQW.png
    (文章未附圖版草圖)
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534idQXHfMseY.png
    完成圖
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534EGxLtfMTC6.png
    文章瀏覽以及留言是參考臉書facebook的文章查看

  • 4 日記
    草圖:
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534yf6uLxI6vg.png
    完成圖:
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534QmDAUCOId3.png
    日記中的月曆是使用套件:vue2-datepicker
    參考文件:https://github.com/mengxiong10/vue2-datepicker/blob/master/README.zh-CN.md
    但我這邊在下週(18週)已經改成別的套件
    原因是這套件我研究很久都無法成功設定標記日期顏色
    而這款套件在網路上研究分享的資訊偏少所以最後改成vuejs-datepicker
    參考文件:https://www.npmjs.com/package/vuejs-datepicker
    這樣我就可以順利標記我想要的日期囉~
    之後串接完api有資料的日期會像以下照片中出現淺藍色標記:
    https://ithelp.ithome.com.tw/upload/images/20210630/20135534D4J1xFwNtc.png

  • 5 聊天室
    草圖:
    https://ithelp.ithome.com.tw/upload/images/20210630/2013553495EOhiFuEN.png
    左邊就會出現其他6位室友的頭像和名稱,右邊就會是聊天內容以及傳送訊息框

完成圖:
https://ithelp.ithome.com.tw/upload/images/20210630/20135534nERDx7eKV2.png


以上大致就是我17週做的事情
接著我會在18週紀錄我串接的坎坷之路
加上串接後的畫面也會更加完整~
歡迎大家提出建議給小妹
感謝收看!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
c9103205
iT邦新手 5 級 ‧ 2021-06-30 22:09:10

總共有幾周的課程?

fanny iT邦新手 5 級 ‧ 2021-07-01 01:23:13 檢舉

如果你是在問整個營隊:第一個月是提供影片自學,之後會是五個月的實體課程
分領域-web組:五個月中會有五週上該領域課程
詳細可以查詢cmoney軟體工程師戰鬥營官網

我要留言

立即登入留言