玩转AppCube应用魔方之可视化大屏动态展示你的博客知识 | 【玩转应用魔方】

AppCube应用魔方是华为云推出的轻松构建专业级应用,读者可以随心所欲创新构建自己的应用,其集成了高效易用的低代码aPaaS平台,强大的可视化技数据分析能力能够帮助初学者迅速实现所需功能,非常适合初学做。

作为一名编程技术分享者,十年来写了很多文章,文章主题各式各样,也积累了一定的阅读量和读者。那么,如何高效迅速的构建一个应用直观地展示我们的博客分享知识呢?毕竟每一篇文章都是我们分享者的心血,都是我们的知识结晶。这里非常推荐AppCube应用魔方,本文是一篇基础性文章,将带领大家简单搭建一个AppCube的应用,并实现作者“Eastmount”博客的大屏可视化呈现,读者也可以结合自己的兴趣,玩转AppCube应用。Let's go!!!

文章目录:

  • 一.AppCube简介
  • 二.创建应用
  • 三.创建页面及核心编辑介绍
  • 四.博客文本图谱展示
  • 五.柱状图展示博客按月发布量
  • 六.水位图展示博客读者比例
  • 七.地图展示博客区域分布情况
  • 八.AppCube总结


一.AppCube简介

应用魔方 AppCube是华为云为行业客户、合作伙伴、开发者量身打造的一款低码应用开发平台,通过AppCube可轻松构建专业级应用,创新随心所欲,敏捷超乎想象。AppCube 应用魔方是以应用为中心的开发平台。应用开发者可以在AppCube 开发界面上,通过拖拉拽的方式,并配合少量编码,迅速创建及开发的定制APP。目前,免费供大家使用,有需要课程作业或应用展示的读者不妨试试。

AppCube可以轻松构建应用,提供丰富的轻应用模板,包括办公管理、人事管理、项目管理、运营推广、培训赋能等领域,开发者可基于模板快速构建应用,加速企业数字化。其优势如下:

  • 丰富的应用模板:预置多领域的应用模板,开箱即用
  • 高效页面编排:丰富的UI组件库,易用的拖拽式页面构建体验
  • 极简流程配置:极简式流程编排,流程配置百变随心
  • 多屏融合:支持Web版和Mobile版本,一次开发,多屏使用


二.创建应用

华为云官方提供了详细的使用说明,初次使用应用魔方 AppCube的您,如果对AppCube还不太了解,不知道从何处入手,请仔细阅读该入门导读。通过入门导读可帮助您由浅入深的学习AppCube,轻松完成专业级应用的构建。当然,本文会言简意赅地创建第一个应用。

第一步,打开AppCube官网,点击“立即使用”按钮进入控制台。

https://www.huaweicloud.com/product/appcube.html

第二步,点击“立即试用”=>“进入开发环境”。

第三步,点击“项目”后选择“业务大屏”。

第四步,点击“新建项目”并创建项目。

  • 标签:博客可视化显示应用
  • 名称:show_blog_knowledge

创建成功后如下图所示,接下来进入项目开发环境,今后后续设置操作。



三.创建页面及核心编辑介绍

第一步,点击左侧目录加号新建页面。

第二步,读者可以选择创建空白页或业务大屏模板,这里先创建空白页。

大屏模板如下图所示:

第三步,点击“创建空白页”后输入标题“home”创建。

生成如下图所示的页面,接着我们可以进行应用编辑。

第四步,在右边的“页面设置”栏目中选择“查看全部”,选择合适的背景图片。

如下图所示:

第五步,点击应用标题的下拉菜单可以弹出AppCube的编辑操作栏目,显示如下图所示。包括:

  • 图表、媒体、地图、文本、装饰、仪表盘、导航、其他

(1) 图表功能

  • 饼图、线状图、水位图、柱状图、散点图、雷达图

(2) 媒体功能

  • flv视频、图片、视频、轮播

(3) 地图功能

  • 智慧园区、通用地图

(4) 文本功能

(5) 装饰功能

  • 文字装饰、底纹、分割线、步骤线、边框装饰、矩形装饰

(6) 仪表盘功能

(7) 导航功能

(8) 其它功能


四.博客文本图谱展示

第一步,添加天气控件和文本控件,并设置如下图所示。

设置文本空间为颜色、大小和内容。

天气控件可以右键点击“高级设置”,对其属性进行修改。

第二步,添加“词云”控件,并设置于左上角。

作者之前提取十年分享的600多篇博客标题,通过PyEcharts绘制词云图如下图所示。这里提取核心关键词及词频数量,并在AppCube中设置。

  • Python、网络安全、人工智能、数据挖掘、图像处理、数据库、实现、详解、C#

在这里插入图片描述

词云可视化Python代码如下:

from pyecharts import options as opts
from pyecharts.charts import WordCloud
from pyecharts.globals import SymbolType

# 生成数据 word = [('A',10), ('B',9), ('C',8)] 列表+Tuple
words = []
for (k,v) in c.most_common(200):
    words.append((k,v))
# 渲染图
def wordcloud_base() -> WordCloud:
    c = (
        WordCloud()
        .add("", words, word_size_range=[20, 40], shape='diamond') #shape=SymbolType.ROUND_RECT
        .set_global_opts(title_opts=opts.TitleOpts(title='Eastmount十年博客词云图'))
    )
    return c
# 生成图
wordcloud_base().render('Eastmount十年博客词云图.html')

第三步,设置词云内容。点击“数据”->“桥接器实例”选择“词云数据桥接器”,然后补充词云内容。

设置内容如下:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "热词词云图",
          "value": [
            {
              "value": 1200,
              "name": "Python"
            },
            {
              "value": 1000,
              "name": "网络安全"
            },
            {
              "value": 900,
              "name": "人工智能"
            },
            {
              "value": 950,
              "name": "数据挖掘"
            },
            {
              "value": 760,
              "name": "图像处理"
            },
            {
              "value": 640,
              "name": "数据库"
            },
            {
              "value": 555,
              "name": "实现"
            },
            {
              "value": 560,
              "name": "详解"
            },
            {
              "value": 510,
              "name": "Java"
            },
            {
              "value": 410,
              "name": "C#"
            },
            {
              "value": 310,
              "name": "C++"
            },
            {
              "value": 200,
              "name": "算法"
            },
            {
              "value": 110,
              "name": "系统"
            }
          ]
        }
      ]
    }
  ]
}

最终显示如下图所示:

第四步,将Gephi绘制的博客关键词关系图谱添加至AppCube应用中,表示作者博客分享的主题分布情况及关系紧密度。点击“媒体”=>“图片”即可。

选中图片右键“高级设置”,补充新图片并添加。

最终显示如下图所示:

社交网络分析常用于引文分析,文科领域有的成为文献知识图谱(和Google提出的知识图谱或本体有区别),它也是文献挖掘领域常用的技术手段。这里我们绘制社交网络关系图谱如下所示,主要利用Gephi软件,也推荐Neo4j或D3。可以看到作者十年的分享主要集中在四块内容,它们又相互联系,相辅相成。

  • 网络安全
  • Python
  • 逆向分析
  • 基础知识或编程技术


五.柱状图展示博客按月发布量

第一步,统计作者按星期发布博客的数量,通过Python统计如下图所示。

在这里插入图片描述

Python代码如下:

# encoding:utf-8
import re
import time
import csv
import pandas as pd
import numpy as np
import datetime

#定义星期函数
def get_week_day(date):
    week_day_dict = {
        0 : '星期一',
        1 : '星期二',
        2 : '星期三',
        3 : '星期四',
        4 : '星期五',
        5 : '星期六',
        6 : '星期天'
    }
    day = date.weekday()
    return week_day_dict[day]

#------------------------------------------------------------------------------
#第一步 读取数据
dd = []   #日期
tt = []   #时间
ww = []   #星期
with open("data.csv", "r", encoding="utf8") as csvfile:
    csv_reader = csv.reader(csvfile)
    k = 0
    for row in csv_reader:
        if k==0:      #跳过标题
            k = k + 1
            continue
        #获取数据 2021-04-08 21:52:21
        value_date = row[4]
        value_time = row[5]
        hour = value_time.split(":")[0]   #获取小时
        hour = int(hour)
        month = value_date[:7]            #获取月份
        dd.append(month)
        tt.append(hour)

        #获取星期
        date = datetime.datetime.strptime(value_date, '%Y-%m-%d').date()
        week = get_week_day(date)
        ww.append(week)
        #print(date,week)
        k = k + 1
print(len(tt),len(dd),len(ww))
print(dd)
print(tt)
print(ww)

#------------------------------------------------------------------------------
#第二步 统计不同日期的个数
from collections import Counter
cnt = Counter(ww)
print(cnt.items())  #dict_items
#字典按键排序
list_date = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
list_dnum = [0,0,0,0,0,0,0]
for key,value in cnt.items():
    k = 0
    while k<len(list_date):
        if key==list_date[k]:
            list_dnum[k] = value
            break
        k = k + 1
print(list_date,list_dnum)

#------------------------------------------------------------------------------
#第三步 PyEcharts绘制柱状图
from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.charts import Line
from pyecharts.commons.utils import JsCode
bar=(
    Bar()
        .add_xaxis(list_date)
        .add_yaxis("数量", list_dnum, color='pink')
        .set_global_opts(title_opts=opts.TitleOpts(
            title="Eastmount博客按星期分布", subtitle="week"))
    )
bar.render('Eastmount博客按星期分布.html')

第二步,在AppCube中添加“水平基本柱状图”。

第三步,修改静态数据的代码,修改为作者发文数量。

添加数据如下:

{
  "dataX": [
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
    "星期日"
  ],
  "dataValue": [
    {
      "title": "发文总数",
      "value": [
        98,
        92,
        95,
        85,
        77,
        64,
        87
      ]
    }
  ]
}

最终显示如下图所示:


六.水位图展示博客读者比例

在博客作者分析中,通常会包括粉丝性别、年龄、职业等比例情况,这里可以通过水位图展示具体情况。

第一步,添加两个水位图,一个用于表示男生比例,一个用于表示学生比例。

第二步,选中水位图右键高级,设置“带标题模板”,设置水波颜色。

第三步,设置数据如下图所示,假设男生占60%,学生占81%。


七.地图展示博客区域分布情况

地图区域分析也是重要的功能,比如微信公众号显示如下图所示。

AppCube提供了非常完美的地图显示功能供大屏形式,具体步骤如下:

第一步,插入地图,选择“中国地图”。

第二步,设置静态数据和高级设置,然后对地图进行布局。

第三步,增加仪表盘,可以设置点赞量、阅读量、文章量等统计。

第四步,增加装饰,比如分割线或者蒙板。


八.AppCube总结

第一步,点击发布按钮。

显示如下图所示:

  • https://appcube.cn-north-4.huaweicloud.com/magno/render/DVshow_blog_knowledge17d1e1e9bd9_0000000000oez9dES1wG/page1

第二步,点击预览。

最终效果如下图所示:


感恩能与大家在华为云遇见!
希望能与大家一起在华为云社区共同成长。【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271

(By:娜璋之家 Eastmount 2021-11-14 夜于武汉)

(完)