ソフトウェア

お手軽にウェブアプリを開発できるOSSのフレームワーク「Phoenix Framework」、15分でTwitterライクなアプリを開発するムービーも


ウェブアプリケーションの開発を行うためのフレームワークにはRuby on Railsなどがありますが、そうしたフレームワークのひとつであるオープンソースの「Phoenix Framework」を使うと、簡単にウェブアプリを開発することができます。

Phoenix Framework
https://www.phoenixframework.org/

まずは開発環境の構築から行います。今回はUbuntu 20.04上に環境を構築してみます。

Ubuntu 20.04 LTS (Focal Fossa)
https://releases.ubuntu.com/20.04/


Phoenix Frameworkは一部の機能をパッケージ管理システム・npmに依存しているので、事前にインストールしておきます。データベースにはデフォルトで推奨されているPostgreSQLを使用します。

Node.js
https://nodejs.org/ja/


PostgreSQL: The world's most advanced open source database
https://www.postgresql.org/


Phoenix Frameworkはプログラミング言語のElixirを使っているのでインストール。

wget https://packages.erlang-solutions.com/erlang-solutions_2.0_all.deb && sudo dpkg -i erlang-solutions_2.0_all.deb
sudo apt update && sudo apt install esl-erlang erlang-dev erlang-parsetools elixir


また、Phoenix Frameworkではウェブアプリが更新されると自動でコンテンツをリロードするライブリローディング機能がありますが、その機能をLinuxで利用するにはinotify-toolsを導入しておく必要があるとのこと。

sudo apt install inotify-tools


Phoenix Frameworkを利用するにはHexパッケージが必要とのことなので、プロジェクトのディレクトリで下記コマンドを実行し、インストールしておきます。

mix local.hex


Phoenix Frameworkをインストール。これで開発環境の構築が完了しました。

mix archive.install hex phx_new 1.5.1


さっそくPhoenix Frameworkで「hello」プロジェクトを作成。

mix phx.new hello


実行すると依存するパッケージなどが「hello」ディレクトリ下に配置されます。


「hello」ディレクトリに移動し、データベースを作成。

mix ecto.create


ウェブアプリを起動します。

mix phx.server


ブラウザで「http://localhost:4000」にアクセスすると、無事ウェルカム画面が表示されました。


続いて実際に簡単なウェブアプリを作ってみます。といっても、Phoenix FrameworkにはMVCに従ってウェブアプリに必要な要素を自動で構築してくれる機能があるので、簡単なコマンドを入力するだけでそれらしいものが作れます。

mix phx.new test
cd test
mix ecto.create
mix phx.gen.html Accounts User users 名前:string 年齢:integer 性別:string


routeの追加は手動で行う必要があるので、「./lib/test_web/router.ex」にrouteを追記します。


下記コマンドで設定を適用して……

mix ecto.migrate


ウェブアプリを起動します。

mix phx.server


ウェブブラウザで「http://localhost:4000/users」にアクセスすると、以下のようにユーザーのリストを作成するためのウェブアプリが表示されました。「New User」をクリックすると……


ユーザーを追加できます。


こんな感じで、ユーザーを管理するウェブアプリを簡単に作成することができました。


Phoenix Frameworkを利用して、15分でTwitterのようなウェブアプリを開発するムービーが公開されています。

Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5 - YouTube


完成したウェブアプリはこんな感じで、確かにTwitterのようなタイムラインを持つウェブアプリになっています。


なお、Phoenix Frameworkに必要なパッケージ群のバージョンやウェブアプリの起動時間を確認できる「Phoenix LiveDashboard」もGitHub上で提供されています。

GitHub - phoenixframework/phoenix_live_dashboard
https://github.com/phoenixframework/phoenix_live_dashboard

この記事のタイトルとURLをコピーする

・関連記事
超お手軽にペアプログラミングも可能なプログラミング環境が構築できるAWSの「Cloud9」を使ってみた - GIGAZINE

無料のRPGをプレイするだけで未経験者でもプログラミングを習得可能な「コードクロニクル」でPythonをマスターしてみた - GIGAZINE

プログラミングを勉強するには「言語能力」と「問題解決能力」も重要 - GIGAZINE

プログラマーが本当に支持するプログラミング言語がわかる「人気の高いプログラミング言語2019」が発表 - GIGAZINE

in ソフトウェア, Posted by log1n_yi

You can read the machine translated English article here.