一个全栈增长工程师的练手项目集 === > English version is Ongoing, welcome to join us. **你是不是在为提高编程技术而发愁？** **你是不是在为找不到合适的练手项目而烦恼？** **你是不是在为有合适的项目，但是没有指南而烦恼？** 我的其他电子书： - 《[一步步搭建物联网系统](https://github.com/phodal/designiot)》 - 《[GitHub 漫游指南](https://github.com/phodal/github-roam)》 - 《[RePractise](https://github.com/phodal/repractise)》 - 《[Growth: 全栈增长工程师指南](https://github.com/phodal/growth-ebook)》 - 《[Growth: 全栈增长工程师实战](https://github.com/phodal/growth-in-action)》 欢迎关注我的微信公众号（扫描下面的二维码或搜索 Phodal）. ![QRCode](https://phodal.github.io/growth-materials/wp.jpg) 目录 --- * [分析网站日志，打造访问地图](http://ideabook.phodal.com/#分析网站日志打造访问地图) * [概况](http://ideabook.phodal.com/#概况) * [背景](http://ideabook.phodal.com/#背景) * [ShowCase](http://ideabook.phodal.com/#showcase) * [Hadoop + Pig + Jython + AmMap + ElasticSearch](http://ideabook.phodal.com/#hadoop-pig-jython-ammap-elasticsearch) * [步骤](http://ideabook.phodal.com/#步骤) * [Step 1: 搭建基础设施](http://ideabook.phodal.com/#step-1-搭建基础设施) * [Step 2: 解析access.log](http://ideabook.phodal.com/#step-2-解析access.log) * [Step 3: 转换IP为GEO信息](http://ideabook.phodal.com/#step-3-转换ip为geo信息) * [Step 4: 展示数据到地图上](http://ideabook.phodal.com/#step-4-展示数据到地图上) * [练习建议](http://ideabook.phodal.com/#练习建议) * [书籍录入移动应用：条形码扫描](http://ideabook.phodal.com/#书籍录入移动应用条形码扫描) * [概况](http://ideabook.phodal.com/#概况-1) * [背景](http://ideabook.phodal.com/#背景-1) * [ShowCase](http://ideabook.phodal.com/#showcase-1) * [Ionic + Zxing](http://ideabook.phodal.com/#ionic-zxing) * [步骤](http://ideabook.phodal.com/#步骤-1) * [Step 1: ZXing扫描与Douban API](http://ideabook.phodal.com/#step-1-zxing扫描与douban-api) * [Step 2: 存储数据库](http://ideabook.phodal.com/#step-2-存储数据库) * [练习建议](http://ideabook.phodal.com/#练习建议-1) * [制作专属Badge](http://ideabook.phodal.com/#制作专属badge) * [概况](http://ideabook.phodal.com/#概况-2) * [背景](http://ideabook.phodal.com/#背景-2) * [ShowCase](http://ideabook.phodal.com/#showcase-2) * [SVG与SVGWrite](http://ideabook.phodal.com/#svg与svgwrite) * [步骤](http://ideabook.phodal.com/#步骤-2) * [Step 1: 基本图形](http://ideabook.phodal.com/#step-1-基本图形) * [Step 2: 高级Badge](http://ideabook.phodal.com/#step-2-高级badge) * [微信文章编辑器](http://ideabook.phodal.com/#微信文章编辑器) * [概况](http://ideabook.phodal.com/#概况-3) * [背景](http://ideabook.phodal.com/#背景-3) * [ShowCase](http://ideabook.phodal.com/#showcase-3) * [CKEditor + Ractive](http://ideabook.phodal.com/#ckeditor-ractive) * [步骤](http://ideabook.phodal.com/#步骤-3) * [Step 1: hello,world](http://ideabook.phodal.com/#step-1-helloworld) * [Step 2: Require.js模块化](http://ideabook.phodal.com/#step-2-require.js模块化) * [Step 3: 初始化](http://ideabook.phodal.com/#step-3-初始化) * [Step 4: 创建对应的View](http://ideabook.phodal.com/#step-4-创建对应的view) * [练习建议](http://ideabook.phodal.com/#练习建议-2) * [JavaScript制作Slide框架](http://ideabook.phodal.com/#javascript制作slide框架) * [概况](http://ideabook.phodal.com/#概况-4) * [背景](http://ideabook.phodal.com/#背景-4) * [Showcase](http://ideabook.phodal.com/#showcase-4) * [需求](http://ideabook.phodal.com/#需求) * [步骤](http://ideabook.phodal.com/#步骤-4) * [Step 1: 基本的Slide功能](http://ideabook.phodal.com/#step-1-基本的slide功能) * [Step 2: 解析Markdown](http://ideabook.phodal.com/#step-2-解析markdown) * [Step 3: 事件处理](http://ideabook.phodal.com/#step-3-事件处理) * [Step 4: 解析字幕](http://ideabook.phodal.com/#step-4-解析字幕) * [Step 5: 进度条](http://ideabook.phodal.com/#step-5-进度条) * [Step 6: 同步](http://ideabook.phodal.com/#step-6-同步) * [练习建议](http://ideabook.phodal.com/#练习建议-3) * [编辑-发布-分离的博客系统](http://ideabook.phodal.com/#编辑-发布-分离的博客系统) * [概况](http://ideabook.phodal.com/#概况-5) * [背景: 编辑-发布-开发分离](http://ideabook.phodal.com/#背景-编辑-发布-开发分离) * [用户场景](http://ideabook.phodal.com/#用户场景) * [步骤](http://ideabook.phodal.com/#步骤-5) * [Step 1: 构建工具](http://ideabook.phodal.com/#step-1-构建工具) * [Step 2: 静态页面生成](http://ideabook.phodal.com/#step-2-静态页面生成) * [Solr实现多边形地理搜索](http://ideabook.phodal.com/#solr实现多边形地理搜索) * [概况](http://ideabook.phodal.com/#概况-6) * [背景](http://ideabook.phodal.com/#背景-5) * [Showcase](http://ideabook.phodal.com/#showcase-5) * [Solr](http://ideabook.phodal.com/#solr) * [步骤](http://ideabook.phodal.com/#步骤-6) * [Step 1: Solr Flask](http://ideabook.phodal.com/#step-1-solr-flask) * [Step 2: Google map Polygon](http://ideabook.phodal.com/#step-2-google-map-polygon) * [一份代码打造跨平台应用](http://ideabook.phodal.com/#一份代码打造跨平台应用) * [概况](http://ideabook.phodal.com/#概况-7) * [背景](http://ideabook.phodal.com/#背景-6) * [ShowCase](http://ideabook.phodal.com/#showcase-6) * [Ionic & Electron & Cordova](http://ideabook.phodal.com/#ionic-electron-cordova) * [步骤](http://ideabook.phodal.com/#步骤-7) * [Step 1: 从Web到混合应用，再到桌面应用](http://ideabook.phodal.com/#step-1-从web到混合应用再到桌面应用) * [Step 2: 响应式设计](http://ideabook.phodal.com/#step-2-响应式设计) * [Step 3: 平台特定代码](http://ideabook.phodal.com/#step-3-平台特定代码) * [未来](http://ideabook.phodal.com/#未来) * [Ionic与ElasticSearch打造O2O应用](http://ideabook.phodal.com/#ionic与elasticsearch打造o2o应用) * [概况](http://ideabook.phodal.com/#概况-8) * [背景](http://ideabook.phodal.com/#背景-7) * [Showcase](http://ideabook.phodal.com/#showcase-7) * [构架设计](http://ideabook.phodal.com/#构架设计) * [步骤](http://ideabook.phodal.com/#步骤-8) * [Step 1: Django GIS 设置](http://ideabook.phodal.com/#step-1-django-gis-设置) * [Step 2: 配置Haystack](http://ideabook.phodal.com/#step-2-配置haystack) * [Step 3: Django Haystack Model创建](http://ideabook.phodal.com/#step-3-django-haystack-model创建) * [Step 4: 创建search_index](http://ideabook.phodal.com/#step-4-创建search_index) * [Step 4: Ionic ElasticSearch 创建页面](http://ideabook.phodal.com/#step-4-ionic-elasticsearch-创建页面) * [Step 5: Ionic ElasticSearch Service](http://ideabook.phodal.com/#step-5-ionic-elasticsearch-service) * [Step 6: Ionic OpenLayer 地图显示](http://ideabook.phodal.com/#step-6-ionic-openlayer-地图显示) * [一步步搭建JavaScript框架](http://ideabook.phodal.com/#一步步搭建javascript框架) * [概况](http://ideabook.phodal.com/#概况-9) * [背景](http://ideabook.phodal.com/#背景-8) * [步骤](http://ideabook.phodal.com/#步骤-9) * [Step 1: 注册npm和bower包](http://ideabook.phodal.com/#step-1-注册npm和bower包) * [Step 2: 生成Javascript项目框架](http://ideabook.phodal.com/#step-2-生成javascript项目框架) * [Step 3: 寻找所需要的函数](http://ideabook.phodal.com/#step-3-寻找所需要的函数) * [Step 4: 整合](http://ideabook.phodal.com/#step-4-整合) * [Step 5: 测试](http://ideabook.phodal.com/#step-5-测试) * [练习建议](http://ideabook.phodal.com/#练习建议-4) * [制作简易Mac OS上的伪锁屏工具](http://ideabook.phodal.com/#制作简易mac-os上的伪锁屏工具) * [概况](http://ideabook.phodal.com/#概况-10) * [背景](http://ideabook.phodal.com/#背景-9) * [步骤](http://ideabook.phodal.com/#步骤-10) * [Step 1：屏幕截图](http://ideabook.phodal.com/#step-1屏幕截图) * [Step 2：调节亮度](http://ideabook.phodal.com/#step-2调节亮度) * [Step 3：全屏图片](http://ideabook.phodal.com/#step-3全屏图片) * [基于Virtual DOM的测试代码生成](http://ideabook.phodal.com/#基于virtual-dom的测试代码生成) * [概况](http://ideabook.phodal.com/#概况-11) * [背景](http://ideabook.phodal.com/#背景-10) * [ShowCase](http://ideabook.phodal.com/#showcase-8) * [基本原理](http://ideabook.phodal.com/#基本原理) * [步骤](http://ideabook.phodal.com/#步骤-11) * [Step 1: Virtual-dom与HyperScript](http://ideabook.phodal.com/#step-1-virtual-dom与hyperscript) * [Step 2: 标记DOM变化](http://ideabook.phodal.com/#step-2-标记dom变化) * [基于Backbone的单页面移动应用](http://ideabook.phodal.com/#基于backbone的单页面移动应用) * [概况](http://ideabook.phodal.com/#概况-12) * [背景](http://ideabook.phodal.com/#背景-11) * [Showcase](http://ideabook.phodal.com/#showcase-9) * [jQuery + Backbone + UnderScore + Require.JS](http://ideabook.phodal.com/#jquery-backbone-underscore-require.js) * [步骤](http://ideabook.phodal.com/#步骤-12) * [Step 1: 使用Require.js管理依赖](http://ideabook.phodal.com/#step-1-使用require.js管理依赖) * [Step 2: 添加路由](http://ideabook.phodal.com/#step-2-添加路由) * [Step 3: 创建主页View](http://ideabook.phodal.com/#step-3-创建主页view) * [Step 4: jQuery Sidr](http://ideabook.phodal.com/#step-4-jquery-sidr) * [Step 5: Django Tastypie示例](http://ideabook.phodal.com/#step-5-django-tastypie示例) * [Step 6: RequireJS Plugins](http://ideabook.phodal.com/#step-6-requirejs-plugins) * [Step 6: 简单的博客](http://ideabook.phodal.com/#step-6-简单的博客) * [Step 7: 重构](http://ideabook.phodal.com/#step-7-重构) * [Step 8: 移动CMS滑动](http://ideabook.phodal.com/#step-8-移动cms滑动) * [Oculus + Node.js + Three.js 打造VR世界](http://ideabook.phodal.com/#oculus-node.js-three.js-打造vr世界) * [概况](http://ideabook.phodal.com/#概况-13) * [背景](http://ideabook.phodal.com/#背景-12) * [Showcase](http://ideabook.phodal.com/#showcase-10) * [框架： Oculus Rift & Node NMD](http://ideabook.phodal.com/#框架-oculus-rift-node-nmd) * [步骤](http://ideabook.phodal.com/#步骤-13) * [Step 1: Node Oculus Services](http://ideabook.phodal.com/#step-1-node-oculus-services) * [Step 2: Node.js Oculus Hello，World](http://ideabook.phodal.com/#step-2-node.js-oculus-helloworld) * [Step 3: Node Oculus WebSocket](http://ideabook.phodal.com/#step-3-node-oculus-websocket) * [Step 4: Oculus Effect + DK2 Control](http://ideabook.phodal.com/#step-4-oculus-effect-dk2-control) * [Step 5: Three.js KeyHandler](http://ideabook.phodal.com/#step-5-three.js-keyhandler) * [练习建议](http://ideabook.phodal.com/#练习建议-5) * [手动制作照片地图](http://ideabook.phodal.com/#手动制作照片地图) * [概况](http://ideabook.phodal.com/#概况-14) * [Background:把照片放在地图上](http://ideabook.phodal.com/#background把照片放在地图上) * [Showcase](http://ideabook.phodal.com/#showcase-11) * [框架： EXIF & ExifRead & CartoDB](http://ideabook.phodal.com/#框架-exif-exifread-cartodb) * [步骤](http://ideabook.phodal.com/#步骤-14) * [Step 1: 解析读取照片信息](http://ideabook.phodal.com/#step-1-解析读取照片信息) * [Step 2: 上传数据](http://ideabook.phodal.com/#step-2-上传数据) * [练习建议](http://ideabook.phodal.com/#练习建议-6) * [D3.js打造技能树](http://ideabook.phodal.com/#d3.js打造技能树) * [概况](http://ideabook.phodal.com/#概况-15) * [背景](http://ideabook.phodal.com/#背景-13) * [Showcase](http://ideabook.phodal.com/#showcase-12) * [Graphviz](http://ideabook.phodal.com/#graphviz) * [步骤](http://ideabook.phodal.com/#步骤-15) * [Step 1: 打造简单的技能树](http://ideabook.phodal.com/#step-1-打造简单的技能树) * [Step 3: D3.js Tooltipster](http://ideabook.phodal.com/#step-3-d3.js-tooltipster) * [技术雷达趋势](http://ideabook.phodal.com/#技术雷达趋势) * [概况](http://ideabook.phodal.com/#概况-16) * [背景](http://ideabook.phodal.com/#背景-14) * [Showcase](http://ideabook.phodal.com/#showcase-13) * [D3.js](http://ideabook.phodal.com/#d3.js) * [步骤](http://ideabook.phodal.com/#步骤-16) * [Step 1: Schema与原始代码](http://ideabook.phodal.com/#step-1-schema与原始代码) * [Step 2: 处理数据](http://ideabook.phodal.com/#step-2-处理数据) * [文本转Logo](http://ideabook.phodal.com/#文本转logo) * [概况](http://ideabook.phodal.com/#概况-17) * [背景](http://ideabook.phodal.com/#背景-15) * [ShowCase](http://ideabook.phodal.com/#showcase-14) * [需求说明](http://ideabook.phodal.com/#需求说明) * [步骤](http://ideabook.phodal.com/#步骤-17) * [Step 1: Python 文字转Logo实战](http://ideabook.phodal.com/#step-1-python-文字转logo实战) * [GeoJSON与ElasticSearch实现高级图形搜索](http://ideabook.phodal.com/#geojson与elasticsearch实现高级图形搜索) * [概况](http://ideabook.phodal.com/#概况-18) * [Showcase](http://ideabook.phodal.com/#showcase-15) * [jQuery + Mustache + Leaflet](http://ideabook.phodal.com/#jquery-mustache-leaflet) * [步骤](http://ideabook.phodal.com/#步骤-18) * [Step 1: 离线地图与搜索](http://ideabook.phodal.com/#step-1-离线地图与搜索) * [Step 2: 从地点到地图上显示](http://ideabook.phodal.com/#step-2-从地点到地图上显示) * [Step 3: 从地图到地点上显示](http://ideabook.phodal.com/#step-3-从地图到地点上显示) License --- [![Phodal's Book](http://brand.phodal.com/shields/book-small.svg)](https://www.phodal.com/) [![Phodal's Idea](http://brand.phodal.com/shields/idea-small.svg)](http://ideas.phodal.com/) © 2016 [Phodal Huang](https://www.phodal.com). This code is distributed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License. See `LICENSE` in this directory. [![待我代码编成,娶你为妻可好](http://brand.phodal.com/slogan/slogan.svg)](http://www.xuntayizhan.com/person/ji-ke-ai-qing-zhi-er-shi-dai-wo-dai-ma-bian-cheng-qu-ni-wei-qi-ke-hao-wan/)