开发者的福音：懒猫微服全能SDK介绍

# 此文章已过时，最新开发者文档请使用以下链接访问
https://developer.lazycat.cloud/
# 此文章已过时，最新开发者文档请使用以下链接访问
https://developer.lazycat.cloud/
# 此文章已过时，最新开发者文档请使用以下链接访问
https://developer.lazycat.cloud/

# 开篇

> 懒猫微服平台提供了针对懒猫微服OS应用层接口，开发者可以基于开放的接口创造出各式各样的应用

本篇文章为介绍讲解懒猫微服SDK系列第一篇，主要为大家展示如何入门使用懒猫微服SDK，并实现第一个Demo应用后部署到我们的微服上。

# 提前准备

## 安装懒猫微服客户端

为了开发懒猫微服应用，首先你需要先安装懒猫微服客户端，客户端支持MacOS、Windows以及GNU/Linux，具体的安装教程可以参照下面这篇文章

[懒猫微服客户端安装教程](https://lazycat.cloud/playground/%2Fguideline%2F140)


## 安装lzc-cli命令行工具

lzc-cli命令行工具是开发懒猫微服应用的必备工具，其提供了如下功能:

1. 快速部署应用到微服
2. 上架应用到官方商店
3. 开发阶段时的应用管理
4. 快速基于模板创建懒猫微服应用
5. 所见即所得式开发模式

> 要求先在你的操作系统上安装上npm包管理器

使用如下命令安装lzc-cli命令行工具

```shell
> npm install -g @lazycatcloud/lzc-cli
```

如果你的网络不太好，建议设置一下npm的国内镜像源，这样会快很多

```shell
> npm config --global set registry https://registry.npmmirror.com
```

安装完毕后我们在命令行中键入如下命令，查看是否安装成功

```shell
> lzc-cli --help

# 有如下输出就代表安装成功了
 [options]

命令：
  lzc-cli box       盒子管理
  lzc-cli app       应用管理
  lzc-cli project   项目管理
  lzc-cli appstore  应用商店

选项：
  -h, --help                                                   [布尔] [默认值: false]
      --version  显示版本号                                                      [布尔]
      --log      log level 'trace', 'debug', 'info', 'warn', 'error'
                                                             [字符串] [默认值: "info"]
```


## 启用开发者选项

微服默认情况下是没有开启开发者选项的，需要我们手动开启一下，操作方式也很简单。

首先你需要使用客户端登录微服，然后就能看到如下界面:

> 此时你看到的是懒猫微服的启动器界面，稍候我们实现部署第一个应用后就可以在这里看到

![懒猫微服客户端预览](https://dl.playground.lazycat.cloud/ploies/10/76c6d269-15c7-4776-93f3-daaf3525f84c-lzc-client-preview.png)

不过我们暂时先不关注启动器，让我们点击左边菜单栏的**设置**，随后再点击下面的进度条，就可以看到有很多和开发者相关的选项啦，按照下图的指示依次操作即可

![找到开发者选项设置页](https://dl.playground.lazycat.cloud/ploies/10/52b93204-be1f-4616-b184-2a44aeadcc37-open-debug-bridge-01.png)

点击进度条后，隐藏的开发者选项设置页面就出来啦，此时我们只需要开启debug-bridge这个选项即可

**开启debug-bridge选项后记得点击立即重启**

![开启DebugBridge选项](https://dl.playground.lazycat.cloud/ploies/10/09576daf-38a7-4b0d-9248-8e5da29bdf7c-open-debug-bridge-02.png)


> 如果不需要DebugBridge的功能了记得再回来关闭

# 开始使用

## 使用模板创建项目

经过一小会的微服重启，下面我们就可以开始创建我们的第一个项目啦

这次我们就先使用lzc-cli自带的项目模板来尝尝鲜，那么可以先键入如下命令创建一个vue3的纯前端项目

```shell
> lzc-cli project create my-lzc-app
# 这里的my-lzc-app是目录和应用名，可以自行修改
```

键入后，你应该会看到一些提示信息，这些信息都是需要你按需填写的，比如下面是我填写的内容

```shell
> lzc-cli project create my-lzc-app
? 选择项目构建模板 vue3
? 请输入应用ID, 如 cloud.lazycat.app.video always.lovelzc.evanmeek.demo
? 请输入应用版本信息 0.0.1
? 请输入应用子域名 mydemo
? 请输入应用名称 我的小Demo
? 应用简单的描述信息 尝鲜lzc-sdk
? 应用主页地址 
? 应用作者 EvanMeek
```

这里我指定了应用ID，以及应用子域名，这两个我们可以特殊关注一下，其中:

- 应用ID
  代表整个微服系统内唯一的应用凭证，也就是说这个ID最好不要和别人的起冲突了
  
- 应用子域名
  代表我们是通过什么域名来访问应用的，比如我这里设置了mydemo，那么我的微服名叫作xx1的情况下
  我只需要访问 ~mydemo.xx1.heiyu.space~ 即可访问这个应用啦
  
选择完这些基本信息后，还需要你选择vue3模板的一些选项，这些选项按你的需求来选择即可，和这里使用的是
Vue官方提供的脚手架。

## 项目基本结构解释

简单一条命令，我们的Demo项目就创建好了，随后键入如下命令查看一下里面有什么东西吧~

```shell
> cd my-lzc-app & ls

总计 192
drwxr-xr-x   6 evan evan    360  6月14日 14:13 ./
drwxrwxrwt  46 root root   1560  6月14日 14:11 ../
-rw-r--r--   1 evan evan     38  6月14日 14:13 env.d.ts
-rw-r--r--   1 evan evan    302  6月14日 14:13 .gitignore
-rw-r--r--   1 evan evan    331  6月14日 14:13 index.html
-rw-r--r--   1 evan evan  16532  6月14日 14:13 lazycat.png
-rw-r--r--   1 evan evan   1962  6月14日 14:13 lzc-build.yml
-rw-r--r--   1 evan evan    278  6月14日 14:13 lzc-manifest.yml
drwxr-xr-x 124 evan evan   2500  6月14日 14:13 node_modules/
-rw-r--r--   1 evan evan    598  6月14日 14:13 package.json
-rw-r--r--   1 evan evan 133271  6月14日 14:13 package-lock.json
drwxr-xr-x   2 evan evan     60  6月14日 14:13 public/
-rw-r--r--   1 evan evan   2431  6月14日 14:13 README.md
drwxr-xr-x   7 evan evan    180  6月14日 14:13 src/
-rw-r--r--   1 evan evan    219  6月14日 14:13 tsconfig.config.json
-rw-r--r--   1 evan evan    275  6月14日 14:13 tsconfig.json
-rw-r--r--   1 evan evan    300  6月14日 14:13 vite.config.ts
drwxr-xr-x   2 evan evan     60  6月14日 14:13 .vscode/
```

这里需要我们简单关注的就是**lzc-build.yml**和**lzc-manifest.yml**了，简单来说

- lzc-build.yml
  配置一些项目如何编译的选项，以及所见即所得开发模式的选项
  
- lzc-manifest.yml
  配置和懒猫应用有关的选项，比如应用ID，名称，所需权限等等

> 详细的解析将在本系列的后续文章中讲解

## 编译项目并安装到微服内

下面我们快速使用两条命令把我们的Demo项目编译一个lpk包，并安装到微服内吧

> lpk包是懒猫微服应用的特殊包格式，用户可以基于像Android和GNU/Linux一样拿到一个包直接利用包管理器安装即可使用

使用下面命令进行编译

```shell
> lzc-cli project build

vite v4.3.9 building for production...
✓ 48 modules transformed.
dist/assets/logo-da9b9095.svg        0.31 kB │ gzip:  0.21 kB
dist/index.html                      0.42 kB │ gzip:  0.29 kB
dist/assets/AboutView-4d995ba2.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-b9365240.css       4.18 kB │ gzip:  1.31 kB
dist/assets/AboutView-84092f8f.js    0.23 kB │ gzip:  0.20 kB
dist/assets/index-574c7f67.js       85.39 kB │ gzip: 33.64 kB
✓ built in 1.05s
[info] 输出lpk包 /tmp/my-lzc-app/always.lovelzc.evanmeek.demo-v0.0.1.lpk
```

由于我们是纯前端的项目所以很快，只花了1s就编译好了

编译好后会在项目目录下生成一个lpk包: **always.lovelzc.evanmeek.demo-v0.0.1.lpk**

> 本系列后续文章后详解这个lpk包

随后我们就可以把这个lpk安装到微服里啦，通过下面这条命令即可一键安装:

```shell
> lzc-cli app install always.lovelzc.evanmeek.demo-v0.0.1.lpk

[info] 开始安装应用
[info] 安装成功！
[info] 👉 请在浏览器中访问 https://mydemo.xx2.heiyu.space
```

这样就安装成功啦，此时我们可以打开客户端，在启动器内看到 **我的小Demo** 应用啦

![launcher](https://dl.playground.lazycat.cloud/ploies/10/639798c0-dab1-4794-bbdf-b5597fe3a1bc-lzc-app.png)

![我的小Demo](https://dl.playground.lazycat.cloud/ploies/10/5a5828e6-4ac1-42b1-863f-c84a7293a4bf-lzc-app-02.png)

# 总结

这次我们简单讲解了:

1. lzc-cli工具的安装与使用
2. 开启开发者模式
3. 部署并安装应用到微服内

虽然内容不多，但是足以大家折腾一下啦。



十分感谢大家能看到最后，我很想听听大家的反馈，以便我能改进和提高本系列教程，如果有任何问题或建议欢迎在评论
区留言，我将很高兴听取大家的建议。

喜欢的话不妨给我**点个赞**吧! 🤪