วิธีแสดงรูปภาพและเอกสาร Images and Documents

การสร้างแอพ มักจะมีข้อมูลที่เป็นไฟล์รูปภาพ และไฟล์เอกสาร มาเกี่ยวข้อง บทความนี้ เรามาศึกษา ความรู้ และวิธีการ แสดงภาพ และไฟล์เอกสาร ในแอพ ที่พัฒนาด้วย Appsheet กัน 

การเก็บไฟล์ภาพ 

สามารถแสดงไฟล์ภาพ และ เอกสาร ในแอพ 
รูปภาพ จะต้องเก็บในคอลัมน์ รูปภาพ หรือ image ในตาราง นะ 
สำหรับไฟล์เอกสาร จะเก็บในคอลัมน์ File ชนิด รูปภาพ หรือ เอกสาร image or document อาจจะเป็นลิงค์ URL หรือชื่อไฟล์ 

ค่าของ URL 
เก็บ URL ลิงค์ ต้องมั่นใจว่า เข้าถึงได้ ไม่มีข้อห้าม หลายครั้ง คนพัฒนาเข้าถึงได้ แต่ผู้ใช้งานเข้าไม่ได้ 
เช่น ไฟล์ภาพ จาก Facebook เจ้าของจะเข้าถึงได้ ทุกกรณี แต่คนอื่นๆ ไม่ใช่ ดังนั้นต้องกำหนดค่า การเข้าถึง แบบ Public คือทุกคนเข้าถึงได้ 

ถ้าเป็นไฟล์รูปภาพที่เก็บบน Google drive ต้องเลือก ลิงค์ที่แชร์และเข้าถึงได้ทุกคน 

รูปภาพ จาก คอมพิวเตอร์ หรือ มือถือส่วนตัว appsheet จะเข้าไม่ถึง จำเป็นต้องมีการอัพโหลดไปแหล่งเก็บไฟล์ภาพออนไลน์ เช่น Google drive หรือ Onedrive เป็นต้น 

เก็บชื่อไฟล์ภาพหรือไฟล์เอกสาร 

## เก็บได้ เมื่อไฟล์ภาพ หรือเอกสารนั้น อยู่บนระบบ Cloud Server ที่ appsheet รู้จัก 

ใน Editor ของการพัฒนาแอพ จะมีปุ่ม Browse เพื่อเข้าไปเลือกไฟล์ภาพ หรือ เอกสาร ใน Cloud Server ของเรา 

ถ้ามีการระบุชื่อไฟล์ภาพ หรือไฟล์เอกสาร ในตารางดาต้า ไฟล์ ควรจะอยู่ในโฟลเดอร์ เดียวกันกับไฟล์ ดาต้า นั้น เช่น  ไฟล์ดาต้าที่  /appsheet/data/MyApp ถ้ามีรูปภาพ จะถูกเก็บไว้ที่ image MyImage.jpg ในโฟลเดอร์เดียวกัน

ไม่อยากเก็บไฟล์ภาพ ไฟล์ตามที่แอพกำหนด เลือกเองได้ โดยสามารถระบุ โฟลเดอร์ใหม่ เพื่อเก็บไฟล์ภาพตามที่เราต้องการได้

ตอบข้อสงสัย ผมด้วย ตนอแรก
กล้องมือถือ ถ่ายภาพ ชัดมาก ไฟล์ใหญ่มาก แต่เมื่อนำมาใช้งานกับ appsheet ระบบจะลดขนาดลงเหลือที่ 600px
ขนาดไฟล์ภาพแนะนำคือ 600 x 600 px

การเลือกสไตล์รูปภาพ
fill with crop จะเหมาะสำหรับรูปภาพส่วนบุคคล
Fit with scale นิยมใช้กับโลโก้ คือจะปรับพอดีส่วนบน
ส่วน Background จะใช้ภาพเป็นฉากหลัง

ในการเตรียมไฟล์ภาพสำหรับใช้งานกับ Fill mode นั้น ขนาดไฟล์ภาพต้นฉบับ แนะนำให้เตรียมมาขนาด 768 x 400 px

การแสดงภาพใน google sheet
จะต้องเพิ่ม คอลัมน์อีก 1 คอลัมน์ ขึ้นมา แล้วใช้สูตร ช่วยในการดึงภาพขึ้นมาแสดง

Format:

=CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=", ENCODEURL("AppName-Account#"), "&tableName=", ENCODEURL("TableName"), "&fileName=", ENCODEURL(+ImageColumnCell)) 

ตัวอย่าง:

=CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=", ENCODEURL("Inventory-114348"), "&tableName=", ENCODEURL("Orders"), "&fileName=", ENCODEURL(+B2))) 



การหาชื่อแอพ รวมทั้งที่อยู่ URL ไฟล์ภาพ ดูที่ช่องที่อยู่ของ editor

หาชื่อตาราง
ไปที่ Data >> Tables

การฝังรูปภาพ Previe ภาพลงในช่องคอลัมน์ google sheet

Format:

=IMAGE(CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=", ENCODEURL("AppName-Account#"), "&tableName=", ENCODEURL"TableName"), "&fileName=", ENCODEURL(+ImageColumnCell))) 

ตัวอย่าง :

=IMAGE(CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=", ENCODEURL("Inventory-114348"), "&tableName=", ENCODEURL("Orders"), "&fileName=", ENCODEURL(+B2))) 


ถ้าเราสร้างแอพ และมีการสร้างลิงค์ URL ไฟล์ แล้ว ลิงค์จะทำงาน ไม่นาน ยกเว้นเราจะไปยกเลิกการตั้งค่า การ รปภ. security option ให้เป็น no “Require Image and File URL Signing.”

ถ้าเราไม่ติ้กเลือก รายการนี้ แอพของเรา ก็จะมีความปลอดภัยน้อย ลง ผู้ใช้งาน อาจจะเข้ามา แก้ไขแอพ โดยไม่ตั้งใจ หรือ ตั้งใจได้ ก็ต้องพิจารณา ให้ดี

ถ้าไม่จำเป็น ก็ไม่ต้อง ติ้กออก นะ


การแสดงภาพใน SmartSheet

อีกหนึ่งบริการไฟล์ตารางออนไลน์ใน cloud เดาเอา ว่า คล้ายๆ กับ Google drive / google sheet

แต่จริงๆ แล้ว ก็แตกต่างกันบ้าง ในเรื่องของการจัดเก็บ และการให้แสดงผล

เอาจริงๆ ผมก็ยังไม่มี account ของ Smartsheet จึงขอละไปก่อน มีเวลาและโอกาส จะทดสอบและมาเล่าต่อ


Image Caching การเก็บไฟล์ภาพชั่วคราว



ระบบจะเก็บไฟล์ภาพชั่วคราวไว้ที่ Cloudflare เพราะถ้าเก็บโดยตรงที่ server ของ Appsheet จะมีราคาแพง และแพงมากขึ้น หากมีการปรับขนาดภาพและแสดงผล


ถ้าเรา ใช้ภาพซ้ำ ไฟล์ URL ของภาพนั้น จะอัพเดท และเราจะเห็นภาพอัพเดท ต่อเมื่อ ไฟล์ภาพนั้น ออกจาก ระบบภาพชั่วคราวของ Cloudflare


ถ้าเราเปิดค่า "Secure Image Access" ระบบจะไม่เก็บภาพในระบบชั่วคราวที่ Cloudflare และการแสดงผลภาพจะได้รับความยากลำบาก โดยเราสามารถเปิดใช้งาน "Secure Image Access" โดยไปที่ Security > Options



Post a Comment