ปรับใช้แอปพลิเคชันรายการสิ่งที่ต้องทำครั้งแรกของคุณ: 8 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

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

ข่าวดีก็คือการเข้ารหัสนั้นไม่ยาก

กลุ่มเป้าหมาย: บทช่วยสอนนี้มีไว้สำหรับผู้เริ่มต้นที่ต้องการเริ่มต้นอาชีพในการพัฒนาเว็บ มีความเข้าใจในเทคโนโลยีเว็บโดยทั่วไป

สร้างเวลา: 90 นาที

ความยาก: ง่าย.

ขั้นตอนที่ 1: เราจะสร้างอะไร ?

ในตอนท้ายของบทช่วยสอนนี้ เราจะ:

• สร้างเว็บแอปพลิเคชัน To-Do List อย่างง่ายโดยใช้ HTML5
• รวม Bootstrap กับแอพของเราเพื่อเพิ่มรูปลักษณ์ที่ดูดีและรวดเร็ว
• ใช้ไลบรารี JavaScript และ JQuery เพื่อเพิ่มพฤติกรรมแบบไดนามิกให้กับแอปพลิเคชันของเรา
• ปรับใช้แอปพลิเคชันของเราในระบบคลาวด์โดยใช้ Ziet/ตอนนี้

ในการดำเนินการ:

ขั้นตอนที่ 2: บทนำสู่ HTML, Bootstrap, JavaScript & JQuery

HTML คืออะไร?

Hyper Text Markup Language (HTML) ถือได้ว่าเป็น "ภาษาของอินเทอร์เน็ต" HTML เป็นภาษามาร์กอัปมาตรฐานที่ใช้ในการสร้างหน้าเว็บ เดิมทีได้รับการออกแบบมาเพื่อแบ่งปันเอกสารทางวิทยาศาสตร์ การปรับเปลี่ยนให้เป็น HTML ในช่วงหลายปีที่ผ่านมาทำให้เหมาะสมที่จะอธิบายเอกสารประเภทอื่นๆ ที่สามารถแสดงเป็นหน้าเว็บบนอินเทอร์เน็ตได้

ข้อกำหนดเพียงอย่างเดียวที่จำเป็นในการแสดงหน้า HTML คือเว็บเบราว์เซอร์ เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome หรือ Apple Safari

Bootstrap คืออะไร?

Bootstrap เป็นเฟรมเวิร์ก HTML, CSS และ JavaScript ที่ได้รับความนิยมมากที่สุดสำหรับการสร้างเว็บไซต์ที่ตอบสนองและเน้นมือถือเป็นหลัก Bootstrap เป็นโครงการโอเพ่นซอร์สที่พัฒนาโดย Twitter ประกอบด้วยคลาส CSS ที่สามารถนำไปใช้กับองค์ประกอบเพื่อจัดรูปแบบได้อย่างสม่ำเสมอและโค้ด JavaScript ที่ทำการปรับปรุงเพิ่มเติม

JavaScript คืออะไร?

JavaScript เป็นภาษาโปรแกรมที่ใช้สำหรับการเขียนโปรแกรมฝั่งไคลเอ็นต์ในเว็บแอปพลิเคชัน เบราว์เซอร์เรียกใช้โค้ด JavaScript และอนุญาตให้โปรแกรมเมอร์แอปพลิเคชันเว็บสร้างเนื้อหาเว็บแบบไดนามิกได้ เช่น ส่วนประกอบที่แสดงหรือซ่อนแบบไดนามิก เปลี่ยนลักษณะที่ปรากฏ และตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อน

JQuery คืออะไร?

JQuery เป็นไลบรารี JavaScript ที่รวดเร็ว ขนาดเล็ก และเต็มไปด้วยคุณลักษณะ ทำให้สิ่งต่างๆ เช่น การข้ามผ่านเอกสาร HTML และการจัดการ การจัดการเหตุการณ์ แอนิเมชันง่ายขึ้นมาก

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

สำหรับรายละเอียดเพิ่มเติม:

HTML

JavaScript

JQuery

Bootstrap

ขั้นตอนที่ 3: หน้าแรกของคุณด้วย HTML

ขั้นตอนที่ 1: สร้างโฟลเดอร์ใหม่:

mkdir ง่าย todolist

ขั้นตอนที่ 2: สร้างไฟล์ใหม่ภายในโฟลเดอร์ simple-todolist และตั้งชื่อเป็น index.html

cd simple-todolist

แตะ index.html

ขั้นตอนที่ 3: เพิ่มรหัสต่อไปนี้ใน index.html

สิ่งที่ต้องทำ

รายการสิ่งที่ต้องทำของฉัน

ขั้นตอนที่ 4: เปิด index.html บนเบราว์เซอร์ของคุณ

คุณจะเห็นรายการสิ่งที่ต้องทำของฉันปรากฏขึ้น (ดูภาพด้านบน)

ขั้นตอนที่ 4: การเพิ่ม Bootstrap

ในส่วนนี้ เราจะเพิ่มการรองรับ Bootstrap ในหน้า index.html ของเรา เพื่อเพิ่มสไตล์ที่รวดเร็วและดีให้กับแอป To-Do List

หมายเหตุ: ในแอพนี้เราจะใช้ Bootstrap 3 คุณใช้เฟรมเวิร์ก CSS อื่น ๆ เช่น Semantic UI

ขั้นตอนที่ 1: เพิ่มไฟล์ Bootstrap CSS ในแท็กส่วนหัว:

ขั้นตอนที่ 2: เพิ่มไฟล์สคริปต์ Bootstrap และ JQuery CDN ที่ส่วนท้ายของแท็ก body:

ขั้นตอนที่ 3: เปิด index.html บนเบราว์เซอร์ของคุณ

ยินดีด้วย เราเพิ่มการสนับสนุน Bootstrap ให้กับเพจของเราสำเร็จในไม่กี่ขั้นตอน

ขั้นตอนที่ 5: กรอก UI

หลังจากที่เราเพิ่มการสนับสนุน Bootstrap ให้กับแอพของเราเรียบร้อยแล้ว ตอนนี้ ไปต่อและแข่งขันกับ UI (ส่วนต่อประสานผู้ใช้) เพื่อให้ผู้ใช้เพิ่มงานใหม่ รายการสิ่งที่ต้องทำจะสามารถเพิ่มรายการใหม่ลงในรายการ รวมทั้งลบรายการที่มีอยู่ได้

ขั้นตอนที่ 1: เพิ่มรหัสต่อไปนี้ใน index.html

เพิ่มงานใหม่ เพิ่ม ล้างทั้งหมด!

รายการงานของฉัน

ขั้นตอนที่ 2: เปิดไฟล์ index.html บนเบราว์เซอร์ของคุณ

ขั้นตอนที่ 6: การเพิ่มลอจิกไปยังแอพ

เมื่อคุณป้อนชื่องานและคลิกที่ปุ่มเพิ่ม จะไม่มีอะไรเกิดขึ้นในขณะนี้ มาแก้ไขกันเถอะ

เมื่อสิ้นสุดขั้นตอนนี้ เราจะเปลี่ยน index.html ของเราให้เป็นหน้าไดนามิก ดังนั้นหน้าดังกล่าวจะทำหน้าที่โต้ตอบกับผู้ใช้

ขั้นตอนที่ 1: สร้างโฟลเดอร์ใหม่ภายใน simple-todolist ตั้งชื่อเป็น js และตั้งชื่อไฟล์ใหม่เป็น script.js ภายในโฟลเดอร์นั้น:

mkdir js

cd js touch script.js

ขั้นตอนที่ 2: เชื่อมโยง script.js กับ index.html โดยเพิ่มโค้ดต่อไปนี้ที่ส่วนท้ายของแท็ก head:

ขั้นตอนที่ 3: เพิ่มโค้ดต่อไปนี้ลงในไฟล์ script.js

$(เอกสาร).พร้อม(() => {

งาน var = 0 $("#removeAll")).hide(); /* เพิ่มตัวจัดการงานใหม่ */ $("#add")).on("click", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input") val(); if(val !=="") { งาน +=1; var elm =$("

• "); $("#mylist")).append(elem); $("input")).val(""); /* ลบตัวจัดการงานที่ไม่ซ้ำ */ $(".text-right")).on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); task -=1; $(this).parent.remove(); }); /* แสดงปุ่ม removeAll เมื่อเรามีมากกว่า 3 งาน */ if(งาน > 2) { $("#remveAll").show(); } /* removeAll handler */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); tasks = 0; $("#removeAll").hide(); }); } }); });

  หมายเหตุ: คุณสามารถรับโคลนหรือดาวน์โหลดรหัสไปรษณีย์จากที่เก็บ GitHub ของฉัน ซึ่งจะช่วยให้คุณไม่ต้องแตะ

  git clone github.com/ahmnouira/simple-todolist

  ขั้นตอนที่4:ทดสอบรหัส

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

  ขั้นตอนที่ 7: (ไม่บังคับ) ปรับใช้แอป

  

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

  เพื่อให้บรรลุสิ่งนี้ เราจะใช้แพลตฟอร์มคลาวด์ที่เรียกว่า ZEIT Now

  ZEIT คืออะไรตอนนี้ ?

  ZEIt Now เป็นแพลตฟอร์มระบบคลาวด์สำหรับไซต์แบบคงที่และฟังก์ชันไร้เซิร์ฟเวอร์ ช่วยให้นักพัฒนาสามารถโฮสต์เว็บไซต์และบริการเว็บที่ปรับใช้ได้ทันที ทั้งหมดนี้ไม่มีการกำหนดค่าใดๆ

  1. ติดตั้งทันที CLI

  ในการปรับใช้กับ ZEIT Now คุณจะต้องติดตั้ง Now CLI

  สำคัญ: ต้องแน่ใจว่าคุณติดตั้ง npm แล้ว

  npm -v # ตรวจสอบว่า npm ติดตั้งหรือไม่

  npm install -g now@latest # ติดตั้งเวอร์ชันล่าสุดของ Now CLI ทั่วโลกตอนนี้ -v # chech หากติดตั้ง Now CLI แล้วและพิมพ์เวอร์ชันนั้น

  2. ปรับใช้

  สิ่งที่คุณต้องทำคือย้ายไปยังไดเร็กทอรีแล้วปรับใช้แอปของคุณด้วยคำสั่งเดียว:

  ตอนนี้ --prod # ปรับใช้แอป

  เมื่อปรับใช้แล้ว คุณจะได้รับ URL แสดงตัวอย่างที่กำหนดในการปรับใช้แต่ละครั้งเพื่อแชร์การเปลี่ยนแปลงล่าสุดภายใต้ที่อยู่

  แอพของฉัน:

  ขั้นตอนที่ 8: สรุป

  นั่นคือทั้งหมดที่มีให้ !

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

  หากต้องการดูผลงานของฉันเพิ่มเติม โปรดไปที่โอเพ่นซอร์สของฉันที่ GitHub

  มายยูทูบ

  myLinkedIn

  ขอบคุณที่มีเวลาอ่านคำแนะนำของฉัน ^^

  ขอให้เป็นวันที่ดี.

  อาเหม็ด นูอิรา