Mendixで作成したプロジェクトをGithubへアップロードする方法と、コミットの仕方を解説

こんにちは、こんばんは！今回の記事では、タイトルにある通り
Mendixを用いて新規にアプリを作成し、それをGithubへアップロードする方法をご紹介します。

Mendixを用いて個人で開発あるいは誰かと遊びで開発をしたい場合に
ぜひご活用ください٩( ''ω'' )و

## ■準備するもの
・Mendix Studio Pro
・Githubアカウント
になります。

今回私はMendix version 10.15.0を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/63f902c4-f585-4bdb-81de-8adaf3da3172.png)

## ■Githubで新規にリポジトリを作成する
RepositoryタブのNewから新規に作成をしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/44fed893-a399-40f5-b6cc-11f0c109e290.png)


今回は野菜やソースなど食料品の管理を行うアプリを作る想定で
下記の名前で登録しました。
グロッサリーマネジメントシステムです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/dd0b6731-a520-405d-80c1-abaa909e2247.png)

## ■Mendixでコミットを行うための準備をする
必用なものは書きになります。
①GitのリポジトリのURL
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/fe9b5df2-e366-4230-8fbc-91789093bb89.png)

②Access Token
現在不要かも

## ■Mendixを立ち上げ、アプリを作成する
では、いよいよMendixを立ち上げて設定をしていきます。

①Create New App
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/e0808117-f853-41f4-bc89-72680df3cf7c.png)

②アプリテンプレートの選択　とりあえずは左上のBlank Web Appで問題ないと思います！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/e5d3e442-a637-4c7c-bf29-d946f264891b.png)

③Use this starting point
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/035333d5-6d24-4361-b626-8ee539d05875.png)

④アプリの名匠や、言語（日本）、アプリの作成場所を選択します
Create app押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/3f5f2c64-764e-4417-8022-a9bcd9312a91.png)
※２つ目のラジオボタンは初回はNoにチェックを入れた状態にしてください。

⑤少し待つとアプリが立ち上がります。
まだまっさらなアプリです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/8d230ad4-d2e4-485e-a39d-17006fb60eec.png)

これでアプリの作成は完了しました！

## ■早速コミットしてみる
では、このままの状態で最初に作成したリポジトリにコミットしたいと思います。
まずは、MendixでGitの設定をします。

①Edit → Preferences　押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/5e01b391-bd31-433a-9d6b-cdbe09fc59bb.png)

②version controlからgitを選択し、EnableのチェックボックスをONにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/0fbf8ad7-1b7e-4001-836f-61ee17f7489b.png)

これで設定は完了です。

つづいて、コミットをします。

③初回は、Version Control → Upload to ・・・を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/4fdb245f-6f1a-4892-9a55-cf77eb94d4dc.png)

④Private Serveを選択し、Repository addressに、先ほどGithubで作成した
addressを貼り付けます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/5ad4aa1c-bdb1-4f26-88a5-cb483eebd731.png)

そしてOKを押します

⑤成功した旨のダイアログがポップアップすれば完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/fb1e739f-9d6d-4fa4-846e-661ba7fe1715.png)

さまざまなコマンドが使えるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/211cef20-92d8-43b0-a88c-3c6bb23f23b2.png)

Githubにアップロードされたことも確認できましたね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/21cf3fc0-b09e-4e5b-a775-b05bbf204507.png)

これだけの手順で、簡単にアプリを構成管理することができるようになります。

## ■ソースを編集してコミットしてみる
リポジトリにコミットできるようになった後は、通常の開発をする想定でどこかを編集してコミットしてみましょう

編集をしたソースはオレンジ？印がついて一目でわかるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/90ee2991-710a-4953-92ca-8628291e952c.png)

また、Changesタブで変更点の詳細も確認ができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/af25db5f-113e-4bf3-810a-15c7671d5474.png)

コミットをしてみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/8cac2490-5849-4b0e-8044-379c26185ead.png)

コミットメッセージを記載し、Commit and Pushを押下します。
Pushまでしたくない時は、プルダウンで Commit Locallyを選んでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/73356ec4-6907-426a-9f76-8ccbdd434f6e.png)

※ここで他の方の修正があった場合には、Rebaseという機能で
最新を取り込んだ上でプッシュを行うようにMendix側で動いてくれます。（かしこいですね）

コミット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/9c13d10d-6d74-431c-a20b-4bbab74badf1.png)


コミット完了後は特にダイアログは出ません。
Version ControlのHistoryからコミット履歴を確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/19d1ab08-967e-4209-9cf0-96ba091ab829.png)

コミット履歴が確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125006/0e82b62e-bd0f-41a6-9d6b-df5e72cb8713.png)

簡単ですね！
この一連の流れを理解していただき、開発を進めていきましょう。

今回は以上となります。
ありがとうございました！