More than 1 year has passed since last update.

fukuoka.ex：福岡Elixirコミュ

LiveBeatsをローカルで動かして、楽しむ(Elixir)

Last updated at 2022-02-28Posted at 2022-02-27

わが庵は都のたつみしかぞ住む世を宇治山と人は言ふなり

Advent Calendar 2022 57日目¹の記事です。
I'm looking forward to 12/25,2022
私のAdvent Calendar 2022 一覧。

はじめに

Elixirを楽しんでいますか

LiveBeatsをローカルで動かして、楽しんでみます。

What's LiveBeats ?

こういうものです。
まずは動画をご覧になってください。

LiveBeats: Building a Social Music App With Phoenix LiveView抜粋

Chris McCordさんの紹介記事
LiveBeats: Building a Social Music App With Phoenix LiveViewからポイントを独断と偏見で抜粋します。

We decided that 2022 was a good year to ship a full-stack Phoenix reference app.
Meet LiveBeats, a social music application we wrote to show off the LiveView UX, while serving as a learning example and a test-bed for new LiveView features.

超意訳

2022年がPhoenixフルスタックなリファレンスアプリを紹介するの良い年であると、Fly.ioは決断しました。
LiveBeatsを紹介しよう。
LiveViewを学ぶのに最適な、ソーシャル音楽アプリです。

I just released LiveBeats – open source social music app built on Phoenix LiveView. It's deployed around the world a 14 node cluster. PubSub and Presence Just Work™

This is what the future of full stack development looks like 👇https://t.co/Oq28DRTfyV
— Chris McCord (@chris_mccord) February 2, 2022

Chris McCordさんご本人による解説記事

Phoenixの作者Chris McCordさんご本人による解説記事はこちらです。

ソースコード

ソースコードはここにあります。

体験サイト

Fly.ioさんがデプロイしていくれているモノを試すことができます。

https://livebeats.fly.dev/signin

ローカルで動かす

ローカルで動かしてみます。

READMEに従うとよいです。
READMEに書いてあること以上のことは書けませんが、私はこうやって動かしたということを記録しておきます。

GitHubアカウント

GitHubアカウントを用意しておいてください。
みなさん、お持ちですよね

Elixir

Elixirは1.13.1を使っています。

elixir -v

上記を実行すると下記の結果が得られました。

Erlang/OTP 24 [erts-12.2] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit]

Elixir 1.13.1 (compiled with Erlang/OTP 24)

OSを記しておきます。
macOS Monterey 12.2.1

PostgreSQL

PostgreSQLが必要です。
私は以下のようにしてDockerで動かしました。

docker run -d --rm -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres postgres:13

Github OAuth appの作成

このページから、Github OAuth appを作成します。

READMEに書いてある通りです。

Application name: 任意
Homepage URL: http://localhost:4000
Authorization callback URL: http://localhost:4000/oauth/callbacks/github

さらに、2つの環境変数を設定します。

LIVE_BEATS_GITHUB_CLIENT_ID
LIVE_BEATS_GITHUB_CLIENT_SECRET

いつもの操作、いつもの景色

Phoenixを楽しんだことのある方ならおなじみのいつもの操作、いつもの景色です。

mix deps.get
mix ecto.setup
mix phx.server

Visit: http://localhost:4000/

(おまけ)アップロードする`.mp3`ファイルが欲しい〜っす

https://www.purple-planet.com/

Chris McCordさんの解説動画の中でちらっとでてくるサイトに行くと無料で.mp3ファイルがダウンロードできます。
お手元に適当なものが無い方はこちらのサイトを使えばよいとおもいます。

解説動画の中で使っている下記の楽曲が手に入ります。

$\huge{でっかい夢をつかんで}$
$\huge{気分は上々!!!}$

Wrapping up

Enjoy Elixir
$\huge{Enjoy\ Elixir🚀}$

今回はLiveBeatsをローカルで動かして、楽しんでみました。
動かしてみました〜　ってだけの記事です。

LiveBeatsの中身はいろいろみて研究していきたいです。
たとえば、GitHubと連携してメールアドレスやアイコンを取得したりしている以下

は特に興味津々です。

以上です。

付録

以下、付録です。

Elixirの誕生日は、2012年5月24日です。
そのため、今年の2022年5月24日は10周年を迎えます。

iex> Date.diff(~D[2022-05-24], ~D[2022-02-26])
87

そうそう！
2月24日発売のWEB+DB PRESSで、ElixirとPhoenixの特集がでていますよ〜

Elixir、Phoenixをはじめられたばかりの方も、腕におぼえがある方も、どんなものなのかなあと様子見をきめこんでいる方も、
つまりは
$\huge{全人類のみなみなさま！！！}$
お手にとって、お楽しみください!!!

We, @tamanugi @torifukukaiou @the_haigo @mokichi_s12m including me, wrote featured articles for WEB+DB PRESS Vol.127 about Elixir and Phoenix! It's being published on 24, Feb.https://t.co/UPNiVU1zG9
— 栗林健太郎 (@kentaro) February 4, 2022

Elixir

最後の最後に、Elixirについて紹介します。

|>でスイスイ、プログラミングしていくことができる素敵なプログラミング言語です
さっそくプログラムの例を示します
Qiita APIを使わせていただいて、Elixirタグがついた最新の記事を20件取得しています
ここでは雰囲気をつかんでいただければ大丈夫です

Mix.install [{:req, "~> 0.2.1"}]

"https://qiita.com/api/v2/items?query=tag:Elixir"
|> URI.encode()
|> Req.get!(finch_options: [pool_timeout: 50000, receive_timeout: 50000])
|> Map.get(:body)
|> Enum.map(& Map.take(&1, ["title", "url"]))

Webアプリケーションを楽しむなら

Phoenix

IoTを楽しむなら

Nerves

AIを楽しむなら

Nx + Livebook

もっとElixirのことを知りたい方へオススメの書籍

コミュニティ

elixir.jp Slack workspaceに参加してみてください
- マヂ、やさしい人ばっかりのコミュニティ
- あなたの困ったをきっと解決してくれるでしょう
NervesJP Slack workspaceでは、NervesやIoTが好きな愉快なfolksたちがあなたの訪れを歓迎します
たくさんのコミュニティがあります

(EDI／fukuoka.ex／kokura.ex ＆ LiveView JP の @piacerex さん作 )