手把手教你从无到有写一个运维APP

由于自己现在无业游民,所以没有什么现成的环境,环境就随便找个公网的。再者当下的完成度应该算不上一个完整的 APP,但是作为参考,依瓢画葫芦绝对足够了,如果等完整产品,可能得等一段时间了,下面的是该项目的地址。

项目地址: https://github.com/youerning/MyApp(star一下呗)

效果图如下

文章目录: 1. 准备工作 2. 代理 3. 页面框架 4. 获取数据 5. 绘图 6. 自问自答

页面逻辑简要说明:

1. 一共三个 tab,分别为 home,es,zabbix。

2. home 页面有 es,zabbix 的性能指标。

3. es页面可以图形展示搜索的数据。

4. zabbix页面可以图形展示搜索的数据(没有环境所以留空)。

(一)

1. 环境搭建参考:第一篇 http://youerning.blog.51cto.com/10513771/1735450

2. es 服务器

因为没有现成的 es 环境再者自己搭建还得往里面填数据,这太难过了,所以通过 shodan 找一个暴露在公网的 es 服务器。

3. 创建一个 APP

ionic start myops blank

4. sublime 打开该项目

(二)

1. 搭建代理

虽说 app 里面似乎没有跨域的限制,但是自己在调试的时候还是可能被这个跨域弄得焦头烂额的。

所以可以通过 flask 简单的写一个代理页面,代码如下,如你所见,我把这个暴露在公网的 es 服务器的 IP 写出来,的确有点不道德(大家不要搞破坏呀~数据量这么丰富的还是比较难找的呀)。

这个页面的效果如下。

(三)

1. 页面框架

就如上面的效果图,我们应该需要三个 tab,然后一个 es 性能的模板页面,一个详情模板页面。

所以目录结构大体如下。

总而言之,我们需要五个模板,所以在 www 目录下创建了一个 tpls 的目录用于放置我们的模板文件。

完整源代码,可以访问我的 GitHub。

2. 页面框架编写。

首先在入口页撰写总体布局:

创建视图文件,大致结构如下,home.html,es.html.zabbix.html等

编写路由逻辑。

(四)

1. 获取数据

这里我们通过 angularjs 内置的 $http 访问相应的 api,大致如下。

本来性能指标应该是时间序列的监控数据,但是由于没有环境,这里就简单的列出当前指标值。

perf.html 内容如下。

(五)

1. 绘图

这里绘图使用 chart.js

2. 安装 chart.js

在项目目录下执行下面命令

3. 在 index.html 引入 js 文件

4. 检索 es 中我们感兴趣的字段

通过检索 mapping 效果如下

个人而言,感觉可玩的是 clientip,agent,response

我们利用 es 的 api 统计以下上面的字段吧。

因为聚合需要 post 方法,所以这里使用 postman。

效果如下

5. 通过 $http 获取数据

6. 模板内容如下

7. 绘图

(六)

自问自答

Q:为毛不用最新的 ionic

A:暂时没有看 typescript 的看法

Q:能画其他图么?

A:参考 http://jtblin.github.io/angular-chart.js/

Q:为毛没有获取一下 zabbix 的数据

A:没环境,不想搭

不足

1. 有一些重复的代码

2. 不够足够好看

3. 没有将 url 的控制权交给 APP

作者:youerning 来源:http://youerning.blog.51cto.com/10513771/1939987

隐藏福利

马哥教育联合图灵社区送福利啦

在本文下方留言

点赞前两名

即可分别获赠精美图书一本

点赞统计截止到

2017年8月14日(明日)8:00

(重复中奖无效)

奖品介绍

《Linux Shell脚本攻略(第2版)》

Linux Shell Scripting Cookbook http://www.ituring.com.cn/book/1170(目录及试读)

作者:Shantanu Tushar,Sarath Lakshman

译者:门佳

  • 用100多个真实案例展示如何用几行脚本完成复杂任务被多次推荐的实操好书,案例实用性强

对于略微了解Shell的初学者,这是一本全面提升书,书中有很多脚本老手经常使用的技巧。

原文发布于微信公众号 - 马哥Linux运维(magedu-Linux)

原文发表时间:2017-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏嵌入式程序猿

一步步学习MQX实时操作系统

MQX简介 MQX实时操作系统是飞思卡尔为购买飞思卡尔控制器的用户免费提供的一款可定制的配置,只需占用较小的存储器空间,即可提供实时性能。这款实时操作系统使您...

34990
来自专栏Material Design组件

Human Interface Guidelines — Custom Keyboards

14730
来自专栏FreeBuf

正确姿势:如何调戏蹭网者

这篇文章本来是知乎回答的一个问题,但是由于本人五行缺勤奋,所以一直没写(其实是忘了=。=),下面是我的一个实验,如何通过squid调戏那些蹭网的人。没什么技术含...

26280
来自专栏欧阳大哥的轮子

论MVVM伪框架结构和MVC中M的实现机制

一直都有人撰文吹捧MVVM应用开发框架,文章把MVVM说的天花乱坠并且批评包括iOS和android所用的MVC经典框架。这篇文章就是想给那些捧臭脚的人们泼泼冷...

11130
来自专栏ytkah

保存一下dedecms数据库表和字段说明,方便日后查询

玩dedecms有一段时间,对它的字段不是很了解,在此做个记录,方便日后查询 dede数据库字段说明: dede_addonarticle 附加文章...

28440
来自专栏非著名程序员

基于开源项目搭建属于自己的技术堆栈

? 在技术面试的时候肯定都会问到使用了哪些第三方框架,为什么使用它而不用其他的。身边朋友就有这样的亲身经历: 面试官:你们项目中加载图片都是用的什么框架? 面...

26970
来自专栏更流畅、简洁的软件开发方式

分页解决方案 之 QuickPager的使用方法(目录)

      QuickPager asp.net 2.0 分页控件,基本告一段落。现在把使用方法、源码、Demo公布一下,感兴趣的可以下载看看。 一、从提取数...

20790
来自专栏PHP在线

8个最佳PHP库

原文出处: codegeekz 译文出处:oschina PHP标准库 (SPL)的目的就是提供一组接口,让开发者在PHP5中充分利用面向对象编程。因此...

48940
来自专栏進无尽的文章

基础篇-iOS后台运行以及相关

对于APP的前后台运行情况的了解,有助于我们在实际开发中规避一些问题,以及采取稳妥的方法处理和解决问题,是很必须的。

60510
来自专栏重庆的技术分享区

MPic神器-上传照片直接生成外链

48050

扫码关注云+社区

领取腾讯云代金券