web developer roadmap

แผนงานของนักพัฒนาเว็บ

Roadmap นักพัฒนาเว็บเป็นเส้นทางการเรียนรู้ที่จะเข้าใจการพัฒนาเว็บรวมถึงส่วนหน้าแบ็กเอนด์และคลาวด์ (AWS)

จะเรียนรู้การพัฒนาเว็บได้อย่างไร?

การพัฒนาเว็บสามารถแบ่งออกเป็นสี่ส่วนที่แตกต่างกัน

1. ฐานข้อมูล
2. แบ็กเอนด์
3. ส่วนหน้า
4. คลาวด์ (เซิร์ฟเวอร์)

แผนงานนี้ประกอบด้วยเทคโนโลยี/เฟรมเวิร์กที่ใช้กันอย่างแพร่หลายสำหรับส่วนหน้าและแบ็กเอนด์ นอกจากนี้ยังมีภาพรวมเกี่ยวกับ Cloud (AWS) และข้อมูลบางอย่างเกี่ยวกับเซิร์ฟเวอร์

สารบัญ

• Sprint 1 - คำสั่ง Linux พื้นฐานการควบคุมเวอร์ชันเทคโนโลยีเว็บและการประชุมการเขียนโค้ด
• Sprint 2 - Docker ฐานข้อมูลและ PHP
• Sprint 3 - Golang
• Sprint 4 - node.js
• Sprint 5 - vue.js
• Sprint 6 - แนวคิดที่มีประโยชน์

Sprint 1 - คำสั่ง Linux พื้นฐานการควบคุมเวอร์ชันเทคโนโลยีเว็บและการประชุมการเขียนโค้ด

ภาคปฏิบัติ 1.1 - คำสั่งพื้นฐานและการควบคุมเวอร์ชัน

• เขียนคำสั่งสำหรับการดำเนินการต่อไปนี้ในเทอร์มินัล

  • แสดงรายการไฟล์ทั้งหมดพร้อมรายละเอียดในไดเรกทอรี
  • ให้สิทธิ์อ่านเฉพาะไฟล์ใด ๆ
  • ให้สิทธิ์การอ่านและเขียนทั้งหมดในไฟล์ใด ๆ
  • รับที่อยู่ IP ของพีซีของตัวเอง
  • สังเกตการใช้พื้นที่ดิสก์
  • ดูประวัติคำสั่งที่ดำเนินการก่อนหน้านี้
  • คำสั่ง Linux เพื่อติดตั้ง/ถอนการติดตั้ง PHP
  • คำสั่ง linux เพื่อเริ่ม/หยุดบริการ mysql
  • เขียนและบันทึกไฟล์ใด ๆ จากเทอร์มินัล

• ดำเนินการต่อไปนี้ใน Gitlab

  • สร้างที่เก็บเป็น Gitlab
  • ตรวจสอบสถานะ GIT ของที่เก็บข้อมูล
  • ส่งไฟล์ใหม่/อัปเดตลงในที่เก็บ Git
  • ผลักในที่เก็บ Git
  • ดึงการเปลี่ยนแปลงใหม่จากที่เก็บ
  • เช็คเอาต์สาขาใหม่
  • ผสานสาขาเป็นอีกสาขาหนึ่ง
  • รีดและสควอช
  • สร้างคำขอผสาน
  • เขียนคำสั่งเพื่อโคลน repo นี้

การอ้างอิง

• คำสั่ง Linux พื้นฐาน

• รุ่นควบคุมคืออะไร?

• วิธีใช้ Git

  • การควบคุมเวอร์ชันด้วย Git
  • Git: คู่มือผู้เริ่มต้นเพื่อทำความเข้าใจแนวคิดการควบคุมเวอร์ชันหลัก
  • คำสั่ง git

ภาคปฏิบัติ 1.2 - เทคโนโลยีเว็บขั้นพื้นฐานพร้อมการประชุมการเข้ารหัส

• การออกแบบ UI พร้อมมาตรฐานการเข้ารหัส
  • ออกแบบ UI แบบคงที่ที่ให้ไว้ในลิงค์
  • การออกแบบที่ตอบสนอง UI ที่ให้ไว้ในลิงค์

การอ้างอิง

• HTML5

  • หลักสูตรการพัฒนาเว็บ bootcamp บน Udemy - ส่วนที่ 2 และ 3
  • HTML พื้นฐานและ HTML5 จากค่ายรหัสฟรี

• CSS3

  • หลักสูตรการพัฒนาเว็บ bootcamp บน Udemy - ส่วนที่ 4 และ 5
  • Bootstrap จากหลักสูตรการพัฒนาเว็บ Bootcamp บน Udemy - ส่วนที่ 6 และ 8
  • FlexBox คืออะไร?
  • bootstrap จากห้องสมุด frontend ในค่ายรหัสฟรี
  • จบหลักสูตรการรับรองการออกแบบเว็บที่ตอบสนองได้จากค่ายรหัสฟรี

• การจัดรูปแบบรหัสและแนวทางปฏิบัติที่ดีที่สุด

  • 25 ทางลัดรหัส VS ที่ใช้มากที่สุด
  • การจัดรูปแบบรหัสในรหัส VS
  • การพัฒนาเว็บแนวทางปฏิบัติที่ดีที่สุด

จริง 1.3

• เครื่องแปลงหน่วย
  • สร้างตัวแปลงหน่วยที่ควรรับอินพุตจากผู้ใช้และส่งออกค่าในหน่วยที่ถาม (หน่วยการแปลงสามารถเป็นเซนติเมตรเมตรและกิโลเมตร)

การอ้างอิง

• JavaScript & JQuery

  • JavaScript พื้นฐานจากหลักสูตรการพัฒนาเว็บ Bootcamp บน Udemy - ส่วนที่ 9 และ 10
  • JavaScript พื้นฐาน, ES6, การแสดงออกปกติและการดีบักจากค่ายรหัสฟรี
  • หลักสูตรการพัฒนาเว็บ bootcamp บน Udemy - ส่วนที่ 11 และ 13
  • JSON, APIS และ AJAX จากค่ายรหัสฟรี
  • เสร็จสิ้นอัลกอริทึม JavaScript และโครงสร้างข้อมูลจากค่ายรหัสฟรี
  • หลักสูตรการพัฒนาเว็บ bootcamp บน Udemy - ส่วนที่ 14 ถึง 16
  • เสร็จสิ้นโครงการห้องสมุดส่วนหน้าจากค่ายรหัสฟรี
  • ความแตกต่างระหว่าง == และ ===
  • พื้นฐานของ jQuery

• การเขียนโค้ด

  • มาตรฐานการเข้ารหัส -1
  • มาตรฐานการเข้ารหัส 2

Sprint 2 - Docker ฐานข้อมูลและ PHP

จริง 2.1

• ติดตั้ง MySQL โดยใช้ Docker
• ติดตั้ง MongoDB โดยใช้ Docker

การอ้างอิง

• นักเทียบท่าคืออะไร
• เริ่มต้นด้วย Docker
• ติดตั้ง MySQL โดยใช้ Docker
• ติดตั้ง MongoDB โดยใช้ Docker

จริง 2.2

• ดำเนินการต่อไปนี้ใน mysql

  • สร้างตารางที่ชื่อ students ด้วยฟิลด์ ID, First_name, Last_name, มาตรฐาน, เปอร์เซ็นต์, ความสนใจ ฯลฯ ... และแทรกข้อมูลลงไป
  • สร้าง table student_attendances ด้วยฟิลด์ ID, created_at, ฟิลด์สถานะ/ขาดและแทรกข้อมูลลงไปในนั้น
  • สร้างตารางที่ชื่อ teachers ที่มีฟิลด์ ID, first_name, last_name, หัวเรื่อง, ความสนใจ ฯลฯ ... และแทรกข้อมูลลงไป
  • สร้าง Table teachers_attendances ด้วย Fields ID, Created_at, Field, Presence/Afsence Field และแทรกข้อมูลลงไปในนั้น
  • จัดทำแบบสอบถามเพื่อค้นหาการมีอยู่/ขาดงานของนักเรียนในวันใดวันหนึ่ง
  • ค้นหาการขาดงานทั้งหมด/การปรากฏตัวของนักเรียนทุกคน
  • ค้นหานักเรียนที่ขาดงานที่มีเปอร์เซ็นต์ต่ำกว่า 70 เปอร์เซ็นต์
  • ค้นหานักเรียนที่มีสถานะ higest
  • รับ First_name ของนักเรียนและครูทั้งหมด, Last_name, full_name, ความสนใจ, มาตรฐาน, หัวเรื่องและการขาดงานทั้งหมด

• ทำการสืบค้นต่อไปนี้ใน MongoDB (สามารถใช้ MongoDbplayground เพื่อค้นหา Peform)

  • สร้างคอลเลกชันที่มีชื่อ students ด้วยฟิลด์ ID, First_name, Last_name, มาตรฐาน, เปอร์เซ็นต์, ความสนใจ, ฯลฯ ... และแทรกข้อมูลลงไป
  • สร้างแบบสอบถามเพื่อค้นหานักเรียนที่มีเปอร์เซ็นต์ต่ำกว่า 70 และความสนใจในการเล่นกีฬา
  • นับจำนวนนักเรียนทั้งหมดด้วยเปอร์เซ็นต์สูงกว่า 70

การอ้างอิง

• หลักสูตรการพัฒนาเว็บ bootcamp หลักสูตร Udemy - ส่วนที่ 24 และ 25
• QUADUERY และ QUARY ของ MYSQL

จริง 2.3

• สร้างแอปพลิเคชันบล็อกที่มีข้อกำหนดต่อไปนี้โดยใช้ PHP
  • ควรมีสองด้าน
    • 1. ผู้ดูแลระบบ
    • 2. ผู้ใช้
  • ใช้ฟังก์ชันการลงทะเบียนและเข้าสู่ระบบสำหรับทั้งผู้ใช้และผู้ดูแลระบบ
  • ผู้ดูแลระบบสามารถเพิ่มโพสต์ (ฟิลด์โพสต์ - ชื่อ, คำอธิบาย, created_date, ผู้แต่ง, หมวดหมู่, รูปภาพ)
  • ผู้ดูแลระบบสามารถตัดสินใจได้ว่าผู้ใช้รายใดสามารถดูโพสต์ได้
  • โพสต์ที่เพิ่มจะมองเห็นได้ทางด้านผู้ใช้ (ล่าสุดก่อน)

การอ้างอิง

• PHP: การอ้างอิงภาษา
• PHP: บทนำ
• มาตรฐานการเข้ารหัส

แนวคิดพื้นฐาน

• การติดตั้ง WAMP/MAMP/XAMPP
• มันใช้งานได้อย่างไร?
• ไวยากรณ์พื้นฐาน
• ตัวแปรค่าคงที่ผู้ประกอบการและโครงสร้างการควบคุม
• เงื่อนไขลูปกรณีสวิตช์
• อาร์เรย์สตริงและฟังก์ชั่นสตริงต่างๆ
• ฟังก์ชั่น
• รวมและจำเป็น
• คลาสและวัตถุและตัวสร้าง
• เนมสเปซ
• ส่วนขยาย
• ข้อยกเว้น
• JSON ENCODE & DECODE
• การประชุม
• คุกกี้
• การจัดการไฟล์
• อาร์เรย์ที่จัดทำดัชนีกับอาร์เรย์เชื่อมโยง
• วัตถุเทียบกับ stdobject
• หมดเวลาของสคริปต์ PHP

ตัวแปรที่กำหนดไว้ล่วงหน้า

• http://php.net/manual/en/reserved.variables.php
• $ ทั่วโลก
• $ _Server
• $ _get
• $ _post
• $ _files
• $ _request
• $ _session
• $ _cookie

ตัวเลือกขั้นสูง

• การเชื่อมต่อ
• ลักษณะ
• เจ้าเล่ห์
• นักแต่งเพลง
• php.ini tweaks

คำสำคัญ

• ส่วนตัว
• สาธารณะ
• คงที่

Sprint 3 - Golang

จริง 3.1

• ใช้แอพเพลงที่มีข้อกำหนดที่กำหนด

แนวคิดพื้นฐาน

• ทำไมต้องไป?

• เรียกใช้โปรแกรม Hello World In In Go

• ไปโมดูล

• เฟรมเวิร์กจิน

• ค่าคงที่ประเภทตัวแปร

• ฟังก์ชั่น, ฟังก์ชั่นการส่งคืนแบบหลายรายการ, init ()

• แพ็คเกจและนำเข้า

• คำแถลงและลูปแบบมีเงื่อนไข

• อาร์เรย์และชิ้น

• พอยน์เตอร์โครงสร้างและวิธีการ

• การจัดการข้อผิดพลาด

• Gofmt

• แนวปฏิบัติที่ดีที่สุด

• คนอื่น

  • JWT
  • JSON
  • REST API

แนวคิดล่วงหน้า

• แผนที่ใน GO
• พร้อมกันและ goroutine
• เลื่อนลอย
• การจัดการข้อผิดพลาด
• ตื่นตระหนกและฟื้นตัว
• การสะท้อนกลับ
• พิมพ์แปลง
• การจัดการไฟล์
• การตัดไม้
• การรับรองความถูกต้องด้วย JWT (JSON Web Token)

แพ็คเกจ

• จิน
• แพ็คเกจ mysql
• สุทธิ/http
• คอมเพรสเซอร์ไฟล์
• การตัดไม้
• MongoDB
• ioutil
• ระบบปฏิบัติการ
• สาย
• แยกวิเคราะห์ไฟล์คงที่เป็นไบนารี
• ตัวจัดการค่าว่าง
• JWT
• ซ็อกเก็ต
• ทหารยาม

Sprint 4 - node.js

จริง 4.1

• ใช้แอปพลิเคชันการแชทแบบเรียลไทม์แบบเรียลไทม์

จริง 4.2

• ใช้แอพอีคอมเมิร์ซที่มีข้อกำหนดที่กำหนด

การอ้างอิง

• เส้นด้าย

• NPM

• เส้นด้ายเทียบกับ NPM

• โหนด

• ทำไม Node.js?

• แนวคิดพื้นฐาน:

  • CommonJs และ Esmodule
  • ปลอบประโลม
  • ขอบเขต
  • คำหลัก 'นี้' ส่วนที่ 1
  • คำหลัก 'นี้' ส่วนที่ 2
  • เข้าใจแพ็คเกจ. json
  • จำเป็นต้องนำเข้า/ส่งออก
  • การโทรกลับ
  • Async-Await
  • async.waterfall ()
  • ผู้อ้างอิง
  • ลูปเหตุการณ์
  • Node Mailer เพื่อส่งอีเมล
  • แนวทางปฏิบัติที่ดีที่สุด

• Express.js

  • การติดตั้ง
  • เครื่องกำเนิดไฟฟ้าด่วน
  • การกำหนดเส้นทาง
  • โฮสต์ไฟล์คงที่
  • เทมเพลตเอ็นจิ้น (EJS)
  • ตัวแยกวิเคราะห์ร่างกาย

Sprint 5 - vue.js

ใช้งานได้จริง 5.1

• ใช้แอพส่วนหน้าของ Ecommerce โดยใช้ vue.js กับข้อกำหนดที่กำหนด

การอ้างอิง

• เริ่มต้นด้วย vue.js

• Tailwind CSS สำหรับผู้เริ่มต้น

• Tailwind CSS Tutorial

• ปิเนีย

• แนวคิด

  • vue.js คืออะไร?
  • เริ่มต้น
  • การติดตั้ง
  • อินสแตนซ์แอปพลิเคชันและส่วนประกอบ
  • ไวยากรณ์เทมเพลต
  • คุณสมบัติและวิธีการข้อมูล
  • คุณสมบัติและผู้เฝ้าดูที่คำนวณได้
  • การผูกคลาสและสไตล์
  • การเรนเดอร์แบบมีเงื่อนไขการผูกสไตล์เงื่อนไข
  • แสดงรายการการแสดงผล
  • การจัดการเหตุการณ์
  • แบบฟอร์มการผูกอินพุต
  • ส่วนประกอบพื้นฐาน
  • อุปกรณ์ประกอบฉาก
  • การลงทะเบียนส่วนประกอบ
  • ช่องเสียบ
  • แม่แบบอ้างอิง
  • การจัดการรัฐ

Sprint 6 - แนวคิดที่มีประโยชน์

แนวคิด

• โปรโตคอล HTTP
• พฤติกรรมแบบอะซิงโครนัสกับซิงโครนัส
• การแคช (ความเข้าใจของ Redis)
• การทดสอบ: ภาพรวมการทดสอบหน่วยและคุณสมบัติ
• Docker ในรายละเอียด
• Nginx vs Apache Server
• เข้าสู่ระบบเซิร์ฟเวอร์ด้วยรหัสผ่าน/SSH
• ตาราง IP
• PHP-FPM และ HTTPD
• SSH, SSL, ใบรับรองและกุญแจ

คลาวด์

• AWS คืออะไร?
• S3
• EC2
• RDS
• ความยืดหยุ่น
• เส้นทาง 53
• SES
• Cloudwatch
• VPC
• aws lamda
• เกตเวย์ AWS API
• Microservices
• Microservices คืออะไร? AWS ใช้งานได้อย่างไร?
• การใช้งาน Microservices โดยใช้ GO

เพิ่มเติม

• Golang Roadmap
• Nodejs Roadmap