Community Articles

Find and share helpful community-sourced technical articles.
avatar
Master Guru

 [FLaNK] Smart Weather Applications with Flink SQL 

 

Sometimes you want to acquire, route, transform, live query, and analyze all the weather data in the United States while those reports happen. With FLaNK, it's a trivial process to do.

 

TimothySpann_24-1605208577305.png
TimothySpann_25-1605208577293.png
TimothySpann_26-1605208577439.png

From Kafka to Kudu for Any Schema of Any Type of Data - No Code, Two Steps

TimothySpann_27-1605208577334.png

The Schema Registry has full Swagger-ized Runnable REST API Documentation. Integrate, DevOps, and Migration in a simple script

TimothySpann_28-1605208577290.png
Here's your schemas, upload, edit, and compare.
TimothySpann_29-1605208577314.png
Validating Data Against a Schema With Your Approved Level of Tolerance. You want extra fields allowed, you got it:

TimothySpann_30-1605208577461.png
Feed that data to beautiful visual applications running in Cloudera Machine Learning.
TimothySpann_31-1605208577318.png

You like drill-down maps, you got them:

TimothySpann_32-1605208577321.png
Query your data fast with Apache Hue against Apache Kudu tables through Apache Impala:
TimothySpann_33-1605208577310.png
Let's ingest all the US weather stations even though they are a zipped directory of a ton of XML files:
TimothySpann_34-1605208577356.png
Weather Ingest is Easy Automagically!
TimothySpann_35-1605208577330.png
View All Your Topic Data Enabled by Schema Registry Even in Avro Format:
TimothySpann_36-1605208577326.png

Reference:

Ingesting all weather data with Apache

Source

Schemas

SQL

INSERT INTO weathernj
  SELECT `location`, station_id,latitude,longitude,observation_time,weather,
  temperature_string, temp_f,temp_c,relative_humidity,wind_string,wind_dir,wind_degrees,wind_mph,
  wind_kt, pressure_in,dewpoint_string,dewpoint_f,dewpoint_c
  FROM weather
  WHERE
  `location` is not null and `location` <> 'null' and trim(`location`) <> '' and `location` like '%NJ';

 

Example Slack Output

=========================================================
http://forecast.weather.gov/images/wtf/small/ovc.png Location Cincinnati/Northern Kentucky International Airport, KY Station KCVG
Temperature: 49.0 F (9.4 C)
Humdity: 83
Wind East at 3.5 MPH (3 KT)
Overcast
Dewpoint 44.1 F (6.7 C)Observed at Tue, 27 Oct 2020 11:52:00 -0400---- tracking info ----          UUID: 2cb6bd67-148c-497d-badf-dfffb4906b89
  Kafka offset: 0
Kafka Timestamp: 1603818351260
=========================================================

[FLaNK] Smart Weather Websocket Application - Kafka Consumer

 

TimothySpann_0-1605208544679.png

This is based on Koji Kawamura's excellent GIST

 

As part of my Smart Weather Application, I wanted to display weather information as it arrives on a webpage using web sockets.   Koji has an excellent NiFi flow that does it.  I tweaked it and add some things since I am not using Zeppelin.   I am hosting my webpage with NiFi as well.

 

We simply supply a webpage that makes a WebSocket connection to NiFi and NiFi keeps a cache in HBase to know what the client is doing. This cache is updated by consuming from Kafka. We can then feed events as they happen to the page.

 

TimothySpann_1-1605208544649.png

 

Here is the JavaScript for the web page interface to WebSockets:

<script>
  function sendMessage(type, payload) {
  websocket.send(makeMessage(type, payload));
  }
   
  function makeMessage(type, payload) {
  return JSON.stringify({
  'type': type,
  'payload': payload
  });
  }
   
  var wsUri = "ws://edge2ai-1.dim.local:9091/test";
   
  websocket = new WebSocket(wsUri);
  websocket.onopen = function(evt) {
   
  sendMessage('publish', {
  "message": document.getElementById("kafkamessage")
  });
   
  };
  websocket.onerror = function(evt) {console.log('ERR', evt)};
  websocket.onmessage = function(evt) {
  var dataPoints = JSON.parse(evt.data);
   
  var output = document.getElementById("results");
  var dataBuffer = "<p>";
   
  for(var i=0;i<dataPoints.length;i++)
  {
  dataBuffer += " <img src=\"" + dataPoints[i].icon_url_base + dataPoints[i].icon_url_name + "\"> &nbsp;" + dataPoints[i].location +
  dataPoints[i].station_id + "@" + dataPoints[i].latitude + ":" +
  dataPoints[i].longitude + "@" + dataPoints[i].observation_time +
  dataPoints[i].temperature_string + "," + dataPoints[i].relative_humidity + "," +
  dataPoints[i].wind_string +"<br>";
   
  }
  output.innerHTML = output.innerHTML + dataBuffer + "</p><br>";
  };
   
  </script>
Video Walkthrough:   https://www.twitch.tv/videos/797412192?es_id=bbacb7cb39
Source Code:   https://github.com/tspannhw/SmartWeather/tree/main
Kafka Topic
TimothySpann_2-1605208544660.png
weathernj Schema
TimothySpann_3-1605208544554.png

The schema registry has a live Swagger interface to it's REST API

TimothySpann_4-1605208544637.png

NiFi Flow Overview

TimothySpann_5-1605208544568.png

Ingest Via REST All US Weather Data from Zipped XML

TimothySpann_6-1605208544602.png

As Data Streamings In, We Can Govern It

TimothySpann_7-1605208544629.png
Ingested Data is Validated Against It's Schema Then Pushed to Kafka as Avro
TimothySpann_8-1605208544673.png

We consume that Kafka data in-store it in Kudu for analytics

TimothySpann_9-1605208544596.png

We host a web page for our Websockets Application in NiFi with 4 simple processors.

TimothySpann_10-1605208544671.png

Listen and Put Web Socket Messages Between NiFi Server and Web Application

TimothySpann_11-1605208544666.png

Kafka Data is Cached for Websocket Applications

TimothySpann_12-1605208544774.png

Set the Port for WebSockets via Jetty Web Server

TimothySpann_13-1605208544617.png

 


TimothySpann_14-1605208544607.png
Use HBase As Our Cache
TimothySpann_15-1605208544681.png

 

TimothySpann_16-1605208544612.png

 


TimothySpann_17-1605208544575.png

We can monitor our Flink SQL application from the Global Flink Dashboard

TimothySpann_18-1605208544658.png

 


 
TimothySpann_19-1605208544610.png
We can query our Weather data store in Apache Kudu via Apache Impala through Apache Hue 
TimothySpann_20-1605208544571.png
Kudu Visualizations of Our Weather Data in Cloudera Visual Applications
TimothySpann_21-1605208544804.png

 

TimothySpann_22-1605208544770.png

 

1,591 Views