選擇左側(cè)項目開發(fā)，再擊創(chuàng)建按鈕，大家可以發(fā)現(xiàn)和之前相比，會多出一個創(chuàng)建應(yīng)用的選擇，那我們就點擊這個選項開始創(chuàng)建。這里因為我們從頭開始搭建，所以這里我們選擇「創(chuàng)建一個空白應(yīng)用」。看到這個界面的，我們第一步就創(chuàng)建完成了。在這部分，我們需要準備一個工作流來完成應(yīng)用的主要功能。點擊左側(cè)的「資源庫」，再點擊右側(cè)的「+資源」按鈕下的工作流。2、選擇模版
為了大家更容易快速的理解，我們這里通過使用一個官方的「名畫寫真工作流模版」工作流來進行講解。在創(chuàng)建工作流這個界面，我們選擇「模版」在搜索框搜索「名畫照相館」，然后點擊「復(fù)制」按鈕。這時可以發(fā)現(xiàn)，「名畫寫真工作流」就被復(fù)制到了我們的資源庫中，之后我們就可以使用這個工作流來完成我們應(yīng)用主要工作了。
因為工作流已經(jīng)搭建好了，我們不用考慮很細節(jié)的過程，這里我們只需要查看「開始節(jié)點」和「結(jié)束節(jié)點」就可以了。有的同學(xué)可能會問，為什么要查看開始節(jié)點和結(jié)束節(jié)點呢？因為只有通過「開始節(jié)點」和「結(jié)束節(jié)點」，我們才能確認界面中輸入的參數(shù)是什么，輸出的參數(shù)是什么，這樣我們接下來才能設(shè)計好與用戶交互的界面。點擊「開始節(jié)點」，我們發(fā)現(xiàn)有三個輸入的參數(shù)。這里支持的名畫有：1. 維米爾《戴珍珠耳環(huán)的少女》2. 達芬奇《蒙娜麗莎的微笑》3. 拉斐爾《自畫像》4. 梵高《戴灰氈帽的自畫像》5. 達芬奇《抱貂的女子》6. 梵高《梵高耳朵纏著繃帶、拿著煙斗的自畫像》7. 哈爾斯《笑容騎士》8. 拉斐爾《戴頭紗的女子》點擊「結(jié)束節(jié)點」，我們發(fā)現(xiàn)有一個輸出的參數(shù)，變量名為image。通過以上信息，我們就可以創(chuàng)建與用戶的交互界面了，到這里工作流就準備好了，接來開始設(shè)計用戶界面。
敲黑板：到了重點講解的環(huán)節(jié)了，這里才是扣子應(yīng)用的重點玩法，大家仔細聽講，沒關(guān)注的同學(xué)快關(guān)注收藏，以免之后找不到噢~
通過對上一步工作流的分析，我們知道了需要輸入的三個參數(shù)，那這里我們就來設(shè)計一個表單，來讓用戶上傳或輸入這三個參數(shù)。回來第一步中創(chuàng)建的應(yīng)用界面。首先把剛剛在上一步中創(chuàng)建的工作流引入進來。
點擊「復(fù)制到項目」，把這個工作流復(fù)制到當前的項目。
項目復(fù)制中，稍等一會兒，不要關(guān)閉窗口，否則還要重新復(fù)制~
復(fù)制好以后，可以發(fā)現(xiàn)，工作流被引入進來了。點擊「用戶界面」選項卡，就可以開始設(shè)計用戶界面了。通過前面的分析，我們需要三個輸入的組件，分別是：用戶照片、名畫風格和用戶性別。所以這里我們來創(chuàng)建一個表單，并在表單中創(chuàng)建這三個選項。選項左側(cè)的表單，雙擊或拖拽，表單就會被加入到面板中了，表單中默認會有為以下三個組件，文本，數(shù)字和選擇框。因為我們需要一個上傳照片的組件，所以我們先把上傳組件拖入進來。因為默認的組件中，一個是輸入數(shù)字的這個，組件不是我們需要的，所以在這里我們把這個組件做一個隱藏。這里吐槽一下：斜杠君在以往使用過的界面設(shè)計工具中，設(shè)計面版中的組件都是有「刪除組件按鈕」的，我不知道扣子故意這么設(shè)計的還是什么Bug，到目前為止，我一直沒有找到刪除組件的功能，所以只能通過隱藏組件的方式實現(xiàn)，希望扣子官方能修復(fù)這個功能。
到這里，三個組件就準備好了。我們來修改一下各組件的標題和對應(yīng)的值。點選需要修改的標題，在右側(cè)這里就可以修改。按這個方式，大家把其它幾項也進行修改。「性別」組件這里注意一下，需要設(shè)置選項的值。表單設(shè)計好以后，我們來預(yù)覽一下整體的界面。備注：「名畫主題」的組件，其實是可以用下拉選項的方式表現(xiàn)，效果更好。教程這里為了更容易大家理解，就做成文本的形式了，大家可以根據(jù)自己的需求改為下拉框的形式也沒問題。
到這里表單就設(shè)計完成了，接來就是重要的流程了，綁定工作流。
下面這張圖演示的設(shè)置很重要，大家按下圖的方式進行設(shè)置。大家可以保存一下，方便用到的時候查看。
這里很重要：選擇工作流以后，就可以看到工作流的三個入?yún)⒃O(shè)置了，我們就可以為工作流中的三個參數(shù)綁定表單中的數(shù)據(jù)了。
我們點擊面板中的任意一個組件，可以看到右側(cè)有一個變量的名稱，大家一定要記住這個名稱，我們要在綁定數(shù)據(jù)時用到。每個組件都有這個變量，所以對應(yīng)的要有三個變量。點擊按鈕回到剛剛綁定事件的界面，點擊右側(cè)這個小的「展開按鈕」，可以更方便的進行數(shù)據(jù)綁定。展開以后，看到這個變量是不是很熟悉，就是剛才讓大家記住的變量。我們要使用這個變量下的value值。非常注意：這里大家一定要選變量下面的value，如果只是選變量，是綁定不上值的，而且這里的上傳的圖片是一個數(shù)組。
斜杠君在綁定完數(shù)據(jù)，預(yù)覽調(diào)試了好久，一直不正確，經(jīng)反復(fù)測試，原來是這里的問題，大家一定要注意這里。
其它也組件也同樣按此方式綁定，綁定以后是如圖所演示的配置：這里要注意，一定別忘了點這個確認按鈕，如果不點這個按鈕，配置窗口關(guān)閉系統(tǒng)不保存，還要重新再填（這里扣子平臺應(yīng)該修復(fù)一下）。
這里是一個重要的細節(jié)問題，在點擊按鈕的時候，我們要給按鈕一個loading的狀態(tài)。我們要繼續(xù)配置按鈕，點擊「開始生成」按鈕，選擇「加載態(tài) 」旁邊的小的擴展按鈕。這里可以看到，我們來選擇工作流中的loading狀態(tài) 。這里說明一下，工作流里有三個主要變量：一個是data，一個是loading，一個是error。那這里我們就選擇loading作為「加載態(tài) 」的狀態(tài)。這時當點擊按鈕時，會出現(xiàn)一個加載的小圓圈。如圖所示：上面的輸入部分我們講完了，接下來，我們要給應(yīng)用添加一個輸出了。因為我們的輸出是一個圖片，所以我們加一個圖片添加進來。（這里也是為了講解方便，我們把輸出也放到表單里了，這里大家也可以自行設(shè)置位置。）同樣在這里，我們?yōu)閳D片綁定一個輸出的值。輸出值就是我們在前面分析的，工作流結(jié)束節(jié)點的輸出值，也就是image變量。到這里為止， 我們的表單和工作流的綁定，以及數(shù)據(jù)的綁定就完全配置完了。 看到這里并能動手實踐的同學(xué)，恭喜你！你已經(jīng)完成掌握了Coze應(yīng)用搭建最重要的內(nèi)容了，快給自己點個贊，也給斜杠君點個關(guān)注，支持一下吧~接下來放松一下，讓我們測試一下我們打建的應(yīng)用效果怎么樣~這里上傳一張甄嬛的照片，看看維米爾風格的甄嬛。
