@ 韩亦乐 | Hylerrix

一、入场仪式

@ 韩亦乐 | Hylerrix

简短的自我介绍

freeCodeCamp 粉丝

gitchat 粉丝

github 粉丝

前端攻城狮

ppt 攻城狮

互联网学(从业)者

产品、运营、视觉、前端、后端

@ 韩亦乐 | Hylerrix

快速的现场调查

大学生——对开源的理解

上班族——所在团队分工

一个前端问题 -> 写过响应式的

一个后端问题 -> 会搭建后端环境的

@ 韩亦乐 | Hylerrix

分享关键字

前端

后端

Web 应用

产品

设计

原型图

Git

Webpack

JavaScript

挖坑。。填坑！

@ 韩亦乐 | Hylerrix

二、落实灵感

@ 韩亦乐 | Hylerrix

构思开源产品

@ 韩亦乐 | Hylerrix

解决的痛点

需求？痛点？功能？

先有需求还是先有痛点？

先有鸡还是先有蛋？

@ 韩亦乐 | Hylerrix

一种答案

一种答案

心理学角度

先有需求，才凸显出痛点

我想吃东西，但没东西吃

产品角度

先有痛点，才会产生需求

我想吃东西，但没东西吃

@ 韩亦乐 | Hylerrix

facebook

让女生能够展示自己的照片、生活、个人心情。男生可以勾搭。

twitter

多维度的信息传播

twitch

视频直播网站

imdb

去中心化影评，预告片发布

Netflix

影视剧资源库

@ 韩亦乐 | Hylerrix

设计原则之一：移动端优先

2011年，Luke Wroblewski -> 移动优先的设计理念

1. 按钮、文字显示留白
2. 便捷的滚动式导航
3. 拇指化设计
4. 大菜单按钮
5. 卡片式设计
6. 合理优化屏幕使用空间
7. 有效的动画效果
8. 干净清爽的 UI 界面

@ 韩亦乐 | Hylerrix

做减法，挑出伪需求

想要更快的马

车

马？

速度？

kano模型

    基础型、期望型、兴奋型

重要紧急度分析

    重要紧急、紧急不重要、重要不紧急、不紧急不重要

莫斯科规则

    必须有、应该有、可以用、这次不会有

风险价值分析

    高风险高价值、低风险高价值、低风险低价值、高风险低价值

确定需求优先级

@ 韩亦乐 | Hylerrix

设计开源产品

@ 韩亦乐 | Hylerrix

逛逛模板网站

1. SDC 设计师网址导航
2. 模板之家
3. 站酷
4. ...

@ 韩亦乐 | Hylerrix

设计原型图

—— 业余玩产品的参考软件库

@ 韩亦乐 | Hylerrix

@ 韩亦乐 | Hylerrix

“西邮前端圈”的“落实灵感”阶段小感

@ 韩亦乐 | Hylerrix

三、开源准备

@ 韩亦乐 | Hylerrix

开源协议的选择

@ 韩亦乐 | Hylerrix

@ 韩亦乐 | Hylerrix

开源平台的选择

@ 韩亦乐 | Hylerrix

coding

github

gitlab

gitee

SVN

@ 韩亦乐 | Hylerrix

四、项目开发 - 上

@ 韩亦乐 | Hylerrix

软工实践

@ 韩亦乐 | Hylerrix

Git 版本控制 - 团队版

1. Git Flow 分支协作

2. Git Commit 规范

3. Git Emoji 趣解

4. Git hook 自动化

@ 韩亦乐 | Hylerrix

1. Git Flow 分支协作

1. Git Flow
2. Github Flow
3. Gitlab Flow

功能式驱动开发

需求是开发的起点，先有需求再有功能分支或者补丁分支。完成开发后，该分支就合并到主分支，然后被删除。

两个长期分支

三个短期分支

@ 韩亦乐 | Hylerrix

2. Git Commit 规范

Angular 规范

Change Log

Commit Message

 commitizen

撰写合格 Commit message 的工具

cnpm i -g commitizen

@ 韩亦乐 | Hylerrix

Commit Message 的格式 - Header

git commit -m "add"

2. Git Commit 规范

Header：type(必)、scope(选)和subject(必需)

 type

1. feat：新功能（feature）
2. fix：修补bug
3. docs：文档（documentation）
4. style： 格式（不影响代码运行的变动）
5. refactor：重构（即不是新增功能，也不是修改bug的代码变动）
6. test：增加测试
7. chore：构建过程或辅助工具的变动

scope

用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。

subject

是 commit 目的的简短描述，不超过50个字符。

@ 韩亦乐 | Hylerrix

Commit Message 的格式 - Body

2. Git Commit 规范

Commit Message 的格式 - Footer

• 不兼容变动
• 关闭 Issue

Body 部分是对本次 commit 的详细描述，可以分成多行。

（1）使用第一人称现在时，比如使用change而不是changed或changes。
（2）应该说明代码变动的动机，以及与以前行为的对比。

@ 韩亦乐 | Hylerrix

3. Git Emoji 趣解

http://gitmoji.carloscuesta.me

http://getemoji.com/

@ 韩亦乐 | Hylerrix

4. Git Hook 自动化

> $ ls .git/hooks/
applypatch-msg.sample
commit-msg.sample
post-update.sample
pre-applypatch.sample
pre-commit.sample
pre-push.sample
pre-rebase.sample
pre-receive.sample
prepare-commit-msg.sample
update.sample

客户端钩子

提交工作流钩子

电子邮件工作流钩子

其它钩子

服务器端钩子

pre-commit

prepare-commit-msg

commit-message

post-commit

applypatch-msg

post-applypatch

post-applypatch

pre-rebase

post-rewrite

pre-push

pre-receive
update
post-receive

钩子脚本类型

这个坑，慢慢填...

@ 韩亦乐 | Hylerrix

四、项目开发 - 中

@ 韩亦乐 | Hylerrix

这是用什么做的？

https://github.com/creatshare-demos/creatshare-app-init

@ 韩亦乐 | Hylerrix

造轮子之 npm i -g creatshare-app-init 源码浅析

creatshare-app-init!

Step One

npm install -g creatshare-app-init
# or
npm install -g cnpm
cnpm install -g creatshare-app-init
# or
npm install -g yarn
yarn add global creatshare-app-init

Step Two

@ 韩亦乐 | Hylerrix

➜  Practice cs create my_app

项目目录开始创建

.
├── .babelrc             # 转码配置文件
├── .eslint.js           # 实验室代码规范
├── .gitignore           # 版本控制忽略文件配置
├── LICENSE              # 开源协议
├── README.md            # 项目介绍
├── index.js             # 项目入口
├── package.json         # 项目配置
├── src                  # 开发目录
│   ├── favicon.ico      # 网页小图标
│   ├── images           # 图片资源目录
│   ├── index.html       # 网页入口
│   ├── app.js           # 开发入口
│   ├── manifest.json    # 网络应用清单
│   ├── script           # 脚本代码目录
│   └── style            # 样式资源目录
├── webpack.config.js    # 打包配置
└── yarn.lock            # 项目配置@Yarn

5 directories, 10 files

项目目录创建完毕

注意事项：
1. 接下来请使用 npm install、 yarn add 或 cnpm install 命令安装依赖
2. 遇到使用问题可以发送邮件至 icorvoh@gmail.com
➜  Practice tree my_app -L 2
my_app
├── LICENSE
├── README.md
├── index.js
├── package.json
├── src
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── manifest.json
│   ├── script
│   └── style
├── webpack.config.js
└── yarn.lock

4 directories, 9 files

可视化解析

@ 韩亦乐 | Hylerrix

四、项目开发 - 下

@ 韩亦乐 | Hylerrix

前端开发

1. 脚手架的使用

2. JavaScript 编码规范

点到为止

beta

@ 韩亦乐 | Hylerrix

1. 脚手架的使用

造了一个轮子？

creat-react-app

vue-cli

creatshare-app-init

cnpm i -g creatshare-app-init
cs --help
cs create my-app
cd my-app
cnpm i
npm start

当场，试试看

@ 韩亦乐 | Hylerrix

2. JavaScript 编码规范

ESLint

eslint-config-google

eslint-config-airbnb

eslint-config-standard

三种预安装包

    无论 css 还是 js 都得高内聚，低耦合，模块化开发，文件命名及变量全小写且采用小驼峰法命名，否则不接受合并请求喔。且 JavaScript 模块优先采用 import/export 语法解析赋值式开发，并通过 babel 预编译；JavaScript 代码优先采用 ES6 支持的语法糖进行代码重构。

一个实例

缩进统一

空格的使用恰到好处

尽可能发挥 JS 面向对象的特性

……

@ 韩亦乐 | Hylerrix

1. ExpressJS 框架初步

2. Nginx 反向代理

点到为止

服务端开发

beta

@ 韩亦乐 | Hylerrix

Express -> 基本路由搭建

const express = require('express')
const path = require('path')
const app = express()
const views = require('./routes/views/view.js')

app.use(express.static(path.join(__dirname, '../build')))
app.use('/', views)

app.listen(3000, function () {
    console.log('hello, xupt!')
})

const express = require('express')
const router = express.Router()
const path = require('path')

router.get('/', function (req, res, next) {
    res.sendFile(path.join(__dirname, '../../../build/html', 'index.html'))
})

module.exports = router

@ 韩亦乐 | Hylerrix

PM2 -> Node.JS 进程管理

cnpm i -g pm2

@ 韩亦乐 | Hylerrix

Nginx 反向代理

include /etc/nginx/conf.d/*.conf;
upstream nodejs {
    server 127.0.0.1:3000;
    #server 127.0.0.1:3000;
    keepalive 64;
}
server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  xupt-fe.top;

    # Load configuration files for the default server block.
    # include /etc/nginx/default.d/*.conf;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host  $http_host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_set_header Connection "";
        proxy_pass      http://nodejs;
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

@ 韩亦乐 | Hylerrix

systemctl start nginx.service

systemctl stop nginx.service

环境搭建？

加载原理？

下去学学！

进程管理

@ 韩亦乐 | Hylerrix

五、上线准备

@ 韩亦乐 | Hylerrix

购买云主机

@ 韩亦乐 | Hylerrix

申请域名

http://couple-us.cn

http://xupt-e.top

域名备案

陕西省 -> 5 ~ 15 天

@ 韩亦乐 | Hylerrix

服务端部署

Last login: Sun Dec 10 03:34:08 on ttys001

hanyile@hanyiledeMacBook-Air ~
> $ ssh root@118.89.238.42
root@118.89.238.42's password:
Last failed login: Sun Dec 10 03:39:55 CST 2017 from 125.75.207.25 on ssh:notty
There were 6 failed login attempts since the last successful login.
Last login: Sun Dec 10 03:34:20 2017 from 117.32.216.57

# root @ VM_4_229_centos in ~ [4:21:04]
$

SSH Way

SCP Way

hanyile@hanyiledeMacBook-Air ~
> $ scp -r ../CET-H5 ubuntu@123.206.18.177:/var/www/html/
ubuntu@123.206.18.177's password:

@ 韩亦乐 | Hylerrix

服务端部署

GUI Way

@ 韩亦乐 | Hylerrix

站点流量统计

detector.js

<!-- 谷歌数据分析 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110785658-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-110785658-1');
</script>
<!-- 百度数据分析 -->
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?aae144f5d679589ff41c14860dc871c1";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script> 

@ 韩亦乐 | Hylerrix

六、回顾主题

@ 韩亦乐 | Hylerrix