锐客网

  1. 首页 > 睿知 > it技术 > >

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

码匠是什么？ 码匠是一款国内研发的开发者友好的低代码平台，您无需了解 React/Vue 等框架的开发、部署等各种细节，就可以快速打通前后端，连接 REST API、MySQL、MongoDB 等多种数据源，然后通过一套开箱即用的组件，轻松搭建功能完善的数据看板、数据洞察、Admin 管理后台等多种应用。
码匠主要面向国内用户，相较于国外开发的 Admin/CRM/CMS 等后台工具，码匠的 UI 界面设计更加适合国内业务场景。同时码匠整合了多款国内常见数据源，包括飞书、企业微信、钉钉、阿里云 OSS 等。不仅如此，码匠还一站式提供了企业内部系统常用的租户管理、细粒度的权限控制、审计日志等功能，让您快速搭建后台应用的同时，也为您的企业信息安全保驾护航。
使用码匠搭建全国天气预报数据看板 天气预报是对未来一定时期内天气变化的事先估计和预告，是气象工作为国民经济和国防建设服务的重要手段。我们几乎每天都会关注天气预报，可以提前知道未来的天气，以免天气寒冷没有添衣保暖。天气预报对我们的各项活动有很大的帮助，可以让我们合理安排自己的出行等活动。
本篇文章码匠将带您快速搭建出一个天气预报数据看板，前两篇的【how to 系列】让您的工作变得更有效率，那么这一篇，码匠希望能够方便您的生活出行。
【搭建实战】全国天气预报看板搭建
文章图片

一、 梳理需求 一个天气预报数据看板可能需要以下功能：
1.选择目标地区：在「选择地区」处下拉选项，让使用者可以选择不同的地区进行当地天气预报的查询
【搭建实战】全国天气预报看板搭建
文章图片

【搭建实战】全国天气预报看板搭建
文章图片

2.查看实时天气预报：选择想查询的地区后，需提供一系列当地的实时天气预报，直观简洁的显示出气象信息，包括温度、风向风力、空气湿度、紫外线强度、气压以及 24 小时气温变化情况等。
【搭建实战】全国天气预报看板搭建
文章图片

3.显示未来天气状况：在显示页上不仅能够看到实时天气播报，还需要显示未来 4 天的天气状况。具体包括白天和晚间天气情况、当日最高最低气温以及风力风向。
【搭建实战】全国天气预报看板搭建
文章图片

4.天气 API 的选择：API 方面，这里选择了国内最知名的高德天气 API ：https://lbs.amap.com/api/webs...，对于个人账户，高德提供每日免费的 5000 次查询限额，数据方面则提供了气温、风向、湿度等多类数据。
【搭建实战】全国天气预报看板搭建
文章图片

二、 开始搭建 【【搭建实战】全国天气预报看板搭建】在本例搭建中主要用到了下述组件：

  • 文本（Text）
  • 级联选择器 (Cascader）
  • 表格（Table）
  • 容器（Container）
  • 自定义组件 (Custom Component)
  • 图表 (Chart)
步骤：
1.根据需要拖拽右侧组件搭出应用框架，本例中码匠布局如下图，读者也可以根据美观和功能自己设计。
【搭建实战】全国天气预报看板搭建
文章图片

码匠使用小技巧：
在画布中拖拽组件时，其余组件的边框和排布会一并显示出来，应用开发者可以利用该线条对齐组件、合理布局。
2.修改组件的属性值填充细节，这里码匠修改了组件名称和一些组件外观上的设置，例如组件中文字的位置和对齐方式等。
【搭建实战】全国天气预报看板搭建
文章图片

码匠使用小技巧：
合适的组件名能让应用后续的修改更方便，左侧的数据浏览面板也能帮助您快速定位组件。
3.选择合适的数据源进行设置：码匠将常见的几款数据库类型及 API 帮助开发者配置完成，开发者只需选择想要接入的数据类型，简单填写表单即可完成配置。
【搭建实战】全国天气预报看板搭建
文章图片

4.创建查询并将查询结果和组件进行数据绑定，例如：下图中的级联选择器配置了中国省市直辖市的区号信息，查询中调用高德天气API接口并传入具体区号，这样就得到了该地区相关天气数据。
【搭建实战】全国天气预报看板搭建
文章图片

【搭建实战】全国天气预报看板搭建
文章图片

码匠搭建应用常用步骤：
  1. 快速连接数据源 & 创建查询
  2. 确定组件布局并拖放组件，使用 JavaScript 表达式绑定数据
  3. 设置查询和组件的事件触发，提供响应式 UI 交互
5.应用至此就已搭建完成了，用户可以在右上角点击预览查看应用或点击权限邀请他人一起查看、编辑，还可以点击「···」选择发布或导出。下图展示了权限管理相关界面：
【搭建实战】全国天气预报看板搭建
文章图片

码匠使用小技巧：
善用历史记录功能可以减少许多不必要的麻烦，在多人协作修改应用时尤为重要。
更多码匠模板参考及使用技巧 【搭建实战】全国天气预报看板搭建
文章图片

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

    推荐阅读


    上一篇：硬之城携手阿里云 Serverless 应用引擎（SAE）打造低代码平台

    下一篇：Google Cloud X Kyligence｜如何从业务视角管理数据湖（）