APICloud

APICloud 查看完整档案

北京编辑  |  填写毕业院校APICloud  |   运营 编辑 www.apicloud.com 编辑
编辑

APICloud是国内低代码开发平台的引领者与效率革命的探索者,基于对云原生、DevOps、混合开发等能力的持续集成,我们完成了从移动开发向低代码开发平台的演进,并形成了坚实的生态壁垒和先进的敏捷开发能力。在APICloud低代码开发平台,可将原有数月甚至数年的开发时间成倍缩短,从而帮助企业降本增效,轻松应对创新性数字化挑战。

个人动态

APICloud 发布了文章 · 9月18日

APICloud开发者进阶之路|【案例源码】js把年月日时间转化成刚刚,几分钟前,几小时前,几天前

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <script> 
 var pretime = "2018-04-07 14:38:16";
 
 var minute = 1000 * 60;
 var hour = minute * 60;
 var day = hour * 24;
 var halfamonth = day * 15;
 var month = day * 30;
 
 //这是第一次打开页面时调用
 getDate(pretime);
 
 //然后再每隔一分钟更新一次时间
 setInterval(function() {
 getDate(pretime);
 }, 60000);
 
 function getDate(dateTimeStamp){
 
 if(dateTimeStamp==undefined){
 
 return false;
 }else{
 dateTimeStamp = dateTimeStamp.replace(/-/g, "/");
 
 var sTime = new Date(dateTimeStamp).getTime();//把时间pretime的值转为时间戳
 
 var now = new Date().getTime();//获取当前时间的时间戳
 
 var diffValue = now - sTime;
 
 if(diffValue < 0){
 console.log("结束日期不能小于开始日期!");
 }
 
 var monthC =diffValue/month;
 var weekC =diffValue/(7*day);
 var dayC =diffValue/day;
 var hourC =diffValue/hour;
 var minC =diffValue/minute;
 
 if(monthC>=1){
 console.log(parseInt(monthC) + "个月前");
 }
 else if(weekC>=1){
 console.log(parseInt(weekC) + "周前")
 }
 else if(dayC>=1){
 console.log(parseInt(dayC) +"天前")
 }
 else if(hourC>=1){
 console.log(parseInt(hourC) +"个小时前")
 }
 else if(minC>=1){
 console.log(parseInt(minC) +"分钟前")
 }else{
 console.log("刚刚")
 }
 }
 
 }
</script>
 </body>
</html>
复制代码
查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 9月18日

快速入门前端开发,你只需要这4步

1.建立工作环境

你可以把你的工作环境看作是办公室的延伸。它就像一个虚拟的桌子,里面有各种各样的工具,可以让你的代码运行起来。

以下是新手必备

代码编辑器:代码编辑器,如Sublime Text、Brackets和notepad++,类似于普通的旧式纸质笔记本,你可以输入任何你想要的东西。

理论上,可以使用常规的文本编辑器,如notepad (Windows)或TextEdit (OS X),但是一 些代码编辑器的代码着色、自动完成和实时预览等特性可以使编码更容易、更具交互性。

框架:框架是代码、组件和样式的集合,它们使生成web应用程序变得相对快速和容易。有像Bootstrap和Foundation这样的CSS框架,也有像AngularJS和React这样的JavaScript框架。

CSS框架本质上是预定义样式和web组件(如导航条、页脚、卡片、排版元素和网格)的库。avaScript框架类似,但它们可以满足特定于JavaScript的需求。稍后将进一步介绍CSS和JavaScript。

ResetCSS: ResetCSS就像Eric Meyer, HTML5 Docto和Yahoo!是一个包含一组标准化CSS样式的文件,这些样式被认为是最佳实践,并为页面提供了一致的外观基准。通常由ResetCSS修改的样式与行高、字体和标题大小、边框间距、列表样式等元素相关。

CMS:内容管理系统是一套复杂程度不同的套件,网站管理员可以轻松地上载,修改和管理其网站上的内容/资产。随着网站内容的增加,CMS会让你的工作变得更加简单

流行的CMS包括:WordPress、Joomla、Drupal、Magento和Shopify。后两者是非常适合于电子商务网站的CMSs。事实上,你可以在Magento和Shopify的可用性比较中了解更多。

FTP客户端:文件传输协议(FTPs)允许在的计算机和web服务器之间传输文件。当你探索web开发的世界时,毫无疑问,你需要向服务器传输大量的文件,从你的HTML、CSS和JS文件开始,到你的图片、音乐或任何你希望提供给访问者的东西结束。

一些流行的FTP客户端有:CyberDuck, Filezilla和transmission。

浏览器:这似乎是一个愚蠢的时刻,但是您对浏览器的选择可以决定你最终产品的很多方面。例如,Mozilla已经在其Firefox Developer Edition (FDE)浏览器中构建了一个优秀的开发套件。

Chrome、Firefox和Edge都内置了类似的工具(尽管不那么健壮)。开发工具可以帮助检查在其他站点上使用的代码,调试代码,编辑样式,测试响应等等。

2.了解这些理论知识

响应式设计:web设计和开发中最热门的话题之一是响应式web设计(RWD),它指的是设置屏幕大小的路径点,告诉页面默认为更适合给定大小的特定布局。RWD的崛起源于停滞不前的网页设计,它根植于无法响应浏览器宽度变化的固定页面布局。新的实践允许对可用性进行优化,这超出了使用固定设计模型可以实现的范围。

移动优先:移动优先是现代网页设计的原则,与响应式网页设计密切相关。Mobile first建议你应该先设计你的页面的移动布局,然后再设计每个更大的格式。

从理论上讲,通过遵循“ 移动优先”的方法,可以使移动用户(占总用户数量非常大)的体验更加友好。传统上,随着屏幕尺寸变小,网站会按功能和内容缩小规模。然而,随着这些年来移动用户数量的巨大增长,这已成为全球设计师的主要关注点。

MVP:尽管它们在B2B中比在个人项目中更重要,但是MVP(最低可行产品)构建是必不可少的术语。MVP背后的想法是,你仅构建必需的功能,而避免了可以为第二个版本保存的功能。

作为一个web开发新手,建议在学习的同时实施这个策略。通过构建您想要的最基本的版本,你将有机会探索核心概念和策略,而不会受到复杂功能。随着你对开发、设计语言和其他相关原则的逐渐熟悉,你可能会想避开MVP构建并探索新的信心。

3.开始使用这些语言

Web开发以三种核心语言为根基,它们几乎涵盖了您在internet上看到和使用的所有内容。单独使用时,HTML、CSS和JavaScript几乎毫无用处。当彼此结合使用时,我们可以看到无限的可能。

HTML:作为一种标记语言,HTML负责网页上文本的流程和结构,并提供了一个系统,用于标记该文本,以便使用CSS进一步增强。

CSS:层叠样式表负责描述和定义标记为HTML的文本的视觉方面。使用CSS,你可以定义颜色,大小,布局,动画等等。

JavaScript:这是目前最流行和发展最快的网络语言之一。JavaScript主要用于向web元素添加交互性。这种可能性实际上是无限的。

除此之外,可以使用APICloud Studio 、AVM框架、Foundation,Bootstrap和Skeleton之类的框架来补充学习内容,这些框架为你提供了预构建的模块,供你随意使用。

APICloud Studio是一个全流程的开发工具,基于业界领先的代码编辑器-Vscode深度定制,可以快速构建多端应用,面向Android、iOS、Web、App、小程序打造应用, 都可以快速编译对应终端的代码。可以有效的解决开发者多端开发这个让人头疼的问题。

APICloud Studio试用地址

语法框架现在也很多,随着对于前端开发工作的熟悉深入,也会形成自己的一套理论体系

前面说到的AVM是一个跨端的高性能 JavaScript框架,更趋近于原生的编程体验,它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型,比较适合高度定制化的项目。

AVM框架使用地址

4.开始你的工作

在开发过程中:当您编写组成web页面的代码时,您可能希望看到它的运行情况,以便您能够看到哪些工作,哪些不工作,以及哪些可以更好地执行。虽然可以实时完成,但强烈建议使用本地服务器,因为这样可以将风险降到最低。

本地服务器是位于计算机上的一个软件集合,它允许你查看和进行网页交互,就像你在互联网上一样。

开发后:一旦完成(或大部分完成)站点,就可以将其从本地服务器迁移到实际服务器上了。这意味着需要支付服务器费用,购买域名,并使用FTP客户端将所有相关文件传输到服务器。一旦完成,世界上任何人都可以去你的网站,看到你的工作成果。

一些流行的托管站点是:WordPress、WIX、GoDaddy,BlueHost,InMotion和HostGator。你可以在此处研究可用的域名,然后在此处购买。如果您想尝试崭新的事物,请查看Google Domains,它目前处于测试阶段。

查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 9月12日

APICloud开发者进阶之路|【案例源码】简单时间轴

基于业务上的需要,自己做了一个简单的时间轴例子,网上找到色调,先放图。

image

因为想做透明头部,但是win页面打开frm页面后,会遮住win页面的头部,所以就取消了win页面的header标签,下面是win页面的代码:
`

<!doctype html>  
<html>  
<head>  
 <meta charset="utf-8">  
 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>  
 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">  
 <link rel="stylesheet" type="text/css" href="../css/aui.css" />  
</head>  
<body>  
  
  
</body>  
<script type="text/javascript" data-original="../script/api.js"></script>  
<script type="text/javascript">  
 apiready = function(){  
 api.parseTapmode();  
 var body_h = $api.offset($api.dom('body')).h;  
 api.openFrame({  
 name: 'merchant_order_details2_frm',  
 url: 'merchant_order_details2_frm.html',  
 bounces: false,  
 rect: {  
 x: 0,  
 y: 0,  
 w: 'auto',  
 h: 'auto'  
 }  
 })  
 };  
 function closeWin(){  
 api.closeWin({  
 });  
 }  
</script>  
</html>  
复制代码

frm页面,先用aui写了一个头部导航条,然后创建了一个class名为container的div容器,scoll是滚动条容器,因为要给滚动容易一个高度,所以我在js里面计算了屏幕高度减去头部导航条的高度,对css理解不深,所以有不对的地方还望大佬指正。
`

<!DOCTYPE HTML>  
<html>  
  
  
<head>  
 <meta charset="utf-8">  
 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />  
 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">  
 <title>Hello APP</title>  
 <link rel="stylesheet" type="text/css" href="../css/aui.css" />  
 <style>  
 html {  
 height: 100%;  
 }  
  
  
 body {  
 height: 100%;  
 background: -webkit-linear-gradient(30deg, #383B86, #D983AF);  
 /* Safari 5.1 - 6.0 */  
 background: -o-linear-gradient(30deg, #383B86, #D983AF);  
 /* Opera 11.1 - 12.0 */  
 background: -moz-linear-gradient(30deg, #383B86, #D983AF);  
 /* Firefox 3.6 - 15 */  
 background: linear-gradient(30deg, #383B86, #D983AF);  
 /* 标准的语法(必须放在最后) */  
 }  
  
  
 #container {  
 width: 100%;  
 display: -webkit-flex;  
 display: flex;  
 flex-direction: column;  
 justify-content: flex-start;  
 align-items: flex-start;  
 }  
  
  
 .timeLine {  
 width: 100%;  
 display: -webkit-flex;  
 display: flex;  
 flex-direction: row;  
 }  
  
  
 .timeLineImg {  
 width: 20%;  
 display: -webkit-flex;  
 display: flex;  
 flex-direction: column;  
 justify-content: center;  
 align-items: center;  
 }  
  
  
 .timeLineLeft {  
 height: 100%;  
 width: 1px;  
 border-left: 1px solid white;  
 }  
  
  
 .timeLineInfo {  
 width: 80%;  
 }  
  
  
 .timeLineInfoTitle {  
 font-size: 20px;  
 color: white;  
 }  
  
  
 .timeLineInfoIntroduce {  
 font-size: 16px;  
 color: white;  
 }  
  
  
 .timeLineInfoTime {  
 font-size: 12px;  
 color: #CA92C4;  
 }  
 .scoll {  
 overflow: auto;  
 margin-top: 65px;  
 }  
</style>  
</head>  
  
  
<body>  
 <header class="aui-bar aui-bar-nav" style="padding-top:25px;background-color:rgba(0,0,0,0);position: fixed;">  
 <a class="aui-pull-left">  
 <span class="aui-iconfont aui-icon-left"></span>  
 </a>  
 <div class="aui-title">时间轴</div>  
 <a class="aui-pull-right aui-btn aui-btn-outlined">  
 <span class="aui-iconfont aui-icon-menu"></span>  
 </a>  
 </header>  
 <div id="container">  
 <div class="scoll">  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img data-original="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle">状态:已申请</div>  
 <div class="timeLineInfoIntroduce">在广东广州分拨中心进行装车扫描,发往:四川成都分拨中心</div>  
 <div class="timeLineInfoTime">2018-11-18/周日 21:33:34</div>  
 </div>  
 </div>  
 </div>  
 </div>  
</body>  
<script type="text/javascript" data-original="../script/api.js"></script>  
<script type="text/javascript">  
 apiready = function() {  
 $api.css($api.dom(".scoll"),"height:"+(api.frameHeight - 65)+"px")  
 api.parseTapmode();  
 };  
</script>  
  
  
</html>  
复制代码
查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 9月12日

12个前端开发必备开发的工具

在这篇文章中,我们向您展示了一个将工具和服务分类为bucket的框架,它可能会在前端开发过程中对您有所帮助。在每个类别中,我们都会讨论一个受欢迎的选择,同时也会给您一个可供选择的选择,以防您不同意我们最初的选择。让我们毫不迟疑地进入面向前端开发者的工具和服务的世界。

使用正确的工具集对于提高工作效率和更快地完成工作通常是至关重要的。然而,随着可供选择的工具和服务越来越多,可能很难选择适合您的工作风格的工具和服务。

1.APICloud Studio3

基于Vscode深度定制,可以快速轻松地构建多端应用。并且为 Windows、Mac和Linux提供了出色的开发体验,开发者可以使用自己喜欢的操作系统进行开发。

  • 多端编译:针对现在多终端编译需求,无论是面向Android、iOS、Web、App还是小程序打造应用, Studio3都可以帮助开发者快速编译对应终端的代码。
  • AVM语法和扩展API支持:借助Vscode的语法突出显示和自动完成功能, Studio3为AVM代码段、格式、变量类型、函数定义和导入的组件以及APICloud扩展API等,提供了舒适的高亮标记、完善的智能帮助提示和自动完成功能。
  • 实时预览和真机调试:可直接在编辑器中调试代码和预览效果,或者使用WiFi、USB启动AppLoader,在真实的手机中进行调试和功能验证,并使用断点、调用堆栈和交互式控制台进行调试。
  • 简单高效的代码管理:支持Git进行代码管理,同时內置SVN简化复杂的Git操作,提供简洁明了的代码管理过程。可以直接在编辑器中检査代码差异,添加文件并进行提交,或者从云端检出所托管的代码到编辑器
  • 云端一体:保持和云端打通,在编辑器中即实现创建/导入项目、云编译、自定义Loader,以及模块管理等操作。
  • 可扩展和可定制:完全保留和兼容Vscode插件机制。如果需要更多功能,可通过安装扩展实现添加新的语言、主题、调试器、连接到其他服务等,得益于Vscode优秀的插件管理功能,使用扩展程序在单独的进程中运行,它们不会降低编辑器的性能。

[Studio3帮助文档]

[Studio3下载地址]

技术社区论坛答疑

2.文本编辑器:Sublime Text

前端开发人员花了大量的时间编码,这通常是在文本编辑器或IDE上完成的。如果使用的是文本编辑器,那么需要确保它可以通过为执行冗余和平凡的任务来提高工作效率。其中一些任务包括自动完成、文本突出显示、增强的搜索和替换操作,以及制表符和空格之间的转换。

文本编辑器的常见选择是Sublime text,这是一种跨平台的基于GUI的文本编辑器。Sublime Text允许在文件和项目之间无缝地转换,可以将注意力更多的集中在代码上。虽然它提供了相当多的功能,但是由于它的可扩展性,Sublime Text的受欢迎程度直线上升。https://www.sublimetext.com

一次性使用Sublime Text的许可证价格为80美元,不过也有一个功能齐全的不定时试用版。

Sublime Text的一个很好的替代品是Atom,它是由GitHub创建的一款免费和开源的文本编辑器。它提供了可以通过Sublime Text获得的各种各样的功能,还添加了与Git和GitHub桌面的集成。此外,Atom还提供了一种电传类型特性,允许协作者在同一文档上协同工作。

虽然Sublime Text和Atom是在本地系统中工作的很好的选择,但是您可能觉得有必要使用一个非gui的基于终端的文本编辑器。当远程登录到服务器并直接更新服务器上的文件时,可能需要使用这样的工具。流行的基于终端的文本编辑器是VIM和Emacs。

3.共享组件:Bit

使用Bit(Github),可以轻松地从任何代码库中“获取”组件并将它们共享到bit.dev中的集合(模块化库)中。

Bit分别对每个组件进行版本控制,当您准备共享它时,它将在一个独立的环境中构建和测试,以确保正在共享真正可重用的、没有耦合到项目的组件。

可以使用Bit的搜索工具和playground浏览集合,npm安装一个共享组件,就像任何其他包一样,或者对它进行Bit导入,以便在本地开发环境中修改它(甚至将修改后的版本推回共享集合)。

这是逐步构建模块化组件库的好方法。每当构建一个值得共享的可重用组件时,只需将其推入共享位集合。

使用它来改进与团队的协作,最大化代码重用,构建更可伸缩和可维护的代码,并保持一致的UI。

Bit支持React,通过TypeScript, Vue, Angular等多种方式进行反应。

4. 实时调试: Chrome DevTools

当你在浏览器上测试你的最终产品时,实时调试工具可以帮助你实时更改网页。你可以操作DOM、编辑CSS和运行自定义JavaScript来在不同的级别调试代码。

内置在谷歌Chrome和其他基于Chrome浏览器中的Chrome DevTools可以帮助你在运行中执行调试任务。谷歌Chrome占据了将近三分之二的市场份额,而基于Chrome的底层浏览器也占有相当大的市场份额。所有这些浏览器都配备了Chrome DevTools的一个版本,这使得它成为你选择进行实时调试的最容易使用的工具之一。

自从谷歌Chrome发布以来,Chrome的开发工具就已经存在了,在这一类别中特别要提到Firebug,它是在2006年发布的。Firebug现在已经停产了,但是Firefox开发人员工具是基于Firebug的代码开发的。

5.用于源代码版本控制的GUI:GitHub Desktop

无论你的经验多么丰富,使用版本控制系统来管理源代码通是一个不错的选择。如果是在团队中工作,版本控制有助于跨同事管理代码。在过去的十年中,我们看到了分布式版本控制系统的兴起,其中最流行的两个选项是Git和Mercurial。虽然它们很容易安装在本地机器上,但是我们在这篇文章中讨论两个GUI工具。

GitHub Desktop是GitHub用于管理Git存储库的桌面GUI工具。它只支持Windows和Mac操作系统。GitHub Desktop提供了常见的Git架构的图形化替代方案。如果使用Atom,它与GitHub桌面集成得相当好。GitHub Desktop很容易与GitHub存储库集成,不访问网站就可以管理它们。GUI工具在代码审查和浏览项目历史期间特别有用。

如果使用Mercurial而不是Git,可能想尝试使用BitBucket的SourceTree。SourceTree只支持Windows和Mac操作系统。如果你使用的是基于Linux的操作系统,那么最好的选择是尝试GitKraken,尽管它的免费版本功能有限.

6. 数据可视化工具: D3.js

网民每天产生大量的数据。这些数据被收集、处理和分析,以产生见解。在分析数据的过程中,一个关键的步骤是将发现呈现给决策者。一个决策者可能是一个用户,他正在展示自己的购物习惯。让您快速可视化数据的图形化工具在过去几年得到了流行。

D3.js是一个流行的JavaScript数据可视化库。它允许从多个来源读取数据,并且根据实际需求来进行操作,快速创建可视化内容。它允许矢量图形在需要时具有很大的灵活性。D3.js中的高级函数也允许开发者添加动画和图表的交互性。同时D3.js拥有10年的历史,已经发展成为一个相当大的社区。虽然早期版本的D3.js对于初学者来说很难理解,但较新的版本对用户更加友好。

D3.js提供了大量可供选择的函数。如果想要一个更简单的界面来创建图表,您应该尝试dimple。Dimple是在D3.js上开发的一个包装器,它能够更快地创建图表。

7. Code Playground: Codepen

我们可能偶尔会需要与同行共享带有完全交互式预览的前端代码片段以获得改进意见。在这种情况下,代码游乐场是一个基于云的IDE,它允许使用HTML、CSS和JavaScript编写和预览代码片段。可以与同事共享这些片段,或者将它们嵌入到帖子中。它们在编写文档、教程和指南时非常有用。

CodePen允许开发人员创建其工作演示,以在平台和设备之间共享。可以在CodePen演示和项目中使用外部托管的资源。如果需要处理,CodePen可以“分叉”来自其他开发人员的演示。CodePen是免费使用的,付费版本起价为$ 8 / 月

作为CodePen的另一种选择,JSFiddle是比较古老的Code Playground之一,它是许多后续工具的灵感来源。

8.设计灵感:Adobe Color

在你在画板上创造那些令人惊叹的设计之前,你可能希望寻找灵感。Adobe Color(以前的Kuler)是一个颜色主题应用程序,能够创建、浏览和共享颜色主题,然后可以与其他Adobe应用程序同步。颜色的使用是设计的一个重要部分。如果你想发现很好的颜色搭配,你一定要试试这个工具。

Dribbble是一个设计师社区, Dribbble允许你有选择地分享你的项目(以镜头形式)来分享你的工作并获得反馈。

9.辅助工具:JAWS

Web可访问性是_Web_内容对于残障用户的可阅读和可理解性。根据你的最终用户的国家,可能需要遵守可访问性法律。除此之外,可能还需要遵守W3C设置的可访问性标准。对于网页的可访问性有一些简单的检查,除此之外,还需要依赖某些工具来帮助我们发现潜在的漏洞。在本节中,我们将讨论三大类web可访问性工具。

相当一部分视力不全或没有视力的用户依靠屏幕阅读器来阅读web内容。屏幕阅读器,顾名思义,是为用户阅读网页内容以进行交互。JAWS是一款流行的Windows屏幕阅读器。当你测试你的网站时,确保你通过屏幕阅读器来检查它的兼容性。

WAVE是一种评估互联网上任何网站可访问性状态的工具。它将调查结果归纳为三类:错误(红色)、警告(黄色)和其他。

某些有癫痫倾向的用户可能对屏幕上闪烁的内容很敏感。光敏癫痫分析工具(PEAT)是一个在Windows上的工具,可以让你检查你的网站是否有任何这样的漏洞。

10.站点速度监控工具:PageSpeed Insights

网站速度是决定你的搜索排名的一个重要因素。除了SEO优化,网站速度在页面加载过程中对用户留存也起着至关重要的作用。PageSpeed Insights是谷歌自己的站点速度监控工具。它是免费使用的,只需要输入页面的URL就可以执行测试。可以选择测试如何在移动设备或桌面中工作,但无法修改测试位置。该工具提供了具体的行动项目,有助于提高网站速度。

PageSpeed Insights是一个评估网站速度的好工具,用 WebPageTest,一个免费和开源的工具来测试你的网站速度也是一个不错的选择。它允许您修改设备、浏览器、测试位置和连接节流。此外,还可以在WebPageTest套件上编写详细的测试脚本。

11.通讯工具:Slack

在过去,电子邮件通常是开发者沟通的唯一媒介。代码审查和通过电子邮件共享文件等任务可能会变得难以跟踪。Slack是一个基于云计算的即时消息传递平台,它集成了大量相关服务,将通信带到单一的媒体上。例如,你可以集成Slack和GitHub o,让你更新最新的存储库。还可以将它与代码跟踪器集成,以便在报告新bug时向特定的团队成员发出警报。甚至可以创建和配置自己的聊天机器人来响应自定义命令。

在整合了Atlassian公司的Hipchat之后,Slack巩固了其作为市场领导者的地位。如果你想要一个Slack的替代品,你可以试试微软的Yammer,它在与微软套件中的应用程序集成方面做得很好。

12.跨浏览器测试工具

跨浏览器测试是跨各种设备和浏览器评估web应用程序的过程。你可能应该选择浏览器-设备组合来使用用户统计数据进行测试。执行此类测试的最佳工具是BrowserStack,它可以提供对大量实际设备的访问,以便在其上测试web应用程序。

BrowserStack利用Selenium服务器在保存在远程位置的实际设备上自动化测试。在部署应用程序时,可以在预先确定的设备列表上触发一系列测试。当测试结束时,可以访问通过仪表板执行的测试的截图和视频。

BrowserStack的定价是基于使用情况的,不过你可以免费试用。对于小企业开发人员来说,这个价格可能难以负担,在这种情况下,应该尝试下Selenium,它是一种通过浏览器自动进行跨浏览器测试的工具Selenium的缺点是只能使用自己的设备进行测试。

对于前端开发人员的最佳工具的最后思考

在这篇文章中,我们探索了各种可以帮助前端开发者提高工作效率的工具。你在开发周期中还使用了哪些其他工具?请在下面的评论中告诉我们。

查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 9月3日

APICloud数据云3.0 -- 让后端业务更简单

近年来,各类移动端应用层出不穷,app、小程序已成为企业业务数字化的必然选择,围绕互联网产品的技术创新与开发者生态,正在历经行业发展的又一次革新。

APICloud作为国内领先的移动应用开发平台,一直致力于提供移动开发的全套解决方案。这其中,除了前端的跨平台方案外,很大一部分就是后端服务以及上线后的运维工作。APICloud提供的新版数据云3.0 就是为了为方便广大开发者简化后端开发而设计的。

APICloud数据云3.0注册试用地址:https://www.apicloud.com/data...

首先,我们来简单了解下前后端的工作在软件开发中的关系。前端的大部分工作其实是网站、app或者小程序上看到的页面展示或图形化的展示,用户使用这些前端界面完成使用操作。而后端是实现业务逻辑,操作数据的部分,前后端通过API完成相互的调用。

这就好比一部汽车,我们看到的方向盘、仪表盘等展示出来的都可以说是前端,而打火,转动方向盘等都可以理解为通过前端发给后端的API指令,在这里,那些真正让车动起来的部分就是后端了,我们虽然看不到它,但它是真正让应用正常运行的核心部分。不管是移动应用的开发,小程序的开发,web网站的开发等等,都需要后端来处理其中的业务逻辑,而且后端的开发在大部分项目中实际占据了比较大的比重。

如上图,形象的展示了前后端在整个项目开发中的比重和关系,后端的工作虽然用户不能直接感受到,但它却是一个核心工作。后端开发涉及到的内容广泛,技术庞杂, 但却有大量的工作是可以复用的。APICloud 正是结合了多年的公有云开发经验,开发了一套以模块驱动的开发方式,为开发者提供了简便的可复用的后端云服务,极大方便开发者快速实现自己的业务需求。

具体来说,APICloud的新版数据云主要有以下特点:

强大的云数据库功能

我们目前提供的云数据库彻底消除了用户搭建、维护自己数据库的工作,降低了使用难度。它有以下特点:可以方便的在界面对数据库内容进行操作及定制查询语句;支持数据的高效读写;针对关键业务,APICloud支持事务;支持数据表建立索引的功能;针对数据库的高可用性和数据安全我们也提供了副本集以及数据的定期备份。

模型驱动开发模式

模型是数据云的一个核心概念,可以理解为业务逻辑中的一个个模块,这些模块之间的互相调用实现了后端开发的一整套业务逻辑。模型可以被映射到一个数据表上,针对这个表的相关操作方法都可以定义在这个模型下。这样一个后端的业务逻辑就变成了一组模型的组合,开发者不用维护一堆庞杂的函数集合,只需要把相应的业务代码写在模型下即可。既方便功能模块的复用,又有很好的代码组织能力。

个性化云函数类型支撑业务

APICloud数据云3.0提供了用户自定义各种云函数的功能。这个功能赋予开发者更强的定制业务逻辑的能力,同时我们提供的框架也极大简化了用户的编码工作。如远程函数可以让用户像编写普通函数一样迅速生成REST API 风格的接;中间件函数可以用来实现接口的鉴权等;而全局对象则提供了一种模型之间数据和方法共享的机制。不同类型的数据表的钩子函数则提供了数据库操作时的自动调用的入口,所有的这些都极大方便了开发者根据需要快速实现业务逻辑。

丰富的第三方包接入**

新版数据云使用JS作为后端开发语言,我们支持npm包的接入,极大方便了用户使用一些常见的第三方模块。

模型库代码的快速接入

作为一名程序员,代码复用无疑是实现高效开发的关键,很多功能,尤其是一些与第三方交互的公共方法,别人已经实现好,开发人员是没有必要重复造轮子,拿来直接使用即可。我们基于模型的开发方式使这种云端代码复用变的极为简单易用,如小程序的登录授权功能需要开发者服务器端带着小程序传来的code到微信接口服务获取openid来完成整套流程;订单的生成、退款等需要更复杂的一些加密以及同微信服务器的通信工作来实现。传统的编码工作,需要花费大量时间参考小程序相关文档完成开发调试工作,而用我们平台,只需导入微信模板库,按函数要求传入相关参数即可快速集成小程序开发相关功能,通过复用极大提高了开发效率,让开发者真正做到只专注与自己的业务本身。

便捷的接口联调机制

接口开发过程中一定会涉及到接口管理。对于普通项目开发,后端会维护每个接口的文档,并通过工具调用REST 接口进行自测和联调。从实践中看,这种方式弊端很多,随着接口的不断修改,开发人员经常出现文档更新不及时或者文档与实现不一致等问题。同样,通过工具进行接口联调的时候也很麻烦。我们在新版数据云3.0中集成了swagger的组件,支持后端编写的远程方法自动通过swagger生成接口文档并直接在网页中进行调试,开发者无需再维护接口文档,只需在云函数编辑页面写好参数的相关描述,所有的文档信息会自动在调试页面中产生,极大的方便了开发者进行接口联调的工作。

可靠的服务扩展和数据安全

APICloud采用云原生的服务端架构,用户的服务器端能力随着流量的增加支持动态扩容。同时我们也有多种数据备份策略,保证用户在我们数据云上服务器端数据的安全。

内置管理后台

基本所有应用都涉及到管理后台,新版数据云3.0考虑到这个需求,提供了一套基于amis系统作为解决方案的管理后台。这套管理后台通过json配置以及可视化的编辑器,可以方便的实现可定制化的页面展示及数据处理。用户通过拖拽即可生成自己特定的管理后台。

服务器端的开发工作无疑在软件开发领域占据了比较重要的位置,APICloud全新发布的数据云平台恰恰结合多年的服务器端工作经验,有效提取了移动开发领域后端常见的一些功能模块;作为一款快速实现后端逻辑的产品,数据云3.0可方便的将前、后端进行连接,从而进一步补充低代码开发平台的完善能力。

查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 8月28日

APICloud Studio3.0最新功能及使用流程介绍

APICloud基于多年的技术积累及开发者生态,围绕前、后端核心技术进行了全新迭代升级,在前端技术上,全翻译式跨平台引擎Deep Engine3.0、兼容Vue / React语法特性的前端开发框架AVM、支持多终端统一的编译环境以及基于VSCode深度定制的开发工具APICloud Studio3.0成为开发者广泛关注的核心内容,本期将从APICloud Studio3.0入手,详细介绍Studio3的相关功能和使用流程。

APICloud Studio 3使用说明

APICloud Studio 3基于业界领先的代码编辑器-Vscode深度定制,可以帮助开发者快速轻松地构建多端应用,下面将详细介绍Studio3的相关功能和使用流程。

APICloud Studio 3下载地址(复制此链接PC端打开):

https://www.apicloud.com/stud...

(整体预览)

注意事项

  • svn的使用说明
  • mac版的studio3中使用的是mac本地自定的svn工具
  • windows版的studio3中有内置的svn工具,如果本地没有安装svn,会使用内置的svn工具,如果本地有安装的svn工具并且安装了命令行选项(安装svn的是有控制选项,默认不安装),会使用本地安装的svn工具
  • linux版的studio3需要手动安装svn工具(可以通过命令行安装)
  • 用studio2导出的到本地的项目,先提交代码,再用studio3云端检出
  • mac版运行的时候,studio3的存放位置不要放在Downloads文件夹下
  • 在IDE上一些跟平台相关的操作,都需要验证登录。IDE可以和云端同时在线,但是多个ide是不可以用一个账号同时在线的。
  • 更新需知
  • mac上如果有更新提示,点击重启更新后,只需等待重启即可,无需手动重启,因为是全量更新,重启时需要等待大约30秒左右。

登录  

界面右上角点击用户,弹出登录界面,输入用户名,密码登录,如图所示

创建项目

点击菜单栏项目-新建项目,在创建项目界面按照内容提示输入项目信息,如图所示

创建项目的界面有一个复选框,用来选择项目的类型(App(必选), miniapp),创建完成后会根据所选类型,生成不同类型的目录,对应项目类型,如图所示

项目导入

菜单栏选择项目-->导入项目,会弹出项目来源的复选框

  • 本地导入: 导入时会校验导入的项目是否为apicloud项目
  • 云端检出: 从apicloid后台导入项目

创建模版文件

studio3上可以创建一些模版文件,比如html,stml,js,css,json等

  • 在项目根目录上右键,可以创建html,js,css,json文件
  • 在pages目录上右键,可以创建stml,js,css文件
  • 在res目录上右键,可以创建key.xml, info.plist, mainfest.xml等文件

stml编译

菜单栏--编译项目功能,会编译项目下的stml文件,编译结果查看控制台输出

云编译

在App类文件夹上右键,选择云编译功能,打开云编译界面,做相应的操作, 如图所示

自定义loader

在App类文件夹上右键,选择自定义loader功能,打开自定义loader界面,做相应的操作, 如图所示

WiFi同步

  • 查看WiFi同步的ip和端口号
  • 顶部菜单 - 终端 - 设备列表,弹出复选框,选择通过WIFI连接新设备,查看ip
  • 左侧功能栏,选择真机同步按钮,也可以弹出复选框,选择通过WIFI连接新设备,查看ip
  • 注:连接时wifi设备要和studio3连接在同一个wifi下

  • 在项目名上右键,会弹出wifi全量和增量同步菜单,做相应的操作(同步所有wifi设备), 如图所示

  • 如有wifi设备连接时,顶部菜单 - 终端 - 设备列表,会弹出所连接的wifi设备,选择相应的设备进行同步

  • 如有wifi设备连接时,选择左侧功能栏--真机同步按钮,会弹出所连接的wifi设备,选择相应的设备进行同步
  • 注1:如果项目中有stml文件,studio3会先编译stml文件
  • 注2:进行指定设备同步时,会有相关的标记做指示,如图所示:

(1) 相关设备前有WIFI标记,表示该设备处于wifi连接状态;

(2) 相关设备前有USB标识,标识该设备处于usb连接状态;

(3) 同一个设备既可以处于wifi连接状态,也可以处于usb连接状态;进行相关操作时相关的状态

修改Wifi端口号

  • 打开设置界面,选择常用设置,修改wifi端口号

USB同步

  • 在项目名上右键,会弹出usb同步相关菜单,做相应的操作(同步所有usb设备), 如图所示

  • 如有usb设备连接时,顶部菜单 - 终端 - 设备列表,会弹出所连接的usb设备,选择相应的设备进行同步

  • 如有usb设备连接时,选择左侧功能栏--真机同步按钮,会弹出所连接的usb设备,选择相应的设备进行同步
  • 注1:如果项目中有stml文件,studio3会先编译stml文件
  • 注2:进行指定设备同步时,会有相关的标记做指示,如图所示:

(1) 相关设备前有WIFI标记,表示该设备处于wifi连接状态;

(2) 相关设备前有USB标识,标识该设备处于usb连接状态;

(3) 同一个设备既可以处于wifi连接状态,也可以处于usb连接状态;进行相关操作时相关的状态

html和stml实时预览

在html或stml编辑页面,右键弹出实时预览菜单,预览html或stml页面(如果预览的是stml页面,studio3会先编译stml文件), 如图所示

wifi真机预览

在html或stml编辑页面,右键弹出WiFi真机实时预览菜单,同步在wifi设备上预览html或stml页面(如果预览的是stml页面,studio3会先编译stml文件)

代码管理

studio3的代码管理依赖svn并基于vscode的源代码管理模块(如下图所示)实现

注:

  • windows版内置了svn工具,如果开发过程中。内置的svn出现问题的时候,可以自行安装svn工具(安装的时候要把命令行选项勾选上),windows下是有默认安装路径的可以不用配置路径,如果自定义了安装路径,安装完成后在studio3中配置svn的路径(设置--首选项--扩展--svn--配置svn path),注意配置的路径是svn.exe具体路径。
  • mac版svn用的是系统自带的svn工具
  • linux版需要开发者自行安装svn工具

代码提交

  • 在源码管理界面,在需要提交的文件上右键,选择Commit Selected,然后输入提交日志

  • 在文件或文件夹上右键,点击 更新到云端

更新代码

1、在源码管理界面,点击更多按钮,选择Update,更新项目

2、打开命令面板,输入svn:update,有两个选项,(1)Update selected:更新代码编辑页面打开的文件 (2) Update:更新项目

3、编辑器左下角选择更新按钮,更新项目

4、在文件或文件夹上右键,点击 从云端更新

查看日志

在提交代码之前想要查看文件的提交日志,可以在文件上右键-->显示日志,可以列出这个文件之前的提交日志,如下图所示

代码提示

studio3采用两种方式的代码提示

1、代码片段: studio3内置了api对象和几乎所有平台模块的代码片段

  • 模块代码片段输入方式:输入 模块名.接口名 会有相关的代码提示,选择相应的接口, 回车即可完成一段代码的自动输入
  • api对象下的代码片段输入方式:直接输入api下的接口名,选择相应的接口名,回车即可完成一段代码的自动输入

2、js代码提示: studio3将api对象和几乎所有平台模块都做了js封装

  • 输入对象名,即可调出这个对象下的所有接口,选择相应的接口,回车,输入左括弧,自动完成右括弧的输入,同时,如果这个接口有参数时,也可提示这个接口的参数

中英文切换

代开命令面板,输入:Configure Display Language,点击,选择相关的语言

以上便是APICloud Studio3相关功能使用流程介绍,APICloud Studio3支持在Windows、Mac和Linux系统上运行,在一个工具里即可完成开发工作的全生命周期流程,比如项目管理、代码编写、调试、预览、代码管理、编译发布等。

查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 8月20日

构建低代码开发生态,APICloud全面进入3.0时代

数字化转型进入下半场,企业开始更加关注IT生产力所带来的商业价值;同时,国内软件开发行业也正处在多维度的变革阶段,对于ToB行业,低代码、RPA、云原生等一系列以效率为本的技术能力正在快速崛起,围绕业务创新展开的移动开发领域,不断涌现的多端碎片化和服务云端化正改变着传统的企业数字化架构。

虽然业界大谈AI即将替代程序员,但企业招聘市场则表现出对程序员非凡的需求度,面对ToD(Developer开发者)赛道,仍然是个体量巨大的增量市场,在这其中能够面向开发者成功搭建生态的平台,实属凤毛麟角;在“剩者为王”的2020年,对于技术型平台,若能够手握技术创新与效率赋能这两把钥匙,势将开启扬帆远航的大门。

重大里程碑APICloud3.0时代

8月18日,APICloud新产品发布&生态开发者大会在线上如期举行,通过多年的技术积累,APICloud的技术能力愈发成熟,当日发布的多款前、后端迭代产品,使平台的性能得到进一步提升;在基于开发者生态所构建的商业模式中,平台的每一次迭代,都在为开发者持续赋能;而本次APICloud发布会围绕前、后端核心技术进行重磅迭代,全面进入了APICloud 3.0时代!

所谓3.0概念,在当日APICloud联合创始人兼CEO邹达演讲中进行了解读,邹达表示APICloud作为一个低代码开发平台,此次新产品发布贯穿开发全流程,其包括MADP、PaaS、DevOps以及Marketplace的各个产品线。

针对前端开发者,APICloud迭代了全翻译式跨平台app引擎Deep Engine3.0、兼容Vue / React语法特性的前端开发框架AVM、支持多终端统一的编译环境以及基于VSCode深度定制的开发工具APICloud Studio3.0,而在后端服务中,则全新发布了基于k8s技术的数据云3.0;这些全新发布的前、后端技术背后是APICloud深耕多年的平台能力,通过这样一场发布会,APICloud进入了低代码开发高性能的全流程开发阶段,同时也是平台重大迭代的又一里程碑。

APICloud开发者生态的建设,一直是平台赖以发展的重要基石,邹达介绍到APICloud生态发展过程中的四个核心要素,便是开发者、服务商、应用以及平台客户,在生态运营的数据上,迄今APICloud已有100万的注册开发者广泛使用,每天日均提交代码数量超过7000次,平均每天生成安装包超过6000个,这些数据证明了平台技术的有效性与稳定性,在发布会当天,APICloud也邀请到了众多开发者、生态合作伙伴及客户送来真挚祝福。

多端开发、AVM语法等__前端能力备受瞩目

在发布会的众多环节中,针对前端技术的重要迭代,成为开发者广泛关注的核心内容;APICloud MADP技术负责人李德兴首先介绍了新的DeepEngine3.0引擎,该引擎完全基于原生架构渲染,同时支持【混合开发】与【中间语言编译】两种模式,全翻译式原理,将Javascript编译为Native API,提供完全原生性能,突破了之前的技术瓶颈,适用于绝大多数领域。

在多端背景下,因为移动应用个性化和深入下层的应用场景,使得不同终端之间缺乏有效的复用机制,现在很多应用依然有60%的编码属于重复工作。

李德兴表示APICloud此次发布的AVM跨端框架基于标准Web Components组件化思想,兼容Vue / React语法特性,支持通过一次编码,同时编译到Android / iOSAPP、H5、以及微信小程序多个端,并支持单文件模式和单语言片段模式编写代码;同时APICloud也配套推出了多终端编译环境,全面支持使用类Html5技术实现多终端开发,无需搭建特定的终端编译环境,一键云端编译即可生成高质量目标终端代码,可用性高,有利于二次开发。

针对用户侧前端开发者需要耗费大量时间在应用界面排版上,并且在多端环境下时间成倍增加,APICloud Studio3.0基于VSCode深度定制,支持在Windows、Mac和Linux系统上运行,在一个工具里即可完成开发工作的全生命周期流程,比如项目管理、代码编写、调试、预览、代码管理、编译发布等。

对于后端云服务开发,APICloud 云端技术负责人周兴海介绍到, APICloud数据云3.0的云数据库支持事务,开发者可通过可视化的方式对数据表进行增删改查等操作,同时通过内置丰富的API函数,使代码中操作数据库更为简便。接口管理内置符合 swagger 规范的组件开发者可以直接从代码生成文档并进行接口联调;通过模型驱动的开发模式,方便完成代码复用;同时对应用的数据存储、文件存储、流量、API请求等进行了监控,并生成相应的折线图,可以让用户更直观的了解服务的使用情况。APICloud全新迭代的数据云3.0通过增加自定义函数、模型库等功能结合底层的容器技术,为开发者提供了更加灵活、快速、稳定的服务器端开发体验。

全面布局云应用生态

大会最后,APICloud COO郭琪妹分享了新的生态服务——云应用。目前推出的云应用Store涵盖6大类解决方案,包括零售电商、教育培训、门店餐饮、企业展示、微预约和直播,可以满足各行业轻量化的场景需求。用户只需要几分钟便可轻松发布小程序,相比传统小程序开发,APICloud的云应用不需客户单独配置服务器、域名,告别繁重的运维工作,节省90%以上成本,满足用户马上投入、快速上线的要求。由于APICloud低代码特性,用户还可在APICloud平台灵活快速地进行深度定制。

此外,郭琪妹介绍本次开发者大会还开放了一套成熟的项目管理系统,帮助整个IT项目团队在软件开发全生命周期中更加有效的实现协作与交付,以及提供了配套的需求梳理、产品原型和UI插件的工具。基于标准化的需求分析流程和数字化文档,可自动生成初始原型,使用默认组件库和团队页面库,实现创意到产品的快速落地,而UI-Sketch插件将产品原型和UI进行串联,节省了设计人员在产品原型和Sketch之间的切换时间,有效的避免在切换过程中的页面遗漏问题,最终快速提升了项目开发前期的产品设计工作效率。

低代码开发的生态闭环

以低代码开发贯穿始终,是这次APICloud生态开发者大会的核心内涵,对于低代码的商业逻辑,APICloud用实践给出了答案,正如邹达所述,首先平台不能对客户的需求产生限制,应提供更加开放的产品能力,并且具备大量的开发者予以支撑,而在ToB业务上,唯有具备开发高品质应用的能力,为客户提供定制化服务,强调客户体验,才是验证低代码商业价值有效性的重要因素,形成低代码开发生态闭环。

对于生态来讲,平台的性能决定了用户的IT生产力,而APICloud则在此基础上持续进行商业资源赋能;作为国内低代码开发平台的引领者与效率革命的探索者,APICloud持续的创新能力,成为了平台用户积累与壮大的重要驱动力,这也让我们看到一家本土技术平台,是如何在险象环生的市场竞争中,通过自身生态特色探索出一条独特的商业创新之路。

查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 8月11日

APICloud:云端服务开发的硬核要素

随着云计算相关领域近几年的迅速发展,提供基于PaaS开发能力的平台越来越多,这使得很多开发者在编写后端程序的时候无需在服务器上从零构建自己的应用,无需考虑网络、存储、操作系统、运行环境等与开发关联不大的基础配置。这种基于Serverless形式的云计算服务,让应用开发得到了极大简化,甚至后期的运维、监控的工作平台也可以一并完成。

各种PaaS平台为用户提供了效率化服务,开发者可根据自己的业务逻辑快速开发出相关的服务端程序。由于不用关注业务之外的环境配置,开发效率得到了极大提高,同时企业也得益于这种开发模式,提高了企业产品研发、上线的速度。本文,我们将解析开发云端服务的核心要素,了解这些有助于我们更好的选择和使用各种云端服务平台。

1

云数据库是否简单易用且功能强大

开发者在开发服务器端应用的时候往往需要对业务数据进行存储,这就需要一个云端数据库帮助实现这些工作。

各家云平台提供的云端数据库的使用方式和功能各不相同,开发者在选择的时候需要根据自己的实际情况进行选择,首先要考虑的是自身业务是否有关键场景,如转账、付款等操作。这些操作要求数据一致性比较高,需要有事务的能力,所以是否支持事务是需要考虑的第一因素。其二是数据库的操作是否方便,本地开发时一般使用navicat等工具连接到后端数据库进行相关的操作,但是云数据库往往是通过web页面进行配置,这时候页面配置的易用性、提供的数据库配置功能是否全面也是一个需要考量的因素。第三是代码层面访问数据库是否方便,提供的接口要便于对数据进行存取。

**【APICloud数据云3.0 前沿谍报】
**

  • 数据云3.0支持事务操作。
  • 可视化的定义数据表结构,并对数据进行增删改查,支持在页面进行条件筛选完成查询。
  • 界面支持对表建索引、设定表与表的关联关系、导入和导出等功能。
  • 内置丰富的API函数,方便在程序中操作数据库

2

是否提供灵活的云函数及接口管理

在所有的云平台实现中,云函数是其中最重要的功能之一,我们在云函数中实现各自的业务逻辑。云函数的编写是云开发中占用开发者时间最长的部分,云函数的功能是否强大直接决定了开发者是否能方便快捷的实现自己的业务逻辑。

同时,远程函数的接口管理也会涉及到比较多的工作。接口管理分为接口文档和接口联调两部分,API接口在设计时要编写大量的文档,编写完成之后还会经常改动;实际的代码与文档有出入的时候也需要进行处理。同样,随着版本的迭代,接口文档同步的问题又会体现出来。进入到接口联调也需要开发者根据接口文档的内容在联调工具中进行配置完成。所以接口管理是后期保证开发进度的一个重要方面。

【APICloud数据云3.0 前沿谍报】

  • 提供多达六种函数类型的支持,为开发者提供更多自定义业务逻辑的能力。
  • 模型驱动的开发模式,更容易按照业务逻辑划分不同函数。
  • 接口管理功能:内置符合swagger 规范的组件,直接从代码生成文档,无需在为接口文档的维护以及接口联调耗费更多时间。
  • 两套环境更放心,云函数分为测试环境和正式环境,测试通过后方更新到正式环境。

3

是否支持代码库或已有代码复用

对软件开发来说,通过直接使用第三方的代码、服务来整合功能可以大大减少项目的开发周期和风险,降低开发成本,同时提高代码的可靠性。所以一个云平台是否能提供方便的代码复用能力就显得尤为重要。

【APICloud新产品前沿谍报】

即将发布的3.0版本通过模型驱动的方式进行服务器端功能逻辑的开发,可方便的通过模型完成代码的复用。我们支持用两种方式实现代码的复用,并可以基于复用的代码进行二次开发完成自己的业务逻辑。

  • 预置模型,我们为用户预置常用的数据模型,可直接添加使用。比如阿里云发短信模型、微信小程序模型等
  • 导入模型,可以从模型库或者自己的其他应用导入需要的模型,复用表结构和函数。
4

运维及监控

上线后的代码,平台是否提供相关的监控对开发人员尤为重要,开发人员需要通过某种方式了解自己代码实际运行的情况,如当前服务器是否由于触发异常而无法提供服务,自己打印的信息的查看,应用使用的流量以及占用的存储空间等。

【APICloud数据云3.0 前沿谍报】

APICloud对应用的数据存储、文件存储、流量、API请求等进行了监控,并生成相应的用量—时间折线图,可以让用户更直观的了解使用情况。同时提供日志监控,便于及时发现问题。

5

辅助功能,方便开发者使用

除了提供的基本开发能力以外,是否为用户提供一些方便用户使用的组件也是考量一个云平台的重要方面。

【APICloud数据云3.0 前沿谍报】

  • 内置session:通过配置开启,自动打开session功能。
  • 内置的管理后台插件:应用开发的过程中一般需要一个管理后台提供操作基本信息查看及运营的工作。这种管理后台的功能差不多,基本就是菜单管理、权限管理、页面管理等。APICloud3.0考虑到这种通用型的需求,为开发者内置了一个基于amis作为解决方案管理后台,通过简单的拖拽及配置即可让开发者拥有自己的管理后台。

目前,云计算仍处在快速发展阶段,在云端直接部署的需求越来越多,而国家出台的利好政策,已使企业上云成为趋势,国内厂商也在积极拥抱云端能力;在实际运行效果上,基于云端开发及运行应用服务优势明显,逐渐成为软件开发行业的主流选择。APICloud在产业变革的潮流下顺势而为,全新迭代的数据云3.0,将进一步为平台开发者的效率赋能,为用户在云端开发提供全新的使用体验。

APICloud是国内低代码开发平台的引领者与效率革命的探索者,基于对云原生、DevOps、混合开发等能力的集成,APICloud从移动开发演进为低代码开发平台,APICloud致力于为各行业提供app定制与企业数字化服务。

查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 8月11日

APICloud:多端开发时代的大道至简

随着近几年互联网进入下沉期,C端app产品告别了早期的抢占市场阶段,进入寡头时代。微信、支付宝、头条等超级app们希望建立起自有生态主导流量分发,纷纷推出了各自的小程序开发技术,允许用户在其app内运行一个“小app”,分享超级app的流量红利。

企业在开发app产品的同时,还会要求开发对应的小程序,甚至很多团队在业务初期,无需开发app,仅需要开发小程序进行模式验证,大量的需求令小程序开发市场异常火爆。

但因各家小程序技术之间没有统一的标准或者接入方式,导致形成了新的技术碎片化开发者必然要为不同端的小程序做不同的开发和适配,这给开发者和企业带来了新的负担:开发者不仅要开发Android / iOS的app,还要兼容WebApp以及各大超级app的小程序,单一功能在各终端都要重复实现,开发和维护成本成倍增加

行业迫切需要一种使用一套代码可以同时开发app、小程序和H5的解决方案,来减少开发和管理成本,释放人力提升效率。

多端技术由此而来:跨平台技术延续其已经成熟稳定的一套代码同时开发Android / iOS app的能力,并在此基础上,通过多端统一开发工具将app代码编译为小程序和H5代码,达到一套代码,同时适配app、小程序和WebApp的多端开发目的。

通过多端技术的发展历程我们不难发现,多端技术并非新兴的单个分散的技术或服务,它是一系列代码解析、语法分析、翻译、重构等工具的集合,负责将DSL编译为目标编程语言,例如将Less编译为CSS。在多端技术领域,多端编译环境则负责将DSL编译为可在JS引擎或者Web浏览器中执行的标准JS和Html代码,以及编译为符合微信或者支付宝等小程序技术标准的代码。

编译成功的标准JS代码运行于跨平台app引擎中,实现app端功能;小程序代码可直接用于发布到微信或者支付宝小程序平台,实现小程序端功能;Html代码则可作为Web端发布。由此达到一套代码,可同时部署到app、小程序、H5端的目的。

目前常见的多终端编译环境有:

  • Mpvue(美团):支持将Vue语法编译为小程序和H5,支持微信、支付宝等小程序
  • Taro(京东):支持将React语法编译为小程序和H5,支持微信、支付宝等小程序,同时支持生成React Native app
  • Hippy(腾讯):同时支持将Vue和React语法编译为微信小程序和H5
  • Chameleon(滴滴):支持将其CML语法编译到Web、小程序、Weex APP等多种终端

APICloud新产品前沿谍报

APICloud多终端编译环境即将全面支持使用类Html5技术实现多终端开发,无需搭建特定的终端编译环境,一键云端编译即可生成高质量目标终端代码,可用性高,有利于二次开发。支持编译为Android / iOS APP、微信小程序以及标准H5。

APICloud是国内低代码开发平台的引领者与效率革命的探索者,基于对云原生、DevOps、混合开发等能力的集成,APICloud从移动开发演进为低代码开发平台,APICloud致力于为各行业提供app定制与企业数字化服务。

查看原文

赞 0 收藏 0 评论 0

APICloud 发布了文章 · 8月10日

APICloud:高性能AVM框架应势而来

在大前端技术领域,当我们遇到了需要解决重复性的问题时,通常会考虑设计一个DSL(Domain-Specific Language)或者抽象出一个框架层,专门来解决这些类似的问题。使用DSL我们并不需要为特定终端编写多套代码,还可以利用宿主语言的抽象能力,确保各终端渲染效果的一致性以及对开发者友好。

目前流行DSL有:React支持的JSX语法、Vue定义的SFC结构和v-*指令集、微信小程序的WXML/WXS语法等。这些DSL最终被编译为目标代码,直接发布于小程序平台,或者借助JS-Runtime运行于APP和Web浏览器。

其中,React是函数式编程思想的实践者,最大的特点是发明了JSX语法,允许开发者使用xml的方式在JS中声明UI,并通过组件化和更加语义化的代码而非模板来高效的定义界面,以提供最大的灵活性和响应能力;React只对开发者暴露基础的生命周期和过程,更多的实现和逻辑细节则交由用户灵活定制,单纯的使用JS语言即可完成整个开发过程,有客户端开发经验的开发者将更容易上手React。

而Vue则希望通过尽可能简单的API实现响应式的数据绑定和UI组件的组合及管理,因此默认屏蔽了非常多的操作细节,这对初学者而言提供了巨大的方便;其单文件组件模板语法也更贴近原生Html5,具备Web前端基础的开发者,将能够流畅的过渡到Vue开发中。

二者的共同设计思想是虚拟DOM以及数据驱动视图更新,设计目的都是为了降低Web开发的复杂度,提升编码体验以及开发和维护效率,让开发者聚焦在业务上。

随着移动互联网的迅猛发展,前端技术的范畴已经从Web前端扩展到移动端H5,Android& iOS App,小程序等多端,业务重心也转移到移动端。而经过多年发展的React和Vue已经变得臃肿,难以适应多端背景下,更个性化和深入下层的应用场景,我们迫切需要从已有的技术中提取精华,构建出更简单轻巧,能够对不同端的特性实现针对性优化和处理的能力。

APICloud新产品前沿谍报

即将发布的全新AVM(APICloud View Model)是APICloud基于标准H5子集设计的DSL中间语言编程框架,其可具备如下能力:

  • Virtual DOM:通过虚拟DOM,渲染到不同终端,充分尊重系统特性,为不同终端执行差异处理,实现高效渲染;
  • 组件化:高可重用性、可组合性、可维护性的架构设计,隐藏了复杂的DOM结构和行为,让开发者专注于应用的功能和外观;
  • 数据绑定:轻松将数据源绑定到应用用户界面,降低逻辑复杂性和开发难度;
  • 状态管理和路由:有效分离用户界面和数据处理,实现项目的工程化管理;
  • 类Vue语法和兼容React JSX,兼具Vue的轻巧和React的灵活性。

APICloud DSL最终可编译为标准JS,通过DeepEngine渲染到app端和Web端,或者编译为微信小程序代码,用于微信小程序平台发布。

APICloud DSL使用Vue方式定义组件或页面:

APICloud DSL使用兼容React JSX方式定义组件或页面:

查看原文

赞 1 收藏 1 评论 0

认证与成就

  • 获得 2 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-11-28
个人主页被 384 人浏览