Artilize

資展國際高雄前端工程師養成班125期 期末專題

組員

• 許智筌 (組長) B2B活動展覽系統
• 梁力中 展覽售票系統
• 余忠憲 會員管理系統、展覽地圖搜尋、天氣預報及整合
• 楊絢智 商品販售系統
• 吳佩珊 討論區系統
• 傅詩婷 UI/UX 主視覺設計

展示

1. 傅詩婷

• UI/UX主視覺設計
  • 網站Sitemap製作
  • Style Guide訂定
  • 會員管理系統：介面設計及切版
    
    
    網站入口製作
    
    
    首頁切版
    
    
    影片

2. 余忠憲

• 會員管理系統：功能製作
• 展覽活動地圖搜尋：介面設計、切版及功能製作
• 天氣預報
  
  
  使用第三方會員進行登入(facebook、google)、使用reCAPTCHA進行我不是機器人驗證
  
  
  使用Nodemailer進行email寄送
  
  
  使用google map api搜尋客製地圖marker
  
  
  使用open weather api預報今日天氣
  
  
  影片

3. 吳佩珊

• 討論區系統：介面設計、切版及功能製作
  
  
  介面設計、切版及功能製作
  
  
  使用Socket.io實現即時聊天系統
  
  
  使用mailchimp訂閱電子報
  
  
  影片

4. 許智筌

• B2B活動展覽系統：介面設計、切版及功能製作
  
  
  新增活動展覽、上傳多張圖片及表單驗證
  
  
  編輯、瀏覽及刪除展覽
  
  
  影片

5. 楊絢智

• 商品販售系統：介面設計、切版及功能製作
  
  
  商品檢視介面
  
  
  手風琴選單選擇商品類別
  
  
  商品詳細介紹使用Swiper瀏覽多張圖片
  
  
  影片

6. 梁力中

• 展覽售票系統：介面設計、切版及功能製作
  
  
  展覽檢視介面
  
  
  自行設計選單、日曆等元件
  
  
  展覽詳細介面
  
  
  自行設計購物車等元件
  
  
  優惠券
  
  
  訂單紀錄
  
  
  影片

動機與目的

在這瞬息萬變的時代，美感與跨領域能力是當今非常重要的軟實力。這個世界並不缺少美，而是缺少發現美的眼睛。網站的名稱Artilize藝化，便是希望藝術就像液體般在不知不覺中自然的融入每個人的生活。

根據前期研究與資料分析，發現現有藝文活動網站的功能較為單一，大多是美術館的官方網站，或是僅提供活動展覽的售票平台，並無結合商品販售、社群交流與B2B館方自行上架等多元項目的綜合型服務平台。

本網站以簡潔的介面與活潑的配色作為視覺設計，目標客群為對藝術有濃厚興趣以及想輕鬆瞭解美感生活的人。

主要功能提供美術館展覽活動資訊、售票以及商品販售，並具社群功能，使用者可於討論區進行心得分享與線上即時聊天互動。同時結合美術館館方於本平台上架的功能，在使用者與廠商間搭起良好的橋樑，致力提供最優質的使用者體驗。

特色

• 簡潔清爽的視覺介面
• 活潑多元的排版風格
• 清楚明瞭的網頁動線與操作流程
• 最佳的使用者體驗
• 藝文展覽活動綜合型服務平台

功能

• 入口首頁：主視覺呈現、展覽活動排行榜、熱銷商品、合作單位介紹、天氣預報簡潔清爽的視覺介面
• 會員中心：登入註冊、個人頁面管理
• 展覽售票：地圖搜尋、展覽活動列表、展覽介紹、售票購物車
• 商品販售：商品列表、商品介紹、商品收藏
• 社群交流：討論區、即時聊天室、訂閱電子報
• B2B上架：展館新增活動展覽、展覽活動列表

技術應用

• 前端開發：HTML5、CSS、Javascript、Bootstrap、jQuery、SASS、React.js
• 設計工具：Figma、Photoshop、Illustrator
• 後端技術：Node.js、Express
• 資料庫：MySQL
• 版本控制：Git、Github
• 其他：npm、Nodemailer、reCAPTCHA、google map api、open weather api、Swiper、socket.io、mailchimp

使用顏色

Hex
#4153BB
#F4B942
#6E7491
#7C8DB0
#CBD4E6
#F1F1F1

如何使用

  1. git clone https://github.com/JosephYu0326/artilize.git
  2. 使用兩個終端開啟Frontend及Backend
    
    //Frontend
    1. npm install or yarn install
    2. 新增.env 在根目錄
    REACT_APP_GOOGLE_MAPS_API_KEY=
    REACT_APP_GOOGLE_MAPS_API_KEY1=
    REACT_APP_API_URL="http://localhost:5000"
    REACT_APP_GOOGLE_RECAPTCHA_KEY=
    REACT_APP_GOOGLE_LOGIN_KEY=
    REACT_APP_FACEBOOK_LOGIN_KEY=
    REACT_APP_WEATHER_API_KEY=
    3.npm start or yarn start 開啟專案

    //Backend
    1. npm install or yarn install
    2. 新增.env在根目錄
    port=5000
    MYSQL_HOST= localhost
    MYSQL_USER= root
    MYSQL_PASSWORD = Passw0rd
    MySQL_DB = artilize
    EMAIL=
    EMAILPASSWORD=
    URL=http://localhost:3000
    MAILCHIMP_API=
    MAILCHIMP_AUTH=
    3.匯入artilize.sql
    4.nodemon or npm start or yarn start 啟動server

資料來源

• 非池中
  
• 故宮博物院
  

此專案僅供資展國際期末專題使用，不會用於商業用途