Zenn
Closed5

Adaloでカスタムプラグインを作ってみよう

nocode
Adalo
harrythecodeharrythecode

初めに

AdaloとはReactNativeベースのネイティブアプリが作れるノーコードツールです。また本ツールではユーザが自由にカスタムコンポーネントを作成できるようになっているので開発、テスト、公開までの手順をご紹介します。

https://adalo.com/

harrythecodeharrythecode

必要事項

基本的な事項は以下に記載されています。それではサクサク進めていきましょう。

https://developers.adalo.com/docs/basics/tutorial

検証環境

  • フォルダ構成
├── adalo-random-picker
│   ├── LICENSE
│   ├── README.md
│   ├── adalo.json
│   ├── dist
│   ├── index.js
│   ├── logo.png
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   └── yarn.lock
└── mobile-previewer

カスタムコンポーネント「adalo-random-picker」と「mobile-previewer」はあえて同じ階層に位置させているので注意。

Item Version
OS MacBook Pro, Apple M1 Pro, macOS Monterey 12.3
Node npx - 6.14.16, node - 14.19.1
Xcode 13.4.1
  • Software: brew list --version|grep -E '(watchman|cocoapods)' 
cocoapods 1.11.3
watchman 2022.06.27.00
harrythecodeharrythecode

手順

npxコマンドとは - https://zenn.dev/ryuu/articles/what-npxcommand

$ npx create-adalo-component my-component
npx: installed 58 in 5.599s

Create Adalo Library

✨ What is the name of your Adalo Library? myLibrary
✨ What is the name of your Adalo Component? myComponent
✨ Which type of React component would you like to use? Functional

    [1/2] ✔ Library Built
    [2/2] ✔ Dependencies installed
...
$ cd my-component
$ npx adalo login

> mylibrary@1.0.0 login /Users/hoge/projects/tweakit/my-component
> adalo login

prompt: email:  <your-email>
prompt: password: <your-pass>

  Login successful!
  Your login information was saved to /Users/hoge/.adalorc
$ npx adalo dev

後は Adaloのアプリを適当に開くとDevelopmentの項目に表示されます。時々ブラウザをリロードしないと見えない時があります。

harrythecodeharrythecode

iOSテスト編

必要条件

  • XCode
  • Watchman (For react native)
  • Cocoapods (For iOS)
  • Node (>10)

Watchman, CocoapodsはMacOSであればbrewでインストール可能です: brew install cocoapods watchman

Nodeはnvmがおすすめです: (macOS) NVMでNodeのバージョン管理

npmが入ってたらyarnも併せてインストールしましょう: npm install --global yarn

セットアップ (iOS)

  • git clone https://github.com/AdaloHQ/mobile-previewer & cd mobile-previewer
  • 依存関係のインストール等
mobile-previewer/ $ cd ios
mobile-previewer/ios $ yarn install
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
...
Pod installation complete! There are 47 dependencies from the Podfile and 58 total pods installed.
mobile-previewer/ios $ yarn start
yarn run v1.22.19
...
To reload the app press "r"
To open developer menu press "d"
  • mobile-previewer/ios フォルダのAdaloApp.xcworkspaceをXcodeで開き、Buildする

無事にBuildが成功すれば次に進めます。

自作のコンポーネントを読み込ませる

https://github.com/amezousan/adalo-random-picker を例にして説明します。

  1. 依存関係をインストール、アプリを開始
yarn install
yarn start
  1. mobile-previewer/package.jsonで、dependenciesの配下に自作コンポーネントと同名の名前(https://github.com/amezousan/adalo-random-picker/blob/master/package.json#L2)で読み込ませる。
  "dependencies": {
...
    "rn-fetch-blob": "0.11.2",
    "random-picker": "../adalo-random-picker"

💡 通常は数字が入るバージョンのところには、カスタムコンポーネントのフォルダを指定します。今回、mobile-previewerとadalo-random-pickerは同じレベルの階層にあるので「../」を用いた相対パスで指定しています。

Adalo上での自作コンポーネントは「<package.json - name>.<package.json - adalo.components[].name>」のようにネーミングされ呼び出されます。

はまったこと

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Sun Jul 03 2022 10:30:50.588]  ERROR    Invariant Violation: Native module cannot be null.
[Sun Jul 03 2022 10:30:50.588]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Sun Jul 03 2022 10:30:51.562]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
このスクラップは2022/09/11にクローズされました