npm 包 cumulocity-kitchensink 使用教程

简介

cumulocity-kitchensink 是一个基于 Cumulocity IoT 平台开发的前端组件库，其中包含了许多实用的 UI 组件和功能模块。借助这个组件库，我们可以快速地开发出基于 Cumulocity IoT 平台的应用，并且可以大大减少开发时间和代码量，提高开发效率。

安装

cumulocity-kitchensink 可以通过 npm 直接安装，只需执行下面的命令：

npm install --save cumulocity-kitchensink

使用

在引入 cumulocity-kitchensink 的组件之前，需要先引入以下 CSS 文件：

<link rel="stylesheet" href="https://cumulocity.com/cumulocity-ui/latest/styles/fonts.css">
<link rel="stylesheet" href="https://cumulocity.com/cumulocity-ui/latest/styles/reset.css">
<link rel="stylesheet" href="https://cumulocity.com/cumulocity-ui/latest/styles/c8y.min.css">
<link rel="stylesheet" href="https://cumulocity.com/cumulocity-ui/latest/styles/c8y-icons.min.css">

然后，我们就可以在代码中引入需要的组件，例如：

import { Button, Input } from 'cumulocity-kitchensink';

const MyComponent = () => {
  return (
    <>
      <Button>Click me</Button>
      <Input placeholder="Please enter something" />
    </>
  );
};

上面的代码中，我们引入了 cumulocity-kitchensink 中的 Button 和 Input 两个组件，并在 MyComponent 组件中使用它们。

除了组件之外，cumulocity-kitchensink 还提供了许多实用的工具函数和服务，可以极大地简化我们的开发工作。比如，我们可以使用 c8yFetch() 函数来发送 HTTP 请求：

import { c8yFetch } from 'cumulocity-kitchensink';

const fetchData = async () => {
  const response = await c8yFetch('/inventory/managedObjects');
  const data = await response.json();
  console.log(data);
};

上面的代码中，我们使用 c8yFetch() 函数向 Cumulocity IoT 平台发送了一个 GET 请求，并且打印出了返回的数据。

示例代码

最后，我们给出一个完整的示例代码，展示如何使用 cumulocity-kitchensink 来开发一个简单的表单页面：

import React, { useState } from 'react';
import { Button, Input, Form, FormGroup, Label, FormText } from 'cumulocity-kitchensink';
import { c8yFetch } from 'cumulocity-kitchensink';

const MyForm = () => {
  const [formData, setFormData] = useState({});

  const onSubmit = async (e) => {
    e.preventDefault();
    const response = await c8yFetch('/inventory/managedObjects', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log(data);
  };

  const onChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <Form onSubmit={onSubmit}>
      <FormGroup>
        <Label for="name">Name</Label>
        <Input type="text" name="name" id="name" onChange={onChange} />
      </FormGroup>
      <FormGroup>
        <Label for="email">Email</Label>
        <Input type="email" name="email" id="email" onChange={onChange} />
        <FormText>Please enter a valid email address.</FormText>
      </FormGroup>
      <FormGroup>
        <Label for="password">Password</Label>
        <Input type="password" name="password" id="password" onChange={onChange} />
        <FormText>Your password must be at least 8 characters long.</FormText>
      </FormGroup>
      <Button type="submit">Submit</Button>
    </Form>
  );
};

export default MyForm;

上面的代码中，我们使用了 cumulocity-kitchensink 中的 Form、FormGroup、Label、Input 和 Button 等组件，并且使用 c8yFetch() 函数向 Cumulocity IoT 平台发送一个 POST 请求来创建一个新的 managed object。

总结

通过本文的介绍，我们了解了如何安装和使用 cumulocity-kitchensink，以及如何使用它提供的组件、工具函数和服务来简化我们的开发工作。使用 cumulocity-kitchensink 可以大大减少我们的开发时间和代码量，提高开发效率。在实际开发中，我们应该根据具体需求选择合适的组件和工具，来达到最优的开发效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53c03