Olga Kitel
4 years ago
committed by
GitHub
commit
18337e0078
@ -0,0 +1,198 @@
|
|||||||
|
# Panimula sa Programming Language at Tools of the Trade
|
||||||
|
|
||||||
|
Sinasaklaw ng araling ito ang mga pangunahing kaalaman sa mga programming language. Ang mga paksang sakop dito ay nalalapat sa karamihan ng mga modernong programming language ngayon. Sa seksyong 'Tools of the Trade', matututunan mo ang tungkol sa kapaki-pakinabang na software na tumutulong sa iyo bilang isang developer.
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Pagsusulit bago ang lektura
|
||||||
|
[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1)
|
||||||
|
|
||||||
|
## Panimula
|
||||||
|
|
||||||
|
Sa araling ito, tatalakayin natin:
|
||||||
|
|
||||||
|
- Ano ang programming?
|
||||||
|
- Mga uri ng programming language
|
||||||
|
- Mga pangunahing elemento ng isang programa
|
||||||
|
- Kapaki-pakinabang na software at tooling para sa propesyonal na developer
|
||||||
|
|
||||||
|
> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
|
||||||
|
|
||||||
|
## Ano ang Programming?
|
||||||
|
|
||||||
|
Ang programming (kilala rin bilang coding) ay ang proseso ng pagsulat ng mga tagubilin sa isang device, gaya ng computer o mobile device. Isinulat namin ang mga tagubiling ito gamit ang isang programming language, na pagkatapos ay binibigyang-kahulugan ng device. Ang mga hanay ng mga tagubiling ito ay maaaring tukuyin ng iba't ibang pangalan, ngunit ang *program*, *computer program*, *application (app)*, at *executable* ay ilang sikat na pangalan.
|
||||||
|
|
||||||
|
Ang *program* ay maaaring maging anumang nakasulat gamit ang code; Ang mga website, laro, at app ng telepono ay mga programa. Bagama't posibleng gumawa ng program nang walang pagsusulat ng code, ang pinagbabatayan na lohika ay binibigyang-kahulugan sa device at ang logic na iyon ay malamang na nakasulat gamit ang code. Ang isang program na *tumatakbo* o *nagpapatupad ng code* ay nagsasagawa ng mga tagubilin. Ang device na kasalukuyang binabasa mo ang araling ito ay nagpapatakbo ng isang programa upang i-print ito sa iyong screen.
|
||||||
|
|
||||||
|
✅ Gumawa ng kaunting pananaliksik: sino ang itinuturing na unang computer programmer sa mundo?
|
||||||
|
|
||||||
|
## Mga Wika sa Programming
|
||||||
|
|
||||||
|
Ang mga programming language ay may pangunahing layunin: para sa mga developer na bumuo ng mga tagubilin para ipadala sa isang device. Ang mga device lang ang makakaintindi ng binary (1s at 0s), at para sa *karamihan* na mga developer, hindi iyon isang napakahusay na paraan para makipag-usap. Ang mga programming language ay isang sasakyan para sa komunikasyon sa pagitan ng mga tao at mga computer.
|
||||||
|
|
||||||
|
Ang mga programming language ay may iba't ibang format at maaaring magsilbi ng iba't ibang layunin. Halimbawa, ang JavaScript ay pangunahing ginagamit para sa mga web application, habang ang Bash ay pangunahing ginagamit para sa mga operating system.
|
||||||
|
|
||||||
|
*Mababang antas ng mga wika* ay karaniwang nangangailangan ng mas kaunting mga hakbang kaysa sa *mataas na antas ng mga wika* para sa isang device upang bigyang-kahulugan ang mga tagubilin. Gayunpaman, ang nagpapasikat sa mga mataas na antas ng wika ay ang kanilang pagiging madaling mabasa at suporta. Ang JavaScript ay itinuturing na isang mataas na antas ng wika.
|
||||||
|
|
||||||
|
Ang sumusunod na code ay naglalarawan ng pagkakaiba sa pagitan ng mataas na antas ng wika na may JavaScript at mababang antas ng wika na may ARM assembly code.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let number = 10
|
||||||
|
let n1 = 0, n2 = 1, nextTerm;
|
||||||
|
|
||||||
|
for (let i = 1; i <= number; i++) {
|
||||||
|
console.log(n1);
|
||||||
|
nextTerm = n1 + n2;
|
||||||
|
n1 = n2;
|
||||||
|
n2 = nextTerm;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```c
|
||||||
|
area ascen,code,readonly
|
||||||
|
entry
|
||||||
|
code32
|
||||||
|
adr r0,thumb+1
|
||||||
|
bx r0
|
||||||
|
code16
|
||||||
|
thumb
|
||||||
|
mov r0,#00
|
||||||
|
sub r0,r0,#01
|
||||||
|
mov r1,#01
|
||||||
|
mov r4,#10
|
||||||
|
ldr r2,=0x40000000
|
||||||
|
back add r0,r1
|
||||||
|
str r0,[r2]
|
||||||
|
add r2,#04
|
||||||
|
mov r3,r0
|
||||||
|
mov r0,r1
|
||||||
|
mov r1,r3
|
||||||
|
sub r4,#01
|
||||||
|
cmp r4,#00
|
||||||
|
bne back
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
|
Maniwala ka man o hindi, *pareho silang gumagawa ng parehong bagay*: pag-print ng Fibonacci sequence hanggang 10.
|
||||||
|
|
||||||
|
✅ Ang Fibonacci sequence ay [tinukoy](https://en.wikipedia.org/wiki/Fibonacci_number) bilang isang hanay ng mga numero na ang bawat numero ay ang kabuuan ng dalawang nauna, simula sa 0 at 1.
|
||||||
|
|
||||||
|
## Mga elemento ng isang programa
|
||||||
|
|
||||||
|
Ang nag-iisang pagtuturo sa isang programa ay tinatawag na *pahayag* at kadalasang magkakaroon ng character o line spacing na nagmamarka kung saan nagtatapos ang pagtuturo, o *nagtatapos*. Nag-iiba-iba ang paraan ng pagwawakas ng isang programa sa bawat wika.
|
||||||
|
|
||||||
|
Karamihan sa mga program ay umaasa sa paggamit ng data mula sa isang user o sa ibang lugar, kung saan ang mga pahayag ay maaaring umasa sa data upang magsagawa ng mga tagubilin. Maaaring baguhin ng data kung paano kumikilos ang isang program, kaya ang mga programming language ay may paraan upang pansamantalang mag-imbak ng data na magagamit sa ibang pagkakataon. Ang data na ito ay tinatawag na *mga variable*. Ang mga variable ay mga pahayag na nagtuturo sa isang device na mag-save ng data sa memorya nito. Ang mga variable sa mga programa ay katulad ng mga nasa algebra, kung saan mayroon silang natatanging pangalan at ang kanilang halaga ay maaaring magbago sa paglipas ng panahon.
|
||||||
|
|
||||||
|
May posibilidad na ang ilang pahayag ay hindi isasagawa ng isang device. Ito ay karaniwang sa pamamagitan ng disenyo kapag isinulat ng developer o hindi sinasadya kapag may nangyaring hindi inaasahang error. Ang ganitong uri ng kontrol ng isang application ay ginagawa itong mas matatag at mapanatili. Karaniwang nangyayari ang mga pagbabagong ito sa kontrol kapag natugunan ang ilang partikular na desisyon. Ang isang karaniwang pahayag sa mga modernong programming language upang kontrolin kung paano pinapatakbo ang isang programa ay ang `if..else` na pahayag.
|
||||||
|
|
||||||
|
✅ Matututo ka pa tungkol sa ganitong uri ng pahayag sa mga susunod na aralin
|
||||||
|
|
||||||
|
## Mga Tool ng Kalakalan
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||||
|
|
||||||
|
> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa tooling
|
||||||
|
|
||||||
|
Sa seksyong ito, matututunan mo ang tungkol sa ilang software na maaari mong makitang lubhang kapaki-pakinabang habang sinisimulan mo ang iyong paglalakbay sa propesyonal na pag-unlad.
|
||||||
|
|
||||||
|
Ang **development environment** ay isang natatanging hanay ng mga tool at feature na madalas gamitin ng developer kapag nagsusulat ng software. Ang ilan sa mga tool na ito ay na-customize para sa isang partikular na pangangailangan ng developer, at maaaring magbago sa paglipas ng panahon kung babaguhin ng developer ang mga priyoridad sa trabaho o personal na mga proyekto, o kapag gumagamit sila ng ibang programming language. Ang mga development environment ay kasing kakaiba ng mga developer na gumagamit ng mga ito.
|
||||||
|
|
||||||
|
### Editors
|
||||||
|
|
||||||
|
Ang isa sa mga pinakamahalagang tool para sa pagbuo ng software ay ang editor. Ang mga editor ay kung saan mo isusulat ang iyong code at kung minsan kung saan mo tatakbo ang iyong code.
|
||||||
|
|
||||||
|
Umaasa ang mga developer sa mga editor para sa ilang karagdagang dahilan:
|
||||||
|
|
||||||
|
- *Debugging* Pagtuklas ng mga bug at error sa pamamagitan ng hakbang sa code, linya sa linya. Ang ilang mga editor ay may mga kakayahan sa pag-debug, o maaaring i-customize at idagdag para sa mga partikular na programming language.
|
||||||
|
- *Syntax highlighting* Nagdaragdag ng mga kulay at pag-format ng teksto sa code, ginagawang mas madaling basahin. Pinapayagan ng karamihan sa mga editor ang naka-customize na pag-highlight ng syntax.
|
||||||
|
- *Extensions and Integrations* Mga karagdagan na dalubhasa para sa mga developer, ng mga developer, para sa access sa mga karagdagang tool na hindi naka-built sa base editor. Halimbawa, kailangan din ng maraming developer ng paraan para idokumento ang kanilang code at ipaliwanag kung paano ito gumagana at mag-i-install ng extension ng spell check upang suriin kung may mga typo. Karamihan sa mga karagdagan na ito ay inilaan para sa paggamit sa loob ng isang partikular na editor, at karamihan sa mga editor ay may kasamang paraan upang maghanap ng mga available na extension.
|
||||||
|
- *Customization* Karamihan sa mga editor ay lubos na napapasadya, at ang bawat developer ay magkakaroon ng kanilang sariling natatanging kapaligiran sa pag-unlad na nababagay sa kanilang mga pangangailangan. Marami rin ang nagpapahintulot sa mga developer na gumawa ng sarili nilang mga extension.
|
||||||
|
|
||||||
|
#### Mga Sikat na Editor at Web Development Extension
|
||||||
|
|
||||||
|
- [Visual Studio Code](https://code.visualstudio.com/)
|
||||||
|
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||||
|
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||||
|
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||||
|
- [Atom](https://atom.io/)
|
||||||
|
- [spell-check](https://atom.io/packages/spell-check)
|
||||||
|
- [teletype](https://atom.io/packages/teletype)
|
||||||
|
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||||
|
|
||||||
|
### Browsers
|
||||||
|
|
||||||
|
Ang isa pang mahalagang tool ay ang browser. Ang mga web developer ay umaasa sa browser upang obserbahan kung paano tumatakbo ang kanilang code sa web, ginagamit din ito upang tingnan ang mga visual na elemento ng isang web page na nakasulat sa editor, tulad ng HTML.
|
||||||
|
|
||||||
|
Maraming browser ang kasama ng *developer tools* (DevTools) na naglalaman ng isang hanay ng mga kapaki-pakinabang na feature at impormasyon para tulungan ang mga developer na mangolekta at makakuha ng mahahalagang insight tungkol sa kanilang application. Halimbawa: Kung ang isang web page ay may mga error, minsan nakakatulong na malaman kung kailan nangyari ang mga ito. Maaaring i-configure ang DevTools sa isang browser upang makuha ang impormasyong ito.
|
||||||
|
|
||||||
|
#### Mga sikat na Browser at DevTools
|
||||||
|
|
||||||
|
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||||
|
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||||
|
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||||
|
|
||||||
|
### Mga Tool sa Command Line
|
||||||
|
|
||||||
|
Mas gusto ng ilang developer ang isang mas kaunting graphical na view para sa kanilang mga pang-araw-araw na gawain at umaasa sa command line para makamit ito. Ang pagbuo ng code ay nangangailangan ng malaking halaga ng pagta-type, at mas gusto ng ilang developer na huwag guluhin ang kanilang daloy sa keyboard at gagamit sila ng mga keyboard shortcut upang magpalit sa pagitan ng mga desktop windows, magtrabaho sa iba't ibang file, at gumamit ng mga tool. Karamihan sa mga gawain ay maaaring kumpletuhin gamit ang isang mouse, ngunit ang isang benepisyo ng paggamit ng command line ay ang maraming maaaring gawin gamit ang command line tool nang hindi nangangailangan ng pagpapalit sa pagitan ng mouse at keyboard. Ang isa pang benepisyo ng command line ay ang mga ito ay maaaring i-configure at maaari mong i-save ang iyong custom na configuration, baguhin ito sa ibang pagkakataon, at i-import din ito sa mga bagong development machine. Dahil natatangi ang mga development environment sa bawat developer, iiwasan ng ilan ang paggamit ng command line, ang ilan ay aasa dito nang buo, at ang ilan ay mas gusto ang paghahalo ng dalawa.
|
||||||
|
|
||||||
|
### Mga Sikat na Opsyon sa Command Line
|
||||||
|
|
||||||
|
Mag-iiba ang mga opsyon para sa command line batay sa operating system na iyong ginagamit.
|
||||||
|
|
||||||
|
*💻 = ay paunang naka-install sa operating system.*
|
||||||
|
|
||||||
|
#### Windows
|
||||||
|
|
||||||
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||||
|
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||||
|
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||||
|
- [mintty](https://mintty.github.io/)
|
||||||
|
|
||||||
|
#### MacOS
|
||||||
|
|
||||||
|
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||||
|
- [iTerm](https://iterm2.com/)
|
||||||
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||||
|
|
||||||
|
#### Linux
|
||||||
|
|
||||||
|
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||||
|
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||||
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||||
|
|
||||||
|
#### Mga sikat na Command Line Tool
|
||||||
|
|
||||||
|
- [Git](https://git-scm.com/) (💻 on most operating systems)
|
||||||
|
- [NPM](https://www.npmjs.com/)
|
||||||
|
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
||||||
|
|
||||||
|
### Documentation
|
||||||
|
|
||||||
|
Kapag ang isang developer ay gustong matuto ng bago, malamang na bumaling sila sa dokumentasyon upang matutunan kung paano ito gamitin. Ang mga developer ay madalas na umaasa sa dokumentasyon upang gabayan sila sa kung paano gamitin nang maayos ang mga tool at wika, at upang makakuha din ng mas malalim na kaalaman sa kung paano ito gumagana.
|
||||||
|
|
||||||
|
#### Popular Documentation sa Web Development
|
||||||
|
|
||||||
|
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, ang mga publisher ng [Firefox](https://www.mozilla.org/firefox/) browser
|
||||||
|
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||||
|
- [Web.dev](https://web.dev), mula sa Google, mga publisher ng [Chrome](https://www.google.com/chrome/)
|
||||||
|
- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para sa [Microsoft Edge](https://www.microsoft.com/edge)
|
||||||
|
|
||||||
|
✅ Magsaliksik: Ngayong alam mo na ang mga pangunahing kaalaman sa kapaligiran ng isang web developer, ihambing at ihambing ito sa kapaligiran ng isang web designer.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Hamon
|
||||||
|
|
||||||
|
Ihambing ang ilang mga programming language. Ano ang ilan sa mga natatanging katangian ng JavaScript vs. Java? Kumusta naman ang COBOL vs. Go?
|
||||||
|
|
||||||
|
## Pagsusulit pagkatapos ng Lektura
|
||||||
|
[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2)
|
||||||
|
|
||||||
|
## Pagsusuri
|
||||||
|
|
||||||
|
Mag-aral nang kaunti sa iba't ibang wika na magagamit ng programmer. Subukang magsulat ng isang linya sa isang wika, at pagkatapos ay gawing muli ito sa dalawang iba pa. Ano ang nalaman mo?
|
||||||
|
|
||||||
|
## Assignment
|
||||||
|
|
||||||
|
[Reading the Docs](assignment.md)
|
||||||
@ -0,0 +1,318 @@
|
|||||||
|
# Panimula sa GitHub
|
||||||
|
|
||||||
|
Sinasaklaw ng araling ito ang mga pangunahing kaalaman ng GitHub, isang platform para mag-host at mamahala ng mga pagbabago sa iyong code.
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Pagsusulit bago ang lektura
|
||||||
|
[Pagsusulit bago ang lektura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3)
|
||||||
|
|
||||||
|
## Panimula
|
||||||
|
|
||||||
|
Sa araling ito, tatalakayin natin ang:
|
||||||
|
|
||||||
|
- pagsubaybay sa gawaing ginagawa mo sa iyong makina
|
||||||
|
- nagtatrabaho sa mga proyekto kasama ang iba
|
||||||
|
- paano mag-ambag sa open source software
|
||||||
|
|
||||||
|
### Mga kinakailangan
|
||||||
|
|
||||||
|
Bago ka magsimula, kakailanganin mong suriin kung naka-install ang Git. Sa uri ng terminal:
|
||||||
|
`git --version`
|
||||||
|
|
||||||
|
Kung hindi naka-install ang Git, [download Git](https://git-scm.com/downloads). Pagkatapos, i-setup ang iyong lokal na profile sa Git sa terminal:
|
||||||
|
* `git config --global user.name "your-name"`
|
||||||
|
* `git config --global user.email "your-email"`
|
||||||
|
|
||||||
|
Upang tingnan kung naka-configure na ang Git maaari kang mag-type:
|
||||||
|
`git config --list`
|
||||||
|
|
||||||
|
Kakailanganin mo rin ang isang GitHub account, isang code editor (tulad ng Visual Studio Code), at kakailanganin mong buksan ang iyong terminal (or: command prompt).
|
||||||
|
|
||||||
|
Mag-navigate sa [github.com](https://github.com/) at gumawa ng account kung hindi mo pa nagagawa, o mag-log in at punan ang iyong profile.
|
||||||
|
|
||||||
|
✅ Ang GitHub ay hindi lamang ang code repository sa mundo; may iba pa, ngunit ang GitHub ang pinakakilala
|
||||||
|
|
||||||
|
### Paghahanda
|
||||||
|
|
||||||
|
Kakailanganin mo ang parehong folder na may proyekto ng code sa iyong lokal na makina (laptop o PC), at isang pampublikong imbakan sa GitHub, na magsisilbing halimbawa kung paano mag-ambag sa mga proyekto ng iba.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Pamamahala ng code
|
||||||
|
|
||||||
|
Sabihin nating mayroon kang lokal na folder na may ilang proyekto ng code at gusto mong simulan ang pagsubaybay sa iyong pag-unlad gamit ang git - ang version control system. Inihambing ng ilang tao ang paggamit ng git sa pagsulat ng love letter sa iyong sarili sa hinaharap. Ang pagbabasa ng iyong mga commit na mensahe mga araw o linggo o buwan mamaya, maaalala mo kung bakit ka gumawa ng desisyon, o "rollback" ng isang pagbabago - iyon ay, kapag sumulat ka ng magagandang "commit messages".
|
||||||
|
|
||||||
|
### Gawain: Gumawa ng repository at mag-commit ng code
|
||||||
|
|
||||||
|
1. **Create repository on GitHub**. Sa GitHub.com, sa tab na mga repositoryo, o mula sa kanang bahagi ng navigation bar, hanapin ang **new repo** pindutan.
|
||||||
|
|
||||||
|
1. Bigyan ng pangalan ang iyong repositoryo (folder).
|
||||||
|
1. Piliin **create repository**.
|
||||||
|
|
||||||
|
1. **Navigate to your working folder**. Sa iyong terminal, lumipat sa folder (kilala rin bilang direktoryo) na gusto mong simulan ang pagsubaybay. Uri:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd [name of your folder]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Initialize a git repository**. Sa uri ng iyong proyekto:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Check status**. Upang suriin ang katayuan ng iyong uri ng imbakan:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git status
|
||||||
|
```
|
||||||
|
|
||||||
|
ang output ay maaaring magmukhang ganito:
|
||||||
|
|
||||||
|
```output
|
||||||
|
Changes not staged for commit:
|
||||||
|
(use "git add <file>..." to update what will be committed)
|
||||||
|
(use "git checkout -- <file>..." to discard changes in working directory)
|
||||||
|
|
||||||
|
modified: file.txt
|
||||||
|
modified: file2.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
Karaniwang ang `git status` Ang command ay nagsasabi sa iyo ng mga bagay tulad ng kung anong mga file ang handa na _save_ sa repo o may mga pagbabago dito na maaaring gusto mong magpatuloy.
|
||||||
|
|
||||||
|
1. **Idagdag ang lahat ng mga file para sa pagsubaybay**
|
||||||
|
Tinatawag din itong staging file/pagdaragdag ng mga file sa staging area.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
```
|
||||||
|
|
||||||
|
The `git add` plus `.` argument indicates that all your files & changes for tracking.
|
||||||
|
|
||||||
|
1. **Magdagdag ng mga napiling file para sa pagsubaybay**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add [file or folder name]
|
||||||
|
```
|
||||||
|
|
||||||
|
Nakakatulong ito sa amin na magdagdag lamang ng mga napiling file sa staging area kapag ayaw naming i-commit ang lahat ng file nang sabay-sabay.
|
||||||
|
|
||||||
|
1. **Alisin ang lahat ng mga file**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git reset
|
||||||
|
```
|
||||||
|
|
||||||
|
Ang command na ito ay tumutulong sa amin na i-unstage ang lahat ng mga file nang sabay-sabay.
|
||||||
|
|
||||||
|
1. **Alisin ang isang partikular na file**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git reset [file or folder name]
|
||||||
|
```
|
||||||
|
|
||||||
|
Tinutulungan kami ng command na ito na i-unstage lang ang isang partikular na file nang sabay-sabay na hindi namin gustong isama para sa susunod na commit.
|
||||||
|
|
||||||
|
1. **Ipagpatuloy ang iyong trabaho**. Sa puntong ito naidagdag mo ang mga file sa isang tinatawag na _staging area_. Isang lugar kung saan sinusubaybayan ng Git ang iyong mga file. Upang gawing permanente ang pagbabago kailangan mong gawin _commit_ ang mga papeles. Upang gawin ito, lumikha ka ng isang _commit_ kasama ang `git commit` atas. A _commit_ kumakatawan sa isang punto ng pag-save sa kasaysayan ng iyong repo. I-type ang sumusunod upang lumikha ng a _commit_:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git commit -m "first commit"
|
||||||
|
```
|
||||||
|
|
||||||
|
Iko-commit nito ang lahat ng iyong file, idinaragdag ang mensaheng "first commit". Para sa mga commit na mensahe sa hinaharap, gugustuhin mong maging mas mapaglarawan sa iyong paglalarawan upang maihatid kung anong uri ng pagbabago ang iyong ginawa.
|
||||||
|
|
||||||
|
1. **Ikonekta ang iyong lokal na Git repo sa GitHub**. Ang isang Git repo ay mabuti sa iyong makina ngunit sa isang punto gusto mong magkaroon ng backup ng iyong mga file sa isang lugar at mag-imbita rin ng ibang mga tao na magtrabaho kasama mo sa iyong repo. Ang isang magandang lugar para gawin ito ay ang GitHub. Tandaan na nakagawa na kami ng repo sa GitHub kaya ang kailangan lang naming gawin ay ikonekta ang aming lokal na Git repo sa GitHub. Ang utos `git remote add` gagawin lang yan. I-type ang sumusunod na command:
|
||||||
|
|
||||||
|
> Tandaan, bago mo i-type ang command pumunta sa iyong GitHub repo page para mahanap ang repository URL. Gagamitin mo ito sa utos sa ibaba. Palitan `repository_name` gamit ang iyong GitHub URL.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git remote add origin https://github.com/username/repository_name.git
|
||||||
|
```
|
||||||
|
|
||||||
|
Lumilikha ito ng isang _remote_, o koneksyon, pinangalanan "origin" na tumuturo sa GitHub repository na ginawa mo kanina.
|
||||||
|
|
||||||
|
1. **Magpadala ng mga lokal na file sa GitHub**. Sa ngayon ay nakagawa ka ng isang _connection_ sa pagitan ng lokal na repo at ng GitHub repo. Ipadala natin ang mga file na ito sa GitHub gamit ang sumusunod na command `git push`, tulad nito:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
Ipinapadala nito ang iyong mga commit sa iyong "pangunahing" branch sa GitHub.
|
||||||
|
|
||||||
|
1. **Upang magdagdag ng higit pang mga pagbabago**. Kung gusto mong magpatuloy sa paggawa ng mga pagbabago at itulak ang mga ito sa GitHub kakailanganin mo lang gamitin ang sumusunod na tatlong utos:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "type your commit message here"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
> Tip, Baka gusto mo ring magpatibay ng isang `.gitignore` file upang maiwasan ang mga file na hindi mo gustong subaybayan mula sa paglabas sa GitHub - tulad ng mga talang iyon na iniimbak mo sa parehong folder ngunit walang lugar sa isang pampublikong imbakan. Makakahanap ka ng mga template para sa `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore).
|
||||||
|
|
||||||
|
#### Mag-commit ng mga mensahe
|
||||||
|
|
||||||
|
Ang isang mahusay na linya ng paksa ng Git commit ay kumukumpleto sa sumusunod na pangungusap:
|
||||||
|
Kung inilapat, gagawin ng commit na ito <your subject line here>
|
||||||
|
|
||||||
|
Para sa paksa gamitin ang pautos, kasalukuyang panahunan: "pagbabago" hindi "binago" o "pagbabago".
|
||||||
|
Tulad ng sa paksa, sa katawan (opsyonal) ay ginagamit din ang imperative, present tense. Dapat isama ng katawan ang motibasyon para sa pagbabago at ihambing ito sa nakaraang pag-uugali. Ipinapaliwanag mo ang `why`, hindi ang `how`.
|
||||||
|
|
||||||
|
✅ Maglaan ng ilang minuto upang mag-surf sa GitHub. Makakahanap ka ba ng talagang mahusay na commit message? Makakahanap ka ba ng talagang minimal? Anong impormasyon sa tingin mo ang pinakamahalaga at kapaki-pakinabang na ihatid sa isang commit message?
|
||||||
|
|
||||||
|
### Gawain: Magtulungan
|
||||||
|
|
||||||
|
Ang pangunahing dahilan ng paglalagay ng mga bagay sa GitHub ay upang gawing posible ang pakikipagtulungan sa ibang mga developer.
|
||||||
|
|
||||||
|
## Paggawa sa mga proyekto kasama ang iba
|
||||||
|
|
||||||
|
Sa iyong imbakan, mag-navigate sa `Insights > Community` upang makita kung paano inihahambing ang iyong proyekto sa mga inirerekomendang pamantayan ng komunidad.
|
||||||
|
|
||||||
|
Narito ang ilang bagay na maaaring mapabuti ang iyong GitHub repo:
|
||||||
|
- **Description**. Nagdagdag ka ba ng paglalarawan para sa iyong proyekto?
|
||||||
|
- **README**. Nagdagdag ka ba ng README? Nagbibigay ang GitHub ng gabay para sa pagsulat ng a [README](https://docs.github.com/articles/about-readmes/).
|
||||||
|
- **Contributing guideline**. Mayroon ba ang iyong proyekto [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/),
|
||||||
|
- **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
|
||||||
|
- **License**. Marahil ang pinakamahalaga, ang [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
|
||||||
|
|
||||||
|
|
||||||
|
Makikinabang ang lahat ng mapagkukunang ito sa pag-onboard ng mga bagong miyembro ng team. At iyon ang karaniwang mga uri ng mga bagay na tinitingnan ng mga bagong kontribyutor bago man lang tingnan ang iyong code, upang malaman kung ang iyong proyekto ay ang tamang lugar para sa kanila na gugulin ang kanilang oras.
|
||||||
|
|
||||||
|
✅ Ang mga file ng README, bagama't nangangailangan sila ng oras upang maghanda, ay kadalasang napapabayaan ng mga abalang tagapangasiwa. Makakahanap ka ba ng isang halimbawa ng isang partikular na naglalarawan? Tandaan: may ilan [tools to help create good READMEs](https://www.makeareadme.com/) na baka gusto mong subukan.
|
||||||
|
|
||||||
|
### Gawain: Pagsamahin ang ilang code
|
||||||
|
|
||||||
|
Ang mga nag-aambag na doc ay tumutulong sa mga tao na mag-ambag sa proyekto. Ipinapaliwanag nito kung anong mga uri ng mga kontribusyon ang iyong hinahanap at kung paano gumagana ang proseso. Ang mga kontribyutor ay kailangang dumaan sa isang serye ng mga hakbang upang makapag-ambag sa iyong repo sa GitHub:
|
||||||
|
|
||||||
|
|
||||||
|
1. **Forking your repo** Malamang na gusto mo ang mga tao _fork_ your project. Ang ibig sabihin ng forking ay paggawa ng replica ng iyong repository sa kanilang profile sa GitHub.
|
||||||
|
1. **Clone**. Mula doon ay i-clone nila ang proyekto sa kanilang lokal na makina.
|
||||||
|
1. **Create a branch**. Gusto mong hilingin sa kanila na lumikha ng isang _branch_ para sa kanilang trabaho.
|
||||||
|
1. **Focus their change on one area**. Hilingin sa mga kontribyutor na ituon ang kanilang mga kontribusyon sa isang bagay sa isang pagkakataon - sa paraang iyon ang mga pagkakataong magagawa mo _merge_ sa kanilang trabaho ay mas mataas. Isipin na magsulat sila ng pag-aayos ng bug, magdagdag ng bagong feature, at mag-update ng ilang pagsubok - paano kung gusto mo, o maaari lang ipatupad ang 2 sa 3, o 1 sa 3 pagbabago?
|
||||||
|
|
||||||
|
✅ Isipin ang isang sitwasyon kung saan ang mga sangay ay partikular na kritikal sa pagsulat at pagpapadala ng magandang code. Anong mga use case ang maiisip mo?
|
||||||
|
|
||||||
|
> Tandaan, maging ang pagbabagong gusto mong makita sa mundo, at lumikha din ng mga sangay para sa iyong sariling gawain. Ang anumang commit na gagawin mo ay gagawin sa branch na kasalukuyan mong kinaroroonan “checked out” sa. Gamitin `git status` para makita kung saang branch yan.
|
||||||
|
|
||||||
|
Dumaan tayo sa isang daloy ng trabaho ng contributor. Ipagpalagay na ang nag-ambag ay mayroon na _forked_ at _cloned_ ang repo para magkaroon sila ng Git repo na handang gawin, sa kanilang lokal na makina:
|
||||||
|
|
||||||
|
1. **Create a branch**. Gamitin ang command `git branch` upang lumikha ng isang sangay na maglalaman ng mga pagbabagong ibig nilang i-ambag:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git branch [branch-name]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Switch to working branch**. Lumipat sa tinukoy na sangay at i-update ang gumaganang direktoryo gamit ang `git checkout`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout [branch-name]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Do work**. Sa puntong ito gusto mong idagdag ang iyong mga pagbabago. Huwag kalimutang sabihin kay Git ang tungkol dito gamit ang mga sumusunod na utos:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "my changes"
|
||||||
|
```
|
||||||
|
|
||||||
|
Siguraduhing bibigyan mo ng magandang pangalan ang iyong commit, para sa iyong kapakanan pati na rin ang maintainer ng repo na tinutulungan mo.
|
||||||
|
|
||||||
|
1. **Combine your work with the `main` branch**. Sa ilang mga punto ay tapos ka nang magtrabaho at gusto mong pagsamahin ang iyong trabaho sa iyong trabaho `main` sangay. Ang `main` maaaring nagbago ang branch samantala kaya siguraduhing i-update mo muna ito sa pinakabago gamit ang mga sumusunod na command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout main
|
||||||
|
git pull
|
||||||
|
```
|
||||||
|
|
||||||
|
Sa puntong ito gusto mong tiyakin na anuman _conflicts_, mga sitwasyon kung saan hindi madali ang Git _combine_ ang mga pagbabago ay nangyayari sa iyong nagtatrabaho na sangay. Samakatuwid, patakbuhin ang sumusunod na mga atas:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout [branch_name]
|
||||||
|
git merge main
|
||||||
|
```
|
||||||
|
|
||||||
|
Dadalhin nito ang lahat ng pagbabago mula sa `main` into your branch and sana matuloy mo na lang. Kung hindi, sasabihin sa iyo ng VS Code kung nasaan ang Git _confused_ at babaguhin mo lang ang mga apektadong file para masabi kung aling content ang pinakatumpak.
|
||||||
|
|
||||||
|
1. **Send your work to GitHub**. Ang pagpapadala ng iyong trabaho sa GitHub ay nangangahulugan ng dalawang bagay. Itulak ang iyong sangay sa iyong repo at pagkatapos ay magbukas ng isang PR, Hiling na Hilahin.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push --set-upstream origin [branch-name]
|
||||||
|
```
|
||||||
|
|
||||||
|
Ang utos sa itaas ay lumilikha ng sangay sa iyong forked repo.
|
||||||
|
|
||||||
|
1. **Open a PR**. Susunod, gusto mong magbukas ng PR. Ginagawa mo iyon sa pamamagitan ng pag-navigate sa forked repo sa GitHub. Makakakita ka ng indikasyon sa GitHub kung saan itatanong nito kung gusto mong lumikha ng bagong PR, i-click mo iyon at dadalhin ka sa isang interface kung saan maaari mong baguhin ang pamagat ng commit message, bigyan ito ng mas angkop na paglalarawan. Ngayon ay makikita ng tagapangasiwa ng repo na iyong tinira ang PR na ito at _fingers crossed_ sila ay pahalagahan at _merge_ your PR. Isa ka na ngayong contributor, yay :)
|
||||||
|
|
||||||
|
1. **Clean up**. Ito ay itinuturing na mabuting kasanayan sa _clean up_ pagkatapos mong matagumpay na pagsamahin ang isang PR. Gusto mong linisin ang iyong lokal na sangay at ang sangay na itinulak mo sa GitHub. Una, tanggalin natin ito nang lokal gamit ang sumusunod na utos:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git branch -d [branch-name]
|
||||||
|
```
|
||||||
|
|
||||||
|
Tiyaking pupunta ka sa pahina ng GitHub para sa susunod na forked repo at alisin ang malayong sangay na itinulak mo lang dito.
|
||||||
|
|
||||||
|
`Pull request` parang silly term kasi gusto mo talagang i-push yung mga pagbabago mo sa project. Ngunit kailangang isaalang-alang ng maintainer (may-ari ng proyekto) o pangunahing koponan ang iyong mga pagbabago bago ito isama sa "pangunahing" sangay ng proyekto, kaya talagang humihiling ka ng desisyon sa pagbabago mula sa isang maintainer.
|
||||||
|
|
||||||
|
Ang pull request ay ang lugar upang paghambingin at pag-usapan ang mga pagkakaibang ipinakilala sa isang sangay na may mga review, komento, pinagsamang pagsubok, at higit pa. Ang isang mahusay na kahilingan sa paghila ay sumusunod sa halos kaparehong mga panuntunan gaya ng isang commit na mensahe. Maaari kang magdagdag ng reference sa isang isyu sa issue tracker, kapag ang iyong trabaho halimbawa ay nag-ayos ng isyu. Ginagawa ito gamit ang a `#` na sinusundan ng bilang ng iyong isyu. Halimbawa `#97`.
|
||||||
|
|
||||||
|
🤞Pinilit na ang lahat ng mga tseke ay pumasa at ang (mga) may-ari ng proyekto ay pinagsama ang iyong mga pagbabago sa proyekto🤞
|
||||||
|
|
||||||
|
I-update ang iyong kasalukuyang lokal na nagtatrabaho na sangay sa lahat ng mga bagong commit mula sa kaukulang remote na sangay sa GitHub:
|
||||||
|
|
||||||
|
`git pull`
|
||||||
|
|
||||||
|
## Paano mag-ambag sa open source
|
||||||
|
|
||||||
|
Una, maghanap tayo ng isang imbakan (o **repo**) sa GitHub ng interes sa iyo at kung saan mo gustong mag-ambag ng pagbabago. Gusto mong kopyahin ang mga nilalaman nito sa iyong makina.
|
||||||
|
|
||||||
|
✅ Ang isang mahusay na paraan upang makahanap ng 'beginner-friendly' repos ay ang [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Mayroong ilang mga paraan ng pagkopya ng code. Ang isang paraan ay ang "i-clone" ang mga nilalaman ng repository, gamit ang HTTPS, SSH, o gamit ang GitHub CLI (Command Line Interface).
|
||||||
|
|
||||||
|
Buksan ang iyong terminal at i-clone ang repositoryo tulad nito:
|
||||||
|
`git clone https://github.com/ProjectURL`
|
||||||
|
|
||||||
|
Upang magtrabaho sa proyekto, lumipat sa kanang folder:
|
||||||
|
`cd ProjectURL`
|
||||||
|
|
||||||
|
Maaari mo ring buksan ang buong proyekto gamit ang [Codespaces](https://github.com/features/codespaces), Ang naka-embed na code editor / cloud development environment ng GitHub, o [GitHub Desktop](https://desktop.github.com/).
|
||||||
|
|
||||||
|
Panghuli, maaari mong i-download ang code sa isang naka-zip na folder.
|
||||||
|
|
||||||
|
### Ilang mas kawili-wiling bagay tungkol sa GitHub
|
||||||
|
|
||||||
|
Maaari mong lagyan ng star, panoorin at/o "i-fork" ang anumang pampublikong repository sa GitHub. Mahahanap mo ang iyong mga naka-star na repository sa kanang tuktok na drop-down na menu. Ito ay tulad ng pag-bookmark, ngunit para sa code.
|
||||||
|
|
||||||
|
Ang mga proyekto ay may tagasubaybay ng isyu, karamihan ay nasa GitHub sa tab na "Issues" maliban kung iba ang ipinahiwatig, kung saan tinatalakay ng mga tao ang mga isyung nauugnay sa proyekto. At ang tab na Pull Requests ay kung saan tinatalakay at sinusuri ng mga tao ang mga pagbabagong kasalukuyang isinasagawa.
|
||||||
|
|
||||||
|
Maaaring magkaroon din ng talakayan ang mga proyekto sa mga forum, mailing list, o mga channel ng chat tulad ng Slack, Discord o IRC.
|
||||||
|
|
||||||
|
✅ Tingnan ang iyong bagong GitHub repo at subukan ang ilang bagay, tulad ng pag-edit ng mga setting, pagdaragdag ng impormasyon sa iyong repo, at paggawa ng proyekto (tulad ng Kanban board). Marami kang magagawa!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Hamon
|
||||||
|
|
||||||
|
Ipares sa isang kaibigan para magtrabaho sa code ng isa't isa. Gumawa ng proyekto nang magkakasama, mag-fork ng code, gumawa ng mga sangay, at magsama ng mga pagbabago.
|
||||||
|
|
||||||
|
## Pagsusulit pagkatapos ng Lektura
|
||||||
|
[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4)
|
||||||
|
|
||||||
|
## Pagsusuri at Sariling pag-aaral
|
||||||
|
|
||||||
|
Magbasa pa tungkol sa [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
|
||||||
|
|
||||||
|
[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||||
|
|
||||||
|
Magsanay, magsanay, magsanay. Ang GitHub ay may mahusay na mga landas sa pag-aaral na magagamit sa pamamagitan ng [lab.github.com](https://lab.github.com/):
|
||||||
|
|
||||||
|
- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||||
|
|
||||||
|
Makakahanap ka rin ng mas advanced na mga lab.
|
||||||
|
|
||||||
|
## Takdang-aralin
|
||||||
|
|
||||||
|
Kumpletuhin [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Pratique seu HTML: Construa uma maquete de blog
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
|
||||||
|
Imagine que você está projetando ou redesenhando seu site pessoal. Crie uma maquete gráfica do seu site e anote a marcação HTML que você usaria para construir os vários elementos do site. Você pode fazer isso no papel e digitalizá-lo ou usar o software de sua escolha, apenas certifique-se de codificar manualmente a marcação HTML.
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
| Critérios | Exemplar | Adequado | Necessidades Melhoria |
|
||||||
|
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||||
|
| | Um layout de blog é representado visualmente com pelo menos 10 elementos de marcação exibidos | Um layout de blog é representado visualmente com cerca de 5 elementos de marcação exibidos | Um layout de blog é representado visualmente com no máximo 3 elementos de marcação exibidos |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Pratique seu HTML: Construa um mockup de blog
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
|
||||||
|
Imagine que você está projetando ou redesenhando seu web site pessoal. Crie um mockup gráfico do seu site e então escreva as marcações HTML que você usaria para construir os vários elementos do site. Você pode fazer isso no papel e digitalizar ou usar o software de sua preferência, apenas tenha certeza de elaborar manualmente a marcação HTML.
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
| Critério | Exemplar | Adequado | Precisa de melhoria |
|
||||||
|
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||||
|
| | Um layout de blog é representado visualmente com pelo menos 10 elementos de marcação HTML exibidos | Um layout de blog é representado visualmente com cerca de 5 elementos de marcação HTML exibidos | Um layout de blog é representado com no máxiom 3 elementos de marcação HTML exibidos |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Refatoração de CSS
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
|
||||||
|
Reestilize seu terrário usando Flexbox ou CSS Grid e faça screenshots para mostrar que você o testou em diversos navegadores. Pode ser necessário modificar a marcação , então, crie uma nova versão da aplicação com a arte pronta para sua refatoração. Não se preocupe em tornar os elementos arrastáveis; Apenas refatore o HTML e o CSS por enquanto.
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
| Criterio | Exemplar | Adequado | Precisa de melhoria |
|
||||||
|
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||||
|
| | Apresente um terrário completamente reestilizado usando Flexbox ou CSS Grid | Reestilize algum dos elementos | Falha ao reestilizar o terrário em tudo |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Trabalhe um pouco mais com a DOM
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
|
||||||
|
Pesquise a DOM um pouco mais 'adotando' um elemento DOM. Visite a [lista de interfaces DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) do MDN e escolha uma. Encontre-o em um web site e escreva uma explicação de como ele é usado.
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
| Criterio | Exemplar | Adequado | Precisa de melhoria |
|
||||||
|
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||||
|
| | A redação do parágrafo é apresentada com exemplo | redação do parágrafo é apresentada sem exemplo | Nenhum texto é apresentado |
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
# Meu Terrário: Um projeto para aprender HTML, CSS, e manipulação DOM usando JavaScript 🌵🌱
|
||||||
|
|
||||||
|
Uma pequena meditação de código de arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode construir uma interface web, esilizá-la, e adiconar uma interação.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Lições
|
||||||
|
|
||||||
|
1. [Introdução à HTML](../1-intro-to-html/translations/README.pt-BR.md)
|
||||||
|
2. [Introdução à CSS](../2-intro-to-css/README.md)
|
||||||
|
3. [Introdução à DOM e fechamentos JS](../3-intro-to-DOM-and-closures/README.md)
|
||||||
|
|
||||||
|
## Créditos
|
||||||
|
|
||||||
|
Escrito com ♥️ por [Jen Looper](https://www.twitter.com/jenlooper)
|
||||||
|
|
||||||
|
O terrário criado via CSS foi inspirado na jarra de vidro de Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
||||||
|
|
||||||
|
A arte do curso foi desenhada à mão por [Jen Looper](http://jenlooper.com) using Procreate.
|
||||||
|
|
||||||
|
## Implante o seu Terrário
|
||||||
|
|
||||||
|
Você pode implantar ou publicar seu terrario na web usando o Azure Static Web Apps.
|
||||||
|
|
||||||
|
1. Fork este repositório
|
||||||
|
|
||||||
|
2. Pressione este botão
|
||||||
|
|
||||||
|
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||||
|
|
||||||
|
3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo ou a raiz de sua base de código como `/ solution`. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório "forkado" que ajudará o serviço de construção de aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL.
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
# Construire un jeu de l'espace - Partie 5 : scores et vies
|
||||||
|
|
||||||
|
## Quiz de pré-lecture
|
||||||
|
|
||||||
|
[Quiz de pré-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=fr)
|
||||||
|
|
||||||
|
Dans cette leçon, vous apprendrez à ajouter des points à un jeu et à calculer des vies.
|
||||||
|
|
||||||
|
## Dessiner du texte à l'écran
|
||||||
|
|
||||||
|
Pour pouvoir afficher un score de jeu à l'écran, vous devez savoir comment placer du texte à l'écran. La réponse est d'utiliser la méthode `fillText()` sur l'objet canvas. Vous pouvez également contrôler d'autres aspects comme la police à utiliser, la couleur du texte et même son alignement (gauche, droite, centre). Vous trouverez ci-dessous du code permettant d'afficher du texte à l'écran.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.textAlign = "right";
|
||||||
|
ctx.fillText("show this on the screen", 0, 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ En savoir plus sur [comment ajouter du texte à un canvas ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), et n'hésitez pas à rendre le vôtre plus sophistiqué !
|
||||||
|
|
||||||
|
## La vie, comme concept de jeu
|
||||||
|
|
||||||
|
Le concept d'avoir une vie dans un jeu n'est qu'un nombre. Dans le contexte d'un jeu spatial, il est courant d'attribuer un ensemble de vies qui sont réduites une par une lorsque votre vaisseau subit des dégâts. C'est bien si vous pouvez montrer une représentation graphique de ceci comme des mini vaisseaux ou des cœurs au lieu d'un nombre.
|
||||||
|
|
||||||
|
## Ce qu'il faut construire
|
||||||
|
|
||||||
|
Ajoutons les éléments suivants à votre jeu :
|
||||||
|
|
||||||
|
- **Score de jeu** : Pour chaque navire ennemi détruit, le héros devrait recevoir quelques points, nous suggérons 100 points par navire. Le score du jeu devrait être affiché en bas à gauche.
|
||||||
|
- **Vie** : Votre navire a trois vies. Vous perdez une vie chaque fois qu'un navire ennemi entre en collision avec vous. Un score de vie devrait être affiché en bas à droite et être composé du graphique suivant [image de vie](solution/assets/life.png).
|
||||||
|
|
||||||
|
## Étapes recommandées
|
||||||
|
|
||||||
|
Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| laserRed.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Vous démarrez votre projet dans le dossier `your_work` en tapant :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse, pour l'instant il devrait afficher le héros et tous les ennemis, et lorsque vous appuyez sur vos flèches gauche et droite, le héros se déplace et peut abattre les ennemis.
|
||||||
|
|
||||||
|
### Ajouter du code
|
||||||
|
|
||||||
|
1. **Copiez les éléments nécessaires** du dossier `solution/assets/` dans le dossier `your-work` ; vous allez ajouter un élément `life.png`. Ajoutez l'image lifeImg à la fonction window.onload :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
lifeImg = await loadTexture("assets/life.png");
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Ajoutez le `lifeImg` à la liste des éléments :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let heroImg,
|
||||||
|
...
|
||||||
|
lifeImg,
|
||||||
|
...
|
||||||
|
eventEmitter = new EventEmitter();
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Ajoutez des variables**. Ajoutez le code qui représente votre score total (0) et les vies restantes (3), affichez ces scores sur un écran.
|
||||||
|
|
||||||
|
3. **Étendre la fonction `updateGameObjects()`**. Étendre la fonction `updateGameObjects()` pour gérer les collisions avec les ennemis :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
enemies.forEach(enemy => {
|
||||||
|
const heroRect = hero.rectFromGameObject();
|
||||||
|
if (intersectRect(heroRect, enemy.rectFromGameObject())) {
|
||||||
|
eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Ajouter `life` et `points`**.
|
||||||
|
1. **Initialiser les variables**. Sous `this.cooldown = 0` dans la classe `Hero` , définissez la vie et les points :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
this.life = 3;
|
||||||
|
this.points = 0;
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Dessinez les variables à l'écran**. Dessinez ces valeurs à l'écran :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function drawLife() {
|
||||||
|
// TODO, 35, 27
|
||||||
|
const START_POS = canvas.width - 180;
|
||||||
|
for(let i=0; i < hero.life; i++ ) {
|
||||||
|
ctx.drawImage(
|
||||||
|
lifeImg,
|
||||||
|
START_POS + (45 * (i+1) ),
|
||||||
|
canvas.height - 37);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPoints() {
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.textAlign = "left";
|
||||||
|
drawText("Points: " + hero.points, 10, canvas.height-20);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawText(message, x, y) {
|
||||||
|
ctx.fillText(message, x, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Ajouter des méthodes à la boucle de jeu**. Assurez-vous d'ajouter ces fonctions à votre fonction window.onload sous `updateGameObjects()`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
drawPoints();
|
||||||
|
drawLife();
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes :
|
||||||
|
|
||||||
|
1. **Pour chaque collision entre héros et ennemis**, retirez une vie.
|
||||||
|
|
||||||
|
Étendez la classe `Hero` pour faire cette suppression:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
decrementLife() {
|
||||||
|
this.life--;
|
||||||
|
if (this.life === 0) {
|
||||||
|
this.dead = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Pour chaque laser qui touche un ennemi**, augmentez le score du jeu de 100 points.
|
||||||
|
|
||||||
|
Étendez la classe Hero pour faire cet ajout :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
incrementPoints() {
|
||||||
|
this.points += 100;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Ajoutez ces fonctions à vos émetteurs d'événements de collision :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||||
|
first.dead = true;
|
||||||
|
second.dead = true;
|
||||||
|
hero.incrementPoints();
|
||||||
|
})
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||||
|
enemy.dead = true;
|
||||||
|
hero.decrementLife();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Faites une petite recherche pour découvrir d'autres jeux créés à l'aide de JavaScript/Canvas. Quels sont leurs points communs ?
|
||||||
|
|
||||||
|
À la fin de ce travail, vous devriez voir les petits vaisseaux de "vie" en bas à droite, les points en bas à gauche, et vous devriez voir votre compte de vie diminuer lorsque vous entrez en collision avec des ennemis et vos points augmenter lorsque vous tirez sur des ennemis. Bien joué ! Votre jeu est presque terminé.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
Votre code est presque complet. Pouvez-vous envisager vos prochaines étapes ?
|
||||||
|
|
||||||
|
## Quiz post-lecture
|
||||||
|
|
||||||
|
[Quiz post-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=fr)
|
||||||
|
|
||||||
|
## Révision et autoformation
|
||||||
|
|
||||||
|
Recherchez des moyens d'incrémenter et de décrémenter les scores et les vies. Il existe des moteurs de jeu intéressants comme [PlayFab](https://playfab.com). Comment l'utilisation de l'un d'eux pourrait-elle améliorer votre jeu ?
|
||||||
|
|
||||||
|
## Travail à faire
|
||||||
|
|
||||||
|
[Construire un jeu de score](assignment.fr.md)
|
||||||
@ -0,0 +1,223 @@
|
|||||||
|
# Construire un jeu de l'espace Partie 6 : Fin et redémarrage
|
||||||
|
|
||||||
|
## Quiz de prélecture
|
||||||
|
|
||||||
|
[Quiz de prélecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=fr)
|
||||||
|
|
||||||
|
Il existe différentes façons d'exprimer une "condition de fin" dans un jeu. C'est à vous, en tant que créateur du jeu, de dire pourquoi le jeu est terminé. Voici quelques raisons, si nous supposons que nous parlons du jeu spatial que vous avez construit jusqu'à présent :
|
||||||
|
|
||||||
|
- **`N`Les navires ennemis ont été détruits** : Si vous divisez un jeu en plusieurs niveaux, il est assez fréquent que vous deviez détruire `N` vaisseaux ennemis pour terminer un niveau.
|
||||||
|
- **Votre navire a été détruit** : Il y a certainement des jeux où vous perdez la partie si votre vaisseau est détruit. Une autre approche commune est que vous avez le concept de vies. Chaque fois que votre vaisseau est détruit, une vie est déduite. Une fois que toutes les vies ont été perdues, vous perdez la partie.
|
||||||
|
- **Vous avez collecté `N` points** : Une autre condition de fin commune est que vous accumuliez des points. La façon dont vous obtenez des points dépend de vous, mais il est assez courant d'attribuer des points à diverses activités comme la destruction d'un navire ennemi ou la collecte d'objets que les objets *laissent tomber* lorsqu'ils sont détruits.
|
||||||
|
- Compléter un niveau** : Cela peut impliquer plusieurs conditions telles que `X` navires ennemis détruits, `Y` points collectés ou peut-être qu'un objet spécifique a été collecté.
|
||||||
|
|
||||||
|
|
||||||
|
## Redémarrage
|
||||||
|
|
||||||
|
Si les gens apprécient votre jeu, ils auront probablement envie d'y rejouer. Lorsque le jeu se termine, quelle qu'en soit la raison, vous devez proposer une alternative pour recommencer.
|
||||||
|
|
||||||
|
✅ Réfléchissez un peu aux conditions dans lesquelles vous constatez qu'une partie se termine, puis à la manière dont vous êtes invité à la reprendre.
|
||||||
|
|
||||||
|
## Ce qu'il faut construire
|
||||||
|
|
||||||
|
Vous allez ajouter ces règles à votre jeu :
|
||||||
|
|
||||||
|
1. **Gagner la partie**. Une fois que tous les navires ennemis ont été détruits, vous gagnez la partie. Affichez en outre une sorte de message de victoire.
|
||||||
|
1. **Démarrer**. Une fois que toutes les vies sont perdues ou que la partie est gagnée, vous devez proposer un moyen de redémarrer la partie. N'oubliez pas ! Vous devrez réinitialiser le jeu et l'état précédent du jeu devra être effacé.
|
||||||
|
|
||||||
|
## Mesures recommandées
|
||||||
|
|
||||||
|
Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| laserRed.png
|
||||||
|
-| life.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Vous démarrez votre projet dans le dossier `your_work` en tapant :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse. Votre jeu devrait être dans un état jouable.
|
||||||
|
|
||||||
|
> astuce : pour éviter les avertissements dans Visual Studio Code, modifiez la fonction `window.onload` pour appeler `gameLoopId` tel quel (sans `let`), et déclarez le gameLoopId en haut du fichier, indépendamment : `let gameLoopId;`
|
||||||
|
|
||||||
|
### Ajouter du code
|
||||||
|
|
||||||
|
1. **Condition de fin de parcours**. Ajoutez du code qui garde la trace du nombre d'ennemis, ou si le vaisseau du héros a été détruit en ajoutant ces deux fonctions :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function isHeroDead() {
|
||||||
|
return hero.life <= 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEnemiesDead() {
|
||||||
|
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||||
|
return enemies.length === 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||||
|
first.dead = true;
|
||||||
|
second.dead = true;
|
||||||
|
hero.incrementPoints();
|
||||||
|
|
||||||
|
if (isEnemiesDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||||
|
enemy.dead = true;
|
||||||
|
hero.decrementLife();
|
||||||
|
if (isHeroDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||||
|
return; // loss before victory
|
||||||
|
}
|
||||||
|
if (isEnemiesDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||||
|
endGame(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||||
|
endGame(false);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constantes :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
GAME_END_LOSS: "GAME_END_LOSS",
|
||||||
|
GAME_END_WIN: "GAME_END_WIN",
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Ajouter le code de redémarrage** code qui redémarre le jeu à la pression d'un bouton sélectionné.
|
||||||
|
|
||||||
|
1. **Écouter la touche pressée `Enter`**. Modifiez l'eventListener de votre fenêtre pour écouter cette pression :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
else if(evt.key === "Enter") {
|
||||||
|
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante de messages :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes :
|
||||||
|
|
||||||
|
1. **Condition de victoire du joueur**. Lorsque tous les navires ennemis sont détruits, affichez un message de victoire.
|
||||||
|
|
||||||
|
1. Tout d'abord, créez une fonction `displayMessage()` :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayMessage(message, color = "red") {
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Créez une fonction `endGame()` :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function endGame(win) {
|
||||||
|
clearInterval(gameLoopId);
|
||||||
|
|
||||||
|
// set a delay so we are sure any paints have finished
|
||||||
|
setTimeout(() => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
if (win) {
|
||||||
|
displayMessage(
|
||||||
|
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||||
|
"green"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
displayMessage(
|
||||||
|
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Logique de redémarrage**. Lorsque toutes les vies sont perdues ou que le joueur a gagné la partie, affichez que le jeu peut être redémarré. En outre, redémarrez le jeu lorsque la touche *redémarrage* est enfoncée (vous pouvez décider quelle touche doit être affectée au redémarrage).
|
||||||
|
|
||||||
|
1. Créez la fonction `resetGame()` :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function resetGame() {
|
||||||
|
if (gameLoopId) {
|
||||||
|
clearInterval(gameLoopId);
|
||||||
|
eventEmitter.clear();
|
||||||
|
initGame();
|
||||||
|
gameLoopId = setInterval(() => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawPoints();
|
||||||
|
drawLife();
|
||||||
|
updateGameObjects();
|
||||||
|
drawGameObjects(ctx);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Ajoutez un appel au `eventEmitter` pour réinitialiser le jeu dans `initGame()`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||||
|
resetGame();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Ajoutez une fonction `clear()` à l'EventEmitter:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
clear() {
|
||||||
|
this.listeners = {};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
👽 💥 🚀 Félicitations, capitaine ! Ton jeu est terminé ! Bien joué ! 🚀 💥 👽
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Défi
|
||||||
|
|
||||||
|
Ajoutez un son ! Pouvez-vous ajouter un son pour améliorer votre jeu, par exemple lorsqu'un laser est touché, ou lorsque le héros meurt ou gagne ? Jetez un coup d'œil à ce [bac à sable](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) pour apprendre à jouer un son en utilisant JavaScript.
|
||||||
|
|
||||||
|
## Quiz post-lecture
|
||||||
|
|
||||||
|
[Quiz post-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=fr)
|
||||||
|
|
||||||
|
## Révision et autoformation
|
||||||
|
|
||||||
|
Votre mission consiste à créer un nouveau jeu type. Explorez donc certains des jeux intéressants qui existent pour voir quel type de jeu vous pourriez créer.
|
||||||
|
|
||||||
|
## Travail à faire
|
||||||
|
|
||||||
|
[Créer un jeu type](assignment.fr.md)
|
||||||
@ -0,0 +1,301 @@
|
|||||||
|
# Créer une application bancaire Partie 2: Créer un formulaire de connexion et d'inscription
|
||||||
|
|
||||||
|
## Quiz préalable
|
||||||
|
|
||||||
|
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/43?loc=fr)
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
Dans presque toutes les applications Web modernes, vous pouvez créer un compte pour avoir votre propre espace privé. Comme plusieurs utilisateurs peuvent accéder à une application Web en même temps, vous avez besoin d'un mécanisme pour stocker les données personnelles de chaque utilisateur séparément et sélectionner les informations à afficher. Nous n'expliquerons pas comment gérer [l'identité de l'utilisateur en toute sécurité](https://en.wikipedia.org/wiki/Authentication) car il s'agit d'un sujet étendu en soi, mais nous veillerons à ce que chaque utilisateur puisse créer un (ou plusieurs) compte bancaire sur notre application.
|
||||||
|
|
||||||
|
Dans cette partie, nous utiliserons des formulaires HTML pour ajouter une connexion et une inscription à notre application Web. Nous verrons comment envoyer les données à une API serveur par programmation, et finalement comment définir des règles de validation de base pour les entrées utilisateur.
|
||||||
|
|
||||||
|
### Prérequis
|
||||||
|
|
||||||
|
Vous devez avoir terminé les [modèles HTML et routage](../../1-template-route/translations/README.fr.md) d'une application Web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org/fr) et [exécuter l'API du serveur](../../api/translations/README.fr.md) localement afin de pouvoir envoyer des données pour créer des comptes.
|
||||||
|
|
||||||
|
**Prenez note**
|
||||||
|
Vous aurez deux terminaux fonctionnant en même temps comme indiqué ci-dessous.
|
||||||
|
1. Pour l'application bancaire principale, nous avons intégré la leçon [Modèles HTML et routage](../../1-template-route/translations/README.fr.md)
|
||||||
|
2. Pour l'[API du serveur Bank APP](../../api/translations/README.fr.md), que nous avons configuré ci-dessus.
|
||||||
|
|
||||||
|
Vous avez besoin que les deux serveurs soient opérationnels pour suivre le reste de la leçon. Ils écoutent sur différents ports (port `3000` et port `5000`) donc tout devrait bien fonctionner.
|
||||||
|
|
||||||
|
Vous pouvez tester que le serveur fonctionne correctement en exécutant cette commande dans un terminal :
|
||||||
|
|
||||||
|
```sh
|
||||||
|
curl http://localhost:5000/api
|
||||||
|
# -> devrait renvoyer "Bank API v1.0.0" comme résultat
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Formulaire et contrôles
|
||||||
|
|
||||||
|
L'élément `<form>` encapsule une section d'un document HTML où l'utilisateur peut saisir et soumettre des données avec des contrôles interactifs. Il existe toutes sortes de contrôles d'interface utilisateur (UI) qui peuvent être utilisés dans un formulaire, les plus courants étant les éléments `<input>` et `<button>`.
|
||||||
|
|
||||||
|
Il existe de nombreux [types](https://developer.mozilla.org/docs/Web/HTML/Element/input) différents de `<input>`, par exemple pour créer un champ où l'utilisateur peut saisir son nom d'utilisateur vous pouvez utiliser:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<input id="username" name="username" type="text">
|
||||||
|
```
|
||||||
|
|
||||||
|
L'attribut `name` sera utilisé comme nom de propriété lorsque les données du formulaire seront envoyées. L'attribut `id` est utilisé pour associer un `<label>` au contrôle de formulaire.
|
||||||
|
|
||||||
|
> Jetez un œil à la liste complète des [types `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) et aux [autres contrôles de formulaire](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) pour avoir une idée de tous les éléments d'interface utilisateur natifs que vous pouvez utiliser lors de la création de votre interface utilisateur.
|
||||||
|
|
||||||
|
✅ Notez que `<input>` est un [élément vide](https://developer.mozilla.org/docs/Glossary/Empty_element) sur lequel vous ne devez *pas* ajouter une balise de fermeture correspondante. Vous pouvez cependant utiliser la notation à fermeture automatique `<input/>`, mais ce n'est pas obligatoire.
|
||||||
|
|
||||||
|
L'élément `<button>` dans un formulaire est un peu spécial. Si vous ne spécifiez pas son attribut `type`, il soumettra automatiquement les données du formulaire au serveur lorsqu'il est pressé. Voici les valeurs de `type` possibles :
|
||||||
|
|
||||||
|
- `submit` : La valeur par défaut dans un `<form>`, le bouton déclenche l'action de soumission du formulaire.
|
||||||
|
- `reset` : Le bouton réinitialise tous les contrôles du formulaire à leurs valeurs initiales.
|
||||||
|
- `button` : n'attribue pas de comportement par défaut lorsque le bouton est enfoncé. Vous pouvez ensuite lui affecter des actions personnalisées à l'aide de JavaScript.
|
||||||
|
|
||||||
|
### Tâche
|
||||||
|
|
||||||
|
Commençons par ajouter un formulaire au modèle `login`. Nous aurons besoin d'un champ *nom d'utilisateur* et d'un bouton *Connexion*.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template id="login">
|
||||||
|
<h1>Bank App</h1>
|
||||||
|
<section>
|
||||||
|
<h2>Login</h2>
|
||||||
|
<form id="loginForm">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input id="username" name="user" type="text">
|
||||||
|
<button>Login</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
Si vous regardez de plus près, vous remarquerez que nous avons également ajouté un élément `<label>` ici. Les éléments `<label>` sont utilisés pour ajouter un nom aux contrôles de l'interface utilisateur, tels que notre champ de nom d'utilisateur. Les étiquettes sont importantes pour la lisibilité de vos formulaires, mais présentent également des avantages supplémentaires :
|
||||||
|
|
||||||
|
- En associant une étiquette à un contrôle de formulaire, il aide les utilisateurs utilisant des technologies d'assistance (comme un lecteur d'écran) à comprendre quelles données ils sont censés fournir.
|
||||||
|
- Vous pouvez cliquer sur l'étiquette pour mettre directement l'accent sur l'entrée associée, ce qui facilite l'accès sur les appareils à écran tactile.
|
||||||
|
|
||||||
|
> [Accessibilité](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) sur le Web est un sujet très important qui est souvent négligé. Grâce aux [éléments HTML sémantiques](https://developer.mozilla.org/docs/Learn/Accessibility/HTML), il n'est pas difficile de créer du contenu accessible si vous les utilisez correctement. Vous pouvez [en savoir plus sur l'accessibilité](https://developer.mozilla.org/docs/Web/Accessibility) pour éviter les erreurs courantes et devenir un développeur responsable.
|
||||||
|
|
||||||
|
Nous allons maintenant ajouter un deuxième formulaire pour l'inscription, juste en dessous du précédent:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<hr/>
|
||||||
|
<h2>Register</h2>
|
||||||
|
<form id="registerForm">
|
||||||
|
<label for="user">Username</label>
|
||||||
|
<input id="user" name="user" type="text">
|
||||||
|
<label for="currency">Currency</label>
|
||||||
|
<input id="currency" name="currency" type="text" value="$">
|
||||||
|
<label for="description">Description</label>
|
||||||
|
<input id="description" name="description" type="text">
|
||||||
|
<label for="balance">Current balance</label>
|
||||||
|
<input id="balance" name="balance" type="number" value="0">
|
||||||
|
<button>Register</button>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
En utilisant l'attribut `value`, nous pouvons définir une valeur par défaut pour une entrée donnée.
|
||||||
|
Notez également que l'entrée pour `balance` a le type `number`. Est-ce que ça a l'air différent des autres entrées ? Essayez d'interagir avec lui.
|
||||||
|
|
||||||
|
✅ Pouvez-vous naviguer et interagir avec les formulaires en utilisant uniquement un clavier ? Comment feriez-vous cela?
|
||||||
|
|
||||||
|
## Soumission des données au serveur
|
||||||
|
|
||||||
|
Maintenant que nous avons une interface utilisateur fonctionnelle, la prochaine étape consiste à envoyer les données à notre serveur. Faisons un test rapide avec notre code actuel : que se passe-t-il si vous cliquez sur le bouton *Connexion* ou *S'inscrire* ?
|
||||||
|
|
||||||
|
Avez-vous remarqué le changement dans la section URL de votre navigateur ?
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
L'action par défaut pour un `<form>` consiste à soumettre le formulaire à l'URL du serveur actuel à l'aide de la [méthode GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3 ), en ajoutant les données du formulaire directement à l'URL. Cette méthode a cependant quelques défauts :
|
||||||
|
|
||||||
|
- Les données envoyées sont de taille très limitée (environ 2000 caractères)
|
||||||
|
- Les données sont directement visibles dans l'URL (pas génial pour les mots de passe)
|
||||||
|
- Cela ne fonctionne pas avec les téléchargements de fichiers
|
||||||
|
|
||||||
|
C'est pourquoi vous pouvez le modifier pour utiliser la [méthode POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) qui envoie les données du formulaire au serveur dans le corps de la requête HTTP, sans aucune des limitations précédentes.
|
||||||
|
|
||||||
|
> Alors que POST est la méthode la plus couramment utilisée pour envoyer des données, [dans certains scénarios spécifiques](https://www.w3.org/2001/tag/doc/whenToUseGet.html) il est préférable d'utiliser la méthode GET, lorsque l'on implémente un champ de recherche par exemple.
|
||||||
|
|
||||||
|
### Tâche
|
||||||
|
|
||||||
|
Ajoutez les propriétés `action` et `method` au formulaire d'inscription :
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
|
||||||
|
```
|
||||||
|
|
||||||
|
Essayez maintenant d'enregistrer un nouveau compte avec votre nom. Après avoir cliqué sur le bouton *S'inscrire*, vous devriez voir quelque chose comme ceci :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Si tout se passe bien, le serveur doit répondre à votre demande avec une réponse [JSON](https://www.json.org/json-fr.html) contenant les données de compte qui ont été créées.
|
||||||
|
|
||||||
|
✅ Essayez de vous enregistrer à nouveau avec le même nom. Que se produit'il?
|
||||||
|
|
||||||
|
## Soumettre des données sans recharger la page
|
||||||
|
|
||||||
|
Comme vous l'avez probablement remarqué, il y a un léger problème avec l'approche que nous venons d'utiliser : lors de la soumission du formulaire, nous sortons de notre application et le navigateur redirige vers l'URL du serveur. Nous essayons d'éviter tous les rechargements de pages avec notre application Web, car nous créons une [Application à page unique (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
|
||||||
|
|
||||||
|
Pour envoyer les données du formulaire au serveur sans forcer le rechargement de la page, nous devons utiliser du code JavaScript. Au lieu de mettre une URL dans la propriété `action` d'un élément `<form>`, vous pouvez utiliser n'importe quel code JavaScript précédé de la chaîne `javascript:` pour effectuer une action personnalisée. L'utiliser signifie également que vous devrez implémenter certaines tâches qui étaient auparavant effectuées automatiquement par le navigateur :
|
||||||
|
|
||||||
|
- Récupérer les données du formulaire
|
||||||
|
- Convertir et encoder les données du formulaire dans un format approprié
|
||||||
|
- Créer la requête HTTP et l'envoyer au serveur
|
||||||
|
|
||||||
|
### Tâche
|
||||||
|
|
||||||
|
Remplacez le formulaire d'inscription `action` par :
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form id="registerForm" action="javascript:register()">
|
||||||
|
```
|
||||||
|
|
||||||
|
Ouvrez `app.js` ajoutez une nouvelle fonction nommée `register` :
|
||||||
|
|
||||||
|
```js
|
||||||
|
function register() {
|
||||||
|
const registerForm = document.getElementById('registerForm');
|
||||||
|
const formData = new FormData(registerForm);
|
||||||
|
const data = Object.fromEntries(formData);
|
||||||
|
const jsonData = JSON.stringify(data);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Ici, nous récupérons l'élément de formulaire à l'aide de `getElementById()` et utilisons l'assistant [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) pour extraire les valeurs des contrôles de formulaire en tant qu'ensemble de paires clé/valeur. Ensuite, nous convertissons les données en un objet normal à l'aide de [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) et enfin sérialisons les données en [JSON](https://www.json.org/json-fr.html), un format couramment utilisé pour échanger des données sur le Web.
|
||||||
|
|
||||||
|
Les données sont maintenant prêtes à être envoyées au serveur. Créez une nouvelle fonction nommée `createAccount` :
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function createAccount(account) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('//localhost:5000/api/accounts', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: account
|
||||||
|
});
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
return { error: error.message || 'Unknown error' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
A quoi sert cette fonction ? Tout d'abord, notez le mot-clé `async` ici. Cela signifie que la fonction contient du code qui s'exécutera [**asynchrone**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Lorsqu'il est utilisé avec le mot-clé `await`, il permet d'attendre l'exécution du code asynchrone - comme attendre la réponse du serveur ici - avant de continuer.
|
||||||
|
|
||||||
|
Voici une vidéo rapide sur l'utilisation de `async/await` :
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async et Await pour la gestion des promesses")
|
||||||
|
|
||||||
|
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur async/await.
|
||||||
|
|
||||||
|
Nous utilisons l'API `fetch()` pour envoyer des données JSON au serveur. Cette méthode prend 2 paramètres :
|
||||||
|
|
||||||
|
- L'URL du serveur, donc on remet `//localhost:5000/api/accounts` à ce niveau.
|
||||||
|
- Les paramètres de la requête. C'est là que nous définissons la méthode sur `POST` et fournissons le `body` de la requête. Comme nous envoyons des données JSON au serveur, nous devons également définir l'en-tête `Content-Type` sur `application/json` afin que le serveur sache comment interpréter le contenu.
|
||||||
|
|
||||||
|
Comme le serveur répondra à la demande avec JSON, nous pouvons utiliser `wait response.json()` pour analyser le contenu JSON et renvoyer l'objet résultant. Notez que cette méthode est asynchrone, nous utilisons donc le mot-clé `await` ici avant de revenir pour nous assurer que toutes les erreurs lors de l'analyse sont également détectées.
|
||||||
|
|
||||||
|
Ajoutez maintenant du code à la fonction `register` pour appeler `createAccount()`:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const result = await createAccount(jsonData);
|
||||||
|
```
|
||||||
|
|
||||||
|
Comme nous utilisons ici le mot-clé `await`, nous devons ajouter le mot-clé `async` avant la fonction register:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function register() {
|
||||||
|
```
|
||||||
|
|
||||||
|
Enfin, ajoutons quelques logs pour vérifier le résultat. La fonction finale devrait ressembler à ceci:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function register() {
|
||||||
|
const registerForm = document.getElementById('registerForm');
|
||||||
|
const formData = new FormData(registerForm);
|
||||||
|
const jsonData = JSON.stringify(Object.fromEntries(formData));
|
||||||
|
const result = await createAccount(jsonData);
|
||||||
|
|
||||||
|
if (result.error) {
|
||||||
|
return console.log('An error occurred:', result.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Account created!', result);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
C'était un peu long mais nous y sommes arrivés ! Si vous ouvrez vos [outils de développement de navigateur](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) et essayez d'enregistrer un nouveau compte, vous ne devriez voir aucun changement sur la page Web, mais un message s'affichera. apparaissent dans la console confirmant que tout fonctionne.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ Pensez-vous que les données sont envoyées au serveur en toute sécurité ? Et si quelqu'un était capable d'intercepter la demande ? Vous pouvez en savoir plus sur [HTTPS](https://fr.wikipedia.org/wiki/HTTPS) pour en savoir plus sur la communication de données sécurisée.
|
||||||
|
|
||||||
|
## La validation des données
|
||||||
|
|
||||||
|
Si vous essayez d'enregistrer un nouveau compte sans définir de nom d'utilisateur au préalable, vous pouvez voir que le serveur renvoie une erreur avec le code d'état [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
|
||||||
|
|
||||||
|
Avant d'envoyer des données à un serveur, il est recommandé de [valider les données du formulaire](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) au préalable lorsque cela est possible, pour vous assurer d'envoyer une demande valide. Les contrôles de formulaires HTML5 fournissent une validation intégrée à l'aide de divers attributs :
|
||||||
|
|
||||||
|
- `required` : le champ doit être rempli sinon le formulaire ne peut pas être soumis.
|
||||||
|
- `minlength` et `maxlength` : définit le nombre minimum et maximum de caractères dans les champs de texte.
|
||||||
|
- `min` et `max` : définit la valeur minimum et maximum d'un champ numérique.
|
||||||
|
- `type` : définit le type de données attendu, comme `numéro`, `e-mail`, `fichier` ou [autres types intégrés](https://developer.mozilla.org/docs/Web/HTML/Element/input). Cet attribut peut également modifier le rendu visuel du contrôle de formulaire.
|
||||||
|
- `pattern` : permet de définir un pattern d'[expression régulière](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) pour tester si les données saisies sont valides ou non.
|
||||||
|
|
||||||
|
> Astuce : vous pouvez personnaliser l'apparence de vos contrôles de formulaire selon qu'ils sont valides ou non en utilisant les pseudo-classes CSS `:valid` et `:invalid`.
|
||||||
|
|
||||||
|
### Tâche
|
||||||
|
|
||||||
|
Il y a 2 champs obligatoires pour créer un nouveau compte valide, le nom d'utilisateur et la devise, les autres champs étant facultatifs. Mettez à jour le code HTML du formulaire, en utilisant à la fois l'attribut `required` et le texte du libellé du champ:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<label for="user">Username (required)</label>
|
||||||
|
<input id="user" name="user" type="text" required>
|
||||||
|
...
|
||||||
|
<label for="currency">Currency (required)</label>
|
||||||
|
<input id="currency" name="currency" type="text" value="$" required>
|
||||||
|
```
|
||||||
|
|
||||||
|
Bien que cette implémentation de serveur particulière n'impose pas de limites spécifiques sur la longueur maximale des champs, il est toujours recommandé de définir des limites raisonnables pour toute entrée de texte utilisateur.
|
||||||
|
|
||||||
|
Ajoutez un attribut `maxlength` aux champs de texte :
|
||||||
|
|
||||||
|
```html
|
||||||
|
<input id="user" name="user" type="text" maxlength="20" required>
|
||||||
|
...
|
||||||
|
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
|
||||||
|
...
|
||||||
|
<input id="description" name="description" type="text" maxlength="100">
|
||||||
|
```
|
||||||
|
|
||||||
|
Maintenant, si vous appuyez sur le bouton *S'inscrire* et qu'un champ ne respecte pas une règle de validation que nous avons définie, vous devriez voir quelque chose comme ceci :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Une validation comme celle-ci effectuée *avant* l'envoi de données au serveur est appelée validation **côté client**. Mais notez qu'il n'est pas toujours possible d'effectuer toutes les vérifications sans envoyer les données. Par exemple, nous ne pouvons pas vérifier ici si un compte existe déjà avec le même nom d'utilisateur sans envoyer de requête au serveur. Une validation supplémentaire effectuée sur le serveur est appelée validation **côté serveur**.
|
||||||
|
|
||||||
|
Généralement, les deux doivent être implémentés, et bien que l'utilisation de la validation côté client améliore l'expérience utilisateur en fournissant un retour instantané à l'utilisateur, la validation côté serveur est cruciale pour s'assurer que les données utilisateur que vous manipulez sont saines et sûres.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
Afficher un message d'erreur dans le code HTML si l'utilisateur existe déjà.
|
||||||
|
|
||||||
|
Voici un exemple de ce à quoi peut ressembler la page de connexion finale après un peu de style :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Quiz de validation des connaissances
|
||||||
|
|
||||||
|
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/44?loc=fr)
|
||||||
|
|
||||||
|
## Révision et étude personnelle
|
||||||
|
|
||||||
|
Les développeurs sont devenus très créatifs dans leurs efforts de création de formulaires, en particulier en ce qui concerne les stratégies de validation. Découvrez les différents flux de formulaires en parcourant [CodePen](https://codepen.com); pouvez-vous trouver des formulaires intéressants et inspirants ?
|
||||||
|
|
||||||
|
## Affectation
|
||||||
|
|
||||||
|
[Concevez votre application bancaire](assignment.fr.md)
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Stylisez votre application bancaire
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Créez un nouveau fichier `styles.css` et ajoutez un lien vers celui-ci dans votre fichier `index.html`. Dans le fichier CSS que vous venez de créer, ajoutez des éléments de style pour que les pages *Login* et *Dashboard* aient un aspect agréable et soigné. Essayez de créer un thème de couleurs pour donner à votre application sa propre image de marque.
|
||||||
|
|
||||||
|
> Conseil : vous pouvez modifier le HTML et ajouter de nouveaux éléments et classes si nécessaire.
|
||||||
|
|
||||||
|
## Rubrique
|
||||||
|
|
||||||
|
| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
|
||||||
|
| -------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||||
|
| | Toutes les pages sont propres et lisibles, avec un thème de couleurs cohérent et les différentes sections se détachant correctement. | Les pages sont stylisées mais sans thème ou avec des sections non clairement délimitées. | Les pages manquent de style, les sections sont désorganisées et les informations sont difficiles à lire. |
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
# :dollar: Créer une banque
|
||||||
|
|
||||||
|
Dans ce projet, vous apprendrez à créer une banque fictive. Ces leçons comprennent des instructions sur la façon de mettre en page une application Web et de fournir des itinéraires, de construire des formulaires, de gérer l'état et de récupérer les données d'une API à partir de laquelle vous pouvez récupérer les données de la banque.
|
||||||
|
|
||||||
|
|  |  |
|
||||||
|
|--------------------------------|--------------------------------|
|
||||||
|
|
||||||
|
## Leçons
|
||||||
|
|
||||||
|
1. [Modèles HTML et itinéraires dans une application Web](../1-template-route/translations/README.fr.md)
|
||||||
|
2. [Créer un formulaire de connexion et d'inscription](../2-forms/translations/README.fr.md)
|
||||||
|
3. [Méthodes d'extraction et d'utilisation des données](../3-data/translations/README.fr.md)
|
||||||
|
4. [Concepts de gestion de l'État](../4-state-management/translations/README.fr.md)
|
||||||
|
|
||||||
|
### Crédits
|
||||||
|
|
||||||
|
Ces leçons ont été rédigées avec :hearts: par [Yohan Lasorsa](https://twitter.com/sinedied).
|
||||||
|
|
||||||
|
Si vous souhaitez apprendre comment créer l'[API serveur](../api/translations/README.fr.md) utilisée dans ces leçons, vous pouvez suivre [cette série de videos](https://aka.ms/NodeBeginner) (en particulier les vidéos 17 à 21).
|
||||||
|
|
||||||
|
Vous pouvez également jeter un coup d'œil à [ce tutoriel d'apprentissage interactif](https://aka.ms/learn/express-api).
|
||||||
|
After Width: | Height: | Size: 6.0 KiB |
@ -0,0 +1,100 @@
|
|||||||
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||||
|
[](http://makeapullrequest.com)
|
||||||
|
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||||
|
|
||||||
|
|
||||||
|
# Web Development para sa mga Nagsisimula - Kurikulum
|
||||||
|
|
||||||
|
Ang Azure Cloud Advocates sa Microsoft ay nalulugod na mag-alok ng 12-linggo, 24-aralin na curriculum tungkol sa JavaScript, CSS, at HTML basics. Kasama sa bawat aralin ang mga pagsusulit bago at pagkatapos ng aralin, nakasulat na mga tagubilin upang makumpleto ang aralin, isang solusyon, isang takdang-aralin at higit pa. Ang aming project-based na pedagogy ay nagbibigay-daan sa iyo na matuto habang nagtatayo, isang napatunayang paraan para sa mga bagong kasanayan.
|
||||||
|
|
||||||
|
**Taos pusong pasasalamat sa aming mga may-akda Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, at sketchnote artist Tomomi Imura!**
|
||||||
|
|
||||||
|
# Simula
|
||||||
|
|
||||||
|
> **Mga Guro**, mayroon kaming [included some suggestions](../for-teachers.md) kung paano gamitin ang curriculum na ito. Gusto namin ang iyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||||
|
|
||||||
|
> **Mga mag-aaral**, para magamit ang curriculum na ito nang mag-isa, i-fork ang buong repo at kumpletuhin ang mga pagsasanay nang mag-isa, simula sa pagsusulit bago ang lecture, pagkatapos ay basahin ang lecture at kumpletuhin ang iba pang aktibidad. Subukang lumikha ng mga proyekto sa pamamagitan ng pag-unawa sa mga aralin sa halip na pagkopya ng code ng solusyon; gayunpaman, ang code na iyon ay magagamit sa mga folder ng /solutions sa bawat aralin na nakatuon sa proyekto. Ang isa pang ideya ay ang bumuo ng isang grupo ng pag-aaral kasama ang mga kaibigan at sabay-sabay na suriin ang nilalaman. Para sa karagdagang pag-aaral, inirerekomenda namin ang [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) and by watching the videos mentioned below.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||||
|
|
||||||
|
> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa proyekto at sa mga taong lumikha nito!
|
||||||
|
|
||||||
|
## Pedagogy
|
||||||
|
|
||||||
|
Pumili kami ng dalawang pedagogical tenets habang binubuo ang curriculum na ito: pagtiyak na ito ay batay sa proyekto at kasama nito ang madalas na mga pagsusulit. Sa pagtatapos ng seryeng ito, makakagawa ang mga mag-aaral ng laro sa pag-type, virtual terrarium, extension ng browser na 'berde', uri ng larong 'space invaders', at banking app na uri ng negosyo, at matututunan nila ang mga pangunahing kaalaman sa JavaScript. , HTML, at CSS kasama ang modernong toolchain ng web developer ngayon.
|
||||||
|
|
||||||
|
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) on Microsoft Learn!
|
||||||
|
|
||||||
|
Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay ginagawang mas nakakaengganyo para sa mga mag-aaral at ang pagpapanatili ng mga konsepto ay madaragdagan. Sumulat din kami ng ilang panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na ipinares sa video mula sa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
|
||||||
|
|
||||||
|
Bilang karagdagan, ang isang mababang-stakes na pagsusulit bago ang isang klase ay nagtatakda ng intensyon ng mag-aaral sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagpapanatili. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12 linggong ikot.
|
||||||
|
|
||||||
|
Bagama't sinadya naming iwasan ang pagpapakilala ng mga balangkas ng JavaScript upang makapag-concentrate sa mga pangunahing kasanayang kailangan bilang isang web developer bago magpatibay ng isang balangkas, isang magandang susunod na hakbang sa pagkumpleto ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||||
|
|
||||||
|
> Hanapin ang aming [Code of Conduct](../CODE_OF_CONDUCT.md), [Contributing](../CONTRIBUTING.md), at [Translation](../TRANSLATIONS.md) mga alituntunin. Tinatanggap namin ang iyong nakabubuo na feedback!
|
||||||
|
>
|
||||||
|
## Kasama sa bawat aralin ang:
|
||||||
|
|
||||||
|
- optional sketchnote
|
||||||
|
- optional supplemental video
|
||||||
|
- pre-lesson warmup quiz
|
||||||
|
- written lesson
|
||||||
|
- for project-based lessons, step-by-step guides on how to build the project
|
||||||
|
- knowledge checks
|
||||||
|
- a challenge
|
||||||
|
- supplemental reading
|
||||||
|
- assignment
|
||||||
|
- post-lesson quiz
|
||||||
|
|
||||||
|
> **Isang tala tungkol sa mga pagsusulit**: Ang lahat ng mga pagsusulit ay nakapaloob [in this app](https://happy-mud-02d95f10f.azurestaticapps.net/), para sa 48 kabuuang pagsusulit ng tatlong tanong bawat isa. Ang mga ito ay naka-link mula sa loob ng mga aralin ngunit ang pagsusulit app ay maaaring patakbuhin nang lokal; sundin ang panuto sa `quiz-app` folder. Unti-unti silang na-localize.
|
||||||
|
|
||||||
|
## Mga aralin
|
||||||
|
|
||||||
|
| | Pangalan ng proyekto | Mga Konseptong Itinuro | Mga Layunin sa pag-aaral | Nakaugnay na Aralin | May-akda |
|
||||||
|
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||||
|
| 01 | Nagsisimula | Panimula sa Programming at Tools of the Trade | Matutunan ang mga pangunahing batayan sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer na gawin ang kanilang mga trabaho | [Panimula sa Programming Languages at Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||||
|
| 02 | Nagsisimula | Ang mga pangunahing kaalaman ng GitHub, kasama ang pakikipagtulungan sa isang team | Paano gamitin ang GitHub sa iyong proyekto, kung paano makipagtulungan sa iba sa isang code base | [Panimula sa GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||||
|
| 03 | Nagsisimula | Accessibility | Alamin ang mga pangunahing kaalaman sa web accessibility | [Mga Pangunahing Kakayahan](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||||
|
| 04 | JS Basics | Mga Uri ng Data ng JavaScript | Ang mga pangunahing kaalaman ng mga uri ng data ng JavaScript | [Uri ng data](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||||
|
| 05 | JS Basics | Mga Kakayahan at Paraan | Matuto tungkol sa mga function at pamamaraan para pamahalaan ang logic flow ng isang application | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||||
|
| 06 | JS Basics | Paggawa ng mga Desisyon sa JS | Matutunan kung paano gumawa ng mga kundisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon | [Paggawa ng mga Desisyon](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||||
|
| 07 | JS Basics | Mga Array at Loop | Makipagtulungan sa data gamit ang mga arrays at loops in JavaScript | [Mga Array at Loop](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||||
|
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML sa Practice | Buuin ang HTML upang lumikha ng isang online na terrarium, na nakatuon sa pagbuo ng isang layout | [Panimula sa HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||||
|
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS sa Practice | Buuin ang CSS upang mai-istilo ang online na terrarium, na tumutuon sa mga pangunahing kaalaman ng CSS kabilang ang paggawa ng page na tumutugon | [Panimula sa CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||||
|
| 10 | [Terrarium](/3-terrarium/solution) | Mga Pagsasara ng JavaScript, pagmamanipula ng DOM | Buuin ang JavaScript upang gawing function ang terrarium bilang isang drag/drop interface, na tumutuon sa mga pagsasara at pagmamanipula ng DOM | [Mga Pagsasara ng JavaScript, pagmamanipula ng DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||||
|
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Matutunan kung paano gumamit ng mga kaganapan sa keyboard upang himukin ang lohika ng iyong JavaScript app | [Programming na Batay sa Kaganapan](/4-typing-game/typing-game/README.md) | Christopher |
|
||||||
|
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Nagtatrabaho sa Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano scaffold ang mga unang elemento ng isang extension ng browser | [Tungkol sa Mga Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||||
|
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Pagbuo ng form, pagtawag ng API at pag-iimbak ng mga variable sa lokal na storage | Buuin ang mga elemento ng JavaScript ng iyong extension ng browser upang tumawag sa isang API gamit ang mga variable na nakaimbak sa lokal na storage | [APIs, Forms, at Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||||
|
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Mga proseso sa background sa browser, pagganap ng web | Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga pag-optimize na gagawin | [Mga Gawain sa Background at Pagganap](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||||
|
| 15 | [Space Game](/6-space-game/solution) | Higit pang Advanced na Pagbuo ng Laro gamit ang JavaScript | Alamin ang tungkol sa Inheritance gamit ang parehong Mga Klase at Komposisyon at ang pattern ng Pub/Sub, bilang paghahanda sa pagbuo ng isang laro | [Panimula sa Advanced na Pagbuo ng Laro](/6-space-game/1-introduction/README.md) | Chris |
|
||||||
|
| 16 | [Space Game](/6-space-game/solution) | Pagguhit sa canvas | Matuto tungkol sa Canvas API, na ginagamit upang gumuhit ng mga elemento sa isang screen | [Pagguhit sa Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||||
|
| 17 | [Space Game](/6-space-game/solution) | Paglipat ng mga elemento sa paligid ng screen | Tuklasin kung paano makakakuha ng paggalaw ang mga elemento gamit ang mga cartesian coordinates at ang Canvas API | [Paglipat ng mga Elemento](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||||
|
| 18 | [Space Game](/6-space-game/solution) | Pagtuklas ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang mga keypress at magbigay ng cooldown function para matiyak ang performance ng laro | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||||
|
| 19 | [Space Game](/6-space-game/solution) | Pagpapanatiling Kalidad | Magsagawa ng mga kalkulasyon sa matematika batay sa katayuan at pagganap ng laro | [Pagpapanatiling Kalidad](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||||
|
| 20 | [Space Game](/6-space-game/solution) | Pagtapos at i-restart ang laro | Matuto tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable na value | [Ang Katapusang Kondisyon](/6-space-game/6-end-condition/README.md) | Chris |
|
||||||
|
| 21 | [Banking App](/7-bank-project/solution) | Mga Template at Ruta ng HTML sa isang Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage na website gamit ang pagruruta at mga HTML na template | [Mga Template at Ruta ng HTML](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||||
|
| 22 | [Banking App](/7-bank-project/solution) | Bumuo ng isang Login at Registration Form | Matuto tungkol sa pagbuo ng mga form at pagbibigay ng mga gawain sa pagpapatunay | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||||
|
| 23 | [Banking App](/7-bank-project/solution) | Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data sa loob at labas ng iyong app, kung paano ito kunin, iimbak, at itapon ito | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||||
|
| 24 | [Banking App](/7-bank-project/solution) | Mga Konsepto ng Pamamahala ng Estado | Alamin kung paano napapanatili ng iyong app ang estado at kung paano ito pamahalaan sa pamamagitan ng program | [Estadong Pamamahala](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||||
|
|
||||||
|
## Offline access
|
||||||
|
|
||||||
|
Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit [Docsify](https://docsify.js.org/#/). i-Fork itong repo, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos ay sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahatid ang website sa port 3000 sa iyong localhost: `localhost:3000`.
|
||||||
|
|
||||||
|
## PDF
|
||||||
|
|
||||||
|
Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](pdf/readme.pdf)
|
||||||
|
|
||||||
|
## Iba pang Kurikulum
|
||||||
|
|
||||||
|
Ang aming team ay gumagawa ng iba pang kurikulum! Tignan:
|
||||||
|
|
||||||
|
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||||
|
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||||
|
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||||
Loading…
Reference in new issue