Blog Posts - 鲍勃の部屋

和鲍勃一起来学Bootstrap - 第2课

6/20/2014

这课来学习 bootstrap 的Hello world

步骤一：去官网下载 bootstrap 的编译版本 bootstrap-3.03-dist.zip 并解压

在 $YOUR_PATH/dis/css/下就是编译好的 bootstraps.css , bootstrap-theme.css
$YOUR_PATH/dis/js/ 下是预编译好的 bootstrap.js

可以合来直接使用啦

下面就用一个模板来开始我们的hello world之旅

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">




</head>
<body>
<h1>Hello, Bootstrap!</h1>


<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>

和鲍勃一起来学Bootstrap第1课

6/19/2014

简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。

在开始继续学习之前，先搞明白为什么学习bootstrap ，或者说

Bootstrap深受广大屌丝喜爱的原因到底是什么呢？

1.节省时间

利用Bootstrap，你将有更多的时间用来挣钱。Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。

和鲍勃一起来学Node.js--第13课

6/19/2014

书接上回。

我们已经实现了上传图片，那么能不能直接在浏览器中显示我们上传的图片呢？

答案是：能！

在requestHandler.js 里的 upload() 函数中增加一个图像就行了

response.write('<img src="/show_upload" />');

如你所想，接下来要增加一个新的路由，使得show_upload读取最新上传的图片内容，并返回

function show_upload(response, request){
console.log("show_upload: "+pic_full_name);
fs.readFile(pic_full_name, "binary", function(error, file){
if(error){
response:writeHead(500, {"Content-Type":"text/plain"});
response.write(error+"\n");
response.end();
}else{
response.writeHead(200, {"Content-Type":"image/png"});
response.write(file, "binary");
response.end();
}
});
}

exports.a = a;
exports.b = b;
exports.upload = upload;
exports.show_upload = show_upload;

和鲍勃一起来学Node.js--第12课

6/19/2014

本课学习如果上传文件，并把图在浏览器中显示出来。

这个用例在90年代完全可以满足用于IPO的商业模型了，今天我们通过它可以学习两件事情：

1. 如何安装外部node.js模块
2. 如何将它们应用到我们的应用中。

这里，我们要用到的模块是 Felix Geisendorfer开发的 node-formidable模块，它对解析上传的文件数据做了很好的抽象。

如何安装模块呢？ node.js有自己的包管理器叫NPM.

看过之前 PhoneGap 之 HelloWorld 的朋友应该会不陌生。

通过下一条命令完成 formidable 的安装

npm install formidable

终端输出如下：

npm http GET https://registry.npmjs.org/formidable
npm http 200 https://registry.npmjs.org/formidable
npm http GET https://registry.npmjs.org/formidable/-/formidable-1.0.15.tgz
npm http 200 https://registry.npmjs.org/formidable/-/formidable-1.0.15.tgz
formidable@1.0.15 node_modules\formidable

说明模块已经安装成功了

查看执行npm install 的目录，会发现多了一个 node_modules/formidable 文件夹

和鲍勃一起来学Node.js--第11课

6/17/2014

本课教你如何处理post请求

通过前面10节课的学习，你已经是新手中的专家了，你会想到采用异步回调来实现非阻塞地处理post请求的数据。

这里采用非阻塞的处理方式是明智的，因为一般post请求都比较“重”，用户可能会输入大量的内容。

为了使整个过程非阻塞，node.js 会将post数据拆分成很多小的数据块，然后通过触发特定的事件，将这些小数据块传递给回调函数。这里的特定事件有data事件（表示新的小数据块到了）还有 end事件（表示所有的数据都已经接收完毕）

我们需要告诉node.js当这些事件触发的时候，回调哪些函数。

怎么告诉呢，通过在request对象上注册监听器（listener)来实现。如下所示

request.addListener("data", function(chunk){
//called when a new chunk of data was received
});

request.addlistener("end", function(){
// called when all chunks of data have been received
});

和鲍勃一起来学Node.js--第10课

6/17/2014

本课教你如何肥预先写好的html内容展示到浏览器中

之前所有课程中，浏览器中看到的内容都是程序生成的，能不能直接读取写好的文件内容展示出来呢

答案是使用fs模块。

首先，创建一个文件 html/form.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body>
<form action="/upload" method="post">
<textarea name="text" rows="20" cols="60"></textarea>
<input value="Submit Text" />
</form>
</body>
</html>

PhoneGap (Cordova) 在Eclipse中运行

6/16/2014

上一篇我们实现在用命令行运行想 PhoneGap 的 HelloWorld

phonegap run android

这次我们改用Eclipse运行.

首先先看一下，上次用phonegap run android，在my-app下生成的文件目录

文件夹详解:

www              : 文件夹开发的 HTML5 ; CSS ; JS 文件都拷贝到这下面

plugins          : 文件夹存放的是phonegap插件  以后文件,摄像头等插件都下载到这里,在下篇文章中介绍用法

merges          : 我也没用过以后知道了再补上

platforms      : 文件夹存放的是编译好后的android文件   ,(如果这个文件夹为空,需要你在命令行编译一次才能生成. 如上面 phonegap run android)

.cordova        : 存放的是配置文件

将platforms文件夹导入 eclipse 就可以使用

和鲍勃一起来学Node.js--第09课

6/15/2014

好，我们马上开始介绍，如何以正确的方式，把耗时又不阻塞的内容让浏览器作出响应

到现在为止，我们的代码已经可以通过各个模块之间传递返回值

requestHandler->routes->server

最后在server中通过 response.write 回写到浏览器中

现在我们改一下，不再传递字符串的返回值，而是直接传递response对象，把response对象，从server->routes->requesthanler传下去。

首先是server.js, 把response, 向下传递给routes，同时删除所有的response返回，交给下面的requestHanler处理。

function start(get, config){
var http = require("http");
var url = require("url");

var server = http.createServer(function(request, response){
var pathname = url.parse(request.url).pathname;
get(pathname, config, response);

});
server.listen(8888);
}

exports.start = start;

和鲍勃一起来学Node.js--第8课

6/15/2014

阻塞？非阻塞？

到目前为止，我们的路由模块工作一切正常，但实际上在处理阻塞讲求时就会出现问题。

我们自底向上的稍微修改一下各个模块

第一个是 requesthandler.js, 在路由b的时候增加一个睡眠 5秒

function a(){
console.log("welcome to visit a :) ");
return "This is A!"
}
function b(){
sleep(5000);
return "Hello B";
}
function sleep(t){
var now = new Date();
var d = now.getTime();
var e = d + t;

while(new Date().getTime() < e);
}
exports.a = a;
exports.b = b;

PhoneGap 之Hello world篇

6/14/2014

一。安装 PhoneGap

http://phonegap.com/install/

官方教程说，首先需要安装 node.js ，幸好bob早就有了

然后在命令行里运行

C:\> npm install -g phonegap

遇到问题：

npm http GET https://registry.npmjs.org/shelljs/0.1.4
npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.

到说，找不到git命令。其实bob 早已经安装了git bash .

于是打开git bash 运行npm install -g phonegap，经过一小长段时间（超极本运行了10分钟约，当然了主要是网速……） , 终于完成（中间好像有报一个git clone cordova的返回错误，没有理会它）

npm http GET https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.25-1.tgz
npm http 200 https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz
npm http 200 https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz
npm http 200 https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.25-1.tgz
C:\Users\hp\AppData\Roaming\npm\phonegap -> C:\Users\hp\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js
phonegap@3.5.0-0.20.4 C:\Users\hp\AppData\Roaming\npm\node_modules\phonegap
├── pluralize@0.0.4
├── colors@0.6.0-1
├── semver@1.1.0
├── qrcode-terminal@0.9.4
├── shelljs@0.1.4
├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.10)
├── prompt@0.2.11 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.5, winston@0.6.2, utile@0.2.1)
├── phonegap-build@0.8.4 (qrcode-terminal@0.8.0, shelljs@0.0.9, optimist@0.3.7, phonegap-build-api@0.3.3)
├── cordova@3.5.0-0.2.4 (q@0.9.7, underscore@1.4.4, cordova-lib@0.21.3)
├── cordova-lib@0.21.4-dev (osenv@0.0.3, properties-parser@0.2.3, bplist-parser@0.0.5, mime@1.2.11, q@0.9.7, semver@2
.0.11, underscore@1.4.4, dep-graph@1.1.0, plist-with-patches@0.5.1, rc@0.3.0, tar@0.1.19, xcode@0.6.6, elementtree@0.1.5
, npmconf@0.1.16, glob@3.2.11, npm@1.3.4, request@2.22.0)
└── connect-phonegap@0.11.0 (home-dir@0.1.2, connect-inject@0.3.2, shelljs@0.2.6, request-progress@0.3.1, node-static
@0.7.0, useragent@2.0.8, tar@0.1.19, gaze@0.4.3, request@2.33.0, connect@2.12.0)

2. 使用安装好的phonegap命令

$ phonegap create my-app
$ cd my-app
$ phonegap run android

在执行第三行命令的时候出错

hp@HP-PC /d/Work/web
$ phonegap run android
[Error: project directory could not be found]
[error] project directory could not be found

查阅了相关文章，需要下载 ant

下载完成，解压到任意目录，我这里为 D:\Work\apache-ant-1.9.4

设置环境变量:

ANT_HOME: D:\Work\apache-ant-1.9.4
Path: %ANT_HOME%\bin

重新打开 git bash 命令窗口执行，报新的错误提示：

hp@HP-PC /d/work/web/bob-app
$ phonegap run android
[phonegap] detecting Android SDK environment...
[phonegap] using the local environment
[phonegap] adding the Android platform...

C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:126
throw e;
^
Error: An error occurred while listing Android targets
at C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\lib\check_reqs.js:87:29
at _rejected (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:808:24)
at C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:834:30
at Promise.when (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:1079:31)
at Promise.promise.promiseDispatch (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:752:41)
at C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:574:44
at flush (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:108:17)
at process._tickCallback (node.js:415:13)
{ [Error: C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\create.bat: Command failed with exit code 8] code: 8 }
[error] C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\create.bat: Command failed with exit code 8

经过 stackoverflow 的指点，原来需要以下两个路径添加到PATH中

D:\Work\adt-bundle-windows-x86_64-20131030\sdk\platforms;
D:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools;
（在此应该顺便添加 D:\Work\adt-bundle-windows-x86_64-20131030\sdk\platform-tools的，要不然下面还会遇到说adb命令找不到的错误）

然后，重启git bash 命令窗口，进入到 D:/work/web/my-app/下再运行 phonegap run android,
几乎就要成功了，可是最后又出现一个错误

Invalid number of parameters
The system cannot find the path specified.

Project successfully created.
cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\res\icon\ios\icon-72.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

[phonegap] compiling Android...
cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\res\icon\ios\icon-72.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

Unable to locate tools.jar. Expected to find it in C:\Program Files\Java\jre6\lib\tools.jar
Buildfile: d:\Work\web\bob-app\platforms\android\build.xml

-set-mode-check:

-set-debug-files:

-check-env:
[checkenv] Android SDK Tools Revision 22.3.0
[checkenv] Installed at d:\Work\adt-bundle-windows-x86_64-20131030\sdk

-setup:
[echo] Project Name: HelloWorld
[gettype] Project Type: Application

-set-debug-mode:

-debug-obfuscation-check:

-pre-build:

-build-setup:
[getbuildtools] Using latest Build Tools: 19.0.0
[echo] Resolving Build Target for HelloWorld...
[gettarget] Project Target: Android 4.4
[gettarget] API level: 19
[echo] ----------
[echo] Creating output directories if needed...
[mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build
[mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\res
[mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\rsObj
[mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\rsLibs
[mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-gen
[mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\classes
[mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\dexedLibs
[echo] ----------
[echo] Resolving Dependencies for HelloWorld...
[dependency] Library dependencies:
[dependency]
[dependency] ------------------
[dependency] Ordered libraries:
[dependency]
[dependency] ------------------
[echo] ----------
[echo] Building Libraries with 'debug'...

nodeps:

-set-mode-check:

-set-debug-files:

-check-env:
[checkenv] Android SDK Tools Revision 22.3.0
[checkenv] Installed at d:\Work\adt-bundle-windows-x86_64-20131030\sdk

-setup:
[echo] Project Name: CordovaLib
[gettype] Project Type: Android Library

-set-debug-mode:

-debug-obfuscation-check:

-pre-build:

-build-setup:
[getbuildtools] Using latest Build Tools: 19.0.0
[echo] Resolving Build Target for CordovaLib...
[gettarget] Project Target: Android 4.4
[gettarget] API level: 19
[echo] ----------
[echo] Creating output directories if needed...
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\res
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\libs
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\res
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\rsObj
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\rsLibs
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-gen
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\classes
[mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\dexedLibs
[echo] ----------
[echo] Resolving Dependencies for CordovaLib...
[dependency] Library dependencies:
[dependency] No Libraries
[dependency]
[dependency] ------------------

-code-gen:
[mergemanifest] Merging AndroidManifest files into one.
[mergemanifest] Manifest merger disabled. Using project manifest only.
[echo] Handling aidl files...
[aidl] No AIDL files to compile.
[echo] ----------
[echo] Handling RenderScript files...
[echo] ----------
[echo] Handling Resources...
[aapt] Generating resource IDs...
[echo] ----------
[echo] Handling BuildConfig class...
[buildconfig] Generating BuildConfig class.

-pre-compile:

-compile:
[javac] Compiling 89 source files to D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\classes

BUILD FAILED
d:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:601: The following error occurred while executing thi
s line:
d:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:720: The following error occurred while executing thi
s line:
d:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:734: Error running javac.exe compiler

Total time: 6 seconds
Error code 1 for command: cmd with args: /s,/c,ant,debug,-f,d:\Work\web\bob-app\platforms\android\build.xml,-Dout.dir=an
t-build,-Dgen.absolute.dir=ant-gen
{ [Error: d:\Work\web\bob-app\platforms\android\cordova\build.bat: Command failed with exit code 2] code: 2 }
[error] d:\Work\web\bob-app\platforms\android\cordova\build.bat: Command failed with exit code 2

主要有两个问题

一。 Unable to locate tools.jar. Expected to find it in C:\Program Files\Java\jre6\lib\tools.jar

我找了一个，我电脑上的 tools.jar 的实际路径为 C:\Program Files\Java\jdk1.6.0_43\lib

这是因为，没有定义 JAVA_HOME , 它就按默认的地方去找了，没找到。(stackoverflow)

于是添加 JAVA_HOME变量指定值为： C:\Program Files\Java\jdk1.6.0_43\

二，没有找到icon ，这个暂时先不考虑它

重启 git bash , 再运行 phonegap run android

-package:
[apkbuilder] Found Deleted Target File
[apkbuilder] Creating HelloWorld-debug-unaligned.apk and signing it with a debug key...

-post-package:

-do-debug:
[zipalign] Running zip align on final apk...
[echo] Debug Package: d:\Work\web\bob-app\platforms\android\ant-build\HelloWorld-debug.apk
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop

-post-build:
[move] Moving 1 file to d:\Work\web\bob-app\platforms\android\ant-build
[move] Moving 1 file to d:\Work\web\bob-app\platforms\android\CordovaLib\ant-build

debug:

BUILD SUCCESSFUL
Total time: 4 seconds

d:\Work\web\bob-app\platforms\android\cordova\node_modules\q\q.js:126
throw e;
^
Error executing "adb devices": 'adb' is not recognized as an internal or external command,
operable program or batch file.

hp@HP-PC /d/work/web/bob-app

看到了 BUILD SUCCESSFUL 真不容易。等等，好像还有一个错 adb 不认识。

再把 D:\Work\adt-bundle-windows-x86_64-20131030\sdk\platform-tools 添加到 PATH中

重启 git bash, 再运行 phonegap run android

[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop

-post-build:
[move] Moving 1 file to d:\Work\web\bob-app\platforms\android\ant-build
[move] Moving 1 file to d:\Work\web\bob-app\platforms\android\CordovaLib\ant-build

debug:

BUILD SUCCESSFUL
Total time: 10 seconds
WARNING : No started emulators found, starting an emulator.

d:\Work\web\bob-app\platforms\android\cordova\node_modules\q\q.js:126
throw e;
^
ERROR : No emulator images (avds) found, if you would like to create an
avd follow the instructions provided here:
http://developer.android.com/tools/devices/index.html
Or run 'android create avd --name <name> --target <targetID>'
in on the command line.

苍天呐，大地呐。生命不息，错误不止啊。

不过仔细一看，是说No emulator ,需要 avd.

要什么avd 啊，直接手机连上电脑！

再次运行 phonegap run android

终于在三儿子（Galaxy Nexus）上看到到亲切的小盒子机器人了，

收工！

PS:
以上都是在鲍勃的机器环境上一步一步的完成。如果您的机器和本文相差甚远，您可能需要参考以下内容:

http://teusink.blogspot.jp/2013/07/guide-phonegap-3-android-windows.html

PhoneGap Cordova 环境搭建