使用Laravel跟Foundation設計Web App (1) 初步設計

最近卡卡在上Harvard Extension School的CSCI E-15跟DGMD E-27。CSCI E-15是使用PHP教後端設計包含Laravel、LAMP (Linux, Apache, MySQL, and PHP)、RESTful、基本的CRUD等。DGMD E-27是前端設計的進階課程教導範圍包含Sass、Compass、Foundation、Flexbox、CSS4 Grid、CSS animation、Gulp、Git等。

 
laravel_logo-02-copy
Laravel是一套富有表達性且具有簡潔語法的PHP網頁應用程式框架。框架(Framework)是一個被設計用來完成特定任務的規範,程式設計師必須遵循這個規範來開發軟體或網站。現在大多數的框架都參考 MVC 架構為概念來設計(出自tony915)。框架有多好呢?用最簡單的說法是開發者可以不用從0開始設計,框架提供許多現有的指令或工具可以使用。想像你要建立一個使用者註冊系統,如果不引用任何框架或API那你必須一步一步從頭開始寫。可是Laravel提供AuthController可以更快速的編寫完成。工程師會想要花時間設計一套美個網站都要有的基本架構還是用一樣的時間來編寫創新的idea?
p.s. 知名的天下雜誌就是使用Laravel設計的。
 
null
Foundation比較不廣為人知。Foundation跟Bootstrap一樣是響應式的HTML,CSS和JavaScript框架。話說教授會選Foundation而非Bootstrap是因為Bootstrap4即將出產而且會有一些重大的改變像是棄LESS重新用Sass寫。Bootstrap最讓人垢病的是使用Bootstrap設計出來的網頁都長的千篇一律,Foundation則可以依照工程師客製化出一套令人為之一亮的網頁。那為什麼Bootstrap比Foundation更加出名?卡卡覺得雖然Bootstrap也可以客製化設計出超酷的網頁,可是因為它的設計與便利性更多人選擇直接使用現有的工具。值得一提的是Foundation是移動優先(Mobile-first)的框架。
 
E-15的期末設計是自由發揮設計出至少兩個數據庫跟可執行CRUD(新增、查詢、修改與刪除的)指令的Web應用程序。在左思右想先是想設計類似格志的線上版,但是經過掙扎後決定先從簡單一點的下手。此Web App靈感來自於卡卡的女友建立一個類似乖寶寶印章收集策的加減分制度Web應用程序名為LuvAccont。
 
設計計畫


最低可行性的產品 (MVP)
LuvAccount的基本概念很簡單,。登入過後可以增加冊子,每個冊子也就是大家熟悉的乖寶寶集點卡可以添加日期、故事、以及分數。

  • 使用者可以註冊以及登入。
  • 使用者可以修剪拖移併上傳個人圖片
  • CRUD(新增、查詢、修改與刪除的)冊子
  • 添加日期、故事、以及分數
  • 下載成csv檔案

 
非必要應用 (Non-Essential Features)

  • 每個冊子可以上傳圖片
  • 上載csv檔案
  • 允許其他使用者編輯冊子
  • 增加更改記錄頁
  • 增加月曆並顯示有故事以及分數的日期,正數顯示綠色,0分顯示黃色,負數顯示紅色
  • 點日期顯示每個冊子所擁有的故事
  • 增加圖表
  • 增加進度條
  • 搜尋功能

 
路徑規劃 (Route Plan)

  • 登入/註冊頁面
  • 主頁
  • 全部冊子頁
  • 個別冊子頁
  • 增加冊子頁
  • 修改冊子頁
  • 修改使用者頁

 
設計一個程序需要明確的做好設計計畫,不然開始做了才發現缺這個功能缺那個功能,更慘的是發現跟原先預定要完成的日期越來越遠。有了明確的設計計畫就可以開始一項一項把它給完成了!

發表迴響