一个全栈增长工程师的练习项目集

你是不是在为提高编程技术而发愁？

你是不是在为找不到合适的练手项目而烦恼？

你是不是在为有合适的项目，但是没有指南而烦恼？

所以，我整理了一些项目，变成了一本电子书，项目名为：

中文名为：

上面有各式各样的项目：

首当其冲（这个项目名为big-data，所以排第一）的就是分析一个2G的Nginx日志，生成用户访问地点图。

技术栈：Hadoop、Jython、AmMap、ElasticSearch

还有一个简单的微信编辑器：

技术栈：Ractive、jQuery、CKEditor

全平台应用Growth：

技术栈：Electron、Ionic、Angular.js

一个自动生成的技能树：

还有一个直接写文章发布到GitHub的本地编辑器：

除此，我们还有：

O2O应用：

项目首页：https://github.com/phodal/ideabook

目录

• 分析网站日志，打造访问地图

• Step 1: 搭建基础设施

• Step 2: 解析access.log

• Step 3: 转换IP为GEO信息

• Step 4: 展示数据到地图上

• 练习建议

• 背景

• ShowCase

• Hadoop + Pig + Jython + AmMap + ElasticSearch

• 概况

• 步骤

• 书籍录入程序

• Step 1: ZXing扫描与Douban API

• Step 2: 存储数据库

• 练习建议

• 背景

• ShowCase

• Ionic + Zxing

• 概况

• 步骤

• 制作专属Badge制作

• Step 1: 基本图形

• Step 2: 高级Badge

• 背景

• ShowCase

• SVG与SVGWrite

• 概况

• 步骤

• Web文本编辑器

• Step 1: hello,world

• Step 2: Require.js模块化

• Step 3: 初始化

• Step 4: 创建对应的View

• 练习建议

• 背景

• ShowCase

• CKEditor + Ractive

• 概况

• 步骤

• JavaScript打造Slide应用

• Step 1: 基本的Slide功能

• Step 2: 解析Markdown

• Step 3: 事件处理

• Step 4: 解析字幕

• Step 5: 进度条

• Step 6: 同步

• 练习建议

• 背景

• Showcase

• 需求

• 概况

• 步骤

• 编辑-发布-分离应用

• Step 1: 构建工具

• Step 2: 静态页面生成

• 背景: 编辑-发布-开发分离

• 用户场景

• 概况

• 步骤

• Google Map与Solr实现多边形搜索

• Step 1: Solr Flask

• Step 2: Google map Polygon

• 背景

• Showcase

• Solr

• 概况

• 步骤

• 一份代码打造跨平台应用

• Step 1: 从Web到混合应用，再到桌面应用

• Step 2: 响应式设计

• Step 3: 平台特定代码

• 未来

• 背景

• ShowCase

• Ionic & Electron & Cordova

• 概况

• 步骤

• Ionic ElasticSearch打造O2O应用

• Step 1: Django GIS 设置

• Step 2: 配置Haystack

• Step 3: Django Haystack Model创建

• Step 4: 创建search_index

• Step 4: Ionic ElasticSearch 创建页面

• Step 5: Ionic ElasticSearch Service

• Step 6: Ionic OpenLayer 地图显示

• 背景

• Showcase

• 构架设计

• 概况

• 步骤

• 一步步搭建JavaScript框架: Lettuce

• Step 1: 注册npm和bower包

• Step 2: 生成Javascript项目框架

• Step 3: 寻找所需要的函数

• Step 4: 整合

• Step 5: 测试

• 练习建议

• 背景

• 概况

• 步骤

• 基于Virtual DOM的测试代码生成

• Step 1: Virtual-dom与HyperScript

• Step 2: 标记DOM变化

• 背景

• ShowCase

• 基本原理

• 概况

• 步骤

• 单页面移动应用

• Step 1: 使用Require.js管理依赖

• Step 2: 添加路由

• Step 3: 创建主页View

• Step 4: jQuery Sidr

• Step 5: Django Tastypie示例

• Step 6: RequireJS Plugins

• Step 6: 简单的博客

• Step 7: 重构

• Step 8: 移动CMS滑动

• 背景

• Showcase

• jQuery + Backbone + UnderScore + Require.JS

• 概况

• 步骤

• Oculus + Node.js + Three.js 打造VR世界

• Step 1: Node Oculus Services

• Step 2: Node.js Oculus Hello，World

• Step 3: Node Oculus WebSocket

• Step 4: Oculus Effect + DK2 Control

• Step 5: Three.js KeyHandler

• 练习建议

• 背景

• Showcase

• 框架： Oculus Rift & Node NMD

• 概况

• 步骤

• 制作照片地图

• Step 1: 解析读取照片信息

• Step 2: 上传数据

• 练习建议

• Background:把照片放在地图上

• Showcase

• 框架： EXIF & ExifRead & CartoDB

• 概况

• 步骤

• D3.js 制作技能树

• Step 1: 打造简单的技能树

• Step 3: D3.js Tooltipster

• 背景

• Showcase

• Graphviz

• 概况

• 步骤

• 技术雷达趋势

• Step 1: Schema与原始代码

• Step 2: 处理数据

• 背景

• Showcase

• D3.js

• 概况

• 步骤

• 文本转化为Logo

• Step 1: Python 文字转Logo实战

• 背景

• ShowCase

• 需求说明

• 概况

• 步骤

• GEOJSON与ElasticSearch实现高级图形搜索

• Step 1: 离线地图与搜索

• Step 2: 从地点到地图上显示

• Step 3: 从地图到地点上显示

• 背景

• Showcase

• jQuery + Mustache + Leaflet

• 概况

• 步骤

来源：微信公众平台 phodal