ワークショップ： Streamlitのコントリビューションに 挑戦してみよう SnowVillage - Team Streamlit 2023/12/21 (木)

本日の仕掛け人 Toru Hiyama Data Engineer @NTT DATA X(Twitter):@toru_data Qiita:@toru_hiyama Akira Sakatoku Core Staff @KDDI Corporation. X(Twitter): @AkSakatoku Qiita: @ak-sakatoku Yuki Yamanaka Data Engineer @NOVASELL X(Twitter): @yamnaku_ Kohei Komiyama Data Engineer @GENDA Inc. X(Twitter): @kommy_jp Zenn: @kommy339 Mizuho Yashiro Data Engineer @truestar X(Twitter): mizuhoruisui

ワークショップでやること / 流れ ● OSSコントリビューションの一連の操作を確認します ● Streamlit 自体の開発環境を、GitHub Codespacesに構築します ● Streamlit のソースコードをいじって遊んでみましょう！ ● 最後に、Pull Request までの流れを確認します これでみんなも、OSS コントリビュータ！👑

早速ですが・・・、開発環境を構築しておきましょう セットアップに時間がかかるため、先に開発環境を構築していきます🔧 下記のGitHubリポジトリにアクセスして、「1. Codespacesの起動」と 「2. Streamlit Contribute環境の構築」の操作を行います https://github.com/THiyama/codespaces-st-contribute 2.の操作を最後まで実行すると10分ほどパッケージの インストールが始まるので、それまで解説をします。

Streamlit 開発環境について Streamlit にコントリビュートするために、Streamlit リポジトリの CONTRIBUTING.mdに開発環境の構築方法が記載されています🖊 ● 今回用意した環境は、この CONTRIBUTING.mdに則っています。 ● Ubuntu 20.04 / Node.js / CRACO(Create React App) / Python 3.8 / などなど ❏ GitHub Codespaceについて ❏ 今回みなさんに構築いただいた環境は、 GitHub Codespaceという開発環境です ❏ クラウドベースのインスタントな開発環境なので 素早く・再現性高く・簡単に構築できます ❏ ぜひ今後の開発でも使ってみてね！

OSS コントリビュートって？ OSS へのコントリビュートには、コードを書くだけでなく様々な形があります。 ● 📢Issueの報告：バグや提案を報告 ● 📃ドキュメントの改善：利用ガイドの更新や、セクションの追加 ● 󰠁コードの実装：Issueのバグや提案の実装 ● 🤝コミュニティサポート：チャットルームなどでの質問への回答 どれも重要なのは「プロジェクトに価値を提供すること」です。 まずは、ドキュメントの修正や見つけたバグをIssueで登録することなどから 始めてみましょう！🚀

OSSプロジェクトへのコントリビュートは、以下のステップに沿って行われます ● プロジェクトのガイドライン、コントリビュートドキュメントを読む ● Issueの確認、報告、ディスカッション ● コードの実装、Pull Request ● コードレビュー、承認 / 拒否 OSS コントリビュートの流れ 共有リポジトリ フォークリポジトリ フォーク Pull Request 󰠁 クローン Push 🙋󰢧 Issue 󰠼 プルリクの確認 メンテナンス

今回のStreamlit コントリビュートの対象 Streamlit コントリビュートというと、大きく分けて２つの種類があります 1. Streamlit 自体へのコントリビュート 2. Streamlit カスタムコンポーネントへのコントリビュート 今回は、1. Streamlit 自体へのコントリビュートを確認することで、いつも使っているOSS のバグや機能拡張、ドキュメント執筆を行う方法を理解します🎓 ➔ カスタムコンポーネントについては、Yuichiroさんや公式ドキュメントその他 Webから情報収集してみましょう！🔍

Streamlitへのコントリビュートをはじめる コントリビュートをはじめるにしても、題材がないとはじまりません。 そこで、今回のテーマを、 「st.snow()❄ があるなら st.fires()🔥 があってもいいじゃないか！」 というものにしましょう。

StreamlitリポジトリにIssueを立てる そうと決まれば、まずすべきことは何でしたか？👀 そう、プロジェクトガイドラインやリポジトリのIssueを確認することでしたね Issueを確認して、同じアイデアを持った人がいれば、アイデアを共有したり、 実装方法を一緒に考えたりしましょう💡 今回はIssueを立てることはしませんが、リポジトリのIssueを確認しておきます https://github.com/streamlit/streamlit/issues

Streamlit の開発をはじめる 開発環境は手元にあるので、早速開発をはじめていきましょう！󰠁 ● メモ「3. Streamlit Contribute作業の開始」に従って作業を進めます ● ここでは、ビルドサーバーの起動と、Streamlitアプリの起動を行います ターミナル１：ビルドサーバー ターミナル２：ビルドサーバー ブラウザ（自動で起動してくるはず）

時間の限り、Streamlit のソースコードをいじってみる ここからは時間の限り Streamlit のソースコードを修正して遊んでみましょう！ （１５：２５まで） ● 修正内容/方法は、メモ「4. Streamlitの開発」を参考にしてみてください ● メモ：https://github.com/THiyama/codespaces-st-contribute ● コードの修正は、今回のテーマや、上記のメモに縛られなくても大丈夫。 ● 気になったことは、どんどん質問・相談・雑談してみましょう󰢧 ● 今日は、Streamlit に興味がある人、Streamlitで開発を行っている人、 さらには、Streamlit コントリビューター、Streamlit Co-founderが集まる不思議な機会です。

st.fires()の実装例と動作の様子 下記のファイルを編集・追加します🔧 ● TypeScript ○ streamlit/frontend/lib/src/components/elements/Fires ○ streamlit/frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx ● Python ○ streamlit/lib/streamlit/elements/__init__.py ○ streamlit/lib/streamlit/elements/fire.py ○ streamlit/lib/streamlit/__init__.py ○ streamlit/lib/streamlit/delta_generator.py ● Protocol Buffers ○ streamlit/proto/streamlit/proto/Fire.proto ○ streamlit/proto/streamlit/proto/Element.proto 　追加方法は、「4. Streamlitの開発」のパターン２ 　を参考にしてください

実装が終わったら・・・ ソースコードのテストやリント、Push、そしてPull Requestを行います ● 「5. StreamlitにContributeする」を参考に行います ● このとき、Pushまでは実施して大丈夫です󰢏 ○ Push先は、あくまでみなさんがフォークしたリポジトリです ● しかし、今回は、Pull Requestは行わないようにしてください⚠ ○ 今回のワークショップでは、Issueでの議論やテストをしっかり行えていません

ワークショップ後のお掃除について ● 今回使ったGitHub Codespacesは停止した状態(無課金)で残るので、 適宜削除してください。 ● また、自分のGitHubアカウントにフォークしたリポジトリも 適宜削除して問題ありません。

おわりに 今回のワークショップで、OSSにコントリビュートするための流れを一通り学習しました。 また、Streamlitの実装の中身も少しだけ確認することができました。 ● お世話になっているOSSのバグを見つけたら、報告してみよう 📢 ● まずは、ドキュメントの追加や修正からでも大丈夫 📃 ● これからの OSS Journey⛵ を楽しんでいきましょう！🎉