[笔记] Alpha Camp 第四学期 期末回顾之二 – 毕业专案

章节连结

这回的毕业专案,AlphaCamp指定了三个方向(电商、旅游规划和CRM系统),其余的就交给各个团队自己打磨。在这一个月的时间内完成ERD、决定使用者故事的开发的优先级、实际写 Code 和最后布署后的一连串模拟使用者的除错过程。我自己的体悟是:以完成最小可行性产品的前提下,在众多功能必须要做精准的取舍。同时,还得调配团队的时间、资源以及协调大家的意见。在这将近一个月的开发阶段,写 Code 的时数大约三分之一而已,剩下的都是厘清自己的团队究竟想要解决使用者的哪些痛点。那种站在极端使用者的角度来把玩自己所属团队的作品,是种略微严苛但是比需要有的挑战。
alpha camp logo


专案内容简介

电子商务网站自西元2000年算起,不到二十年的光阴,已经成为众多产业电子化的标配。不过现今台湾还是有不少的巷弄美食缺乏一个简易操作的官网,让客人可以浏览餐点、线上点餐、完成付款、得知分店资讯……等。因此,我们团队三人决定打造一个易于在手机、电脑上操作的网络应用程式。对使用者而言,可以透过它轻松下单付款、选择喜欢的运送方式或是亲自取货。图像化的后台,店家能减少请工程师协助后台操作的机会。
project acs4 result

众人灵感来源

1. 众多台湾手摇饮品牌官网 – 纯展示、没有价格、无法线上订购
2. 大型连锁速食店 – 如:KFC、McDonalds
3. 订便当系统:https://www.dinbendon.net/do/login

专案亮点

1. 保留库存数量的字段。换言之,若今天这个应用程式要应用到其他的产业别,转换上并不困难。
2. 后台输入所有的店家地址后,可以在联络资讯页面里的一张地图中,看到所有的分店标记。
3. 桌机、手机都可一体适用,减少维护复杂度。

串接上的 API

Facebook 分享按钮、Imgur、GoogleMap、第三方金流(蓝新金流)

ERD

以 User, Product, Order 三块为主线,然后陆续将每个相关联的 Model 串在一起。
erd example


专案分工

我们团队依照使用者的操作阶段来分段进行专案施工。
骆骆:主要负责消费者的挑选商品阶段,也就是首页(搜寻、筛选)、单一产品页面、个人资料页面、注册登入。
Zoey:主要负责消费者的订购付款阶段,也就是购物车、运送地址输入、订单确认、串接第三方金流。
Andy:主要负责店家(管理员)的后台管理相关页面、前台的联络资讯页面。另外使用 台湾县市二联式选单 tw-city-selector.js 和 [笔记] 纯 CSS 制作图片轮拨效 作为表单优化和首页广告轮播效果。

未来加强

有一些功能受限于时间和精神力,来不及附上。希望能在之后的版本做补强:
1.会员集点卡
2.企业会员,可以输入统编
3.自取选项,可以选择取货的分店
4.店家自订运费规则

最后成品

网站版:https://damp-cliffs-89201.herokuapp.com/
Github:https://github.com/F-Kibatodos/final-project


后记

专案花费最多的时间,反倒是动手写 Code 的前二星期马不停蹄的沟通,确认 Model, ERD, 要有多少页面和路由。每两到三天就线上开一次会,可以感受到明显的时间压力。在实作过程中,难免会遇到 Code 冲突或是沟通上的缺乏默契,让整个专案实作上,会有一些时间在处理人的问题。身为在这次专案中为担任窗口沟通的角色,发现要让大家能准时在进度上完成任务,纵使我们是个三人团队都会有点挑战。人人对于这个专案的设定目标高度不同,也是要花时间去磨合的。

回到专案本身,使用者故事的多寡和取舍往往是很让人折磨的。瞬间可以理解客户端开个金口,对工程师来说可能是要花费数个工作天才能完工并除虫完毕的。受限于时间和自身知识的侷限,这回没有用上前后端分离的模式、以及没有练习写些自动化测试是有点可惜之处。不过在这一个月的时间内,确实让我脑海中有充分的时间理解过往四个学期所学习到的众多前后端技术,也借机读了不少网络上的技术文章。顺带一提,简体中文和英文资料都有不少宝可以挖来学,吸收后再写成繁体中文版的心得。换言之,不愁没题材可写技术文章,只愁没时间好好写。

最后,很开心自己与团队成员们一起完成了一个小作品。虽然日后来看想必会觉得怎么会如此的简单阳春,但这就是一个自我成长的轨迹。


Alpha Camp 相关文章

★全文分享★  [笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
[笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
运用 express 的框架来架设后端的 Node.js 服务器时,当遇上前端传来的表单资料为 multipart/form-data 格式时,那么 body-parser 套件是不支援的。这时可以运用 multer 套件来解决这个问题。使用范例1.首先先
★全文分享★  [笔记] 解决 Vue 专案的 localhost:8080/sockjs-node 的无效请求
[笔记] 解决 Vue 专案的 localhost:8080/sockjs-node 的无效请求
这篇是解决不时在测试 Vue 专案上时,常会在浏览器的 console 内看见的无效 GET 请求如:http://localhost:8080/sockjs-node/info?t=<一串乱数>,要如何处理。步骤1.若是处在开发阶段看到的话,会因为你所
★全文分享★  [笔记] Vue.js & Node.js 专案初始化笔记
[笔记] Vue.js & Node.js 专案初始化笔记
这篇主要是笔记下如何快速的在本机端生成一个 Vue.js 的专案,并结合 Bootstrap 和 Node.js 二者来产生一个前后端兼备但却彼此分离的网络应用程式。步骤Vue.js 框架下,其网址多半会带有 # 字样。这是
★全文分享★  [笔记] Alpha Camp 第四学期 期末回顾之三 – 专案发表后
[笔记] Alpha Camp 第四学期 期末回顾之三 –  专案发表后
毕业专案简报时,评审的手也没有闲著,从各个角度来测试专案是否能正常运作,进一步的防止有心人士偷改资料造成系统当机。Max、维元、楚玄、Sam…..等评审给予的回馈,在往后的成长道路上,
★全文分享★  [笔记] Alpha Camp 第四学期 期末回顾之一 – 个人成长
[笔记] Alpha Camp 第四学期 期末回顾之一 – 个人成长
AlphaCamp 的第四学期内容算是非常扎实。随着接触的内容变多的情况下,在心态上也得有所转变,不再能一味的希望课程能教导或提供完整的范例给你。课程的内容应被当成是一个个的楔子,跟每个
★全文分享★  [笔记] Node.js 在 Windows 上的开发环境建置
[笔记] Node.js 在 Windows 上的开发环境建置
这篇文章记载下于 Windows 上建置开发 NodeJS 相关应用的环境过程和步骤。操作步骤//1. 安装 cmder,下载位置在右边:https://cmder.net///2. 安装 nvm,到右边的 Github 网站下载:https://github.com/coreybutler/nvm-win
★全文分享★  [笔记] Sequelize NodeJS 专案初始化笔记
[笔记] Sequelize NodeJS 专案初始化笔记
本篇记录下 AlphaCamp 第四学期的重头戏之一,与他人一同打造类 Twitter 专案的过程。同时,这也是记录如何从无到有打造一个专案的过程。一、专案规划提出规格(Spec)清单,内容包含以下:1.使用角
★全文分享★  [笔记] Heroku Sequelize 布署细节
[笔记] Heroku Sequelize 布署细节
本篇记录下如何将 SQL 关联式数据库布署到 Heroku 上的步骤与心得。操作步骤// 1. Heroku 指定的数据库是用 PostgreSQL,故先用 npm 安装相关套件npm i pg// 2. 调整 config/config.json 的设定 “production”: { “use_env
★全文分享★  [笔记] 运用 Heroku 布署的初始化步骤
[笔记] 运用 Heroku 布署的初始化步骤
这篇文章记录下如何将本机端的专案推拨到 Heroku 上的步骤。整体操作难度不高,但是要尽量让 git 和 heroku 的档案放在同一层。否则上传时,heroku 会抓不到 package.json 的档案。步骤1. 首先,先上 Hero
★全文分享★  运用 Node.js 建网站的初始化步骤
运用 Node.js 建网站的初始化步骤
AlphaCamp 的课程进入到第三学期后期,趁机整理一下如何运用 Node.js 来建立一个简单网站的步骤(包含前端画面、后端数据库、登入页面、串接API以及除错)。第一部分1.Wireframe画面的设计草稿,每个页
★全文分享★  [指南] AlphaCamp 第二学期与第三学期的差异
[指南] AlphaCamp 第二学期与第三学期的差异
AlphaCamp 课程的第二学期和第三学期,其课程难易度与设计上有着显著不同。趁著这篇写下第一手的体验心得。课程设计差别学期二浏览器的前后隐含了 HTML, CSS 和 JavaScript 的互动。不过,你并不会
★全文分享★  [笔记] Alpha Camp 第三学期 期末回顾 关于自学
[笔记] Alpha Camp 第三学期 期末回顾 关于自学
学写程式的过程旅途上,“自学”在不知不觉中就成为身体中记忆的一部分。毕竟写程式卡关的问题有百百种,有时只是单纯打错字、也有可能是一开始的逻辑设计就出了毛病。这时,运用搜寻“
★全文分享★  [笔记] Handlebars Register Helper 自定义 Helper 用法
[笔记] Handlebars Register Helper 自定义 Helper 用法
Handlebars 的模版,其判断式功能的延展性不佳,类似 {{#if 3>2}} 这类的用法都默认无法使用。RegisterHelper 就是用来解决这个问题。使用方法初始化//initialize handlebars (not express-handlebars)const Handlebars = r
★全文分享★  [笔记] Google Place API 串接 (Google Map 系列服务)
[笔记] Google Place API 串接 (Google Map 系列服务)
Alpha Camp 的第二学期课程,让大家试试水温串接 API。在心血来潮下,想说串接个 Google Map 的 API 来玩玩看。不过要做的准备工作还真不少,以下是试验不少次后所得到的心得。串接前的准备工作1. Goo
★全文分享★  [笔记] Alpha Camp 第三学期
[笔记] Alpha Camp 第三学期
Alpha Camp 是个新兴的线上线下整合的课程平台。第三阶段是为期8周的课程,主要将学习 Web 开发实务框架,使用 JavaScript + Node.js 打造一个兼具前、后端与数据库的网络应用程式。若对第一阶段有兴
★全文分享★  [笔记] Pagination 分页功能 实作 JavaScript
[笔记] Pagination 分页功能 实作 JavaScript
网页设计中常见的分页功能(Pagination)的实作笔记过程。逻辑上,可以拆解成以下两项:1.计算总共页数2.依照使用者点击的页数来决定显示多少项目实作步骤1.HTML部分<!–采用 Bootstrap 4.0 –><nav a
★全文分享★  [访谈记录] 自身兴趣和实作 在工作上找到归属感与成就
[访谈记录] 自身兴趣和实作 在工作上找到归属感与成就
AlphaCamp 第二学期的第三份访谈,幸运的请到一位自高中时期认识的神人朋友,来聊一下他的程式学习历程。相关访谈1.什么契机下开始接触程式?小学的时候有去资策会上过 RPG 制作大师的课程,使
★全文分享★  [笔记] Git 忽略 .DS_Store 等排除档案
[笔记] Git 忽略 .DS_Store 等排除档案
初学 Git 常会遇上的一个问题就是,Git 会自动追踪一些系统记录档案(如MAC上的 .DS_Store),所以一份排除清单就是必要的一份工作。排除方法1.在 git 专案下,新增 .gitignore 档案请利用终端机(Terminal)新
★全文分享★  [笔记] Git 更新分支、解除冲突方法一览
[笔记] Git 更新分支、解除冲突方法一览
从本机端同步到 GitHub 上头的专案,于每次上传 commit 时都会比对两边的资料。若有出现不一致的情形,就会挑出错误讯息。错误情境1.远端资料较新由于 Github 网站本身有提供修改的地方(可以线上
★全文分享★  [笔记] API 串接, Axios 和绑定DOM事件
[笔记] API 串接, Axios 和绑定DOM事件
在 Alpha Camp 的第二学期课程中,有提到写个网页来向远端服务器请求资料,故整理一下自己脑海中所学到的技巧与观念。重点提示运用 “Axios” 工具以 “GET” 方式请求资料<script src=”https://unpkg.com/axios/
★全文分享★  [笔记] textContent, event.target 和 innerHTML
[笔记] textContent, event.target 和 innerHTML
笔记一下在学习撰写 JavaScript DOM时,常会遇上的三大功能 innerHTML, textContent 与 event.target 的用法。重点整理innerHTML常搭配 HTML 的 Element Object 来执行,将一段 HTML Code 写入特定区块。// 以下例子取自 w3
★全文分享★  [笔记] Alpha Camp 第二学期 期末回顾
[笔记] Alpha Camp 第二学期 期末回顾
Alpha Camp 的第二学期课程,一晃眼间就两个月过去了。从现在回首来看,发现自己也默默的熟悉了一些网页互动的技巧,写程式也开始不让人那样心生恐惧。将情境转换成电脑可以理解的小步骤,并
★全文分享★  [访谈记录] 观察、效能和成就感
[访谈记录] 观察、效能和成就感
第二场访谈请到大学时期认识的 Mr Miao,现职于电子五哥之一的广达的旗下转投资公司担任后端工程师。借着这次的对话,让我得以一窥与内存、储存空间和效能奋战的工作日常。相关访谈1.工作
★全文分享★  [笔记] BootStrap Card + Grid System + Modal 弹出视窗
[笔记] BootStrap Card + Grid System + Modal 弹出视窗
运用 BootStrap 4.0 版本起有的 Card 样式,再加上 Grid System 排版。最困难的大概是“如何命名变量”和“从茫茫的API技术文件”中找到需要的资料。重点摘要Cards + Grid System 排版混用官方文件:1. https://
★全文分享★  [访谈记录] 反思 试着对未来的职涯跨出一步
[访谈记录] 反思 试着对未来的职涯跨出一步
访谈后的反思,是个让理想化为现实的具体步骤之一。在一边进修自己的技能之余,试着描绘未来工作的样貌可以让自己更加清楚是为何坚持在现在的航道上。相关访谈短期职涯目标截至目前,个
★全文分享★  [访谈记录] 坚持加上兴趣 在程式的世界中遨游
[访谈记录] 坚持加上兴趣 在程式的世界中遨游
YH 目前任职于某日商台湾分社旗下担任软件工程师,是我于高中时期于社团所结识的学长。幸亏有了 AlphaCamp 的职涯社群提出的大哉问,鼓励大家去访问目前已在相关产业工作耕耘的人们,而让我们
★全文分享★  [笔记] Alpha Camp 第二学期 启程
[笔记] Alpha Camp 第二学期 启程
Alpha Camp 是个新兴的线上线下整合的课程平台。第二阶段是为期8周的课程,主要带大家实作网页开发前后端的所需技术:HTML、CSS 和 JavaScript。若对第一阶段有兴趣的,可以点这里。课程目的打稳前
★全文分享★  [笔记] Alpha Camp 第一学期 暖身
[笔记] Alpha Camp 第一学期 暖身
Alpha Camp 是个新兴的线上线下整合的课程平台。和其他的网络平台课程如 Udemy, Hahow 相比,在这个 Camp 学习程式设计的最大差别在于:真人助教的一对一客制化回应,学生也可以观看其他同学的作品


按赞加入粉丝团

延伸阅读