Shulou(Shulou.com)06/02 Report--

Today's article comes from the architect of the C4C development team of Wu David,SAP Chengdu Research Institute. He worked at SAP Shanghai Research Institute before joining the team, and his colleagues in the group used to affectionately call him Brother David.

Brother David, whose height is more than 1.8 meters according to Jerry, is one of the tallest male colleagues in Chengdu C4C development team. He is very strong and is a member of the Chengdu SAP basketball team. Once Brother David sat on his seat, leaning one hand on the table and carefully looking at the log printed on the computer of a colleague who asked him for help. Zhang Hang, the plane brother, took a picture of Brother David's back. "I can see Brother David's well-developed latissimus dorsi from the photo," he commented. "

Zhang Hang, the elder brother of the plane, later completed a sketch, and the man on the left side of the picture below is Brother David.

Some colleagues who joined the team later claimed that they had spent two hours in the evening flipping through all the photos of Brother David's moments and saw a high school photo that Brother David had previously posted. As soon as you take a look, Tut-tut, this face is definitely good enough to shoot an idol play. Tall stature, well-developed latissimus dorsi and good appearance make Brother David's casual stop in the crowd very eye-catching.

Besides C4C David, Jerry also knows some other handsome guys named David. The most famous David is the marble statue of David at the Academy of Fine Arts in Florence, Italy:

Then there are the youthful memories of the post-80s, Manchester United star David. Beckham:

In 2012, Ray Dudley Scott, the famous director who filmed Alien, finally fulfilled his wish to shoot a prequel to the ancient work, which was born in 1979, which is another classic in the eyes of alien fans like Jerry: Prometheus Prometheus.

As a tradition, every work in the Alien series has a cyborg, the first is the insidious Academy of Science A sh, the second and third are B ishop who look like an old man, and the fourth is the beauty C all with capable short hair. When it comes to Prometheus, the name of Prometheus becomes the D avid mentioned in today's article:

David played a key role in Prometheus and Alien: the contract, which was released in 2017, and Jerry believes it is not too much to call David the hero of the two films.

Looking back on these, we can find that the man named David has online appearance and temperament.

Let's get back to reality. Here is the text of Brother David of C4C.

Hello, everyone. I'm David from the C4C development team of SAP Chengdu Research Institute. Let me share with you an innovative case of the integration of C4C and WeChat Mini Programs.

Since the launch of C4C products, there have been three versions of UI. From the earliest Microsoft-based Silverlight, to the SAP UI5-based HTML5 version, and finally to the current RUI version of C4C. Silverlight retired a long time ago. HTML5 uses UI5's sap.ui.commons library, supports only desktop browser access, and will retire recently. RUI (Responsive UI) is a responsive interface layout in Chinese, and its technical implementation uses UI5's sap.m library.

For more information about these three C4C UI, please refer to my colleague Zhou Shuai's article: SAP Chengdu C4C Xiao Li Tanhua: talking about Fiori Design Guidelines.

C4C cooperates with Cordova framework on the mobile side to realize a set of code running across platforms. For more details, you can read Jerry's article: one of the SAP mobile application solutions: HTML5 applications + Cordova = platform-related hybrid applications.

Now you can see the screenshot below, which is the interface of the C4C mobile App. Although it is on the phone, it can still be seen that this is the classic L-shape UI layout of CRM. The navigation bar on the left, the header bar above, and the large work area on the lower right.

As users of C4C, let's take the sales representative as an example, he / they will use C4C's mobile App during store patrols, customer visits and various marketing activities. Let's take a sales representative looking for an opportunity (business opportunity) in the system as an example to take a look at the performance of C4C.

First, we open App, select the sales opportunity view from the left navigation bar, go to the right workspace list, find the desired sales opportunity and open it.

As a sales representative, going through the wind and rain all day, you may only need a simple service or application when you go to the market, which can quickly query a business activity or quickly create sales opportunities. Based on the above business needs, as well as Wechat's market position in China and Mini Program's characteristics. Colleagues in our group (female programmer Kellyn, keyword: teacher Ju) made a C4C Mini Program with the following interface:

After opening Wechat, through the Mini Program entrance, we can quickly launch Mini Program, login is the list of appointments and opportunity. As we can see from the above picture, there are two tabs at the bottom of Mini Program that can switch between the two services.

Click on any record in the list to enter the details interface, and the data is presented in different tabs (we internally call them facet), as in C4C.

In terms of page layout, WeChat Mini Programs's page layout and Wechat's layout are similar to those of Alipay (shown in the following image), with the top navigation bar, the middle work area, and the bottom label area for switching between different pages or applications. Most domestic users prefer or are accustomed to this kind of page layout.

To sum up, C4C app will not be like WeChat Mini Programs's page style in the short term, but if some lightweight service applications like WeChat Mini Programs can be used with C4C, I believe the customer's work efficiency will be greatly improved.

As developers, how can we quickly develop such a Mini Program application if we receive a development task that requires some business functions of C4C to be realized by WeChat Mini Programs? Structurally similar to C4C integrated Wechat official account, it is mainly divided into three parts:

WeChat Mini Programs realization of the foreground page

Wechat Agent Server (sometimes called Wechat intermediary server, message server)

C4C background system exposes C4C business data to external consumers through some interface.

In the WeChat Mini Programs example we developed that I mentioned above, C4C as a background system only needs to provide API of RESTful, and we directly use OData Service of C4C standard. For information on how to consume these standard OData Service in various programming languages, please refer to SAP's official github:

Https://github.com/SAP/C4CODATAAPIDEVGUIDE

The role of Agent Server is mainly to distribute requests, log in and authorize users, and solve the cross-domain problem of WeChat Mini Programs's access to C4C OData Service. With regard to login and authorization, in this example, we simply match a Business User in the C4C backend with an email account.

Next we will use a simple "Hello World" to help you familiarize yourself with the development of Mini Program. First of all, we need to go to WeChat Mini Programs's website to complete registration and download the IDE developed by Mini Program. If you want to develop a Mini Program that needs to be approved, you also need to apply for the AppID of Mini Program.

Here is a brief introduction to the two concepts of AppID and OpenID, AppID is equivalent to a unique identification of Mini Program, used for audit and distribution. The concept of OpenID, if you have already done the development of Wechat official account should be familiar: after scanning the Mini Program's QR code, it will automatically generate an OpenID based on the user, which is a technical Field used to identify the current user.

After registering all the information, open the WeChat Mini Programs development platform and create a quick launch template. The following picture shows the interface of Mini Program's Hello World project in Mini Program development IDE.

Let's take a brief look at the interface composition of Mini Program IDE. The first is the top toolbar, which is used to configure IDE page layout and other features. On the left is the preview interface, Mini Program will automatically run and appear here when the project is opened, it can be said that the debugging interface at the bottom is a completely cloned Chrome developer tool, friends who often use Chrome developer tools must feel more comfortable to use. For tips on how to use Chrome developer tools, you can also refer to Jerry's article Jerry to talk about Chrome developer tools.

Coupled with the file directory and code editing area, most areas can be hidden or pop up in a new window, so it is relatively simple from the interface point of view.

Next, let's take a look at the function of this Hello World Mini Program. The whole program has two interfaces. The first interface is the Wechat profile picture and nickname of the current user seen in the screenshot. Here is the text of Hello World. After clicking on the user's profile picture, you jump to the second screen, which records the log. Every time Mini Program starts, it will write a log with the current time and date. This log will be deleted as the cache is cleared.

After a basic understanding of the functions of Hello World, it is easier to look at the file structure. Let's first take a look at the four types of files in the Mini Program framework:

.js file, logical layer framework based on JavaScript

The .wxml view layer file is a new tag language designed by the Mini Program framework to describe the page structure.

.wxss style file, which describes the component styles of WXML

.json file, configuration file, for the configuration of a single page and for the configuration of the entire project

Mini Program contains an app.js describing the overall program and a number of specific implementation files describing their respective pages.

App.js controls the logic of the whole program and is the entry program of the whole project. For example, in this Hello World Mini Program, when the project starts, the localstorage is checked and the log is written. This is where Wechat users log in and get the user User Profile. App.json is responsible for some of the common settings of the program layout page. Or take this Hello World Mini Program as an example, in this program, the home page and log page need to be registered in app.json, and the attributes of the entire window object are controlled, such as the text and colors on the navigation bar we see, as well as the performance behavior of the bottom tabBar, such as how many tabButton can be added and the order in which they are displayed. App.wxss is Mini Program's common stylesheet, just like the basefolder in stylefolder when we do UI5 development.

Under the Pages folder, there are two subfolders, index and log, corresponding to the home page and log page of Hello World Mini Program, respectively. Each folder corresponds to the four file types just described. At the same time, we find that there are json files and wxss files under this level of directory, which means that page-level configuration and style information can be rewritten in subordinate directories or inherited from Mini programs.

The rest of the utils folder, you can see by the name is actually put some public methods, easy to call.

Project.config.json stores the configuration information of IDE, such as the version of the JS library, whether the compilation type is Mini Program or Mini Game, the compression strategy when the code is uploaded, and so on. AppID is also recorded here.

Let's understand the development of Mini Program through specific code snippets. The picture above shows the view layer and logic layer of Hello World Mini Program. From UX's point of view, if the user is not logged in, a button to get the avatar nickname is displayed; if logged in, the Wechat avatar and nickname are displayed. We can see that the view layer is no longer the native HTML tags such as div,p,span that we used to write traditional HTML, but view,button,text and other tags encapsulated by WeChat Mini Programs, mixed with some ifelse judgment and curly braces binding.

In traditional Web development, we collect events from DOM through JavaScript code, record the status in JavaScript variables, and then change the properties or behavior of DOM by calling DOM's API. When the project gets larger or the business becomes complex, the interaction logic and state control logic in the code can be very confusing. WeChat Mini Programs adopts the development mode of MVVM (similar to Vue), which separates rendering from logic, does not let JavaScript operate DOM directly, but only focuses on state changes, so that the Model layer and view layer are decoupled, and the code structure becomes clear.

Hearing here, I believe you already have a certain understanding of WeChat Mini Programs's development, we might as well go back and look at the definition of Mini Program. What is Mini Program? This is a sentence taken from the home page of Mini Program SDK:

WeChat Mini Programs is a new way to connect users and services, it can be easily obtained and spread in Wechat, while having an excellent user experience.

Zhang Xiaolong's definition of Mini Program mainly emphasizes the concept of leaving after use. There is no need to install and uninstall, it is available at any time, everywhere.

Now is the era of mobile Internet, Native App relies on the operating system, stable performance, strong scalability, has a better user experience, may not be replaced in a short time; Web App development cost is low, fast update, no need to install and uninstall, make the whole service lightweight, easy to operate, is strongly attacking the market of native applications. The lightweight of service is the direction, and WeChat Mini Programs seems to be looking for a balance between the two. The prototype development introduced in today's article reflects some attempts by the SAP Chengdu Research Institute C4C development team to make full use of WeChat Mini Programs's advantages to improve the user experience of SAP C4C customers using our products.

The source code of WeChat Mini Programs introduced in this article can be obtained from the github of "living outside the teacher's circle" Kellyn:

Https://github.com/kellynlee/C4C4Miniprogram

Here Kellyn also takes this opportunity to thank colleague Li Xiaogang for her hard work and painstaking efforts in writing and publishing her graduation thesis.

If you have more questions about the integration of C4C with WeChat Mini Programs, or if you have some functions related to Wechat integration that you think of, you would like to add them to the C4C standard products, please feel free to contact us through this official account. Thank you for reading.

Read more

Colleagues of the C4C development team at SAP Chengdu Research Institute have written a lot of technical articles about C4C, as listed below:

Series of tutorials on the integration of C4C and Wechat official account

SAP Chengdu C4C Xiao Li Flower Exploration: talking about Fiori Design Guidelines

SAP S4CRM vs C4C, Zhuge Liang and Zhou Yu?

SAP Chengdu Research Institute C4C Guangzheng: the uniqueness of SAP Cloud for Customer's use of SAP UI5

Design and implementation of SAP Cloud for Customer Extensibility

Application of Machine Learning in SAP Cloud for Customer

One of the SAP mobile application solutions: HTML5 applications + Cordova = platform-related hybrid applications

A prototype Development for C/4HANA and S/4HANA: a case study of Intelligent Service Innovation

For more original Jerry articles, please follow the official account "Wang Zixi":

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.