blog

2017，家，流水的一年

2017年流水似的过去了……

所幸赶在2018年元旦前搬进了新家，精装的房子，打包的装修，之前设想的种种基本都没有实施，还是懒的原因……

博客也终于升级到了1.x的版本。

```
$ docker pull ghost
$ docker run -d --name name -p 3001:2368 -v /path/to/ghost/blog:/var/lib/ghost/content -e url=http://your.blog -e NODE_ENV=production ghost:1-alpine
//更改下nginx的监听端口，restart就OK😄
//将之前hicc.me博客中外链http图片全部迁移到https后，博客也升级到了https
//顺便letsencrypt的https升级更方便了，几乎一键，大赞👍，https://certbot.eff.org/#ubuntutrusty-nginx，
```

嗯，支付宝说，我2018年的关键词是——**远方**。


乔布斯的一段演讲



<audio controls="" src="https://image.hicc.pro/steven-There’s%20lots%20of%20ways%20to%20be%20as%20a%20person.mp3"></audio>

> There’s lots of ways to be as a person, and some people express their deep appreciation in different ways. But one of the ways that I believe people express their appreciation to the rest of humanity is to make something wonderful and put it out there. You never meet the people, you never shake their hands, you never hear their stories or tell yours. But somehow in the act of making something with a great deal of care and love, something’s transmitted there. And it’s a way of expressing to the rest of our species our deep appreciation. So we need to be true to who we are and remember what’s really important to us. That’s what’s gonna keep Apple, Apple, is if we keep us, us.




热爱你所热爱的



AirPods终于到手了，密集用了一天，AirPods确实给了我等待6周的惊喜，简单，可信赖，这就是蓝牙耳机该有的样子呀。

产品不就应该是这个样子吗？诸多的纠结不就是为了这个直白的目的吗？

越简单越不易，没日没夜的忙碌，似乎忘却了自我。

喘息，有节奏的喘息才能有力量。

热爱我的热爱。

-----
2017.8.25

买之前诸多评测说是没有按键来调节音量，不免心有疑虑，用到现在才发现，为什么要有音量调节呢？有了这个才是泯然众人矣。

用到现在更加喜欢AirPods了。

[译]简编漫画介绍WebAssembly

最是深情

一早上，妈妈电话我，说外公病重让我给她买回家的票。过了一会奶奶又给我电话，开口就是你别怕，你外公走了，没敢给你妈妈说……

窒息般地伤心。外公走了，过年还是好好的呀，奶奶说，我外公想外婆，想不开，去了。

外婆前年冬天过世的，因为肺部有病，有天劳累过度，吐了血就走了，外公不住的念叨，“还能醒过来不，还能醒过来不”，外公是村里之前少有的读书人，吃饭挑，只有外婆能照顾的妥当，外婆一走，外公身体就开始不好，也不怎么好好吃饭，一直说想我的外婆，想效仿我的大爷爷。

说到这里又是另一个故事，我08年高中毕业，大奶奶过世，大爷爷开始不吃饭，只喝点牛奶，之后一个月我大爷爷跟着我大奶奶走了。

我外公老说也要学我大爷爷，绝食……，许是那样太过辛苦，一直到了今天，想不到是用这样的一种决然的方式。

问朋友车票的事，说起外公，说他和我外公是忘年交，相互聊很多。小时候也对外公无话不谈，有次我抱怨了爸妈的事，爸妈却从外公那里听到了，之后和外公就不那样聊天了。我们两家隔得近，我一天可以去好几次，外公外婆对我极好，仍和他们很亲。之后外面工作，偶尔电话回去，更多的只是问候。

现在好想多和外公聊几次天。

现在就剩下爷爷奶奶了。

![](https://image.hicc.pro/hicc_me-1093279145_IMG_2850.JPG)





升级博客到Ghost 0.11.3，支持AMP

Ghost在0.11版本中支持了Google Accelerated Mobile Pages 也就是AMP，能够1s内加载网页，算是个不错的特性。

周末有时间，也就顺便做了，升级，过程挺顺利，倒是想起了很早以前各种折腾的时光。😄

---
下面是AMP的一个样式，如果是刚刚升级，得等段时间，Google搜索才会有AMP的效果。
![](https://image.hicc.pro/hicc_me459560066_IMG_3620.PNG)

![](https://image.hicc.pro/hicc_me439242604_IMG_3619.PNG)


Swift

Swift 3 分词

发布Hipo Mac 版本后，花了一天时间升级Hipo iOS代码到Swift 3，然后准备为**Hipo iOS 增加spotlight 搜索功能**，因此就需要分词作为搜索的关键词。

下面是简单的实现方式，依赖[CFStringTokenizer - Core Foundation | Apple Developer Documentation](https://developer.apple.com/reference/corefoundation/1666536-cfstringtokenizer).

```

extension String {
    func tokenize() -> [String] {
        let word = self
        let tokenize = CFStringTokenizerCreate(kCFAllocatorDefault, word as CFString!, CFRangeMake(0, word.characters.count), kCFStringTokenizerUnitWord, CFLocaleCopyCurrent())
        CFStringTokenizerAdvanceToNextToken(tokenize)
        var range = CFStringTokenizerGetCurrentTokenRange(tokenize)
        var keyWords : [String] = []
        while range.length > 0 {
            let wRange = word.index(word.startIndex, offsetBy: range.location)..<word.index(word.startIndex, offsetBy: range.location + range.length)
            let keyWord = word.substring(with:wRange)
            keyWords.append(keyWord)
            CFStringTokenizerAdvanceToNextToken(tokenize)
            range = CFStringTokenizerGetCurrentTokenRange(tokenize)
        }
        return keyWords

    }
}

```

![](https://image.hicc.pro/image/3/aa/c787ab6f7ee0be122ff9507ac876c.jpg)

Hipo Money

Hipo的一点想法和计划

[Hipo](https://hipo.cash)做到现在都做了2年了，几次App Store首页推荐，一直维持在中国区财务付费榜前100，不算什么成就，最近刚刚免费发布了Mac、Web版本。

- 个人开发App十之八九都不会大卖，为啥不按照纯粹一点的方式来开发，实现自己的想法，吃自己的狗粮不就已经是最大的开心了么
-  发布之后最好能有个常规的跟新，这样多少能够挽留下用户的流失，每天Hipo统计中下跌的数字都在提醒着我的懒惰😄。
-  less is more ？ Hipo的设计和交互按照一些时髦的想法做的很是精简，所有的操作两步之内搞定，但是用户很是无感，甚至抱怨功能太少，现在也在考虑按照更直白，熟知的方式来重新设计
-  不再憋大版本，做到常规的周期更新，这点算是对个人开发者，最大的挑战～～


![](https://image.hicc.pro/hicc_me-1430435937_city_light.jpg)

有天窗的屋子

![有天窗的屋子](https://image.hicc.pro/image/e/19/280bb5529d2b4eebc18d806089b10.jpg)

Tweet上看到的一张照片，好生喜欢，做自己喜欢的事，和心爱的人一起面朝大海，春暖花开。

AngularJS 1 教程

## 为什么需要前端框架

随着浏览器性能提升，更多Web Page演变为Web App，特别是在中大型的项目中，就需要一个 **前端框架** 来:

- 解耦应用的逻辑，数据模型，和界面视图
* 更加方便的多人协作
* 基本组件的抽离复用
* 相对低成本的性能保证
* 方便测试
* ……

## 为什么2016年的今天仍然可以学习Angular 1

眼下潮流的框架太过于现代，入门门槛过高，学习React，Vue 2，Angular 2，需要首先学习npm、webpack、jsx、ES6、甚至Typescript。而且变化非常快，一些需要写前端的后端人员可能力不从心😂

而学习AngularJS 1 只需要基础的前端知识即可，Angular 1 属于经典的MVC类框架，API已经非常稳定，社区成熟，对低版本浏览器支持好(1.2以前版本支持IE6)，性能依然满足大部分场景。


## 和jQuery 的不同
jQuery是库，面向DOM，Angular 面向模型，思路要转变。

---
<a class="jsbin-embed" href="http://jsbin.com/wiqoma/embed?html,js,output">JS Bin on jsbin.com</a><script async  src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

同样的一个简单需求，可以明显看得出jQuery中业务代码，直接操作DOM代码揉杂在一块，而Angular中JS代码关心业务逻辑，HTML描述界面非常的清晰。

一般而言，使用jQuery的弊病在于，

- 用作中大型应用jQuery相对简陋，容易执着于DOM操作这种原子类问题。
* 代码不好模块化，变量，方法处在全局作用域下面容易相互污染。
* 代码不容易随着业务更改，扩展。
* 还有相对反直觉的一点是，  **如果页面交互复杂，而开发人员对DOM操作不精通，jQuery遍地`$()`的使用方式很容易造成性能问题** 。
* 遍地所谓的jQuery插件严重使得代码膨胀，性能低下！！！


当然框架本身的学习成本，是对项目后期的投资，不过项目本身不复杂，完全没必要使用前端框架，用了反而适得其反。

## 学习AngularJS 1
AngualrJs则通过数据双向绑定屏蔽了DOM操作，MVC解耦代码，依赖注入，自定义指令来复用代码，然后配合强大的路由，本地化，安全特性等，成功地成为了前ES6时代最流行的前端框架。

### 作用域、数据双向绑定、模块

作用域(scope)是AngualrJs中的基础概念，一般而言，一个controller一个scope ， 每个controller中内置一个数据模型对象`$scope`。而 **`$scope`对象是定义应用业务逻辑、控制器方法和视图属性的地方** 。

上面的Demo中，业务变量`number`是`$scope`的一个属性，然后通过数据绑定的方式链接到view。

```html
<div>{{number}}</div>
<input type="number" ng-model="number">
```
 
`{{ }}`语法绑定到view中，这个符号还可以修改。

```js
angular.module('app',[],function($interpolateProvider) {
    $interpolateProvider.startSymbol('(%');
    $interpolateProvider.endSymbol('%)');
})
```

而 `ng-model`就是 AngularJS 1中的一大特色： **数据双向绑定** ，model中数据变化了view中就会自动改变，而相应的view中(表单)变化了，也会自动同步到model。

Angular 1.3 之后支持了 `controller as`的语法，上面Demo就可以这样写了

```js
<div ng-app="app" ng-controller="MainCtl as vm">
  <div>
    {{vm.number}}
  </div>
  <input type="number" ng-model="vm.number" require>
  <button ng-click="vm.addOne()">
    +1
  </button>
</div>
```

```js
angular.module('app', [])
    .controller('MainCtl', function() {
      this.number = 0;
      this.addOne = function() {
        this.number += 1;
      }
    })
```


这样controller中不在显示的依赖`$scope`，完全就是普通的函数，干净，好测试，并且也有利于避规一些scope的原型继承导致的双向同步的bug，推荐这样书写。

需要注意的是controller中只操作数据即可，不要试图操作DOM，这点jQuery的同学一定要忍住😄，如果需要操作DOM，请使用指令，后续会讲到。

简单说一下模块

```js
//声明模块
angular.module(‘app’, []);
```

相对独立的功能块可以声明为一个模块，然后通过依赖注入相互引用，这样达到方便的复用，控制，一般第三方插件都是通过模块方式引入到你的应用代码，而自身的业务代码也可以根据实际情况切分不同的模块。

到这一步已经可以开始写一定的Angualr应用了，按照一定功能粒度划分模块，然后纯粹js业务代码，之后数据绑定到view。

实际上之后Angular 1的种种概念都是围绕上述的展开和补充。


### Angualr 1实现双向绑定的脏检查

AngualrJS 1中数据模型对象 `$scope`，就是普通的javascript对象(POJO)，你在上面任意的添加属性和方法，Angular都支持并且能够实时双向绑定的“黑魔法”就是脏检查。

**脏检查字面理解就是循环对比前后值，如果不相同说明就是“脏”的然后执行相应的操作，直到所有值相同，或者超出循环次数范围**

如果说scope是入门的核心，那么Angualr脏检查就是入门到精通的核心。

#### 从使用角度来说脏检查

---

<a class="jsbin-embed" href="http://jsbin.com/jevizaq/embed?html,js,output">JS Bin on jsbin.com</a><script async src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

上面Demo timeout的例子中，通过原生setTimeout方法修改的变量，并没有更新到视图上，而1000毫秒setTimeout的能够更新。说明：

- 脏检查需要一个契机触发，这也是AngualrJs 1中提供大量自己包装过的js原生就有的方法，典型的如 `$timeout` ， `$http`都是为了能够出发脏检查的 `$digest`，所以尽量使用AngularJS提供的方法。
* 一次脏检查会便利App中所有的需要被观察的对象，有一个全局的`$$watchers`。1000毫秒setTimeout的能够更新是因为，这个时间点，恰好由`$timeout`方法触发了一次检查。因此这也就导致了从另一个角度分析脏检查。

#### 从性能角度来说脏检查

上面例子说明了AngularJS脏检查的特性，手动触发，全局检查。

每次循环都要全部遍历一边`$$watchers`的值，而且如果被检测的值相互有依赖，还要循环多次。因此AngularJS脏检查很容易导致性能问题。因此

- 限制不必要的监控数量，建议不超过2000个
* 避免避免深度比较、复杂的逻辑。
* 只绑定一次，Angular 1.3之后 `{{::number}}`语法有助于减少监控数量，因为 `::` 开头的表达式都被认为是一次性表达式。一次性表达式一经赋值就会移除监控。
* 必要时候使用指令 `directive`


### 指令 `directive`，以及用指令写组件

指令是Angular中相对低层，却又非常强大的功能。如果一般使用并不需要了解，使用内置的指令已经可以完成绝大多数功能。

AngularJs中本身以及内置了大量的指令，例如， `ng-if` ， `ng-repeat` ， 甚至`ng-controller`。

也可以通过下面方式来自定义指令。

```js
angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function:
        function(tElement, tAttrs) (...},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) { ... },
        compile: // 返回一个对象或连接函数，如下所示：
            function(tElement, tAttrs, transclude) {
                return {
                    pre: function(scope, iElement, iAttrs, controller) { ... },
                    post: function(scope, iElement, iAttrs, controller) { ... }
                }
                // 或者
                return function postLink(...) { ... }
            }
    };
});
```

自定义指令相对复杂难懂，算是AngularJS中高阶能够，可以从下面三点简单理解的是：

- scope字段，设定指令的作用域。
* link 函数，如果需要接触DOM，代码在此函数中。
* controller 函数，一般用作指令间的调用。

<a class="jsbin-embed" href="http://jsbin.com/bekubo/embed?html,js,output">JS Bin on jsbin.com</a><script async  src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>


来自官网 [AngularJS](https://docs.angularjs.org/guide/directive)的Tab例子可以很好的说明controller的使用。

---

<a class="jsbin-embed" href="http://jsbin.com/momozo/3/embed?html,js,output">JS Bin on jsbin.com</a><script async src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

上述Nestlist Demo中使用指令的渲染速度明显快过使用Angular模版方式。

原因在于DOM写入是种相当耗时操作，大批量数据最好拼好HTML字符串一次性 `innerHTML`到页面中，这样的速度远快于逐步展开插入(Angualr 模版渲染方式)的速度 ，这也是AngualrJs中指令在现在看来也是很强大有用的功能。

- 有机会直接操作DOM，这样也就
	- 有机会书写高效的渲染代码
	* 可以在此使用一些第三方的非AngularJS系js插件。
* 能够隔离scope，甚至能够灵活的方式和其他scope交互，既可以使用`=`强大的双向绑定，而且AngularJs 1.5 scope中 `<`带了目前流行类似单向绑定的功能。
* 扩展来说，在 **今天主流组件化的潮流之下，Angular 1完全可以依赖directive来按照component-based的方式书写框架，**甚至这点已经是目前Angualr 1社区中潮流用法:[Component-Based AngularJS Directives](https://www.airpair.com/angularjs/posts/component-based-angularjs-directives)， [Refactoring Angular Apps to Component Style](https://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html) 

再次多说一点的是，指令中能够精准定义scope交互的功能，从脏检查的角度来说也能在很大程度上减少`$$watchers`的数量，以此来增强性能。

### Promise

Promise的相关可以通过这篇文章来看，[译用漫画来解说AngularJs中的Promises](/promises-angularjs-explained-as-cartoon/) 。


---

AngularJS 1其实还有蛮多概念，不过毕竟是有点过时的框架，上述所写便是Angular 1值得关注留意的知识点了，应该能够足够了解Angular 1。

Hipo Desktop 免费发布

Hipo iOS最后一次更新是在16年5月2号。

之后iPhone 7发布了，iOS 10发布了。

5个月后Hipo Desktop终于发布。

![Hipo Desktop UI](https://image.hicc.pro/image/a/d1/0f65db42a877a6e427e9beba71f1b.png)

- 免费，免费，免费！！！
- 全新设计了桌面端的UI，针对桌面端大屏幕优化，采用了最新的设计风格(airbnb风格)
 - 左侧时间导航
 - 中间部分时间趋势统计，分类预算统计。
 - 右侧具体的记录列表。
- 全桌面，支持[Web](https://hipo.cash/admin)(支持Mac，Windows，iOS，Android，推荐chrome浏览器访问)。
- 数据云同步，全平台，全免费同步(背后依托CloudKit，数据只有用户可见，相当安全)
- 支持多用户，因为桌面端特性，Hipo桌面端支持了多用户使用，不同用户之间数据不可见。
- 多角度，精细的统计，支持全部、年、月不同角度的时间、分类。
- 多种货币支持。
- 客户端自动更新。
- 最后也想写在这里的是，**有爱，有责任的持续跟新**。

目前先放出Mac版本，其他版本测试后放出，~~待稳定后也会提交到Mac App Store浏览器较多，需要些兼容新的处理，Web版也在后续放出~~ 

Mac App Store 版本和Web版本均已上线😄


<a href="https://itunes.apple.com/app/hipo-track-your-expenses-focus/id1168624846?mt=12" alt="Hipo Desktop" ><img src="https://hipo.cash/images/btn_mac.png" _style="width:200px;"/></a>

[Web](https://hipo.cash/web)


[![hipo.cash](https://image.hicc.pro/image/0/13/726f3040ce6048e3e443ec2875a63.jpg)](https://hipo.cash)





使用letsencrypt升级网站到https


因为[Hipo在线版](https://hipo.cash/admin)的~~计划(不日放出)~~，所以将hipo.cash升级到https，证书是免费开放的 [letsencrypt](https://letsencrypt.org)，配合官方的工具[certbot](https://certbot.eff.org/#ubuntutrusty-nginx)。

----  2018.1.10  ----

新版本的cerbot更加的方便，下面的命令还是来自于cerbot网站

```
// 如果是ubuntu nginx的方案
$ sudo apt-get update
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx 

// 然后直接
$ sudo certbot --nginx
// 它会枚举出你 server的网站，你选择需要升级https的域名后，它甚至直接帮你配制nginx，重启，真正的一键。
```

当然如果你之前就配了https的话，如果用完cerbot，还是不能访问，可以参考下面：
```
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/hicc.me/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/hicc.me/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

# Redirect non-https traffic to https
if ($scheme != "https") {
    return 301 https://$host$request_uri;
} # managed by Certbot
```

----



letsencrypt通过访问你服务器上生成的一个随机文件来验证你的域名，所以再使用cerbot脚本之前，首先需要确保要能够通过你的域名直接访问到`.well-known`目录，如果你讲随机文件放倒`/var/www/server/challenges`可以这样配置nginx。

```
server {
    server_name www.yoursite.com yoursite.com;

    location ^~ /.well-known/ {
        alias /var/www/server/challenges;
        try_files $uri =404;
    }
}
```

下面的教程基本来自[cerbot官网](https://certbot.eff.org/#ubuntutrusty-nginx)(使用ubuntu 14 + nginx)，

下载cerbot

```
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto

./certbot-auto
```

然后运行
```
./path/to/certbot-auto certonly
```
然后就是输入联系邮箱，选择标准插件还是"webroot"(官网原话:which can work with the webroot directory of any webserver software，hipo选用的是这个)插件，之后输入需要升级的域名(hipo.cash www.hipo.cash)，之后就是输入验证域名随机文件生成的目录(也就是上述所说的`/var/www/server/challenges`)。

Done！！ 一般情况就会提示执行成功。


之后配置nginx监听443，重定向http到https
```
server {
    listen 80 ;
    listen [::]:80;
    server_name hipo.cash www.hipo.cash;
    return  301 https://hipo.cash$request_uri;
}

server {
    listen 443 ssl ;
    listen [::]:443 ssl;

    server_name hipo.cash www.hipo.cash; # Replace with your domain
    ssl on;
    ssl_certificate /etc/letsencrypt/live/hipo.cash/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hipo.cash/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/hipo.cash/chain.pem;
    location / {
        proxy_pass http://127.0.0.1:18080;
    }
}
```

重启nginx，正常情况下网站便成功升级到了https😄


letsencrypt的脚本需要90后renew下，certbot也支持自动更新。

```
./path/to/certbot-auto renew --quiet --no-self-upgrade
```

可以通过下面验证下

```
./path/to/certbot-auto renew --dry-run
```

更新之后需要重启下nginx

```
service nginx restart
```


![https://hipo.cash/ 手机版](https://image.hicc.pro/image/1/f3/c3af92470cb11b07267da2bcf1948.JPG)

----
因为hicc.me中图片自用用的是七牛http链接，替换稍有点麻烦，hicc.me只能稍后升级到https了～～



解决CloudKit在Electron中无法登录的问题

![cloudkit-auth-window](https://image.hicc.pro/image/e/13/27c4bebd1a705f93843be6368e762.png)


最近CloudKit Web端授权页面更新后中使用了CMD模块化的东西，因此会检查`require`是否存在，本意是存在的话就会按照CMD的方式加载js模块，但是Electron中默认通过`require`来加载electron模块或者`npm`模块，这样问题就来了，**Electron中的Cloudkit授权页面就会报错！**

解决方案也简单，如果你的页面中不需要使用electron提供的node能力，自然**解决方案就是启动主窗口时候禁用node能力即可，这样通过window.open()之后的窗口也会禁用。**

```
//在mian.js中
const BrowserWindow = electron.BrowserWindow
mainWindow = new BrowserWindow({
    width: 1200, 
    height: 800,
    webPreferences: {
      nodeIntegration: true//这里配置禁用node使用
    }
  })
```

当然一般情况下还是需要使用electron所提供的node能力，这样就不能在`main.js`中禁用全部窗口的node能力，因此就需要单独设置。

至于**CloudKit js授权的案例中，单独关闭CloudKit Web端授权页面中node能力即可**。

```
//修改https://cdn.apple-cloudkit.com/ck/2/cloudkit.js中window.open方法第三个参数增加nodeIntegration=0

window.open(a, "", "nodeIntegration=0,width=" + b + ", height=" + c)

```

升级Ghost到0.9.0

![三峡瀑布](https://image.hicc.pro/hicc_me-1582630246_IMG_3418.JPG)

之前blog所使用的是0.5.7的Ghost，最近又时间就顺手升级了下。

根据[官方文档](http://support.ghost.org/how-to-upgrade/)先升级到了0.7.1版本。

本来想先在本地测试的，结果估计是Mac node版本过高无法成功安装所需的node模块，一咬牙直接服务端升级，居然成功了，此刻就是ghost 0.7.1版本。


随后在0.7.1版本上升级到了最新版本(写此文时是0.9.0)。

值得注意的是替换完文件，`npm install --production`之后最好来一次`nam start --production`这个时候Ghost会做些版本升级。

![](https://image.hicc.pro/hicc_me-1209808234_ghost-upgrade.png)

## 七牛插件

还是使用了之前0.5.7版的[七牛插件](http://www.ghostchina.com)：

```
nam install qiniu --production
```

在`config.js`文件

```
config = {
    production: {
        storage: {  
           provider: 'qiniu',
           bucketname: 'xxx',
           ACCESS_KEY: 'xxx',
           SECRET_KEY: 'xxx',
           root: 'xxx',
           prefix: 'xxx'
        }
    }
}
```

替换`core/server/storage/index.js`文件为：

```
var errors  = require('../errors'),
    storage = {};

var config  = require('../config');

function getStorage(storageChoice) {
    // TODO: this is where the check for storage apps should go
    // Local file system is the default.  Fow now that is all we support.
    // storageChoice = 'local-file-store';
    storageChoice = (config.storage && config.storage.provider) || 'local-file-store';  

    if (storage[storageChoice]) {
        return storage[storageChoice];
    }

    try {
        // TODO: determine if storage has all the necessary methods.
        storage[storageChoice] = require('./' + storageChoice);
    } catch (e) {
        errors.logError(e);
    }

    // Instantiate and cache the storage module instance.
    storage[storageChoice] = new storage[storageChoice]();

    return storage[storageChoice];
}

module.exports.getStorage = getStorage;
```

在`core/server/storage/`目录下增加`qiniu.js`文件
```
// Qiniu CDN support
// Copyright: GhostChina.com

var _       = require('lodash'),
    express = require('express'),
    fs      = require('fs-extra'),
    path    = require('path'),
    util    = require('util'),
    utils   = require('../utils'),
    Promise = require('bluebird'),
    config = require('../config'),
    errors  = require('../errors'),
    baseStore   = require('./base'),
    crypto = require('crypto'),

    qiniu        = require('qiniu'),
    qiniuConfig  = config.storage,
    
    qiniuStore;

    qiniu.conf.ACCESS_KEY = qiniuConfig.ACCESS_KEY;
    qiniu.conf.SECRET_KEY = qiniuConfig.SECRET_KEY;
    qiniu.conf.USER_AGENT = 'Ghost ' + config.ghostVersion;

var putPolicy = new qiniu.rs.PutPolicy(qiniuConfig.bucketname);

function QiniuStore () {
}

util.inherits(QiniuStore, baseStore);

QiniuStore.prototype.save = function (image) {
    var uptoken = putPolicy.token();
    var md5sum = crypto.createHash('md5'),
        ext = path.extname(image.name),
        targetDirRoot = qiniuConfig.root,
        targetFilename,
        key,
        extra = new qiniu.io.PutExtra();

    var savedpath = path.join(config.paths.imagesPath, image.name);

    return Promise.promisify(fs.copy)(image.path, savedpath).then(function(){
        return Promise.promisify(fs.readFile)(savedpath);
    }).then(function(data){
        md5 = md5sum.update(data).digest('hex');

        targetFilename = path.join(targetDirRoot, md5.replace(/^(\w{1})(\w{2})(\w+)$/, '$1/$2/$3')) + ext;
        targetFilename = targetFilename.replace(/\\/g, '/');
        key = targetFilename.replace(/^\//, '');

        return Promise.promisify(qiniu.io.put)(uptoken, key, data, extra);
    }).then(function() {
        // Remove temp file
        return Promise.promisify(fs.unlink)(savedpath);
    }).then(function () {
        // prefix + targetFilename
        var fullUrl = qiniuConfig.prefix + targetFilename;
        return fullUrl;
    }).catch(function (e) {
        errors.logError(e);
        return Promise.reject(e);
    });
};

QiniuStore.prototype.exists = function (filename) {
    return new Promise(function (resolve) {
        fs.exists(filename, function (exists) {
            resolve(exists);
        });
    });
};

QiniuStore.prototype.serve = function (){
    // For some reason send divides the max age number by 1000
    return express['static'](config.paths.imagesPath, {maxAge: utils.ONE_YEAR_MS});
};

module.exports = QiniuStore;

```
## Disqus,统计代码安装

最后自然不要遗漏了，disqus，和统计代码的安装😄，可以参考我之前[从wordpress迁移的文章](/wordpress-to-ghost/)

![](https://image.hicc.pro/image/c/42/9feeada746a54ed33da9531fa67e5.jpg)

3张照片

![](https://image.hicc.pro/image/4/ac/353863382ebbd778dc963e57665c9.jpg)

![](https://image.hicc.pro/image/f/03/95a31e3474a0840878f864990e70e.JPG)

![](https://image.hicc.pro/image/5/5d/82cf932761858372a2d680964dd3c.JPG)

Electron打包以及使用CloudKit做自动更新服务


> Build cross platform desktop apps with JavaScript, HTML, and CSS 

现在电脑升级， [Electron](http://electron.atom.io) 算是一种不错的跨平台解决方案，[Hipo](http://hipo.cash)使用CloudKit做同步服务，Cloudkit支持js，以及server to server调用，因此决定使用electron开发桌面端。开发过程不必多说，多是前端代码的编写加一些平台API的调用。

## Electron打包
Electron代码编写之后便是打包， [官网](http://electron.atom.io/docs/tutorial/application-distribution/) 介绍了几种方法，用了 [electron-packager](https://github.com/electron-userland/electron-packager)

主要就是两个命令:

安装electron-packager

```
# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g
```

以及打包

```
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
```

**package.json**中配置都填写后(不要漏了**productName** ,  **author**和**description**后续自动更新会需要)，打包命令可以这样写：

```
electron-packager ./ --all 
```

打包Mac版就可以这样
```
electron-packager ./ --platform=darwin --arch=x64 
```

打包完会在项目根目录下生成打包文件的目录。

## Electron自动更新
electron依赖Squirrel做自动更新，Mac版electron已经内置[Squirrel.Mac](https://github.com/Squirrel/Squirrel.Mac) 

### Mac 版本签名

开发过程中发现需要签名(可能是个例，其他教程中说不需要)，所以在打包的时候需要附带签名信息，具体的可以参考 [electron-osx-sign](https://github.com/electron-userland/electron-osx-sign/wiki/1.-Getting-Started)

Mac App Store版不能有自动更新，非Mac App Store版打包命令

```
electron-packager ./ --platform=darwin --arch=x64 --app-bundle-id="Developer ID Application" --osx-sign
```

### 自动更新服务端

自动更新需要服务端支持，核心就是请求服务端判断是否有新版本

```
GET /mac/lastes?version=[verson]
```

**如果无新版本返回204即可，如果有新版需要返回200的json**(必须要url字段，提供app的zip包)：

```
{
	url:'http://site.com/app.zip'
}
```

以上的介绍在网上有更加详尽的说明。

因为Hipo本身引入了CloudKit做数据多设备同步，Cloudkit也支持web，和server端请求public database中的数据，再加上CloudKit近乎奢侈的额度，还不错的大文件(electron打包后的app有200～300M)上传下载速度(**大家可以通过[Hipo cloudkit](http://hipo.cash/cloudkit)测试**😄)，因此就考虑使用CloudKit。

设计的方案是web端使用Cloudkit js做app zip包上传，对应的上传表单大致这样：

![cloudkit file upload form.png](https://image.hicc.pro/image/3/c7/6f6f985c1b79ed889d26405592fe8.png)

对应在后端则使用Cloudkit server to server授权（ 根据 [CloudKit server to server 教程](https://developer.apple.com/library/ios/documentation/DataManagement/Conceptual/CloutKitWebServicesReference/SettingUpWebServices/SettingUpWebServices.html#//apple_ref/doc/uid/TP40015240-CH24-SW6) 配置即可），根据electron app请求

```
http://hipo.cash/cloudkit/queryApp?ownerId=_9568f9dfe5a9aad6053f6e05be9b1680&appId=52F035A9-3E92-4709-BB36-D4B1F15763DD&platform=mac&version=0.1.0&type=autoUpdate& channel=production&appName=hipo

# 上述就是自动更新所需的链接了，特别一点是ownerId的意义在于：CloudKit publicdatabase 大家都可以上传文件，默认只有自己可以修改自己创建的记录，所以使用ownerId只获取自己上传的记录，这样反而可以将这做成一个不错的对外服务。
```

服务端根据参数查询Cloudkit Public database之后返回结果即可。

这样自己服务端无需数据库，App zip文件也无需使用其他CDN存储，简单高效低成本😄

Cloudkit网上教程相对较少，因此

1. **最好前后端都使用官方提供的CloudKit.js，这样会少走很多弯路**,至于server 端代码，可以参考官网实例代码： [Node/node-client-s2s/index.js](https://developer.apple.com/library/ios/samplecode/CloudAtlas/Listings/Node_node_client_s2s_index_js.html#//apple_ref/doc/uid/TP40014599-Node_node_client_s2s_index_js-DontLinkElementID_22)
2. 如果你使用了苹果的Cloudkit.js文件，需要注意的是**如果你的node版本过低，可能没有原生promise，因此需要这样配置`fetch.Promise = require('es6-promise').Promise`**

最后electron官网，[autoUpdater - Electron](http://electron.atom.io/docs/api/auto-updater/)也提供了几种方法，包括依赖Github和自荐服务的，大家感兴趣的可以自行研究。

 -----

文章多次修订后，决定开放[http://hipo.cash/cloudkit/](http://hipo.cash/cloudkit/)为一个免费Electron自动更新服务，上述API，所需的几个参数都可以在表格中列出，方便获取。

- [http://hipo.cash/cloudkit/](http://hipo.cash/cloudkit/)中上传app
- [http://hipo.cash/cloudkit/queryApp](http://hipo.cash/cloudkit/queryApp?ownerId=_9568f9dfe5a9aad6053f6e05be9b1680&appId=52F035A9-3E92-4709-BB36-D4B1F15763DD&platform=mac&version=0.1.0&type=autoUpdate& channel=production&appName=hipo)用于electron中查询。


--参考－－

- [https://medium.com](https://medium.com/@svilen/auto-updating-apps-for-windows-and-osx-using-electron-the-complete-guide-4aa7a50b904c#.a3sva9jei)
- [https://github.com](https://github.com/electron-userland/electron-osx-sign/wiki/1.-Getting-Started)

说剑

![说剑](https://image.hicc.pro/image/1/c3/6c7cf70f23801406eb02c89f853a5.PNG)
![说剑](https://image.hicc.pro/image/2/f2/a560967b63d244fc29296c9086439.PNG)
且不说游戏性如何，画面很喜欢，想起了《东邪西毒》
![东邪西毒](https://image.hicc.pro/image/9/15/4cf05309d13b856579294475daceb.jpg)



梅花开了

![梅花](https://image.hicc.pro/image/1/1a/79298c99f8a74aba0b71a87d1e298.JPG)
![梅花](https://image.hicc.pro/image/4/7f/36d376f1b5c46e3748e6f43ac661b.JPG)
![梅花](https://image.hicc.pro/image/a/5d/a2579a98296a870d05d28a4b55d8c.JPG)

2015

抬眼看去还有40分钟就要到2016年了。

好多未竟之事，好多蹉跎光阴。

待明年……

![](https://image.hicc.pro/image/c/98/7d76b79f514ead85096c0a429d71b.jpg)

---

外婆走后，总想着能够抒发些什么，下笔却一个字也冒不出来，程序的严谨，设计的感性，甚至似乎悲伤也被北方的蓝天冲淡得几不可闻……

时间就这样咣当咣当的走着，一眨眼毕业好几年了。

Hipo 2.0 Swift重写，限时免费！限时免费！限时免费！

![Hipo 2.0.0 ](https://image.hicc.pro/image/c/c8/dcf4a9a6b2a524027f360c48964df.jpg)




2015年10月16日[Hipo 2.0.0](http://hipo.cash)正式上线App Store，似乎倏忽间就将这大半年的躁郁一扫而光。上线全新版本，~~**限时免费**，**限时免费**，**限时免费**~~（已经结束限免）^_^

<a href="https://itunes.apple.com/cn/app/hipo-zhuan-zhu-zhi-chu-yu/id910176383?mt=8" alt="An accounting APP which focus on budget balance." ><img src="http://app.hicc.me/img/btn.png" _style="width:160px;"/></a>

####Hipo 1.X

[Hipo 1.X](/hipo/)使用当时移动Js框架新秀ionic开发，虽说是phoneGap应用，但是做出来发现体验到也不差，使用Js开发移动应用，快速，成本低，门槛低，Hipo上线初就获得了App Store首页优秀App的推荐，这也直接决定了我走上了独立开发这条不归路-_-#

至今仍然喜欢AngularJs，ionic，**仍然相信在App初期多数情况下使用Js开发是个很好的选择。**

####iOS原生开发学习

在变成果粉的同时，Apple推出了Swift语言，能够看得懂的语法，满足了我尝鲜的欲望，加之当时考虑实现Hipo数据云端保存，跨设备同步的功能，索性决定使用swift重写Hipo，于是：

- 看国内翻译的swift语法文档
- 继续看其他版本的swift语法资料
- ……如此重复纠结……
- 看完swift语法，发现对iOS开发还是一无所知，买了[bitfountain](https://fedora.bitfountain.io/)出的iOS 8，swift视频教程，教程属于入门教程，然后用iPad看视频，电脑开着Xcode，Google联系，倒也跟得上，iOS原生开发逐渐入门。
- 看完bitfountain视频，发现对着空屏幕还是无从下手，又发现iTunes出了斯坦福白胡子老头iOS swift教程，又开始进入左边iPad，右边电脑模式……
- 一边看斯坦福教程，一边也用swift重写Hipo，至此算是具备了写iOS原生App的基础元知识。
- YouTube上有不少高质量视频教程。
- Apple iOS API官方文档是个好东西，先看别入门教程，代码阶段常开iOS API官方文档。
- Xcode playground是个好东西，可以快速练习Swift，新手用它来验证下代码最好不过了。

学习期间，看了不少教程，回过头来发现美剧刷的更多-_-#

####Hipo 2.0 UI重新设计

Hipo 1.X的问题是
- 将预算/统计以及其他入口放倒了右侧的滑动菜单中，"Out of Sight, Out of Mind"，有限的几次使用中，根本不会用到这些地方，
- 首页也似乎有点单调，
- 对于历史数据的查看路径过长，
- 最后iOS自带键盘输入金额太过麻烦。

因此Hipo 2.0.0：

- 首页集合每月花销，预算/花费，新建类入口都在首页；
- 数据按照月为单位，一月一屏，历史展示年的列表一页足以，相互很方便的切换。
- 全新设计的记账表单页面，自定义数字键盘。

学习iOS开发过程中也会用纸币简单画画2.0的原型，也参考了学习了Google Design，具体UI，使用sKetch，配合sKetch Mirror，几番修改，快速搞定。

动效部分，因为进度问题只是脑子中过了下。

####Hipo 2.0核心功能实现

Hipo数据方面，本地CoreData存储，使用增量同步策略。

- 本地选择CoreData纯粹是因为不太喜欢sql的方式，而且想靠近点Apple官方推荐方式，以便后期能够不太费力的使用Apple提供的新东西。至于具体CoreData操作还是借助了MagicalRecord，在此推荐。
- Hipo 1.x中数据存储在Sqlite中，为了迁移到CoreData，之前选了个Swift的Sql库，但是Swift升级到2之后，发现几个有名的Swift Sql库都没能第一时间升级到Swift 2，最后只得使用了OC语言的FMDB。
- Swift 语法从1到2，本以为会很头疼，结果Xcode自动转换，一次成功！
- 在数据网络存储，多设备同步的实现方案的选择中纠结了很久，初期的考虑使用类似LeanCloud的方式，但是后来发现似乎LeanCloud方案无法仅依靠客户端实现增量同步(可能是我没想到如何做)，需要依赖云端代码，所需的技术栈略长。
- 在开始代码不久，才惊喜发现**Apple Cloudkit能够仅靠客户端实现增量同步**，免费额度很高，用户无需登录注册，相对而言开发者更加不用关心数据安全等，决定转而使用Cloudkit实现Hipo增量同步，**之后的Demo测试发现CloudKit似乎比外界认为的要好**，在此占个坑，后续打算写写CloudKit的文章，安利安利CloudKit。
- Hipo将用户数据存储到了用户自己iCloud账户下的私有数据库，用户将数据完全隔离，即使我也没办法看到用户记账数据。
- 之前准备将同步做为2.0.0内购，后来听取建议，**同步完全免费！同步完全免费！同步完全免费！**

####Hipo 2.0 UI布局测试

- 因为有HTML，CSS相关基础，Hipo使用Storyboard布局，个别地方代码布局，虽说繁琐倒也轻车熟路。
- UI只是参考一点Google Design，虽说挺喜欢它的东校，但是在iOS实现相对复杂只能作罢。
- 因为进度问题，iPad布局基本还是按照iPhone思路，后续可以考虑优化iPad布局。
- Hipo中引入了腾讯Bugly，Bug跟踪平台，自动上传符号表比较省事。希望能够尽可能减少Hipo bug。
- 测试使用Apple TestFlight，每次上传到iTunes Connect想死。
- 最后提交审核居然遇到Apple iTunes Connect bug，大半夜改半天plist配置才提交成功。
- 周日提交周五审核通过～～

最后在此感谢LifeHacker群内各位大拿以及公司iOS大神的帮助🙏

####Hipo 2.X TODO

- 同步是个相对复杂的东西，得继续大力优化同步。
- 可能会有**Apple Watch版本** ？
- 可能会有**iOS Widget** ？
- 可能会有Web版([hipo.cash](http://hipo.cash)域名都准备好了^_^)。
- 很大可能会有家庭账本。

####……

个人开发就像独行沙漠，间或的几点绿洲便足以让我继续前行。

<a href="https://itunes.apple.com/cn/app/hipo-zhuan-zhu-zhi-chu-yu/id910176383?mt=8" alt="An accounting APP which focus on budget balance." ><img src="http://app.hicc.me/img/btn.png" _style="width:160px;"/></a>

![Hipo AppStore qrcode](https://image.hicc.pro/hicc_me531079820_1445338395Hipo.png)