<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Unplugged]]></title><description><![CDATA[DEV@SAP]]></description><link>https://blog.csdn.net/starshus</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; starshus]]></copyright><item><title><![CDATA[快速定制开发Freestyle App]]></title><link>https://blog.csdn.net/starshus/article/details/105766755</link><guid>https://blog.csdn.net/starshus/article/details/105766755</guid><author>starshus</author><pubDate>Sun, 26 Apr 2020 13:01:34 +0800</pubDate><description><![CDATA[FreeStyle Development
在很多通用的需求下，可以通过SAP Fiori Element技术来快速开发Ui5应用。对于一些比较特别的需求，还是需要来通过代码的方式来开发Freestyle UI5应用。
之前通过webide自动创建项目的方式，自动生成了代码，可以直接运行。
一般情况下，都会需要对代码做一定的修改。
今天通过之前的小例子来看一下，如何通过代码来定制开发Freesty...]]></description><category></category></item><item><title><![CDATA[快速定制开发SAP Fiori Element应用]]></title><link>https://blog.csdn.net/starshus/article/details/105765021</link><guid>https://blog.csdn.net/starshus/article/details/105765021</guid><author>starshus</author><pubDate>Sun, 26 Apr 2020 11:21:54 +0800</pubDate><description><![CDATA[介绍
前端开发最常用的语言就是JavaScript，JS是一门非常强大灵活的语言，但是对于技能和时间上要求比较高。
Fiori Element可以通过配置annotations的方式，来实现需求，可以避免编写代码的方式来开发应用，这样可以大幅提高效率和降低effort。
下面来通过一个小例子来看，如何通过Annotations XML来配置一个Fiori Element列表应用。
在完成以后，需要...]]></description><category></category></item><item><title><![CDATA[通过SAP Fiori Element快速开发UI5 App]]></title><link>https://blog.csdn.net/starshus/article/details/105736879</link><guid>https://blog.csdn.net/starshus/article/details/105736879</guid><author>starshus</author><pubDate>Fri, 24 Apr 2020 17:59:17 +0800</pubDate><description><![CDATA[关于SAP Fiori Element
大家知道UI5作为SAP产品最主要的用户界面，在SAP的产品开发过程中，产品team根据积累的经验，将最常见、最通用的设计和界面提炼出来，在UI技术上通过复用的方式来提高开发效率，有点类似模板的概念。今天为大家介绍的是非常强大的Fiori element技术。
SAP Fiori elements提供了对通用的需求应用的模板。 可以通过选择一些预置的模板就可...]]></description><category></category></item><item><title><![CDATA[通过SAP Build快速构建UI5原型App]]></title><link>https://blog.csdn.net/starshus/article/details/105619088</link><guid>https://blog.csdn.net/starshus/article/details/105619088</guid><author>starshus</author><pubDate>Sun, 19 Apr 2020 17:55:47 +0800</pubDate><description><![CDATA[通过SAP Build快速构建UI5原型App
SAP Build是一个非常不错的快速构建高保真UI5应用的服务，可以免费注册使用。
在设计驱动开发的流程中，App的设计是非常重要的步骤，通过低保真、高保真的设计原型可以快速获取用户的反馈，然后快速调整原型，提高沟通的效率，最大程度节约开发资源。
https://www.build.me/
通过Build服务，可以快速构建UI5的高保真UI，然后根...]]></description><category></category></item><item><title><![CDATA[通过SAP WEBIDE快速构建一个UI5 应用]]></title><link>https://blog.csdn.net/starshus/article/details/105468922</link><guid>https://blog.csdn.net/starshus/article/details/105468922</guid><author>starshus</author><pubDate>Sun, 12 Apr 2020 14:18:52 +0800</pubDate><description><![CDATA[SAP WEBIDE
SAP WebIDE是SAP云平台上的一项服务，通过WEBIDE可以非常方便迅速的开发各种企业级云应用。
对于前端应用来说，webide提供了很多的模板来创建项目，比如基于Fiori设计语言的List report, worklist, master-detail, 还有Fiori element应用。
今天通过一个简单的例子来创建一个Master-detail的UI5应用。...]]></description><category></category></item><item><title><![CDATA[UI5 in Docker]]></title><link>https://blog.csdn.net/starshus/article/details/105175127</link><guid>https://blog.csdn.net/starshus/article/details/105175127</guid><author>starshus</author><pubDate>Sun, 29 Mar 2020 11:08:52 +0800</pubDate><description><![CDATA[快速开发一个UI5 app并部署到 Docker容器
今天快速把一个UI5 app打包运行在Docker容器中。主要分为三步：


开发、测试运行


Docker文件、构建镜像


运行Docker


废话不多说，直接上code。
开发、测试运行
1.安装自动生成ui5的脚手架工具easy-ui5
npm install -g yo generator-easy-ui5

2.运行命令
yo
...]]></description><category></category></item><item><title><![CDATA[UI5和React比较]]></title><link>https://blog.csdn.net/starshus/article/details/104734301</link><guid>https://blog.csdn.net/starshus/article/details/104734301</guid><author>starshus</author><pubDate>Sun, 08 Mar 2020 15:54:45 +0800</pubDate><description><![CDATA[通过React来实现类似UI5中element binding的效果
UI5整体采用了MVC的设计，提供了单向的、双向的，各种数据绑定，有属性绑定，有列表绑定，还有element binding。
现在流行的技术框架和语言都采用”声明式“的开发方式，比如Google的Flutter, Apple的Swift UI,还有Facebook的React。
下面我来用React来实现和之前类似的效果，上面...]]></description><category></category></item><item><title><![CDATA[UI5的Data binding]]></title><link>https://blog.csdn.net/starshus/article/details/104732155</link><guid>https://blog.csdn.net/starshus/article/details/104732155</guid><author>starshus</author><pubDate>Sun, 08 Mar 2020 14:11:58 +0800</pubDate><description><![CDATA[学习了解一下UI5的数据binding
UI5作为一个成熟的企业级UI开发框架，其最大的特点就是遵循MVC的设计，也就是将代码逻辑清晰地区分为数据源（model） - UI（view） - 应用逻辑（controller）这三部分。数据binding就是model和view之间如何交互。
UI5的数据binding主要有三种方式：

Property binding
Aggregation bin...]]></description><category></category></item><item><title><![CDATA[Hello UI5!]]></title><link>https://blog.csdn.net/starshus/article/details/104702501</link><guid>https://blog.csdn.net/starshus/article/details/104702501</guid><author>starshus</author><pubDate>Fri, 06 Mar 2020 19:32:12 +0800</pubDate><description><![CDATA[快速创建第一个UI5 App
Fiori是什么？
Fiori是SAP的前端设计语言，为客户提供了一致、美观、已用的用户体验设计。
在技术上，有很多技术的实现，比如iOS for Fiori, Android for Fiori, UI5 for Fiori等。
UI5是什么？
UI5是SAP的Web前端技术，提供了对Fiori设计在Web技术实现，可以运行在电脑、平板、手机移动端上。
UI5分为了...]]></description><category></category></item><item><title><![CDATA[Fundamental style]]></title><link>https://blog.csdn.net/starshus/article/details/104629785</link><guid>https://blog.csdn.net/starshus/article/details/104629785</guid><author>starshus</author><pubDate>Tue, 03 Mar 2020 12:21:49 +0800</pubDate><description><![CDATA[介绍一个UI库 - Fundamental style
今天给大家介绍一个由SAP开发并开源的UI库 -Fundamental style。它符合SAP最新的Fiori 3设计。
主页: https://sap.github.io/fundamental-styles/
支持React， Vue，Angular。
大致浏览了一下常用的组件，还是蛮漂亮的。
测试小Demo

通过API获取后端银行数...]]></description><category></category></item><item><title><![CDATA[React学习笔记13-个人博客站点]]></title><link>https://blog.csdn.net/starshus/article/details/104530635</link><guid>https://blog.csdn.net/starshus/article/details/104530635</guid><author>starshus</author><pubDate>Thu, 27 Feb 2020 10:06:49 +0800</pubDate><description><![CDATA[通过HUGO快速创建一个个人React博客站点
用几分钟时间把React笔记建成了博客站点，Powered by HUGO。


React学习

https://peaceful-tor-92061.herokuapp.com/

Node.js学习

https://whispering-coast-84700.herokuapp.com/
参考阅读
https://gohugo.io/
ht...]]></description><category></category></item><item><title><![CDATA[React学习笔记12-快速构建一个动态全球独角兽列表网站(7)]]></title><link>https://blog.csdn.net/starshus/article/details/104524266</link><guid>https://blog.csdn.net/starshus/article/details/104524266</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 20:33:05 +0800</pubDate><description><![CDATA[#后台管理开发
后台管理开发也很简单，和前台的开发思路其实差不多，就是增加了几个页面。
新建数据、编辑数据、删除数据。
数据展示
在列表中生成了两个链接，分别是编辑和删除。
return (

            &lt;div id="content-wrapper" class="mui--text-center"&gt;
                &lt;div class="mu...]]></description><category></category></item><item><title><![CDATA[React学习笔记11-快速构建一个动态全球独角兽列表网站(6)]]></title><link>https://blog.csdn.net/starshus/article/details/104524233</link><guid>https://blog.csdn.net/starshus/article/details/104524233</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 20:32:20 +0800</pubDate><description><![CDATA[后台管理设计
接下来通过React来做一个简单的后台管理应用。
主要功能
完成后大致是这样子：

主界面显示完整信息。




有创建、修改、删除功能。



有翻页功能。



技术架构
前端用的是Bootstrap。这个后端程序，UI换一个简单的MUICSS，极简风格。
翻页就不自己写了，直接用了开源组件, ReactPaginate。
参考阅读


https://www.muicss.co...]]></description><category></category></item><item><title><![CDATA[React学习笔记10-快速构建一个动态全球独角兽列表网站(5)]]></title><link>https://blog.csdn.net/starshus/article/details/104518594</link><guid>https://blog.csdn.net/starshus/article/details/104518594</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 15:55:47 +0800</pubDate><description><![CDATA[测试运行
后端和前端一起测试运行看一下效果。
主页

独角兽列表

翻页

基本OK。
接下来可以再通过React来快速开发一个后台管理应用。
项目代码

后端

https://github.com/rangwei/unicorns-sails

前端

https://github.com/rangwei/unicorns-react-bootstrap

...]]></description><category></category></item><item><title><![CDATA[React学习笔记9-快速构建一个动态全球独角兽列表网站(4)]]></title><link>https://blog.csdn.net/starshus/article/details/104518565</link><guid>https://blog.csdn.net/starshus/article/details/104518565</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 15:52:53 +0800</pubDate><description><![CDATA[动态数据展示
Router
主程序代码，通过react-router-dom来实现页面的Router
App.js：
import React from 'react';

import Navbar from './Navbar';
import Unicorns from './Unicorns';
import Main from './Main';
import './master.css...]]></description><category></category></item><item><title><![CDATA[React学习笔记8-快速构建一个动态全球独角兽列表网站(3)]]></title><link>https://blog.csdn.net/starshus/article/details/104518550</link><guid>https://blog.csdn.net/starshus/article/details/104518550</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 15:52:16 +0800</pubDate><description><![CDATA[页面开发
页面开发很简单。分为两个部分。
通过React的Function Component来实现列表和翻页条。
列表显示
List.js:
import React, { useState } from 'react';


export default function List({unicorns}) {
    return (
        &lt;table class="tabl...]]></description><category></category></item><item><title><![CDATA[React学习笔记7-快速构建一个动态全球独角兽列表网站(2)]]></title><link>https://blog.csdn.net/starshus/article/details/104518537</link><guid>https://blog.csdn.net/starshus/article/details/104518537</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 15:51:37 +0800</pubDate><description><![CDATA[后端API开发
通过Sails.js可以快速构建一个后端的服务。
建模
通过下面这条命令来新建一个model:
sails generate api Unicorns

建模，修改Unicorns.js:
module.exports = {

  attributes: {

    name: { type: 'string', required: true },
    country: {...]]></description><category></category></item><item><title><![CDATA[React学习笔记6-快速构建一个动态全球独角兽列表网站(1)]]></title><link>https://blog.csdn.net/starshus/article/details/104518515</link><guid>https://blog.csdn.net/starshus/article/details/104518515</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 15:50:47 +0800</pubDate><description><![CDATA[设计和架构
下面来通过React实战构建一个关于全球独角兽列表的网站。
主要就是作为一个小练习实践一下从前端到后端的web开发技术。
界面设计
最快的方式当然直接用Bootstrap搞定，大概如下：

网页布局主要包含三个部分：导航栏， 主要内容，翻页条。
React的翻页功能有很多库已经可以直接用，但是出于学习的目的，这里还是手工写一个，逻辑也不复杂。
后台数据格式
数据结构比较简单，从网上抓取...]]></description><category></category></item><item><title><![CDATA[React学习笔记5-快速创建一个TODO App]]></title><link>https://blog.csdn.net/starshus/article/details/104510248</link><guid>https://blog.csdn.net/starshus/article/details/104510248</guid><author>starshus</author><pubDate>Wed, 26 Feb 2020 08:48:54 +0800</pubDate><description><![CDATA[TODO App

三人行，必有我师焉。择其善者而从之，其不善者而改之。 ——孔子

现在通过前面学到的React基础知识快速构建一个简单的TODO APP。
主要包含三个部分： 输入部分，未完成的事项，已经完成事项。
输入部分
function Input({ addName }) {

    const [name, setName] = useState("hello");

    re...]]></description><category></category></item><item><title><![CDATA[React学习笔记4-Effect Hook]]></title><link>https://blog.csdn.net/starshus/article/details/104505665</link><guid>https://blog.csdn.net/starshus/article/details/104505665</guid><author>starshus</author><pubDate>Tue, 25 Feb 2020 21:20:00 +0800</pubDate><description><![CDATA[Effect Hooks

由俭入奢易，由奢入俭难。——司马光

之前通过class来编写Component，一些辅助的方法是通过componentDidMount, componentDidUpdate来实现。通过React的effect hook可以实现类似的功能。
比如现在在组件显示之前需要通过网络加载一下数据，还是通过之前用的users api来demo:
import React, { ...]]></description><category></category></item></channel></rss>