育將電腦工作室 - 線上書籍

GAS+LineBot開發
=============

一、輪播主架構：

1. [flex樣版網站](https://developers.line.biz/flex-simulator/)
2. 從Showcase，找一個輪播樣版
3. 複製語法
4. flex主架構 
  ```javascript
  
  //---------------------------------- flex(訂單完成)
  let messages = [{
  "type": "flex",
  "altText": "訂單完成",//訊息副標題
  "contents": flexTemplate()
  }];
  
  ```
 
二、建立樣版函式

1. 複製
2. 更名為「carouselFlexTemplate()」
3. 將樣版網站複製語法貼上
4. 測試
5. 未來再將需要之「變數」帶入即可
6. 函式 
  ```javascript
  
  //---------------------------------- flex(商品展示)
  let messages = [{
  "type": "flex",
  "altText": "商品展示",//訊息副標題
  "contents": carouselFlexTemplate()
  }];
  
  ```
  
  
   
  ```javascript
  
  /*============================================
  carouselFlexTemplate
  https://developers.line.biz/flex-simulator/  
  ============================================*/
  function carouselFlexTemplate() {
  let content = ``;
  let messages = {
  "type": "carousel",
  "contents": [
  {
  "type": "bubble",
  "size": "micro",
  "hero": {
  "type": "image",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip10.jpg",
  "size": "full",
  "aspectMode": "cover",
  "aspectRatio": "320:213"
  },
  "body": {
  "type": "box",
  "layout": "vertical",
  "contents": [
  {
  "type": "text",
  "text": "Brown Cafe",
  "weight": "bold",
  "size": "sm",
  "wrap": true
  },
  {
  "type": "box",
  "layout": "baseline",
  "contents": [
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
  },
  {
  "type": "text",
  "text": "4.0",
  "size": "xs",
  "color": "#8c8c8c",
  "margin": "md",
  "flex": 0
  }
  ]
  },
  {
  "type": "box",
  "layout": "vertical",
  "contents": [
  {
  "type": "box",
  "layout": "baseline",
  "spacing": "sm",
  "contents": [
  {
  "type": "text",
  "text": "東京旅行",
  "wrap": true,
  "color": "#8c8c8c",
  "size": "xs",
  "flex": 5
  }
  ]
  }
  ]
  }
  ],
  "spacing": "sm",
  "paddingAll": "13px"
  }
  },
  {
  "type": "bubble",
  "size": "micro",
  "hero": {
  "type": "image",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip11.jpg",
  "size": "full",
  "aspectMode": "cover",
  "aspectRatio": "320:213"
  },
  "body": {
  "type": "box",
  "layout": "vertical",
  "contents": [
  {
  "type": "text",
  "text": "Brow&Cony's Restaurant",
  "weight": "bold",
  "size": "sm",
  "wrap": true
  },
  {
  "type": "box",
  "layout": "baseline",
  "contents": [
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
  },
  {
  "type": "text",
  "text": "4.0",
  "size": "sm",
  "color": "#8c8c8c",
  "margin": "md",
  "flex": 0
  }
  ]
  },
  {
  "type": "box",
  "layout": "vertical",
  "contents": [
  {
  "type": "box",
  "layout": "baseline",
  "spacing": "sm",
  "contents": [
  {
  "type": "text",
  "text": "東京旅行",
  "wrap": true,
  "color": "#8c8c8c",
  "size": "xs",
  "flex": 5
  }
  ]
  }
  ]
  }
  ],
  "spacing": "sm",
  "paddingAll": "13px"
  }
  },
  {
  "type": "bubble",
  "size": "micro",
  "hero": {
  "type": "image",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip12.jpg",
  "size": "full",
  "aspectMode": "cover",
  "aspectRatio": "320:213"
  },
  "body": {
  "type": "box",
  "layout": "vertical",
  "contents": [
  {
  "type": "text",
  "text": "Tata",
  "weight": "bold",
  "size": "sm"
  },
  {
  "type": "box",
  "layout": "baseline",
  "contents": [
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
  },
  {
  "type": "icon",
  "size": "xs",
  "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
  },
  {
  "type": "text",
  "text": "4.0",
  "size": "sm",
  "color": "#8c8c8c",
  "margin": "md",
  "flex": 0
  }
  ]
  },
  {
  "type": "box",
  "layout": "vertical",
  "contents": [
  {
  "type": "box",
  "layout": "baseline",
  "spacing": "sm",
  "contents": [
  {
  "type": "text",
  "text": "東京旅行",
  "wrap": true,
  "color": "#8c8c8c",
  "size": "xs",
  "flex": 5
  }
  ]
  }
  ]
  }
  ],
  "spacing": "sm",
  "paddingAll": "13px"
  }
  }
  ]
  }
  return messages;
  }
  
  ```
7. 
 
<div class="container pt-50 pb-50"> <style type="text/css">.videobox {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 56.25%;
        }

.videobox iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
</style>**Youtube影片：**<https://youtu.be/eZc-NHnAqJE>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown