[AzureLogicApps+LineNotify]แจ้งเตือนเวลาเดินทางพร้อมอุณหภูมิขณะนั้นผ่านLineNotify
ปัจจุบันมีการใช้Azure Logic appsในการทำIntegrationระหว่างหลายๆservice เข้าด้วยกันเพื่อให้สามารถทำงานร่วมกันเป็นโฟลว์ได้อย่างอัตโนมัติ ซึ่งความสามารถในการผูกserviceของLogic apps ไม่ได้จำกัดเฉพาะservice ที่ Azure provideให้ ยังสามารถผูกกับservice API อื่นๆได้อีกมากมาย ซึ่งในที่นี้เราจะนำLogic apps มาผูกกับLine Notifyกัน นะจ๊ะ
เอาเป็นว่ามาดูตัวอย่างกันดีกว่าว่า ถ้าอ่าน+ทำblogนี้แล้วจะได้อะไรมาใช้กันน
สมมติว่า… ถ้าคุณเป็นคนหนึ่งที่ต้องการจะรู้เวลาเดินทางในแต่ละช่วงเวลาของวัน เช่น
ณ เวลา7โมงเช้า นางสาวสมศรี ตังค์ไม่มี กำลังจะออกจากบ้านไปที่ทำงาน
นางสาวสมศรีอยากรู้คร่าวๆว่าต้องใช้เวลาเดินทางกี่นาทีนะ จะได้วางแผนการเดินทางถูก ปกติก็ต้องเปิดMapดูใช่มะ เสียเวลามากๆ
จะง่ายกว่ามั้ย?? ถ้านางสาวสมศรีสร้างเครื่องๆนึง ที่จะคอยบอกหล่อนทุกวันตอนเวลา7โมงเช้า ว่าถ้าจะเดินทางจากบ้านถึงที่ทำงานต้องใช้เวลาช่วงนี้ประมาณเท่าใด และเครื่องนี้จะแจ้งเตือนผ่านLINE Notify แบบเกร๋ๆ
หรือนางสาวสมศรีเป็นคนเล่นหุ้นอยากรู้ราคาหุ้น หรืออยากรู้ราคาบิทคอยน์ผ่านLine Notify ก็สามารถทำได้ แต่ในblogนี้จะสอนดึงเวลาเดินทางกับอุณหภูมิปัจจุบันก่อนนะ(จริงๆถ้าอ่านblogนี้เสร็จ ไปAdaptเองก็ได้ ไม่ยากๆ)
ซึ่งในblogนี้เราจะมาสอนวิธีการทำแบบละเอียดสุดๆเท่าที่จะสอนได้
ก่อนอื่นเราต้องรู้ก่อนว่าจะใช้เครื่องมืออะไรบ้างในการทำblogนี้
1. Azure Logic Apps
ก่อนจะใช้Logic appsได้ ต้องสมัคร Azureก่อนนะ
>>สมัครAzure(For student):
>>Logic Appsคืออะไร :
(แอบขายblogตัวเอง อิอิอิ)
2. Line Notify
เป็นserviceนึง ที่Line เปิดให้ผู้ใช้สามารถสร้างการแจ้งเตือนเองได้ โดยอาจจะเอาไปโยงกับ api/ serviceอื่นๆที่ต้องการ เช่น ไปดึงข้อมูลเวลาเดินทางมา แล้วส่งไปที่LineNotify เพื่อทำการแจ้งเตือน
หลังจากแนะนำtoolแล้ว เราก็มาคุยคอนเซปต์กันก่อนว่าจะทำยังไง หลักการคือ เราจะตั้งค่าตัวazure logic appsและLine notify ดังนี้
1.Flowจะเริ่มทำงานเองอัตโนมัติเมื่อถึงเวลา7โมงเช้าของวันจันทร์-ศุกร์ ทุกๆสัปดาห์
2.Flowไปดึงเวลาการเดินทาง ณ ปัจจุบันจากต้นทาง ไปยังปลายทาง
3.Flowไปดึงอุณหภูมิของกรุงเทพมหานครในวันนั้นมา
4.Flowส่งข้อความที่ระบุถึงเวลาเดินทางและอุณหภูมิไปยังLine
5.Line ทำการแจ้งเตือนให้กับผู้ใช้
เอาล่ะ รู้คร่าวๆแล้วก็มาเริ่มทำกันเหลยยยย!
- ) ทำการสมัครLine Notify
ทำตามลิ้งค์นี้เลย
โดยทำถึงแค่ขั้นตอน copy token keyนะ ตั้งแต่postmanไปไม่ต้องทำ (เก็บtoken key ไว้ด้วยนะจ๊ะ)
ต้องกราบขอบพระคุณเจ้าของblogมา ณ ที่นี้ด้วยนะฮะ
2.) เปิดportal azure แล้วlog in เข้าไปในระบบ แล้วกด create a resource
3.) จะปรากฎหน้าต่างserviceเยอะแยะมากมายมาให้เลือก ให้คลิกที่ Integration แล้วเลือก Logic app (หรือจะพิมพ์หาLogic appในช่องSearch the marketplace ก็ได้จ้า)
4.) หลังจากคลิกLogic appแล้ว จะปรากฎหน้าต่าง Create logic app ให้ใส่ข้อมูลลงไปในช่องต่างๆดังนี้
- Name : LineNotifyProject (จริงๆตั้งเองได้เลยนะ)
- Subscription : ขึ้นกับAccountของแต่ละคนว่าเป็นsubscriptionอะไร ให้กดลูกศรลงแล้วเลือกsubscriptionของตัวเอง
- Resource group : เลือก Create new
หมายเหตุ>> Resource groupคือกลุ่มของResourceที่สามารถใช้ร่วมกันได้ระหว่างหลายๆservice เช่น ตอนแรกเราสร้างservice ตัวweb app service แล้วมีการสร้างdatabaseขึ้นมาตัวนึง หลังจากนั้นเราอยากจะสร้างserviceตัวmobile app service ที่ใช้databaseดังกล่าวด้วย เราก็สร้างmobile app service โดยเลือกresourceเป็น resourceเดิมที่มีdatabaseตัวนั้นอยู่แล้ว
- Location : เลือก Southeast Asia
- เลือก Pin to dashboard จะได้เปิดดูโปรเจคง่ายๆผ่านdashboard
แล้ว กด Create เพื่อสร้างโปรเจคขึ้นมา
5.) หลังจากนั้น บริเวณ Notification จะทำการแจ้งเตือนว่า สร้างโปรเจคเสร็จแล้ว และหน้าต่างจะเปลี่ยนเป็นหน้าต่างของLogic apps designer ของโปรเจคเราโดยอัตโนมัติ
6.) ในหน้าLogic apps designer ให้เลื่อนscroll barลงมาหน่อยนึงจะพบ Templatesต่างๆให้เราเลือกเป็นจำนวนมาก ซึ่งก็จะมีตั้งแต่ เริ่มสร้างจากแบบเปล่า กับ แบบสำเร็จรูป ให้คลิกเลือก Blank Logic app
7.)หลังจากเลือก สร้างโปรเจคจากหน้าเปล่าๆ จะปรากฎหน้าการทำงานดังนี้
ซึ่งภายในกรอบการทำงานจะปรากฎเครื่องมือตั้งต้นให้เราเลือกใช้ ซึ่งมีเยอะมาก จากคอนเซปต์ของเรา เราจะเริ่มจากการตั้งเวลาว่า เมื่อ7โมงจะเริ่มทำงาน ดังนั้นเราจะเลือกเครื่องมือที่มีชื่อว่า “Recurrence” ซึ่งเป็นTriggerย่อยในSchedule
8.) พิมพ์ในช่องค้นหาว่า “recurrence” แล้วคลิก Schedule-Recurrence ที่อยู่ในหมวดหมู่Trigger
9.) จะปรากฎกล่องการทำงานแรกที่ชื่อว่า Recurrence (ซึ่งเราสามารถเปลี่ยนชื่อกล่องนี้ได้โดยคลิก … ที่บริเวณมุมบนขวาของกล่อง)
ภายในกล่องให้ตั้งค่าต่างๆดังนี้ แล้วกดShow advance options
หลังจากกดShow advance option จะพบว่ามีเมนูเพิ่มเติมขึ้นมาแบบนี้
ใส่ค่าต่างๆตามกล่องข้างบน โดยจะมีPreviewให้เราดูด้วยว่าที่ตั้งค่ามา คือการให้กล่องนี้ทำงานเมื่อใด ซึ่งจากข้างบนคือ ให้การทำงานflowนี้เริ่มทำงานตอน7:00,7:30,7:45ในวันจันทร์-ศุกร์ ทุกๆสัปดาห์
10.) กด +New step และ Add an action เพื่อสร้างการทำงานขั้นถัดไป
- *จะสังเกตว่าจะมีเมนูอื่นนอกจาก Add an actionด้วย นั่นคือ Add a condition ซึ่งเราอาจใช้ในกรณีเช่น ถ้าเงื่อนไขเป็นจริง ให้ทำ A เงื่อนไขเป็นเท็จ ให้ทำB ซึ่งในบทความนี้เราจะยังไม่มีการใช้ตัวconditionนี้
11.) จากคอนเซปต์ด้านบน ในกระบวนการถัดมานี้เราจะสร้างเครื่องมือที่สามารถดึงเวลาในการเดินทาง จากจุดเริ่มต้น-จุดปลายทางมา ซึ่งในที่นี้เราจะใช้เครื่องมือตัว Bing Map ให้เราพิมพ์Bing ในช่องค้นหา แล้วเลือก BingMaps-Get route
12.) จะปรากฎกล่องBing mapหน้าตาแบบนี้
Connection name จะตั้งเป็นอะไรก็ได้ แต่ตัว API Key เราไม่สามารถตั้งเองได้ เราต้องไปดึงตัว API key มาจากผู้ให้บริการ ในที่นี้คือBing mapนั่นเอง
>>ดังนั้นเราจะสอนการไปนำAPI keyมาาา
12.1 เข้า https://www.bingmapsportal.com/แล้วกด Sign in
ทำการ Sign in ด้วย hotmailของเรา จากนั้นจะปรากฎหน้านี้ แล้วกด Yes
12.2 จะปรากฎหน้าต่างให้เรากรอกข้อมูล ก็กรอกไปเลยย
12.3 จากนั้นเราจะเข้าสู่หน้า Dev center ให้คลิก My account แล้วเลือก My keys
12.4 จากนั้นจะปรากฎหน้าต่างให้เราสร้างkey ก็กรอกๆไปตามนี้ได้เลย แล้วกด create
12.5 หลังจาก create key แล้ว จะพบข้อความ สร้างkeyเสร็จสมบูรณ์ ให้เราcopyตัวkey ตัวนี้ มาใส่ลงในกล่องBing map ของLogic appsได้เลย
13.) หลังจากกด Create แล้ว จะพบตัวเลือกเพิ่มเติมแบบนี้
ซึ่ง เราจะมากรอก waypoint กันก่อน
waypoint1 คือต้นทาง
waypoint2 คือปลายทาง
โดยเราจะระบุแต่ละwaypoint เป็นละติจูด,ลองจิจูด ซึ่งก็คือตำแหน่งพิกัดบนพื้นโลกนั่นเอง ซึ่งวิธีการนำละติจูด, ลองจิจูด ของสถานที่ที่เราสนใจ มีขั้นตอนดังนี้
13.1 เข้า https://www.latlong.net/ จะปรากฎหน้านี้
ซึ่งวิธีการก็ง่ายมาก นั้นคือ ทำการกรอกชื่อสถานที่ลงไป แล้วกดFind ละติจูด ลองจิจูด ก็จะโผล่ขึ้นมาในช่อง Latitude, Longitudeเอง
13.2 ตัวอย่างนี้จะพิมพ์ Yaowarat ลงไป (เราจะใช้เป็นต้นทาง) แล้วกด Find
จากนั้นให้copy ค่า lat, long ในวงแดงด้านล่าง ไปใส่ในwaypoint1
ส่วน waypoint2 พิมพ์ Chulalongkornลงไป (เราจะใช้เป็นปลายทาง)แล้วกด Find
จากนั้นให้copy ค่า lat, long ในวงแดงด้านล่าง ไปใส่ในwaypoint2
14.) พอเราเอา waypoint1และ waypoint2 มาใส่แล้ว ก็ใส่ค่าเพิ่มเติมลงในช่องต่างๆดังนี้
จากนั้นกด +New step และเลือก Add an action เพื่อสร้างการทำงานขั้นถัดไป
15.) ต่อมาเราจะสร้างตัวแปร มาเก็บค่าเวลาในการเดินทางเอาไว้ (ซึ่งสำคัญมากนะ เพราะเราต้องส่งค่าเวลานี้ ไปให้ตัว Line notifyในภายหลัง)
ให้เราพิมพ์ variable ในช่องค้นหา แล้วเลือก Variables-Initialize variable ในหมวดหมู่Actions
16.) จะปรากฎกล่องInitialize variable ให้เราตั้งชื่อตัวแปรว่า travelTime
เลือกType เป็น Integer แล้วคลิกหนึ่งทีในช่องValue
จะปรากฎหน้าต่างด้านขวาขึ้นมา ให้คลิกที่Expression แล้วใส่ค่านี้ลงไปในช่องfx
div(body(‘Get_route’)?[‘travelDurationTraffic’],60)
ความหมายของexpressionนี้คือ นำเวลาที่ได้ ซึ่งมีหน่วยเป็นวินาที ไปหารด้วย60 จะได้เป็นนาที
แล้วกด OK
17.) จากนั้นให้กด +New step และคลิก Add an action เพื่อสร้างขั้นตอนถัดไป
18.) ต่อมาเราจะทำการดึงอุณหภูมิในขณะนั้นของกรุงเทพมาด้วย ให้เราพิมพ์ “msn” ลงในช่องค้นหา แล้วเลือก MSN Weather-Get current weather
19.) จะปรากฎกล่อง Get current weather ให้เราใส่Locationที่เราต้องการ แล้วเลือกUnits เป็น Imperial แล้ว +New step และ Add an action ไปยังขั้นตอนถัดไป
20.) ถึงขั้นตอนนี้แล้วผู้อ่านคงเดาได้ว่าจะทำอะไร แน่นอนว่าต้องสร้างตัวแปรเพื่อเก็บอุณหภูมิอากาศแน่นวล (เหมือนตอนเก็บเวลาเดิมทางนั่นแล)
21.) จากนั้นจะปรากฎกล่อง Initialize Variable ให้คลิก … ที่มุมบนขวาของกล่อง แล้วRename เป็นtemperatureFarenheit แล้วจะได้กล่องหน้าตาแบบนี้
ให้ใส่Name เป็น currentWeatherwithFaren ชนิด Float
ส่วนตรง value ให้คลิกที่ช่องทีนึง แล้วจะเด้งกล่องด้านขวา ให้กด Expression แล้วใส่ค่าดังนี้
float(body(‘Get_current_weather’)?[‘responses’]?[‘weather’]?[‘current’]?[‘temp’])แล้วกด OK ซึ่งความหมายของมันก็เป็นการเก็บค่าธรรมดาๆ ลงในตัวแปรชื่อcurrentWeatherwithFaren ซึ่งตอนนี้ยังมีหน่วยเป็นฟาเรนไฮต์
22.) ขั้นตอนถัดมาจะทำการแปลงหน่วยจากฟาเรนไฮต์มาเป็นองศาเซลเซียส
(ถ้าแจ้งเตือนว่า ขณะนี้อุณหภูมิ90องศาฟาเรนไฮต์ก็คงจะแปลกๆไม่ใช่น้อย กับคนไทยอะนะ)
ให้เรา+New step , Add an action แล้วเลือก initialize variable เช่นเดิม
23.) จากนั้นจะปรากฎกล่อง Initialize Variable ให้คลิก … ที่มุมบนขวาของกล่อง แล้วRename เป็นtemperatureCelsius แล้วจะได้กล่องหน้าตาแบบนี้
ให้ใส่ค่าName เป็น currentWeatherCel ชนิดString
ส่วนตรง value ให้คลิกที่ช่องทีนึง แล้วจะเด้งกล่องด้านขวา ให้กด Expression แล้วใส่ค่าดังนี้
substring(string(div(sub(variables(‘currentWeatherwithFaren’),32),1.80000)),0,4)ความหมายของExpressionนี้คือ นำองศาฟาเรนไฮต์มาลบด้วย32 แล้วหารด้วย1.8 จะได้เป็นองศาเซลเซียส เช่น 32.2222 ทำเป็นString แล้วตัดมาแค่4ตัวแรก จะได้ 32.22
จากนั้น +New step และ Add an action ไปยังขั้นตอนถัดไป
24.) ถึงขั้นตอนนี้ก็ใกล้ความจริงแล้ว ขั้นนี้เราจะทำการเชื่อม Logic apps กับ Line notifyกัน ให้เราพิมพ์ HTTPลงในช่องค้นหา แล้วกดไอคอน HTTP
แล้วกดเลือก HTTP - HTTP
จะปรากฎกล่องการเชื่อมต่อ HTTP ให้เราใส่รายละเอียดดังนี้
>>Method: POST
>>Uri: https://notify-api.line.me/api/notify
>>Headers
Key1: Authorization
Value1: Bearer(เคาะวรรคหนึ่งที)TokenKeyที่เราได้มาจากLine Notifyในข้อ1.
Key2: Content-Type
Value2: application/x-www-form-urlencoded
>>Body: message=เวลาเดินทางจากเยาวราชถึงจุฬาในขณะนี้คือ
พอพิมพ์จบคำว่า คือ ให้คลิกDynamic contentในหน้าต่างด้านขวา แล้วกดเลือกตัวแปร travelTime
หลังจากนั้นให้พิมพ์หลังtravelTimeว่า และอุณหภูมิในขณะนี้คือ
แล้วคลิกเลือกcurrentWeatherCel จากหน้าต่างทางขวา
หลังจากนั้นจะใส่คำว่า องศา ปิดท้ายไปก็ได้
25.) เสร็จแล้วว ให้กดsave แล้วจะพบการแจ้งเตือนว่า saveสำเร็จ และค่อยกด run
จะปรากฎผลการrun ดังนี้
พอรันเสร็จ ข้อความที่เราตั้งไว้จะเด้งมาที่ไลน์เราทันที แฮร่ๆๆ (รันทดสอบ แต่มันก็จะรันจริงตามเวลาที่เราตั้งไว้ด้วยนะ)
ทีนี้ลองเลื่อนscroll barไปทางซ้ายสุด (แถบเลื่อนซ้ายขวาของหน้าจอ) เราจะพบหน้าต่างตาแบบนี้
จะเห็นว่ามีเมนู มีปุ่มเยอะแยะไปหมด จะอธิบายสิ่งที่สำคัญๆนะ
- ถ้าต้องการหยุดการทำงานของLogic apps ไม่ให้มันรัน ให้กด Disableไปได้
- แถบด้านซ้ายที่เมนู development tools จะพบ
1. Logic App Designer : แก้ไข/ ลบ /สร้างเพิ่ม ตัว Logic apps แบบเป็นแผนภาพ ที่เราสร้างมาในแบบขั้นตอนก่อนหน้านี้
2. Logic App Code View: แก้ไข/ ลบ /สร้างเพิ่มตัวโปรเจคของเราในรูปแบบCode ใครเทพโค้ดก็ลองไปเล่นดูได้
และบริเวณสุดท้ายด้านล่างคือ Runs history จะมีรายละเอียดการrun ในแต่ละครั้งว่า run สำเร็จมั้ย ใช้เวลากี่วิ โฟลว์นั้นทำงานตอนกี่โมง
ยินดีด้วย!! จบBlogนี้แล้ว คนเขียนแอบเหนื่อย5555 หวังว่าผู้อ่านจะเข้าใจการทำงานของLogic apps เบื้องต้นได้แล้ว จะลองไปแก้เป็นผูกกับตัวAPIของราคาหุ้น ราคาบิทคอยน์ หรือสร้างโฟลว์ที่ผูกกับ facebook, twitter , instagram หรือserviceอื่นๆก็ลองดูได้
สุดท้ายนี้ ขอบคุณพี่ตุ้ยมูฟที่แนะนำให้ลองเล่นLine NotifyมาผูกกับLogic apps จึงได้เกิดBlogนี้ขึ้น
>>ยังไงก็อ่านมาถึงตรงนี้แล้วอะเนอะ ฝากๆ blog ก่อนหน้าๆ
- วิธีสมัครAzure for student
2. วิธีรับoffice365ฟรี(สำหรับนิสิตจุฬา)
3. ละก็ฝากกดไลค์ติดตามเพจ MicrosoftStudentPartnerChula ไว้ในอ้อมอกอ้อมใจ เพราะจะมีกิจกรรมให้ความรู้ดีดีกับนิสิตจุฬาตามคณะต่างๆตลอดทั้งปีแน่นวล
3. ฝากเพจMicrosoftStudentPartnerThailandด้วยย อิอิ
