Decorative image frame

你需要这么一款开源数据可视化工具助力数据跟踪分析

场景

文章开头,先做个小调查:平常工作中遇到需要追踪或者分析公司日常业务数据的时候【比如需要分析系统每日用户增长情况】,你们一般是使用怎么样的分析手段呢?大家可以先想想自己是怎么做的,这样的做法是否繁琐,有没有更好的方案。

在没遇到 Grafana 之前,遇到产品需要这个数据的时候,由于公司人力有限,没有开发人员开发数据平台,所以一般有几种处理方案:

  1. 第一种方案,如果本身 APP 端有接入一些第三方数据统计平台【友盟、Bugly】,则可以让产品直接在这些平台看数据,缺点是:这种平台的数据一般是指下载 APP 的,并非是真实的平台注册数
  2. 第二种方案,平台的精确的注册数据:每次写一下 Sql 语句按天分组直接从数据库导出产品需要时间内的用户注册情况,然后导出一个 Excel 表格给到产品,产品在做成可视化的折线图之类的来分析波动情况;
  3. 第三种方案,可能相对少一些重复工作,用 Python 脚本程序自动导出可视化结果图;

Grafana 登场

木有错,今天要介绍的主角是:Grafana,它是什么呢?Grafana 是一个通用的可视化 Go 编写的开源工具,通用的意思也就是说你可以添加各种数据源【不过得是目前支持的数据源,具体支持哪些数据源,后面会讲到】,安装部署也是非常非常的简单,基本是一条命令即可部署,以 mac 系统为例:

1
2
3
brew update
brew install grafana
brew services start grafana

是的,就是这么简单,经过三条命令,我们本地的系统已经部署好了,这时访问:http://127.0.0.1:3000即可访问到部署好的 grafana,默认账号密码是:admin/admin,进去之后我们可以像堆积木一样一步步增加我们业务的数据看板,支持各种形式的展示方式:表格、曲线、饼状图等。

我们先来一个图,看一下官方的 LiveDemo 数据图,一睹惊艳的展示方式【哈,惊不惊艳的不重要,重要的是实用】:
官方 LiveDemo

第一步:安装 Grafana

由于我的环境是 mac,所以这里只列出 mac 上通过 brew 的方式安装详情(其他系统安装可以参考官方给出的详细操作方式
):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
~ » brew install grafana
Updating Homebrew...
==> Downloading https://homebrew.bintray.com/bottles/grafana-6.3.3.mojave.bottle.tar.gz
Already downloaded: /Users/zhangdeyi/Library/Caches/Homebrew/downloads/2087dc91f087ca0d1314958797e3ef2696c575f081afb810393f74648d47942b--grafana-6.3.3.mojave.bottle.tar.gz
==> Pouring grafana-6.3.3.mojave.bottle.tar.gz
Warning: grafana dependency icu4c was built with a different C++ standard
library (libc++ from clang). This may cause problems at runtime.
==> Caveats
To have launchd start grafana now and restart at login:
brew services start grafana
Or, if you don't want/need a background service you can just run:
grafana-server --config=/usr/local/etc/grafana/grafana.ini --homepath /usr/local/share/grafana --packaging=brew cfg:default.paths.logs=/usr/local/var/log/grafana cfg:default.paths.data=/usr/local/var/lib/grafana cfg:default.paths.plugins=/usr/local/var/lib/grafana/plugins
==> Summary
🍺 /usr/local/Cellar/grafana/6.3.3: 3,635 files, 171.8MB

第二步:添加数据源

安装完之后,可以根据自己的实际情况,先添加自己业务的数据源,一般常用的数据源是 MySQL:
添加一个MySQL的数据源
初次安装只包含了这些数据源类型:
默认支持的数据源
当然也可以安装一些其他数据源的 plugins 来支持更多的:数据源

第三步: 新增我们的业务 Dashboard

有了数据源之后,就可以增加业务 Dashboard,入口:主页 –> ➕号 –> Create Dashboard,比如我把 Dashboard 命名成 MyCoreData,一个 Dashboard 可以由不同展示类型的 Panel 组成:
Panel 类型
平常我用得比较多的是 Graph,这个展示形式比较方便看出业务数据的波动情况:
Panel 操作菜单

点击操作菜单的 Edit 即可进入面板的编辑模式,这个模式可以对面板重命名,编写业务SQL,展示细节调整,编辑面板如下所示:
编辑面板

  • General tab 可以设置面板的标题信息、表述信息等;
  • Metrics tab 可以选择数据源,编写SQL 语句:有两种模式,一种是手动选操作,另外一种是直接编写 SQL 模式【推荐用这种模式】,点击 Show Help 可以查看提供的内置函数:
    内置的函数
    编写完 SQL 之后,展示形式是这样的(时间选择的是这个月的):
    Graph 展示形式
    这种展示形式已经大致能看出趋势,是否可以有更好的展示形式呢,答案是有的,点击 Legend tab 可以设置展示一些更加详细的形式,比如用 table 的形式,展示出 totalavgcurrent 这些值,最终效果如下所示:
    更加形象的展示
    当然还有其他更细节的设置,可以自行探索,其他的面板展示形式也可以自行探索;

    第五步:分配账号,并管理好不同账号的查看权限

    很棒!经过前面一步的:增加业务 Dashboard,接下来我们就可以分配账号给产品和Boss们,并根据不同的角色分配不同的 Dashboard 查看权限。

使用 admin 账号登录,可以分配不同的账号权限,入口:左边的设置按钮 –> Server Admin –> Users –> Add new user,
增加账号

具体 Dashboard 的权限设置入口:以管理员账号访问某个 Dashboard –> 右上角的设置按钮 –> Permissions 按钮 –> Add Permission 即可管理这个 Dashboard 的访问权限:
Dashboard 权限管理

最后想说的

好啦!当我们搭建好这样一个平台之后,我们不再需要重复之前的繁琐的导数据工作,而且产品和 Boss 也可以开心愉快的实时查询公司的各项业务数据,我们只需要专注在上面添砖加瓦:增加各个业务数据的细分 Dashboard。

今天的安利 Grafana 的文章先写到这里,写得相对比较糙,不少细节没怎么介绍,不过今天的主要目的也是为了给大家演示一下如何用这个平台来提升自己的工作效率,方便同事之间的数据沟通工作。

最后的最后,如果你所在的团队或者公司还没有一个比较完备的数据平台,真心推荐你们可以搭建探索一下(跟进业务数据,或者监控服务器运行情况都是可以的),如果在探索过程中有遇到什么问题,可以在文章的后面留言,我这边会尽量为大家解答。

好啦,祝大家周末愉快,准备出门吃小龙虾去啦~~~~

你知道 adb 的无线方式开发模式吗?让你摆脱 USB 线的束缚

开发场景

做Android开发的基本都知道,平常一般都是直接通过 USB 线或者 Type C线的方式连接,来完成日常的开发和调试,这种开发模式存在几个问题点,是一个极简主义者所不能忍受的

  • 电脑的 USB 口比较少,特别是 MAC 电脑,新版的就更是少得可怜;
  • 有时候有些功能模块比较耗电的时候,手机耗电的速度会比电脑充电的速度慢,比如开发直播间模块,要长时间开摄像头的情况下;
  • 开发好功能点,有时候要拿给同事看效果的时候也不太方便,隔着几个工位的时候,经常要拔掉线;

解决方案:开始使用 adb WiFi 调试模式

使用 adb WiFi 调试模式,通过以下几个步骤即可完成(开始这些配置之前先确保你的 adb 环境是配置好的):

  1. 确保 Android 手机和电脑连接的是同一局域网的 WiFi;
  2. 通过 USB 线连接 Android 手机;
  3. 设置手机侦听端口 5555 上的 TCP/IP 连接:

    1
    $ adb tcpip 5555

    ※ 注意: 如果有多个手机连接在电脑上,需要用 -s ‘serial_number’ 参数指定目标手机,比如:

    1
    $ adb -s '04157df4d349bf21' tcpip 5555

    在命令行中看到 TCP mode port: 5555 就表示监听成功:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ~/Downloads » adb tcpip 5555 
    restarting in TCP mode port: 5555
    ------------------------------------------------------------
    ~/Downloads » adb -s '04157df4d349bf21' tcpip 5555
    ------------------------------------------------------------
    ~/Downloads » adb -s '04157df4d349bf21' tcpip 5555
    ------------------------------------------------------------
    ~/Downloads » adb -s '04157df4d349bf21' tcpip 5555
    restarting in TCP mode port: 5555
    ------------------------------------------------------------
  4. 通过 connect 命令和 IP 地址以及端口号连接到目标手机,比如:

    1
    $ adb connect 192.168.1.146:5555

    当看到 connected to xxx:5555 的提示语就表示连接成功:

    1
    2
    3
    4
    ~/Downloads » adb connect 192.168.1.146:5555
    connected to 192.168.1.146:5555
    ------------------------------------------------------------
    ~/Downloads »
  5. 拔掉 USB 线,验证一下,看到如下提示语,那么恭喜你,已成功打开 adb WiFi 的大门,可以开始畅游你的无线调试之旅啦。

    1
    2
    3
    4
    5
    ~/Downloads » adb devices
    List of devices attached
    192.168.1.146:5555 device
    ------------------------------------------------------------
    ~/Downloads »

敲命令行的你很酷很帅,不过 IDE Plugins 的方式能让你更舒畅

上面介绍的是 adb 无线连接的基本实现,不过每次都得经历那些步骤,体验不是很好,能否有一种方式,直接在 Android Studio 中直接鼠标点点的快速方式来完成呢?答案:木有错,有得。

AS 中插件市场的搜索结果,关键词:adb wifi

image.png

全部都安装体验之后,最终只有两款能够顺利操作完成连接的:ADB WiFi Connect、WIFI ADB ULITIMATE,对比各种优缺点之后,最终只留下:WIFI ADB ULITIMATE
  • WIFI ADB ULITIMATE(可用,推荐使用这个)
    WIFI ADB ULITIMATE
  • ADB WiFi Connect(可用)
    ADB WiFi Connect
两款插件的使用对比结论,供大家快速选择适合自己的那一款【毕竟青菜萝卜,各有所好】
对比点 WIFI ADB ULITIMATE ADB WiFi Connect
入口 run 旁边,每次使用打开一个新的对话框 操作窗口依附在 IDE 的右边工具窗口中,操作比较方便
功能点 连接、断开连击、记录连接设备、设备断开自动刷新 连接【以及主动输入目标 IP 地址的连接方式】、断开连接、USB 线和 WIFI 两种连接方式的设备分组展示、自动记录最近的 10 次连接记录
优点 设备断开和连接,自动刷新、操作直接 Log 提示 操作窗口固定、自动记录、可以手动输入 IP 地址进行连接
缺点 操作窗口是独立 Java 窗口程序,不跟随 IDE、需要手动点 Save 设备断开需要手动刷新才能识别出新的连接情况【后续期望作者能够加上自动监听】

最后,再提两点关于 adb 的事情

  • 关于 adb 使用,谷歌官方的说明文档: https://developer.android.com/studio/command-line/adb
  • 在找 adb wifi 插件的时候,还发现一款跟 adb 相关的插件(提供一些跟当前开发项目app常用的操作),觉得挺好用:ADB Idea,操作选项如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ADB Revoke Permissions
    ADB Revoke Permissions and Restart
    ADB Grant Permissions
    ADB Uninstall App
    ADB Kill App
    ADB Start App
    ADB ReStart App
    ADB Clear App Data
    ADB Start App With Debugger
    ADB Restart App With Debugger