ideabook

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

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

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

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

拥有Ideabook，你就等于拥有一系列的练手项目。

我的Idea在不断地增长，有些Idea有Cool，而这些Idea都没有一个好的实战指南。这个电子书的目标就是为这些Idea提供实战指南，一步步搭建。

Idea指南的格式：

• 概况
  • 背景
  • Showcase
  • 技术栈等介绍
• 步骤
  • Step *
  • 练习建议
    

PS: 当前为预览版，在使用的过程中遇到任何遇到请及时与我联系

我的其他电子书：

• 《一步步搭建物联网系统》
• 《GitHub 漫游指南》
• 《RePractise》
• 《Growth: 全栈增长工程师指南》

欢迎关注我的微信公众号（扫描下面的二维码或搜索 Phodal）.

截图集：

将GitHub用户显示到地图上：

书籍录入程序：

Web文本编辑器：

O2O地图搜索：

全平台应用：

技能树：

编辑-发布-开发分离的文本编辑器：

测试代码生成器：

目录

• 分析网站日志，打造访问地图
  • 概况
    • 背景
    • ShowCase
    • Hadoop + Pig + Jython + AmMap + ElasticSearch
  • 步骤
    • Step 1: 搭建基础设施
    • Step 2: 解析access.log
    • Step 3: 转换IP为GEO信息
    • Step 4: 展示数据到地图上
    • 练习建议
• 书籍录入程序
  • 概况
    • 背景
    • ShowCase
    • Ionic + Zxing
  • 步骤
    • Step 1: ZXing扫描与Douban API
    • Step 2: 存储数据库
    • 练习建议
• 制作专属Badge
  • 概况
    • 背景
    • ShowCase
    • SVG与SVGWrite
  • 步骤
    • Step 1: 基本图形
    • Step 2: 高级Badge
• Web文本编辑器
  • 概况
    • 背景
    • ShowCase
    • CKEditor + Ractive
  • 步骤
    • Step 1: hello,world
    • Step 2: Require.js模块化
    • Step 3: 初始化
    • Step 4: 创建对应的View
    • 练习建议
• JavaScript打造Slide应用
  • 概况
    • 背景
    • Showcase
    • 需求
  • 步骤
    • Step 1: 基本的Slide功能
    • Step 2: 解析Markdown
    • Step 3: 事件处理
    • Step 4: 解析字幕
    • Step 5: 进度条
    • Step 6: 同步
    • 练习建议
• 编辑-发布-分离应用
  • 概况
    • 背景: 编辑-发布-开发分离
    • 用户场景
  • 步骤
    • Step 1: 构建工具
    • Step 2: 静态页面生成
• Google Map与Solr实现多边形搜索
  • 概况
    • 背景
    • Showcase
    • Solr
  • 步骤
    • Step 1: Solr Flask
    • Step 2: Google map Polygon
• 一份代码打造跨平台应用
  • 概况
    • 背景
    • ShowCase
    • Ionic & Electron & Cordova
  • 步骤
    • Step 1: 从Web到混合应用，再到桌面应用
    • Step 2: 响应式设计
    • Step 3: 平台特定代码
    • 未来
• Ionic ElasticSearch打造O2O应用
  • 概况
    • 背景
    • Showcase
    • 构架设计
  • 步骤
    • 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 地图显示
• 一步步搭建JavaScript框架: Lettuce
  • 概况
    • 背景
  • 步骤
    • Step 1: 注册npm和bower包
    • Step 2: 生成Javascript项目框架
    • Step 3: 寻找所需要的函数
    • Step 4: 整合
    • Step 5: 测试
    • 练习建议
• 基于Virtual DOM的测试代码生成
  • 概况
    • 背景
    • ShowCase
    • 基本原理
  • 步骤
    • Step 1: Virtual-dom与HyperScript
    • Step 2: 标记DOM变化
• 单页面移动应用
  • 概况
    • 背景
    • Showcase
    • jQuery + Backbone + UnderScore + Require.JS
  • 步骤
    • 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滑动
• Oculus + Node.js + Three.js 打造VR世界
  • 概况
    • 背景
    • Showcase
    • 框架： Oculus Rift & Node NMD
  • 步骤
    • 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
    • 练习建议
• 制作照片地图
  • 概况
    • Background:把照片放在地图上
    • Showcase
    • 框架： EXIF & ExifRead & CartoDB
  • 步骤
    • Step 1: 解析读取照片信息
    • Step 2: 上传数据
    • 练习建议
• D3.js 制作技能树
  • 概况
    • 背景
    • Showcase
    • Graphviz
  • 步骤
    • Step 1: 打造简单的技能树
    • Step 3: D3.js Tooltipster
• 技术雷达趋势
  • 概况
    • 背景
    • Showcase
    • D3.js
  • 步骤
    • Step 1: Schema与原始代码
    • Step 2: 处理数据
• 文本转化为Logo
  • 概况
    • 背景
    • ShowCase
    • 需求说明
  • 步骤
    • Step 1: Python 文字转Logo实战
• GEOJSON与ElasticSearch实现高级图形搜索
  • 概况
    • 背景
    • Showcase
    • jQuery + Mustache + Leaflet
  • 步骤
    • Step 1: 离线地图与搜索
    • Step 2: 从地点到地图上显示
    • Step 3: 从地图到地点上显示

License

© 2016 Phodal Huang. This code is distributed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License. See LICENSE in this directory.