diff --git a/translated_images/1.b6da8c1394b07491.et.png b/translated_images/1.b6da8c1394b07491.et.png new file mode 100644 index 00000000..4d5d810b Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.et.png differ diff --git a/translated_images/1.b6da8c1394b07491.kn.png b/translated_images/1.b6da8c1394b07491.kn.png new file mode 100644 index 00000000..c227e01a Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.kn.png differ diff --git a/translated_images/1.b6da8c1394b07491.ml.png b/translated_images/1.b6da8c1394b07491.ml.png new file mode 100644 index 00000000..d3c812d4 Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.ml.png differ diff --git a/translated_images/1.b6da8c1394b07491.pcm.png b/translated_images/1.b6da8c1394b07491.pcm.png new file mode 100644 index 00000000..7867db15 Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.pcm.png differ diff --git a/translated_images/1.b6da8c1394b07491.te.png b/translated_images/1.b6da8c1394b07491.te.png new file mode 100644 index 00000000..e7875615 Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.te.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.et.png b/translated_images/1.cc07a5cbe114ad1d.et.png new file mode 100644 index 00000000..b7d8464f Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.et.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.kn.png b/translated_images/1.cc07a5cbe114ad1d.kn.png new file mode 100644 index 00000000..20debb65 Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.kn.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.ml.png b/translated_images/1.cc07a5cbe114ad1d.ml.png new file mode 100644 index 00000000..956337f2 Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.ml.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.pcm.png b/translated_images/1.cc07a5cbe114ad1d.pcm.png new file mode 100644 index 00000000..4c70170f Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.pcm.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.te.png b/translated_images/1.cc07a5cbe114ad1d.te.png new file mode 100644 index 00000000..cfe3982b Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.te.png differ diff --git a/translated_images/2.1dae52ff08042246.et.png b/translated_images/2.1dae52ff08042246.et.png new file mode 100644 index 00000000..5c98fee7 Binary files /dev/null and b/translated_images/2.1dae52ff08042246.et.png differ diff --git a/translated_images/2.1dae52ff08042246.kn.png b/translated_images/2.1dae52ff08042246.kn.png new file mode 100644 index 00000000..0922cead Binary files /dev/null and b/translated_images/2.1dae52ff08042246.kn.png differ diff --git a/translated_images/2.1dae52ff08042246.ml.png b/translated_images/2.1dae52ff08042246.ml.png new file mode 100644 index 00000000..ffa3e6f2 Binary files /dev/null and b/translated_images/2.1dae52ff08042246.ml.png differ diff --git a/translated_images/2.1dae52ff08042246.pcm.png b/translated_images/2.1dae52ff08042246.pcm.png new file mode 100644 index 00000000..aa8c4aee Binary files /dev/null and b/translated_images/2.1dae52ff08042246.pcm.png differ diff --git a/translated_images/2.1dae52ff08042246.te.png b/translated_images/2.1dae52ff08042246.te.png new file mode 100644 index 00000000..dfd8330a Binary files /dev/null and b/translated_images/2.1dae52ff08042246.te.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.et.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.et.png new file mode 100644 index 00000000..a21d65d9 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.et.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.kn.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.kn.png new file mode 100644 index 00000000..3deaad87 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.kn.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ml.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ml.png new file mode 100644 index 00000000..3f565b12 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ml.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.pcm.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.pcm.png new file mode 100644 index 00000000..45933554 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.pcm.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.te.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.te.png new file mode 100644 index 00000000..b68576f8 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.te.png differ diff --git a/translated_images/background.148a8d43afde5730.et.png b/translated_images/background.148a8d43afde5730.et.png new file mode 100644 index 00000000..65cd91a2 Binary files /dev/null and b/translated_images/background.148a8d43afde5730.et.png differ diff --git a/translated_images/background.148a8d43afde5730.kn.png b/translated_images/background.148a8d43afde5730.kn.png new file mode 100644 index 00000000..1e5ab0ae Binary files /dev/null and b/translated_images/background.148a8d43afde5730.kn.png differ diff --git a/translated_images/background.148a8d43afde5730.ml.png b/translated_images/background.148a8d43afde5730.ml.png new file mode 100644 index 00000000..9b99be6c Binary files /dev/null and b/translated_images/background.148a8d43afde5730.ml.png differ diff --git a/translated_images/background.148a8d43afde5730.pcm.png b/translated_images/background.148a8d43afde5730.pcm.png new file mode 100644 index 00000000..7367457e Binary files /dev/null and b/translated_images/background.148a8d43afde5730.pcm.png differ diff --git a/translated_images/background.148a8d43afde5730.te.png b/translated_images/background.148a8d43afde5730.te.png new file mode 100644 index 00000000..1443beb6 Binary files /dev/null and b/translated_images/background.148a8d43afde5730.te.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.et.png b/translated_images/backgroundColor.e19c3c60768150c8.et.png new file mode 100644 index 00000000..3bd93a53 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.et.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.kn.png b/translated_images/backgroundColor.e19c3c60768150c8.kn.png new file mode 100644 index 00000000..3bd93a53 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.kn.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.ml.png b/translated_images/backgroundColor.e19c3c60768150c8.ml.png new file mode 100644 index 00000000..3bd93a53 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.ml.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.pcm.png b/translated_images/backgroundColor.e19c3c60768150c8.pcm.png new file mode 100644 index 00000000..3bd93a53 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.pcm.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.te.png b/translated_images/backgroundColor.e19c3c60768150c8.te.png new file mode 100644 index 00000000..3bd93a53 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.te.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.et.png b/translated_images/browser-console.efaf0b51aaaf6778.et.png new file mode 100644 index 00000000..2330c359 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.et.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.kn.png b/translated_images/browser-console.efaf0b51aaaf6778.kn.png new file mode 100644 index 00000000..a65a071b Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.kn.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.ml.png b/translated_images/browser-console.efaf0b51aaaf6778.ml.png new file mode 100644 index 00000000..8339dad8 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.ml.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.pcm.png b/translated_images/browser-console.efaf0b51aaaf6778.pcm.png new file mode 100644 index 00000000..a4a62e82 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.pcm.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.te.png b/translated_images/browser-console.efaf0b51aaaf6778.te.png new file mode 100644 index 00000000..6f716960 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.te.png differ diff --git a/translated_images/browser.60317c9be8b7f84a.et.jpg b/translated_images/browser.60317c9be8b7f84a.et.jpg new file mode 100644 index 00000000..6187b4f2 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.et.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.kn.jpg b/translated_images/browser.60317c9be8b7f84a.kn.jpg new file mode 100644 index 00000000..a31cf424 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.kn.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.ml.jpg b/translated_images/browser.60317c9be8b7f84a.ml.jpg new file mode 100644 index 00000000..11ca54fb Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.ml.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.pcm.jpg b/translated_images/browser.60317c9be8b7f84a.pcm.jpg new file mode 100644 index 00000000..82baab33 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.pcm.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.te.jpg b/translated_images/browser.60317c9be8b7f84a.te.jpg new file mode 100644 index 00000000..5f4304bd Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.te.jpg differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.et.png b/translated_images/canvas.fbd605ff8e5b8aff.et.png new file mode 100644 index 00000000..98a55335 Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.et.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.kn.png b/translated_images/canvas.fbd605ff8e5b8aff.kn.png new file mode 100644 index 00000000..b6212cb8 Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.kn.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.ml.png b/translated_images/canvas.fbd605ff8e5b8aff.ml.png new file mode 100644 index 00000000..aedd60a2 Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.ml.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.pcm.png b/translated_images/canvas.fbd605ff8e5b8aff.pcm.png new file mode 100644 index 00000000..78d8ac25 Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.pcm.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.te.png b/translated_images/canvas.fbd605ff8e5b8aff.te.png new file mode 100644 index 00000000..d679314a Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.te.png differ diff --git a/translated_images/canvas_grid.5f209da785ded492.et.png b/translated_images/canvas_grid.5f209da785ded492.et.png new file mode 100644 index 00000000..c5001690 Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492.et.png differ diff --git a/translated_images/canvas_grid.5f209da785ded492.kn.png b/translated_images/canvas_grid.5f209da785ded492.kn.png new file mode 100644 index 00000000..8c93af5d Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492.kn.png differ diff --git a/translated_images/canvas_grid.5f209da785ded492.ml.png b/translated_images/canvas_grid.5f209da785ded492.ml.png new file mode 100644 index 00000000..30f3fbe4 Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492.ml.png differ diff --git a/translated_images/canvas_grid.5f209da785ded492.pcm.png b/translated_images/canvas_grid.5f209da785ded492.pcm.png new file mode 100644 index 00000000..208612aa Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492.pcm.png differ diff --git a/translated_images/canvas_grid.5f209da785ded492.te.png b/translated_images/canvas_grid.5f209da785ded492.te.png new file mode 100644 index 00000000..9f1fe0df Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492.te.png differ diff --git a/translated_images/character.5c0dd8e067ffd693.et.png b/translated_images/character.5c0dd8e067ffd693.et.png new file mode 100644 index 00000000..dcf059c6 Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693.et.png differ diff --git a/translated_images/character.5c0dd8e067ffd693.kn.png b/translated_images/character.5c0dd8e067ffd693.kn.png new file mode 100644 index 00000000..28a8a251 Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693.kn.png differ diff --git a/translated_images/character.5c0dd8e067ffd693.ml.png b/translated_images/character.5c0dd8e067ffd693.ml.png new file mode 100644 index 00000000..929e92b7 Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693.ml.png differ diff --git a/translated_images/character.5c0dd8e067ffd693.pcm.png b/translated_images/character.5c0dd8e067ffd693.pcm.png new file mode 100644 index 00000000..9bb71b08 Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693.pcm.png differ diff --git a/translated_images/character.5c0dd8e067ffd693.te.png b/translated_images/character.5c0dd8e067ffd693.te.png new file mode 100644 index 00000000..7a10bdb5 Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693.te.png differ diff --git a/translated_images/click-register.e89a30bf0d4bc9ca.et.png b/translated_images/click-register.e89a30bf0d4bc9ca.et.png new file mode 100644 index 00000000..ccc65305 Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca.et.png differ diff --git a/translated_images/click-register.e89a30bf0d4bc9ca.kn.png b/translated_images/click-register.e89a30bf0d4bc9ca.kn.png new file mode 100644 index 00000000..ccc65305 Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca.kn.png differ diff --git a/translated_images/click-register.e89a30bf0d4bc9ca.ml.png b/translated_images/click-register.e89a30bf0d4bc9ca.ml.png new file mode 100644 index 00000000..ccc65305 Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca.ml.png differ diff --git a/translated_images/click-register.e89a30bf0d4bc9ca.pcm.png b/translated_images/click-register.e89a30bf0d4bc9ca.pcm.png new file mode 100644 index 00000000..ccc65305 Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca.pcm.png differ diff --git a/translated_images/click-register.e89a30bf0d4bc9ca.te.png b/translated_images/click-register.e89a30bf0d4bc9ca.te.png new file mode 100644 index 00000000..ccc65305 Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca.te.png differ diff --git a/translated_images/clone_repo.5085c48d666ead57.et.png b/translated_images/clone_repo.5085c48d666ead57.et.png new file mode 100644 index 00000000..07e06349 Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57.et.png differ diff --git a/translated_images/clone_repo.5085c48d666ead57.kn.png b/translated_images/clone_repo.5085c48d666ead57.kn.png new file mode 100644 index 00000000..1f65195e Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57.kn.png differ diff --git a/translated_images/clone_repo.5085c48d666ead57.ml.png b/translated_images/clone_repo.5085c48d666ead57.ml.png new file mode 100644 index 00000000..fc069268 Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57.ml.png differ diff --git a/translated_images/clone_repo.5085c48d666ead57.pcm.png b/translated_images/clone_repo.5085c48d666ead57.pcm.png new file mode 100644 index 00000000..12846a52 Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57.pcm.png differ diff --git a/translated_images/clone_repo.5085c48d666ead57.te.png b/translated_images/clone_repo.5085c48d666ead57.te.png new file mode 100644 index 00000000..4c36f3f9 Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57.te.png differ diff --git a/translated_images/clone_repo.6a202fb230ab6bdd.et.png b/translated_images/clone_repo.6a202fb230ab6bdd.et.png new file mode 100644 index 00000000..9def8602 Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd.et.png differ diff --git a/translated_images/clone_repo.6a202fb230ab6bdd.kn.png b/translated_images/clone_repo.6a202fb230ab6bdd.kn.png new file mode 100644 index 00000000..18c54200 Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd.kn.png differ diff --git a/translated_images/clone_repo.6a202fb230ab6bdd.ml.png b/translated_images/clone_repo.6a202fb230ab6bdd.ml.png new file mode 100644 index 00000000..44622057 Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd.ml.png differ diff --git a/translated_images/clone_repo.6a202fb230ab6bdd.pcm.png b/translated_images/clone_repo.6a202fb230ab6bdd.pcm.png new file mode 100644 index 00000000..3121de5f Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd.pcm.png differ diff --git a/translated_images/clone_repo.6a202fb230ab6bdd.te.png b/translated_images/clone_repo.6a202fb230ab6bdd.te.png new file mode 100644 index 00000000..54e161c3 Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd.te.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d.et.png b/translated_images/codespace.bcecbdf5d2747d3d.et.png new file mode 100644 index 00000000..a025ab3d Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d.et.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d.kn.png b/translated_images/codespace.bcecbdf5d2747d3d.kn.png new file mode 100644 index 00000000..0354a9a8 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d.kn.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d.ml.png b/translated_images/codespace.bcecbdf5d2747d3d.ml.png new file mode 100644 index 00000000..9b7448a9 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d.ml.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d.pcm.png b/translated_images/codespace.bcecbdf5d2747d3d.pcm.png new file mode 100644 index 00000000..7474d88a Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d.pcm.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d.te.png b/translated_images/codespace.bcecbdf5d2747d3d.te.png new file mode 100644 index 00000000..33c5ab91 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d.te.png differ diff --git a/translated_images/create-a-fork.297ab42b4bd0af99.et.png b/translated_images/create-a-fork.297ab42b4bd0af99.et.png new file mode 100644 index 00000000..7eaff71e Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af99.et.png differ diff --git a/translated_images/create-a-fork.297ab42b4bd0af99.kn.png b/translated_images/create-a-fork.297ab42b4bd0af99.kn.png new file mode 100644 index 00000000..75611bb6 Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af99.kn.png differ diff --git a/translated_images/create-a-fork.297ab42b4bd0af99.ml.png b/translated_images/create-a-fork.297ab42b4bd0af99.ml.png new file mode 100644 index 00000000..b93397dc Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af99.ml.png differ diff --git a/translated_images/create-a-fork.297ab42b4bd0af99.pcm.png b/translated_images/create-a-fork.297ab42b4bd0af99.pcm.png new file mode 100644 index 00000000..6214f887 Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af99.pcm.png differ diff --git a/translated_images/create-a-fork.297ab42b4bd0af99.te.png b/translated_images/create-a-fork.297ab42b4bd0af99.te.png new file mode 100644 index 00000000..db62494b Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af99.te.png differ diff --git a/translated_images/create-new-file-pb.0797800d977ec3eb.et.png b/translated_images/create-new-file-pb.0797800d977ec3eb.et.png new file mode 100644 index 00000000..7f67419d Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3eb.et.png differ diff --git a/translated_images/create-new-file-pb.0797800d977ec3eb.kn.png b/translated_images/create-new-file-pb.0797800d977ec3eb.kn.png new file mode 100644 index 00000000..d2005b04 Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3eb.kn.png differ diff --git a/translated_images/create-new-file-pb.0797800d977ec3eb.ml.png b/translated_images/create-new-file-pb.0797800d977ec3eb.ml.png new file mode 100644 index 00000000..d893c55c Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3eb.ml.png differ diff --git a/translated_images/create-new-file-pb.0797800d977ec3eb.pcm.png b/translated_images/create-new-file-pb.0797800d977ec3eb.pcm.png new file mode 100644 index 00000000..baf0da41 Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3eb.pcm.png differ diff --git a/translated_images/create-new-file-pb.0797800d977ec3eb.te.png b/translated_images/create-new-file-pb.0797800d977ec3eb.te.png new file mode 100644 index 00000000..851a5c94 Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3eb.te.png differ diff --git a/translated_images/create-new-file.2814e609c2af9aeb.et.png b/translated_images/create-new-file.2814e609c2af9aeb.et.png new file mode 100644 index 00000000..a1fb99b5 Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb.et.png differ diff --git a/translated_images/create-new-file.2814e609c2af9aeb.kn.png b/translated_images/create-new-file.2814e609c2af9aeb.kn.png new file mode 100644 index 00000000..a1fb99b5 Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb.kn.png differ diff --git a/translated_images/create-new-file.2814e609c2af9aeb.ml.png b/translated_images/create-new-file.2814e609c2af9aeb.ml.png new file mode 100644 index 00000000..a1fb99b5 Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb.ml.png differ diff --git a/translated_images/create-new-file.2814e609c2af9aeb.pcm.png b/translated_images/create-new-file.2814e609c2af9aeb.pcm.png new file mode 100644 index 00000000..a1fb99b5 Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb.pcm.png differ diff --git a/translated_images/create-new-file.2814e609c2af9aeb.te.png b/translated_images/create-new-file.2814e609c2af9aeb.te.png new file mode 100644 index 00000000..a1fb99b5 Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb.te.png differ diff --git a/translated_images/createcodespace.0238bbf4d7a8d955.et.png b/translated_images/createcodespace.0238bbf4d7a8d955.et.png new file mode 100644 index 00000000..40d5013c Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955.et.png differ diff --git a/translated_images/createcodespace.0238bbf4d7a8d955.kn.png b/translated_images/createcodespace.0238bbf4d7a8d955.kn.png new file mode 100644 index 00000000..f602ba31 Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955.kn.png differ diff --git a/translations/et/7-bank-project/4-state-management/assignment.md b/translations/et/7-bank-project/4-state-management/assignment.md index 659ba7f5..f586b34a 100644 --- a/translations/et/7-bank-project/4-state-management/assignment.md +++ b/translations/et/7-bank-project/4-state-management/assignment.md @@ -1,39 +1,164 @@ -# Rakenda "Lisa tehing" dialoog +# Rakenda dialoog "Lisa tehing" + +## Ülevaade + +Sinu pangarakendusel on nüüd tugev olekuhaldus ja andmete säilitamine, kuid see vajab olulist funktsionaalsust, mida tõelised pangarakendused vajavad: võimalust kasutajatel lisada oma tehingud. Selles ülesandes rakendad täieliku "Lisa tehing" dialoogi, mis integreerub sujuvalt olemasoleva olekuhaldussüsteemiga. + +See ülesanne ühendab kõik, mida oled õppinud neljas pangatunde: HTML-i mallide koostamine, vormide käsitlemine, API integratsioon ja olekuhaldus. + +## Õpieesmärgid + +Ülesande lõpetamisel sa: +- **Lood** kasutajasõbraliku dialoogiliidese andmete sisestamiseks +- **Rakendad** ligipääsetava vormidisaini klaviatuuri ja ekraanilugerite toe jaoks +- **Integreerid** uued funktsioonid olemasoleva olekuhaldussüsteemiga +- **Harjutad** API-ga suhtlemist ja vigade käitlemist +- **Rakendad** kaasaegseid veebiarenduse mustreid päris maailma funktsioonile ## Juhised -Meie pangarakendusel puudub endiselt üks oluline funktsioon: võimalus sisestada uusi tehinguid. -Kasutades kõike, mida oled õppinud neljas eelmises tunnis, rakenda "Lisa tehing" dialoog: +### Samm 1: Lisa tehingu nupp + +**Loo** "Lisa tehing" nupp oma juhtpaneeli lehele, mida kasutajad leiavad ja millele pääsevad hõlpsalt ligi. + +**Nõuded:** +- **Aseta** nupp loogilisse kohta juhtpaneelil +- **Kasuta** selget, tegevusele suunatud nupu teksti +- **Stiliseeri** nupp vastavalt olemasolevale kasutajaliidese kujundusele +- **Tagada** nupu klaviatuuriga ligipääsetavus + +### Samm 2: Dialoogi rakendamine + +Vali üks kahest lähenemisest dialoogi loomisel: + +**Variant A: Eraldi leht** +- **Loo** uus HTML mall tehinguvormile +- **Lisa** uus marsruut oma marsruutimissüsteemi +- **Rakenda** navigeerimine vormilehe ja sealt tagasi + +**Variant B: Modaalne dialoog (soovitatav)** +- **Kasuta** JavaScripti dialoogi näitamiseks/peitmiseks ilma juhtpaneelilt lahkumata +- **Rakenda** [`hidden` omaduse](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) või CSS klasside abil +- **Loo** sujuv kasutajakogemus õige fookuse haldusega + +### Samm 3: Ligipääsetavuse rakendamine + +**Tagada**, et su dialoog vastab [modaalsete dialoogide ligipääsetavuse standarditele](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/): + +**Klaviatuuriga navigeerimine:** +- **Toetada** Escape-klahvi dialoogi sulgemiseks +- **Piira** fookust dialoogi sissedial avamise ajal +- **Tagasta** fookus käivitava nupu juurde sulgemisel + +**Ekraanilugeritoe:** +- **Lisa** asjakohased ARIA sildid ja rollid +- **Teavita** dialoogi avanemisest ja sulgemisest ekraanilugeritele +- **Paku** selged vormiväljade sildid ja veateated + +### Samm 4: Vormide loomine + +**Disaini** HTML-vorm, mis kogub tehinguandmeid: -- Lisa "Lisa tehing" nupp armatuurlaua lehele -- Loo kas uus leht HTML-malliga või kasuta JavaScripti, et näidata/peita dialoogi HTML-i ilma armatuurlaua lehelt lahkumata (võid kasutada [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) atribuuti või CSS klasse) -- Veendu, et dialoogi puhul oleks tagatud [klaviatuuri ja ekraanilugeja ligipääsetavus](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) -- Rakenda HTML-vorm sisendi andmete vastuvõtmiseks -- Loo vormi andmetest JSON ja saada see API-le -- Uuenda armatuurlaua lehte uute andmetega +**Kohustuslikud väljad:** +- **Kuupäev**: millal tehing toimus +- **Kirjeldus**: milleks tehing tehti +- **Summa**: tehingu väärtus (positiivne sissetuleku jaoks, negatiivne väljamineku jaoks) -Vaata [serveri API spetsifikatsioone](../api/README.md), et näha, millist API-d tuleb kutsuda ja milline on oodatud JSON-formaat. +**Vormi omadused:** +- **Valideeri** kasutaja sisend enne esitamist +- **Paku** selged veateated kehtetute andmete puhul +- **Lisa** abistav kohatäitekiri ja sildid +- **Stiliseeri** vastavalt olemasolevale disainile -Siin on näide tulemusest pärast ülesande täitmist: +### Samm 5: API integratsioon -![Ekraanipilt, mis näitab näidisdialoogi "Lisa tehing"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.et.png) +**Ühenda** oma vorm backend API-ga: + +**Rakendusetapid:** +- **Vaata üle** [serveri API spetsifikatsioonid](../api/README.md) õige lõpp-punkti ja andmeformaadi osas +- **Loo** JSON-andmed vormi sisenditest +- **Saada** andmed API-le, kasutades asjakohast vigade käsitlemist +- **Kuva** kasutajale edukuse/ebaõnnestumise teated +- **Käitle** võrguvigu sujuvalt + +### Samm 6: Olekuhalduse integratsioon + +**Uuenda** oma juhtpaneeli uue tehinguga: + +**Integratsiooni nõuded:** +- **Värskenda** kontoandmeid pärast tehingu edukat lisamist +- **Uuenda** juhtpaneeli kuvamist ilma lehte lahti laadimata +- **Tagada**, et uus tehing kuvatakse kohe +- **Hoolda** nõuetekohast oleku järjepidevust protsessi vältel + +## Tehnilised spetsifikatsioonid + +**API lõpp-punkti detailid:** +Vaata [serveri API dokumentatsiooni](../api/README.md) kohta: +- Vajalik JSON-vorming tehinguandmete jaoks +- HTTP meetod ja lõpp-punkti URL +- Oodatud vastuse formaat +- Vigade käsitlemine vastuste korral + +**Oodatav tulemus:** +Pärast selle ülesande lõpetamist peaks su pangarakendus omama täielikult toimivat "Lisa tehing" funktsionaalsust, mis näeb välja ja toimib professionaalselt: + +![Ekraanipilt näidates eeskuju "Lisa tehing" dialoogist](../../../../translated_images/dialog.93bba104afeb79f1.et.png) + +## Oma rakenduse testimine + +**Funktsionaalsuse testimine:** +1. **Kontrolli**, et "Lisa tehing" nupp on selgelt nähtav ja ligipääsetav +2. **Testi**, et dialoog avaneb ja sulgub korralikult +3. **Kinnita**, et vormi valideerimine töötab kõigi nõutud väljade puhul +4. **Kontrolli**, et edukad tehingud kuvatakse kohe juhtpaneelil +5. **Veendu**, et veakäsitlus töötab vigaste andmete ja võrgu probleemide korral + +**Ligipääsetavuse testimine:** +1. **Navigeeri** kogu protsess läbi ainult klaviatuuri kasutades +2. **Testi** ekraanilugeriga, et veenduda korrektses teavitamises +3. **Kontrolli**, et fookuse haldus toimib õigesti +4. **Veendu**, et kõik vormielemendid on korrektselt sildistatud ## Hindamiskriteeriumid -| Kriteerium | Näidislik | Piisav | Vajab parandamist | -| ---------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -| | Tehingu lisamine on täielikult rakendatud, järgides kõiki tundides käsitletud parimaid praktikaid. | Tehingu lisamine on rakendatud, kuid ei järgi tundides käsitletud parimaid praktikaid või töötab ainult osaliselt. | Tehingu lisamine ei tööta üldse. | +| Kriteerium | Näidishinne | Piisav | Parandamist vajav | +| -------- | --------- | -------- | ----------------- | +| **Funktsionaalsus** | Lisa tehingu funktsioon töötab laitmatult, pakub suurepärast kasutajakogemust ja järgib kõiki õppetundide parimaid tavasid | Lisa tehingu funktsioon töötab korrektselt, kuid võib puududa mõni parim tava või esineda väikeseid kasutatavusprobleeme | Lisa tehingu funktsioon töötab osaliselt või on oluliselt kasutusmugavust takistav | +| **Koodi kvaliteet** | Kood on hästi organiseeritud, järgib kehtestatud mustreid, sisaldab korralikku vigade käsitlemist ja integreerub sujuvalt olemasoleva olekuhaldusega | Kood töötab, kuid võib olla organiseerimata või järgida ebajärjekindlaid mustreid olemasolevas koodibaasis | Koodis on olulisemad struktuurivead või see ei integreeru hästi olemasolevate mustritega | +| **Ligipääsetavus** | Täielik klaviatuuriga navigeerimise tugi, ekraanilugerite ühilduvus ja WCAG juhiste järgimine suurepärase fookusehaldusega | Põhilised ligipääsetavuse funktsioonid on rakendatud, kuid võib puududa osa klaviatuuriga navigeerimisest või ekraanilugerite toest | Ligipääsetavuse kaalutlused on kas puudulikud või puuduvad täielikult | +| **Kasutajakogemus** | Intuitiivne, lihvitud liides selge tagasiside, sujuvate interaktsioonide ja professionaalse välimusega | Hea kasutajakogemus väikeste parenduskohtadega tagasiside või visuaalses disainis | Kehv kasutajakogemus segase liidese või tagasiside puudumisega | + +## Täiendavad väljakutsed (vabatahtlik) + +Kui põhinõuded on täidetud, mõtle nende täiustuste peale: + +**Täiendatud funktsioonid:** +- **Lisa** tehingukategooriad (toit, transport, meelelahutus jms) +- **Rakenda** sisendi valideerimine reaalajas tagasisidega +- **Loo** kiirklahvid võhmrau kasutajatele +- **Lisa** tehingute redigeerimise ja kustutamise võimalused + +**Täiustatud integratsioon:** +- **Rakenda** tagasi võtmise funktsioon hiljuti lisatud tehingutele +- **Lisa** massiline tehingute import CSV failidest +- **Loo** tehingute otsingu- ja filtreerimisvõimalused +- **Rakenda** andmete eksportimise funktsioonid + +Need vabatahtlikud funktsioonid aitavad sul harjutada keerukamaid veebiarenduse põhimõtteid ja luua täielikuma pangarakenduse! --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma emakeeles tuleks pidada autoriteetseks allikaks. Oluline info puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. + \ No newline at end of file diff --git a/translations/et/7-bank-project/README.md b/translations/et/7-bank-project/README.md index f44b8b2e..d487e818 100644 --- a/translations/et/7-bank-project/README.md +++ b/translations/et/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Selles projektis õpid, kuidas luua fiktiivset panka. Need õppetunnid sisaldavad juhiseid veebirakenduse kujundamiseks ja marsruutide loomiseks, vormide ehitamiseks, oleku haldamiseks ning API-st andmete hankimiseks, mille abil saad panga andmeid kätte. -| ![Ekraan1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.et.png) | ![Ekraan2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.et.png) | +| ![Ekraan1](../../../translated_images/screen1.baccbba0f1f93364.et.png) | ![Ekraan2](../../../translated_images/screen2.123c82a831a1d14a.et.png) | |--------------------------------|--------------------------------| ## Õppetunnid diff --git a/translations/et/8-code-editor/1-using-a-code-editor/README.md b/translations/et/8-code-editor/1-using-a-code-editor/README.md index f173a627..55b34e6d 100644 --- a/translations/et/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/et/8-code-editor/1-using-a-code-editor/README.md @@ -1,175 +1,639 @@ -*** +# Koodi redaktori kasutamine: VSCode.devi valdamine + +Kas mäletad filmist *Matrix* seda kohta, kus Neo pidi arvutimaailmaga ühenduse saamiseks suure kooditerminaliga liidestuma? Tänapäeva veebiarendusvahendid on selle vastand – uskumatult võimsad võimalused, mis on ligipääsetavad kõikjalt. VSCode.dev on brauseripõhine koodi redaktor, mis toob professionaalsed arendusvahendid igasse internetiühendusega seadmesse. + +Nii nagu trükipress tegi raamatud kättesaadavaks kõigile, mitte ainult kloostrite kirjutajatele, demokraatiseerib VSCode.dev kodeerimise. Sa võid töötada projektidega raamatukogu arvutist, kooli laboris või ükskõik kust, kus on brauseri ligipääs. Pole vaja installida, pole "mul on oma spetsiifiline keskkond" piiranguid. + +Selle õppetüki lõpuks saad aru, kuidas VSCode.devis navigeerida, avada GitHubi hoidlaid otse brauseris ja kasutada Gitit versioonihalduseks – kõik oskused, millele professionaalsed arendajad iga päev toetuvad. + +## ⚡ Mida saad järgnevate 5 minutiga teha + +**Kiire algus hõivatud arendajatele** + +```mermaid +flowchart LR + A[⚡ 5 minutit] --> B[Külasta vscode.dev] + B --> C[Ühenda GitHubi konto] + C --> D[Ava ükskõik milline hoidla] + D --> E[Alusta koheselt redigeerimist] +``` +- **1. minut**: Mine aadressile [vscode.dev](https://vscode.dev) – pole vaja midagi installeerida +- **2. minut**: Logi sisse GitHubiga, et oma hoidlaid ühendada +- **3. minut**: Proovi URL-i trikki: muuda mistahes hoidla aadressis `github.com` osaks `vscode.dev/github` +- **4. minut**: Loo uus fail ja vaata, kuidas süntaksi esiletõstmine automaatselt tööle hakkab +- **5. minut**: Tee muudatus ja salvesta see Source Control paneeli kaudu + +**Kiirika URL**: +``` +# Transform this: +github.com/microsoft/Web-Dev-For-Beginners + +# Into this: +vscode.dev/github/microsoft/Web-Dev-For-Beginners +``` + +**Miks see oluline on**: 5 minutiga saad kogeda vabadust koodida kõikjalt kasutades professionaalseid tööriistu. See tähistab arenduse tulevikku – ligipääsetav, võimas ja vahetu. + +## 🗺️ Sinu õpiteek pilvepõhises arenduses + +```mermaid +journey + title Kohalikust seadistusest pilve arenduse meistrini + section Platvormi mõistmine + Avastage veebipõhine redigeerimine: 4: You + Ühenduge GitHubi ökosüsteemiga: 6: You + Valdage liidese navigeerimine: 7: You + section Failihaldusoskused + Looge ja organiseerige faile: 5: You + Redigeerige süntaksi esiletõstmisega: 7: You + Navigeerige projektistruktuuride vahel: 8: You + section Versioonihalduse valdamine + Mõistke Giti integratsiooni: 6: You + Harjutage commit-töövooge: 8: You + Valdage koostöö mustreid: 9: You + section Professionaalne kohandamine + Installige võimsad laiendused: 7: You + Konfigureerige arendus keskkond: 8: You + Looge isiklikud töövood: 9: You +``` +**Sihtpunkt sinu teekonnal**: Selle õppetüki lõpuks valdad professionaalset pilvearenduskeskkonda, mis töötab ükskõik millisest seadmest, võimaldades sul kasutada samu tööriistu, mida kasutavad suured tehnoloogiafirmad. + +## Mida õpid + +Pärast seda koos läbikäimist saad: + +- Navigeerida VSCode.devis nagu see oleks sinu teine kodu – leida kõike vajalikku ilma ekslemata +- Avada mistahes GitHubi hoidla oma brauseris ja kohe hakata seda muutma (see on päris maagiline!) +- Kasutada Giti oma muudatuste jälgimiseks ja edenemise salvestamiseks nagu professionaal +- Kiirendada oma redaktorit laiendustega, mis muudavad kodeerimise kiiremaks ja lõbusamaks +- Luua ja korrastada projektifaile enesekindlalt + +## Mida vajad + +Nõuded on lihtsad: + +- Tasuta [GitHubi konto](https://github.com) (vajadusel juhendame sind selle loomisel) +- Algteadmised veebibrauseritest +- GitHub Basics õppetükk annab kasulikku taustainfot, kuid pole kohustuslik + +> 💡 **Uus GitHubis?** Konto loomine on tasuta ja võtab vaid paar minutit. Nii nagu raamatukogu kaart annab ligipääsu raamatutele kogu maailmas, avab GitHubi konto uksi koodihaldushoidlatesse üle interneti. + +## 🧠 Pilvearenduse ökosüsteemi ülevaade + +```mermaid +mindmap + root((VSCode.dev Meisterlikkus)) + Platform Benefits + Accessibility + Device Independence + No Installation Required + Instant Updates + Universal Access + Integration + GitHub Connection + Repository Sync + Settings Persistence + Collaboration Ready + Development Workflow + Failide Halduse + Projekti Struktuur + Süntaksi Esiletõstmine + Mitme Vahelehega Redigeerimine + Automaatse Salvestamise Funktsioonid + Versioonihaldus + Giti Integratsioon + Kinnitamise Töövood + Harude Halduse + Muudatuste Jälgimine + Customization Power + Laienduste Ökosüsteem + Tootlikkuse Tööriistad + Keelte Tugi + Teema Valikud + Kohandatud Kiirklahvid + Keskkonna Häälestus + Isiklikud Eelistused + Töölaua Konfiguratsioon + Tööriistade Integratsioon + Töövoo Optimeerimine + Professional Skills + Tööstuse Standardid + Versioonihaldus + Koodi Kvaliteet + Koostöö + Dokumentatsioon + Karjääri Valmisolek + Kaug töö + Pilve arendus + Meeskonna Projektid + Avatud Lähtekood +``` +**Põhiprintsiip**: Pilvepõhised arenduskeskkonnad on kodeerimise tulevik – need pakuvad professionaalse taseme tööriistu, mis on ligipääsetavad, koostöövõimelised ja sõltumatud platvormist. + +## Miks veebipõhised koodi redaktorid on olulised + +Enne internetti ei saanud teadlased erinevatest ülikoolidest kergesti oma uurimistöid jagada. Siis tuli 1960ndail ARPANET, mis ühendas arvuteid kaugustel. Veebipõhised koodi redaktorid järgivad sama printsiipi – teha võimsad tööriistad ligipääsetavaks sõltumata sinu füüsilisest asukohast või seadmest. + +Koodi redaktor on su arendustööruum, kus kirjutad, redigeerid ja korraldad koodifaile. Erinevalt lihtsatest tekstiredaktoritest pakuvad professionaalsed redaktorid süntaksi esiletõstmist, vigade tuvastamist ja projektihaldust. + +VSCode.dev toob need võimalused su brauserisse: + +**Veebipõhise redigeerimise eelised:** + +| Omadus | Kirjeldus | Praktiline Eelis | +|---------|-------------|----------| +| **Platvormist sõltumatu** | Töötab igas brauseriga seadmes | Töötamine erinevatel arvutitel sujuvalt | +| **Pole vaja installida** | Ligipääs veebiaadressi kaudu | Vabastus tarkvara installeerimise piirangutest | +| **Automaatvärskendused** | Alati töötab uusima versiooniga | Uued funktsioonid ilma käsitsi uuendamata | +| **Hoidla integratsioon** | Otseühendus GitHubiga | Koodi muutmine ilma kohaliku failihalduseta | + +**Praktilised tagajärjed:** +- Töö jätkamine erinevates keskkondades +- Ühtne liides sõltumata operatsioonisüsteemist +- Kohene koostöövõimalus +- Vähenenud kohaliku salvestusruumi vajadus + +## VSCode.devi avastamine + +Nii nagu Marie Curie labor sisaldas keerulist tehnoloogiat suhteliselt lihtsas ruumis, pakib VSCode.dev professionaalsed arendustööriistad brauseriliidesesse. See veebirakendus pakub samasugust põhifunktsionaalsust nagu lauaarvuti koodi redaktorid. + +Alusta, minnes oma brauseris aadressile [vscode.dev](https://vscode.dev). Liides laeb end ilma allalaadimiseta või süsteemi installatsioonita – pilvearvutuse põhimõtete otse rakendus. + +### Ühenda oma GitHubi konto + +Nii nagu Alexander Graham Bell ühendaski kaugustes kohad telefoni abil, seob GitHubi konto ühendamine VSCode.devi sinu koodihaldushoidlatele ligipääsu. Kui küsitakse sisselogimist GitHubiga, soovitatakse see ühendus aktsepteerida. + +**GitHubi integratsioon pakub:** +- Otse ligipääsu sinu hoidlatele redaktoris +- Sünkroonitud seadistused ja laiendused seadmete vahel +- Sujuv salvestuskäik GitHubi +- Isikupärastatud arenduskeskkond + +### Tutvu oma uue tööruumiga + +Kui kõik laeb, näed ilusat ja puhtat töölaua keskkonda, mis on loodud sind keskenduma olulisele – koodile! + +![Vaikimisi VSCode.devi liides](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.et.png) + +**Siin on ülevaade su ümbrusest:** +- **Activity Bar** (vasakul olev riba): Sinu peamine navigeerimisriba, kus on Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 ja Settings ⚙️ +- **Sidebar** (naabruses asuv paneel): Muutub sõltuvalt sinu valikutest ja näitab asjakohast infot +- **Editor Area** (suur keskmine ala): Siin käib võlu – sinu peamine kodeerimisala + +**Võta hetk uurimiseks:** +- Klõpsa Activity Bari ikoonidel ja vaata, mida igaüks teeb +- Märka, kuidas sidriba muutub, näidates erinevat informatsiooni – päris äge, eks? +- Explorer vaade (📁) on koht, kus veedad tõenäoliselt kõige enam aega, harju sellega + +```mermaid +flowchart TB + subgraph "VSCode.dev liidese arhitektuur" + A[Aktiivriba] --> B[Explorer 📁] + A --> C[Otsi 🔍] + A --> D[Allikahalduse 🌿] + A --> E[Laiendused 🧩] + A --> F[Seaded ⚙️] + + B --> G[Failipuu] + C --> H[Leia ja asenda] + D --> I[Git staatus] + E --> J[Laienduste turg] + F --> K[Konfiguratsioon] + + L[Külgriba] --> M[Kontekstipaneel] + N[Redaktori ala] --> O[Koodifailid] + P[Terminal/Väljund] --> Q[Käsurida] + end +``` +## GitHubi hoidlate avamine -# Koodi redaktori kasutamine: [VSCode.dev](https://vscode.dev) valdamine +Enne internetti pidid teadlased füüsiliselt raamatukogudesse sõitma dokumentidele ligipääsuks. GitHubi hoidlad töötavad samamoodi – need on kaugel hoitavad koodikogumikud. VSCode.dev kaotab traditsioonilise sammu, kus hoidlaid tuli esmalt alla laadida oma kohalikku masinasse enne muutmist. -**Tere tulemast!** -See õppetund viib teid [VSCode.dev](https://vscode.dev)—võimsa veebipõhise koodi redaktori—põhitõdedest kuni edasijõudnud kasutamiseni. Õpite enesekindlalt koodi redigeerima, projekte haldama, muudatusi jälgima, laiendusi installima ja professionaalselt koostööd tegema—kõike seda otse oma brauserist, ilma et oleks vaja midagi installida. +See võimaldab kohest ligipääsu igale avalikule hoidla vaatamiseks, redigeerimiseks või panustamiseks. Siin on kaks hoidlate avamise meetodit: -*** +### Meetod 1: Osuta ja klõpsa -## Õppe-eesmärgid +Sobib ideaalselt, kui alustad VSCode.devis nullist ja soovid konkreetset hoidlat avada. Lihtne ja algajasõbralik: -Selle õppetunni lõpuks oskate: +**Nii teed seda:** -- Tõhusalt kasutada koodi redaktorit mis tahes projekti jaoks, igal pool -- Sujuvalt jälgida oma tööd sisseehitatud versioonihalduse abil -- Kohandada ja täiustada oma arenduskeskkonda redaktori seadistuste ja laiendustega +1. Mine aadressile [vscode.dev](https://vscode.dev), kui sa pole seal veel +2. Otsi tervituslehel nuppu "Open Remote Repository" ja klõpsa -*** + ![Ava kaughoidla](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.et.png) -## Eeltingimused +3. Kleebi siia mistahes GitHubi hoidla URL (proovi seda: `https://github.com/microsoft/Web-Dev-For-Beginners`) +4. Vajuta Enter ja vaata imet! -Alustamiseks **registreerige tasuta [GitHubi](https://github.com) konto**, mis võimaldab teil hallata koodirepositooriume ja teha koostööd üle maailma. Kui teil pole veel kontot, [looge see siin](https://github.com/). +**Pro nipp – Command Palette otsetee:** -*** +Tahad tunda end nagu koodimise võlur? Proovi klaviatuuri otseteed Ctrl+Shift+P (või Cmd+Shift+P Macil), et avada Command Palette: -## Miks kasutada veebipõhist koodi redaktorit? +![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.et.png) -**Koodi redaktor**, nagu VSCode.dev, on teie juhtimiskeskus koodi kirjutamiseks, redigeerimiseks ja haldamiseks. Intuitiivse liidese, rohkete funktsioonide ja brauseri kaudu kohese juurdepääsuga saate: +**Command Palette on nagu otsingumootor kõigile sinu tehtavatele asjadele:** +- Kirjuta "open remote" ja see leiab hoidla avaja sinu eest +- Mäletab viimati avatud hoidlaid (üllatavalt kasulik!) +- Kui harjud selle kasutama, tundub nagu kodeeriksid välkkiirusel +- Tegelikult on see VSCode.devi variatsioon sellele, nagu öelda "Hey Siri, aga koodi jaoks" -- Redigeerida projekte mis tahes seadmes -- Vältida installimisega seotud tülikust -- Koostööd teha ja panustada koheselt +### Meetod 2: URL-i muutmise meetod -Kui olete VSCode.dev-iga mugav, olete valmis lahendama koodiga seotud ülesandeid igal ajal ja igal pool. +Nii nagu HTTP ja HTTPS kasutavad erinevaid protokolle, hoides samas domeeni struktuuri, kasutab VSCode.dev URL-it, mis peegeldab GitHubi aadressimustrit. Iga GitHubi hoidla URL-i saab muuta, et see avada otse VSCode.devis. -*** +**URL-i teisendamise muster:** -## VSCode.dev kasutamise alustamine +| Hoidla tüüp | GitHubi URL | VSCode.devi URL | +|----------------|---------------------|----------------| +| **Avalik hoidla** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` | +| **Isiklik projekt** | `github.com/sinu-kasutajanimi/minu-projekt` | `vscode.dev/github/sinu-kasutajanimi/minu-projekt` | +| **Mingi ligipääsetav hoidla** | `github.com/nende-kasutajanimi/lahe-hoidla` | `vscode.dev/github/nende-kasutajanimi/lahe-hoidla` | -Liikuge **[VSCode.dev](https://vscode.dev)** lehele—ei installimist, ei allalaadimist. GitHubiga sisselogimine avab täieliku juurdepääsu, sealhulgas teie seadistuste, laienduste ja repositooriumide sünkroonimise. Kui küsitakse, ühendage oma GitHubi konto. +**Rakendus:** +- Asenda `github.com` osaks `vscode.dev/github` +- Kõik teised URL-i osad jäävad muutmata +- Toimib kõikide avalikult ligipääsetavate hoidlate puhul +- Pakub kohest redigeerimisvõimalust -Pärast laadimist näeb teie tööruum välja selline: +> 💡 **Elumuutev nipp**: Jäädvusta järjehoidjatena VSCode.devi versioonid oma lemmikhoidlatest. Mul on järjehoidjad nagu "Redigeeri oma portfooliot" ja "Paranda dokumentatsiooni", mis viivad mind otse redigeerimisrežiimi! -![Vaikimisi VSCode.dev](../images/default-vscode-dev Kolm põhiosa vasakult paremale: -- **Tegevusriba:** Ikonid nagu 🔎 (Otsing), ⚙️ (Seaded), failid, versioonihaldus jne. -- **Külgriba:** Muutub vastavalt valitud tegevusriba ikoonile (vaikimisi *Explorer*, et näidata faile). -- **Redaktori/koodi ala:** Suurim osa paremal—koht, kus tegelikult koodi redigeerite ja vaatate. +**Millist meetodit kasutada?** +- **Liidese meetod**: Hea, kui uurid või ei mäleta kokkulepitud hoidlate nimesid +- **URL trikiga**: Täiuslik kiireks ligipääsuks, kui tead täpselt, kuhu minna -Klõpsake ikoonidel, et funktsioone uurida, kuid naaske _Explorer_ juurde, et oma koht säilitada. +### 🎯 Pedagoogiline paus: Pilvearenduse ligipääs -*** +**Peatu ja mõtle**: Õppisid just kahte viisi, kuidas veebibrauseri kaudu koodihaldushoidlatesse ligipääsu saada. See tähistab fundamentaalset muutust arendustegevuses. -## GitHubi repositooriumi avamine +**Kiire enesehindamine**: +- Kas oskad selgitada, miks veebipõhine redigeerimine kaotab traditsioonilise “arenduskeskkonna seadistamise” vajaduse? +- Milliseid eeliseid pakub URL-i muutmisvõte võrreldes kohaliku git kloonimisega? +- Kuidas muudab see lähenemine sinu võimalikku panust avatud lähtekoodiga projektidesse? -### Meetod 1: Redaktori kaudu +**Tegelik maailm**: Suured firmad nagu GitHub, GitLab ja Replit on ehitanud oma arendusplatvormid nende pilve-esmastel põhimõtetel. Õpid samu töövooge, mida kasutavad professionaalsed arendusmeeskonnad üle maailma. -1. Minge [VSCode.dev](https://vscode.dev) lehele. Klõpsake **"Open Remote Repository."** +**Väljakutse küsimus**: Kuidas võib pilvepõhine arendus muuta koodi õpetamist koolides? Mõtle seadmete nõuetele, tarkvara haldusele ja koostöövõimalustele. - ![Ava kaugrepositoorium](../../../../8-code-editor/images/open-remote-repository Kasutage _Command Palette_ (Ctrl-Shift-P või Cmd-Shift-P Macis). +## Failide ja projektidega töötamine - ![Paleti menüü](../images/palette-menu.png Ava kaugrepositoorium.” - - Valige see valik. - - Kleepige oma GitHubi repo URL (nt `https://github.com/microsoft/Web-Dev-For-Beginners`) ja vajutage Enter. +Kui hoidla on avatud, asume ehitama! VSCode.dev annab kõik vahendid, mida vajad, et luua, redigeerida ja korrastada oma koodifaile. Mõtle sellest kui oma digitaalsest töökojast – iga tööriist on täpselt seal, kus vaja. -Kui õnnestub, näete kogu projekti laadituna ja redigeerimiseks valmis! +Vaatame iga päevaseid toiminguid, mis moodustavad suurema osa sinu koodi töövoost. -*** +### Uute failide loomine -### Meetod 2: Kohene avamine URL-i kaudu +Nii nagu arhitekti kontoris sinised trükid organiseeritud on, järgib faililoome VSCode.devis struktureeritud lähenemist. Süsteem toetab kõiki tavalisi veebiarenduse failitüüpe. -Muutke mis tahes GitHubi repo URL, et avada see otse VSCode.dev-is, asendades `github.com` `vscode.dev/github`-iga. -Näiteks: +**Faili loomise protsess:** -- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners` -- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners` +1. Navigeeri Explorer külgpaanil sihtkausta +2. Liigu hiirega kausta nime kohale, et ilmuks ikoon "New File" (📄+) +3. Sisesta failinimi koos sobiva laiendiga (`style.css`, `script.js`, `index.html`) +4. Vajuta Enter, et fail luua -See funktsioon kiirendab mis tahes projekti kiiret avamist. +![Uue faili loomine](../../../../translated_images/create-new-file.2814e609c2af9aeb.et.png) -*** +**Nimeandmise soovitused:** +- Kasuta kirjeldavaid nimesid, mis viitavad faili eesmärgile +- Lisa faililaiendid, et süntaksi esiletõstmine töötaks +- Järgi projektides järjepidevaid nimetamismustreid +- Kasuta väiketähti ja sidekriipse tühikute asemel -## Failide redigeerimine projektis +### Failide redigeerimine ja salvestamine -Kui teie repo on avatud, saate: +Siin algab tõeline lõbu! VSCode.devi redaktor on täis abistavaid omadusi, mis muudavad kodeerimise sujuvaks ja intuitiivseks. See on nagu väga nutikas kirjutamisassistent, aga koodile. -### 1. **Luua uue faili** -- *Explorer* külgribal liikuge soovitud kausta või kasutage juurkausta. -- Klõpsake _‘New file ...’_ ikooni. -- Pange failile nimi, vajutage **Enter**, ja fail ilmub koheselt. +**Sinu redigeerimisvoog:** -![Loo uus fail](../images/create-new-file 2. **Redigeeri ja salvesta faile** +1. Klõpsa suvalisel Exploreris oleval failil, et avada see peaaknas +2. Hakka kirjutama ja jälgi, kuidas VSCode.dev aitab värvide, soovituste ja vigade leidmisega +3. Salvesta töö Ctrl+S (Windows/Linux) või Cmd+S (Mac) – kuigi see salvestab ka automaatselt! -- Klõpsake *Explorer* failil, et avada see koodialas. -- Tehke vajalikud muudatused. -- VSCode.dev salvestab muudatused automaatselt, kuid saate käsitsi salvestada, vajutades Ctrl+S. +![Faili redigeerimine VSCode.devis](../../../../translated_images/edit-a-file.52c0ee665ef19f08.et.png) -![Redigeeri faili](../images/edit-a-file.png. **Jälgi ja kinnita muudatusi versioonihaldusega** +**Mis toimub, kui koodid:** +- Sinu kood saab kaunilt värvitud ja on lihtsam lugeda +- VSCode.dev pakub täitmisi, kui tipid (nagu õigekirjakontroll, aga palju nutikam) +- Enne salvestamist tabab trükivigu ja vigu +- Sa võid avada mitu faili vahelehtedel nagu brauseris +- Kõik salvestatakse taustal automaatselt -VSCode.dev sisaldab integreeritud **Git** versioonihaldust! +> ⚠️ **Kiire nipp**: Kuigi automaatsalvestus on aktiivne, on hea harjumus vajutada Ctrl+S või Cmd+S. See salvestab koheselt kõik ja käivitab lisafunktsioonid nagu vigade kontrolli. -- Klõpsake _'Source Control'_ ikooni, et näha kõiki tehtud muudatusi. -- Failid `Changes` kaustas näitavad lisamisi (roheline) ja kustutamisi (punane). - ![Vaata muudatusi](../images/working-tree.png Muudatused, klõpsates `+` failide kõrval, et valmistada ette kinnitamiseks. -- **Loobu** soovimatutest muudatustest, klõpsates tagasivõtuikooni. -- Sisestage selge kinnitussõnum, seejärel klõpsake linnukest, et kinnitada ja lükata muudatused üles. +### Versioonihaldus Gitiga -Tagasi GitHubi repositooriumisse naasmiseks valige vasakpoolne hamburgerimenüü. +Nii nagu arheoloogid teevad täpseid kirjeid kaevamiskihistest, jälgib Git sinu koodi muudatusi aja jooksul. See süsteem säilitab projekti ajaloo ja võimaldab vajadusel varasemate versioonide juurde tagasi minna. VSCode.dev sisaldab integreeritud Git funktsionaalsust. -![Etapp ja kinnita muudatused](../images/edit-vscode.dev Laiendustega +**Source Control liides:** -Laiendused võimaldavad lisada keeli, teemasid, silureid ja tootlikkuse tööriistu VSCode.dev-ile—muutes teie koodikirjutamise lihtsamaks ja lõbusamaks. +1. Ava Source Control paneel 🌿 ikooni kaudu Activity Baril +2. Muudetud failid ilmuvad jaotises "Changes" +3. Värvikood näitab muudatuste liike: roheline lisandumised, punane kustutamised + +![Muudatuste vaatamine Source Control paneelis](../../../../translated_images/working-tree.c58eec08e6335c79.et.png) + +**Töö salvestamine (commit töövoog):** + +```mermaid +flowchart TD + A[Muuda faile] --> B[Vaata muudatusi allika juhtimises] + B --> C[Lisa muudatused etapidklõpsuga +] + C --> D[Kirjuta kirjeldav commit sõnum] + D --> E[Klõpsa linnukesel commitimiseks] + E --> F[Muudatused lükatakse GitHubi] +``` +```mermaid +stateDiagram-v2 + [*] --> Modified: Failide muutmine + Modified --> Staged: Vajuta + lisamiseks + Staged --> Modified: Vajuta - eemaldamiseks + Staged --> Committed: Lisa sõnum ja kinnita + Committed --> [*]: Sünkrooni GitHubiga + + state Committed { + [*] --> LocalCommit + LocalCommit --> RemotePush: Automaatne sünkroonimine + } +``` +**Sinu samm-sammuline protsess:** +- Klõpsa "+" ikoonile nende failide kõrval, mida soovid salvestada (see "stage'-ib" need) +- Kontrolli hoolikalt, kas oled rahul kõigi oma lavastatud muudatustega +- Kirjuta lühike märkus, mis selgitab, mida tegid (see on sinu "commit message") +- Klõpsa linnukese ikoonil, et kõik GitHubi salvestada +- Kui muudad meelt, laseb tagasi võtmise ikoon muudatused tagasi võtta + +**Heade commit-kirjete kirjutamine (see on lihtsam kui arvad!):** +- Kirjelda lihtsalt, mida tegid, näiteks "Lisa kontaktvorm" või "Paranda katkine navigeerimine" +- Hoia see lühike ja mõnus – mõtle tweet pikkusele, mitte esseele +- Alusta tegusõnaga nagu "Lisa", "Paranda", "Uuenda" või "Eemalda" +- **Head näited:** "Lisa responsiivne navigeerimismenüü", "Paranda mobiilivaate probleemid", "Uuenda värve parema ligipääsetavuse jaoks" + +> 💡 **Kiirnavigeerimise näpunäide**: Kasuta hamburger-menüüd (☰) vasakus ülanurgas, et hüpata tagasi oma GitHubi repositooriumi ja näha oma commititud muudatusi veebis. See on nagu portaal sinu redigeerimiskeskkonna ja projekti kodu GitHubis vahel! + +## Funktsionaalsuse täiustamine laiendustega + +Nii nagu käsitöölise töökojas on spetsiaalsed tööriistad erinevate ülesannete jaoks, saab ka VSCode.devi kohandada laiendustega, mis lisavad spetsiifilisi võimeid. Need kogukonna loodud pluginad lahendavad levinud arendaja vajadusi nagu koodi vormindamine, reaalajas eelvaade ja täiustatud Git integratsioon. + +Laienduste turg sisaldab tuhandeid tasuta tööriistu, mida on loonud arendajad üle kogu maailma. Iga laiendus lahendab konkreetseid töövoo väljakutseid, võimaldades sul luua isikupärastatud arenduskeskkonna, mis vastab sinu spetsiifilistele vajadustele ja eelistustele. + +```mermaid +mindmap + root((Laienduste Ökosüsteem)) + Essential Categories + Tootlikkus + Live Server + Auto Rename Tag + Bracket Pair Colorizer + GitLens + Koodi Kvaliteet + Prettier + ESLint + Spell Checker + Error Lens + Keelte Tugi + HTML CSS Support + JavaScript ES6 + Python Extension + Markdown Preview + Teemad & Kasutajaliides + Dark+ Modern + Material Icon Theme + Peacock + Rainbow Brackets + Discovery Methods + Populaarsed Edetabelid + Laadimiste Arvud + Kasutajate Hinnangud + Viimased Uuendused + Kogukonna Arvustused + Soovitused + Tööruumi Soovitused + Keelepõhised + Töövoo-spetsiifilised + Meeskonna Standardid +``` +### Sinu täiuslike laienduste leidmine + +Laienduste turg on tõesti hästi organiseeritud, seega sa ei eksle, kui otsid, mida vajad. See on loodud aitama avastada nii spetsiifilisi tööriistu kui ka lahedaid asju, millest sa varem teadlik ei olnud! + +**Kuidas turule jõuda:** + +1. Klõpsa tegevusribal laienduste ikoonile (🧩) +2. Sirvi või otsi midagi kindlat +3. Klõpsa kõigile huvitavatele laiendustele, et rohkem teada saada + +![Laienduste turu liides](../../../../translated_images/extensions.eca0e0c7f59a10b5.et.png) + +**Mida seal näed:** + +| Sektsioon | Sisu | Miks see kasulik on | +|----------|---------|----------| +| **Paigaldatud** | Laiendused, mille oled juba lisanud | Sinu isiklik kooditööriistakast | +| **Populaarsed** | Rahva lemmikud | Mis paljude arendajate lemmikud on | +| **Soovitatud** | Nutikad soovitused sinu projektile | VSCode.devi kasulikud soovitused | + +**Mugavaks sirvimiseks:** +- Iga laiendus näitab hinnanguid, allalaadimiste arvu ja kasutajate arvustusi +- Saad ekraanipilte ja selgeid kirjeldusi, mida igaüks teha saab +- Kõik on selgelt märgistatud ühilduvusinfoga +- Pakutakse sarnaseid laiendusi, et saaksid võrrelda võimalusi + +### Laienduste paigaldamine (see on väga lihtne!) + +Uute võimaluste lisamine oma redaktorile on sama lihtne kui ühe nupu klõpsamine. Laiendused paigaldatakse sekunditega ja hakkavad kohe tööle – pole vaja taaskäivitada ega oodata. + +**Kõik, mida pead tegema:** + +1. Otsi see, mida tahad (proovi otsida "live server" või "prettier") +2. Klõpsa ühele, mis tundub hea, et näha rohkem detaile +3. Loe, mida see teeb, ja vaata hinnanguid +4. Vajuta sinist "Paigalda" nuppu ja ongi tehtud! + +![Laienduste paigaldamine](../../../../8-code-editor/images/install-extension.gif) + +**Mis toimub tagaplaanil:** +- Laiendus laaditakse alla ja seadistatakse automaatselt +- Uued funktsioonid ilmuvad kohe su liidesesse +- Kõik hakkab koheselt tööle (tõesti, nii kiiresti!) +- Kui oled sisse logitud, sünkroniseeritakse laiendus kõigi su seadmetega + +**Mõned laiendused, mida soovitan alustada:** +- **Live Server**: Näed oma veebilehe muudatusi reaalajas koodides (see on maagiline!) +- **Prettier**: Muudab su koodi automaatselt puhtaks ja professionaalseks +- **Auto Rename Tag**: Muudad ühe HTML sildi ja selle paar uuendatakse ka +- **Bracket Pair Colorizer**: Värvib sulud nii, et sa ei kao kunagi ära +- **GitLens**: Tugevdab su Git funktsioone hulga kasuliku infoga + +### Oma laienduste kohandamine + +Enamikul laiendustest on seaded, mida saad muuta, et need töötaksid just nii nagu sulle meeldib. Mõtle sellele nagu auto iste ja peeglite seadistamine – kõigil on omad eelistused! + +**Laienduste seadete muutmine:** + +1. Leia oma paigaldatud laiendus laienduste paneelis +2. Otsi selle nime kõrval väikest hammasratta ikooni (⚙️) ja klõpsa sellel +3. Vali rippmenüüst "Extension Settings" +4. Muuda seadeid, kuni need sobivad su töövooga ideaalselt + +![Laienduste seadete kohandamine](../../../../translated_images/extension-settings.21c752ae4f4cdb78.et.png) + +**Tavalised asjad, mida võid tahtagi sättida:** +- Kuidas su kood vormindatakse (tabid vs tühikud, rea pikkus jms) +- Millised kiirklahvid käivitavad erinevaid toiminguid +- Millist tüüpi failidega laiendus peaks töötama +- Spetsiifiliste funktsioonide sisse- või väljalülitamine, et hoida puhtust + +### Oma laienduste korrashoid + +Kui avastad rohkem lahedaid laiendusi, tahad hoida oma kollektsiooni korras ja sujuvalt töötavana. VSCode.dev teeb selle väga lihtsaks hallata. + +**Sinu laienduste haldamise võimalused:** + +| Mida Sa Võid Teha | Millal See Kasulik On | Pro näpunäide | +|--------|---------|----------| +| **Keela** | Testimaks, kas mõni laiendus põhjustab probleeme | Parem kui desinstallida, kui võib hiljem tarvis minna | +| **Desinstalli** | Täielikult vabane laiendustest, mida ei vaja | Hoiab su keskkonna puhtana ja kiiremana | +| **Uuenda** | Saa uusimad funktsioonid ja vigade parandused | Tavaliselt käib automaatselt, aga tasub kontrollida | + +**Kuidas mulle meeldib laiendusi hallata:** +- Mõne kuu tagant vaatan üle, mida olen paigaldanud ja eemaldan mittevajalikud +- Hoian laiendusi kursis, et saada uusimaid täiustusi ja turvaparandusi +- Kui midagi tundub aeglane, keelan ajutiselt laiendused, et näha, kas mõni neist on põhjus +- Loe uuenduste märkmeid, kui tuleb suuri uuendusi – mõnikord on lahedad uued funktsioonid! + +> ⚠️ **Jõudluse näpunäide**: Laiendused on toredad, aga liiga palju võib aeglustada. Keskendu neile, mis päriselt su elu lihtsamaks teevad, ja ära karda eemaldada neid, mida sa kunagi ei kasuta. + +### 🎯 Pedagoogiline kontroll: Arenduskeskkonna kohandamine + +**Arhitektuuri mõistmine**: Oled õppinud kohandama professionaalset arenduskeskkonda kogukonna loodud laienduste abil. See peegeldab, kuidas ettevõtete arendusmeeskonnad ehitavad standardiseeritud tööriistakomplekte. + +**Olulised kontseptsioonid, mida omandatud**: +- **Laienduste leidmine**: Leida tööriistu, mis lahendavad kindlaid arenduse väljakutseid +- **Keskkonna konfiguratsioon**: Kohandada tööriistu vastavalt isiklikele või meeskonna eelistustele +- **Jõudluse optimeerimine**: Tasakaalustada funktsionaalsus süsteemi jõudlusega +- **Kogukonna koostöö**: Kasutada ülemaailmse arendajate kogukonna loodud tööriistu + +**Tööstuse seos**: Laienduste ökosüsteemid toidavad suuri arendusplatvorme nagu VS Code, Chrome DevTools ja moodsad IDE-d. Laienduste hindamise, installimise ja seadistamise oskus on professionaalsete arendusprotsesside jaoks hädavajalik. + +**Mõtiskluse küsimus**: Kuidas sa läheneksid 10-liikmelise arendusmeeskonna standardiseeritud arenduskeskkonna ülesseadmisel? Mõtle järjepidevusele, jõudlusele ja individuaalsetele eelistustele. + +## 📈 Sinu pilvepõhise arenduse meistriklassi ajaskaala + +```mermaid +timeline + title Professionaalne pilve arendusreis + + section Platvormi alused + Pilve arenduse mõistmine + : Valda veebipõhise redigeerimise kontseptsioone + : Ühenda GitHubi integratsioonimustreid + : Liigu professionaalsete liideste vahel + + section Töövoo valdamine + Faili- ja projektihaldus + : Loo organiseeritud projektistruktuurid + : Valda süntaksi esiletõstmise eeliseid + : Halda mitme-faili redigeerimise töövooge + + Versioonikontrolli integratsioon + : Mõista Giti visualiseerimist + : Harjuta commit-sõnumite standardeid + : Valda muudatuste jälgimise töövooge + + section Keskkonna kohandamine + Laienduste ökosüsteem + : Avastage tootlikkust suurendavad laiendused + : Sea arenduseelistusi + : Optimeeri jõudlust ja funktsionaalsust + + Professionaalne seadistus + : Loo järjepidevad töövood + : Loo taaskasutatavaid konfiguratsioone + : Kehtesta meeskonna standardid + + section Tööstuse valmisolek + Pilve-esmane arendus + : Valda kaug-arenduse praktikaid + : Mõista koostöö töövooge + : Loo platvormist sõltumatud oskused + + Professionaalsed tavad + : Järgi tööstuse standardeid + : Loo hooldatavaid töövooge + : Valmista ette meeskonnakeskkondi +``` +**🎓 Lõpetamise verstapost**: Oled edukalt omandanud pilvepõhise arenduse kasutades samu tööriistu ja töövooge, mida kasutavad professionaalsed arendajad suurtes tehnoloogiafirmades. Need oskused tähistavad tarkvaraarenduse tulevikku. + +**🔄 Järgmise taseme võimed**: +- Valmis avastama arenenud pilvearenduse platvorme (Codespaces, GitPod) +- Valmis töötama hajutatud arendusmeeskondades +- Võimeline panustama avatud lähtekoodiga projektidesse üle maailma +- Vundament moodsale DevOpsi ja pideva integratsiooni praktikatele + +## GitHub Copilot Agent Väljakutse 🚀 + +Nii nagu NASA kasutab kosmosemissioonide jaoks struktureeritud lähenemist, hõlmab see väljakutse VSCode.devi oskuste süsteemset rakendamist terviklikus töövoo stsenaariumis. + +**Eesmärk:** Tõesta oma oskusi VSCode.devis, luues põhjaliku veebiarenduse töövoo. + +**Projekti nõuded:** Agent režiimi abiga tee ära järgmised ülesanded: +1. Tee olemasolevast repositooriumist fork või loo uus +2. Loo toimiv projektistruktuur HTML, CSS ja JavaScript failidega +3. Paigalda ja konfigureeri kolm arendust täiustavat laiendust +4. Harjuta versioonihaldust kirjeldavate commit-kirjetega +5. Katseta funktsiooniharude loomist ja muutmist +6. Dokumenteeri protsess ja õppetunnid README.md faili + +See harjutus koondab kõik VSCode.devi kontseptsioonid praktiliseks töövooks, mida saad rakendada tulevates arendusprojektides. + +Loe rohkem [agent-režiimi](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kohta siin. -### Laienduste sirvimine ja haldamine - -- Klõpsake **Laienduste ikooni** tegevusribal. -- Otsige laiendust _'Search Extensions in Marketplace'_ kastis. - - ![Laienduse üksikasjad](../images/extension-details: - - **Paigaldatud**: Kõik lisatud laiendused - - **Populaarsed**: Tööstuse lemmikud - - **Soovitatud**: Kohandatud teie töövoo jaoks - - ![Vaata laiendusi]( - - - -*** - -### 1. **Installi laiendused** - -- Sisestage laienduse nimi otsingusse, klõpsake seda ja vaadake üksikasju redaktoris. -- Vajutage **sinist Installi nuppu** külgribal _või_ peamises koodialas. - - ![Installi laiendused](../images/install-extension 2. **Kohanda laiendusi** - -- Leidke oma paigaldatud laiendus. -- Klõpsake **Hammasratta ikooni** → valige _Extension Settings_, et peenhäälestada käitumist vastavalt oma eelistustele. +## Ülesanne - ![Muuda laienduse seadeid](../images/extension-settings 3. **Halda laiendusi** -Saate: +On aeg proovile panna need oskused päris projektis! Mul on praktiline ülesanne, mis laseb sul harjutada kõike, mida oleme käsitlenud: [Loo CV veebileht kasutades VSCode.devi](./assignment.md) -- **Keelata:** Ajutiselt välja lülitada laienduse, säilitades selle paigaldatuna -- **Desinstallida:** Püsivalt eemaldada, kui seda enam ei vajata +See ülesanne juhendab sind läbi professionaalse CV veebisaidi loomise täielikult brauseris. Kasutad kõiki VSCode.devi funktsioone, mida oleme uurinud, ja lõpuks on sul nii suurepärane veebileht kui ka kindel enesetunne uue töövoo osas. - Leidke laiendus, vajutage Hammasratta ikooni ja valige ‘Disable’ või ‘Uninstall,’ või kasutage siniseid nuppe koodialas. +## Jätka avastamist ja oma oskuste kasvatamist -*** +Sul on nüüd tugev vundament olemas, aga on veel nii palju lahedaid asju, mida avastada! Siin on mõned ressursid ja ideed, kuidas viia oma VSCode.devi oskused järgmisele tasandile: -## Ülesanne +**Ametlik dokumentatsioon, mida tasub järjehoidjates hoida:** +- [VSCode Web Dokumentatsioon](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Täielik juhend brauseripõhiseks redigeerimiseks +- [GitHub Codespaces](https://docs.github.com/en/codespaces) – Kui vajad pilves veelgi rohkem võimsust -Proovige oma oskusi: [Looge CV veebisait, kasutades vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md) +**Lahedad funktsioonid, millega järgmisena katsetada:** +- **Klaviatuuri kiirklahvid**: Õpi kombinatsioone, mis teevad sinust koodipeedi ninja +- **Tööruumi sätted**: Sea üles erinevad keskkonnad erinevate projektitüüpide jaoks +- **Mitme juurega tööruumid**: Töötle mitut repositooriumi samaaegselt (väga mugav!) +- **Terminali integratsioon**: Kasuta käsurea tööriistu otse brauseris -*** +**Praktikaks mõtted:** +- Sukeldu mõnda avatud lähtekoodiga projekti ja panusta VSCode.devi abil – see on suurepärane viis tagasi anda! +- Proovi erinevaid laiendusi, et leida oma ideaalne seadistus +- Loo projektimallid kõige sagedamini ehitatavate saitide jaoks +- Harjuta Git töövooge nagu harude loomine ja ühendamine – need oskused on meeskonnaprojektides kullaväärtusega -## Edasine uurimine ja iseseisev õppimine +--- -- Süvenege [ametlikesse VSCode veebidokumentidesse](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza). -- Avastage edasijõudnud tööruumi funktsioone, kiirklahve ja seadeid. +**Oled omandanud brauseripõhise arenduse meistriks!** 🎉 Nii nagu kaasaskantavate instrumentide leiutamine võimaldas teadlastel uurimistööd teha kaugetes paikades, võimaldab VSCode.dev professionaalset kodeerimist mis tahes internetiühendusega seadmest. -*** +Need oskused peegeldavad tänaseid tööstustavasid – paljud professionaalsed arendajad kasutavad pilvepõhiseid arenduskeskkondi nende paindlikkuse ja ligipääsetavuse tõttu. Oled õppinud töövoo, mis skaleerub üksikprojektidest kuni suurte meeskonnatööde koostöödeni. -**Nüüd olete valmis koodi kirjutama, looma ja koostööd tegema—igal pool, igas seadmes, kasutades VSCode.dev-i!** +Rakenda neid tehnikaid oma järgmises arendusprojektis! 🚀 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüdleme täpsuse poole, tuleb arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/8-code-editor/1-using-a-code-editor/assignment.md b/translations/et/8-code-editor/1-using-a-code-editor/assignment.md index 103ec8d5..0046e9ab 100644 --- a/translations/et/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/et/8-code-editor/1-using-a-code-editor/assignment.md @@ -1,263 +1,591 @@ -# Loo CV-veebileht kasutades vscode.dev +# Loo CV veebileht kasutades VSCode.dev -_Kui lahe oleks, kui värbaja küsiks sinu CV-d ja sa saadaksid talle lihtsalt URL-i?_ 😎 +Muuda oma karjääriväljavaateid, luues professionaalse CV veebilehe, mis tutvustab sinu oskusi ja kogemusi interaktiivses, moodsas vormingus. Traditsiooniliste PDF-de saatmise asemel kujuta ette, et võimaldad värbajatel kasutada stiilset, reageerivat veebilehte, mis demonstreerib nii sinu kvalifikatsiooni kui ka veebiarenduse võimeid. - +See praktiline ülesanne paneb proovile kõik sinu VSCode.dev oskused, luues samal ajal midagi tõeliselt kasulikku sinu karjääri jaoks. Sa koged kogu veebiarenduse tööd — alates hoidla loomisest kuni juurutamiseni — kõik otse brauseris. - +Selle projekti lõpetamisel on sul olemas professionaalne veebipõhine kohalolek, mida saab kergesti jagada potentsiaalsete tööandjatega, uuendada vastavalt oskuste kasvule ning kohandada oma isikliku brändiga. See on just selline praktiline projekt, mis demonstreerib reaalse maailma veebiarenduse oskusi. -## Eesmärgid +## Õpieesmärgid -Pärast seda ülesannet õpid: +Pärast selle ülesande lõpetamist oskad: -- Looma veebilehte, et esitleda oma CV-d +- **Luuа** ja hallata täielikku veebiarendusprojekti, kasutades VSCode.dev-i +- **Struktureerida** professionaalset veebilehte, kasutades semantilisi HTML elemente +- **Stiilida** reageerivaid paigutusi kaasaegsete CSS tehnikatega +- **Teostada** interaktiivseid funktsioone, kasutades põhilisi veebitehnoloogiaid +- **Juurutada** eluvat veebisaiti, mis on ligipääsetav jagatava URL-i kaudu +- **Näidata** versioonikontrolli parimaid tavasid kogu arendusprotsessi vältel -### Eeltingimused +## Eeltingimused -1. GitHubi konto. Mine [GitHub](https://github.com/) lehele ja loo konto, kui sul seda veel pole. +Enne selle ülesande alustamist veendu, et Sul on: -## Sammud +- GitHub konto (vajadusel loo see aadressil [github.com](https://github.com/)) +- Läbitud VSCode.dev õppetund, mis käsitleb liidese navigeerimist ja põhilisi toiminguid +- Põhiline arusaam HTML struktuurist ja CSS stiilidest -**Samm 1:** Loo uus GitHubi repositoorium ja anna sellele nimi `my-resume` +## Projekti seadistamine ja hoidla loomine -**Samm 2:** Loo `index.html` fail oma repositooriumis. Lisame vähemalt ühe faili otse github.com lehel, kuna tühja repositooriumi ei saa avada vscode.dev keskkonnas. +Alustame oma projekti vundamendi seadistamisest. See protsess peegeldab reaalseid arendusvooge, kus projektid algavad korrapärase hoidla initsialiseerimise ja struktuuri planeerimisega. -Klõpsa lingil `creating a new file`, sisesta failinimi `index.html` ja vali nupp `Commit new file`. +### Samm 1: Loo oma GitHubi hoidla -![Loo uus fail github.com lehel](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.et.png) +Pühendatud hoidla loomine tagab, et su projekt on algusest peale hästi organiseeritud ja versioonikontrolli all. -**Samm 3:** Ava [VSCode.dev](https://vscode.dev) ja vali nupp `Open Remote Repository`. +1. **Mine** aadressile [GitHub.com](https://github.com) ja logi sisse +2. **Klõpsa** rohelisele nupule "New" või "+” ikoonile paremas ülanurgas +3. **Nimeta** oma hoidla `my-resume` (või vali isikupärane nimi nagu `john-smith-resume`) +4. **Lisa** lühike kirjeldus: "Professionaalne CV veebileht, ehitatud HTML ja CSS-iga" +5. **Vali** "Public", et su CV oleks ligipääsetav potentsiaalsetele tööandjatele +6. **Märgi** "Add a README file" algse projekti kirjelduse loomiseks +7. **Klõpsa** "Create repository", et seadistamine lõpetada -Kopeeri URL repositooriumist, mille just oma CV-lehe jaoks lõid, ja kleebi see sisendkasti: +> 💡 **Hoidla nime valiku nõuanne**: Kasuta kirjeldavaid, professionaalseid nimesid, mis selgelt näitavad projekti eesmärki. See aitab tööandjale jagamisel või portfoolio ülevaatamisel. -_Asenda `your-username` oma GitHubi kasutajanimega._ +### Samm 2: Initsialiseeri projekti struktuur +Kuna VSCode.dev vajab hoidla avamiseks vähemalt ühe faili olemasolu, loome oma põhisisu HTML faili otse GitHubis enne veebiredaktorisse vahetamist. + +1. **Klõpsa** lingil "creating a new file" uues hoidlas +2. **Kirjuta** faili nimeks `index.html` +3. **Lisa** see algne HTML struktuur: + +```html + + + + + + Your Name - Professional Resume + + +

Your Name

+

Professional Resume Website

+ + ``` -https://github.com/your-username/my-resume -``` -✅ Kui edukas, näed oma projekti ja index.html faili avatud tekstiredaktoris brauseris. +4. **Kirjuta** commit sõnum: "Add initial HTML structure" +5. **Klõpsa** "Commit new file", et muudatused salvestada + +![Create initial file on GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.et.png) + +**Selle algse seadistusega saavutad:** +- **Korrektse HTML5 dokumendi struktuuri, kasutades semantilisi elemente** +- **Lisatakse viewport meta silt, mis tagab reageeriva disaini ühilduvuse** +- **Seadistatakse kirjeldav lehe pealkiri, mis kuvatakse brauseri vahekaardil** +- **Luua vundament professionaalse sisu organiseerimiseks** + +## Töö VSCode.dev keskkonnas + +Nüüd, kui hoidla vundament on paigas, liigume edasi VSCode.dev keskkonda põhitöödeks. See veebipõhine redaktor pakub kõiki vajalikke tööriistu professionaalseks veebiarenduseks. + +### Samm 3: Ava oma projekt VSCode.dev-is -![Loo uus fail](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.et.png) +1. **Mine** [vscode.dev](https://vscode.dev) uues brauseri vahelehes +2. **Klõpsa** tervituskuval "Open Remote Repository" +3. **Kopeeri** oma hoidla URL GitHubist ja kleebi see sisestusväljale -**Samm 4:** Ava `index.html` fail, kleebi allolev kood oma koodialale ja salvesta. + Vorming: `https://github.com/your-username/my-resume` + + *Asenda `your-username` oma tegeliku GitHubi kasutajanimega* + +4. **Vajuta** Enter, et laadida oma projekt + +✅ **Õnnestumise märguanne**: Peaksid nägema oma projekti faile Explorer küljeribal ning `index.html` faili, mida saad põhiredaktoris muuta. + +![Project loaded in VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.et.png) + +**Liidese põhielemendid:** +- **Explorer küljeriba**: **Kuvab** sinu hoidla failid ja kaustastruktuuri +- **Redaktori ala**: **Näitab** valitud failide sisu redigeerimiseks +- **Activity bar**: **Pakkuv** ligipääsu tööriistadele nagu Source Control ja Extensions +- **Status bar**: **Näitab** ühenduse olekut ja praegust haru infot + +### Samm 4: Koosta oma CV sisu + +Asenda `index.html` kohatäite sisu põhjaliku CV struktuuriga. See HTML on vundament professionaalse kvalifikatsiooni esitamiseks.
- HTML-kood, mis vastutab sinu CV-veebilehe sisu eest. +Täielik HTML CV struktuur + +```html + + + + + + + + Your Name - Professional Resume + + + - - - - - - Siia tuleb sinu nimi! - - - -
- -
-
-

MINUST

- -

Kirjuta siia lühike tutvustus endast!

-
-
-

TÖÖKOGEMUS

- -

Ametinimetus

-

- Siia tuleb organisatsiooni nimi | Alguskuu – Lõppkuu -

-
    -
  • Ülesanne 1 - Kirjuta, mida tegid!
    • -
  • Ülesanne 2 - Kirjuta, mida tegid!
    • -
  • Kirjuta oma panuse tulemused/mõju
    • - -
-

Ametinimetus 2

-

- Siia tuleb organisatsiooni nimi | Alguskuu – Lõppkuu -

-
    -
  • Ülesanne 1 - Kirjuta, mida tegid!
    • -
  • Ülesanne 2 - Kirjuta, mida tegid!
    • -
  • Kirjuta oma panuse tulemused/mõju
    • - -
-
-
-
- - +
+ + +
+
+

ABOUT

+

Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.

+
+ +
+

WORK EXPERIENCE

+
+

Job Title

+

Company Name | Start Date – End Date

+
    +
  • Describe a key accomplishment or responsibility
    • +
  • Highlight specific skills or technologies used
    • +
  • Quantify impact where possible (e.g., "Improved efficiency by 25%")
    • +
+
+ +
+

Previous Job Title

+

Previous Company | Start Date – End Date

+
    +
  • Focus on transferable skills and achievements
    • +
  • Demonstrate growth and learning progression
    • +
  • Include any leadership or collaboration experiences
    • +
+
+
+ +
+

PROJECTS

+
+

Project Name

+

Brief description of what the project accomplishes and technologies used.

+ View Project +
+
+
+
+ + +```
-Lisa oma CV andmed, et asendada _kohatäite tekst_ HTML-koodis. +**Kohandamise juhised:** +- **Asenda** kogu kohatäidetekst oma tegelike andmetega +- **Kohanda** sektsioone vastavalt kogemuste tasemele ja karjääri fookusele +- **Lisa** või eemalda sektsioone vastavalt vajadusele (nt Sertifikaadid, Vabatahtlik töö, Keeled) +- **Lisa** lingid oma tegelikele profiilidele ja projektidele -**Samm 5:** Liigu My-Resume kausta peale, klõpsa `New File ...` ikoonil ja loo oma projekti jaoks 2 uut faili: `style.css` ja `codeswing.json`. +### Samm 5: Loo tugifailid -**Samm 6:** Ava `style.css` fail, kleebi allolev kood ja salvesta. +Professionaalsed veebilehed vajavad organiseeritud failistruktuuri. Loo CSS stiilileht ja konfiguratsioonifailid, mis on projekti jaoks vajalikud. + +1. **Hõljuta** hiirt oma projekti kausta nime kohal Exploreri küljeribal +2. **Klõpsa** ilmuvale “New File” ikoonile (📄+) +3. **Loo** failid ükshaaval: + - `style.css` (stiilide ja paigutuse jaoks) + - `codeswing.json` (eelvaate laienduse konfiguratsiooniks) + +**CSS faili loomine (`style.css`):**
- CSS-kood, mis kujundab lehe paigutust. - - body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 16px; - max-width: 960px; - margin: auto; - } - h1 { - font-size: 3em; - letter-spacing: .6em; - padding-top: 1em; - padding-bottom: 1em; - } - - h2 { - font-size: 1.5em; - padding-bottom: 1em; - } - - h3 { - font-size: 1em; - padding-bottom: 1em; - } - main { - display: grid; - grid-template-columns: 40% 60%; - margin-top: 3em; - } - header { - text-align: center; - margin: auto 2em; - } - - section { - margin: auto 1em 4em 2em; - } - - i { - margin-right: .5em; - } - - p { - margin: .2em auto - } - - hr { - border: none; - background-color: lightgray; - height: 1px; - } - - h1, h2, h3 { - font-weight: 100; - margin-bottom: 0; - } - #mainLeft { - border-right: 1px solid lightgray; - } - +Professionaalne CSS stiil + +```css +/* Modern Resume Styling */ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 16px; + line-height: 1.6; + max-width: 960px; + margin: 0 auto; + padding: 20px; + color: #333; + background-color: #f9f9f9; +} + +/* Header Styling */ +header { + text-align: center; + margin-bottom: 3em; + padding: 2em; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + font-size: 3em; + letter-spacing: 0.1em; + margin-bottom: 0.2em; + font-weight: 300; +} + +.role { + font-size: 1.3em; + font-weight: 300; + margin: 1em 0; +} + +/* Main Content Layout */ +main { + display: grid; + grid-template-columns: 35% 65%; + gap: 3em; + margin-top: 3em; + background: white; + padding: 2em; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +/* Typography */ +h2 { + font-size: 1.4em; + font-weight: 600; + margin-bottom: 1em; + color: #667eea; + border-bottom: 2px solid #667eea; + padding-bottom: 0.3em; +} + +h3 { + font-size: 1.1em; + font-weight: 600; + margin-bottom: 0.5em; + color: #444; +} + +/* Section Styling */ +section { + margin-bottom: 2.5em; +} + +#mainLeft { + border-right: 1px solid #e0e0e0; + padding-right: 2em; +} + +/* Contact Links */ +section a { + color: #667eea; + text-decoration: none; + transition: color 0.3s ease; +} + +section a:hover { + color: #764ba2; + text-decoration: underline; +} + +/* Icons */ +i { + margin-right: 0.8em; + width: 20px; + text-align: center; + color: #667eea; +} + +/* Lists */ +ul { + list-style: none; + padding-left: 0; +} + +li { + margin: 0.5em 0; + padding: 0.3em 0; + position: relative; +} + +li:before { + content: "▸"; + color: #667eea; + margin-right: 0.5em; +} + +/* Work Experience */ +.job, .project { + margin-bottom: 2em; + padding-bottom: 1.5em; + border-bottom: 1px solid #f0f0f0; +} + +.company { + font-style: italic; + color: #666; + margin-bottom: 0.5em; +} + +/* Responsive Design */ +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + gap: 2em; + } + + #mainLeft { + border-right: none; + border-bottom: 1px solid #e0e0e0; + padding-right: 0; + padding-bottom: 2em; + } + + h1 { + font-size: 2.2em; + } + + body { + padding: 10px; + } +} + +/* Print Styles */ +@media print { + body { + background: white; + color: black; + font-size: 12pt; + } + + header { + background: none; + color: black; + box-shadow: none; + } + + main { + box-shadow: none; + } +} +```
-**Samm 6:** Ava `codeswing.json` fail, kleebi allolev kood ja salvesta. +**Konfiguratsioonifaili loomine (`codeswing.json`):** - { +```json +{ "scripts": [], "styles": [] - } +} +``` + +**CSS omaduste mõistmine:** +- **Kasutab** CSS Grid-i reageeriva ja professionaalse paigutuse loomiseks +- **Rakendab** kaasaegseid värviskeeme gradientsetega päisetes +- **Lisas** hover-efektid ja sujuvad üleminekud interaktiivsuse tagamiseks +- **Pakub** reageerivat disaini, mis töötab kõigil seadmetel +- **Lisab** printimiseks sobilikke stiile PDF genereerimiseks + +### Samm 6: Paigalda ja seadista laiendused + +Laiendused parandavad sinu arenduskogemust, pakkudes live eelvaate võimalusi ning töövoo täiustusi. CodeSwing laiendus on eriti kasulik veebiarendusprojektide puhul. + +**CodeSwing laienduse paigaldamine:** + +1. **Klõpsa** Activity Bari laienduste ikoonile (🧩) +2. **Otsi** turuotsingus "CodeSwing" +3. **Vali** otsingutulemustest CodeSwing laiendus +4. **Klõpsa** sinisel "Install" nupul + +![Installing the CodeSwing extension](../../../../8-code-editor/images/install-extension.gif) + +**Mida CodeSwing pakub:** +- **Võimaldab** sinu veebilehe live eelvaadet redigeerimise ajal +- **Kuvab** muudatused reaalajas, ilma käsitsi värskenduseta +- **Toetab** mitut failitüüpi, sh HTML, CSS ja JavaScript +- **Tagab** integreeritud arenduskeskkonna kogemuse + +**Kiired tulemused pärast paigaldamist:** +Kui CodeSwing on paigaldatud, näed redaktoris oma CV veebilehe live eelvaadet. See võimaldab täpselt näha, kuidas su sait muudatustega muutub. -**Samm 7:** Paigalda `Codeswing laiendus`, et visualiseerida CV-veebilehte koodialal. +![CodeSwing extension showing live preview](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.et.png) -Klõpsa _`Extensions`_ ikoonil tegevusribal ja sisesta Codeswing. Kas klõpsa _sinist installimisnuppu_ laiendatud tegevusribal, et paigaldada, või kasuta installimisnuppu, mis ilmub koodialale, kui valid laienduse, et laadida lisainfot. Kohe pärast laienduse paigaldamist näed oma koodialal muudatusi projektis 😃. +**Täiustatud liidese mõistmine:** +- **Poolitatud vaade**: **Näitab** vasakul koodi ja paremal live eelvaadet +- **Reaalajas värskendus**: **Kajastab** muudatusi kohe sisestamisel +- **Interaktiivne eelvaade**: **Lubab** testida linke ja kasutaja funktsioone +- **Mobiilsimulatsioon**: **Pakkumasi** reageeriva disaini testimise võimalust -![Paigalda laiendused](../../../../8-code-editor/images/install-extension.gif) +### Samm 7: Versioonikontroll ja avaldamine -See on, mida näed oma ekraanil pärast laienduse paigaldamist. +Nüüd kui su CV veebileht on valmis, kasuta Giti töö salvestamiseks ja kättesaadavaks tegemiseks veebis. -![Codeswing laiendus töös](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.et.png) +**Muudatuste kinnitamine:** -Kui oled tehtud muudatustega rahul, liigu `Changes` kausta peale ja klõpsa `+` nuppu, et muudatused lavastada. +1. **Klõpsa** Source Control ikoonile (🌿) Activity Baril +2. **Vaata üle** kõik loodud ja muudetud failid sektsioonis "Changes" +3. **Paiguta** muudatused stseeni, klõpsates "+" ikooni iga faili kõrval +4. **Kirjuta** kirjeldav commit sõnum, näiteks: + - "Add complete resume website with responsive design" + - "Implement professional styling and content structure" +5. **Klõpsa** linnukesel (✓), et commit teha ja muudatused üles laadida -Sisesta commit-sõnum _(Kirjeldus muudatusest, mille tegid projektis)_ ja kinnita muudatused, klõpsates `check`. Kui oled projektiga lõpetanud, vali vasakult ülanurgast hamburgerimenüü ikoon, et naasta GitHubi repositooriumisse. +**Tõhusad commit sõnumite näited:** +- "Add professional resume content and styling" +- "Implement responsive design for mobile compatibility" +- "Update contact information and project links" -Palju õnne 🎉 Sa oled just loonud oma CV-veebilehe kasutades vscode.dev mõne sammuga. +> 💡 **Professionaalne nõuanne**: Hea commit sõnum aitab jälgida projekti arengut ja näitab detaile hindavat suhtumist – omadused, mida tööandjad väärtustavad. -## 🚀 Väljakutse +**Avaldatud saidi ligipääs:** +Kui oled commiti teinud, saad naasta oma GitHubi hoidla juurde, kasutades vasakus ülanurgas menüüd (☰). Sinu CV veebileht on nüüd versioonikontrolli all ja valmis avaldamiseks või jagamiseks. -Ava kaugrepositoorium, millel sul on õigused muudatuste tegemiseks, ja uuenda mõningaid faile. Järgmiseks proovi luua uus haru oma muudatustega ja tee Pull Request. +## Tulemused ja järgmised sammud - +**Palju õnne! 🎉** Oled edukalt loonud professionaalse CV veebilehe kasutades VSCode.dev-i. Sinu projekt demonstreerib: -## Ülevaade ja iseseisev õppimine +**Näidatud tehnilised oskused:** +- **Hoidla haldamine**: Loodud ja organiseeritud täielik projektistruktuur +- **Veebiarendus**: Valmistatud reageeriv veebisait kaasaegse HTML5 ja CSS3-ga +- **Versioonikontroll**: Rakendatud korrektne Git töövoog mõttekate commitidega +- **Tööriistade valdamine**: Tulemuslikult kasutatud VSCode.dev liidest ja laiendussüsteemi + +**Saavutatud professionaalsed tulemused:** +- **Veebipõhine kohalolek**: Jagatav URL, mis tutvustab su kvalifikatsiooni +- **Moodne vorming**: Interaktiivne alternatiiv traditsioonilistele PDF CV-dele +- **Demonstratiivsed oskused**: Konkreetne tõend su veebiarenduse võimete kohta +- **Lihtne uuendamine**: Vundament, mida saab pidevalt täiustada ja kohandada + +### Juurutamise valikud + +Selleks, et su CV oleks kättesaadav tööandjatele, kaalu järgmisi hostinguvõimalusi: + +**GitHub Pages (Soovitatav):** +1. Mine oma hoidla Settings sektsiooni GitHubis +2. Kerige alla "Pages" sektsioonini +3. Vali "Deploy from a branch" ja valida "main" +4. Sinu sait on seejärel ligipääsetav aadressil `https://your-username.github.io/my-resume` + +**Alternatiivsed platvormid:** +- **Netlify**: Automaatne juurutus koos kohandatud domeenidega +- **Vercel**: Kiire juurutus kaasaegsete hostimisteenustega +- **GitHub Codespaces**: Arenduskeskkond koos sisseehitatud eelvaatega + +### Täiendamise soovitused + +Jätka oma oskuste arendamist, lisades järgmised funktsioonid: + +**Tehnilised täiustused:** +- **JavaScripti interaktiivsus**: Lisada sujuv kerimine või interaktiivsed elemendid +- **Tume/režiimi lüliti**: Rakendada teema vahetus kasutajasoovile vastavalt +- **Kontaktivorm**: Võimaldada otsekontakti potentsiaalsete tööandjatega +- **SEO optimeerimine**: Lisa meta sildid ja struktureeritud andmed parema otsitavuse tagamiseks + +**Sisulised täiustused:** +- **Projektide portfell**: Lisa lingid GitHubi hoidlatesse ja elavatele demo projektidele +- **Oskuste visualiseerimine**: Loo edenemisribad või oskuste hinnangusüsteemid +- **Soovituste sektsioon**: Lisa soovitusi kolleegidelt või juhendajatelt +- **Blogi integreerimine**: Lisa blogi sektsioon, kus jagad oma õpikogemusi + +## GitHub Copilot Agent Väljakutse 🚀 + +Kasuta Agent režiimi järgmise väljakutse täitmiseks: + +**Kirjeldus:** Täienda oma CV veebilehte täiustatud funktsioonidega, mis demonstreerivad professionaalseid veebiarenduse võimeid ja kaasaegseid disainipõhimõtteid. + +**Sisselõige:** Põhinedes oma olemasoleval CV veebilehel, tee järgmised täiustused: +1. Lisa tume/hele teema lüliti sujuvate üleminekutega +2. Loo interaktiivne oskuste sektsioon animeeritud edenemisriba liigutustega +3. Rakenda kontaktivorm koos valiidatsiooniga +4. Lisa projektide portfooli sektsioon hover efektide ja modaalakendega +5. Lisa blogi sektsioon vähemalt 3 näidispostitusega oma õpikogemusest +6. Optimiseeri SEO jaoks sobivate meta siltide, struktureeritud andmete ja jõudlusega +7. Avalda täiustatud sait GitHub Pages või Netlify abil +8. Dokumenteeri kõik uued funktsioonid README.md-s koos ekraanipiltidega + +Sinu täiustatud veebileht peaks tõestama kaasaegsete veebiarenduse praktikate meisterlikkust, sealhulgas reageerivat disaini, JavaScripti interaktiivsust ja professionaalset juurutamist. + +## Väljakutse laiendus + +Valmis oma oskusi veelgi süvendama? Proovi neid edasijõudnuid väljakutseid: + +**📱 Mobiiilipõhine ümberkujundus:** Ehita sait täielikult ümber mobiili esimesena lähenemisega, kasutades CSS Gridi ja Flexboxi + +**🔍 SEO optimeerimine:** Rakenda põhjalik SEO sh meta sildid, struktureeritud andmed ja jõudluse optimeerimine + +**🌐 Mitmekeelne tugi:** Lisa rahvusvahelistumise funktsioonid mitme keele toetamiseks + +**📊 Analüütika integreerimine:** Lisa Google Analytics külastajate kaasamise jälgimiseks ja sisu optimeerimiseks + +**🚀 Jõudluse parandamine:** Saavuta täiuslikud Lighthouse skoorid kõigis kategooriates + +## Ülevaade ja endaõpe + +Täienda oma teadmisi nende ressurssidega: + +**Täiustatud VSCode.dev funktsioonid:** +- [VSCode.dev Dokumentatsioon](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) — Täielik juhend veebipõhiseks redigeerimiseks +- [GitHub Codespaces](https://docs.github.com/en/codespaces) — Pilvepõhised arenduskeskkonnad + +**Veebiarenduse parimad tavad:** +- **Reageeriv disain**: Õpi CSS Gridi ja Flexboxi kaasaegsete paigutuste jaoks +- **Juurdepääsetavus**: Õpi WCAG juhiseid kaasava veebidisaini jaoks +- **Tõhusus**: Uuri optimeerimiseks tööriistu nagu Lighthouse +- **SEO**: Sissejuhatus otsingumootorite optimeerimise põhialustesse + +**Professionaalne areng:** +- **Portfoolio loomine**: Loo täiendavaid projekte mitmekesiste oskuste demonstreerimiseks +- **Avatud lähtekoodiga panustamine**: Panusta olemasolevatesse projektidesse koostöökogemuse saamiseks +- **Võrgustike loomine**: Jaga oma CV-veebisaiti arendajate kogukondades tagasiside saamiseks +- **Jätkuv õppimine**: Hoia end kursis veebiarenduse trendide ja tehnoloogiatega + +--- -Loe rohkem [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) kohta ja selle muudest funktsioonidest. +**Sinu järgmised sammud:** Jaga oma CV-veebisaiti sõprade, pere või mentoritega tagasiside saamiseks. Kasuta nende ettepanekuid, et oma disaini täiustada ja edasi arendada. Pea meeles, see projekt ei ole ainult CV – see on sinu kasv veebiarendajana! --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud, kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automatiseeritud tõlgetes võib esineda vigu või ebatäpsusi. Originaaldokument tema emakeeles tuleks käsitleda autoriteetse allikana. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta käesoleva tõlke kasutamisest tingitud arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/9-chat-project/README.md b/translations/et/9-chat-project/README.md index f636e520..7d5383c3 100644 --- a/translations/et/9-chat-project/README.md +++ b/translations/et/9-chat-project/README.md @@ -1,35 +1,213 @@ -# Vestlusprojekt +# Loo juturobot AI abil -See vestlusprojekt näitab, kuidas luua vestlusassistent, kasutades GitHubi mudeleid. +Mäletad, kuidas Star Trekis meeskond mõnuledes laeva arvutiga vestles, esitas keerukaid küsimusi ja sai läbimõeldud vastuseid? See, mis näis 1960ndatel puhtalt ulmena, on nüüd midagi, mida saad ehitada veebitehnoloogiate abil, mida sa juba tunned. -Siin on valmis projekti näidis: +Selles õppetükis loome AI-põhise juturoboti kasutades HTML-i, CSS-i, JavaScripti ja mõnda tagapõhja integratsiooni. Sa avastad, kuidas samad oskused, mida oled õppinud, suudavad ühendada võimsate AI-teenustega, mis mõistavad konteksti ja genereerivad sisukaid vastuseid. -![Vestlusrakendus](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.et.png) +Kujuta AI-d kui pääsu ülisuuresse raamatukokku, mis mitte ainult ei leia infot, vaid oskab selle ka sünteesida kokkuhoidvatesse ja sinu konkreetsetele küsimustele kohandatud vastustesse. Selle asemel, et otsida läbi tuhandeid lehekülgi, saad otseseid, kontekstuaalseid vastuseid. -Natuke tausta: generatiivse tehisintellekti abil vestlusassistentide loomine on suurepärane viis AI-ga tutvumiseks. Selle õppetunni käigus õpid, kuidas integreerida generatiivset AI-d veebirakendusse. Alustame! +Integratsioon toimub tuttavate veebitehnoloogiate koostöös. HTML loob juturoboti liidese, CSS haldab visuaalset kujundust, JavaScript juhib kasutajategevusi ja tagapõhja API ühendab kõik AI-teenustega. See on sarnane eri orkestriosade koostööga sümfoonia loomiseks. -## Ühendamine generatiivse AI-ga +Me ehitameki silda loomuliku inimkommunikatsiooni ja masinatöötluse vahel. Sa õpid nii AI-teenuse integratsiooni tehnilist rakendamist kui ka disainimustreid, mis muudavad suhtluse intuitiivseks. -Tagapõhja jaoks kasutame GitHubi mudeleid. See on suurepärane teenus, mis võimaldab AI-d tasuta kasutada. Mine selle mänguväljakule ja võta kood, mis vastab sinu valitud tagapõhja keelele. Vaata, kuidas see välja näeb [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). +Selle õppetüki lõpuks tundub AI integratsioon vähem müstilisena ja pigem kui veel üks API, millega saad töötada. Sa mõistad põhiprintsiipe, mis juhivad selliseid rakendusi nagu ChatGPT ja Claude, kasutades samu veebiarenduse põhimõtteid, mida oled õppinud. -![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.et.png) +## ⚡ Mida saad teha järgmise 5 minutiga -Nagu öeldud, vali "Code" vahekaart ja oma valitud käituskeskkond. +**Kiire algus hõivatud arendajatele** -![Mänguväljaku valik](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.et.png) +```mermaid +flowchart LR + A[⚡ 5 minutit] --> B[Hangi GitHubi token] + B --> C[Katseta AI mänguväljakut] + C --> D[Kopeeri Python kood] + D --> E[Näe AI vastuseid] +``` +- **1. minut**: Külasta [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ja loo isiklik ligipääsuluba +- **2. minut**: Testi AI-ga suhtlust otse mänguväljaku liideses +- **3. minut**: Klõpsa vahekaardil "Code" ja kopeeri Python'i koodilõik +- **4. minut**: Käivita kood lokaalselt oma tokeniga: `GITHUB_TOKEN=your_token python test.py` +- **5. minut**: Vaata, kuidas su esimene AI vastus genereeritakse sinu enda koodist + +**Kiirtesti kood**: +```python +import os +from openai import OpenAI + +client = OpenAI( + base_url="https://models.github.ai/inference", + api_key="your_token_here" +) + +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Hello AI!"}], + model="openai/gpt-4o-mini" +) + +print(response.choices[0].message.content) +``` + +**Miks see oluline on**: 5 minutiga koged programmeeritava AI suhtluse võlu. See on fundamentaalne ehitusplokk, mis töötab igas AI-rakenduses, mida kasutad. + +Sinu lõpetatud projekt näeb välja selline: + +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b.et.png) + +## 🗺️ Sinu õpiteek läbi AI-rakenduste arenduse + +```mermaid +journey + title Veebiarendusest AI integratsioonini + section AI alusteadmiste mõistmine + Avastage generatiivse AI mõisted: 4: You + Uurige GitHubi mudelite platvormi: 6: You + Valdage AI parameetrid ja promptid: 8: You + section Backend integratsioon + Looge Python API server: 5: You + Rakendage AI funktsioonikõned: 7: You + Haldage asünkroonseid operatsioone: 8: You + section Frontend arendus + Looge kaasaegne vestlusliides: 6: You + Valdage reaalajas suhtlus: 8: You + Looge reageeriv kasutajakogemus: 9: You + section Professionaalne rakendus + Juhtige täielik AI süsteem: 7: You + Optimeerige jõudlusmustreid: 8: You + Looge tootmiskõlblik rakendus: 9: You +``` +**Sinu sihtkoht**: Selle õppetüki lõpuks oled loonud täieliku AI-põhise rakenduse, kasutades samu tehnoloogiaid ja mustreid, mis juhivad kaasaegseid AI abimehi nagu ChatGPT, Claude ja Google Bard. + +## AI mõistmine: salapärasest valdamiseni + +Enne koodi sukeldumist mõistame, millega me tegelikult tegeleme. Kui oled varasemalt API-sid kasutanud, tead põhimustris: saada päring, saa vastus. + +AI API-d järgivad sarnast struktuuri, kuid selle asemel, et andmebaasist valmis info kätte saada, genereerivad need uusi vastuseid tohutu hulga tekstide põhjal õpitud mustrite põhjal. Mõtle sellele nagu erinevus raamatukataloogi ja teadliku raamatukoguhoidja vahel, kes suudab sünteesida infot mitmest allikast. + +### Mis on tegelikult "Generatiivne AI"? + +Mõtle, kuidas Rosetta kivi võimaldas teadlastel mõista egiptuse hieroglüüfe, leides mustreid tuntud ja tundmatute keelte vahel. AI mudelid töötavad sarnaselt – nad leevad suurtest tekstikogumitest mustrid, et mõista, kuidas keel toimib, ja kasutavad neid mustreid uute küsimuste sobivate vastuste genereerimiseks. + +**Selgitan lihtsustatult:** +- **Tavapärane andmebaas**: Nagu sünnitunnistuse küsimine – saad alati täpselt sama dokumendi +- **Otsingumootor**: Nagu raamatukoguhoidjalt raamatute leidmine kohta kassid – näidatakse sulle olemasolevat +- **Generatiivne AI**: Nagu teadlik sõber kassidest – räägib sulle huvitavaid asju oma sõnadega, kohandatud sinu infovajadusele + +```mermaid +graph LR + A[Teie Küsimus] --> B[AI Mudel] + B --> C[Mustri Tuvastus] + C --> D[Sisu Loomine] + D --> E[Kontekstuaalne Vastus] + + F[Koolitusandmed
Raamatud, Artiklid, Veeb] --> B +``` +### Kuidas AI mudelid õpivad (lihtsustatud) + +AI mudelid õpivad tohututest tekstikogumitest, mis sisaldavad raamatuid, artikleid ja vestlusi. Selle protsessi kaudu tuvastavad nad mustrid: +- Kuidas mõtted on kirjalikus suhtluses üles ehitatud +- Millised sõnad sageli koos esinevad +- Kuidas vestlused tavaliselt kulgevad +- Konteksti erinevused ametliku ja mitteametliku suhtluse vahel + +**See on sarnane arheoloogidele, kes dekodeerivad iidseid keeli**: nad analüüsivad tuhandeid näiteid, et mõista grammatikat, sõnavara ja kultuurikonteksti, lõpuks saavad uut teksti nende mustrite abil tõlgendada. + +### Miks GitHub Models? + +Kasutame GitHub Modelsid praktilisel põhjusel – see annab meile juurdepääsu ettevõttetasemel AI-le ilma, et peaksime oma AI infrastruktuuri üles seadma (usu mind, seda sa praegu ei taha!). Mõtle sellele kui ilmateenuse API kasutamisele, mitte ilm ennustamisele, pannes kõikjale ilmajaamad üles. + +See on põhimõtteliselt "AI-teenusena" ja parim on see, et alustamine on tasuta, nii et võid muretult katsetada. + +```mermaid +graph LR + A[Esiosa vestluse kasutajaliides] --> B[Teie tagapõhja API] + B --> C[GitHubi mudelite API] + C --> D[Tehisintellekti mudelite töötlemine] + D --> C + C --> B + B --> A +``` +Kasutame GitHub Modelsid oma tagapõhja integratsiooniks, mis pakub professionaalse tasemega AI võimekust arendajale sõbraliku liidese kaudu. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) on testikeskkond, kus saad katsetada erinevaid AI mudeleid ja mõista nende võimeid enne koodis rakendamist. + +## 🧠 AI rakenduste arenduse ökosüsteem + +```mermaid +mindmap + root((AI Arendus)) + Understanding AI + Generatiivsed Mudelid + Musteri Tuvastamine + Sisu Loomine + Konteksti Mõistmine + Vastuse Süntees + AI Parameetrid + Temperatuuri Kontroll + Tokeni Piirid + Top-p Filtreerimine + Süsteemi Käivitused + Backend Architecture + API Integratsioon + GitHub Mudelid + Autentimine + Päringu Töötlemine + Vigade Haldus + Python Infrastruktuur + FastAPI Raamistik + Asünkroonsed Operatsioonid + Keskkonna Turvalisus + CORS Konfiguratsioon + Frontend Experience + Vestlusliides + Reaalajas Uuendused + Sõnumite Ajalugu + Kasutaja Tagasiside + Laadimise Oleku + Moodne Veebi Tehnoloogia + ES6 Klassid + Asünkroonne/Ootamine + DOM Manipuleerimine + Sündmuste Haldus + Professional Patterns + Turvalisuse Parimad Tavad + Tokenite Halduse + Sisendi Kontroll + XSS Ennetamine + Vigade Piirid + Tootmisvalmidus + Jõudluse Optimeerimine + Reageeriv Disain + Juurdepääsetavus + Testimise Strateegiad +``` +**Põhialus**: AI rakenduste arendus ühendab traditsioonilised veebiarenduse oskused AI teenuste integratsiooniga, luues nutikaid rakendusi, mis mõistavad loomulikult kasutajate vajadusi. + +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/playground.d2b927122224ff8f.et.png) + +**Mida teeb mänguväljaku nii kasulikuks:** +- **Proovi** erinevaid AI mudeleid nagu GPT-4o-mini, Claude jpt (kõik tasuta!) +- **Testeeri** oma ideid ja käske enne kodeerimist +- **Saa** kasutamiseks valmis koodinäited oma lemmikprogrammeerimiskeeles +- **Muuda** seadeid nagu loomingulisuse tase ja vastuse pikkus, et näha mõju väljundile + +Kui oled natuke mänginud, klõpsa "Code" vahekaardile ja vali programmeerimiskeel, et saada vajaminev kood. -### Pythoniga +![Playground choice showing code generation options for different programming languages](../../../translated_images/playground-choice.1d23ba7d407f4758.et.png) -Sel juhul valime Pythoni, mis tähendab, et võtame selle koodi: +## Python tagapõhja integratsiooni seadistamine + +Rakendame nüüd AI integratsiooni Pythoniga. Python sobib hästi AI-rakendusteks tänu lihtsale süntaksile ja võimsatele teekidele. Alustame GitHub Models mänguväljaku koodist ja seejärel refaktoriseerime selle taaskasutatavaks, tootmiseks valmis funktsiooniks. + +### Põhiteostuse mõistmine + +Kui võtad Python-koodi mänguväljaku pealt, saad miskit sarnast. Ära muretse, kui see alguses suur tundub – vaatame tükkhaaval üle: ```python """Run this model in Python @@ -39,8 +217,8 @@ Sel juhul valime Pythoni, mis tähendab, et võtame selle koodi: import os from openai import OpenAI -# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. -# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens +# Mudeliga autentimiseks peate looma isikliku juurdepääsu märgi (PAT) oma GitHubi seadistustes. +# Looge oma PAT märgis järgides juhiseid siin: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens client = OpenAI( base_url="https://models.github.ai/inference", api_key=os.environ["GITHUB_TOKEN"], @@ -66,335 +244,2140 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Puhastame seda koodi natuke, et see oleks taaskasutatav: +**Selles koodis toimub:** +- **Impordime** vajalikud tööriistad: `os` keskkonnamuutujate lugemiseks ja `OpenAI` AIga suhtlemiseks +- **Seadistame** OpenAI kliendi, mis pöördub GitHubi AI serverite poole, mitte otse OpenAI poole +- **Autendime** spetsiaalse GitHubi tokeniga (jh, sellest kohe veel!) +- **Struktureerime** vestlust erinevate "rollidega" – nagu stseeni seadistamine näidendi jaoks +- **Saadame** AI-le päringu mõnede täpistamise parameetritega +- **Eraldame** tegeliku vastuse teksti kõikide tagastatud andmete seast + +### Sõnumite rollide mõistmine: AI vestluste raamistik + +AI vestlustes kasutatakse kindlat struktuuri erinevate "rollidega", millel on kindel eesmärk: ```python -def call_llm(prompt: str, system_message: str): - response = client.chat.completions.create( - messages=[ - { - "role": "system", - "content": system_message, - }, - { - "role": "user", - "content": prompt, - } - ], - model="openai/gpt-4o-mini", - temperature=1, - max_tokens=4096, - top_p=1 - ) +messages=[ + { + "role": "system", + "content": "You are a helpful assistant who explains things simply." + }, + { + "role": "user", + "content": "What is machine learning?" + } +] +``` + +**Mõtle sellele kui näidendikõrvaldajale:** +- **Süsteemne roll**: nagu lavajuhis näitlejale – ütleb AI-le, kuidas käituda, milline isiksus olla ja kuidas vastata +- **Kasutaja roll**: teade või küsimus rakendust kasutavalt inimeselt +- **Abistaja roll**: AI vastus (seda sa ei saada, aga see on vestluse ajaloos) + +**Reaalne näide**: Kujuta ette, et tutvustad sõpra peol: +- **Süsteemsõnum**: "See on mu sõber Sarah, ta on arst ja seletab meditsiinikontseptsioone lihtsalt" +- **Kasutajasõnum**: "Kas sa seletad, kuidas vaktsiinid töötavad?" +- **Abistaja vastus**: Sarah vastab sõbraliku arstina, mitte juristi või kokana + +### AI parameetrite mõistmine: vastuste täpsustamine + +Numbrilised parameetrid AI API kõnedes juhivad, kuidas mudel vastuseid genereerib. Need seadistused lubavad muuta AI käitumist erinevate ülesannete jaoks: + +#### Temperatuur (0.0 kuni 2.0): loomingulisuse nupp + +**Mida teeb**: juhib, kui loomingulised või ettenatustatavad AI vastused on. + +**Mõtle sellele nagu jazzmuusiku improvisatsioonitasemele:** +- **Temperatuur = 0.1**: mängib täpselt sama meloodiat iga kord (üliedastatav) +- **Temperatuur = 0.7**: lisab mõistlikke variatsioone, olles endiselt äratuntav (tasakaalus loomingulisus) +- **Temperatuur = 1.5**: täismeelne eksperimentaalne jazz ootamatute pöördega (väga ettearvamatu) + +```python +# Väga ennustatavad vastused (head faktipõhiste küsimuste jaoks) +response = client.chat.completions.create( + messages=[{"role": "user", "content": "What is 2+2?"}], + temperature=0.1 # Ükskõik millal ütleb peaaegu alati "4" +) + +# Loomingulised vastused (head ideede genereerimiseks) +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Write a creative story opening"}], + temperature=1.2 # Loob unikaalseid, ootamatuid lugusid +) +``` + +#### Max Tokens (1 kuni 4096+): vastuse pikkuse piiraja + +**Mida teeb**: seab piiri, kui pikk vastus võib olla. + +**Mõtle tokenitele kui umbkaudsetele sõnadele** (umbes 1 token = 0,75 sõna inglise keeles): +- **max_tokens=50**: lühike ja armas (nagu SMS) +- **max_tokens=500**: kena lõik või kaks +- **max_tokens=2000**: detailne seletus koos näidetega + +```python +# Lühikesed, põhjendatud vastused +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Explain JavaScript"}], + max_tokens=100 # Sunnib esitama lühikest seletust +) + +# Üksikasjalikud, põhjalikud vastused +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Explain JavaScript"}], + max_tokens=1500 # Võimaldab üksikasjalikke seletusi koos näidetega +) +``` + +#### Top_p (0.0 kuni 1.0): keskendumise parameeter + +**Mida teeb**: juhib, kui keskendunud AI jääb tõenäolisemate vastuste peale. + +**Kujuta ette AI-l tohutu sõnavara, kus sõnad on järjestatud tõenäosuse järgi:** +- **top_p=0.1**: arvestab ainult kõige tõenäolisemate 10% sõnadega (väga keskendunud) +- **top_p=0.9**: arvestab 90% võimalikest sõnadest (loovam) +- **top_p=1.0**: arvestab kõike (max mitmekesisus) + +**Näiteks**: Kui küsid "Tavaliselt on taevas..." +- **Madala top_p-ga**: ütleb peaaegu kindlasti "sinine" +- **Kõrge top_p-ga**: võib öelda "sinine", "pilvine", "kõrbeline", "muutuv", "ilus" jne + +### Kõike koos kasutamine: parameetrite kombinatsioonid erinevatele kasutusjuhtudele + +```python +# Faktipõhiste, järjepidevate vastuste jaoks (näiteks dokumentatsioonibot) +factual_params = { + "temperature": 0.2, + "max_tokens": 300, + "top_p": 0.3 +} + +# Loova kirjutamise abi jaoks +creative_params = { + "temperature": 1.1, + "max_tokens": 1000, + "top_p": 0.9 +} + +# Vestluslikeks, abistavateks vastusteks (tasakaalustatud) +conversational_params = { + "temperature": 0.7, + "max_tokens": 500, + "top_p": 0.8 +} +``` + +```mermaid +quadrantChart + title AI Parameetri Optimeerimise Maatriks + x-axis Madal Loovus --> Kõrge Loovus + y-axis Lühike Vastus --> Pikk Vastus + + quadrant-1 Loov Sisuloome + quadrant-2 Detailne Analüüs + quadrant-3 Kiired Faktid + quadrant-4 Vestlus-Tehisintellekt + + Documentation Bot: [0.2, 0.3] + Customer Service: [0.4, 0.4] + General Assistant: [0.7, 0.5] + Creative Writer: [0.9, 0.9] + Brainstorming Tool: [0.8, 0.8] +``` +**Miks need parameetrid olulised on**: eri rakendused vajavad erinevaid vastuseid. Klienditeeninduse bott peaks olema järjekindel ja faktiline (madal temperatuur), samas kui loominguline kirjutamisabi peaks olema fantaasiarikas ja mitmekesine (kõrge temperatuur). Nende parameetrite mõistmine annab sulle kontrolli AI isiksuse ja vastuse stiili üle. +``` + +**Here's what's happening in this code:** +- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI +- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly +- **We authenticate** using a special GitHub token (more on that in a minute!) +- **We structure** our conversation with different "roles" – think of it like setting the scene for a play +- **We send** our request to the AI with some fine-tuning parameters +- **We extract** the actual response text from all the data that comes back + +> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`. + +### Creating a Reusable AI Function + +Let's refactor this code into a clean, reusable function that we can easily integrate into our web application: + +```python +import asyncio +from openai import AsyncOpenAI + +# Use AsyncOpenAI for better performance +client = AsyncOpenAI( + base_url="https://models.github.ai/inference", + api_key=os.environ["GITHUB_TOKEN"], +) + +async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."): + """ + Sends a prompt to the AI model asynchronously and returns the response. + + Args: + prompt: The user's question or message + system_message: Instructions that define the AI's behavior and personality + + Returns: + str: The AI's response to the prompt + """ + try: + response = await client.chat.completions.create( + messages=[ + { + "role": "system", + "content": system_message, + }, + { + "role": "user", + "content": prompt, + } + ], + model="openai/gpt-4o-mini", + temperature=1, + max_tokens=4096, + top_p=1 + ) + return response.choices[0].message.content + except Exception as e: + logger.error(f"AI API error: {str(e)}") + return "I'm sorry, I'm having trouble processing your request right now." + +# Backward compatibility function for synchronous calls +def call_llm(prompt: str, system_message: str = "You are a helpful assistant."): + """Synchronous wrapper for async AI calls.""" + return asyncio.run(call_llm_async(prompt, system_message)) +``` + +**Selle täiustatud funktsiooni mõistmine:** +- **Võtab vastu** kaks parameetrit: kasutaja käsu ja valikulise süsteemsõnumi +- **Tagab** vaikimisi süsteemsõnumi üldiseks assistendi käitumiseks +- **Kasutab** korrektseid Python tüübimärkusi parema dokumentatsiooni jaoks +- **Sisaldab** üksikasjalikku docstringi, mis kirjeldab funktsiooni eesmärki ja parameetreid +- **Tagastab** ainult vastuse sisu, tehes selle lihtsaks meie veeb API-s kasutada +- **Hoidab** samu mudeli parameetreid järjepidevaks AI käitumiseks + +### Süsteemsõnumite maagia: AI isiksuse programmeerimine + +Kui parameetrid juhivad, kuidas AI mõtleb, siis süsteemsõnumid juhivad, kes AI arvab end olevat. See on ausalt üks lahedamaid osi AI-ga töötamisel – sa annad AI-le täieliku isiksuse, ekspertiisi taseme ja suhtlusstiili. + +**Mõtle süsteemsõnumitele kui näitlejate valikule erinevate rollide jaoks**: ühe asemel ühetaolise assistendi loomiseks saad luua spetsialiste erinevate olukordade jaoks. Vajad kannatlikku õpetajat? Loomingulist ideede partnerit? Asjalikku ärinõustajat? Lihtsalt muuda süsteemsõnumit! + +#### Miks süsteemsõnumid on nii võimsad + +Huvitav osa on see, et AI mudelid on treenitud lugematute vestluste peal, kus inimesed võtavad erinevaid rolle ja ekspertteadmiste tasemeid. Kui annad AI-le kindla rolli, on see nagu lüliti, mis aktiveerib kõik need õpitud mustrid. + +**See on nagu meetodnäitlemine AI jaoks**: ütle näitlejale "sa oled tark vanaprofessor" ja vaata, kuidas ta automaatselt muudab kehaasendit, sõnavara ja maneere. AI teeb sõnamustritega midagi sarnast. + +#### Tõhusate süsteemsõnumite koostamine: kunst ja teadus + +**Hea süsteemsõnumi anatoomia:** +1. **Roll/isikus**: Kes AI on? +2. **Ekspertiis**: Mida ta teab? +3. **Suhtlusstiil**: Kuidas ta räägib? +4. **Spetsiifilised juhised**: Millele ta peaks tähelepanu pöörama? - return response.choices[0].message.content +```python +# ❌ Ebaselge süsteemi juhis +"You are helpful." + +# ✅ Üksikasjalik, tõhus süsteemi juhis +"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics." +``` + +#### Süsteemsõnumite näited kontekstiga + +Vaatame, kuidas erinevad süsteemsõnumid loovad täiesti erinevad AI isiksused: + +```python +# Näide 1: Kannatlik õpetaja +teacher_prompt = """ +You are an experienced programming instructor who has taught thousands of students. +You break down complex concepts into simple steps, use analogies from everyday life, +and always check if the student understands before moving on. You're encouraging +and never make students feel bad for not knowing something. +""" + +# Näide 2: Loov koostööpartner +creative_prompt = """ +You are a creative writing partner who loves brainstorming wild ideas. You're +enthusiastic, imaginative, and always build on the user's ideas rather than +replacing them. You ask thought-provoking questions to spark creativity and +offer unexpected perspectives that make stories more interesting. +""" + +# Näide 3: Strateegiline ärinõustaja +business_prompt = """ +You are a strategic business consultant with an MBA and 20 years of experience +helping startups scale. You think in frameworks, provide structured advice, +and always consider both short-term tactics and long-term strategy. You ask +probing questions to understand the full business context before giving advice. +""" ``` -Funktsiooniga `call_llm` saame nüüd võtta sisendi ja süsteemi sisendi, ning funktsioon tagastab tulemuse. +#### Süsteemsõnumite testimine praktikas -### AI assistendi kohandamine +Testime sama küsimust erinevate süsteemsõnumitega, et näha tohutuid erinevusi: -Kui soovid AI assistenti kohandada, saad määrata, kuidas soovid, et see käituks, täites süsteemi sisendi näiteks nii: +**Küsimus**: "Kuidas käsitleda kasutaja autentimist oma veebirakenduses?" ```python -call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") +# Õpetaja juhendiga: +teacher_response = call_llm( + "How do I handle user authentication in my web app?", + teacher_prompt +) +# Tavaline vastus: "Väga hea küsimus! Jagame autentimise lihtsateks sammudeks. +# Mõtle sellele nagu ööklubi turvamees, kes kontrollib isikut tõendavaid dokumente..." + +# Ärinõuande juhendiga: +business_response = call_llm( + "How do I handle user authentication in my web app?", + business_prompt +) +# Tavaline vastus: "Strateegilisest vaatenurgast on autentimine oluline kasutajate +# usalduse ja regulatiivse vastavuse tagamiseks. Lubage mul esitada raamistik, mis võtab arvesse turvalisust, +# kasutajakogemust ja skaleeritavust..." ``` -## Veebirakenduse API loomine +#### Täiustatud süsteemsõnumite võtted -Suurepärane, AI osa on valmis. Vaatame, kuidas seda integreerida veebirakenduse API-sse. Veebirakenduse API jaoks valime Flaski, kuid sobib ka mõni muu veebiraamistik. Vaatame selle koodi: +**1. Konteksti andmine**: Anna AI-le taustainfot +```python +system_prompt = """ +You are helping a junior developer who just started their first job at a startup. +They know basic HTML/CSS/JavaScript but are new to backend development and databases. +Be encouraging and explain things step-by-step without being condescending. +""" +``` -### Pythoniga +**2. Väljundi Vormindamine**: Öelge tehisintellektile, kuidas vastuseid struktureerida +```python +system_prompt = """ +You are a technical mentor. Always structure your responses as: +1. Quick Answer (1-2 sentences) +2. Detailed Explanation +3. Code Example +4. Common Pitfalls to Avoid +5. Next Steps for Learning +""" +``` + +**3. Piirangute Määramine**: Määrake, mida tehisintellekt EI TOHI teha +```python +system_prompt = """ +You are a coding tutor focused on teaching best practices. Never write complete +solutions for the user - instead, guide them with hints and questions so they +learn by doing. Always explain the 'why' behind coding decisions. +""" +``` + +#### Miks see on teie vestlusabilise jaoks oluline + +Süsteemipromptide mõistmine annab teile uskumatult palju võimu spetsiaalsete tehisintellekti abiliste loomiseks: +- **Klienditeeninduse bot**: abivalmis, kannatlik, poliitikateadlik +- **Õpetustugi**: julgustav, samm-sammuline, kontrollib arusaamist +- **Loov partner**: loominguline, arendab ideid, küsib "mis siis kui?" +- **Tehniline ekspert**: täpne, üksikasjalik, turvateadlik + +**Oluline järeldus**: Te ei kutsu lihtsalt tehisintellekti API-d – te loote kohandatud tehisintellekti isiksuse, mis teenib teie konkreetset kasutusjuhtu. Just see teeb tänapäevased tehisintellekti rakendused isikupäraseks ja kasulikuks, mitte üldiseks. + +### 🎯 Pedagoogiline Kontroll: Tehisintellekti isiksuse programmeerimine + +**Peatu ja mõtle**: Sa õpid just praegu, kuidas programmeerida tehisintellekti isiksusi süsteemipromptide kaudu. See on tänapäevase tehisintellekti arenduse põhioskust. + +**Kiire enesehindamine**: +- Kas oskad selgitada, kuidas süsteemipromptid erinevad tavakasutaja sõnumitest? +- Mis vahe on temperatuuril ja top_p parameetritel? +- Kuidas looksid süsteemiprompti konkreetseks kasutusjuhuks (näiteks koodiõpetajale)? + +**Tõeline maailm**: Süsteemipromptide tehnikad, mida õppisid, kasutavad kõik suuremad tehisintellekti rakendused – alates GitHub Copiloti kodeerimisabist kuni ChatGPT vestlusliideseni. Sa valdad samu mustreid, mida kasutavad AI tootetiimid suurtel tehnoloogiaettevõtetel. + +**Väljakutse küsimus**: Kuidas võiksid kujundada erinevaid AI isiksusi erinevate kasutajate jaoks (algaja vs ekspert)? Kuidas saaks sama põhjalik AI mudel läbi promptide inseneritöö teenindada erinevaid sihtrühmi? + +## Veebirakenduse API loomine FastAPI-ga: Teie võimas AI suhtluskeskus + +Loome nüüd tagapoe, mis ühendab teie kasutajaliidese AI teenustega. Kasutame FastAPI-t, moodsat Pythoni raamistiku, mis sobib hästi AI rakenduste API-de ehitamiseks. + +FastAPI-l on selle projekti jaoks mitu eelist: sisseehitatud asünkroonne tugi samaaegsete päringute töötlemiseks, automaatne API dokumentatsiooni genereerimine ning suurepärane jõudlus. Teie FastAPI server toimib vahendajana, kes võtab vastu päringuid kasutajaliidesest, suhtleb AI teenustega ja tagastab vormindatud vastused. + +### Miks valida FastAPI AI rakenduste jaoks? + +Võib-olla mõtlete: "Kas ma ei võiks lihtsalt kutsuda AI otse oma esiplaani JavaScriptist?" või "Miks veel FastAPI, mitte Flask või Django?" Häid küsimusi! + +**Siin on, miks FastAPI sobib meie eesmärkidele ideaalselt:** +- **Vaikimisi asünkroonne**: Saab korraga mitut AI päringut hallata ilma kinni jäämata +- **Automaatne dokumentatsioon**: Külasta `/docs` ja saad tasuta ilusa, interaktiivse API dokumentatsiooni lehe +- **Sisseehitatud valideerimine**: Leiab vead enne, kui need probleeme põhjustavad +- **Väga kiire**: Üks kiiremaid Pythoni raamistikke üldse +- **Moodsad Python omadused**: Kasutab kõiki uusimaid ja parimaid Pythoni funktsioone + +**Ja miks üldse vajame tagapõhja:** + +**Turvalisus**: Teie AI API võti on nagu parool – kui paned selle kasutajaliidese JavaScripti, võib see igaüks, kes vaadata teie veebilehe lähtekoodi, varastada ja kasutada teie AI krediite. Tagapõhi hoiab tundlikud volitused turvaliselt. + +**Piirangud ja kontroll**: Tagapõhi võimaldab piirata, kui tihti kasutajad saavad päringuid teha, rakendada kasutajatõendust ja lisada logimist kasutuse jälgimiseks. + +**Andmetöötlus**: Võite soovida salvestada vestlusi, filtreerida sobimatut sisu või kombineerida mitut AI teenust. Seda loogikat haldab tagapõhi. + +**Arhitektuur meenutab kliendi-server mudelit:** +- **Frontend**: Kasutajaliidese kiht suhtlemiseks +- **Backend API**: Päringute töötlemise ja marsruutimise kiht +- **AI teenus**: Väline arvutus- ja vastuse genereerimine +- **Keskkonnamuutujad**: Turvaline seadistuse ja volituste hoiukoht + +### Päringu ja vastuse voo mõistmine + +Jälgime, mis juhtub, kui kasutaja saadab sõnumi: + +```mermaid +sequenceDiagram + participant User as 👤 Kasutaja + participant Frontend as 🌐 Esikliend + participant API as 🔧 FastAPI Server + participant AI as 🤖 Tehisintellekti teenus + + User->>Frontend: Kirjutab "Tere, tehisintellekt!" + Frontend->>API: POST /hello {"message": "Tere, tehisintellekt!"} + Note over API: Kontrollib taotlust
Lisab süsteemi prompti + API->>AI: Saadab vormindatud taotluse + AI->>API: Tagastab tehisintellekti vastuse + Note over API: Töötleb vastust
Logib vestluse + API->>Frontend: {"response": "Tere! Kuidas saan aidata?"} + Frontend->>User: Kuvab tehisintellekti sõnumi +``` +**Iga sammu mõistmine:** +1. **Kasutajaliides**: Inimene kirjutab vestlusaknas +2. **Frontend töötlemine**: JavaScript tabab sisendi ja vormindab selle JSON-iks +3. **API valideerimine**: FastAPI kontrollib automaatselt päringu vastavust Pydantic mudelitega +4. **AI integratsioon**: Tagapõhi lisab konteksti (süsteemiprompti) ja kutsub AI teenust +5. **Vastuse töötlemine**: API võtab vastu AI vastuse ja võib seda vajadusel muuta +6. **Frontend kuvamine**: JavaScript kuvab vastuse vestlusaknas + +### API Arhitektuuri mõistmine + +```mermaid +sequenceDiagram + participant Frontend + participant FastAPI + participant AI Function + participant GitHub Models + + Frontend->>FastAPI: POST /hello {"message": "Tere AI!"} + FastAPI->>AI Function: call_llm(message, system_prompt) + AI Function->>GitHub Models: API päring + GitHub Models->>AI Function: AI vastus + AI Function->>FastAPI: vastuse tekst + FastAPI->>Frontend: {"response": "Tere! Kuidas ma saan aidata?"} +``` +```mermaid +flowchart TD + A[Kasutaja Sisend] --> B[Esikülje Kontroll] + B --> C[HTTP POST Päring] + C --> D[FastAPI Marsruuter] + D --> E[Pydantic Kontroll] + E --> F[AI Funktsiooni Kutsumine] + F --> G[GitHub Mudelite API] + G --> H[Vastuse Töötlemine] + H --> I[JSON Vastus] + I --> J[Esikülje Uuendus] + + subgraph "Turvakihi" + K[CORS Vahemälu] + L[Keskkonna Muutujad] + M[Vigade Käitlemine] + end + + D --> K + F --> L + H --> M +``` +### FastAPI rakenduse loomine + +Loome oma API sammuhaaval. Loo fail `api.py` järgmise FastAPI koodiga: ```python # api.py -from flask import Flask, request, jsonify +from fastapi import FastAPI, HTTPException +from fastapi.middleware.cors import CORSMiddleware +from pydantic import BaseModel from llm import call_llm -from flask_cors import CORS +import logging + +# Logimise seadistamine +logging.basicConfig(level=logging.INFO) +logger = logging.getLogger(__name__) + +# Loo FastAPI rakendus +app = FastAPI( + title="AI Chat API", + description="A high-performance API for AI-powered chat applications", + version="1.0.0" +) + +# CORS-i seadistamine +app.add_middleware( + CORSMiddleware, + allow_origins=["*"], # Seadista sobivalt tootmiseks + allow_credentials=True, + allow_methods=["*"], + allow_headers=["*"], +) + +# Pydantici mudelid päringu/vastuse valideerimiseks +class ChatMessage(BaseModel): + message: str + +class ChatResponse(BaseModel): + response: str + +@app.get("/") +async def root(): + """Root endpoint providing API information.""" + return { + "message": "Welcome to the AI Chat API", + "docs": "/docs", + "health": "/health" + } + +@app.get("/health") +async def health_check(): + """Health check endpoint.""" + return {"status": "healthy", "service": "ai-chat-api"} + +@app.post("/hello", response_model=ChatResponse) +async def chat_endpoint(chat_message: ChatMessage): + """Main chat endpoint that processes messages and returns AI responses.""" + try: + # Sõnumi väljavõtmine ja valideerimine + message = chat_message.message.strip() + if not message: + raise HTTPException(status_code=400, detail="Message cannot be empty") + + logger.info(f"Processing message: {message[:50]}...") + + # Kutsu AI teenust (märkus: paremaks jõudluseks peaks call_llm olema asünkroonne) + ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.") + + logger.info("AI response generated successfully") + return ChatResponse(response=ai_response) + + except HTTPException: + raise + except Exception as e: + logger.error(f"Error processing chat message: {str(e)}") + raise HTTPException(status_code=500, detail="Internal server error") + +if __name__ == "__main__": + import uvicorn + uvicorn.run(app, host="0.0.0.0", port=5000, reload=True) +``` + +**FastAPI rakenduse mõistmine:** +- **Impordib** FastAPI moodsate veebiraamistiku funktsioonide ja Pydantici andmete valideerimiseks +- **Loomine** automaatne API dokumentatsioon (kättesaadav aadressil `/docs`, kui server töötab) +- **Lubab** CORS vahendustarkvara, et lubada päringud erinevatest päritoludest frontendist +- **Määratleb** Pydantic mudelid automaatseks päringu/vastuse valideerimiseks ja dokumentatsiooniks +- **Kasutab** asünkroonseid lõpp-punkte paremaks jõudluseks samaaegsete päringute korral +- **Rakendab** sobivaid HTTP staatuskoode ja veakäsitlust HTTPException abil +- **Sisaldab** struktureeritud logimist jälgimiseks ja silumiseks +- **Pakkuge** tervisekontrolli lõpp-punkti teenuse oleku jälgimiseks + +**Olulised FastAPI eelised võrreldes traditsiooniliste raamistikudega:** +- **Automaatne valideerimine**: Pydantic mudelid tagavad andmete terviklikkuse enne töötlemist +- **Interaktiivne dokumentatsioon**: Külasta `/docs`, et saada automaatselt genereeritud ja testitav API dokumentatsioon +- **Tüübiturvalisus**: Pythoni tüüp vihjed vähendavad run-time vigu ja parandavad koodi kvaliteeti +- **Asünkroonne tugi**: Töötle mitut AI päringut samaaegselt blokeerimata +- **Jõudlus**: Märkimisväärselt kiirem päringute töötlemine reaalajas rakendustes + +### CORS mõistmine: Veebimaailma turvamees + +CORS (Cross-Origin Resource Sharing) on nagu turvamees hoones, kes kontrollib, kas külalistel on lubatud sisse pääseda. Mõistame, miks see on oluline ja kuidas see teie rakendust mõjutab. + +#### Mis on CORS ja miks see olemas on? + +**Probleem**: Kujutage ette, et iga veebileht võiks teie nimel teha päringuid teie panga veebisaidile ilma teie loata. See oleks turvanõrkus! Brauserid takistavad seda vaikimisi "Sama päritolu poliitika" kaudu. + +**Sama päritolu poliitika**: Brauserid lubavad veebilehtedel teha päringuid ainult samasse domeeni, porti ja protokolli, kust leht laeti. + +**Tõeline analoogia**: See on nagu kortermaja valve – ainult elanikud (sama päritolu) pääsevad vaikimisi sisse. Kui soovite sõbrale (erinev päritolu) sissepääsu lubada, peate turvamehele seda selgelt ütlema. + +#### CORS teie arenduskeskkonnas + +Arenduse ajal jooksevad teie frontend ja backend erinevatel portidel: +- Frontend: `http://localhost:3000` (või file://, kui HTML otse avate) +- Backend: `http://localhost:5000` + +Neid käsitletakse kui "erinevaid päritolu", kuigi nad on samal arvutil! + +```python +from fastapi.middleware.cors import CORSMiddleware + +app = FastAPI(__name__) +CORS(app) # See ütleb brauseritele: "Teistel päritoludel on selle API-ga päringute tegemine lubatud" +``` + +**Mida CORS konfiguratsioon praktikas teeb:** +- **Lisab** spetsiaalsed HTTP päised API vastustes, mis ütlevad brauserile, et "see rist-päritolu päring on lubatud" +- **Töötleb** "preflight" päringuid (brauserid kontrollivad mõnikord enne päringut õigusi) +- **Vältab** hirmuäratavat CORS poliitika poolt blokeeritud viga brauseri konsoolis + +#### CORS turvalisus: arendus vs tootmine + +```python +# 🚨 Arendus: Lubab KÕIKI päritolu (mugav, kuid ebaturvaline) +CORS(app) + +# ✅ Tootmine: Lubage ainult oma konkreetne eesliidese domeen +CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"]) + +# 🔒 Täiustatud: Erinevad päritolud erinevate keskkondade jaoks +if app.debug: # Arendusrežiim + CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"]) +else: # Tootmisrežiim + CORS(app, origins=["https://yourdomain.com"]) +``` + +**Miks see oluline on**: Arenduses on `CORS(app)` nagu jätta esiuks lukustamata – mugav, aga mitte turvaline. Tootmises tahate täpselt määrata, millised veebisaidid tohtivad teie API-ga suhelda. + +#### Levinud CORS stsenaariumid ja lahendused + +| Stsenaarium | Probleem | Lahendus | +|---------------------|------------------------------|-------------------------------| +| **Kohalik arendus** | Frontend ei saa connecti backendile | Lisa CORSMiddleware FastAPIsse | +| **GitHub Pages + Heroku** | Deployitud frontend ei jõua API-ni | Lisa oma GitHub lehe URL CORS päritoludesse | +| **Kohandatud domeen** | CORS vead tootmises | Uuenda CORS päritolud vastavalt domeenile | +| **Mobiilirakendus** | Rakendus ei saa kätte veebirakendust API | Lisa rakenduse domeen või kasuta `*` ettevaatlikult | + +**Näpunäide**: Võite kontrollida CORS päiseid brauseri Arendaja Tööriistades vahekaardil Võrk. Otsige päiseid nagu `Access-Control-Allow-Origin` vastuste seast. + +### Veakäsitlus ja valideerimine + +Vaadake, kuidas meie API sisaldab korralikku vigade käsitlust: + +```python +# Kontrolli, et oleme sõnumi kätte saanud +if not message: + return jsonify({"error": "Message field is required"}), 400 +``` + +**Põhilised valideerimise põhimõtted:** +- **Kontrollib** nõutud välju enne päringu töötlemist +- **Tagastab** tähenduslikud veateated JSON formaadis +- **Kasutab** sobivaid HTTP staatuskoode (400 halbade päringute puhul) +- **Pakub** selget tagasisidet, et aidata frontend arendajatel probleeme siluda + +## Tagapõhja seadistamine ja käivitamine + +Nüüd, kui meil on tehisintellekti integratsioon ja FastAPI server valmis, käivitame kõik. Seadistusprotsess hõlmab Python sõltuvuste paigaldamist, keskkonnamuutujate seadistamist ja arendusserveri käivitamist. + +### Python keskkonna seadistamine + +Seadistame teie Python arenduskeskkonna. Virtuaalsed keskkonnad on nagu Manhattan projekti kompartmentide lähenemine – igale projektile oma isoleeritud ruum, milles konkreetsete tööriistade ja sõltuvustega, et vältida kokkupõrkeid erinevate projektide vahel. + +```bash +# Liigu oma backend kausta +cd backend + +# Loo virtuaalne keskkond (nagu puhta ruumi loomine oma projekti jaoks) +python -m venv venv + +# Aktiveeri see (Linux/Mac) +source ./venv/bin/activate + +# Windowsis kasuta: +# venv\Scripts\activate + +# Paigalda vajalikud asjad +pip install openai fastapi uvicorn python-dotenv +``` + +**Mida me just tegime:** +- **Loomine** väike eraldatud Python mull, kuhu saab paigaldada pakette mõjutamata teisi projekte +- **Aktiveerimine**, et terminal teaks, et tuleb kasutada just seda keskkonda +- **Paigaldasime** vajalikud paketid: OpenAI AI jaoks, FastAPI meie veebiraamistikuks, Uvicorn selle käivitamiseks ja python-dotenv turvaliseks salajaste haldamiseks + +**Põhilised sõltuvused ja nende selgitused:** +- **FastAPI**: moodne, kiire veebiraamistik automaatse API dokumentatsiooniga +- **Uvicorn**: ülikiire ASGI server FastAPI rakenduste jooksutamiseks +- **OpenAI**: ametlik teek GitHubi mudelitele ja OpenAI API-le +- **python-dotenv**: turvaline keskkonnamuutujate laadimine `.env` failidest + +### Keskkonna seadistus: saladuste turvaline hoidmine + +Enne API-d on aeg rääkida ühest tähtsaimast veebiarenduse õppetunnist: kuidas hoida oma saladusi tõesti saladustena. Keskkonnamuutujad on nagu turvakapp, millele ligi pääseb ainult teie rakendus. + +#### Mis on keskkonnamuutujad? + +**Mõelge keskkonnamuutujatele kui hoiusekastile** – te panete sinna väärtuslikud asjad ja ainult teie (ja teie rakendus) omab võtit neid kätte saada. Selle asemel, et kirjutada tundlikku teavet koodi sisse (mida kõik võiksid näha), salvestate selle turvaliselt keskkonda. + +**Siin on vahe:** +- **Vale viis**: Kirjutada parool kleepsule ja panna see monitorile +- **Õige viis**: Hoida parool turvalises paroolihalduris, kuhu ainult teie pääsete ligi + +#### Miks keskkonnamuutujad on olulised + +```python +# 🚨 ÄRGE kunagi tehke seda - API võti on kõigile nähtav +client = OpenAI( + api_key="ghp_1234567890abcdef...", # Keegi võib selle varastada! + base_url="https://models.github.ai/inference" +) + +# ✅ TEE NII - API võti hoitakse turvaliselt +client = OpenAI( + api_key=os.environ["GITHUB_TOKEN"], # Ainult teie rakendus saab sellele ligipääsu + base_url="https://models.github.ai/inference" +) +``` + +**Mida juhtub, kui kõvasti koodi sisse kirjutate saladusi:** +1. **Versioonikontrolli lekked**: Kõik, kes pääsevad teie Git hoidla juurde, näevad teie API võtit +2. **Avalikud hoidlad**: Kui pushite GitHubi, näevad kogu interneti kasutajad teie võtit +3. **Meeskonna jagamine**: Teised arendajad saavad teie isikliku API võtme kätte +4. **Turvarikkumised**: Kui keegi varastab võti, saab ta kasutada teie AI krediite + +#### Oma keskkonna faili loomine + +Loo `.env` fail oma tagapoe kausta. Sellesse faili salvestatakse teie saladused kohapeal: + +```bash +# .env fail - See EI TOHI MITTE KUNAGI Git'i salvestada +GITHUB_TOKEN=your_github_personal_access_token_here +FASTAPI_DEBUG=True +ENVIRONMENT=development +``` + +**.env faili mõistmine:** +- **Iga rida** sisaldab ühe salajase võtme vormingus `VÕTI=väärtus` +- **Ei ole tühikuid** võrdusmärgi ümber +- **Ei ole jutumärke** väärtuste ümber (tavaliselt) +- **Kommentaarid algavad** `#` märgiga + +#### Oma GitHubi isikliku ligipääsuvõtme loomine + +Teie GitHubi token on nagu eriparool, mis annab teie rakendusele õiguse kasutada GitHubi AI teenuseid: + +**Samm-sammult tokeni loomine:** +1. **Mine GitHubi seadetesse** → Arendaja seaded → Isiklikud ligipääsuvõtmed → Tokenid (klassikalised) +2. **Klõpsa "Genereeri uus token (klassikaline)"** +3. **Määra aegumistähtaeg** (30 päeva testimiseks, pikem tootmises) +4. **Vali õigused**: Märgi "repo" ja vajadusel muud load +5. **Genereeri token** ja kopeeri see kohe (seda ei saa hiljem vaadata!) +6. **Kleebi see oma `.env` faili** + +```bash +# Näide sellest, kuidas teie värav näeb välja (see on võlts!) +GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R +``` + +#### Keskkonnamuutujate laadimine Pythonis + +```python +import os +from dotenv import load_dotenv + +# Laadi keskkonnamuutujad failist .env +load_dotenv() + +# Nüüd pääsed neile turvaliselt ligi +api_key = os.environ.get("GITHUB_TOKEN") +if not api_key: + raise ValueError("GITHUB_TOKEN not found in environment variables!") + +client = OpenAI( + api_key=api_key, + base_url="https://models.github.ai/inference" +) +``` + +**Mida see kood teeb:** +- **Laeb** teie `.env` faili ja teeb muutujad Pythonile kättesaadavaks +- **Kontrollib**, kas vajalik token on olemas (hästi tehtud vigade käsitlus!) +- **Viskab** selge vea, kui token puudub +- **Kasutab** tokenit turvaliselt ilma seda koodis paljastamata + +#### Git turvalisus: `.gitignore` fail + +Teie `.gitignore` fail ütleb Gitile, milliseid faile mitte kunagi repositooriumisse lisada ega üles laadida: + +```bash +# .gitignore - Lisa need read +.env +*.env +.env.local +.env.production +__pycache__/ +venv/ +.vscode/ +``` + +**Miks see on äärmiselt oluline:** Kui lisate `.env` faili `.gitignore`-i, siis Git ignoreerib teie keskkonnafaili ja te ei pane kogemata saladusi GitHubi avalikku reposse. + +#### Erinevad keskkonnad, erinevad saladused + +Professionaalsed rakendused kasutavad erinevaid API võtmeid sõltuvalt keskkonnast: + +```bash +# .env.arendus +GITHUB_TOKEN=your_development_token +DEBUG=True + +# .env.tootmine +GITHUB_TOKEN=your_production_token +DEBUG=False +``` + +**Miks see oluline on:** Te ei taha, et arenduskatsetused mõjutaksid tootmise AI kasutuspiiranguid ja soovite erinevat turvataset erinevates keskkondades. + +### Arendusserveri käivitamine: Too oma FastAPI ellu +Nüüd tuleb põnev hetk – alustada oma FastAPI arendusserverit ja näha, kuidas sinu AI integratsioon ellu ärkab! FastAPI kasutab Uvicorni, ülikiiret ASGI serverit, mis on spetsiaalselt loodud asünkroonsete Python rakenduste jaoks. + +#### FastAPI serveri käivitamise protsessi mõistmine + +```bash +# Meetod 1: Otsene Pythoni täitmine (sisaldab automaatset uuesti laadimist) +python api.py + +# Meetod 2: Uvicorni otsene kasutamine (rohkem kontrolli) +uvicorn api:app --host 0.0.0.0 --port 5000 --reload +``` + +Kui sa käivitad selle käsu, toimub tagaekraanil järgmine: + +**1. Python laadib sinu FastAPI rakenduse**: +- Impordib kõik vajalikud teegid (FastAPI, Pydantic, OpenAI jne) +- Laadib keskkonnamuutujad sinu `.env` failist +- Loob FastAPI rakenduse eksemplari automaatse dokumentatsiooniga + +**2. Uvicorn konfigureerib ASGI serveri**: +- Sidub pordi 5000-ga asünkroonsete päringute käsitlemiseks +- Seadistab päringute marsruutimise automaatse valideerimisega +- Võimaldab kuuma taaskäivituse arenduse ajal (taaskäivitub failimuutustel) +- Genereerib interaktiivse API dokumentatsiooni + +**3. Server hakkab kuulama**: +- Su terminal kuvab: `INFO: Uvicorn running on http://0.0.0.0:5000` +- Server suudab käsitleda mitut samaaegset AI päringut +- Sinu API on valmis automaatsete dokumentidega aadressil `http://localhost:5000/docs` + +#### Mida sa peaksid nägema, kui kõik töötab + +```bash +$ python api.py +INFO: Will watch for changes in these directories: ['/your/project/path'] +INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit) +INFO: Started reloader process [12345] using WatchFiles +INFO: Started server process [12346] +INFO: Waiting for application startup. +INFO: Application startup complete. +``` + +**FastAPI väljundi mõistmine:** +- **Will watch for changes**: Automaatselt taaskäivitatakse arenduse jaoks +- **Uvicorn running**: Kõrge jõudlusega ASGI server töötab +- **Started reloader process**: Failide jälgija automaatsete taaskäivituste jaoks +- **Application startup complete**: FastAPI rakendus edukalt algatatud +- **Interactive docs available**: Külasta `/docs` automaatse API dokumentatsiooni jaoks + +#### FastAPI testimise mitmed võimsad võimalused + +FastAPI pakub mitmeid mugavaid viise oma API testimiseks, sealhulgas automaatset interaktiivset dokumentatsiooni: + +**Meetod 1: Interaktiivne API dokumentatsioon (Soovitatav)** +1. Ava oma brauseris aadress `http://localhost:5000/docs` +2. Näed Swagger UI-d kõigi oma lõpp-punktidega dokumenteerituna +3. Klõpsa `/hello` → "Try it out" → Sisesta test-sõnum → "Execute" +4. Näe vastust otse brauseris õige vormindusega + +**Meetod 2: Lihtne brauseritest** +1. Mine aadressile `http://localhost:5000`, et kontrollida juurdepääsu +2. Mine aadressile `http://localhost:5000/health`, et kontrollida serveri seisundit +3. See kinnitab, et sinu FastAPI server töötab korralikult + +**Meetod 2: Käsurea test (Edasijõudnutele)** +```bash +# Testi curl'iga (kui see on saadaval) +curl -X POST http://localhost:5000/hello \ + -H "Content-Type: application/json" \ + -d '{"message": "Hello AI!"}' + +# Oodatud vastus: +# {"response": "Tere! Olen sinu tehisintellekti assistent. Kuidas ma saan sind täna aidata?"} +``` + +**Meetod 3: Python testskript** +```python +# test_api.py - Loo see fail oma API testimiseks +import requests +import json + +# Testi API lõpp-punkti +url = "http://localhost:5000/hello" +data = {"message": "Tell me a joke about programming"} + +response = requests.post(url, json=data) +if response.status_code == 200: + result = response.json() + print("AI Response:", result['response']) +else: + print("Error:", response.status_code, response.text) +``` + +#### Levinud käivitamisvigade tõrkeotsing + +| Veateade | Mida see tähendab | Kuidas parandada | +|---------------|---------------------|--------------------| +| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI pole paigaldatud | Käivita oma virtuaalkeskkonnas `pip install fastapi uvicorn` | +| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI server pole paigaldatud | Käivita oma virtuaalkeskkonnas `pip install uvicorn` | +| `KeyError: 'GITHUB_TOKEN'` | Keskkonnamuutuja puudub | Kontrolli oma `.env` faili ja `load_dotenv()` kutsumist | +| `Address already in use` | Port 5000 on hõivatud | Lõpeta teised protsessid, mis kasutavad porti 5000 või muuda porti | +| `ValidationError` | Päringu andmed ei vasta Pydantic mudelile | Kontrolli, et päringu vorming vastab oodatud skeemile | +| `HTTPException 422` | Töötlemata üksus | Päringu valideerimine ebaõnnestus, kontrolli `/docs` õiget vormingut | +| `OpenAI API error` | AI teenuse autentimine ebaõnnestus | Kontrolli, et sinu GitHub token on õige ja omab vajalikke õigusi | + +#### Arenduse parimad tavad + +**Kuuma taaskäivitamine**: FastAPI koos Uvicorniga võimaldab automaatset taaskäivitust, kui salvestad oma Python failid. See tähendab, et saad oma koodi muuta ja kohe testida ilma serverit käsitsi taaskäivitamata. -app = Flask(__name__) -CORS(app) # * example.com +```python +# Luba kuumlaadimine otseselt +if __name__ == "__main__": + app.run(host="0.0.0.0", port=5000, debug=True) # debug=True lubab kuumlaadimise +``` -@app.route("/", methods=["GET"]) -def index(): - return "Welcome to this API. Call POST /hello with 'message': 'my message' as JSON payload" +**Logimise lisamine arenguks**: Lisa logimine, et aru saada toimuvast: +```python +import logging + +# Logimise seadistamine +logging.basicConfig(level=logging.INFO) +logger = logging.getLogger(__name__) @app.route("/hello", methods=["POST"]) def hello(): - # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") + + logger.info(f"Received message: {message}") + + if not message: + logger.warning("Empty message received") + return jsonify({"error": "Message field is required"}), 400 + + try: + response = call_llm(message, "You are a helpful and friendly assistant.") + logger.info(f"AI response generated successfully") + return jsonify({"response": response}) + except Exception as e: + logger.error(f"AI API error: {str(e)}") + return jsonify({"error": "AI service temporarily unavailable"}), 500 +``` - response = call_llm(message, "You are a helpful assistant.") - return jsonify({ - "response": response - }) +**Miks logimine aitab**: Arenduse ajal näed täpselt, millised päringud tulevad, kuidas AI vastab ja kus vead ilmnevad. See teeb silumise palju kiiremaks. -if __name__ == "__main__": - app.run(host="0.0.0.0", port=5000) +### GitHub Codespaces seadistamine: Pilve arendus lihtsaks + +GitHub Codespaces on nagu võimas arvuti pilves, millele saad ligi igast brauserist. Kui töötad Codespaces keskkonnas, on mõned lisasammud selleks, et sinu backend oleks frontendile kättesaadav. + +#### Codespaces võrgustiku mõistmine + +Kohalikus arenduskeskkonnas töötab kõik samas arvutis: +- Backend: `http://localhost:5000` +- Frontend: `http://localhost:3000` (või file://) + +Codespaces'is töötab su arenduskeskkond GitHubi serverites, seega "localhost" tähendab midagi muud. GitHub loob automaatselt sinu teenustele avalikud URL-id, kuid neid tuleb korralikult seadistada. + +#### Codespaces samm-sammult seadistamine + +**1. Käivita oma backend server**: +```bash +cd backend +python api.py ``` -Siin loome Flaski API ja määrame vaikimisi marsruudi "/" ja "/chat". Viimane on mõeldud meie esiküljele, et edastada küsimusi tagapõhja. +Näed tuttavat FastAPI/Uvicorni käivitussõnumit, kuid nüüd töötab see Codespace keskkonnas. -Et integreerida *llm.py*, tuleb teha järgmist: +**2. Konfigureeri pordi nähtavus**: +- Vaata VS Code allosas paneelist "Ports" vahekaarti +- Leia port 5000 listist +- Paremklõps port 5000 peal +- Vali "Port Visibility" → "Public" -- Impordi funktsioon `call_llm`: +**Miks muuta avalikuks?** Vaikimisi on Codespace pordid privaatsetena (kättesaadavad ainult sulle). Avalikuks tegemine lubab su frontendi (mis töötab brauseris) suhelda backendiga. - ```python - from llm import call_llm - from flask import Flask, request - ``` +**3. Saa avalik URL**: +Pärast pordi avalikuks tegemist näed aadressi sarnast: +``` +https://your-codespace-name-5000.app.github.dev +``` -- Kutsu seda "/chat" marsruudilt: +**4. Uuenda oma frontend konfiguratsiooni**: +```javascript +// Oma frontend app.js-is uuenda BASE_URL: +this.BASE_URL = "https://your-codespace-name-5000.app.github.dev"; +``` - ```python - @app.route("/hello", methods=["POST"]) - def hello(): - # get message from request body { "message": "do this taks for me" } - data = request.get_json() - message = data.get("message", "") +#### Codespace URL-ide mõistmine - response = call_llm(message, "You are a helpful assistant.") - return jsonify({ - "response": response - }) - ``` +Codespace URL-id järgivad ettenähtud mustrit: +``` +https://[codespace-name]-[port].app.github.dev +``` - Siin analüüsime sissetulevat päringut, et saada JSON-kehast `message` omadus. Seejärel kutsume LLM-i selle käsuga: +**Selgitus:** +- `codespace-name`: Sinu Codespace unikaalne nimi (tavaliselt sisaldab kasutajanime) +- `port`: Teenuse tööport (5000 meie FastAPI puhul) +- `app.github.dev`: GitHubi domeen Codespace rakendustele - ```python - response = call_llm(message, "You are a helpful assistant") +#### Codespace seadistuse testimine - # return the response as JSON - return jsonify({ - "response": response - }) - ``` +**1. Testi backend otse**: +Ava avalik URL brauseris uuel vahekaardil. Sa peaksid nägema: +``` +Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field. +``` -Suurepärane, nüüd on vajalik tehtud. +**2. Testi brauseri arendajatööriistadega**: +```javascript +// Ava brauseri konsool ja testi oma API-t +fetch('https://your-codespace-name-5000.app.github.dev/hello', { + method: 'POST', + headers: {'Content-Type': 'application/json'}, + body: JSON.stringify({message: 'Hello from Codespaces!'}) +}) +.then(response => response.json()) +.then(data => console.log(data)); +``` -## Cors-i seadistamine +#### Codespaces vs Kohalik Arendus -Peame mainima, et seadistame midagi nagu CORS (cross-origin resource sharing). See tähendab, et kuna meie tagapõhi ja esikülg töötavad erinevatel portidel, peame lubama esiküljel tagapõhja kutsuda. +| Aspekt | Kohalik Arendus | GitHub Codespaces | +|--------|-----------------|-------------------| +| **Seadistusaeg** | Pikem (Python, sõltuvused) | Kohene (eelkonfigureeritud keskkond) | +| **URLi ligipääs** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` | +| **Pordi seadistus** | Automaatne | Käsitsi (muuda pordid avalikuks) | +| **Failide püsivus** | Kohalik masin | GitHubi hoidla | +| **Koostöö** | Keskkonna jagamine raske | Lihtne jagada Codespace linki | +| **Interneti sõltuvus** | Ainult AI API kõnede jaoks | Vajalik kõigi jaoks | -### Pythoniga +#### Codespace arenduse soovitused -Failis *api.py* on koodijupp, mis selle seadistab: +**Keskkonnamuutujad Codespaces'is**: +Sinu `.env` fail töötab Codespaces samamoodi, kuid saad keskkonnamuutujaid ka otse Codespace’is määrata: -```python -from flask_cors import CORS +```bash +# Määra keskkonnamuutuja praeguse sessiooni jaoks +export GITHUB_TOKEN="your_token_here" -app = Flask(__name__) -CORS(app) # * example.com +# Või lisa see oma .bashrc faili, et see säiliks +echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc ``` -Praegu on see seadistatud lubama "*", mis tähendab kõiki päritolusid, kuid see on natuke ebaturvaline. Tootmises peaksime selle piirama. +**Pordi haldamine**: +- Codespaces tuvastab automaatselt, kui su rakendus hakkab kuulama pordil +- Võid suunata mitut porti korraga (kasulik näiteks hiljem andmebaasi lisamisel) +- Pordid jäävad kättesaadavaks seni, kuni su Codespace töötab -## Projekti käivitamine +**Arendusvoog**: +1. Tee koodimuudatusi VS Code'is +2. FastAPI taaskäivitub automaatselt (Uvicorni reload režiim) +3. Testi muudatusi kohe avaliku URL-i kaudu +4. Tee commit ja push, kui valmis -Projekti käivitamiseks tuleb esmalt käivitada tagapõhi ja seejärel esikülg. +> 💡 **Hea näpunäide**: Salvesta oma Codespace backend URL lemmikutesse arenduse ajal. Kuna Codespace nimed on stabiilsed, ei muutu URL seni, kuni kasutad sama Codespace'i. -### Pythoniga +## Frontendi jutukas liidese loomine: Kus inimesed kohtuvad AI-ga -Olgu, meil on *llm.py* ja *api.py*. Kuidas saame tagapõhja tööle panna? Siin on kaks asja, mida tuleb teha: +Nüüd loome kasutajaliidese – selle osa, mis määrab, kuidas inimesed suhtlevad sinu AI assistendiga. Nagu originaalse iPhone liidese disain, keskendume keeruka tehnoloogia intuitiivsele ja loomulikule kasutamisele. -- Paigalda sõltuvused: +### Moodsa frontendi arhitektuuri mõistmine - ```sh - cd backend - python -m venv venv - source ./venv/bin/activate +Meie jutukas liides on mida nimetatakse "Ühe lehekülje rakenduseks" ehk SPA. Selle asemel, et iga klõps laadiks uue lehe, uuendab meie äpp ennast sujuvalt ja viivitamatult: - pip install openai flask flask-cors openai - ``` +**Vananenud veebisaidid**: Nagu füüsilise raamatu lehekülgi keeramine – iga klõps võtab uuele lehele +**Meie jutuka äpp**: Nagu telefoni kasutamine – kõik voolab ja uuendub sujuvalt -- Käivita API +```mermaid +graph TD + A[Kasutaja Sisestab Sõnumi] --> B[JavaScript Püüab Sisendi] + B --> C[Andmete Kontrollimine & Vormindamine] + C --> D[Saada Tagapõhja API-le] + D --> E[Kuva Laadimise Oleku] + E --> F[Võta AI Vastus] + F --> G[Uuenda Vestluse Liidest] + G --> H[Valmis Järgmise Sõnumi jaoks] +``` +```mermaid +classDiagram + class ChatApp { + +messages: HTMLElement + +form: HTMLElement + +input: HTMLElement + +sendButton: HTMLElement + +BASE_URL: string + +API_ENDPOINT: string + + +constructor() + +initializeEventListeners() + +handleSubmit(event) + +callAPI(message) + +appendMessage(text, role) + +escapeHtml(text) + +scrollToBottom() + +setLoading(isLoading) + } + + ChatApp --> DOM : manipuleerib + ChatApp --> FastAPI : saadab päringuid +``` +### Frontendi arenduse kolm alustala - ```sh - python api.py - ``` +Iga frontend rakendus – alates lihtsatest veebilehtedest kuni keerukate äppideni nagu Discord või Slack – baseerub kolmel põhitehnoloogial. Mõtle neile kui kõigile veebis nähtava ja katsutava alusele: + +**HTML (Struktuur)**: See on sinu vundament +- Otsustab, millised elemendid eksisteerivad (nupud, tekstialad, konteinerid) +- Annab sisule tähenduse (see on päis, see on vorm jne) +- Loob lihtsa struktuuri, millele kõik ülejäänu tugineb + +**CSS (Esitlus)**: See on sinu sisekujundaja +- Teeb kõik ilusaks (värvid, fondid, paigutus) +- Haldab erinevaid ekraanisuurusi (telefon vs sülearvuti vs tahvel) +- Loob sujuvaid animatsioone ja visuaalset tagasisidet + +**JavaScript (Käitumine)**: See on sinu aju +- Vastu võtab kasutaja tegevusi (klõpsud, kirjutamine, kerimine) +- Suhtleb backendiga ja uuendab lehte +- Teeb kõik interaktiivseks ja dünaamiliseks + +**Mõtle sellele kui arhitektuurile:** +- **HTML**: Struktuuriskeem (ruumide ja seoste defineerimine) +- **CSS**: Esteetika ja keskkonna disain (visuaalne stiil ja kasutajakogemus) +- **JavaScript**: Mehaanilised süsteemid (funktsionaalsus ja interaktiivsus) + +### Miks moodne JavaScript arhitektuur loeb - Kui oled Codespaces'is, mine redaktori alumises osas Ports-i, klõpsa sellel parema hiireklahviga ja vali "Port Visibility" ning vali "Public". +Meie jutuka rakendus kasutab moodsaid JavaScript mustreid, mida näed professionaalsetes äppides. Nende mõistmine aitab sul arendajana kasvada: -### Esikülje loomine +**Klassipõhine arhitektuur**: Korraldame oma koodi klassidesse, mis on nagu objektide sinise prindid +**Async/Await**: Moodne viis käsitleda operatsioone, mis võtavad aega (nt API kõned) +**Sündmusel põhinev programmeerimine**: Äpp reageerib kasutaja tegevustele (klõpsud, klahvivajutused), mitte ei jooksuta tsüklis +**DOM manipuleerimine**: Veebilehe sisu dünaamiline uuendamine vastavalt kasutajate ja API vastustele -Nüüd, kui API töötab, loome sellele esikülje. Minimaalne esikülg, mida me järk-järgult täiustame. Kaustas *frontend* loo järgmine: +### Projekti struktuuri ülesseadmine + +Loo frontend kaust järgmise organiseeritud struktuuriga: ```text -backend/ frontend/ -index.html -app.js -styles.css +├── index.html # Main HTML structure +├── app.js # JavaScript functionality +└── styles.css # Visual styling ``` -Alustame **index.html**-ga: +**Arhitektuuri mõistmine:** +- **Eraldab** mured struktuuri (HTML), käitumise (JavaScript) ja esituse (CSS) vahel +- **Hoidab** lihtsat failistruktuuri, mis on lihtne navigeerida ja modifitseerida +- **Järgib** veebiarenduse parimaid tavasid organisatsiooni ja hoolduse jaoks + +### HTML vundamendi loomine: Semantiline struktuur ligipääsetavuseks + +Alustame HTML struktuuriga. Moodne veebiarendus rõhutab "semantilist HTML-i" – kasutades HTML elemente, mis selgelt kirjeldavad oma eesmärki, mitte ainult välimust. See teeb sinu rakenduse ligipääsetavaks ekraanilugeritele, otsimootoritele ja teistele tööriistadele. + +**Miks semantiline HTML on oluline**: Kujuta ette, et kirjeldad oma jutuka äppi telefonis. Ütled, et "seal on päis pealkirjaga, põhiala, kus vestlused toimuvad ja vorm allosas sõnumite kirjutamiseks." Semantiline HTML kasutab elemente, mis vastavad sellele loomulikule kirjeldusele. + +Loo `index.html` selle läbimõeldud struktuuriga märgistus: ```html - - - - - -
- - - -
- + + ``` -Ülaltoodud on absoluutne miinimum, mida vajad vestlusakna toetamiseks. See koosneb tekstialast, kuhu sõnumid kuvatakse, sisendväljast, kuhu sõnum kirjutada, ja nupust, et sõnum tagapõhja saata. Vaatame järgmisena JavaScripti failis *app.js*. +**Iga HTML elemendi ja selle eesmärgi mõistmine:** + +#### Dokumendi struktuur +- **``**: Ütleb brauserile, et tegu on moodsa HTML5-ga +- **``**: Määrab lehe keele ekraanilugeritele ja tõlketööriistadele +- **``**: Tagab rahvusvahelise teksti õiged tähemärgid +- **``**: Teeb lehe mobiilisõbralikuks, kontrollides suumi ja skaleerimist + +#### Semantilised elemendid +- **`
`**: Selgelt identifitseerib ülemise osa pealkirja ja kirjeldusega +- **`
`**: Määrab põhisisu ala (kus vestlused toimuvad) +- **`
`**: Semantiliselt õige kasutajasisendiks, lubab korrektset klaviatuurinavigatsiooni + +#### Ligipääsetavuse omadused +- **`role="log"`**: Ütleb ekraanilugeritele, et see ala sisaldab sõnumite kronoloogilist logi +- **`aria-live="polite"`**: Teatab uutest sõnumitest ekraanilugerile ilma katkestamata +- **`aria-label`**: Annab kirjeldavad sildid vormikontrollidele +- **`required`**: Brauser valideerib, et kasutaja sisestab sõnumi enne saatmist + +#### CSS ja JavaScripti integratsioon +- **`class` atribuudid**: Annab stiilimise jaoks konksud CSS-ile (nt `chat-container`, `input-group`) +- **`id` atribuudid**: Lubab JavaScriptil leida ja manipuleerida kindlaid elemente +- **Skripti paigutus**: JavaScript fail laetakse lõpus, nii et HTML laaditakse esmalt + +**Miks see struktuur toimib:** +- **Loogiline voog**: Päis → Põhisisu → Sisendi vorm vastab loomulikule lugemisjärjekorrale +- **Klaviatuuriga ligipääsetav**: Kasutajad saavad tabida kõik interaktiivsed elemendid läbi +- **Ekraanilugerile sõbralik**: Selged maamärgid ja kirjelduse visuaalpuudega kasutajatele +- **Mobiilisõbralik**: Viewport meta tag võimaldab responsiivset disaini +- **Progressiivne täiustamine**: Töötab ka juhul, kui CSS või JavaScript ei laadi + +### Interaktiivse JavaScripti lisamine: moodsa veebirakenduse loogika + +Nüüd ehitame JavaScripti, mis toob meie vestlusliidese ellu. Kasutame kaasaegseid JavaScripti mustreid, millega kohtad professionaalses veebiarenduses, sealhulgas ES6 klasse, async/await ja sündmuspõhist programmeerimist. + +#### Kaasaegse JavaScripti arhitektuuri mõistmine + +Selle asemel, et kirjutada proseduurset koodi (järjestikuste funktsioonide seeria), loome **klassi-põhise arhitektuuri**. Mõtle klassile kui plaanile objektide loomiseks – nagu arhitekti plaan, mida saab kasutada mitme maja ehitamiseks. + +**Miks kasutada klasse veebirakendustes?** +- **Korraldus**: Kõik seotud funktsionaalsus on koos +- **Taaskasutatavus**: Saad sama lehe peal luua mitu vestlusinstantsi +- **Hooldatavus**: Lihtsam siluda ja muuta konkreetseid funktsioone +- **Professionaalne standard**: Seda mustrit kasutatakse raamistikudes nagu React, Vue ja Angular + +Loo `app.js` see kaasaegse ja hästi organiseeritud JavaScriptiga: + +```javascript +// app.js - Kaasaegse vestlusrakenduse loogika + +class ChatApp { + constructor() { + // Hangi viited DOM elementidele, mida peame manipuleerima + this.messages = document.getElementById("messages"); + this.form = document.getElementById("chatForm"); + this.input = document.getElementById("messageInput"); + this.sendButton = document.getElementById("sendBtn"); + + // Konfigureeri siin oma backend URL + this.BASE_URL = "http://localhost:5000"; // Uuenda see vastavalt oma keskkonnale + this.API_ENDPOINT = `${this.BASE_URL}/hello`; + + // Sea sündmuse kuulajad üles vestlusrakenduse loomisel + this.initializeEventListeners(); + } + + initializeEventListeners() { + // Kuula vormi esitamist (kui kasutaja klikib Saada või vajutab Enter) + this.form.addEventListener("submit", (e) => this.handleSubmit(e)); + + // Kuula ka Enter-klahvi sisestusväljal (parem kasutajakogemus) + this.input.addEventListener("keypress", (e) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + this.handleSubmit(e); + } + }); + } + + async handleSubmit(event) { + event.preventDefault(); // Tõkesta vormi poolt lehe värskendamine + + const messageText = this.input.value.trim(); + if (!messageText) return; // Ära saada tühje sõnumeid + + // Anna kasutajale tagasisidet, et midagi toimub + this.setLoading(true); + + // Lisa kasutaja sõnum vestlusele kohe (optimistlik UI) + this.appendMessage(messageText, "user"); + + // Puhasta sisendväli, et kasutaja saaks järgmise sõnumi kirjutada + this.input.value = ''; + + try { + // Kutsu välja AI API ja oota vastust + const reply = await this.callAPI(messageText); + + // Lisa AI vastus vestlusele + this.appendMessage(reply, "assistant"); + } catch (error) { + console.error('API Error:', error); + this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error"); + } finally { + // Luba liides uuesti kasutamiseks olenemata edu või ebaõnnestumise tulemusest + this.setLoading(false); + } + } + + async callAPI(message) { + const response = await fetch(this.API_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ message }) + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + return data.response; + } + + appendMessage(text, role) { + const messageElement = document.createElement("div"); + messageElement.className = `message ${role}`; + messageElement.innerHTML = ` +
+ ${this.escapeHtml(text)} + ${new Date().toLocaleTimeString()} +
+ `; + + this.messages.appendChild(messageElement); + this.scrollToBottom(); + } + + escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + scrollToBottom() { + this.messages.scrollTop = this.messages.scrollHeight; + } + + setLoading(isLoading) { + this.sendButton.disabled = isLoading; + this.input.disabled = isLoading; + this.sendButton.textContent = isLoading ? "Sending..." : "Send"; + } +} -**app.js** +// Algata vestlusrakendus, kui leht laetakse +document.addEventListener("DOMContentLoaded", () => { + new ChatApp(); +}); +``` -```js -// app.js +#### Iga JavaScripti kontseptsiooni mõistmine + +**ES6 klassi struktuur**: +```javascript +class ChatApp { + constructor() { + // See käivitub, kui loote uue ChatAppi eksemplari + // See on nagu teie vestluse "seadistamise" funktsioon + } + + methodName() { + // Meetodid on funktsioonid, mis kuuluvad klassile + // Nad saavad klassi omadustele juurde pääseda, kasutades "this" + } +} +``` -(function(){ - // 1. set up elements - const messages = document.getElementById("messages"); - const form = document.getElementById("form"); - const input = document.getElementById("input"); +**Async/Await muster**: +```javascript +// Vana meetod (tagasikutsumise põrgu): +fetch(url) + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.error(error)); + +// Kaasaegne meetod (async/await): +try { + const response = await fetch(url); + const data = await response.json(); + console.log(data); +} catch (error) { + console.error(error); +} +``` - const BASE_URL = "change this"; - const API_ENDPOINT = `${BASE_URL}/hello`; +**Sündmuspõhine programmeerimine**: +Selle asemel, et pidevalt kontrollida, kas midagi juhtus, "kuulame" sündmusi: +```javascript +// Kui vorm esitatakse, käivita handleSubmit +this.form.addEventListener("submit", (e) => this.handleSubmit(e)); - // 2. create a function that talks to our backend - async function callApi(text) { - const response = await fetch(API_ENDPOINT, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ message: text }) - }); - let json = await response.json(); - return json.response; - } +// Kui Enter-klahvi vajutatakse, käivita ka handleSubmit +this.input.addEventListener("keypress", (e) => { /* ... */ }); +``` - // 3. add response to our textarea - function appendMessage(text, role) { - const el = document.createElement("div"); - el.className = `message ${role}`; - el.innerHTML = text; - messages.appendChild(el); - } +**DOM-i manipuleerimine**: +```javascript +// Loo uusi elemente +const messageElement = document.createElement("div"); - // 4. listen to submit events - form.addEventListener("submit", async(e) => { - e.preventDefault(); - // someone clicked the button in the form - - // get input - const text = input.value.trim(); +// Muuda nende omadusi +messageElement.className = "message user"; +messageElement.innerHTML = "Hello world!"; - appendMessage(text, "user") +// Lisa lehele +this.messages.appendChild(messageElement); +``` - // reset it - input.value = ''; +#### Turvalisus ja parimad praktikad - const reply = await callApi(text); +**XSS-i ennetamine**: +```javascript +escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; // See lisab automaatselt HTML-i kaldkriipsud + return div.innerHTML; +} +``` - // add to messages - appendMessage(reply, "assistant"); +**Miks see oluline on**: Kui kasutaja kirjutab ``, tagab see funktsioon, et see kuvatakse tekstina, mitte ei täideta koodina. - }) -})(); +**Vigade käsitlemine**: +```javascript +try { + const reply = await this.callAPI(messageText); + this.appendMessage(reply, "assistant"); +} catch (error) { + // Kuvage kasutajasõbralik viga rakenduse kokkujooksmise asemel + this.appendMessage("Sorry, I'm having trouble...", "error"); +} ``` -Läheme koodi osade kaupa läbi: +**Kasutajakogemuse kaalutlused**: +- **Optimistlik UI**: Lisa kasutaja sõnum kohe, ära oota serveri vastust +- **Laadimisolekud**: Vajalike nuppude keelamine ja "Saadan..." teate kuvamine ootamise ajal +- **Automaattõmme**: Hoia uusimad sõnumid nähtavad +- **Sisestuse valideerimine**: Ära saada tühje sõnumeid +- **Klaviatuuri otseteed**: Enter klahv saadab sõnumi (nagu tõelistes vestlusrakendustes) -- 1) Siin saame viited kõigile elementidele, mida hiljem koodis kasutame. -- 2) Selles osas loome funktsiooni, mis kasutab sisseehitatud `fetch` meetodit, et kutsuda meie tagapõhja. -- 3) `appendMessage` aitab lisada vastuseid ja seda, mida kasutaja sisestab. -- 4) Siin kuulame submit-sündmust, loeme sisendvälja, lisame kasutaja sõnumi tekstialale, kutsume API-d ja kuvame vastuse tekstialal. +#### Rakenduse töövoo mõistmine -Vaatame järgmisena stiile. Siin saad olla loov ja kujundada, kuidas soovid, kuid siin on mõned soovitused: +1. **Leht laeb** → käivitub `DOMContentLoaded` sündmus → luuakse `new ChatApp()` +2. **Konstruktor käivitub** → võtab DOM elementide viited → seadistab sündmuste kuulajad +3. **Kasutaja kirjutab sõnumi** → vajutab Enter või klikib Saada → käivitatakse `handleSubmit` +4. **handleSubmit** → valideerib sisendi → kuvab laadimisoleku → kutsub API-d +5. **API vastab** → lisab AI sõnumi vestlusesse → võimaldab uuesti liidesega suhelda +6. **Järgmine sõnum saabub** → kasutaja võib jätkata vestlust -**styles.css** +See arhitektuur on skaleeritav – saad lihtsalt lisada funktsioone nagu sõnumite muutmine, failide üleslaadimine või mitu vestluse niiti ilma põhistruktuuri ümberkirjutamata. + +### 🎯 Pedagoogiline kontrollpunkt: kaasaegne frontend arhitektuur + +**Arhitektuuri mõistmine:** Sa oled rakendanud täieliku ühe lehe rakenduse, kasutades kaasaegseid JavaScripti mustreid. See esindab professionaalset taset frontend-arenduses. + +**Võtmekontseptsioonid õpitud**: +- **ES6 klassipõhine arhitektuur**: organiseeritud, hooldatav koodistruktuur +- **Async/Await mustrid**: kaasaegne asünkroonne programmeerimine +- **Sündmuspõhine programmeerimine**: reageeriv kasutajaliidese disain +- **Turvalisuse parimad tavad**: XSS ennetamine ja sisendi valideerimine + +**Tööstuslik seos:** Mustrid, mida õppisid (klassi-arhitektuur, asünkroonsed toimingud, DOM-i manipuleerimine), on kaasaegsete raamistikute nagu React, Vue ja Angular aluseks. Sa ehitad sama arhitektuurse mõtteviisiga, mida kasutatakse tootmisrakendustes. + +**Reflektsiooniküsimus:** Kuidas laiendaksid seda vestlusrakendust, et hallata mitut vestlust või kasutaja autentimist? Mõtle vajalikele arhitektuurimuudatustele ja klassi struktuuri arengule. + +### Stiilita oma vestlusliidest + +Nüüd loome kaasaegse ja visuaalselt meeldiva vestlusliidese CSS-iga. Hea stiil teeb sinu rakenduse professionaalseks ning parandab üldist kasutajakogemust. Kasutame tänapäevaseid CSS-i funktsioone nagu Flexbox, CSS Grid ja kohandatud omadusi, et tagada reageeriv ja ligipääsetav disain. + +Loo `styles.css` selle põhjaliku stiiliga: + +```css +/* styles.css - Modern chat interface styling */ + +:root { + --primary-color: #2563eb; + --secondary-color: #f1f5f9; + --user-color: #3b82f6; + --assistant-color: #6b7280; + --error-color: #ef4444; + --text-primary: #1e293b; + --text-secondary: #64748b; + --border-radius: 12px; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.chat-container { + width: 100%; + max-width: 800px; + height: 600px; + background: white; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.chat-header { + background: var(--primary-color); + color: white; + padding: 20px; + text-align: center; +} + +.chat-header h1 { + font-size: 1.5rem; + margin-bottom: 5px; +} + +.chat-header p { + opacity: 0.9; + font-size: 0.9rem; +} + +.chat-messages { + flex: 1; + padding: 20px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 15px; + background: var(--secondary-color); +} -``` .message { - background: #222; - box-shadow: 0 0 0 10px orange; - padding: 10px: - margin: 5px; + display: flex; + max-width: 80%; + animation: slideIn 0.3s ease-out; } .message.user { - background: blue; + align-self: flex-end; +} + +.message.user .message-content { + background: var(--user-color); + color: white; + border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius); } .message.assistant { - background: grey; -} + align-self: flex-start; +} + +.message.assistant .message-content { + background: white; + color: var(--text-primary); + border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px; + border: 1px solid #e2e8f0; +} + +.message.error .message-content { + background: var(--error-color); + color: white; + border-radius: var(--border-radius); +} + +.message-content { + padding: 12px 16px; + box-shadow: var(--shadow); + position: relative; +} + +.message-text { + display: block; + line-height: 1.5; + word-wrap: break-word; +} + +.message-time { + display: block; + font-size: 0.75rem; + opacity: 0.7; + margin-top: 5px; +} + +.chat-form { + padding: 20px; + border-top: 1px solid #e2e8f0; + background: white; +} + +.input-group { + display: flex; + gap: 10px; + align-items: center; +} + +#messageInput { + flex: 1; + padding: 12px 16px; + border: 2px solid #e2e8f0; + border-radius: var(--border-radius); + font-size: 1rem; + outline: none; + transition: border-color 0.2s ease; +} + +#messageInput:focus { + border-color: var(--primary-color); +} + +#messageInput:disabled { + background: #f8fafc; + opacity: 0.6; + cursor: not-allowed; +} + +#sendBtn { + padding: 12px 24px; + background: var(--primary-color); + color: white; + border: none; + border-radius: var(--border-radius); + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s ease; + min-width: 80px; +} + +#sendBtn:hover:not(:disabled) { + background: #1d4ed8; +} + +#sendBtn:disabled { + background: #94a3b8; + cursor: not-allowed; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive design for mobile devices */ +@media (max-width: 768px) { + body { + padding: 10px; + } + + .chat-container { + height: calc(100vh - 20px); + border-radius: 8px; + } + + .message { + max-width: 90%; + } + + .input-group { + flex-direction: column; + gap: 10px; + } + + #messageInput { + width: 100%; + } + + #sendBtn { + width: 100%; + } +} + +/* Accessibility improvements */ +@media (prefers-reduced-motion: reduce) { + .message { + animation: none; + } + + * { + transition: none !important; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + .chat-container { + background: #1e293b; + color: #f1f5f9; + } + + .chat-messages { + background: #0f172a; + } + + .message.assistant .message-content { + background: #334155; + color: #f1f5f9; + border-color: #475569; + } + + .chat-form { + background: #1e293b; + border-color: #475569; + } + + #messageInput { + background: #334155; + color: #f1f5f9; + border-color: #475569; + } +} ``` -Nende kolme klassiga saad kujundada sõnumeid erinevalt, sõltuvalt sellest, kas need tulevad assistendilt või sinult kui kasutajalt. Inspiratsiooni saamiseks vaata kausta `solution/frontend/styles.css`. +**CSS arhitektuuri mõistmine:** +- **Kasutab** CSS-i kohandatud omadusi (muutujaid) järjepidevaks temaatikaks ja lihtsaks hoolduseks +- **Rakendab** Flexboxi paigutust reageerivaks disainiks ja korrektselt joondamiseks +- **Sisaldab** sujuvaid animatsioone sõnumite ilmumiseks ilma tähelepanu hajutamata +- **Tagab** visuaalse eristuse kasutaja sõnumite, AI vastuste ja vigade vahel +- **Toetab** reageerivat disaini, mis töötab nii lauaarvutites kui mobiilseadmetes +- **Arvestab** ligipääsetavusega vähendatud liikumise eelistuste ja õige kontrastsusega +- **Pakkub** pimeda režiimi tuge vastavalt kasutaja süsteemi seadele -### Baasaadressi muutmine +### Backend URL-i seadistamine -Siin oli üks asi, mida me ei seadistanud, ja see oli `BASE_URL`. Seda ei teata enne, kui tagapõhi on käivitatud. Selle seadistamiseks: +Viimane samm on uuendada `BASE_URL` oma JavaScriptis, et see vastaks sinu backend serverile: -- Kui API töötab kohalikult, peaks see olema midagi nagu `http://localhost:5000`. -- Kui töötab Codespaces'is, peaks see olema midagi nagu "[name]app.github.dev". +```javascript +// Kohalikuks arenduseks +this.BASE_URL = "http://localhost:5000"; -## Ülesanne +// GitHub Codespacesi jaoks (asenda oma tegeliku URL-iga) +this.BASE_URL = "https://your-codespace-name-5000.app.github.dev"; +``` + +**Backend URL-i määramine:** +- **Kohalik arendus**: Kasuta `http://localhost:5000`, kui frontend ja backend töötavad mõlemad lokaalselt +- **Codespaces**: Leia oma backend URL Ports vahekaardilt pärast pordi 5000 avalikuks tegemist +- **Tootmine**: Asenda see tegeliku domeeniga, kui kasutad hostinguteenust + +> 💡 **Testimisnõuanne**: Saad oma backend’i otse testida, avades juur-URL-i brauseris. Sinuga peaks tervitama FastAPI serveri sõnum. + +## Testimine ja juurutus + +Nüüd, kui sul on valmis nii frontend kui backend komponendid, testime, kas kõik töötab koos ja uurime juurutusvõimalusi, et jagada oma vestlusassistenti teistega. + +### Kohaliku testimise töövoog -Loo oma kaust *project* järgmise sisuga: +Järgi neid samme, et testida oma täielikku rakendust: + +```mermaid +graph TD + A[Alusta backend serverit] --> B[Konfigureeri keskkonnamuutujad] + B --> C[Testeeri API lõpp-punkte] + C --> D[Ava frontend brauseris] + D --> E[Testeeri vestlusfunktsionaalsust] + E --> F[Tõrgi vead] +``` +**Samm-sammuline testimisprotsess:** + +1. **Alusta oma backend serverit**: + ```bash + cd backend + source venv/bin/activate # või venv\Scripts\activate Windowsis + python api.py + ``` + +2. **Kontrolli, kas API töötab**: + - Ava `http://localhost:5000` oma brauseris + - Sa peaksid nägema tervitussõnumit oma FastAPI serverilt + +3. **Ava oma frontend**: + - Liigu oma frontend kataloogi + - Ava `index.html` veebilehitsejas + - Võid kasutada ka VS Code Live Server laiendust parema arenduskogemuse jaoks + +4. **Testi vestlusfunktsionaalsust**: + - Sisesta sõnum sisendvälja + - Klõpsa "Saada" või vajuta Enterit + - Kontrolli, kas AI vastab korrektselt + - Vaata brauseri konsoolist, kas JavaScripti vigu ei ilmu + +### Levinumate probleemide lahendamine + +| Probleem | Sümptomid | Lahendus | +|---------|----------|----------| +| **CORS viga** | Frontend ei jõua backendini | Veendu, et FastAPI CORSMiddleware on korrektselt seadistatud | +| **API võtme tõrge** | 401 Unauthorized vastused | Kontrolli oma `GITHUB_TOKEN` keskkonnamuutujat | +| **Ühenduse keeldumine** | Võrguvead frontendis | Kontrolli backend URL-i ja veendu, et Flask server töötab | +| **AI vastust ei tule** | Tühjad või veateated vastustes | Kontrolli backend logisid API limiidi või autentimise vigade pärast | + +**Tavalised silumisjärjekorrad:** +- **Kontrolli** brauseri arendajate tööriistade konsooli JavaScripti vigade varal +- **Vaata üle** Network vahekaart, et näha edukalt tehtud API päringuid ja vastuseid +- **Loe läbi** backend terminali väljund Python vigade või API tõrgete osas +- **Veendu**, et keskkonnamuutujad on korrektselt laetud ja ligipääsetavad + +## 📈 Sinu AI rakenduse arendamise meistriklassi ajatelg + +```mermaid +timeline + title Täielik teekond AI rakenduse arendamisel + + section AI alused + Generatiivse AI mõistmine + : Mõista mustrituvastuse kontseptsioone + : Valda AI parameetrite juhtimist + : Õpi promptide inseneritehnikaid + + GitHub mudelite integreerimine + : Liigu AI teenuste platvormidel + : Käsitle turvalist autentimist + : Optimeeri mudeli parameetreid + + section Tagapool arendamine + Python API arhitektuur + : Ehita FastAPI rakendusi + : Rakenda asünkroonseid operatsioone + : Loo turvalised lõpp-punktid + + AI teenuste integreerimine + : Ühenda väliste AI API-dega + : Käsitle päringu limiite + : Rakenda veapiiranguid + + section Esipaneeli meistriteos + Moodsa JavaScripti mustrid + : Valda ES6 klassi arhitektuuri + : Rakenda async/await voo + : Ehita reageerivad kasutajaliidesed + + Reaalaegne kasutajakogemus + : Loo dünaamilised jutuliidese + : Käsitle laadimise olekuid + : Optimeeri kasutajate interaktsioone + + section Tootmisvalmidus + Turvalisus ja jõudlus + : Rakenda turvalist tokeni haldust + : Tõkesta XSS haavatavused + : Optimeeri API jõudlust + + Professionaalne juurutamine + : Ehita skaleeritavad arhitektuurid + : Loo hooldatav kood + : Dokumenteeri arendusprotsessid +``` +**🎓 Lõpetamise verstapost:** Oled edukalt loonud täieliku AI juhitava rakenduse, kasutades samu tehnoloogiaid ja arhitektuurilisi mustreid, mis toetavad kaasaegseid AI assistente. Need oskused ühendavad traditsioonilist veebiarendust ja tipptasemel AI integratsiooni. + +**🔄 Järgmise taseme võimekused**: +- Valmis uurima täiustatud AI raamistikke (LangChain, LangGraph) +- Valmis ehitama multimodaalseid AI rakendusi (tekst, pildid, hääl) +- Varustatud vektordatabaaside ja otsingusüsteemide rakendamiseks +- Aluse panemine masinõppe ja AI mudelite täpsemaks häälestamiseks + +## GitHub Copiloti agendi väljakutse 🚀 + +Kasuta Agendi režiimi, et täita järgmine väljakutse: + +**Kirjeldus:** Täienda vestlusassistenti, lisades vestluste ajaloo ja sõnumite püsivuse. See väljakutse aitab sul mõista, kuidas hallata olekut vestlusappides ja rakendada andmete salvestamist parema kasutajakogemuse jaoks. + +**Käsklus:** Muuda vestlusrakendust, et see sisaldaks vestluse ajalugu, mis säilib sessioonide vahel. Lisa funktsionaalsus, mis salvestab vestlused kohalikku salvestusse, kuvab vestluse ajaloo lehekülje laadimisel ja lisab "Kustuta ajalugu" nupu. Rakenda ka tippimisindikaatorid ja sõnumite aja märgendid, et muuta vestlus kogemus realistlikumaks. + +Lisateavet agentrežiimi kohta leiad siit: [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). + +## Kodutöö: loo oma isiklik AI assistent + +Nüüd loome oma AI assistendi rakenduse. Selle asemel, et lihtsalt tutoriali koodi korrata, on see võimalus rakendada kontseptsioone, luues midagi, mis peegeldab sinu huvisid ja kasutusjuhtumeid. + +### Projekti nõuded + +Korraldame su projekti puhtaks ja organiseerituks struktuuriks: ```text -project/ - frontend/ - index.html - app.js - styles.css - backend/ - ... +my-ai-assistant/ +├── backend/ +│ ├── api.py # Your FastAPI server +│ ├── llm.py # AI integration functions +│ ├── .env # Your secrets (keep this safe!) +│ └── requirements.txt # Python dependencies +├── frontend/ +│ ├── index.html # Your chat interface +│ ├── app.js # The JavaScript magic +│ └── styles.css # Make it look amazing +└── README.md # Tell the world about your creation ``` -Kopeeri sisu sellest, mis ülaltoodud juhistes on, kuid kohanda seda vastavalt oma soovile. +### Põhitegevused + +**Backendi arendus:** +- **Võta** meie FastAPI kood ja tee sellest oma oma +- **Loo** unikaalne AI isiksus – võib-olla abivalmis kokanduse assistent, loominguline kirjutamispartner või õppimiskaaslane? +- **Lisa** tugev vigade käsitlemine, et rakendus ei jookseks kokku probleemide korral +- **Kirjuta** selge dokumentatsioon neile, kes tahavad mõista, kuidas su API töötab + +**Frontendi arendus:** +- **Ehita** vestlusliides, mis tundub intuitiivne ja sõbralik +- **Kirjuta** puhas, kaasaegne JavaScript, millega võid teistele arendajatele silma paista +- **Disaini** kohandatud stiilid, mis väljendavad su AI isiksust – lõbus ja värvikas? Puhtalt minimalistlik? Täiesti sinu enda valida! +- **Veendu**, et töötab hästi nii telefonides kui arvutites + +**Personalisatsiooni nõuded:** +- **Vali** unikaalne nimi ja isiksus oma AI assistendile – võib midagi, mis peegeldab sinu huvisid või probleeme, mida soovid lahendada +- **Kohanda** visuaalset disaini, et see sobiks su assistendi vibe’iga +- **Kirjuta** kaasahaarav tervitussõnum, mis paneb inimesed vestlust alustama +- **Testi** assistenti erinevate küsimustega, et näha, kuidas ta vastab + +### Täiustamise ideed (valikuline) + +Tahad oma projekti järgmisele tasemele viia? Siin on mõned lõbusad ideed uurimiseks: + +| Funktsioon | Kirjeldus | Osad mida treenid | +|---------|-------------|------------------------| +| **Sõnumi ajalugu** | Mäleta vestlusi ka pärast lehe värskendust | localStorage kasutamine, JSON käitlemine | +| **Tippimisindikaatorid** | Näita "AI kirjutab..." ooteajal | CSS animatsioonid, asünkroonne programmeerimine | +| **Sõnumite ajamärgid** | Näita, millal sõnumid saadeti | Kuupäeva / aja vorming, UX disain | +| **Vestluse eksport** | Luba kasutajal vestlust alla laadida | Faili käsitlemine, andmete eksport | +| **Teema vahetamine** | Hele/tume režiimi vahetus | CSS-i muutujad, kasutaja eelistused | +| **Hääle sisestus** | Lisa kõne-tekstiks funktsionaalsus | Veebiarenduse API-d, ligipääsetavus | + +### Testimine ja dokumentatsioon + +**Kvaliteedi tagamine:** +- **Testi** rakendust erinevate sisendite ja äärealadega +- **Kontrolli**, et reageeriv disain töötab erinevate ekraanisuurustega +- **Vaata üle** ligipääsetavus, kasutades klaviatuurinavigatsiooni ja ekraanilugejaid +- **Valideeri** HTML ja CSS vastavus standarditele + +**Dokumentatsiooni nõuded:** +- **Kirjuta** README.md, mis selgitab projekti ja kuidas seda käivitada +- **Lisa** ekraanipilte oma vestlusliidesest töös +- **Dokumenteeri** kõik unikaalsed funktsioonid või kohandused, mida lisasid +- **Anna** selged seadistamisjuhised teistele arendajatele + +### Esitamise juhised + +**Projekti esitused:** +1. Täielik projekti kaust kõigi lähtekoodidega +2. README.md koos projekti kirjelduse ja seadistamisjuhistega +3. Ekraanipildid, kus sinu vestlusassistent töötab +4. Lühike refleksioon õpitust ja kokkupuutunud väljakutsetest + +**Hindamiskriteeriumid:** +- **Funktsionaalsus:** Kas vestlusassistent töötab ootuspäraselt? +- **Koodi kvaliteet:** Kas kood on hästi organiseeritud, kommenteeritud ja hooldatav? +- **Disain:** Kas liides on visuaalselt meeldiv ja kasutajasõbralik? +- **Loomingulisus:** Kui unikaalne ja personaalne on sinu rakendus? +- **Dokumentatsioon:** Kas seadistamisjuhised on selged ja täielikud? + +> 💡 **Edu näpunäide:** Alusta esmalt põhinõuetega, seejärel lisa täiustusi, kui kõik töötab. Keskendu esmalt sujuvale põhifunktsionaalsusele enne edasijõudnute funktsioonide lisamist. ## Lahendus [Lahendus](./solution/README.md) -## Boonus +## Boonusväljakutsed -Proovi muuta AI assistendi isikupära. +Valmis võtma oma AI assistendi järgmisele tasemele? Proovi neid täiustatud väljakutseid, mis süvendavad sinu arusaamist AI integratsioonist ja veebiarendusest. -### Pythoniga +### Isiksuse kohandamine -Kui kutsud `call_llm` funktsiooni failis *api.py*, saad muuta teist argumenti vastavalt oma soovile, näiteks: +Tõeline võlu tuleb siis, kui annad oma AI assistendile ainulaadse isiksuse. Katseta erinevate süsteemipromptidega, et luua spetsialiseeritud assistendid: +**Professionaalse assistendi näide:** ```python -call_llm(message, "You are Captain Picard") +call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.") ``` -### Esikülg +**Loomingulise kirjutamise abilise näide:** +```python +call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.") +``` + +**Tehnilise mentorina näide:** +```python +call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.") +``` + +### Frontendi täiustused + +Muuda oma vestlusliidest nende visuaalsete ja funktsionaalsete täiustustega: + +**Täpsemad CSS omadused:** +- **Rakenda** sujuvaid sõnumite animatsioone ja üleminekuid +- **Lisa** kohandatud vestluspallide disain koos CSS kujundite ja gradientidega +- **Loo** tippimisindikaatori animatsioon, kui AI "mõtleb" +- **Disaini** emotikonide reaktsioonid või sõnumite hindamissüsteem + +**JavaScripti täiustused:** +- **Lisa** klaviatuuri otseteed (Ctrl+Enter saatmiseks, Escape tühjendamiseks) +- **Rakenda** sõnumite otsingu ja filtreerimise funktsionaalsus +- **Loo** vestluse eksportimise funktsioon (alla laadimine tekstina või JSON-ina) +- **Lisa** automaatne salvestus localStorage-sse, et vältida sõnumite kadumist + +### Täiustatud AI integratsioon + +**Mitmed AI isiksused:** +- **Loo** rippmenüü, et vahetada erinevate AI isikute vahel +- **Salvesta** kasutaja eelistatud isiksus localStorage-sse +- **Rakenda** kontekstivahetus, mis hoiab vestluse voolu + + +**Nutika vastuse funktsioonid:** +- **Lisa** vestluse kontekstitaju (AI mäletab varasemaid sõnumeid) +- **Rakenda** nutikaid soovitusi vestlusteema põhjal +- **Loo** kiirvastuse nuppe sagedastele küsimustele + +> 🎯 **Õpieesmärk**: Need boonusetapid aitavad sul mõista edasijõudnud veebiarenduse mustreid ja tehisintellekti integreerimise tehnikaid, mida kasutatakse tootmiskeskkonna rakendustes. + +## Kokkuvõte ja järgmised sammud + +Palju õnne! Sa oled edukalt loonud nullist täieliku AI-põhise juturoboti assistendi. See projekt on pakkunud sulle praktilist kogemust kaasaegsete veebiarenduse tehnoloogiate ja tehisintellekti integreerimise alal – oskused, mis on tänapäeva tehnoloogilises maastikus järjest väärtuslikumad. + +### Mida oled saavutanud + +Selle õppetunni jooksul oled valdanud mitmeid olulisi tehnoloogiaid ja kontseptsioone: + +**Tagapõhja arendus:** +- **Integreerisid** GitHub Models API AI-funktsioonide jaoks +- **Loomesid** RESTful API Flaskiga koos korraliku vigade käitlemisega +- **Rakendasid** turvalise autentimise keskkonnamuutujate abil +- **Seadistasid** CORS-i frontend'i ja backend'i vahelisteks päritolupiiranguteks + +**Ees-otsa arendus:** +- **Loodud** reageeriv jutuliides semantilise HTML-iga +- **Rakendasid** kaasaegset JavaScripti async/await ja klassipõhise arhitektuuriga +- **Disainisid** kaasahaarava kasutajaliidese CSS Gridi, Flexboxi ja animatsioonidega +- **Lisasid** juurdepääsetavuse parameetreid ja reageeriva disaini põhimõtteid -Muuda ka CSS-i ja teksti vastavalt oma soovile, tehes muudatusi *index.html*-is ja *styles.css*-is. +**Täisstack integratsioon:** +- **Ühendasid** frontend'i ja backend'i HTTP API kõnede kaudu +- **Käsitlesid** reaalajas kasutajategevust ja asünkroonset andmevoogu +- **Rakendasid** vigade käitlemist ja kasutajate tagasisidet kogu rakenduses +- **Testisid** kogu rakenduse töövoogu kasutaja sisendist AI vastuseni -## Kokkuvõte +### Peamised õpitulemused -Suurepärane, oled õppinud nullist, kuidas luua isiklikku assistenti, kasutades AI-d. Kasutasime selleks GitHubi mudeleid, tagapõhja Pythonis ja esikülge HTML-is, CSS-is ja JavaScriptis. +```mermaid +mindmap + root((AI Chat App Osksused)) + API Integratsioon + Autentimine + Vigade Käsitlemine + Asünkroonne Programmeerimine + Veebiarendus + HTML5 Semantika + Moodne CSS + ES6+ JavaScript + Kasutajakogemus + Reageeriv Disain + Juurdepääsetavus + Reaalajas Interaktsioon + AI Mõistmine + Käsuinseneriteadus + Mudeli Parameetrid + Vestluse Voog +``` +See projekt tutvustas sulle AI-põhiste rakenduste loomise aluseid, mis kujutavad endast veebiarenduse tulevikku. Sa mõistad nüüd, kuidas integreerida tehisintellekti võimalusi traditsioonilistesse veebirakendustesse, luues kaasahaaravaid kasutajakogemusi, mis tunduvad nutikad ja reageerivad. -## Seadistamine Codespaces'iga +### Professionaalsed rakendused -- Navigeeri: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Loo mallist (veendu, et oled GitHubi sisse logitud) paremas ülanurgas: +Sinu selle õppetunni jooksul omandatud oskused on otseselt rakendatavad kaasaegsetes tarkvaraarenduse karjäärides: - ![Loo mallist](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.et.png) +- **Täisstack veebiarendus** kasutades kaasaegseid raamistikke ja API-sid +- **AI integreerimine** veebirakendustes ja mobiilirakendustes +- **API disain ja arendus** mikroteenuste arhitektuuridele +- **Kasutajaliideste arendus** keskendudes juurdepääsetavusele ja reageerivale disainile +- **DevOps praktikad** sh keskkonna seadistamine ja juurutamine -- Kui oled oma repos, loo Codespace: +### Jätka oma AI arendus­teekonda - ![Loo Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.et.png) +**Järgmised õppesammud:** +- **Uuri edasi** edasijõudnud AI mudeleid ja API-sid (GPT-4, Claude, Gemini) +- **Õpi** päringute insenerlust paremate AI vastuste loomiseks +- **Tudengu** vestluste disaini ja juturoboti kasutajakogemuse põhimõtteid +- **Uuri** AI ohutust, eetikat ja vastutustundliku tehisintellekti arenduspraktikaid +- **Loo** keerukamaid rakendusi, mis kasutavad vestluste mälu ja kontekstitajust - See peaks käivitama keskkonna, millega saad nüüd töötada. +**Edasijõudnud projektide ideed:** +- Mitme kasutajaga jututubade loomine AI modereerimisega +- AI-põhised klienditeeninduse juturobotid +- Haridusassistendid, kes pakuvad personaliseeritud õppimist +- Loomingulised kirjutamispartnerid erinevate AI isiksustega +- Tehnilise dokumentatsiooni assistendid arendajatele + +## Alustamine GitHub Codespacesiga + +Tahad proovida seda projekti pilvearenduskeskkonnas? GitHub Codespaces pakub täielikku arendussetti brauseris, mis sobib ideaalselt AI rakendustega katsetamiseks ilma lokaalse seadistuse vajaduseta. + +### Oma arenduskeskkonna seadistamine + +**1. samm: Loo mallist** +- **Mine** aadressile [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) +- **Vajuta** paremas ülanurgas nuppu "Use this template" (vesi, et oled GitHubi sisse logitud) + +![Loo mallist liides, kus roheline "Use this template" nupp on nähtav](../../../translated_images/template.67ad477109d29a2b.et.png) + +**2. samm: Käivita Codespaces** +- **Ava** äsja loodud repositoorium +- **Vajuta** rohelist "Code" nuppu ja vali "Codespaces" +- **Vali** "Create codespace on main", et alustada oma arenduskeskkonda + +![Codespace loomise liides valikutega pilvearenduse keskkonna käivitamiseks](../../../translated_images/codespace.bcecbdf5d2747d3d.et.png) + +**3. samm: Keskkonna seadistamine** +Kui su Codespace käivitub, on sulle kättesaadav: +- **Eelinstallitud** Python, Node.js ja kõik vajalikud arendustööriistad +- **VS Code liides** koos veebiarenduse laiendustega +- **Terminali ligipääs** nii backend'i kui frontend'i serverite käivitamiseks +- **Pordisihendus** oma rakenduste testimiseks + +**Mida Codespaces pakub:** +- **Eemaldab** lokaalse keskkonna seadistamise ja konfiguratsiooni probleemid +- **Tagab** järjepideva arenduskeskkonna eri seadmetel +- **Sisaldab** eelkonfigureeritud tööriistu ja laiendusi veebiarenduseks +- **Pakku** sujuvat integratsiooni GitHubiga versioonikontrolli ja koostöö jaoks + +> 🚀 **Pro nipp**: Codespaces sobib suurepäraselt AI rakenduste õppimiseks ja prototüüpimiseks, kuna see haldab automaatselt kogu keeruka keskkonnaseadistuse, võimaldades sul keskenduda ehitamisele ja õppimisele, mitte seadistuse probleemide lahendamisele. --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame täpsust tagada, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse või valesti tõlgendamise eest, mis võib tekkida selle tõlketeenuse kasutamisest. + \ No newline at end of file diff --git a/translations/et/9-chat-project/solution/backend/python/README.md b/translations/et/9-chat-project/solution/backend/python/README.md index 7796783a..1529864c 100644 --- a/translations/et/9-chat-project/solution/backend/python/README.md +++ b/translations/et/9-chat-project/solution/backend/python/README.md @@ -1,8 +1,8 @@ +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, tuleb arvestada, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks lugeda ametlikuks allikaks. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate mõistmatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/README.md b/translations/et/README.md index 224465cb..dfa8a965 100644 --- a/translations/et/README.md +++ b/translations/et/README.md @@ -1,236 +1,265 @@ -[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +# Veebiarendus algajatele – õppekava -[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +Õppige veebi arendamise põhialuseid meie Microsoft Cloud Advocatesi 12-nädalase põhjaliku kursuse kaudu. Iga 24 õppetundi süveneb JavaScripti, CSS-i ja HTML-i käeliste projektide kaudu nagu terrariumid, brauserilaiendused ja kosmosemängud. Osalege viktoriinides, aruteludes ja praktilistes ülesannetes. Täiustage oma oskusi ja optimeerige teadmiste omandamist meie tõhusa projektipõhise õpetamismeetodiga. Alustage oma kodeerimise teekonda juba täna! -[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott) +Liituge Azure AI Foundry Discordi kogukonnaga -# Veebiarendus algajatele - õppekava +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Õpi veebiarenduse põhitõdesid Microsoft Cloud Advocates'i 12-nädalase põhjaliku kursuse abil. Iga 24 õppetundi keskendub JavaScriptile, CSS-ile ja HTML-ile praktiliste projektide kaudu, nagu terraariumid, brauserilaiendused ja kosmosemängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Arenda oma oskusi ja optimeeri teadmiste omandamist meie tõhusa projektipõhise metoodikaga. Alusta oma kodeerimise teekonda juba täna! +Järgige neid samme, et hakata neid ressursse kasutama: +1. **Looge repositsiooni koopia (fork)**: Klõpsake [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Kloonige repositsioon**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Liituge Azure AI Foundry Discordiga ja kohtuge ekspertide ning teiste arendajatega**](https://discord.com/invite/ByRwuEEgH4) -Liitu Azure AI Foundry Discordi kogukonnaga +### 🌐 Mitmekeelne tugi -[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4) +#### Toetatud GitHub Actioni kaudu (automatiseeritud ja alati ajakohane) -Järgi neid samme, et alustada nende ressursside kasutamist: -1. **Forki repositoorium**: Klõpsa [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klooni repositoorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Liitu Azure AI Foundry Discordiga ja kohtume ekspertide ning teiste arendajatega**](https://discord.com/invite/ByRwuEEgH4) + +[araabia](../ar/README.md) | [bengali](../bn/README.md) | [bulgaaria](../bg/README.md) | [birma keel (Myanmar)](../my/README.md) | [hiina (lihtsustatud)](../zh/README.md) | [hiina (traditsiooniline, Hongkong)](../hk/README.md) | [hiina (traditsiooniline, Macau)](../mo/README.md) | [hiina (traditsiooniline, Taiwani)](../tw/README.md) | [horvaadi](../hr/README.md) | [tšehhi](../cs/README.md) | [taani](../da/README.md) | [hollandi](../nl/README.md) | [eesti](./README.md) | [soome](../fi/README.md) | [prantsuse](../fr/README.md) | [saksa](../de/README.md) | [kreeka](../el/README.md) | [heebrea](../he/README.md) | [hindi](../hi/README.md) | [ungari](../hu/README.md) | [indoneesia](../id/README.md) | [itaalia](../it/README.md) | [jaapani](../ja/README.md) | [kannada](../kn/README.md) | [korea](../ko/README.md) | [leedu](../lt/README.md) | [malai keel](../ms/README.md) | [malajalami](../ml/README.md) | [marathi](../mr/README.md) | [nepali](../ne/README.md) | [nigeeria pidgin](../pcm/README.md) | [norra](../no/README.md) | [pärsia (Farsi)](../fa/README.md) | [poola](../pl/README.md) | [portugali (Brasiilia)](../br/README.md) | [portugali (Portugal)](../pt/README.md) | [pandžabi (Gurmukhi)](../pa/README.md) | [rumeenia](../ro/README.md) | [vene](../ru/README.md) | [serbia (kirillitsa)](../sr/README.md) | [skaapaki](../sk/README.md) | [sloveeni](../sl/README.md) | [hispaania](../es/README.md) | [svahili](../sw/README.md) | [rootsi](../sv/README.md) | [tagalogi (filipino)](../tl/README.md) | [tamiili](../ta/README.md) | [telugu](../te/README.md) | [tai](../th/README.md) | [türgi](../tr/README.md) | [ukraina](../uk/README.md) | [urdu](../ur/README.md) | [vietnami](../vi/README.md) -### 🌐 Mitmekeelne tugi +> **Eelistate kloonida lokaalselt?** -#### Toetatud GitHub Actioni kaudu (automaatne ja alati ajakohane) +> See repositsioon sisaldab enam kui 50 keele tõlget, mis suurendab oluliselt allalaadimise mahtu. Tõlgeteta kloonimiseks kasutage spetsiifilist kontrolli (sparse checkout): +> ```bash +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' +> ``` +> See annab teile kõik vajaliku kursuse läbimiseks märksa kiiremalt. + - -[Araabia](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaaria](../bg/README.md) | [Birma (Myanmar)](../my/README.md) | [Hiina (lihtsustatud)](../zh/README.md) | [Hiina (traditsiooniline, Hongkong)](../hk/README.md) | [Hiina (traditsiooniline, Macau)](../mo/README.md) | [Hiina (traditsiooniline, Taiwan)](../tw/README.md) | [Horvaatia](../hr/README.md) | [Tšehhi](../cs/README.md) | [Taani](../da/README.md) | [Hollandi](../nl/README.md) | [Eesti](./README.md) | [Soome](../fi/README.md) | [Prantsuse](../fr/README.md) | [Saksa](../de/README.md) | [Kreeka](../el/README.md) | [Heebrea](../he/README.md) | [Hindi](../hi/README.md) | [Ungari](../hu/README.md) | [Indoneesia](../id/README.md) | [Itaalia](../it/README.md) | [Jaapani](../ja/README.md) | [Korea](../ko/README.md) | [Leedu](../lt/README.md) | [Malai](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norra](../no/README.md) | [Pärsia (Farsi)](../fa/README.md) | [Poola](../pl/README.md) | [Portugali (Brasiilia)](../br/README.md) | [Portugali (Portugal)](../pt/README.md) | [Pandžabi (Gurmukhi)](../pa/README.md) | [Rumeenia](../ro/README.md) | [Vene](../ru/README.md) | [Serbia (kirillitsa)](../sr/README.md) | [Slovaki](../sk/README.md) | [Sloveeni](../sl/README.md) | [Hispaania](../es/README.md) | [Suahiili](../sw/README.md) | [Rootsi](../sv/README.md) | [Tagalogi (Filipino)](../tl/README.md) | [Tamili](../ta/README.md) | [Tai](../th/README.md) | [Türgi](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnami](../vi/README.md) - +**Kui soovite lisada toetust täiendavatele tõlkekeeltele, on need loetletud [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -**Kui soovid lisada täiendavaid tõlkeid, on toetatud keeled loetletud [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +[![Ava Visual Studio Code'is](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -[![Ava Visual Studio Code'is](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Ava%20Visual%20Studio%20Code'is&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +#### 🧑‍🎓 _Oled õpilane?_ -#### 🧑‍🎓 _Kas oled tudeng?_ +Külasta [**Õpilase tugikeskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajatest ressurssid, õpilase pakke ja isegi võimalusi saada tasuta sertifikaadikupong. See on leht, mida tasub järjehoidjates hoida ja aeg-ajalt kontrollida, sest sisu uuendatakse iga kuu. -Külasta [**Student Hub lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajatele mõeldud ressursse, tudengipakette ja isegi võimalusi tasuta sertifikaadi saamiseks. See on leht, mida tasub järjehoidjatesse lisada ja aeg-ajalt külastada, kuna sisu vahetub igakuiselt. +### 📣 Teade – uued GitHub Copilot Agendi režiimi väljakutsed täitmiseks! -### 📣 Teade - _Uus projekt generatiivse tehisintellekti kasutamiseks_ +Uus väljakutse lisatud, otsi "GitHub Copilot Agent Challenge 🚀" enamikust peatükkidest. See on uus väljakutse, mille saad täita GitHub Copiloti ja Agendi režiimi abil. Kui sa pole varem Agendi režiimi kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka faile luua ja muuta, käsklusi käivitada ja palju muud. -Just lisatud uus AI assistendi projekt, vaata [projekti](./09-chat-project/README.md) +### 📣 Teade – _uus projekt loomaks Generatiivse tehisintellekti abil_ -### 📣 Teade - _Uus õppekava_ generatiivse tehisintellekti kohta JavaScriptis on just avaldatud +Uus AI assistendi projekt just lisatud, vaata [projekti](./9-chat-project/README.md) -Ära jäta vahele meie uut generatiivse tehisintellekti õppekava! +### 📣 Teade – _uus õppekava_ Generatiivse tehisintellekti jaoks JavaScriptis on just avaldatud -Külasta [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), et alustada! +Ära maga maha meie uut Generatiivse AI õppekava! -![Taust](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.et.png) +Alusta siit: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) -- Õppetunnid, mis hõlmavad kõike alates põhitõdedest kuni RAG-ni. -- Suhtle ajalooliste tegelastega GenAI ja meie kaaslase rakenduse abil. -- Lõbus ja kaasahaarav narratiiv, mis viib sind ajarännakule! +![Taust](../../translated_images/background.148a8d43afde5730.et.png) -![Tegelane](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.et.png) +- Tunnid katavad kõike alates põhialustest kuni RAGini. +- Suhtle ajalooliste tegelastega kasutades GenAI-d ja meie kaasrakendust. +- Lõbus ja kaasahaarav jutustus, rändad ajas! -Iga õppetund sisaldab ülesannet, mida täita, teadmiste kontrolli ja väljakutset, mis juhendab sind õppima järgmisi teemasid: -- Küsitluste loomine ja nende optimeerimine -- Teksti- ja pildirakenduste loomine -- Otsingurakendused +![tegelane](../../translated_images/character.5c0dd8e067ffd693.et.png) -Külasta [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), et alustada! +Iga tund sisaldab ülesannet, teadmiste kontrolli ja väljakutset, mis juhatavad teid järgmiste teemade õppimisel: +- Promptide ja prompt-engineeringi kasutamine +- Teksti- ja pildirakenduste genereerimine +- Otsingurakendused -## 🌱 Alustamine +Alusta siit: [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) -> **Õpetajad**, oleme [lisanud mõned soovitused](for-teachers.md), kuidas seda õppekava kasutada. Ootame teie tagasisidet [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +## 🌱 Alustamine -**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, iga õppetunni puhul alustage eelloengu viktoriiniga, lugege loengumaterjali, täitke erinevaid tegevusi ja kontrollige oma arusaamist järelloengu viktoriiniga. +> **Õpetajad**, oleme lisanud [mõned soovitused](for-teachers.md), kuidas seda õppekava kasutada. Meil oleks hea meel teie tagasiside üle [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -Et oma õpikogemust täiustada, tehke koostööd kaasõppijatega projektide kallal! Arutelud on teretulnud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorite meeskond on valmis vastama teie küsimustele. +**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, iga õppetunni algul tehke sissejuhatav viktoriin ja seejärel jätkake loengumaterjali lugemisega, täitke erinevad tegevused ning kontrollige oma arusaamist lõpus tehtava viktoriiniga. -Hariduse edendamiseks soovitame tungivalt uurida [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) täiendavate õppematerjalide jaoks. +Õppimise paremaks toetamiseks võtke ühendust kaasõppijatega, et projekte koos teha! Arutelud on soovitatavad meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorite meeskond on valmis vastama teie küsimustele. -### 📋 Keskkonna seadistamine +Tulge haridust veelgi täiustama, soovitame soojalt uurida [Microsoft Learni](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) täiendavate õppevahendite jaoks. -Sellel õppekaval on valmis arenduskeskkond! Alustades saate valida, kas käivitada õppekava [Codespace'is](https://github.com/features/codespaces/) (_brauseripõhine keskkond, kus pole vaja midagi installida_) või kohapeal oma arvutis, kasutades tekstiredaktorit, näiteks [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +### 📋 Keskkonna seadistamine -#### Loo oma repositoorium -Et saaksid oma tööd hõlpsasti salvestada, soovitame luua selle repositooriumi koopia. Seda saab teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob sinu GitHubi kontole uue repositooriumi koos õppekava koopiaga. +Sellel õppekaval on valmis arenduskeskkond! Kursuse alustamisel võite valida selle kasutamise [Codespace'is](https://github.com/features/codespaces/) (_brauseripõhine keskkond, mis ei vaja installimist_) või kohapeal oma arvutis tekstitöötlusprogrammiga nagu [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -Järgi neid samme: -1. **Forki repositoorium**: Klõpsa lehe paremas ülanurgas nuppu "Fork". -2. **Klooni repositoorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +#### Looge oma repositsioon -#### Õppekava käivitamine Codespace'is +Et oma tööd mugavalt salvestada, soovitatakse teil luua oma koopia sellest repositsioonist. Seda saate teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob teie GitHubi kontole uue repositsiooni koopia. -Selles repositooriumis, mille sa lõid, klõpsa nuppu **Code** ja vali **Open with Codespaces**. See loob sulle uue Codespace'i, kus saad töötada. +Järgige neid samme: +1. **Forkige repositsioon**: Klõpsake selle lehe paremas ülaosas nuppu "Fork". +2. **Kloonige repositsioon**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.et.png) +#### Õppekava käivitamine Codespace'is -#### Õppekava käivitamine kohapeal oma arvutis +Teie loodud koopia repositsioonist klõpsake nuppu **Code** ja valige **Open with Codespaces**. See loob teile uue Codespace'i, kus töötada. -Et käivitada õppekava kohapeal oma arvutis, vajad tekstiredaktorit, brauserit ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhendab sind erinevate tööriistade valimisel, et leida endale sobivaim. +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.et.png) -Meie soovitus on kasutada [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorina, millel on ka sisseehitatud [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Saad Visual Studio Code'i alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +#### Õppekava kohapealne käivitamine oma arvutis -1. Klooni oma repositoorium arvutisse. Seda saab teha, klõpsates nuppu **Code** ja kopeerides URL-i: +Selle õppekava kohapealseks jooksutamiseks oma arvutis vajate tekstiredaktorit, brauserit ja käsureatööriista. Esimene tunnistus, [Tutvustus programmeerimiskeeltele ja tööriistadele](../../1-getting-started-lessons/1-intro-to-programming-languages), tutvustab erinevaid valikuid iga nende tööriista puhul, et saaksite valida endale sobivaima. - [CodeSpace](./images/createcodespace.png) +Soovitame kasutada [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorit, millel on ka sisseehitatud [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code'i saate alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). - Seejärel ava [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code'is](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja käivita järgmine käsk, asendades `` just kopeeritud URL-iga: +1. Kloonige oma repositsioon arvutisse. Seda saate teha, klõpsates nupul **Code** ja kopeerides URL-i: + + [Codespace](./images/createcodespace.png) +Seejärel ava [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sees ja käivita järgmine käsk, asendades `` just äsja kopeeritud URL-iga: ```bash git clone ``` - -2. Ava kaust Visual Studio Code'is. Seda saab teha, klõpsates **File** > **Open Folder** ja valides just kloonitud kausta. - -> Soovitatavad Visual Studio Code'i laiendused: -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-lehtede eelvaateks Visual Studio Code'is -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aitab kiiremini koodi kirjutada - -## 📂 Iga õppetund sisaldab: - -- valikulist visuaalset märkmete komplekti -- valikulist täiendavat videot -- eelloengu soojendusviktoriini -- kirjalik õppetund -- projektipõhiste õppetundide jaoks samm-sammult juhendid projekti loomiseks -- teadmiste kontrollid -- väljakutse -- täiendav lugemine -- ülesanne -- [järgnev viktoriin](https://ff-quizzes.netlify.app/web/) -> **Märkus viktoriinide kohta**: Kõik viktoriinid asuvad Quiz-app kaustas, kokku 48 viktoriini, igaühes kolm küsimust. Need on saadaval [siin](https://ff-quizzes.netlify.app/web/). Viktoriinirakendust saab käivitada lokaalselt või Azure'is; järgige juhiseid `quiz-app` kaustas. +2. Ava kaust Visual Studio Codes. Seda saab teha, klõpsates **File** > **Open Folder** ja valides kausta, mille just kloonisid. + + +> Soovitatud Visual Studio Code laiendused: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - et eelvaadata HTML-lehti Visual Studio Codes +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - et aidata sul koodi kiiremini kirjutada + +## 📂 Igas õppetükis sisaldub: + +- valikuline visandmärkmed +- valikuline lisavideo +- enne tundi soojendusülesanne +- kirjalik õppetükk +- projektipõhiste õppetükkide puhul samm-sammult juhendid projekti ülesehitamiseks +- teadmiste kontroll +- väljakutse +- lisalugemine +- ülesanne +- [pärastundi viktoriin](https://ff-quizzes.netlify.app/web/) -## 🗃️ Õppetunnid +> **Märkused viktoriinide kohta**: Kõik viktoriinid on koondatud Quiz-app kausta, kokku 48 viktoriini, igas kolm küsimust. Neid on saadaval [siin](https://ff-quizzes.netlify.app/web/). Viktoriini rakendust saab käivitada lokaalselt või juurutada Azure'i; järgi juhiseid `quiz-app` kaustas. -| | Projekti nimi | Õpetatavad kontseptsioonid | Õpieesmärgid | Lingitud õppetund | Autor | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Alustamine | Programmeerimise sissejuhatus ja tööriistad | Õpi programmeerimiskeelte põhialuseid ja tarkvara, mis aitab professionaalsetel arendajatel oma tööd teha | [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Alustamine | GitHubi põhialused, sealhulgas meeskonnatöö | Kuidas kasutada GitHubi oma projektis ja teha koostööd teistega koodibaasis | [Sissejuhatus GitHubi](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Alustamine | Juurdepääsetavus | Õpi veebijuurdepääsetavuse põhialuseid | [Juurdepääsetavuse alused](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS põhialused | JavaScripti andmetüübid | JavaScripti andmetüüpide põhialused | [Andmetüübid](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS põhialused | Funktsioonid ja meetodid | Õpi funktsioonide ja meetodite kohta, et hallata rakenduse loogikavoogu | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher | -| 06 | JS põhialused | Otsuste tegemine JavaScriptiga | Õpi looma tingimusi oma koodis, kasutades otsuste tegemise meetodeid | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS põhialused | Massiivid ja tsüklid | Töötamine andmetega, kasutades JavaScripti massiive ja tsükleid | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Loo HTML, et luua veebipõhine terrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikas | Loo CSS, et kujundada veebipõhine terrarium, keskendudes CSS-i põhialustele, sealhulgas lehe reageerimisvõimekusele | [Sissejuhatus CSS-i](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM-i manipuleerimine | Loo JavaScript, et muuta terrarium lohistamisfunktsiooniga liideseks, keskendudes sulgemistele ja DOM-i manipuleerimisele | [JavaScripti sulgemised, DOM-i manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Trükimäng](./4-typing-game/solution/README.md) | Loo trükimäng | Õpi kasutama klaviatuuri sündmusi, et juhtida oma JavaScripti rakenduse loogikat | [Sündmustepõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Roheline brauserilaiendus](./5-browser-extension/solution/README.md) | Töö brauseritega | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaienduse esimesed elemendid | [Brauseritest](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Roheline brauserilaiendus](./5-browser-extension/solution/README.md) | Vormide loomine, API-de kutsumine ja muutujate salvestamine lokaalsesse mällu | Loo oma brauserilaienduse JavaScripti elemendid, et kutsuda API-d, kasutades lokaalsesse mällu salvestatud muutujaid | [API-d, vormid ja lokaalne mälu](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Roheline brauserilaiendus](./5-browser-extension/solution/README.md) | Taustaprotsessid brauseris, veebijõudlus | Kasuta brauseri taustaprotsesse laienduse ikooni haldamiseks; õpi veebijõudluse kohta ja mõningaid optimeerimisi | [Taustaprotsessid ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Kosmosemäng](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi päriluse kohta, kasutades nii klasse kui kompositsiooni, ja Pub/Sub mustrit, valmistudes mängu loomiseks | [Sissejuhatus täiustatud mänguarendusse](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Kosmosemäng](./6-space-game/solution/README.md) | Joonistamine lõuendile | Õpi lõuendi API kohta, mida kasutatakse elementide ekraanile joonistamiseks | [Joonistamine lõuendile](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Kosmosemäng](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avastage, kuidas elemendid saavad liikuda, kasutades koordinaatsüsteemi ja lõuendi API-d | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Kosmosemäng](./6-space-game/solution/README.md) | Kokkupõrke tuvastamine | Muutke elemendid üksteisega kokku põrkama ja reageerima, kasutades klahvivajutusi, ning lisage jahtumisfunktsioon, et tagada mängu jõudlus | [Kokkupõrke tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Kosmosemäng](./6-space-game/solution/README.md) | Punktide arvestamine | Tehke matemaatilisi arvutusi mängu oleku ja jõudluse põhjal | [Punktide arvestamine](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Kosmosemäng](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise kohta, sealhulgas ressursside puhastamine ja muutujate väärtuste lähtestamine | [Lõppetingimus](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Pangarakendus](./7-bank-project/solution/README.md) | HTML-i mallid ja marsruudid veebirakenduses | Õpi looma mitmeleheküljelise veebisaidi arhitektuuri karkassi, kasutades marsruutimist ja HTML-i malle | [HTML-i mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Pangarakendus](./7-bank-project/solution/README.md) | Sisselogimis- ja registreerimisvormi loomine | Õpi vormide loomise ja valideerimisrutiinide käsitlemise kohta | [Vormid](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Pangarakendus](./7-bank-project/solution/README.md) | Andmete hankimise ja kasutamise meetodid | Kuidas andmed voolavad rakendusse ja sealt välja, kuidas neid hankida, salvestada ja kustutada | [Andmed](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Pangarakendus](./7-bank-project/solution/README.md) | Oleku haldamise kontseptsioonid | Õpi, kuidas rakendus säilitab olekut ja kuidas seda programmiliselt hallata | [Oleku haldamine](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Brauser/VScode kood](../../8-code-editor) | Töö VScode'iga | Õpi, kuidas kasutada koodiredaktorit| [VScode koodiredaktori kasutamine](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI assistendid](./9-chat-project/README.md) | Töö AI-ga | Õpi, kuidas luua oma AI assistent | [AI assistendi projekt](./9-chat-project/README.md) | Chris | +## 🗃️ Õppetükid -## 🏫 Pedagoogika +| | Projekti nimi | Õpitavad mõisted | Õpieesmärgid | Lingitud õppetükk | Autor | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Alustamine | Sissejuhatus programmeerimisse ja tööriistadesse | Õpi programmeerimiskeelte põhialuseid ja tarkvara, mis aitab professionaalsetel arendajatel oma tööd teha | [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Alustamine | GitHub põhitõed, sh meeskonnatöö | Kuidas kasutada GitHubi projektis, kuidas teha koostööd koodibaasil | [Sissejuhatus GitHubi](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Alustamine | Juurdepääsetavus | Õpi veebipõhise juurdepääsetavuse põhialuseid | [Juurdepääsetavuse alused](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS põhitõed | JavaScripti andmetüübid | JavaScripti andmetüüpide alused | [Andmetüübid](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS põhitõed | Funktsioonid ja meetodid | Õpi funktsioonidest ja meetoditest, mis juhivad rakenduse loogikavoogu | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher | +| 06 | JS põhitõed | Otsuste tegemine JS-iga | Õpi tingimuste loomist koodis otsustamismeetodite abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS põhitõed | Massiivid ja tsüklid | Töötamine andmetega, kasutades massiive ja tsükleid JavaScriptis | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehita HTML, et luua veebiterrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikas | Ehita CSS veebiterrariumi stiilimiseks, keskendudes CSS põhialustele ja lehe muutumisele vastavalt ekraanisuurusele | [Sissejuhatus CSS-i](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM manipuleerimine | Ehita JavaScript, et teha terrarium funktsioneerivaks lohistamisliideselementina, keskendudes sulgemistele ja DOM manipuleerimisele | [JavaScripti sulgemised, DOM manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Tippmäng](./4-typing-game/solution/README.md) | Tippmängu ehitamine | Õpi klahvivajutuste sündmustega töötamist, et juhtida JavaScripti rakenduse loogikat | [Sündmuspõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Roheline Brauserilaiendus](./5-browser-extension/solution/README.md) | Töötamine brauseritega | Õpi, kuidas brauserid toimivad, nende ajalugu ja kuidas luua brauserilaienduse esimesi elemente | [Brauseritest](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Roheline Brauserilaiendus](./5-browser-extension/solution/README.md) | Vormide loomine, API kutsumine ja muutujate salvestamine lokaalses mälus | Ehita brauserilaienduse JavaScripti elemendid API kutsumiseks, kasutades lokaalses mälus hoitud muutujaid | [API-d, vormid ja lokaalne mälu](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Roheline Brauserilaiendus](./5-browser-extension/solution/README.md) | Brauseri taustaprotsessid, veebiperformance | Kasuta brauseri taustaprotsesse laienduse ikooni juhtimiseks; õpi veebiperformance'ist ja optimeerimistehnikatest, et performants säilitada | [Taustatööd ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Tähtede Mäng](./6-space-game/solution/README.md) | Edasijõudnum mängude arendus JavaScriptiga | Õpi pärimist kasutades nii klasse kui ka kompositsiooni ning Pub/Sub mustrit, valmistudes mängu ehitamiseks | [Sissejuhatus edasijõudnumasse mänguarendusse](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Tähtede Mäng](./6-space-game/solution/README.md) | Joonistamine canvasile | Õpi Canvas API-d, mida kasutatakse elementide ekraanile joonistamiseks | [Joonistamine canvasile](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Tähtede Mäng](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avastage, kuidas elemendid saavad liikumise, kasutades kartesisüsteemi koordinaate ja Canvas API-d | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Tähtede Mäng](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane elemendid põrkuma ja reageerima üksteisele klahvivajutuste kaudu ning lisa jahutusfunktsioon jõudluse tagamiseks | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Tähtede Mäng](./6-space-game/solution/README.md) | Skori pidamine | Tee mängu staatuse ja tulemuse põhjal arvutusi | [Skori pidamine](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Tähtede Mäng](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamisest ja taaskäivitamisest, sh ressursside vabastamisest ja muutujate lähtestamisest | [Lõpu tingimus](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Pangarakendus](./7-bank-project/solution/README.md) | HTML mallid ja marsruudid veebirakenduses | Õpi, kuidas luua mitmeleheküljelise veebisaidi arhitektuuri raamistik, kasutades marsruute ja HTML malle | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Pangarakendus](./7-bank-project/solution/README.md) | Sisselogimise ja registreerimise vormi loomine | Õpi vormide koostamist ja valideerimise käitlusrutiine | [Vormid](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Pangarakendus](./7-bank-project/solution/README.md) | Andmete toomise ja kasutamise meetodid | Kuidas andmed rakendusse voolavad ja sellest välja, kuidas neid toota, salvestada ja kustutada | [Andmed](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Pangarakendus](./7-bank-project/solution/README.md) | Oleku halduse kontseptsioonid | Õpi, kuidas rakendus säilitab olekut ja kuidas seda programmiliselt hallata | [Oleku haldus](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Brauser/Vscode Kood](../../8-code-editor) | Töö VScode'iga | Õpi, kuidas kasutada koodiredaktorit| [Kasuta VScode koodiredaktorit](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Tehisintellekti assistendid](./9-chat-project/README.md) | Töö AI-ga | Õpi, kuidas ehitada oma AI assistent | [AI assistendi projekt](./9-chat-project/README.md) | Chris | -Meie õppekava on loodud kahe peamise pedagoogilise põhimõtte järgi: -* projektipõhine õpe -* sagedased viktoriinid +## 🏫 Pedagoogika -Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning tänapäeva veebiarendajate kasutatavaid uusimaid tööriistu ja tehnikaid. Õpilastel on võimalus omandada praktilisi kogemusi, luues trükimängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosemängu ja äripangarakenduse. Kursuse lõpuks on õpilased omandanud põhjalikud teadmised veebiarendusest. +Meie õppekava on loodud kahel olulisel pedagoogilisel põhimõttel: +* projektipõhine õppimine +* sagedased viktoriinid -> 🎓 Selle õppekava esimesi tunde saate läbida [õppeprogrammi](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) osana Microsoft Learnis! +Programm õpetab JavaScripti, HTML ja CSS põhialuseid ning tänapäevaste veebiarendajate poolt kasutatavaid uusimaid tööriistu ja tehnikaid. Õpilastel on võimalus saada praktilisi kogemusi, ehitades tippmängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosesissetungija stiilis mängu ja äriklientidele mõeldud pangarakenduse. Seeria lõpuks on õpilastel tugev ülevaade veebiarendusest. -Tagades, et sisu vastab projektidele, muutub õppeprotsess õpilaste jaoks kaasahaaravamaks ja kontseptsioonide meeldejätmine paraneb. Oleme kirjutanud ka mitmeid JavaScripti põhialuste algtunde, et tutvustada kontseptsioone, koos videoga "[Algajate sari: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videokogust, mille autorid on osaliselt panustanud ka sellesse õppekavasse. +> 🎓 Saad läbida selle õppekava esimesed õppetükid ka [õppeteede](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kaudu Microsoft Learn platvormil! -Lisaks aitab madala panusega viktoriin enne tundi suunata õpilase tähelepanu teema õppimisele, samas kui teine viktoriin pärast tundi tagab parema meeldejätmise. See õppekava on loodud paindlikuks ja lõbusaks ning seda saab läbida tervikuna või osaliselt. Projektid algavad väikestest ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks. +Tagades sisu sobivuse projektidega on protsess õpilaste jaoks huvitavam ning kontseptsioonide meeldejätmine parem. Kirjutasime ka mitu alustavat õppetükki JavaScripti alustest, tutvustamaks kontseptsioone, koos videoga "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", mille autorite hulgas on ka selle õppekava kaasautoreid. -Kuigi oleme teadlikult vältinud JavaScripti raamistikke, et keskenduda veebiarendaja põhioskustele enne raamistikuga tutvumist, oleks selle õppekava lõpetamise järel hea järgmine samm õppida Node.js-i teise videokogu kaudu: "[Algajate sari: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Lisaks aitab enne tundi toimuv madala panusega viktoriin seatud õpilase sihti uue teema õppimiseks, samas kui teise viktoriiniga pärast tundi tagatakse parem kontseptsioonide kinnistumine. See õppekava on loodud paindlikuks ja lõbusaks, ning seda saab võtta ka ositi. Projektid algavad lihtsatest ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks. -> Külastage meie [käitumisjuhendit](CODE_OF_CONDUCT.md) ja [panustamise](CONTRIBUTING.md) juhiseid. Ootame teie konstruktiivset tagasisidet! +Kuigi oleme teadlikult vältinud JavaScripti raamistikest rääkimist, keskendudes veebiarendajale vajalikele põhioskustele enne raamistikku võtmist, oleks järgmiseks heaks sammuks selle õppekava lõpetamiseks Node.js õppimine, kasutades videotest koosnevat seeriat: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -## 🧭 Võimalus kasutada võrguühenduseta +> Vaata meie [käitumisjuhendit](CODE_OF_CONDUCT.md) ja [panustamise](CONTRIBUTING.md) juhiseid. Ootame sinu konstruktiivset tagasisidet! -Seda dokumentatsiooni saab kasutada võrguühenduseta, kasutades [Docsify](https://docsify.js.org/#/). Forkige see repo, [installige Docsify](https://docsify.js.org/#/quickstart) oma kohalikku arvutisse ja seejärel sisestage selle repo juurkaustas `docsify serve`. Veebisait avatakse pordil 3000 teie localhostis: `localhost:3000`. -## 📘 PDF +## 🧭 Võimalus vajalike materjalide kasutamiseks ka offline -Kõigi õppetundide PDF-i leiate [siit](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +Seda dokumentatsiooni saab kasutada ka offline, kasutades [Docsify](https://docsify.js.org/#/). Kopeeri see repositoorium, paigalda [Docsify](https://docsify.js.org/#/quickstart) oma kohalikusse arvutisse ja siis selle repositooriumi juurkaustas tipi `docsify serve`. Veebileht avaneb aadressil port 3000 kaudu sinu kohalikus masinas: `localhost:3000`. -## 🎒 Muud kursused +## 📘 PDF -Meie meeskond koostab ka teisi kursusi! Vaadake: +Kõikidest õppetükkidest PDF on leitav [siit](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). + + +## 🎒 Teised kursused +Meie meeskond toodab ka teisi kursusi! Vaata lähemalt: + + +### LangChain +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) + +--- + +### Azure / Edge / MCP / Agendid +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) + +--- + +### Generatiivse tehisintellekti seeria +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) + +--- + +### Põhiline õppimine +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) + +--- -- [MCP algajatele](https://aka.ms/mcp-for-beginners) -- [Edge AI algajatele](https://aka.ms/edgeai-for-beginners) -- [AI agendid algajatele](https://aka.ms/ai-agents-beginners) -- [Generatiivne AI algajatele .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) -- [Generatiivne AI JavaScriptiga](https://github.com/microsoft/generative-ai-with-javascript) -- [Generatiivne AI Javaga](https://github.com/microsoft/Generative-AI-for-beginners-java) -- [AI algajatele](https://aka.ms/ai-beginners) -- [Andmeteadus algajatele](https://aka.ms/datascience-beginners) -- [ML algajatele](https://aka.ms/ml-beginners) -- [Küberturvalisus algajatele](https://github.com/microsoft/Security-101) -- [Veebiarendus algajatele](https://aka.ms/webdev-beginners) -- [IoT algajatele](https://aka.ms/iot-beginners) -- [XR Arendamine Algajatele](https://github.com/microsoft/xr-development-for-beginners) -- [GitHub Copiloti Valdamine Agentlikuks Kasutamiseks](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) -- [GitHub Copiloti Valdamine C#/.NET Arendajatele](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) -- [Vali Oma Copiloti Seiklus](https://github.com/microsoft/CopilotAdventures) +### CoPiloti seeria +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) + -## Abi Saamine +## Abi saamine -Kui jääd hätta või sul on küsimusi AI rakenduste loomise kohta, liitu: +Kui jääd hätta või sul on küsimusi AI-rakenduste loomise kohta, liitu teiste õppijate ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt. -[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Kui sul on tagasisidet toodete kohta või esineb vigu arendamisel, külasta: +Kui sul on toote tagasisidet või ehitamisel esineb vigu, külasta: -[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) +[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) -## Litsents +## Litsents -See repositoorium on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata [LICENSE](../../LICENSE) faili. +See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata faili [LICENSE](../../LICENSE). --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada tõlkete täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/for-teachers.md b/translations/et/for-teachers.md index 912debde..4ec0394b 100644 --- a/translations/et/for-teachers.md +++ b/translations/et/for-teachers.md @@ -42,10 +42,10 @@ See õppekava sisaldab importitavaid pakette, mis sobivad tavaliste LMS töövoo - Moodle Cloudil on piiratud Common Cartridge'i tugi. Eelistage ülaltoodud Moodle'i faili, mida saab samuti Canvas'isse üles laadida. - Pärast importimist vaadake üle moodulid, tähtaegade ja viktoriinide seaded, et need vastaksid teie semestri ajakavale. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.et.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.et.png) > Õppekava Moodle'i klassiruumis -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.et.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.et.png) > Õppekava Canvas'is ### Repositooriumi otsene kasutamine (ilma Classroomita)