เริ่มต้นผลงานแอพพลิเคชันแรก

เริ่มต้นผลงานแอพพลิเคชันแรก

ทุกครั้งก่อนที่จะสร้างแอพพลิเคชันใหม่ จำเป็นจะต้องทำสิ่งต่อไปนี้เสมอ เพื่อให้ผลการทำงานผิดพลาดน้อยที่สุดเท่าที่จะทำได้

1. สร้างไดเรกทอรี่เอาไว้ที่ Drive C:\ หรือ Drive D:\ ก็ได้ จากนั้นตั้งชื่อ ไดเรกทอรี่ตามที่ต้องการ แต่การตั้งชื่อมีกฏในการตั้งดังต่อไปนี้

1.1 เพื่อลดความผิดพลาด ควรตั้งชื่อเป็นภาษาอังกฤษ เท่านั้น เช่น "apptest"

1.2 ห้ามตั้งชื่อหรือมี "เว้นวรรค" เป็นส่วนประกอบ เพราะจะทำให้เกิดข้อผิดพลาดได้

1.3 อย่าพยายามใช้สัญลักษณ์ใดๆ

เพียงเท่านี้ก็จะทำให้ข้อผิดพลาดในการสร้างแอพลดน้อยลงไป ได้เยอะมาก

2. หลังจากสร้างไดเรกทอรี่แล้ว กลับเข้ามายัง Dreamweaver จากนั้นกดปุ่ม Site แล้วเลือก Manage Sites... เพื่อจัดการสร้างแอพพลิเคชัน

3. มีช่องให้กรอกข้อมูลอยู่ 2 ช่อง คือ

3.1 Site Name ให้กำหนดชื่อแอพลงไป

3.2 Local Site Folder ให้กำหนดไดเรกทอรีที่แอพจะเก็บข้อมูล

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

4. เลือก File -- > New...

5. จะปรากฏ New Document ขึ้นมา ให้เราเลือกดังต่อไปนี้

5.1 เลือก "Page from Sample"

5.2 Sample Folder เลือก "Mobile Starter"

5.3 Sample Page เลือก "jQuery Mobile with theme (Local)"

5.4 DocType เลือก "HTML5"

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

Author Note.
1. jQuery เป็น Javascript Framework โดยจะใช้เป็นส่วนหนึ่งของแอพ
2. สาเหตุที่เลือก "jQuery Mobile with theme (Local)" เนื่องจาก Dreamweaver จะทำการ copy ข้อมูลของ jQuery เอามาเก็บไว้ในไดเรกทอรี ที่เราได้สร้างขึ้นมา แทนการเรียกใช้ผ่านอินเตอร์เน็ต และทำให้เราสามารถ สร้างแอพได้โดยไม่จำเป็นต้อง ต่ออินเตอร์เน็ตตลอดเวลา

6. หลักจากที่กด Create แล้ว จะพบว่า Dreamweaver นั้นสร้างบางสิ่งบางอย่างขึ้นมาให้เราแก้ไขได้ วิธีการเรียนรู้การใช้งานที่รวดเร็วที่สุดคือ ทดลองแก้ไขข้อมูลของแอพและโค๊ดเท่าที่สามารถทำได้ จากนั้นค่อยๆค้นหาข้อมูลของ ภาษา HTML และทำการทดลองต่อไป

7. ก่อนที่จะทำการแก้ไขข้อมูลใดๆ จำเป็นต้อง Save ข้อมูลตั้งต้นเอาไว้ก่อน เลือก File --> Save As...

8. เลือก ไดเรกทอรีที่ต้องการ Save ไปยังที่ที่เราได้สร้างเอาไว้แล้วตามลำดับขั้นตอนแรกๆ

9. เมื่อกด Save แล้วจะมี Dialog Box แจ้งว่า กำลังจะทำการ Copy ไฟล์ข้อมูลที่เกี่ยวข้องไปเก็บไว้ร่วมกัน ให้ทำการกด Copy แล้วรอซักครู่

10. ขั้นตอนสุดท้าย ตรวจสอบว่า Dreamweaver CS6 แสดงผลการทำงานของแอพได้ เหมาะสมต่อการพัฒนาแอพหรือไม่ วิธีการคือ ให้กดปุ่ม "Split" และ "Live" เพื่อแก้ Code และแสดงผลการทำงานไปด้วย ทำให้สะดวกในการใช้งานไปอีกแบบ จากรูปจะแสดงให้เห็นว่า Code Zone อยู่ทางซ้าย และ การแสดงผลของแอพอยู่ด้านขวา

จุดเริ่มต้นในการสร้างแอพ ไม่ยากอย่างที่คิด ถัดจากนี้ ท่านสามารถสร้างใหม่ได้อีก เป็นร้อยเป็นพันโปรเจค แนะนำว่าให้ทดลองความสามารถของตนว่าจะสามารถแก้ไขแอพได้มากน้อยแค่ไหนจากนั้นจึงศึกษาในสิ่งที่ต้องการทำ