【搭建实战】全国天气预报看板搭建

简介: 本篇文章码匠将带您快速搭建出一个天气预报数据看板。

码匠是什么?

码匠是一款国内研发的开发者友好的低代码平台,您无需了解 React/Vue 等框架的开发、部署等各种细节,就可以快速打通前后端,连接 REST API、MySQL、MongoDB 等多种数据源,然后通过一套开箱即用的组件,轻松搭建功能完善的数据看板、数据洞察、Admin 管理后台等多种应用。
码匠主要面向国内用户,相较于国外开发的 Admin/CRM/CMS 等后台工具,码匠的 UI 界面设计更加适合国内业务场景。同时码匠整合了多款国内常见数据源,包括飞书、企业微信、钉钉、阿里云 OSS 等。不仅如此,码匠还一站式提供了企业内部系统常用的租户管理、细粒度的权限控制、审计日志等功能,让您快速搭建后台应用的同时,也为您的企业信息安全保驾护航。

使用码匠搭建全国天气预报数据看板

天气预报是对未来一定时期内天气变化的事先估计和预告,是气象工作为国民经济和国防建设服务的重要手段。我们几乎每天都会关注天气预报,可以提前知道未来的天气,以免天气寒冷没有添衣保暖。天气预报对我们的各项活动有很大的帮助,可以让我们合理安排自己的出行等活动。
本篇文章码匠将带您快速搭建出一个天气预报数据看板,前两篇的【how to 系列】让您的工作变得更有效率,那么这一篇,码匠希望能够方便您的生活出行。
1.png

一、 梳理需求

一个天气预报数据看板可能需要以下功能:
1.选择目标地区:在「📍选择地区」处下拉选项,让使用者可以选择不同的地区进行当地天气预报的查询

2.png
3.png

2.查看实时天气预报:选择想查询的地区后,需提供一系列当地的实时天气预报,直观简洁的显示出气象信息,包括温度、风向风力、空气湿度、紫外线强度、气压以及 24 小时气温变化情况等。

4.png

3.显示未来天气状况:在显示页上不仅能够看到实时天气播报,还需要显示未来 4 天的天气状况。具体包括白天和晚间天气情况、当日最高最低气温以及风力风向。

5.png

4.天气 API 的选择:API 方面,这里选择了国内最知名的高德天气 API :https://lbs.amap.com/api/webservice/guide/api/weatherinfo/,对于个人账户,高德提供每日免费的 5000 次查询限额,数据方面则提供了气温、风向、湿度等多类数据。

6.png

二、 开始搭建

在本例搭建中主要用到了下述组件:

  • 文本(Text)
  • 级联选择器 (Cascader)
  • 表格(Table)
  • 容器(Container)
  • 自定义组件 (Custom Component)
  • 图表 (Chart)

步骤:
1.根据需要拖拽右侧组件搭出应用框架,本例中码匠布局如下图,读者也可以根据美观和功能自己设计。

7.png

💡 码匠使用小技巧:
在画布中拖拽组件时,其余组件的边框和排布会一并显示出来,应用开发者可以利用该线条对齐组件、合理布局。

2.修改组件的属性值填充细节,这里码匠修改了组件名称和一些组件外观上的设置,例如组件中文字的位置和对齐方式等。

8.png

💡 码匠使用小技巧:
合适的组件名能让应用后续的修改更方便,左侧的数据浏览面板也能帮助您快速定位组件。

3.选择合适的数据源进行设置:码匠将常见的几款数据库类型及 API 帮助开发者配置完成,开发者只需选择想要接入的数据类型,简单填写表单即可完成配置。

9.png

4.创建查询并将查询结果和组件进行数据绑定,例如:下图中的级联选择器配置了中国省市直辖市的区号信息,查询中调用高德天气API接口并传入具体区号,这样就得到了该地区相关天气数据。

10.png
11.png

💡 码匠搭建应用常用步骤:

  1. 快速连接数据源 & 创建查询
  2. 确定组件布局并拖放组件,使用 JavaScript 表达式绑定数据
  3. 设置查询和组件的事件触发,提供响应式 UI 交互

5.应用至此就已搭建完成了,用户可以在右上角点击预览查看应用或点击权限邀请他人一起查看、编辑,还可以点击「···」选择发布或导出。下图展示了权限管理相关界面:

12.png

💡 码匠使用小技巧:
善用历史记录功能可以减少许多不必要的麻烦,在多人协作修改应用时尤为重要。

更多码匠模板参考及使用技巧

13.png

想要了解更多还请移步码匠官网(https://majiang.co/),码匠官网为您提供了海量的工作模板,可以服务于自媒体、风险投资、咨询、广告业、零售业、医疗等团队,您都可以免费选用。除此之外,若您在使用过程中遇到了问题也可以随时查看帮助文档或向客服寻求帮助。最后欢迎大家探索码匠~

相关文章
|
数据采集 数据挖掘 Python
使用Python构建简单的Web爬虫:实现网页内容抓取与分析
本文将介绍如何使用Python编写一个简单的Web爬虫,实现对特定网页内容的抓取与分析。通过学习本文,读者将了解到如何利用Python的requests和Beautiful Soup库来获取网页内容,并通过示例演示如何解析HTML结构,提取所需信息。此外,我们还将讨论一些常见的爬虫挑战以及如何避免被网站封禁的策略。
|
Unix Linux 数据安全/隐私保护
超好用!5款完全免费、支持全平台的笔记软件
好记忆不如一个烂笔头,对于这句话,我深以为然。 我觉得养成做笔记的习惯,对于工作和学习都能够提供很大的帮助。
超好用!5款完全免费、支持全平台的笔记软件
|
人工智能 编解码 芯片
告别低效沟通|让技术提问不再头疼-这套高效AI提问模板来帮你
不会向ai提问,不知道怎么提问的 可以看看
21511 1
告别低效沟通|让技术提问不再头疼-这套高效AI提问模板来帮你
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
5570 10
|
4月前
|
机器学习/深度学习 人工智能 监控
翻墙、攀爬、跨越围栏等违规行为检测数据集(10,000 张图片已划分)—安全检测实践
本数据集含10,000张标注图像(9030训练+1130验证),专用于翻墙、攀爬等违规行为检测,支持YOLOv8/v9等模型。含no_climb/climb二分类,YOLO格式标注,覆盖工地、校园、围栏等多场景,光照/角度/遮挡多样,开箱即用,助力智能安防系统快速落地。
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
638 1
|
算法
KNN算法及其优缺点
KNN算法及其优缺点
1097 0
|
机器学习/深度学习 人工智能 自然语言处理
还不懂如何与AI高效交流?保姆级且全面的chatGPT提示词工程教程来啦!(一)基础篇
这篇文章是一篇保姆级的教程,旨在全面介绍如何与AI进行高效交流,包括ChatGPT的前世今生、应用场景以及提问的基础技巧。
还不懂如何与AI高效交流?保姆级且全面的chatGPT提示词工程教程来啦!(一)基础篇
|
缓存 Kubernetes 测试技术
在k8S中,镜像下载策略有哪些?
在k8S中,镜像下载策略有哪些?
|
存储 C语言 Python
求1+2!+3!+…+20!的和
求1+2!+3!+…+20!的和
616 3

热门文章

最新文章