Lab 21: 建立第一個LIFF應用
Last updated
Last updated
本Lab介紹如何透過 C# 程式碼，以 .net core WebApp開發框架，建立第一個LIFF(LINE Front-end Framework)應用程式。
請先進入LINE Developer Portal，建立好LINE Login Channel: 詳細作法可參考這裡
建立完成LINE Login Channel之後，請進入LIFF分頁，並點選 Add 建立新的LIFF： 
建立LIFF時Endpoint URL可以先隨意設定，其餘選項建議都打勾:
完成後，按下Add建立LIFF即可。
注意，若需要測試 shareTargetPicker，底下選項必須打勾:
3. 完成後，可取得 LIFF ID(類似0000000000-spPeRmAn) ，將其記錄起來即可，後面會用到。 4. 下載並解壓縮 Ngrok ，以便於在開發環境測試 here
在命令列模式建立資料夾，接著透過 dotnet new 指令建立專案
系統會出現類似底下畫面...
上面第一行指令是在本基上安裝liff範本特見，第二行指令則是為專案安裝範本。
安裝完成後我們建置(Build)一下，看結果如何:
如果可以順利建置，你應該會收到類似上面這樣的訊息。
請在命令列輸入 code (空格) .
接著在 Liff.cshtml 這支程式碼中，找到 "請換成你的LiffAppID_"，並置換成你先前建立LIFF時保留的LiffAddID。
請確定所有修改的程式碼都有儲存後，在 terminal(VS Code亦可)環境中執行該程式：
看到上面的畫面後，代表我們的應用程式已經可以在開發環境執行。
注意，如果你發現被導引到 https://localhost:5001，很可能表示你上一個註銷 startup.cs 43行程式碼的動作沒有儲存或遺漏了。
請不要關閉應用程式的執行狀態。
接著，將下載好的ngrok.zip壓縮檔解開，會看到其中有ngrok.exe執行檔，請將其放置在你覺得方便的資料夾下，並進入該資料夾，執行下列指令：
完成後， 即可抓取LIFF URL：
電子書：https://www.pubu.com.tw/ebook/103305 實體書：https://www.tenlong.com.tw/products/9789865022662 線上課程：https://www.udemy.com/line-bot/ LineBotSDK：https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。
完成後會看到類似底下畫面，請點選Startup.cs，將43行的程式碼註銷：
完成後類似底下這樣：
執行後結果應當如下：
上面這個畫面代表，你的WebApp已經在Localhost本機電腦上的5000與5001 port 被執行起來了，你可以嘗試用Chrome瀏覽器呼叫 http://localhost:5000/index
執行結果如下： 請注意上面的 https 位置，請將該位置複製，並加上liff，組出一個完整的endpoint :
接著，進入 LINE Login管理後台，將上面得到的 endpoint 位置，設定在Endpoint URL中:
將此URL在LINE的聊天室窗中被點選，或讓手機點選該URL、或將該URL轉成QR Code，讓手機掃描，即可測試LIFF應用。
