LinkDevelop实践----Bone Web 框架的第一个项目Hello World

简介: 物联网全栈教程-从云端到设备(九) 一 这一篇文章零妖带你学习全宇宙最简单的网页应用开发框架:Bone Web 框架,这是一个通过敲代码来制作网页的框架,非常适合不需要华丽界面的物联网项目。如果你动手操作,零妖保证三十分钟之内能做出来一个Web应用,体验空前的成就感(深入地做一个好的Web应用就需要你再继续研究了)。

物联网全栈教程-从云端到设备(九)


关注零妖的微信公众号,获取第一手物联网的技术干货:  LINGYAOIOT


这一篇文章零妖带你学习全宇宙最简单的网页应用开发框架:Bone Web 框架,这是一个通过敲代码来制作网页的框架,非常适合不需要华丽界面的物联网项目。如果你动手操作,零妖保证三十分钟之内能做出来一个Web应用,体验空前的成就感(深入地做一个好的Web应用就需要你再继续研究了)。

这篇文章要介绍安装两个电脑软件,用来编写和调试网页代码,顺便再“弄”一个 Hello World 的代码来体验一把网页编写的感觉(别担心,不会让你敲代码的,零妖教你的是如何移植官方提供的例程代码)。下篇文章再介绍如何与阿里云服务器以及我们的物联网设备对接,当然是通过移植例程的方法来做的喽。

 

首先安装的是 Node.js 这个软件,版本号是node-v8.11.1。请你打开下面这个网址,通过详细阅读阿里云官方文档来了解如何安装。

https://bone.aliyun.com/bone-web/bonewebsdk.html?name=zm1rpl

零妖在这里总结一下安装步骤:

1:下载Node.js这个软件,并且安装到你的电脑上(就和安装电脑QQ一样简单,如果你不会弄,那老哥也救不了你啊兄弟),这个软件的下载地址如下: www.nodejs.org/zh-cn   

2:下载并安装 VSCode 这个软件,这个软件对于90%的程序员来说应该是标配的,自行百度下载。

3:下载并安装谷歌浏览器,这个可是必备的,要设置为系统的默认浏览器,因为调试代码要用到。

4:打开Windows的命令行窗口,复制几条命令进去再敲回车就行了。下面会具体说咋弄。

5:打开 VSCode 这个软件,简单设置一下。下文将会介绍方法。

6:只需要敲一行代码,助你新建一个Web应用!

 

你要保证自己已经安装了Node.js这个软件。

正式开始之前,你需要去阿里云的 Bone.aliyun.com ,然后点击右上角的登陆,进入Bone开发框架的官网。再点开一个网页,获取一个系统自动分配的账号密码,我们把它叫做“bnpm账号信息”。这个在接下来的安装过程中会用到。

 5369427001a7eda00d98d49eaded1a8e215c491f

 

Windows的电脑系统都会有一个叫做 命令行 的东西,进入的方法如下(WIN1064位系统):

 1412a42652bdd9033ab9865c6252241b2e36cbad

进入命令行的界面之后,需要依次运行如下3条命令,你需要复制一条命令,粘贴上去敲回车执行完毕,然后再复制一条执行。

第一步: npm install -g bnpm --registry=https://npm.aliplus.com/api

第二步: (这一步要根据提示输入bnpm账号和密码) bnpm login

第三步: bnpm install -g @bone/bone-cli

完成。

 

接下来设置VSCode这个软件。要保证已经安装了VSCode和谷歌浏览器。好了,打开VSCode吧。

 f31bc92e4c3c683ee939be8f9500f5ff9c2af033

 

搜索并安装如下三个插件:

第一个: Debugger for Chrome

第二个: npm

第三个: Node.js Modules Intellisense

完成。

至此,开发Web应用(也就是网页)所需要的所有准备工作都已经完成,零妖给你两分钟时间去做人生第一个Web应用  Hello World !

第一步: 在桌面新建一个文件夹,名字就叫做 Web 吧。你可以自己起名字。

第二步: 进入这个文件夹,如下图进行操作。

65dd604b9393c43e50b807ba4d16cd6985a41c52

 

第三步: 输入  bone init  ,然后敲回车,接下来会让你选择要新建的项目类型,我们选择Web应用就行了。让你输入的应用名称和应用ID随便弄个,这次是做测试的,先不要管那么多。

dc35acae49dd0d9d0f1bd2a6ce5a23cf74404f84

 

通过这一行代码,你已经完成了第一个Web应用的创建工作了,接下来零妖老哥教你如何查看你的网页。

第四步: 输入 bone start ,然后敲回车。等待十几秒左右,谷歌浏览器就会自动弹出来哦!

 fda7a17c3875456421c7c600d7b20c221046e2e6

 

谷歌浏览器自动弹出并显示如下信息:

53febb92449f01b1c6c258083d8ed2383dba7a9a

 

恭喜你,你的第一个基于Bone开发框架的应用程序,已经通过一行代码完成了!

不要着急去想什么编程语法,零妖告诉你用这个框架编写代码实质上是符合JS语法规范的,但是你完全不用立马去学习JS语法规则,也不用学习HTML。正确的学习方法是,当你用到某个功能的时候,去找一下官方对这个功能的描述以及提供的例程代码,然后移植它,修改它为己所用即可。

下一篇文章,咱们来移植一个仪表盘,并打通设备到网页的数据!

 

相关实践学习
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
目录
相关文章
|
2月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
353 1
|
1月前
|
开发框架 前端开发 Go
【GoGin】(0)基于Go的WEB开发框架,GO Gin是什么?怎么启动?本文给你答案
Gin:Go语言编写的Web框架,以更好的性能实现类似Martini框架的APInet/http、Beego:开源的高性能Go语言Web框架、Iris:最快的Go语言Web框架,完备的MVC支持。
334 1
|
3月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
481 64
|
5月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:路由、中间件、参数校验
Gin框架以其极简风格、强大路由管理、灵活中间件机制及参数绑定校验系统著称。本文详解其核心功能:1) 路由管理,支持分组与路径参数;2) 中间件机制,实现全局与局部控制;3) 参数绑定,涵盖多种来源;4) 结构体绑定与字段校验,确保数据合法性;5) 自定义校验器扩展功能;6) 统一错误处理提升用户体验。Gin以清晰模块化、流程可控及自动化校验等优势,成为开发者的优选工具。
|
4月前
|
安全 JavaScript Java
java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
本项目为一个完整的JavaWeb应用案例,采用Spring Boot 3、Vue 3、MySQL、Redis等最新技术栈,涵盖前后端分离架构设计、RESTful API开发、JWT安全认证、Docker容器化部署等内容,适合掌握企业级Web项目全流程开发与部署。
315 0
|
5月前
|
开发框架 安全 前端开发
Go Web开发框架实践:模板渲染与静态资源服务
Gin 是一个功能强大的 Go Web 框架,不仅适用于构建 API 服务,还支持 HTML 模板渲染和静态资源托管。它可以帮助开发者快速搭建中小型网站,并提供灵活的模板语法、自定义函数、静态文件映射等功能,同时兼容 Go 的 html/template 引擎,具备高效且安全的页面渲染能力。
|
5月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
5月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
172 1
|
6月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
223 7
|
6月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。