GitHubにアップロードするために必要そうな要素をUIにした。

ブツ

• リポジトリ
• DEMO

インストール＆実行

NAME='Electron.sql.js.MyLog.20220810080111'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start

プロジェクト作成

独自にプロジェクトを作成したいとき。

NAME=electron-github-api
mkdir $NAME
cd $NAME
npm init -y
npm i electron -D

コード抜粋

renderer.js

HTMLで呼び出す処理。

window.addEventListener('DOMContentLoaded', async(event) => {
    ...
    const setting = await Setting.load()
    if (setting?.mona?.address) { document.getElementById('address').value = setting.mona.address }
    if (setting?.github?.username) { document.getElementById('github-username').value =  setting?.github?.username }
    if (setting?.github?.token) { document.getElementById('github-token').value = setting?.github?.token }
    if (setting?.github?.repository) { document.getElementById('github-repository').value = setting?.github?.repository }
    ...
    document.querySelector('#save-setting').addEventListener('click', async()=>{
        await Setting.save(
            {
                mona:{address:document.getElementById('address').value},
                github:{
                    username:document.getElementById('github-username').value,
                    token:document.getElementById('github-token').value,
                    repository:document.getElementById('github-repository').value,
                }
            })
    })
})

index.html

画面要素の定義。

...
<fieldset><legend>設定</legend>
<input type="text" id="address" placeholder="Mpurseアドレス"></input>
<input type="text" id="github-username" placeholder="GitHubユーザ名"></input>
<input type="email" id="github-email" placeholder="GitHubメールアドレス"></input>
<input type="text" id="github-token" placeholder="GitHubアクセストークン"></input>
<input type="text" id="github-repository" placeholder="GitHubリポジトリ" minlength="1" maxlength="100" pattern="[A-Za-z0-9_.-]{1,100}"></input>
<button id="save-setting" type="button">保存</button>
</fieldset>
...
<script src="./src/js/renderer.js"></script>

アドレスは投げモナボタンを作るため。

GitHubのユーザ名、トークン、リポジトリ名は、リポジトリを作成するため。

これらを設定ファイルに保存するようにした。

setting.js

設定データの保存・読込。

class Setting {
    static PATH = `src/db/setting.json`
    static async load() {
        const isExist = await window.myApi.exists(this.PATH)
        if (!isExist) { await window.myApi.writeFile(this.PATH, JSON.stringify(
            {mona:{address:""},github:{username:"",token:"",repository:""}}
        )) }
        return JSON.parse(await window.myApi.readTextFile(this.PATH))
    }
    static async save(obj) { return await window.myApi.writeFile(this.PATH, JSON.stringify(obj)) }
}

github.js

GitHubにアップロードするためのコマンドを集めたつもり。だが、そもそも.git存在確認やリモートリポジトリ作成のためのWebAPIをどうやって叩くのかがわからない。もっとNode.jsやElectron APIのことを勉強してからでないと実現できない。GitHub APIも調べねば。見切り発車すぎたと気付き保留。

class GitHub {
    constructor() {
        this.branch = `master`
    }
    async push(options) {
        let res = await window.myApi.shell(`cd ./repo/${options.repository}`)
        console.debug(res.stdout)
        this.#init()
    }
    async #init() {
        const exists = await window.myApi.exists(`.git`)
        if(!exists) {
            let res = await window.myApi.shell(`git init`)
            console.debug(res.stdout)
        }
    }

    async #add() {
        await window.myApi.shell(`git add .`)
    }
    async #addList() {
        await window.myApi.shell(`git add -n .`)
    }
    async #commit(message) {
        await window.myApi.shell(`git commit -m '${message}'`)
    }
    async #remoteAddOrigin() {
        await window.myApi.shell(`git remote add origin "https://${username}:${token}@github.com/${username}/${repo}.git"`)
    }
    async #remoteSetUrlOrigin() {
        await window.myApi.shell(`git remote set-url origin "https://${username}:${token}@github.com/${username}/${repo}.git"`)
    }
    async #push() {
        await window.myApi.shell(`git push origin ${this.branch}`)
    }
    async #setUser(username, email, isLocal=false) {
        const opt = '--' + ((isLocal) ? 'global' : 'local')
        await window.myApi.shell(`git config ${opt} user.name '${username}'`)
        await window.myApi.shell(`git config ${opt} user.email '${email}'`)
    }
}