17/09/2024
ຢາກເກັ່ງ ຢ່າລຶມໃຫ້ອາຫານສະໝອງ ສະໝັກມາຫລາຍໆເດີ ແລ້ວເຈີກັນ.
ມາແລ້ວ ມາແລ້ວ!! ຄອສຮຽນພັດທະນາເວັບໄຊ້ແບບມືອາຊີບ (Full-stack) ໂດຍ ອຈ ທີ່ມີປະສົບການໃນການພັດທະນາເວັບໄຊ້ມາຫລາຍກວ່າ 3 ປີຂຶ້ນໄປ ເຊິ່ງລາຍລະອຽດມີດັ່ງນີ້:
# ມີຫ້ອງຮຽນ, ໂຕ້ະຕັ່ງ, ແອ, ປັກໄຟ ແລະ ໂປຣເຈັກເຕີ ອໍານວຍຄວາມສະດວກໃຫ້
# ສອນຕິດຕັ້ງໂປຣແກມ ແລະ tech-stack ຕ່າງໆທີ່ຕ້ອງໃຊ້ໃນສິດສອນ ແລະ ຮຽນມີຄື: VScode, Postman, Navicate or DBeaver ເປັນຕົ້ນ.
1. Frontend tech-stack:
- NextJS framework: ເປັນ framework ທີ່ຍອດນິຍົມໃນປະຈຸບັນນີ້ພິເສດແມ່ນໃນປະເທດລາວເຮົາກໍາລັງຕ້ອງການຫລາຍເກືອບວ່າທຸກອົງກອນທີ່ໃຊ້.
- Typescript: ແນ່ນອນແລ້ວວ່າບໍ່ສາມາດປະຕິເສດໄດ້ພາສາ Typescript ໄດ້ ຖ້າໃຜໄດ້ດີແມ່ນການຊອກຫາວຽກງ່າຍເລີຍ.
- Redux: ເປັນອີກໜຶ່ງໂຕທີ່ນິຍົມສຸດໆ ໃຊ້ໃນການຈັດການ state ເພື່ອໃຫ້ເວັບໄຊ້ສະຖຽນ ແລະ performance ດີ
- Tailwind CSS: ເປັນອີກ framework ທີ່ຍອດນິຍົມໃນປະຈຸບັນທີ່ນັກພັດທະນາຕ່າງໆບໍ່ສາມາດປະຕິເສດໄດ້ເລີຍ.
- Flowbite.com: ເປັນອີກ UI component ທີ່ຊ່ວຍໃນການອອກແບບເວັບໄຊ້ໃຫ້ໄວ ແລະ ງາມຂຶ້ນຢ່າງຫລາຍເລີຍ.
# ລາຍລະອຽດເນື້ອໃນທີ່ຈະໄດ້ຮຽນສໍາລັບ Frontend:
- ການ Set-up project ຂຶ້ນມາຕັ້ງແຕ່ 0 ແບບທີ່ເຮັດວຽກຕົວຈິງ ແລະ ອະທິບາຍໂຄງສ້າງຂອງ NextJS ຢ່າງລະອຽດ.
- ການວາງ layout ຂອງໂປຣເຈັກ ແລະ ອອກແບບຫນ້າ dashboard ຂຶ້ນມາເອງ
- Authentication: ເຮັດລະບົບ authentication ເຊັ່ນ: sign-in, log-out, sign-up, forgot-password, reset password by email.
- ການອອກແບບໃຫ້ responsive ໂດຍໃຊ້ tailwind css
- ການຈັດການ ແລະ ເຊື່ອມຕໍ່ກັບ API ຈາກ Backend
- ການແຍກ component ແລະ ການ props ຄ່າຕ່າງໆໄປມາລະຫວ່າງ components
- ການນໍາໃຊ້ localStorage ເຊັ່ນ: ເກັບຄ່າໄວ້ ແລະ ດຶງມາໃຊ້ງານ
- ຂຽນ create user, update user, delete user and query users (CRUD)
- ການທົດສອບເລື່ອງ performance ຂອງເວັບໄຊ້ວ່າດີຢູ່ໃນລະດັບເທົ່າໃດ ພ້ອມວິທີການເຮັດໃຫ້ performance ດີຂຶ້ນ.
- ສອນວິທີການ Debug ແລະ ຫາ bug ໃຫ້ໄດ້ໄວ ພ້ອມວິທີແກ້ໄຂແບບມືອາຊິບ
- ສອນການຊື້ໂດເມນ ແລະ ການ deploy ເວັບໄຊ້ຂອງຂຶ້ນເຊີເວີແທ້
2. Backend tech-stack:
- Nest JS framework: ເປັນ Framework ທີ່ກໍາລັງໄດ້ຮັບຄວາມນິຍົມຫລາຍ ແລະ ຕະຫລາດລາວເຮົາກໍ່ຍັງຕ້ອງການຫລາຍແຮງ.
- Typescript: ແນ່ນອນແລ້ວວ່າບໍ່ສາມາດປະຕິເສດໄດ້ພາສາ Typescript ໄດ້ ຖ້າໃຜໄດ້ດີແມ່ນການຊອກຫາວຽກງ່າຍເລີຍ.
- TypeORM: ໃຊ້ໃຫ້ນັກພັດທະນາສາມາດກໍານົດໂມເດວຂອງຖານຂໍ້ມູນເປັນ class typescript ແລະ ສາມາດສ້າງເປັນຕາຕະລາງໃນຖານຂໍ້ມູນໄດ້ເລີຍ.
- REST or Grapql API: ຂຽນ API ເປັນແບບ REST ແລະ Grapqhl ໃດຫນຶ່ງ
- Docker and docker-compose: ເປັນແພັດຟອມທີ່ຊ່ວຍໃຫ້ພັດທະນາ ແລະ run ແອັບພຣີເຄຊັນໃນສະພາບແວດລ້ອມທີ່ເບົາ ແລະ ແຍກຈາກກັນ ທີ່ຊື່ວ່າ: container
# ລາຍລະອຽດເນື້ອໃນທີ່ຈະໄດ້ຮຽນສໍາລັບ Frontend:
- ການ Set-up Nestjs project ຂຶ້ນມາຕັ້ງແຕ່ 0 ແບບທີ່ເຮັດວຽກຕົວຈິງ ແລະ ອະທິບາຍໂຄງສ້າງຂອງ NestJS ຢ່າງລະອຽດ.
- ສອນການວາງໂຄງສ້າງຂອງໂປເຈັກໃຫ້ໄດ້ມາດຕະຖານ ເພື່ອໃຫ້ຈັດການງ່າຍ ແລະ ງ່າຍໃນການ maintainance
- ສອນການອອກແບບຖານຂໍ້ມູນໂດຍໃຊ້ TypeORM, ການ Relations ລະຫວ່າງ Table ຕ່າງໆ.
- ສອນການເຊື່ອມຕໍ່ລະຫວ່າງໂປກເຈັກຂອງ Backend ໄປຫາຖານຂໍ້ມູນ Mysql
- ສອນຄໍາສັ່ງພື້ນຖານຂອງ sql ເຊັ່ນ: insert, update, delete, query, join….
- ອະທິບາຍລາຍລະອຽດກ່ຽວກັບ REST and Graphql API ພັອມທັງສອນຂຽນເປັນຮູບແບບໃດໜຶ່ງ
- ສອນການນໍາໃຊ້ Class validator ເປັນ Library ໜຶ່ງທີ່ໃຊ້ໃນການກວດສອບ Validation ຄ່າທີ່ສົ່ງຈາກ Client to Server ເພື່ອໃຫ້ API ຂອງເຮົາປອດໄພ ແລະ ຍາກຕໍ່ການໂຈມຕີ
- ພາຂຽນ CRUD API: create user, update user, delete user, query users and query user by id.
- ສອນທົດລອງຍິງ API ເບິ່ງວ່າເຮັດວຽກແລ້ວບໍ ໂດຍໃຊ້ APIDog ແລະ ເຮັດ document ເພື່ອສົ່ງມອບໃຫ້ກັບທາງ Frontend.
3. Version control:
- ສອນການນໍາໃຊ້ github ໃນການຈັດການໂຄດ ຮ່ວມກັນໃນທິມ.
- ຄໍາສັ່ງພື້ນຖານຂອງ github ເຊັ່ນ: git add, git commit, git push and git pull…..
- ສອນການນໍາໂປຣເຈັກຂຶ້ນໄປໄວ້ໃນ github ແລະ ການໄປ clone ໂປຣເຈັກມາຈາກ github
4. Deployment:
- ສອນການສະໝັກໃຊ້ cloud server ເຊັ່ນ: AWS ເປັນຕົ້ນ
- ສອນການ install tools ແລະ ເຄື່ອງມືຕ່າງໆທີ່ຕ້ອງການໃຊ້ໃນ VM
- ສອນການ point domain ຂອງເຮົາໃສ່ server
- ສອນການເອົາໂປຮເຈັກ frontend and backend ຂຶ້ນໄປ run ໃນ server
- ສອນການເຮັດ auto-deploy ໂດຍໃຊ້ GitHub Action
ນອກຈາກນັ້ນ, ທ່ານຍັງຈະໄດ້ຮຽນຮູ້ປະສົບການເຮັດວຽກຕົວຈິງຈາກບັນດາອາຈານທີ່ມາສອນ ທີ່ບໍ່ສາມາດຫາໄດ້ໃນຫ້ອງຮຽນ ແລະ ເຊື່ອວ່າຫລັງຈາກທີ່ທ່ານຈົບຄອສຮຽນຂອງພວກເຮົານີ້ທ່ານສາມາດເຮັດບົດຈົບຊັ້ນໄດ້ຢ່າງສະລາຍ ຫລື ສາມາດເຮັດວຽກໄດ້ເລີຍ.
