【Day 37】集郵冊：完成郵票設計 / 研究如何以 AWS Amplify 儲存圖片環境

tags: 釣魚術 swift AWS Amplify

前言

• 接續前一篇談論集郵冊的 【Day 35】

開發及修改

• 今天我們整理了程式碼，內容大致包含下列重點：
  • 原本弄了一堆石狗公出來，看看排版、外觀行不行。 確定差不多之後，就必須把 Data 割出來。
  • 因為這些資料是動態的，不是寫死的。每個人抓到的魚順序都不一樣，所以打開集郵本的行為，會從存放在雲上的儲存空間，像是 Amplify 上，取回資料。
  • 所以原本的 StampAlbumView 這個外觀，拿勝利寶劍，拆解！！
  • 
    • 重複出現的「郵票」，就拉出來變成一個 struct，叫 FishStampView 囉！！

    // 郵票
    struct FishStampView: View {
        // 先定義好要接收的參數名稱與類型
        var imgName: String
        var fishName: String
        var catched: Int
        var counted: Int
        var number: Int // The fish serial number
        private let colors: [Color] = [
            .red, .blue, .green, .yellow, .pink, .cyan, .indigo]
    
        var body: some View {
            Rectangle()  // 底部是個方塊
                .frame(width: 180, height: 250)
                .foregroundColor(colors[number%7])
                .cornerRadius(10)
            VStack{  // 中間放一層 垂直堆 // A stamp
                HStack{
                    Text("\(catched)/\(counted)")
                        .padding()
                        .font(.footnote)
                    Spacer()
                    Text("\(number)")
                        .frame(width: 15, height: 15, alignment: .center)
                        .font(.footnote)
                        //.fontWeight(.bold)
                        .padding()
                        //.background(Color(.gray))
                        .overlay(
                            Circle()
                                .size(width: 16, height: 16)
                                .offset(x: 16,y: 16)
                                .scale(1.5)
                                .stroke(Color.orange, lineWidth: 3)
                        )
                }
                .padding(10)
                Text("**\(fishName)**")
                Image("\(fishName)")
                    .resizable()
                    .frame(width: 80, height: 80)
                // Button
                HStack{
                    Button(action: addStampByName) {
                        Label("", systemImage: "plus.rectangle.fill.on.rectangle.fill")
                        .labelStyle(.iconOnly)
                        .frame(width: 40, height:40)
                        .foregroundColor(.white)
                        .background(Color.black)
                        .cornerRadius(15)
                        .padding(5)
                    }
                    Button(action: editStampByName) {
                        Label("", systemImage: "pencil")
                        .labelStyle(.iconOnly)
                        .frame(width: 40, height:40)
                        .foregroundColor(.white)
                        .background(Color.black)
                        .cornerRadius(15)
                        .padding(5)
                    }
                    Button(action: deleteStampByName) {
                        Label("", systemImage: "xmark.bin")
                        .labelStyle(.iconOnly)
                        .frame(width: 40, height:40)
                        .foregroundColor(.white)
                        .background(Color.black)
                        .cornerRadius(15)
                        .padding(5)
                    }
                }
                Spacer()
            } // end of a stamp
        }
    
        func addStampByName() {
            // pass
            print("ADD !!!")
        }
    
        func editStampByName() {
            // pass
        }
    
        func deleteStampByName() {
            // pass
        }
    }
    
    

    • 剛剛那些都是 View ；接下來是 Model 的部分。 另外新建一個檔案，叫 FishStamp.swift 吧，裡面先放兩筆資料，測測看東西能不能出來。

    //
    //  FishStamp.swift
    //  BaoAnGongFisher
    //
    //  Created by nipapa on 2022/10/31.
    //
    
    import Foundation
    
    struct Stamp: Hashable {
        var imgName: String
        var fishName: String
        var catched: Int
        var counted: Int
    }
    
    var stampsData = [
        Stamp(imgName: "石狗公", fishName: "石狗公", catched: 5, counted: 8),
        Stamp(imgName: "花身鯻", fishName: "花身鯻", catched: 20, counted: 32)
    ]
    
    

研究

• 接下來是「集郵冊」的相簿功能。這個相簿說穿了就一文不值；資料傳遞給 Amplify 之後，擺放到其他的基礎服務，像是 S3。
• 先參考一下 Build a photo gallery React app using Amplify Studio’s new file storage capabilities - by Nikhil Swaminathan | on 06 APR 2022
• 不過上面的那個連結給的範例是 JavaScript，因此只能參考做法和流程。語法部分可以看 Upload files
  

心得

• 寫 code 是快樂的
• 因為處理雜事所以在零碎時間寫 code 累積到一定的量之後，再寫文件可能已經遺忘細節了
• 細節部分，可以參考 github 的 原始碼