Node.js
swagger
riot
OpenAPI-Specification
OpenAPI

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

More than 1 year has passed since last update.

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実装の部分も解説していきまーす。


リンク