30分でHaaSアップルレット開発を開始

1.ミニプログラムの紹介

ミニプログラムは、ダウンロードやインストールをせずに使用できるアプリケーションであり、「指先で」アプリケーションの夢を実現します。ユーザーはスキャンまたは検索してアプリケーションを開くことができます。また、「使用して実行」の概念を具体化しており、ユーザーは、インストールするアプリケーションが多すぎるかどうかを心配する必要がありません。アプリケーションはどこにでもあり、いつでも利用できますが、インストールまたはアンインストールする必要はありません。

開発者にとって、小規模プログラム開発のしきい値は比較的低く、APPほど難しくはありません。単純な基本アプリケーションに対応でき、ライフサービスオフラインショップや非剛体低周波アプリケーションの変換に適しています。ユーザーにとっては、時間コストと携帯電話のメモリスペースを節約できます。開発者にとっては、開発とプロモーションのコストも節約できます。

そのため、HaaSエコシステムのクライアントアプリケーションとして小さなプログラムを選択し、ユーザーが最小の開発コストでクラウドリンクをすばやく通過できるようにします。

2.ミニプログラム開発者ツール(IDE)

ユーザーは https://opendocs.alipay.com/mini/ide/overviewにアクセスして、Mini Program Developer Toolダウンロードできます(この記事で使用されているバージョンは1.17.4です)。AlipayアップルトとDingTalkアップルトに加えて、このツールは、Taobao、Tmall Elf、AutoNaviアップルトなどのさまざまなソフトウェアバージョンのアプリレットの開発もサポートしています。

image.png

空のプロジェクトを作成する

image.png

image.png

image.png

作成後のインターフェースは以下のとおりです。

image.png

サイドバーを開き、pages / index / index.axmlのコードを編集してファイルを保存すると、シミュレーターでHelloWorldを確認できます。

<view>
  HelloWorld!
</view>

image.png

しかし、まだ終わっていません。実際のマシンのデバッグをクリックするか、右上隅にプレビューまたはアップロードしようとすると、「アプリを関連付ける」というプロンプトが表示されます。

image.png

アップルトを開発する前に、対応するプラットフォームに移動して、アップルトのAppIDを申請する必要があることがわかりました。これは、各アップルトの一意の識別子です。これを使用する場合にのみ、実際のマシンでアップルトを実行できます。

3.Alipayミニプログラムアプリケーション

[関連アプリケーション]ウィンドウの小さな三角形をクリックし、[ミニプログラムの作成]をクリックして、Alipayオープンプラットフォームに入ります。タイトルバーの「コントロールパネル」をクリックします。

コンソールで、[アプリケーションの作成]-[小さなプログラム]をクリックします

image.png

作成を完了するために必要な情報を入力します。

image.png

image.png

image.png

作成が完了したら、新しく作成したアプリケーションをアップルト開発者ツールの左上隅に関連付け、[実際のデバイスでデバッグ]をクリックすると、携帯電話のAlipayアプリページにアップルトが自動的に表示されます。

image.png

3.1、実際のマシンの実行結果

image.png

4. Dingding Mini Program Application

Dingding Mini Programを開発に使用するには、まずIDE開発モードをDingding MiniProgramに切り替える必要があります。左上隅をクリックして、「管理」を選択します。

image.png

「Dingding」アップルトを選択し、「OK」をクリックします。

image.png

左上隅をもう一度クリックすると、選択するリストにDingdingアプリケーションオプションがあることがわかります。ここでは、内部エンタープライズアプリケーションを選択します。

image.png

「関連するエンタープライズ内部アプリケーションの選択」で、「内部エンタープライズアプリケーションの作成」を選択します。

image.png

右上隅にある[登録済みエンタープライズ]をクリックし(これは実際にはここで作成された仮想の小さなプログラム開発グループです。Dingdingアプリケーションに同じ名前の追加のチャットグループがあり、このグループの他のメンバーに参加できます)、プロンプトに従って登録を完了します。

image.png

「アプリケーション開発」ページに移動し、「内部開発」と「ミニプログラム」を選択し、「アプリケーションの作成」をクリックします。

午後のスクリーンショット2020-12-061.54.31.png

対応するアップルト情報を入力します。

image.png

DingTalkアップルレットの作成を完了します。

image.png

このとき、IDEには、作成したばかりの小さなプログラムが表示され、実際のマシンでデバッグできます。

image.png

5.HaaSクラウドネイル統合開発

この章では、SDKを使用してDingTalkアップルレットを開発する方法を紹介します。1つ目は、HaaSアップルレット開発SDKをgithubにダウンロードすることです。

5.1。SDKを入手する

git clone -b dev_3.1.0_haas https://github.com/alibaba/AliOS-Things.git

SDK関連のコードと操作readmeは、application / miniapp /ディレクトリにあります。

5.2、SDKディレクトリ構造

/
├─ lib (存放依赖库的文件夹,用户无需关心)
│    ├─ @alicloud/pop-core     (https://github.com/aliyun/openapi-core-nodejs-sdk)
│    ├─ kitx
│    └─ iot-packet.js              (封装给用户的文件)
├─ pages                              (页面文件夹,用户在这里自定义页面,示例持续更新中)
│    └─ index                        (首页 选择进入不同示例) 
│             ├─ index.axml         
│             ├─ index.js           
│             ├─ index.acss 
│             └─ index.json 
│    └─ HaasCar                    (示例1 HaaS小小蛮驴)
│             ├─ HaasCar.axml    (页面布局文件)
│             ├─ HaasCar.js        (控制逻辑,用户在这里定义交互行为)
│             ├─ HaasCar.acss    (页面样式)
│             ├─ HaasCar.json      (页面配置,用于配置页面标题等)
│             └─ HaasCar.TSL.json (示例对应的TSL文件,用户可以在物联网平台上导入该文件生成物模型)
│    └─ HaasFlower              (示例2 HaaS养花,目录结构同 HaasCar)
├─ app.js                            (注册小程序,在这里进行全局参数配置,如 AccessKey)
├─ app.acss                         (小程序全局样式)
├─ app.json                         (小程序全局配置,可以在这里设置小程序打开的默认页面)
└─ others

5.3、SDKの使用

小さなプログラム開発ツールを使用して、miniappプロジェクトを開きます。

image.png

  • step1 app.jsにAccessKeyIDとAccessKeySecretを入力して、クラウドAPI呼び出しのアクセス許可を取得します
  • step2ターゲットデバイスのDeviceNameとProductKeyを入力します。これが制御対象のデバイスです
// app.js
let accessKey = {
  accessKeyId: '<- accessKeyId ->', 	// 填入阿里云物联网平台生成的 assessKeyId 以及 Secret
  accessKeySecret: '<- accessKeySecret ->',
}

// HaasCar.js
let device = {
  DeviceName: '<- DeviceName ->',   // 填入目标设备 DeviceName 以及 ProductKey
  ProductKey: '<- ProductKey ->'
}

コードに記載されているいくつかの重要なパラメータ:

  • AccessKeyID AccessKeySecret

クラウドアカウントAccessKeyは、ユーザーがAlibaba CloudAPIにアクセスするためのキーです。Https://usercenter.console.aliyun.com/#/manage/ak

セキュリティのために、権限を分離するためにRAMサブアカウント作成するという形をとることができます

スクリーンショット2020-10-291.01.39午後。

作成後、手動で権限を割り当てる必要があります。右側をクリックして権限を追加してください。ここでAdministratorAccessを直接選択しました 。 追加後は以下のようになります。

スクリーンショット2020-10-291.03.13.png

  • DeviceName ProducKey

これらの2つのパラメーターは、デバイスの作成時に生成されます。

5.4、コンパイルの検証

Mini Program IDEの右上隅にある[RealDevice Debugging]ボタンをクリックし、QRコードが生成されたら、DingdingAPPを使用してコードをスキャンしてMiniProgramを起動します。

  

この時点で、完全な小さなプログラムが完全に実行され、Alibaba CloudIoTプラットフォームと対話できます。HaaSインスタンスアプリレットの一連の段階的な共有がありますので、ご期待ください。ありがとうございました

 

6.開発者のテクニカルサポート

さらに技術的なサポートが必要な場合は、Dingding DeveloperGroupに参加できます

テクノロジーとソリューションの詳細については、AliyunAIoTホームページhttps://iot.aliyun.com/をご覧ください。

おすすめ

転載: blog.csdn.net/HaaSTech/article/details/110850634