【リアルタイムデータウェアハウス】キーワード件名テーブル(FlinkSQL)、データ可視化インターフェース、シュガーデータ大画面、DWS層の総取引額インターフェース実装

記事ディレクトリ

1 つの DWS レイヤー - キーワード サブジェクト テーブル (FlinkSQL)

1 データをフィルタリングする

// TODO 4 将动态表中表示搜索行为的记录过滤出来
Table fullwordTable = tableEnv.sqlQuery("select " +
        "  page['item'] fullword,rowtime " +
        " from " +
        "  page_view " +
        " where " +
        "  page['page_id']='good_list' and page['item'] is not null");

2 UDTFを使用した分割

(1) 分割結果

搜索内容:荣耀Play6T Pro 天玑810
	fullword				rowtime
荣耀Play6T Pro 天玑810		20221215

拆分后的效果:荣耀  Play6T  Pro  天玑  810
     keyword		   rowtime
	  荣耀			20221215
	  Play6T		  20221215
	  Pro			  20221215
	  天玑			20221215
	  810  		      20221215

(2) 結合テーブル機能(UDTF)

テーブルをテーブル関数の結果と結合します。左側のテーブル (外側) の各行は、テーブル関数の呼び出しによるすべての結果の関連する行と結合されます。

ユーザー定義テーブル関数 (UDTF) は、実行前に登録する必要があります。UDF の指定と登録の詳細については、UDF のドキュメントを参照してください。

(3) コード

// TODO 2 注册自定义UDTF函数
tableEnv.createTemporarySystemFunction("ik_analyze", KeywordUDTF.class);

// TODO 5 使用自定义UDTF函数对搜索关键词进行拆分
Table keywordTable = tableEnv.sqlQuery("SELECT rowtime, keyword FROM "+ fullwordTable +", LATERAL TABLE(ik_analyze(fullword)) AS T(keyword)");

3 グループ化、ウィンドウ処理、集計計算

// TODO 6 分组、开窗、聚合计算
Table resTable = tableEnv.sqlQuery("select " +
        "  DATE_FORMAT(TUMBLE_START(rowtime, INTERVAL '10' SECOND),'yyyy-MM-dd HH:mm:ss') as stt, " +
        "  DATE_FORMAT(TUMBLE_END(rowtime, INTERVAL '10' SECOND),'yyyy-MM-dd HH:mm:ss') as edt, " +
        "  keyword, " +
        "  count(*) ct," +
        "  '"+ GmallConstant.KEYWORD_SEARCH +"' source," +
        "  UNIX_TIMESTAMP() * 1000 as ts" +
        " from " +
        "  "+ keywordTable +" " +
        " group by " +
        "  TUMBLE(rowtime, INTERVAL '10' SECOND),keyword ");

4 ストリームに変換して ClickHouse に書き込む

(1) ClickHouseでキーワード統計テーブルを作成する

create table keyword_stats_2022 (
    stt DateTime,
    edt DateTime,
    keyword String ,
    source String ,
    ct UInt64 ,
    ts UInt64
)engine =ReplacingMergeTree( ts)
        partition by  toYYYYMMDD(stt)
        order by  ( stt,edt,keyword,source );

(2) KeywordStats エンティティ クラスをカプセル化する

package com.hzy.gmall.realtime.beans;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
 * Desc: 关键词统计实体类
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class KeywordStats {
    
    
    private String keyword;
    private Long ct;
    private String source;
    private String stt;
    private String edt;
    private Long ts;
}

(3) メインプログラムでストリームを変換し、ClickHouseに書き込む

// TODO 7 将表转换为流
DataStream<KeywordStats> keywordStatsDS = tableEnv.toAppendStream(resTable, KeywordStats.class);
keywordStatsDS.print(">>>");

// TODO 8 将流中数据写入ck中
keywordStatsDS.addSink(ClickhouseUtil.getJdbcSink(
        // 字段顺序与实体类中属性顺序要一致
        "insert into keyword_stats_2022(keyword,ct,source,stt,edt,ts) values(?,?,?,?,?,?) "
));

5 総合テスト

  • ZK、Kafka、logger.sh、ClickHouse を開始します
  • runBaseLogApp
  • KeywordStatsApp を実行する
  • rt_applog ディレクトリ内の jar パッケージを実行します。
  • コンソール出力を表示する
  • ClickHouse でkeyword_stats_2022 テーブル データを表示する

2 つのデータ視覚化インターフェイス

1 デザインのアイデア

以前は、データは階層的に処理され、最後に軽く集計された結果が ClickHouse に保存されていましたが、主な目的は即時のデータ クエリ、統計、分析サービスを提供することでした。これらの統計サービスは通常 2 つの形式で表示されます。1 つはプロのデータ アナリスト向けの BI ツールで、もう 1 つは非専門家向けのより直感的なビッグ データ画面です。

以下は主に百度の砂糖データ大画面サービスのインターフェース開発です。

2 デマンドの仕分け

(1)エフェクト描画

ここに画像の説明を挿入

(2) 大画面で分析・可視化

視覚的な大画面の各コンポーネントには個別のインターフェイスが必要で、この図には合計 8 つのコンポーネントが含まれています。

コンポーネント名 コンポーネント クエリメトリクス 対応するデータシート
取引総額 ナンバーフロップ ご注文の合計金額 製品統計
州および都市のヒート マップ クエリ ヒートマップ 州および都市グループの注文金額 州の統計
タイムシェアリングトラフィック 折れ線グラフ UVタイムシェアリング PVタイムシェアリング 新規ユーザータイムシェアリング 訪問者統計
ブランドトップN 水平方向のヒストグラム ブランド別のグループ注文金額 製品統計
カテゴリ分布 円グラフ カテゴリごとに注文金額をグループ化する 製品統計
ホットワード文字雲 キャラクタークラウド キーワードグループ数 キーワード統計
トラフィックテーブル ピボットテーブル UV数(新規・旧ユーザー) PV数(新規・旧ユーザー) 直帰率(新規・旧ユーザー) 平均訪問時間(新規・旧ユーザー) 平均訪問ページ数(新規・旧ユーザー) 訪問者統計
人気商品 カルーセルテーブル SPUごとに注文金額をグループ化する 製品統計

(3) インターフェース実行処理

ここに画像の説明を挿入

以前は、DWS レイヤー計算が実装され、ClickHouse に書き込まれていました。次のステップは、大画面視覚化サービス用に ClickHouse 内のデータをクエリするためのデータ インターフェイスを提供することです。ここでは主に2つの仕事があります

  • 視覚化された大画面サービスを構成します。
  • 大きなビジュアル画面からアクセスするためのデータ クエリ インターフェイスを作成します。

スリーシュガーデータ大画面

1 製品紹介

Sugar は Baidu Cloud が提供するアジャイル BI およびデータ視覚化プラットフォームで、レポートや大画面のデータ BI 分析と視覚化の問題を解決し、データ視覚化システムの開発マンパワーを解放することを目的としています。

2 アクセス

https://cloud.baidu.com/product/sugar.html

3 大きなデータ画面を作成する

  • [今すぐ使用]をクリックした後、Baidu アカウントにログインします。

  • まずは組織を作る

  • 作成時に製品[大画面早期導入版]を選択すると、初回使用には1か月の試用期間があります

  • 新しい組織を作成したら、[組織に入る]を選択します

ここに画像の説明を挿入

  • 次に、デフォルトの [最初のスペース] を入力します。

  • スペース内で「作成する大画面」の後に「新規」を選択

ここに画像の説明を挿入

  • 大画面テンプレートを選択する

  • 空のテンプレートを選択することも、既存のテンプレートに従って変更することもできます

(8) 空のテンプレートを選択することも、既存のテンプレートに従って変更することもできます

  • ここでは空のテンプレートを選択し、大画面の名前を指定します

ここに画像の説明を挿入

  • 大画面の編集ウィンドウに入ります

合計 4 つの売上高インターフェイス

1 砂糖コンポーネント: デジタル カード フロップ

(1) コンポーネントの追加

大画面のエディター上部から[Indicators]→[Digital Flop]を選択します

ここに画像の説明を挿入

(3) コンポーネントが必要とするデータ形式を問い合わせる

データバインディングの位置で[静的JSON]を選択すると、データに必要なJSON形式が表示されます。

(4) インタフェースのアクセスパスと戻り形式

1.1.4 インターフェースのアクセスパスと戻り形式

  • アクセスパス:/api/sugar/gmv
  • 戻り値の形式
{
  "status": 0,
  "data": 1201012.694507823
}

(5) SQLの実行

product_stats_2022 テーブル データ

ここに画像の説明を挿入

b product_stats_2022 テーブル構造

ここに画像の説明を挿入

c SQL文

toYYYYMMDD : Date または DateTime を、年と月の数値 (YYYY * 10000 + MM * 100 + DD) を含む UInt32 型の数値に変換します。

select sum(order_amount) order_amount from product_stats_2022 where toYYYYMMDD(stt)=20221215;

2 データインターフェースの実現

(1) データインターフェースモジュールの作成

a gmall2022-parent プロジェクトの下に新しい SpringBoot モジュール gmall2022-publisher を作成します。

ここに画像の説明を挿入

最初にこれに依存しないことを選択し、それから pom.xml に均一に追加することもできます。

b 必要な依存関係を pom.xml ファイルに追加します。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.hzy.gmall.publisher</groupId>
    <artifactId>gmall2022-publisher</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>gmall2022-publisher</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.11</version>
        </dependency>

        <dependency>
            <groupId>ru.yandex.clickhouse</groupId>
            <artifactId>clickhouse-jdbc</artifactId>
            <version>0.1.55</version>
        </dependency>
    </dependencies>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

(2) コード階層

コード構造

層状の 親切 処理内容
コントローラ 制御層 シュガーコントローラー クエリ取引金額インターフェイスと戻りパラメータの処理
サービス サービス層 ProductStatsService ProductStatsServiceImpl 製品統計のクエリ
マッパー データマッピングレイヤー 製品統計マッパー SQLクエリ商品統計テーブルの作成

b Springboot コア構成ファイル application.properties を変更します。

server.port=8070
#配置ClickHouse驱动以及URL
spring.datasource.driver-class-name=ru.yandex.clickhouse.ClickHouseDriver
spring.datasource.url=jdbc:clickhouse://hadoop101:8123/default

c パッケージ構造を作成する

ここに画像の説明を挿入

(3) 階層化されたコードの実装

マッパー層: ProductStatsMapper インターフェイスを作成します

package com.hzy.gmall.publisher.mapper;
/**
 * 商品统计Mapper接口
 */
public interface ProductStatsMapper {
    
    
    // 获取某天商品的总交易额
    @Select("select sum(order_amount) order_amount from product_stats_2022 where toYYYYMMDD(stt)=#{date}")
    BigDecimal selectGMV(Integer date);
}

b アプリケーションに @MapperScan アノテーションを追加します

package com.hzy.gmall.publisher;

@SpringBootApplication
@MapperScan(basePackages = "com.hzy.gmall.publisher.mapper")
public class Gmall2022PublisherApplication {
    
    

    public static void main(String[] args) {
    
    
        SpringApplication.run(Gmall2022PublisherApplication.class, args);
    }

}

c サービス層: ProductStatsService インターフェイスを作成します。

package com.hzy.gmall.publisher.service;
/**
 * 商品统计service接口
 */
public interface ProductStatsService {
    
    
    // 获取某天的总交易额
    BigDecimal getGMV(Integer date);
}

d サービス層: ProductStatsServiceImpl 実装クラスを作成します。

package com.hzy.gmall.publisher.service.impl;
/**
 * 商品统计service接口实现类
 */
@Service
public class ProductStatsServiceImpl implements ProductStatsService{
    
    

    @Autowired
    private ProductStatsMapper productStatsMapper;

    @Override
    public BigDecimal getGMV(Integer date) {
    
    
        return productStatsMapper.selectGMV(date);
    }
}

e コントローラー層: SugarController クラスの作成

このクラスは主にユーザーのリクエストを受け取り、応答します。砂糖のさまざまな成分に応じて、さまざまな形式が返されます。

package com.hzy.gmall.publisher.controller;
/**
 * 大屏展示控制层
 */
@RestController
@RequestMapping("/api/sugar")
public class SugarController {
    
    

    @Autowired
    private ProductStatsService productStatsService;

    @RequestMapping("/gmv")
    public String getGMV(@RequestParam(value = "date",defaultValue = "0") Integer date){
    
    
        if (date == 0){
    
    
            date = now();
        }

        // 调用service获取总交易额
        BigDecimal gmv = productStatsService.getGMV(date);

        String json = "{\"status\": 0,\"data\": "+gmv+"}";
        
        return json;
    }

    // 获取当前日期
    private Integer now() {
    
    
        String yyyyMMdd = DateFormatUtils.format(new Date(), "yyyyMMdd");
        return Integer.valueOf(yyyyMMdd);
    }
}

(4) ローカルインターフェースのテスト

a SpringBoot アプリケーションを起動します。

ブラウザでテスト インターフェイスにアクセスする

b 出力結果

出力 1:

ここに画像の説明を挿入

出力結果 2:

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_43923463/article/details/128430503