Skip to content

Latest commit

 

History

History
187 lines (148 loc) · 10 KB

README.md

File metadata and controls

187 lines (148 loc) · 10 KB

Artilize

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

組員

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

展示

1. 傅詩婷

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

      入口網頁
      網站入口製作

      首頁
      首頁切版

      影片
      影片

2. 余忠憲

  • 會員管理系統：功能製作
  • 展覽活動地圖搜尋：介面設計、切版及功能製作
  • 天氣預報

    會員登入
    使用第三方會員進行登入(facebook、google)、使用reCAPTCHA進行我不是機器人驗證

    忘記密碼
    使用Nodemailer進行email寄送

    地圖
    使用google map api搜尋客製地圖marker

    weather
    使用open weather api預報今日天氣

    影片
    影片

3. 吳佩珊

  • 討論區系統：介面設計、切版及功能製作

    討論區
    介面設計、切版及功能製作

    chat
    使用Socket.io實現即時聊天系統

    mailchimp
    使用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 #4153BB
#F4B942 #F4B942
#6E7491 #6E7491
#7C8DB0 #7C8DB0
#CBD4E6 #CBD4E6
#F1F1F1#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

資料來源

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