PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


การ upload และ download ไฟล์ด้วย File Transfer ใน ionic metarial ตอนที่ 1

04 July 2017 By
file transfer ionicmaterial ionicframework


เนื้อหาในบทความตอนต่อไปนี้ เราจะมารู้จักวิธีการใช้งาน File Transfer Plugin ของ cordova
โดยเราจะนำมาใช้งานกับ ionic material โปรเจ็คของเรา ซึ่งในความเป็นจริงแล้ว การใช้งาน File
Transfer Plugin นั้นไม่ค่อยมีความยุ่งยากสักเท่าไหร่นัก แต่เนื่องจากความเกี่ยวเนื่องและสัมพันธ์กัน
ของการใช้งานโดยรวมทำให้เรา ต้องเข้าใจส่วนการใช้งานอื่นๆ รวมไปด้วย เช่น ในการดาวน์โหลด หรือ
อัพโหลดไฟล์ เราต้องรู้จักการใช้งาน File Plugin ในการจัดการเกี่ยวกับไฟล์ที่ทำการดาวน์โหลดลงมา
หรือ การใช้ Camera Plugin ในการกำหนดแหล่งที่มาของข้อมูลที่จะทำการอัพโหดล หรือการแสดงราย
การที่อัพโหลด หรือรายการในฝั่ง server และมีเมนูสำหรับทำการดาวน์โหลด เหล่านี้ เป็นต้น
    ในตัวอย่างที่เราจะทดสอบในบทความนี้ เราจะเน้นไปที่ไฟล์รูปภาพ รูปแบบคือ เราจะให้ผู้ใช้เลือกรูปภาพ
ไม่ว่าจะเลือกจาก gallery หรือเลือกรูปโดยการถ่ายรูปใหม่ จากนั้นให้ผู้ใช้สามารถทำการอัพโหลดขึ้นไปยัง 
server พร้อมอาจจะแสดงสถานะการอัพโหลดในขนะนั้น  มีการแสดงรายการไฟล์รูปภาพที่ได้อัพโหลดขึ้นไป
บนฝั่ง server แล้ว และสามารถที่จะเลือกรายการที่ต้องการดาวน์โหลดลงมาที่เครื่องของเราในรูปแบบอย่าง
ง่ายเบื้องต้นได้ เหล่านี้เป็นแนวทางที่เรา จะได้ทำการศึกษาและทำความเข้าใจกัน
 

เริ่มต้นสร้างโปรเจ็คของเรา

 
สร้าง app package และทดสอบ build apk ไฟล์ เพิ่อเตรียมความพร้อม
 
สร้างโปรเจ็ค 
C:phonegap>phonegap create learn009 com.example.learn009 FileTransfer  
เข้าไปใช้งานโปรเจ็คโฟลเดอร์
C:phonegap>cd learn009 
ทดสอบความพร้อม สร้างไฟล์ apk จากไฟล์ตัวอย่าง
C:phonegaplearn009>phonegap build android   
ในขั้นตอนทดสอบการสร้างไฟล์ apk ด้วยคำสั่ง phonegap build android    
หากไม่มีอะไรผิดพลาด จะได้ผลลัพธ์การทำงานดังรูป ตามลำดับ คำสั่งข้างต้น
 
 

 
 
เราจะได้ไฟล์ apk ตัวอย่างหลังจากทำการ build android
 
 

 
 
พร้อมโฟลเดอร์ส่วนของโค้ดของเราจะอยู่ใน www ดังรูป
 
 

 
 
เราจะแทนที่ไฟล์ทั้งหมดในโฟลเดอร์ www ด้วยไฟล์ ใหม่ของเรา ดังนั้น
ให้เราลบไฟล์ทั้งหมดในโฟลเดอร์นี้ออกก่อน
 
ต่อไปให้การดาวน์โหลดโค้ดเริ่มต้นของ ionic material ที่ใช้งาน anularjs มาใช้งานในโปรเจ็คของ
ได้ที่ 
 

ดาวน์โหลดโค้ดตัวอย่างโฟลเดอร์  www  ได้ที่ https://goo.gl/uF9n8d

 
หรือดูเพิ่มเติมที่บทควม 
แจกตัวอย่างโค้ด ionic material รองรับการตั้งค่า Push Notification 
http://www.ninenik.com/content.php?arti_id=750 via @ninenik
 
 
 
 
หลังจากดาวน์โหลดไฟล์มาเรียบร้อยแล้ว ให้ทำการแตกไฟล์ แล้วนำ
ไฟล์ทั้งหมดในโฟลเดอร์ www มาไว้ในโฟลเดอร์ www โปรเจ็คของเรา 
 
 

 
 
ตอนนี้เราพร้อมเขียนโค้ดแล้ว ให้เปิดโปรแกรม ที่ต้องการพี่จัดการเกี่ยวกับโค้ด ในที่นี้ผู้เขียน
จะลองใช้ visual studio code ในการจัดการ
 
 

 
 


 
ทดสอบรันเพื่อดูหน้าตาของ app ของเราผ่าน phonegap developer app หรือผ่านบราวเซอร์
ด้วยคำสั่ง phonegap serve
 
C:phonegaplearn009>phonegap serve
 
 


 
 

 
 
จะได้หน้าตา app เริ่มต้นของเราประมาณนี้
 
 
 
 
เนื้อหาในตอนหน้า เราจะมาจัดการในส่วนของโค้ด กับหน้าตา app แต่ละส่วน
ที่เราจะใช้งาน และตัดส่วนของโค้ดหรือหน้าบางหน้าที่ไม่ใช้งานออก เพื่อให้สามารถทำความเข้าใจ
กับโค้ดได้ง่ายขึ้น รอติดตาม

 






Tags:: ionicframework file transfer ionicmaterial




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง