03TemplateCika2018

        ก่อนอื่นต้องกราบสวัสดีเพื่อนๆ พี่ๆ น้องๆ ที่เข้ามาอ่านบทความนี้นะครับ พยายามหาเวลาและโอกาสเข้ามาแนะนำการเขียนบทความเกี่ยวกับ Google script เพื่อเป็นแนวทางการพัฒนาต่อยอดทางโปรแกรม ซึ่งผมเป็นสาวกพวกชอบของฟรี และพี่Goo ก็ดันใจดีซะมากมายก่ายกอง ต้องขอบพระคุณพี่ Goo อย่างมากๆเลยนะครับ ที่ทำให้ชาวโลกได้เห็นว่าของฟรีเขาก็มีในโลกนะจ๊ะ

         มาเข้าเรื่องเลยนะครับ ต้องติดตามบทความอื่นๆที่เขียนผ่านมาเพื่อเป็นพื้นฐานการเขียน Google Script ผมจะพยายามแนะนำวิธีการทำตั้งแต่พื้นฐานให้เข้าใจได้ง่ายที่สุดนะครับ

         กรณีนี้หากเราต้องการบังคับ หรืออัพโหลดรูปเก็บไว้ใน Google Drive โดยจะอยากให้รูปภาพได้ตามขนาดตามที่ตนเองต้องการ เรียกว่า Resize image ประมาณนั้นสมมุติว่าผมอัพภาพขึ้นไปบน Google Drive แล้วต้องการเขียนโปรแกรมเพื่อลดขนาดของภาพที่ผมอัพ โดยใช้ Google script จะต้องทำตามขั้นตอนดังนี้ครับ

1) เข้าสู่ระบบ  Google     

2) กดที่ปุ่ม เก้าจุดมหัศจรรย์   

3) เลือก Google Drive    แล้วเข้าไป Folder ที่ต้องการสร้าง โปรแกรม Resize รู้ปภาพซึ่งเป็นโฟลเดอร์เดียวกับภาพที่เราอัพโหลดมาเก็บไว้เพื่อต้องการลดขนาด  เริ่มจากตามภาพ คือ ตอนนี้เราอยู่ที่ Google Drive อย่าลืมนะครับ คลิกที่ New  เลือก Folder แล้วสร้างชื่อโฟลเดอร์ ในที่นี้ ผมตั้งชื่อว่า Resize Image by GoogleScript -2018

4) คลิกที่ New   (ต้องอยู่ที่โฟลเดอร์ที่สร้างใหม่นะครับ) คลิกเลือก Google Script

5) ดำเนินการตั้งชื่อโปรแกรม หรือชื่อไฟล์   

6) กลับมาที่โฟลเดอร์ Google Drive   เรา ให้เราดำเนินการสร้างไฟล์ Google Docs เพื่อใช้ Application นี้ จัดการ Risize ให้ดำเนินการตามรูปภาพด้านล่างนี้ คือ คลิก New แล้วเลือก Google Docs จะได้ไฟล์ใหม่ดังภาพถัดมา

อย่าลืม Copy id key ของไฟล์นี้ไปใช้งานด้วยครับ

7) จากนั้น ให้สลับมาที่ตัวสคริป เริ่ม เขียนโปรแกรมดังนี้ครับ  

function ResizeImage2018() {
 
   // กำหนดการเปิดใช้งาน google Docs โดยก็อปปี้ idKey จากไฟล์ Google Docs ของเรา
      var doc1 = DocumentApp.openById(" ????  ");
   // ดึง Id Key ของไฟล์รูปภาพที่เราอัพโหลดไปไว้ในโฟลเดอร์
      var image1  = "https://drive.google.com/uc?export=view&id=?????"; 
   // สร้างตัวแปรเก็บไฟล์รูปภาพในรูปแบบของ blob
      var blob    = UrlFetchApp.fetch(image1).getBlob() ;
   // ตั้งค่าโฟลเดอร์ไว้สำหรับรองรับจัดเก็บไฟล์ใหม่ที่เราต้องการสร้าง 
      var folder = DriveApp.getFolderById("???????");

  // ทำการเช็คด้วยว่าในไฟล์มีภาพกี่ภาพ แล้วเราจะแทรกภาพไว้ภาพต่อจากสุดท้าย
      var lenImage = doc1.getBody().getImages().length;
   // ทำการแทรกภาพไปที่ตำแหน่ง 0 ของไฟล์ Google Docs และทำการ Resize ให้ได้ขนาดภาพตามที่เราต้องการ
      var insertImage =  insertImage = doc1.getBody().insertImage(lenImage,blob).setWidth("300").setHeight("300");
  
   // เมื่อดำเนินการแทรกภาพแล้ว รูปภาพที่เราอัพก็จะไปอยู่ที่ไฟล์ Google docs เรา สามารถเปิดดูได้
      lenImage = doc1.getBody().getImages().length-1 ; //เก็บค่าลำดับภาพที่สุดท้าย
   var imageResize = doc1.getBody().getImages()[lenImage]; // จากนั้น เรา ก็สร้างตัวแปร เก็บรูปภาพสุดท้าย
  
// ทำการสร้างภาพที่ดำเนินการ Resize ใหม่แล้วเป็นไฟล์ใหม่ ในโฟลเดอร์ที่เราเตรียมไว้
// สร้างเป็นไฟล์นามสกุลใดก็ได้ ตามฟังชั่น MimeType. (gif png jpg อื่นๆ )
// และสร้างชื่อไฟล์ตามด้วยชื่อเก่า
var name = "NewImage_"+blob.getName(); //ตามด้วยชื่อเก่าของไฟล์รูปภาพครับ
       var NewImage  =  folder.createFile(imageResize.getBlob().getAs(MimeType.JPEG)).setName(name) ;
  
   // จบ เราจะได้ไฟล์ที่ชื่อตามที่เราต้องการในโฟลเดอร์
}

Copy โค้ดด้านบน แล้ว วางบนพื้นที่  Script  จากนั้น    นำ ID Key ของไฟล์ Google Docs  ของไฟล์รูปภาพ  และโฟลเดอร์ วางแทน เครื่อง ?  สีแดง  จากนั้น ก็กดรันที่ปุ่ม สามเหลี่ยมสีดำ ดังภาพด้านล่างนี้ครับ จะเกิดกระบวนการ Autorization เพื่อให้ Acount หรือบัญชีของท่านเปิดการใช้งาน Script นี้

ดูที่ภาพด้านล่างครั้งแรกที่ดำเนินการ รันสคริป จะเกิด การไม่สามารถ verified หรือทำการตรวจสอบได้ให้คลิกที่ Advanced เพื่อแสดงว่าท่านคือ ผู้พัฒนาตัวจริง  คลิกที่ ALLOW นะครับ จากนั้น ก็กด รันอีกครั้ง

เมื่อกดรันอีกครั้ง สคริปก็จะทำงาน เราก็จะไดไฟล์พร้อมกับขนาดของไฟล์ใหม่ตามที่เราตั้งค่าไว้ครับ ดังภาพ  เป็นการแสดงไฟล์ใหม่ที่สคริปสร้างขึ้นใหม่

และสามารถตรวจสอบรูปภาพที่ไฟล์ Google Docs จะมีภาพล่าสุดที่เราทำการ ตามรูปภาพด้านล่างครับผม

สุดท้ายหวังว่าบทความนี้จะมีประโยชน์ สามารถนำไปต่อยอดกับท่านได้ในอนาคต  หากจะเป็นการดีก็ส่งคำทักทายสั้นๆเป็นกำลังใจกันมาตรงโพสต์ด้านล่าง
ขอบคุณครับผม มีเวลาจะเขียนบทความอีกนะครับผม

ับ

คุณจะสั่งให้ Widgets โชว์แค่หน้าแรกใช่ไหม?


<b:if cond='data:blog.url == data:blog.homepageUrl'>

        โค้ดของ Widgets

</b:if>

ซึ่งความหมายของโค้ดด้านบนนี้ คือ สั่งให้ Widgets แสดงเฉพาะหน้าแรก data:blog.homepageUrl
ในการปรับ Widgets นั้นเราต้องค้นหา Widgets ที่เราสร้างขึ้นไว้ หากเราสร้าง Widgets ด้วย
"HTML/JavaScript widget" ใส่ข้อมูลหรือสิ่งที่ต้องการให้แสดงใน widget
ลงไปแต่อย่างลืมตั้งชื่อ title ของวิดเก็ตด้วยเพื่อง่ายต่อการค้นหาโค้ด
วิธีค้นหาโค้ด Widgets ที่เราสร้างขึ้นเพื่อปรับแต่ง
1. ไปที่ blogger >> การออกแบบ >> แก้ไข HTML
2. ติ้กถูกที่ "ขยายเทมเพลตวิดเจ็ต" เพื่อป้องกันเราทำโค้ดเสีย
3. Ctrl + F ค้นหาโค้ดชื่อ title ของ Widgets ที่เรากำหนดขึ้นตอนสร้าง Widgets
ตัวอย่างชื่อ title Widgets ที่ผมสร้างขึ้นมีชื่อว่า "Widgets in blogger" ลักษณะของโค้ด Widgets ที่เจอจะประมาณนี้

<b:widget id='HTML11' locked='false' title='ตราโรงเรียน' type='HTML'>
    <b:includable id='main'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>    <h2 class='title'><data:title/></h2>
  </b:if> 

4. การแทรกโค้ดเพื่อให้ Widgets แสดงเฉพาะหน้าแรกของบล็อก
5. ตรวจสอบโค้ดและผลลัพธ์ที่ได้
เทคนิคการซ่อนและแสดง Widgets บน blogger เราสามารถนำไปประยุกต์ใช้กับบล็อกของเราได้ เพิ่มความน่าสนใจให้กับบล็อกมากขึ้น

// By Google Docs, we mean the native Google Docs format
// ไฟล์ ไม่โครซอฟ ออฟฟิศ ใช้ได้ทุกตัวครับ.......

function convertToGoogleDocs(fileName) {

var officeFile = DriveApp.getFileById("0BxzE9Mdx0o8MdldobnE0NUVfVWs");

// Use the Advanced Drive API to upload the Excel file to Drive
// convert = true will convert the file to the corresponding Google Docs format
var uploadFile = JSON.parse(UrlFetchApp.fetch(
"https://www.googleapis.com/upload/drive/v2/files?uploadType=media&convert=true",
{
method: "POST",
contentType: officeFile.getMimeType(),
payload: officeFile.getBlob().getBytes(),
headers: {
"Authorization" : "Bearer " + ScriptApp.getOAuthToken()
},
muteHttpExceptions: true
}
).getContentText());
// Remove the file extension from the original file name
var googleFileName = "testExcel";

// Update the name of the Google Sheet created from the Excel sheet
DriveApp.getFileById(uploadFile.id).setName(googleFileName);
}

               

                   สูตรนี้บางท่านก็จำเป็นในการใช้พัฒนาระบบของ Excel แต่ในที่นี้ผมใช้ของ Google SpreadSheet เพื่อพัฒนาระบบ บนภาษาจาวาสคริป โดยใช้ Google Apps Script เป็นเครื่องมือพัฒนาควบคู่กับ Google SpreadSheet ซึ่งเป็นแหล่ง Server อันทรงพลังและมีประสิทธิภาพที่สุดในโลก ที่ให้มาใช้งานกันฟรีๆ  

                     เอาล่ะครับ เข้าสู่เนื้อหากันเลยครับ สูตรก็ไม่ได้ง่ายนักเข้าไปค้นหาก็เป็น ชั่วโมงกว่าจะได้มา ยากลำบากเหลือแสน อิกๆ..

ตัวนี้เลยครับ พระเอกของเรา 
               =cell("address",index(A6:DC6,1,match("/",A6:DC6,0)))


อ่านดูตามนี้เลยนะครับผม.. 
ไม่เข้าใจยังไงก็ทิ้งข้อความไว้นะครับ จะเข้ามาตอบให้ครับ

1. OpenShift : เป็น  PaaS ของ RedHat ที่นักพัฒนาสามารถจะเลือกพัฒนา Application โดยใช้ภาษาได้หลายภาษา เช่น PHP เป็นต้น (อยากรู้ค้นหาเพิ่มเองเด้อ)
2. OpenShift : ไม่จํากัดเวลา Build Project
3. OpenShift : มี Reliability ระบบ  Server  ซึ่งจำเป็นจะต้องมีความน่าเชื่อถือสูง และสามารถรองรับ  SLA ทีเหมาะสมได้ การทำ  Web App โดยหลักการ ถ้าไม่คำนึงถึง  Hosting  ที่เหมาะสม ก็ไม่ใช่การทำ Cloud App ที่ถูกต้องแล้วล่ะครับพี่น้องคร๊าฟ
4. OpenShift : ที่สำคัญ OpenShift เป็น Cloud Hosting ครับผม
5. OpenShift : ไม่งอแงเลยครับ รองรับการเข้าเยี่ยมชมเพจวันล่ะไม่เกิน 15 View  รองรับการเข้าเยี่ยมชมเว็บประมาณ 50,000 ครั้งต่อเดือน นั่นเพียงพอต่อความต้องการ แต่หากมากกว่านี้สามารถติดต่อเพิ่มได้ครับ
6. OpenShift : ให้ Starage มาถึง 1G 3 gears นั่นหมายถึงว่าเยอะเลยทีเดียว ใช้เก็บข้อมูลเกี่ยวกับ Web App และ DataBase ได้เพียงพอ ใช้ได้เป็นชาติครับไม่เต็มหรอกครับผมว่านะ..
7. OpenShift :  ทำงานบนทรัพยากรของ Amazon Cloud Computing บน EC2
8. OpenShift : พัฒนาโดย RedHat หลายๆคนคงรู้นะ
9. OpenShift : สร้าง domain name จาก namespace ที่กำหนดให้โดยผู้ใช้ให้อีกด้วย เช่น  http://smssanc.anc.ac.th
10. OpenShift : ใช้ github เป็นหลัก โดยเราจะต้อง clone git repository หลังจากที่เราสร้าง application บน openshift เพื่อที่จะนำมาทำการแก้ไขให้เป็น app ของเราต่อไป
11. OpenShift :
12. OpenShift :

ศึกษา OpenShift เพิ่มเติม ผมขอขอบคุณหลายๆเว็บ เช่น

• http://goo.gl/c9Yrpk
• http://goo.gl/KB2JKa
• http://thaiopensource.org/tag/openshift/
• http://goo.gl/S6sCX0
• http://goo.gl/zeJ3Qp

อธิบาย Pass กะ Laas เพิ่มเติมครับ

• การพัฒนาบน PaaS นักพัฒนาซอฟต์แวร์จะสามารถที่จะมุ่งเป้าไปที่การพัฒนาและติดตั้ง Application ได้อย่างเดียว โดยการทำงานและบริหารระบบอื่นๆทาง  Cloud Provider  จะเป็นผู้ดำเนินการให้
• การพัฒนาบน IaaS  ผู้พัฒนาจะต้องบริหารจัดการหลายๆอย่างเองหมด อาทิเช่น การติดตั้ง  Web Server  และ Database Server, การทำ Load Balance, การบริหารจัดการ  VMware  หรือ DBMS และ การพัฒนา Application

อะไรประมาณนี้…เอิกๆ….

แนะนำหนังสือ

สามารถดาวน์โหลดได้ ที่เว็บ OpenShift ครับ
ปฏิบัติการ ระบบ Openshift 
1. เข้าเว็บ  https://www.openshift.com/

2. ลงทะเบียนที่ SIGN UP FOR FREE  สมัครเองนะครับ…ง่ายๆครับ..เอิกๆ…

3. เป็น Cloud Hosting ฟรีครับ เสร็จลองทำดู หน้าตาได้อย่างนี้เปล่าครับผม..

มันให้มา 3 Gears หมายความตามนี้ครับ  คือให้มา 3 App เท่านั้นครับ..
4. เครื่องมือที่เกี่ยวข้องก็มี             

•  โปรแกรม Putty เอาไว้สร้างคีย์ ไว้ติดต่อกับ Server
  PuTTY download page คลิกดาวโหลดตรงนี้
  วิธีทำดูตามลิงค์ตรงนี้ครับ…https://www.openshift.com/developers/install-and-setup-putty-ssh-client-for-windows 
•   โปรแกรม Tortoisegit  เอาไว้ Upload สคริปภาษา PHP ขึ้นไปเก็บที่ Openshift โดยตรง
  https://code.google.com/p/tortoisegit/wiki/Download ดาวโหลดตรงนี้
  วิธีทำ ดูตามวีดีโอนี้ครับ….https://www.youtube.com/watch?v=3wp61fN3AQY

ว่างๆจะมาทำภาค2…
  ส่งข้อความพูดคุยทักทาย หรือแสดงความคิดเห็น หรือให้กำลังใจกันหน่อยนะครับผม… 

1. เปิดโปรแกรมเว็บบราวเซอร์ในที่นี้ใช้ Google Chrome นะครับผม…
    ดูวิธีลงทะเบียนในบทความ ภาคที่ 1 นะครับ..ส่วนบทความนี้คลิก LogIn ได้เลยครับ


2. หลังจากท่านให้สร้างระบบ OpenShift คลิกที่ Add Application เพื่อสร้างรายการใหม่ขึ้นมา
ซึ่งทาง OpenShift มีให้สร้างได้ฟรีถึง 3 Gears นะครับ..ของผมเลือกอีก 1 Gears
สังเกตในรูปภาพที่ 2 ผมสร้างมาแล้ว 2 Gears



ถ้าสร้าง Application ครั้งแรก ให้เลือก Create your first application now

ถ้าสร้าง Application ครั้งแรก ระบบจะถามดังภาพด้านบน คลิกเลือก Not now,continueจากนั้นก็ได้ปรากฏภาพดังรูปภาพที่ 1 ด้านบน
3. จากนั้นจะเข้าการเลือกรายการที่ต้องการจัดการ ซึ่งในที่นี้ให้เลือก PHP4 ในระบบ SMSS
ใช้ภาษา PHP ในการพัฒนาระบบครับ…ดูตามรูปภาพที่ 3 ครับผม

4.  จากนั้นระบบจะให้กรอกชื่อ Public URL ให้เราคิดชื่อให้ตรงตามรายการที่เราจะทำซึ่งใน
ที่นี้ผมใช้ SMSS1 ดูตามรูปภาพที่ 5    อย่าลืม ตรง Scaling  ไม่ต้องเลือก ให้เป้น
No Scaling เหมือนเดิม จากนั้นคลิกที่ด้านล่างปุ่ม Creat Application


5. จากนั้นก็จะแสดง Gears ทั้งหมดในหน้านี้ตามรูปภาพที่ 5

6. ต่อไปก็ให้คลิกที่เมนู Applications จะได้ดังรูปภาพที่ 6


7. คลิกที่รายการ SMSS1 จะได้ตามรูปภาพที่ 7 จากนั้นก็ให้เพิ่มฐานข้อมูลในที่นี้ผมใช้
    MySQL 5.5 ให้คลิกที่ Add MySQL 5.5 ที่เมนูด้านล่าง

8. จะได้หน้าตามตามรูปภาพที่ 8  ให้คลิกที่ Add Catridge และจากนั้นก็ ให้เพิ่ม
     PHP MyAddMin ด้วยทำเหมือนกันกับ Add MySQL

9. จะได้หน้าตามตามรูปภาพที่ 9 ซึ่งมีรายการที่เราเพิ่มอยู่ 3 รายการคือ PHP,MySQL,
    PHP MYADDMIN หน้าที่ ของ PHP MyAdMin จะเป็นตัวจัดการฐานข้อมูล MySQL
    ได้ง่ายซึ่งเป็นตัวจัดการบนเว็บไซต์

10. จากนั้นติดตั้ง โปรแกรมเสริมเพื่อที่จะใช้ในการสร้าง Key และ Deploy รายการที่เราจะอัพ
     ขึ้นไปที่ Open Shift นั่นคือ อันแรกคือโปรแกรม PuTTy  และ โปรแกรม Tortoisegit
     วิธีการติดตั้งและดาวน์โหลดให้กลับไปดูที่ ภาคที่ 1 นะครับ
    การ Install PuTTy คลิกดูวิธีการติดตั้งที่นี่ครับ..คลิก
     หลังจากลงเสร็จเปิดโปรแกรม PuTTygen เพื่อจัดการ Public Key

11. จากนั้นให้เลื่อนเมาส์ไปมาในขณะที่กำลังทำการ Generate Key อยู่นั้น

12. จะได้ Public key แล้วให้ใส่ตรงนี้จะให้กรอกว่า รหัสผ่านสำหรับเปิดใช้ไฟล์ key นี้ คืออะไร
      ซึ่งจะเป็นคนละตัวกับรหัสผ่านของ user จากนั้นให้คลิกปุ่ม Save private key ไว้ใน Folder
      ที่สร้างไว้เก็บ Public key นี้ไว้

13. ต่อจากนั้น ให้ไฮไลต์ในช่อง Public key ทั้งหมดทำการก็อปปี้ไปเก็บไว้ที่ไฟล์ทีใช้เก็บ
      ตัวอักษรในที่นี้ใช้โปรแกรม NotePad เก็บไว้ใน Folder เดียวกันกับ Public key ในข้อ
      ที่ 12 เก็นเป็นไฟล์ *.txt เอาเก็บไว้ใช้ต่อไป ดังในรูปภาพที่ 13


14.  คลิกที่เมนู Application ดูด้านข้างจะพบข้อความดังรูปภาพด้านล่าง จากนั้นคลิกที่
       Requires a public key ตามภาพที่ 14


กรอกชื่อในช่อง Key name ตั้งให้สัมพันธ์กับ Application นี้ จากนั้นก็อปปี้ Public key ที่
บันทึกไว้ในไฟล์ text ในโฟลเดอร์ที่สร้างเก็บไว้เก็บ Public Key จากนั้นคลิก Create จะได้ดัง
ภาพด้านล่างนี้

สุดท้ายดูที่ Application ที่เราสร้าง ตรง Public Key  ก็จะมี Key ขึ้นมาแล้วครับผม..

15. เจอกันต่อในภาคที่ 3 ครับผม….โชคดีคร๊าฟ….