前端相关

react storybook使用typescript

在前面的文章有介绍在storybook中使用antd。
之前开发js是使用的flow来作类型检查，最近想尝试一下typescript。
如果是从头创建一个空的typescript项目则相对就比较简单，但是现在我们是需要将之前的create-react-app项目迁移到typescript。

在create-react-app中添加typescript

参考 https://facebook.github.io/create-react-app/docs/adding-typescript
react-scripts从2.1.0版本开始就支持typescript了，这里我们先将项目的react-scripts依赖升级到最新版本：

1
yarn add --exact react-scripts@2.1.8

然后再添加typescript依赖：

1
yarn add typescript @types/node @types/react @types/react-dom @types/jest

然后将 src/index.js 更名为 src/index.tsx
接着创建 tsconfig.json 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src/**/*"
  ]
}

在storybook中添加typescript

参考 https://storybook.js.org/docs/configurations/typescript-config/
同样也先将storybook升级到最新版：

1
yarn add --dev --exact @storybook/addons@5.0.1 @storybook/react@5.0.1

然后再添加依赖：
1
yarn add --dev awesome-typescript-loader @types/storybook__react @storybook/addon-info react-docgen-typescript-webpack-plugin ts-jest

接着修改webpack配置，对应.storybook/webpack.config.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const path = require("path");
const antdTheme = {
  '@primary-color': '#846bc1',
}

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.less$/,
    use: [{
      loader: "style-loader"
    }, {
      loader: "css-loader"
    }, {
      loader: "less-loader",
      options: {
        modifyVars: antdTheme,    // 如果要自定义主题样式
        javascriptEnabled: true
      }
    }]
  });
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader'),
    options: { configFileName: path.resolve(__dirname, './tsconfig.json') }
  });
  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

以及babel配置，对应.storybook/babelrc.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
module.exports = function(api) {
  api.cache.forever();
  return {
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false,
          "targets": {
            "browsers": [
              ">1%",
              "last 4 versions",
              "Firefox ESR",
              "not ie < 11"
            ]
          }
        }
      ],
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  }
}

同时修改storybook配置.storybook/config.js，让其支持.tsx文件：
将之前的：

1
const req = require.context('../src/components', true, /\.stories\.js$/)

修改为：
1
const req = require.context('../src/components', true, /\.stories\.[jt]sx?$/)

最后再创建 .storybook/tsconfig.json 文件：

1
2
3
4
5
6
7
8
{
  "extends": "../tsconfig",
  "compilerOptions": {
    "jsx": "react",
    "isolatedModules": false,
    "noEmit": false
  }
}

至此一切都完成了。

运行storybook时若出现错误： Error: Cannot find module '@emotion/core/package.json'，则手动安装一下： yarn add --dev @emotion/core

Linux栏目

在树莓派3上运行Android6

最近需要在 android 上进行测试，无奈在电脑上使用模拟器运行速度太慢了。
正好我还有几个闲置的树莓派3设备，于是就尝试在树莓派上运行android看看。

刻录系统到SD卡

1.先下载 android6 的树莓派镜像： https://pan.baidu.com/s/1YHrmjN3be7UaLAdBJr-YhQ

2.下载完成后解压，然后开始执行写入操作： sudo dd if=andrpi3-20160626.img of=/dev/disk3 bs=4096000

这里我用的读卡器，被识别为 disk3。文件比较大，请耐心等待。我写入差不多花了一个小时的时间。

运行系统

将SD卡插回到树莓派中，并接上鼠标、键盘、显示器，然后开机。
这里稍微注意一下，树莓派3需要 5V/2A 的电源才能工作。
刚开始我试了一下开不了机，结果才发现是电源电压不足。

运行效果如图：

连接上网络之后使用 adb 进行操作： adb connect 192.168.0.101
这里我的树莓派的ip为 192.168.0.101

前端相关

在storybook中使用antd

最近一个 react 的项目有用到了 antd 这个 ui 库。这里作个笔记记录一下如何在 storybook 中显示 antd 的组件。

项目是使用 create-react-app 创建的，项目目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
├── .storybook/
├── README.md
├── antd-theme.js
├── node_modules
├── package.json
├── public
└── src
    ├── App.js
    ├── components
    │   ├── button.js
    │   └── button.stories.js
    ├── index.js
    └── registerServiceWorker.js

这里创建了一个 button 组件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// src/components/button.js
import React, { Component, Fragment } from 'react';
import { Button } from 'antd';

class ButtonGhost extends Component {
  render() { 
    return (
      <Fragment>
        <h3 className="ex-title">Ghost Button</h3>
        <div style={{ background: 'rgb(47, 45, 165)', padding: '26px 16px 16px' }}>
          <Button type="primary">Primary</Button>
          <Button className="ml20" ghost>Default</Button>
          <Button className="ml20" type="dashed" ghost>Dashed</Button>
          <Button className="ml20" type="danger" ghost>danger</Button>
        </div>
      </Fragment>
    );
  }
}
 
export default ButtonGhost;

对应的 storybook 案例如下：

1
2
3
4
5
6
7
// src/components/button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './button';

storiesOf('General', module)
  .add('Button', () => <Button />)

然后 storybook 配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
// .storybook/config.js
import React from 'react'
import { configure } from '@storybook/react'
import { ThemeProvider  } from 'styled-components'

const req = require.context('../src/components', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module)

然后运行 storybook ： start-storybook -p 6006 -c .storybook，效果如下：

这是由于 antd 的 css 没有加载，因此所有按钮的样式都没有。
参考 https://ant.design/docs/react/use-with-create-react-app-cn 的说明，修改 babel 和 webpack 的配置。
参考 https://storybook.js.org/configurations/custom-webpack-config 的说明，修改 storybook 的 webpack 配置。

创建文件 .storybook/.babelrc：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            ">1%",
            "last 4 versions",
            "Firefox ESR",
            "not ie < 11"
          ]
        }
      }
    ],
    "react",
    "stage-3"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

创建文件 .storybook/webpack.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader",
          options: {
            //modifyVars: antdTheme,    // 如果要自定义主题样式
            javascriptEnabled: true
          }
        }]
      }
    ]
  }
};

然后在 .storybook/config.js 文件添加 import 'antd/dist/antd.less'; 。
最后的效果如下：

Python栏目

使用python编写游戏修改器

最近比较怀旧，在玩一个比较老的PC游戏。由于游戏难度太高了，于是就打算自己写一个修改器。
通过查阅资料，在 Windows 下的修改器主要需要用到四个函数：OpenProcess, CloseHandle, WriteProcessMemory, ReadProcessMemory。

这几个都是C++的函数，在Python中可以通过ctypes来直接调用。
然后接下来介绍一下基本的操作流程。

1.通过 任务管理器 或者其他方式得到需要修改的游戏进程。然后通过 OpenProcess 注入该进程。

1
2
3
4
5
6
7
8
9
PROCESS_QUERY_INFORMATION = 0x0400
PROCESS_VM_OPERATION = 0x0008
PROCESS_VM_READ = 0x0010
PROCESS_VM_WRITE = 0x0020

hProcess = ctypes.windll.kernel32.OpenProcess(
    PROCESS_QUERY_INFORMATION|PROCESS_VM_READ|PROCESS_VM_OPERATION|PROCESS_VM_WRITE,
    False, pid
)

2.然后可以通过 ReadProcessMemory 来扫描游戏的内存找到需要修改的数值项的内存地址。

1
2
3
4
5
6
7
8
9
buf = ctypes.c_int32()
nread = ctypes.c_size_t()
ret = ctypes.windll.kernel32.ReadProcessMemory(
    hProcess,
    base_addr,
    ctypes.byref(buf),
    ctypes.sizeof(buf),
    ctypes.byref(nread)
)

这里是读取 base_addr 地址之后的4个字节的内容。可以通过循环来遍历游戏的内存，找到需要修改的地址。
当然，为了方便也可以直接使用 Cheat Engine 之类的软件来查找，然后把找到的内存地址记录下来即可。

3.得到需要修改的内存地址之后，就可以 WriteProcessMemory 来修改该地址保存的值。

1
2
3
4
5
6
7
8
9
buf = ctypes.c_int32(value)
nread = ctypes.c_size_t()
ret = ctypes.windll.kernel32.WriteProcessMemory(
  hProcess,
  base_addr,
  ctypes.byref(buf),
  ctypes.sizeof(buf),
  ctypes.byref(nwrite)
)

这里是往 base_addr 这个地址写入值为 value 的4字节内容。

4.最后如果不再需要修改了的话，就通过 CloseHandle 关闭该注入操作。

1
ctypes.windll.kernel32.CloseHandle(hProcess)

以上都是针对 Windows 系统的，对于 Linux 系统的话 可以通过 ptrace (http://man7.org/linux/man-pages/man2/ptrace.2.html) 操作实现。由于我没有 Linux 的游戏就没有研究了。

上面修改器的完整源代码，如有需要可通过以下链接获取：
https://github.com/wusuopu/cheat_engine_caesar3

Python栏目

使用pytest测试flask应用

python 本身就有 unittest 单元测试框架，但是觉得它并不是很好用，我更倾向于使用 pytest 。

下面通过一个例子来介绍如何使用 pytest 对 flask 应用进行单元测试。

首先新建一个 flask 应用，并针对根路径创建一条路由。代码如下：

1
2
3
4
5
6
# server.py
app = flask.Flask(__name__)

@app.route('/')
def home():
    return 'ok'

然后针对首页编写单元测试，代码如下：

1
2
3
4
5
6
# tests/test_app.py

def test_home_page(client):
    rv = client.get('/')
    assert rv.status_code == 200
    assert rv.data == b'ok'

然后执行命令运行该测试用例： pytest -s tests/test_app.py

在 pytest 中编写测试用例就只需要新建一个以 test_ 开头的函数即可。

以上是针对flask路由作的最基本测试。接下来编写一个新的路由，该页面只有用户登录之后才能访问。代码如下：

1
2
3
4
5
6
# server.py
@app.route('/member')
@flask_security.decorators.login_required
def member():
    user = flask_security.core.current_user
    return str(user.id)

要对该路由进行测试，则需要先创建一个用户。

1
2
3
4
5
6
7
8
9
# tests/test_app.py
def setup_module(module):
    App.testing = True
    fixture.setup()


def teardown_module(module):
    """
    """

上面的 setup_module 和 teardown_module 函数分别是在所有的测试用例执行之前与执行之后执行。在这里我们通过 setup_module 在执行测试之前先创建一个用户。然后再创建一个 pytest 的 fixture:
1
2
3
4
5
6
7
8
# tests/conftest.py

@pytest.fixture
def auth_client(client):
    with client.session_transaction() as sess:
        sess['user_id'] = str(fixture.users[0].id)

    yield client

这里创建了一个 auth_client fixture，之后所有以 auth_client 发起的请求都是登录状态的。

最后再针对 /member 路由编写两个测试用例，分别是未登录状态与登录状态下的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
def test_member_page_without_login(client):
    """
    没有登录则跳转到登录页面
    """
    rv = client.get('/member')
    assert rv.headers['Location'] == 'http://localhost/login?next=%2Fmember'
    assert rv.status_code == 302


def test_member_page_with_login(auth_client):
    """
    已经登录则返回当前用户id
    """
    rv = auth_client.get('/member')
    assert rv.status_code == 200
    assert rv.data.decode('utf8') == str(fixture.users[0].id)

以上就是一个简单的 flask 应用了。但是有时一个稍微复杂一点的应用会用到一些第三方的api。这时针对这种情况编写测试用例时就需要用到 mock 功能了。再编写一个新的路由页面：

1
2
3
4
5
6
7
8
# server.py

@app.route('/movies')
def movies():
    data = utils.fetch_movies()
    if not data:
        return '', 500
    return flask.jsonify(data)

1
2
3
4
5
6
7
8
9
# utils.py

def fetch_movies():
    try:
        url = 'http://api.douban.com/v2/movie/top250?start=0&count=1'
        res = requests.get(url, timeout=5)
        return res.json()
    except Exception as e:
        return {}

请求该路由会返回豆瓣top250的电影信息。然后再编写两个测试用例分别模拟api调用成功与失败的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# tests/test_app.py
def test_movies_api(client):
    """
    调用豆瓣api成功的情况
    """
    fetch_movies_patch = mock.patch('utils.fetch_movies')

    func = fetch_movies_patch.start()
    func.return_value = {'start': 0, 'count': 0, 'subjects': []}

    rv = client.get('/movies')
    assert rv.status_code == 200
    assert func.called

    fetch_movies_patch.stop()


def test_movies_api_with_error(client):
    """
    调用豆瓣api出错的情况
    """
    fetch_movies_patch = mock.patch('utils.fetch_movies')

    func = fetch_movies_patch.start()
    func.return_value = None

    rv = client.get('/movies')
    assert rv.status_code == 500
    assert func.called

    fetch_movies_patch.stop()

这里使用 python 的 mock 模块来模拟让某个函数返回固定的结果。

完整的代码请访问： https://github.com/wusuopu/flask-test-example

Python栏目

HAProxy+Nginx+gunicorn获取真实ip

之前在部署在 nginx + uwsgi 应用时都是通过如下方法来获取真实的客户端ip的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
upstream app_server {
    server unix:///tmp/gunicorn.sock fail_timeout=0;
}

server {
    listen       80;
    server_name  localhost;
    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        proxy_pass   http://app_server;
    }
}

这样在 uwsgi 的应用程序中只需要读取 http headers 中的 X-Forwarded-For 字段即可。

但是最近由于运维架构的是采用 haproxy + nginx + uwsgi 是形式，导致了在 uwsgi 应用程序中获取到的 ip 都是 haproxy 的。
为了要获取到真实的ip地址，需要由 haproxy 将 ip 传给 nginx，再由 nginx 传给 uwsgi。
在网上搜索了半天 haproxy 的相关配置，感觉太复杂了。因此还是决定从 nginx 入手。

经过实验将 nginx 的配置改为如下即可：

1
2
3
proxy_set_header X-Forwarded-For $http_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;

在Docker中运行X11程序

如果是Linux系统的话，相对比较方便。先构建一个带gui各应的docker image，然后将
本机的X11 sock挂载到container内，
docker run -ti --rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix:/tmp/.X11-unix chrome

如果是mac OS系统的话，相对麻烦一些。

1.安装所需的软件：

1
2
brew install socat
brew cask install xquartz

2.依次运行刚刚安装的两个程序：

1
2
socat TCP-LISTEN:6000,reuseaddr,fork UNIX-CLIENT:\"$DISPLAY\"
open -a XQuartz

3.设置X11， XQuartz -> Preference -> Security -> Allow connections from network clients

4.docker run --rm -e DISPLAY=ifconfig | grep “inet\ “ | tail -1 | cut -d “ “ -f 2:0 chrome

对于已经启动了的container，可以在container内执行命令 export DISPLAY=<ip>:0 来设置 DISPLAY 从而使用本机的 X11 服务。

倘若当前你的 mac OS 没有连接网络，那么可能就没有ip地址供container内访问。
此时也许可以执行命令： sudo ifconfig lo0 alias 10.200.10.1/24 来手动设置一个ip。
然后在container内再设置 export DISPLAY=10.200.10.1:0 。

网络日志

由octpress迁移到了hexo

这两天将博客的系统由原来的ruby octpress 迁移到了 nodejs hexo。

决定要进行迁移主要是两个原因：
1.使用 octpress 来生成页面感觉越来越慢了；
2.octpress 的页面样式表不知怎么的突然就坏掉了，整个页面显示都不正常了。这个是最主要的原因。

迁移的工作还算是比较顺利，只是体验了一下 hexo 感觉 bug 也不少。只得自己写些 patch，然后将就着用吧。

嵌入式栏目

通过串口连接raspberry pi

最近在玩树莓派，有时没有网络，也没有显示器，此时如果想要连接树莓派执行一些操作的话会很麻烦。
因为之前玩过 ARM 的开发板编程，因此想能不能通过串口登录到 pi 呢。于是网上查了一下，还真的可以哦。
以下就作为备忘笔记记录一下操作过程。

1.首先需要一根 USB 转串口的线，如果没有的话可以去某宝上买一根吧，反正也不贵。我选的是 PL2303。
再根据系统以及芯片的不同而下载安装不同的驱动程序。 对于 mac OS 用户执行命令： ls /dev/ | grep tty.usb ，
如果驱动都安装正确的话应该是会有输出结果的。

2.然后在 pi 的系统上启用 serial。我安装的是 debian 系统，执行命令： sudo raspi-config ，
选择 advanced options -> serial 进行启用 serial。

3.串口连接

对于 Raspberry Pi3 的 GPIO 引脚如下：
pi3_gpio

串口线与 pi 的连接方式为： GND -> GND, RXD -> TXD, TXD -> RXD， 如图：
pi3-board

最后在电脑上使用串口连接软件进行连接，对应的串口设置为 115200 8N1，如图：
raspberry-pi-serial

参考资料： http://elinux.org/RPi_Serial_Connection

编程开发

使用CodePush对ReactNative进行热更新

CodePush是微软提供的可用于对 Cordova 和 ReactNative 进行代码热更新的库。
在其官方的文档中已经写得很详细了，按照其说明来配置即可。我这里只是对在使用过程中遇到的一些坑作为总结。

创建应用

首先注册一个账号并创建一个 CodePush 的应用：

1
2
3
npm install -g code-push-cli
code-push register
code-push app add <appName>

安装配置CodePush

按照说明 https://github.com/Microsoft/react-native-code-push#getting-started，使用 rnpm 进行安装即可：

1
2
npm install --save react-native-code-push
rnpm link react-native-code-push

安装完成之后还需要再进行一些配置，对于 iOS 需要将 AppDelegate.m 文件中的 jsCodeLocation 修改为： jsCodeLocation = [CodePush bundleURL];。
同时再在 Info.plist 文件中添加一项 CodePushDeploymentKey，其值为 CodePush 应用的 Deployment Key。

对于 android 需要在 MainActivity 类的 getPackages 方法中设置 Deployment Key。同时根据 ReactNative 的版本不同而使用不同的方法来设置 getJSBundleFile，
参考： https://github.com/Microsoft/react-native-code-push#android-setup。

程序更新

在安装、配置完成之后，即可以使用CodePush进行程序的更新操作了。
根据官方的说明只需要调用 CodePush.sync() 即可完成自动更新操作。
我针对自己的情况再进行封装了一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function syncCodePush() {
  NetInfo.fetch().done(
    (reach) => {
      // 检查网络环境
      if (_.includes(['wifi', 'WIFI', 'VPN'], reach)) {
        CodePush.sync().done(
          () => {
            // 检查更新成功
          },
          (err) => {
            // 更新失败
          }
        );
      }
    }
  );
}

以上函数是保证只有在wifi的网络环境下才进行更新操作，同时由于 CodePush.sync() 返回的是一个 Promise 对象，
在这里我就遇到了由于网络异常而下载出错，从而导致 app 崩溃。因此需要处理 reject 的情况。

有时在程序更新之后的首次运行时可能会需要作一些迁移的操作，这里可以使用 getUpdateMetadata 来检查程序是不是首次运行。

1
2
3
4
5
6
7
Codepush.getUpdateMetadata().then(
  (update) => {
    if (update && update.isFirstRun) {
      // 首次运行执行一些操作
    }
  }
).done( callback );

发布更新

在 app 发布安装包发布出去之后，已经有用户下载安装了。此时如果再有 js 代码更新或者图片文件的改动的话，可以使用 CodePush 进行发布。
进入 ReactNative 的项目根目录，使用 code-push 命令进行发布更新。例如：

1
code-push release-react DemoApp ios -m -d Staging --des "更新描述" -t "~2.0.0"

以上命令是发布一个紧急更新到 Staging ，只有 ios appp 的版本为 2.0~3.0 的才会下载该更新包。
由于是紧急更新，app在下载安装完成之后会自动重启应用该更新包。否则的话就需要用户下次手动启动app时该更新包才会生效。

在 CodePush 中针对 ios 和 android 可以共用一个应用，只是我个人感觉这样在管理 deployment history 时不太方便。
因此我通常会创建两个应用，例如： DemoApp-iOS、DemoApp-Android 这样的。

需要注意的是，由于 CodePush 的 server 是在国外，因此下载的速度会比较慢。

最后我自己使用 Electron + Vue.js 开发了一个 CodePush 的简易管理工具，https://github.com/wusuopu/code-push-gui 。
可以对 CodePush 的 app 跟 deployment 进行简单的管理。