Node.js
swagger
riot
OpenAPI-Specification
OpenAPI

もう管理画面のフロントコードを書く必要はありません、そう Viron ならね。

riot.png

管理画面のフロントエンドコードを書く時代は終わりました。
Vironがあれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。

そしてこれはOSSです。誰でも自由にお使いいただけます。

概要

Vironは、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。
APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。

経緯

私の会社では、大小さまざまな自社サービスが開発・運用されています。

管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。

エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。
運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。
さらに外から見たいときにスマホから見れないし、緊急な対応にも大変でした。

そんなとき、うちのCTOがOASによるAPI定義と管理画面自動生成の親和性に気づき、このプロジェクトは始まったのです。

メリット

フロントエンドエンジニアにとって

管理画面作成のために、フロントエンドエンジニアは必要なくなりました。
フロントの全てはVironがやってくれます。

サーバーサイドエンジニアにとって

OpenAPI(Swagger)に対応したAPIサーバーを用意するだけになりました。
Open APIを使うことで、プログラムを、まるでドキュメントのように書くことができます。定義書を作成したら、管理画面も同時に完成してしまっている、というイメージです。あとは、Swaggerの定義書に沿ってロジックを書くだけです。

またサーバ側の言語は、javaでもNodeでもPHPでも使えるので、色々なエンジニアが使えます。そしてあらゆるサービスに使える広い汎用性も強みですね。

プロデューサー・運用にとって

サービスごとに管理画面の操作を覚える必要はなくなりました。
別々の管理画面を一つのVironという名のコンソールで管理できます。
レスポンシブデザインなので、スマホから操作することも可能です。

デモ

まず、Viron を開きましょう。

home.png

ここがホームです。エンドポイントごとのカードがずらずらと並びます。
追加ボタンを押して、管理画面を追加しましょう。

ScreenShot 2018-02-01 11.42.36.png

誰でも試せるテストAPIサーバーがあります。
以下のURLを入力して、追加ボタンを押してみてください。
https://viron.camplat.com/swagger.json

ScreenShot 2018-02-01 11.44.58.png

一つ追加されました!
カードをクリックすると、ログイン画面に移動できます。

ScreenShot 2018-02-01 11.46.11.png

サーバー構築をする際、ID or email/passwordでログインするか、Google認証によるログインするかカスタマイズできます。
今回のAPIサーバーは、mail/password なため、以下を入力してログインしてみてください。

mail password
viron@example.com Ev4PNxRrls4U

無事ログインでき、ダッシュボードに入れたら完了です!

ScreenShot 2018-02-01 11.54.52.png

左メニューから様々なサンプルを見ることができます。
色々見てみてください!

機能

管理画面ではCRUD機能を備えており、Swaggerで定義することで自動でコンポーネントを生成する仕組みになっています。

出力コンポーネント

表示には、以下のコンポーネントが備わっています。リンクの飛び先にサンプルがありますよ。

入力コンポーネント

入力フォーマットをSwaggerで定義することで様々な入力コンポーネントを自動で生成してくれます。

まとめ

Viron、こんな機能がありますよ!の紹介でしたが、ドキュメントには、どうSwaggerを定義すればいいのか?どう作れば良いのか?が懇切丁寧に記載されています。

また実際に作る際には、リポジトリに example-emailexample-googleと認証機能を実装したボイラープレートが作られていますので、そこから機能拡張していくことも可能です。

最後に、VironはOSSですので、issue・プルリクどしどし募集してます!!!

次はAPI実装の部分も解説していきまーす。

リンク