開發 Web 應用程式

開發 Web 應用程式需要完成下列工作：

1. 建立視覺化產生器應用程式。
2. 建立新的 Web 應用程式。
3. 包括外部資源庫。
4. 建立使用者介面。
5. 更新上傳的 PDF 文件。
6. 建立新的 PDF 文件。
7. 下載 PDF 檔案。

建立視覺化產生器應用程式

Visual Builder 應用程式是用於開發 Web 和行動應用程式的資源集合。Visual Builder 應用程式在 JSON 檔案中包含描述資料來源和業務物件的描述資料。它也包含 Web 和行動應用程式的 HTML 和 JavaScript 檔案。

建立新的 Visual Builder 應用程式

1. ：在「視覺應用程式」首頁中，按一下新建。
2. 在 [Create Application] (建立應用程式) 對話方塊中，輸入應用程式名稱。應用程式 ID 欄位會根據您提供的應用程式名稱自動填入。
   • 您可以視需要修改應用程式 ID，但 ID 在您的識別網域中必須是唯一的。
   • 讓「空白應用程式」的預設選項維持不變。此樣板不會建立任何使用者自建物件、應用程式或其他資源。
3. 按一下完成。

   新的 Visual Builder 應用程式會在您建立後自動開啟，並顯示「歡迎」畫面。新應用程式將不會包含任何使用者自建物件，但精靈預設會建立應用程式的檔案結構，以及一些需要的資源和檔案。

您可以使用「歡迎使用」畫面來協助您判斷要先建立哪些使用者自建物件。按一下「歡迎」畫面中的任何動態磚，以在「導覽器」中開啟其相關聯的面板，您可以在其中建立與管理構件。您可以新增多個 Web 和行動應用系統，存取 Visual Builder 應用系統中顯示的資料來源、資源及服務。

建立新 Web 應用程式

Visual Builder 應用程式中的 Web 應用程式彼此獨立，但可以全部使用應用程式中定義的資料來源。

在 Visual Builder 應用程式內建立新 Web 應用程式：

1. 按一下導覽器中的「Web 應用程式」圖示，以開啟「Web 應用程式」窗格。
   「Web 應用程式」面板會顯示 Visual Builder 應用程式中每個 Web 應用程式的結構表示法。如果尚未建立任何 Web 應用程式，您將會在窗格中看到一則訊息，以及一個 + Web 應用程式按鈕。按一下即可開啟「建立 Web 應用程式」精靈。
2. 按一下導覽器中的「建立 Web 應用程式」圖示。
3. 在「建立 Web 應用程式」精靈的「一般資訊」頁面上，指定您要建立之 Web 應用程式的名稱。您也可以從三個導覽樣式中進行選擇：
   • 具有三個導覽項目的水平導覽樣式。
   • 垂直瀏覽樣式，可讓您建立根頁面，其中包含具有大頭貼的導覽側邊功能表面板、中間的導覽項目，以及具有應用程式名稱的頁尾。
   • 具有起始頁面的頁面流程，為每個導覽項目產生。

   預設選項為「無」。
4. 按一下建立即可建立並產生 Web 應用程式及其所有必要的使用者自建物件。

包括外部程式庫

若要產生、修改及下載 PDF 文件 (如「開始之前」中所指定)，您必須包含兩個外部程式庫：pdf-lib 與 downloadj。

• pdf-lib，管理 PDF 文件。
• downloadj，下載已產生的 PDF 文件。

為此應用程式建立的使用者自建物件可透過來源圖示存取。使用以下各行將 Librarie 來源插入 index.html 檔案中：

<script src="https://unpkg.com/pdf-lib@1.4.0"></script> 
<script src="https://unpkg.com/downloadjs@1.4.7"></script> 

建立使用者介面

您現在可以建立使用者介面。此介面應包含容器、標頭、按鈕、文字欄位、JavaScript 程式碼及 HTML 程式碼等元件，並可讓使用者：

• 上傳檔案。
• 輸入要顯示在 PDF 文件中的欄位文字。
• 按一下按鈕即可使用所輸入的文字更新上傳的 PDF 文件。
• 按一下按鈕可建立包含所輸入文字的新 PDF 文件。
• 按一下按鈕以下載準備的文件。

拖放檔案並顯示 PDF 文件

首先，您必須將重要元件拖放至正在建立的 UI 中。

1. 從元件選用區中，將彈性資料列拖放至頁面設計工具上，然後將標題放入此元件中，然後標示成上傳 PDF 文件。然後新增將用來上傳 PDF 文件的檔案選擇器和檔案選擇器按鈕。
2. 建立「字串」類型的變數，其名稱為 fileURL。此變數會在頁面層次儲存 PDF 文件 (稍後會在頁面上顯示) 的 URL。
3. 建立名稱為 holdFile 之任一類型的變數。此變數將儲存在 PDF 文件的頁面層次。
4. 在「檔案選擇器」特性選盤上，建立新的事件 on Select Files。此事件將建立名為 FilePickerSelectChain 的新動作鏈。
5. 定義和實行動作鏈 FilePickerSelectChain 以及將讀取上傳 Blob 物件內容的 JavaScript。此 JavaScript 函數將在頁面層次實行，並儲存兩個變數：一個變數會將 PDF 檔案轉換為 base64 字串，第二個變數包含將顯示在頁面上的文件 URL。動作鏈結包含三個步驟：
   1. 初始化和重設 fileURL 變數。
   2. 以已上傳檔案的輸入參數呼叫函數 addPDFDocument。
   3. 將 addPDFDocument 函數的結果指派給 fileURL 和 holdFile 變數。

將上傳的 PDF 檔案顯示至主頁面畫面

在主頁面的來源 HTML 中，新增物件及其來源為先前指派的頁面變數 fileURL。新增 fileURL 物件到主要 HTML 頁面。在此階段，應用程式可以上傳並顯示 PDF 檔案。

將 addPDFDocument 函數的輸出指派給頁面變數 fileURL 和 holdFile

分別將傳回的 addPDFDocument 函數特性 URL 和資料分別指派給頁面變數 fileURL 和 holdFile。

指定 addPDFDocument 函數的輸入變數

在 GUI 上，將上傳的檔案變數指派給函數的 arg1 參數。

建立 addPDFDocument 函數

在頁面層次建立函數 addPDFDocument。應用程式將會收到一個輸入參數。函數會根據輸入檔案參數建立 URL 變數，然後讀取上傳的文件並轉換為 base64 字串。您可以使用此程式碼範例來定義函數：

    PageModule.prototype.addPDFDocument = function(arg1) {
      return new Promise(
        resolve=>{
          const blobURL = URL.createObjectURL(arg1);
          const reader  = new FileReader();
          reader.addEventListener("load", function () {
            // convert image file to base64 string         
            resolve({ data: reader.result, url: blobURL });
          }, false);
          if (arg1) {
            reader.readAsDataURL(arg1);
          }
        }
      );      
    };

更新上傳的 PDF 文件

從元件選用區將「文字欄位」元件拖放至頁面設計工具中，並在下方新增按鈕。

1. 建立頁面變數 textIncludedIntoPDF 以儲存文字欄位的內容。此變數將會插入內容，並更新 PDF 文件。
2. 指定此變數至「輸入文字」元件。

更新與顯示 PDF

為更新 PDF 按鈕建立新的動作事件。此事件將建立標示為 update_display_pdf 的新動作鏈。

新動作鏈使用 JavaScript 函數來更新上傳的 PDF，然後透過暫時頁面變數，第二個 JavaScript 函數會重新產生並顯示新的 PDF 文件。

建立 UpdatePDF 函數

接著，建立 JavaScript 函數 createUpdatePDF。這是具有兩個輸入參數的非同步函數 (上傳的 PDF 文件與使用者先前在主頁面上輸入的文字)。它會傳回一個位元組陣列。

執行時，此函數：：

1. 宣告 pdf-lib API 的常數。
2. 建立 PDFDocument 實體並載入輸入 pdf 位元組陣列。
3. 取得文件中包含的所有頁面陣列。
4. 識別在文件 index = 0 上呈現的第一個頁面。
5. 計算頁面的寬度和高度。
6. 寫入您輸入的文字 (紅色與角度 45 度) 。
7. 儲存、序列化並將 PDFDocument 傳回位元組 (Uint8Array)。
   下列程式碼範例可用來模擬上述功能：

     PageModule.prototype.createUpdatePDF = async function (arg1 , inputText ) {
       // declare constants from the pdf-lib API.
       const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
       console.log("createUpdatePDF: input file " + arg1);
       console.log("createUpdatePDF: input argument " + inputText);
       const existingPdfBytes = arg1;
       // create a PDFDocument entity and load the input pdf byte array 
       const pdfDoc = await PDFDocument.load(existingPdfBytes);
       // get an array of all the pages contained in this document. The pages are stored in the array in the     
       // same order that they are rendered in the document with the first page page in the 0 position. 
       const pages = pdfDoc.getPages();
       // get the first page rendered at the index = 0 of the document
       const firstPage = pages[0];
       // get the first page width and height
       const { width, height } = firstPage.getSize();
       console.log("createUpdatePDF: The width : " + width + "and height : " + height +" of the first page");
       // Embed a Helvetica font into the pdf document
       const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
       // write the text that you had entered and draw a rectangle 
       firstPage.drawText(inputText, {
         x: 5,
         y: height / 2 + 300,
         size: 50,
         font: helveticaFont,
         color: rgb(0.95, 0.1, 0.1),
         rotate: degrees(-45),
       });
       // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
       const pdfBytes = await pdfDoc.save();
       return pdfBytes;
     };
   

顯示更新的 PDF 文件

UpdatePDF 函數的結果將指派給暫時頁面變數 tmpPDFBytes。進行這項指派之後，JavaScript 函數會收到 base64 位元組陣列，而且會從這個位元組陣列建立新的 Blob 實體。最後，該函數將建立並傳回對應至此 PDF 文件的 URL。

下列程式碼範例可用來模擬上述功能：

PageModule.prototype.displayPDFDocument = function (arg1) { 
    const bytes = new Uint8Array( arg1 ); 
    // create a new blobfrom the byte array with type of application: pdf 
    const blob = new Blob( [ bytes ], { type: "application/pdf" } ); 
    // create the url of the generated blob entity 
    const newdocURL = URL.createObjectURL(blob); 
    // return the updated pdf's url 
    return newdocURL; 
    }; 

此函數的輸出將指派給頁面變數 fileURL，此頁面將用來顯示更新後的 PDF 文件。

此時，應用程式已準備好上傳 PDF 文件，請使用使用者在畫面文字欄位中輸入的文字加以修改，然後在畫面上顯示更新的 PDF 文件。

建立新的 PDF 文件

此時，應用程式已準備好建立 PDF 文件，請使用使用者在畫面文字欄位中輸入的文字加以修改，然後在畫面上顯示新建立的 PDF 文件。 若要產生包含應用程式使用者輸入之文字的新 PDF 文件，請從元件選用區拖放按鈕元件至頁面設計工具。

建立與顯示文件

建立新事件以定義由建立新 PDF 按鈕啟動的動作。事件將會建立標籤為 create_display_pdf 的新動作鏈。

新動作鏈將使用 JavaScript 函數來建立新的 PDF (包括先前在文字欄位中輸入的文字)，然後透過暫時頁面變數，第二個 JavaScript 函數會重新產生並顯示新的 PDF 文件。

建立 PDF 函數

接著，建立 JavaScript 函數 createPDF。此為非同步函數，會以使用者先前在主頁面上輸入的文字作為其輸入參數並傳回位元組陣列。

執行時，此函數：

1. 宣告 pdf-lib API 的常數。
2. 建立 PDFDocument 實體。
3. 內嵌 Times Roman 字型。
4. 新增空白頁面至 PDF 文件物件。
5. 計算頁面的寬度和高度。
6. 寫入使用者輸入的文字 。
7. 儲存、序列化並將 PDFDocument 傳回位元組 (Uint8Array)。
   使用此程式碼範例模擬上述功能：

   PageModule.prototype.createPDF = async function (arg1) {
       const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
       console.log("createPDF: input file " + arg1);
       // create a PDFDocument entity and load the input pdf byte array 
       const pdfDoc2 = await PDFDocument.create();
       // Embed the Times Roman font
       const timesRomanFont = await pdfDoc2.embedFont(StandardFonts.TimesRoman);
       // Add a blank page to the document
       const page2 = pdfDoc2.addPage();
       // Get the width and height of the page
       const { width2, height2 } = page2.getSize();
       // Draw a string of text toward the top of the page
       const fontSize2 = 30;
       page2.drawText(arg1, {
         x: 50,
         y: 450,
         size: fontSize2,
         font: timesRomanFont,
         color: rgb(0, 0.53, 0.71),
       });
       // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
       const pdfBytes2 = await pdfDoc2.save();
       return pdfBytes2;
   

顯示新建立的 PDF 文件

createPDF 函數會指派給暫時頁面變數 tmpPDFBytes。進行這項指派之後，JavaScript 函數會收到 base64 位元組陣列，而且會從這個位元組陣列建立新的 Blob 實體。。

然後此函數會建立並傳回對應至此 PDF 文件的 URL。將會重複使用針對 update_display_pdf 動作鏈實作的相同函數。接著，此函數的輸出會指派給頁面變數 fileURL，頁面變數將用來顯示頁面中的新 PDF 文件

下載 PDF 檔案

透過拖放「按鈕」元件，將元件選用區納入頁面設計工具。

下載文件

為下載 PDF 按鈕建立新的事件動作。事件將建立新動作鏈，標示為 downloadPDF。新動作鏈將使用 JavaScript 函數來下載 PDF 檔案 (包含使用者在文字欄位中輸入文字的文字)。

下載 PDF 檔案

JavaScript 函數 downloadPDFfile 會採用 PDF 文件的位元組陣列，該文件會以一個輸入參數的形式上傳與修改或從頭建立，並以預先定義的名稱下載文件：pdf-lib_modification_example.pdf 與類型 application/pdf。

函數會使用 download() 函數 (從最初隱藏且匯入您應用程式的程式庫 downloadj)。download() 的輸入引數可以是下列任何一種資料類型：

• URL
• 字串
• 斑點
• 打字陣列

或透過 dataURL 將檔案的資料以 base64 或 URL 編碼的字串表示，也就是置於瀏覽器下載目錄中的新檔案的名稱和類型。

使用此程式碼範例模擬上述功能：

  PageModule.prototype.downloadPDFFile = function (arg1) {
    download(arg1, "pdf-lib_modification_example.pdf", "application/pdf");
  };