iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
1
自我挑戰組

人生第一次的SideProject系列 第 30

[Day 30 ] 角色卡匯出&匯入功能 + 結語

來到鐵人賽最後一天了,一直覺得App只能單機執行是個遺憾,所以簡單寫了匯出json純文字檔案,以及讀入json,就是那種最簡陋的匯出匯入功能啦...

成果如下:
https://i.imgur.com/WVmDMIc.gif

程式碼如下

【html】

<!-- 匯出 -->
<a style="#saveJson:hover{}" id="saveJson" class="d-block w-100 text-white" (click)="downloadJson()">Out Put</a>
<!-- 匯入 -->
<div class="modal-body mt-2 border-top">
    <p class="text-center h5">讀取現成檔案</p>
    <p class="text-center"><small>※請以筆記本打開json檔,複製所有文字貼上</small></p>
    <div class="d-flex">
        <div class="col-3">
            <label for="cardName"><small>角色卡名稱</small></label>
        </div>
        <div class="col-9">
            <input type="text" id="cardName" class="form-control mb-2" [(ngModel)]="cardName">
        </div>
    </div>
    <input type="text" class="form-control" name="first" [(ngModel)]="loadJson">
    <button type="submit" class="btn btn-primary d-flex mx-auto mt-3" data-dismiss="modal" aria-label="Close"
        (click)="loadJsonFile()" (click)="myProfile.getProfileData()" (click)="myCharacteristics.getStatus()"
        (click)="mySkillList.getSkillData()" (click)="myBackstory.getBackstorys()">Load</button>
</div>

【ts】

    // json檔案
    jsonData;
    downloadJson() {

        var fileName = "mycard.txt";//匯出的檔名
        var data = localStorage.getItem(this.CHcard);
        var blob = new Blob([data], {
            type: "application/octet-stream"
        });
        var href = URL.createObjectURL(blob);
        var link = document.createElement("a");
        document.body.appendChild(link);
        link.href = href;
        link.download = fileName;
        link.click();
    }

    cardName;
    loadJson;

    loadJsonFile() {
        this.CHcard = this.cardName;
        localStorage.setItem(this.CHcard, this.loadJson);
    }

匯出檔案解法來源

人生的第一個sideproject雖然真的就是一個小小的練習作品,但不論是第一次跟風參加鐵人賽,還是做出第一個從發想包辦到產出實物的APP,對自己來說都有相當不同的意義。

話說在快結尾時居然被追蹤了,感謝的同時有點受寵若驚,當然也謝謝大家的默默關懷,到後面瀏覽量突然多起來真是嚇到,在想是不是sixwings大大的留言引起注意XD

順便sixwings大大真的是我能堅持完鐵人賽的最大原因之一,原本想說主題冷門又是菜鳥寫的內容,已經做好單機鐵人賽的準備。而比賽途中不時會收到six大大的留言,頓時發現自己沒有掉線受到鼓舞才能夠繼續走下去。(是說sixwings大大鐵人賽寫的卡牌遊戲開發文章也很意思,有興趣可以去看看~)

來到最後了,專案雖然還沒做過完整e2e測試、沒寫使用說明,也還有些小bug以及版面細節不好看等等問題,不過個人覺得自己的鐵人賽即使不算完美,也能夠完整落幕了。最初「想要盡己所能做些什麼」這點已經達到,中間或有不盡人意的地方,但對我自己來說是能夠接受的結果。

當然這才是開始,像這份side project即使鐵人賽結束,也是要再努力一下才能讓正式版上線。

但即使是這樣簡單的專案,如果能對任何人帶來用處或其他意義,對我來說也就十分足夠了。

鐵人賽結束後不曉得發文功能是否會關閉,如果關了的話後續進度就另外發文然後再貼連結過來囉。

真的感謝看到這裡的各位,有緣的話在網路之海的某處再相會吧~

= = = = =

你今天的努力,
是否有跟未來的夢想
同一個等級?


上一篇
[Day 29 ] 多張角色卡存取功能(二)
下一篇
[Day 30+1 ] 鐵人賽然後呢?…開始debug與Extension吧
系列文
人生第一次的SideProject33

1 則留言

0
sixwings
iT邦新手 3 級 ‧ 2019-10-17 10:42:09

恭喜完賽!
被點名了只好上來講講話XD
我不常留言是因為網路這塊我真的不熟,網路的技術名詞真的多到讓人頭昏腦脹
我之後也會往網路開發走,有機會可以聊XD

iT邦幫忙是不錯的技術交流平台,多去別人家串門子,會認識不少好朋友歐 :D

看更多先前的回應...收起先前的回應...
sixwings iT邦新手 3 級 ‧ 2019-10-17 10:49:33 檢舉

然後你的專案其實很棒,有機會的話繼續做下去,會是很棒的作品歐!

Emi iT邦新手 5 級 ‧ 2019-10-17 13:50:05 檢舉

我現在也是剛入門覺得挖咧暗語也太多了吧
十個技術名詞九個聽起來像外星文

但自己選的路,就算HP歸零躺平了也是只能復活回血再戰啊XD

Emi iT邦新手 5 級 ‧ 2019-10-17 13:50:38 檢舉

iT邦幫忙是不錯的技術交流平台,多去別人家串門子,會認識不少好朋友歐 :D

之前就有知道這裡臥虎藏龍,不過真正來iT邦泡過才發現其實大神種類很多(?)生態系超豐富(??)常常都想丟大師球(???)

有在默默關注大大的文章,但是遊戲我只會玩所以目前看著文章就是「哇──」「原來是降──」「喔喔好有意思──」,所以留言總是不曉得留什麼好ˊ^ˋ)a

也是因為初來乍到要搭訕有點害羞(毆)
以後多串串門子XD

Emi iT邦新手 5 級 ‧ 2019-10-17 13:51:56 檢舉

然後你的專案其實很棒,有機會的話繼續做下去,會是很棒的作品歐!

感謝打氣~

後續繼續努力,雖然不會日更了不過拚一下,試試爭取在10月過完前上線!
(Fighting!)

我要留言

立即登入留言