text: 一个全栈增长工程师的练手项目集
  ===
  
  > 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/)
  
  