Velo by Wix のメモ

Wixでソリューションエンジニア兼アドボケイドとして仕事を開始しました！

具体的にはVelo by Wixというものを使って、Wixでできることを拡張していきます。

ノーコードプラットフォームであるWixにコードを足すことで可能性は無限大！と言いたいところですが、現状あまり日本語での情報がないので少しでも知ってもらえればと思いメモを公開することにしました。

私はフロントエンドの開発経験は8年くらいありますが、Veloの経験はこれからという状態なので、成長過程？も含めてログを残していきたいなと思っておりまして、ここでは本当に作業メモというか、気がついたことを書き殴っていく予定です。

参考になるかわかりませんが、悪しからず。

フィードバック全般を建設的にVeloに反映することもミッションのうちなので、
いい面だけではなく不満に思った点もメモとして残していきます。

開発中にどうすれば効率が上がるかと思ったんですが、ディスプレイが小さいと厳しいですね。
エディターと開発中のサイトが同時に表示されているような画面ですので大きめのディスプレイがいい。
既存製品でできることがいろいろある分、リファレンスも常に開いておきたいし。

あと、プレビュー画面でconsole.logを確認するために頻繁に
プレビュ <-> エディターを行き来します。
この往復をマウスでやるのがだるいのでショートカットを紹介します。(私はMacユーザーですので適宜読み替えてください)

プレビューは cmd + p で行うことができます。
逆にプレビューからエディターに戻るにはパッと調べたところショートカットはありませんがブラウザバックすればいいので cmd + 左矢印 で戻れます。

Wixエディターに搭載されているVeloのエディターはMonacoで動いているようですがいくつかショートカットが動かない(大好きなショートカットの1つの cmd + D がない...)です。

現在アーリーアクセスですが、Veloのコードは GitHubと連携することでお好きなエディターを使ってコーディングすることができます。

とりあえずは埋め込まれているエディターでコーディングを続けていく

UIだけで実現できることはコードを書いても実現できる。

でも、圧倒的にUIで実装しちゃった方がいいし、そうしないとWixを使うメリットが半減しちゃうのでWixをしっかり使いこなした上でVeloで細かい部分をコーディングするというのが正しい使い方だなあとしみじみ

wix-data でコレクションにアクセスするときに参照、複数の参照のタイプの値でひっかかりがち

単一の参照の場合はidが返ってくるが複数の参照の場合は何も返ってこない queryReferenced( ) を使う必要がある

プレビュー時にログインしているorログインしていないの状態がうまく切り替わらないのでそれらが関連しているロジックを実装している時にうまくプレビューから確認できないっぽい？

もしかしたらうまくできる方法があるかもしれないので確認したほうが効率的に開発が進められそう

しばらくいろんな機能を触ってみて
データベースのhookの機能やトリガーメールなど便利な機能があり1から実装したり、アカウントを作ったりする必要なく一通りの機能が実装できる点が便利だと感じた。

だが、APIリファレンスが膨大で何ができるか、など調べるのが苦手な人は混乱してしまいそう。
また、日本語の利用例が無い点なども慣れていない人は躊躇するポイントだと思った

これと同じ問題にはまっている。

ちゃんと調査する必要があるがウェブソケットを使っているがdata hookから発火した場合はコネクションが切れてしまっているのではないかと。
それゆえにうまく配信されない。

↑コードを変更していないのだが、修正されていた。確認中。

wix-dataset について

Datasetは下記のようにボタンやインプットに対してデータベースと連携する設定を介して作成する

一方DynamicDatasetは動的ページを作成した際に下記のように自動で紐づけられます

APIとしてDatasetとDynamicDatasetでできることは基本的に同じで
DynamicDatasetは動的ページに紐づいているため下記のメソッドがあります。

このメソッドにより、データコレクションの次もしくは前のデータに紐づく動的ページのURLを取得することができます。

いろいろ遊んでいたらカスタム要素というものがあり、これはプレミアムのサイトでしか表示されない要素なのですが、Litで書いたコンポーネントが動くので、これを使ってWixの既存の要素でカバーされていない複雑なUIを書いていく。

＊いろいろ可能性を探っている状態なので実験的にやっていますので悪しからず

プレミアムプランであればWix Blocksの中でカスタム要素は使うことができる。
あと本番公開してカスタム要素が動かなくてハマったんだけどセキュリティの兼ね合いでカスタムドメインも設定する必要がある。

For security reasons, to use the custom element, you must upgrade your site with a Premium Plan, connect a domain and have no ads on it.

学習のパスとしてVeloを学ぶ前にコンテンツマネージャーとデータセットの知識が必要ということがわかった。
上記を知っているか知っていないかで書かないといけないコード量が全然違う....