Help us understand the problem. What is going on with this article?

もう管理画面のフロントコードを書く必要はありません、そう 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実装の部分も解説していきまーす。

リンク

tosaka07
iosエンジニアです。
https://tosaka.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした