Val Do-ს ბლოგი

თუ გაინტერესებთ როგორ მუშაობს ინტერნეტი და ზოგადად ვებ სამყარო მაშინ სწორ ადგილას მოხვდი, დღევანდელი ბლოგით შევეცდები მარტივად, თქვენთვის გასაგებ ენაზე ავხსნა მისი საფუძვლები და მუშაობის პრინციპები.
მაგალითისთვის მოვიყვანოთ https://val-do.com, ანუ რა გზას გადის საიტი თქვენს ბრაუზერში მოხვედრამდე და რამდენი ოპერაციის გავლაა საჭირო.

სახელების შეთანხმებები

სანამ უშუალოდ პროცესის ახსნაზე გადავალთ აუცილებელია ვიცოდეთ სახელების შეთანხმებები, თუ რა რას ნიშნავს.

კლიენტი (client):

კლიენტი იგივე აპლიკაციაა რომელიც ჩვენს ლოკალურ მანქანაზეა გაშვებული, მაგალითად ჩვენი ბრაუზერი, არ აქვს მნიშვნელობა რა ტიპის ბრაუზერი იქნება ეს, ქრომი, მოზილა, საფარი თუ სხვა. კლიენტის მთავარი მიზანია ინტერნეტის/ქსელის დახმარებით გააგზავნოს მოთხოვნა სერვერთან, მიიღოს სერვერიდან მოსული პასუხი მოახდინოს მისი დეკოდირება და გვაჩვენოს საიტი ისეთ მდგომარეობაში როგორსაც ჩვეულებრივ ბრაუზერში ვხედავთ ხოლმე.

სერვერი (server):

სერვერი არის კომპიუტერი რომელიც ჩართულია ინტერნეტის გლობალურ ქსელში და მას ასევე გააჩნია საკუთარი უნიკალური მისამართი IP. 
განსხვავებით ჩვენი ლოკალური კომპიუტერისგან, სერვერზე არის სპეციალური პროგრამული უზრუნველყოფა, რომელიც განკარგავს შემოსულ მოთხოვნებს ჩვენი კომპიუტერიდან.
ძირითადი სერვერის ფუნქციაა შეინახოს ვებ-გვერდები მის საინფორმაციო საცავში, ასევე დაამუშაოს ჩვენი გაგზავნილი მოთხოვნები და გაუგზავნოს კლიენტს დამუშავებული მოთხოვნები.

IP address:

იშიფრება როგორც Internet Protocol Address (ინტერნეტ პროტოკოლის მისამართი). IP მისამართი არის უნიკალური მაიდენტიფიცირებელი რიცხვითი მისამართი (კომპიუტერის, სერვერის, პრინტერის, როუტერის  და ა.შ.) 
IP მისამართი შედგება 4 დანაყოფისგან რომელიც წერტილებით არის გამოყოფილი მაგ: (244.155.65.2)

HTTP:

Hyper-text Transfer Protocol. პროტოკოლი რომელსაც იყენებენ ვებ ბრაუზერები და სერვერები ერთმანეთთან საკომუნიკაციოთ ინტერნეტის დახმარებით

ISP:

Internet Service Provider, ინტერნეტის სერვისის პროვაიდერი, არის ინტერნეტ კომპანია რომელიც დგას ჩვენს და სერვერს შორის, მაგალითისთვის საქართველოში ეს კომპანიებია მაგთი და სილქნეტი, ასევე მობილური ოპერატორები.
როდესაც ჩვენ ბრაუზერში ჩავწერთ val-do.com-ს ამ დროს ISP ვალდებულია მიაკითხოს DNS (Domain Name Systems), რომელიც val-do.com-ს გადათარგმნის სერვერის IP მისამართად და გააგზავნის მოთხოვნას კონკრეტულ სერვერთან.

DNS:

Domain Name System. ეს არის უხეშად რომ ვთქვათ მონაცემთა ბაზა რომლის მიზანიცაა კონკრეტული სერვერების IP მისამართებს მიანიჭოს შესაბამისი სახელი, მაგალითად google.ge-ის ამ დროინდელი სერვერის IP მისამართია 142.250.69.196

URL:

Uniform Resources Locator. URL-ის დახმარებით შეგვიძლია სერვერზე მივაკითხოთ კონკრეტულ რესურსებს როგორებიცაა მაგალითად კონტაქტის გვერდი, მთავარი გვერდი და ა.შ.

როგორ მუშაობს ვები.

როდესაც ჩვენ ბრაუზერში ავკერფთ მისამართს, ამ დროს იგზავნება მოთხოვნა, რომელიც მიდის ჯერ ჩვენს ლოკალურ ISP-სთან შემდეგ ჩვენი ISP მიაკითხავს DNS სერვერს. DNS სერვერი ჩვენს მოთხოვნას გაგზავნის შესაბამისი IP მისამართის სერვერზე

ჩვენი ვებ-გვერდის მომხმარებლის მაღალი ინტერესიდან და მოთხოვნიდან გამომდინარე გადავწყვიტე val-do.com-ზე გავაკეთო ფასიანი კურსები, რომლის ფარგლებშიც შეისწავლით Angular “ფრეიმვორქს”.

ლექციები ჩატარდება კვირაში 3 დღე და მისი ხანგრძლივობა იქნება 1 საათიდან 2 საათამდე, შევხვდებით ონლაინ, ტელეგრამის საშუალებით, ასევე ჩავიწერ ყველა ლექციას Full HD ფორმატში და გამოგიგზავნით ლექციის დასრულების შემდგომ.

კურსის ხანგრძლივობა შეადგენს 2 თვეს, რომლის ფარგლებშიც შეისწავლით Angular “ფრეიმვორქის” საფუძვლებს, არქიტექტურის დაგეგმვას და რაც ყველაზე მთავარია, მოგიწევთ რეალურ API-სთან მუშაობა.

ჩემი მიზანია მაქსიმალურად მივაჩვიო სტუდენტი “ფრეიმვორქთან” მუშაობას და ვასწავლო მისი ყველა უპირატესობა.

კურსის დასრულების ბოლოს თქვენ გექნებათ გამოცდილება რეალურ API-სთან მუშაობის და შექმნით val-do.com-ის მსგავს საიტს, რომელშიც შევა:

• მომხმარებლის რეგისტრაცია/ავტორიზაცია
• მომხმარებლის როლები
• კურსების დამატება, რედაქტირება, წაშლა
• ფოტოების ატვირთვა
• კომენტარების მოდული
• შეფასებების მოდული
• ქვიზის მოდულის დამატება და სხვა…

კურსზე რეგისტრაციისთვის აუცილებელი წინაპირობაა გავლილი გქონდეს val-do.com-ზე დამატებული კურსები:

• HTML CSS;
• JavaScript-ის კურსი დამწყებთათვის;
• TypeScript-ის კურსი დამწყებთათვის;

🏷 კურსზე რეგისტრაციის ღირებულება შეადგენს თვეში 100$.

👉🏻 კურსის შეძენისთვის დააჭირეთ მოცემულ ბმულს

*კურსის დასაწყებად აუცილებელია დარეგისტრირდეს მინიმუმ 5 სტუდენტი.

ℹ️ თუ გაქვს შეკითხვები შეგიძლია მოგვწერო ჩვენს ტელეგრამ 👉🏻 ჯგუფში

Angular-ის კურსის სილაბუსი

ლექცია 1

• Angular-ის მოკლე ისტორია
• პოპულარული ფრეიმვორქები
• TypeScript-ის შესავალი
• Git-ის და Node-ის ინსტალაცია
• ანგულარის არქიტექტურის მიმოხილვა

ლექცია 2

• Git-ის ძირითადი ბრძანებები
• Github-ის განხილვა და პროექტის მიღება
• NPM-ის განხილვა
• NPM-ის Package-ების ინსტალაცია, წაშლა

ლექცია 3

• Angular აპლიკაციის ინიციალიზაცია
• Angular CLI-ის განხილვა
• Angular.json-ის განხილვა
• პირველი Hello world აპლიკაციის გაშვება
• ტექსტის ინტერპოლაცია

ლექცია 4

• კომპონენტების ინციალიზაცია CLI-ის დახმარებით
• კომპონენტებს შორის ინტერაქცია
• კომპონენტების ენკაფსულაცია (encapsulation)
• კომპონენტების სტილები

ლექცია 5

• კომპონენტებს შორის ინტერაქცია
• @Input() დეკორატორი
• @Output() დეკორატორი
• Angular EventEmitter

ლექცია 6

• content projection
• Angular-ის template-ის შესავალი
• ატრიბუტების binding
• კლასების და სტილების binding

ლექცია 7

• თვისებების (property) binding
• მოვლენების (event) binding
• Two way binding

ლექცია 8

• pipe-ების განხილვა
• ჩაშენებული pipe-ების გამოყენება template-ში
• custom pipe-ების ინიციალიზაცია

ლექცია 9

• template reference variable-ების გარჩევა
• ჩაშენებული Angular directive-ები
• ngClass დირექტივის გარჩევა
• ngStyle დირექტივის გარჩევა

ლექცია 10

• ჩაშენებული სტრუქტურული დირექტივები
• ngIf დირექტივის გარჩევა
• ngFor დირექტივის გარჩევა
• custom დირექტივების შექმნა

ლექცია 11

• Angular services
• dependency injection

ლექცია 12

• Angular router
• router parameters
• query parameters
• routerLink
• routerOutlet
• routerLinkActive

ლექცია 13

• Angular life cycle hooks
• ngOnInit()
• ngOnDestroy()
• ngAfterViewChecked()
• …
• მოდულების შესავალი
• lazy modules

ლექცია 14

• შესავალი template driven forms-ებში
• ფორმების ვალიდაცია

ლექცია 15

• შესავალი reactive forms-ებში
• ფორმების ვალიდაცია
• ფორმის ჯგუფების შექმნა
• დინამიური ფორმების აწყობა

ლექცია 16

• HttpClient
• მოთხოვნების გაგზავნა 
• post, get, put, delete
• api-სთან მუშაობა და მონაცემების გამოტანა ეკრანზე

ლექცია 17

• RxJs-ის შესავალი
• RxJs-ის ოპერატორები
  • pipe
  • map
  • tap
  • switchMap
  • map
  • mergeMap
  • of
  • …

ლექცია 18

• ვებგვერდის აწყობის დაწყება
• Angular router guards
• canActivate
• canActivateChild
• canDeactivate

ლექცია 19

• პოსტმენთან მუშაობის განხილვა
• ავტორიზაციის დაგეგმვა
• რეგისტრაციის დაგეგმვა

ლექცია 20

• Angular interceptors
• მოთხოვნის ჰედერების მოდიფიკაცია
• დაცული მოთხოვნების გაგზავნა სერვერთან

ლექცია 21

• თეგების გვერდის აწყობა
• თეგის დამატება
• რედაქტირება
• წაშლა

ლექცია 22

• Angular material-ის შესავალი
• კატეგორიების გვერდის დასაწყისი
• დიალოგების პრაქტიკაში გამოყენება

ლექცია 23

• 3rd party application-ების დაყენება ანგულარის პროექტში
• ng-select-ის გარჩევა და პრაქტიკაში გამოყენება
• swiperjs-ის გარჩევა და პრაქტიკაში გამოყენება 

ლექცია 24

• ფოტოს/ფაილების ატვირთვა, წაშლა, რედაქტირება
• პროექტის დასრულება და განხილვა
• კითხვა პასუხი კურსის დასრულების შემდგომ
• რჩევები კარიერის შემდეგ ეტაპზე გადასასვლელად

პ.ს. ფასიანი კურსების გამოცხადება არ ნიშნავს იმას, რომ მე შევწყვეტ უფასო პროგრამირების გაკვეთილების გადაღებას.

მოეცმულ სტატიაში მინდა ჩამოვწერო ჩემს მიერ ყველაზე ხშირად გამოყენებული ბრძანებები git-ზე

გითის კონფიგურაცია

მას შემდეგ რაც git-ს დავაყენებთ ლოკალურ მანქანაზე საჭიროა მისი კონფიგურაცია ჩვენი მონაცემებით, რომელიც გითის კომიტში მოახდენს ჩვენს იდენტიფიკაციას

გავხსნათ ტერმინალი და ჩავწეროთ შემდეგი ბრძენებები

git config --global user.name "სახელი გვარი"

მოცემული ბრძანებით მივუთითებთ ჩვენს სახელს და გვარს

git config --global user.email "MY_NAME@example.com"

მოცემული ბრძანებით მივუთითებთ ჩვენს ელფოსტას

გით (git) რეპოზიტორის კლონირება ლოკალურ კომპიუტერში გარემოში

მას შემდეგ რაც შევქმნით კოდის repository-ის github-ზე საჭიროა კონკრეტული რეპოზიტორის კლონირება (ჩამოტვირთვა) ლოკალურ გარემოში, სწორედ ამისთვისაა git clone ბრძანება

git clone <https://repourl>

ლოკალური ბრენჩის ატვირთვა remote გარემოზე

git push -u <remote> <branch-name>

ახალი ბრენჩის გაკეთება git-ზე ლოკალურ გარემოში

git checkout -b <branch-name>

ლოკალური ბრენჩის ატვირთვა remote გარემოზე

remote გარემო წარმოადგენს მაგალითად github-ს. ქვემოთ მოცემული ბრძანება საჭიროა გაეშვას ერთჯერადად, ანუ ის საჭიროა მხოლოდ მაშინ, როდესაც გვიწევს ლოკალური branch-ის ფიზიკურად ატვირთვა remote გარემოზე

git push --set-upstream origin <branch-name>

კოდის ატვირთვა გითზე (git add .)

მას შემდეგ, რაც დავაყენებთ git-ის რეპოზიტორის და დავიწყებთ მუშაობას საჭიროა ჩვენი ნამუშევარი ფაილების და კოდების ატვირთვა გითზე, ამისთვის საჭიროა ტერმინალიდან შევიდეთ დირექტორიაში, რომელშიც გითი (git) უკვე ინციალიზებულია.

მას შემდეგ რაც დავდგებით კონკრეტულ დირექტორიაზე არსებული ფაილები საჭიროა მოვამზადოთ გითის კომიტისთვის სწორედ ამისთვის გამოიყენება git add . ბრძანება

ფაილების დასაკომიტებლად მომზადება გითზე

git add .

მოცემული ბრძანება მოამზადებს ჩვენს მიერ მოდიფიცირებულ/დამატებულ/წაშლილ ფაილებს კომიტისთვის

გითზე დაკომიტება (git commit)

დასაკომიტებლად გამოიყენება შემდეგი გითის ბრძანება

git commit -m "თქვენი კომიტის შეტყობინება"

როგორც ზემოთ ბრძანებაში ჩანს ორმაგ ბრჭყალებში მოცემულია ტექსტი, რომელშიც შეგიძლიათ ჩაწეროთ მოკლე ინფორმაცია თქვენი კომიტის შესახებ, მაგალითად: bug fix

ფაილების ატვირთვა გითზე (დაფუშვა) (git push)

მას შემდეგ რაც ჩვენს პირველ კომიტს გავაკეთებთ, იმისთვის რომ ჩვენი კომიტი მოხვდეს გითზე აუცილებელია კოდის ე.წ. "დაფუშვა" git push

git push

მოცემული ბრძანება საშუალებას გვაძლევს ჩვენი კომიტი აიტვირთოს გითზე.

// ვირჩევთ მონაცემთა ბაზას
use dbName

// ვირჩევთ კოლექციას და ვარედაქტირებთ მრავალ დოკუმენტს
db.collectionName.updateMany({}, {$set: {isFavorite: false}});

await Reviews.updateOne({ _id: req.body.courseId }, {
    $set: {
        isPublished: req.body.isPublished
    }
})

ჯერ კიდევ 2011 წლის ბოლო, როდესაც მის შესახებ ჯერ არავინ იცოდა რატომღაც ვცადე vs code-ის გამოყენება და ძალიან მომეწონა, იმ დროს ყველაზე პოპულარული ედიტორი sublime text იყო, მაგრამ ჯერ კიდევ code-ის ბეტა ვერსიაზე ძალიან მომეწონა code-ში მუშაობა.

დღეს უკვე მის შესახებ თითქმის ყველამ იცის, დღევანდელ ბლოგში მინდა მოგიყვეთ რამდენიმე საინტერესო ღილაკის კომბინაციაზე, რომელიც საკმაოდ შეგიმცირებთ ედითორში მუშაობის დროს.

სანამ დეველოპმენტის შესწავლის აქტიურ ფაზაზე გადახვალთ ჩემი აზრით საჭიროა ვიცოდეთ რამდენიმე ყველასთვის გამოსადეგი კლავიატურის კომბინაცია, რომელიც საკმაოდ დაგვიზოგავს ედითორში მუშაობის დროს.

copy/paste

შესაძლოა ეს ძალიან მარტივი ბრძანებები უკვე კარგად იცი, მაგრამ მაინც მინდა მოკლე სია გავაკეთო

• კოპირება - ctrl+c (command+c)
• კოპირებულის ჩასმა - ctrl+v (command+v)
• ხაზის ამოჭრა - ctrl+x (command+x)

ხაზის დაკომენტარება

კოდის წერისას ხშირად დაგვჭირდება რომელიმე ხაზის ან რამდენიმე ხაზი კოდის დაკომენტარება სწორედ ამისთვის არსებობს ქვემოთ მოცემული ბრძანებები

• 1 ხაზიანი კომენტარი - ctrl+/ (command+/)
• მრავალ ხაზიანი კომენტარი - alt+shift+a

ფაილის მოძებნა სამუშაო დირექტორიაში

ხშირად გვჭირდება პროექტში რაიმე კონკრეტული ფაილის მოძებნა, რაც არც ისე მარტივია, როდესაც ჩვენი პროექტი უკვე საკმაოდ ბევრი ფაილისგან შედგება ამისთვის არსებობს ბრძანება

• ctrl+p (command+p)

რომელზე დაჭერის შემთხვევაშიც გამოდის ჩასაწერი ველი, რომელშიც უნდა მივუთითოთ სასურველი ფაილის დასახელება

ცვლილების უკან/წინ დაბრუნება

• უკან დაბრუნება - ctrl+z (command+z)
• ცვლილების წინ გადასვლა - ctrl+shift+z (command+shift+z)

ფაილის შენახვა

• ctrl+s (command+s)

მთლიანი ფაილის მონიშვნა

• ctrl+a (command+a)

კოდის ძებნა

• აქტიურ ჩანართში ძიება - ctrl+f (command+f)
• მთელს პროექტში ძიება - ctrl+shift+f (command+shift+f)

ხაზის წანაცვლება

ხშირად კოდის წერისას გვჭირდება რომელიმე ხაზის ზემოთ ან ქვემოთ ჩამოტანა სწორედ ამისთვის არსებობს ბრძანებები

• ზემოთ წანაცვლება - alt+arrow up
• ქვემოთ წანაცვლება - alt+arrow down

ერთნაირი ტექსტის მონიშვნა

როდესაც კოდში გვიწევს ერთნაირი ტექსტების ამოცვლა, იმის მაგივრად, რომ ყველა ტექსტური ელემენტი ცალ-ცალკე შევცვალოთ შეგვიძლია მოვნიშნოთ ფაილში ყველა ერთნაირი ელემენტი. ამისთვის საჭიროა მოვნიშნოთ კონკრეტული ტექსტი და დავკლიკოთ ctrl+d-ზე, რამდენჯერაც დავკლიკავთ იმდენი მსგავსი ელემენტი მოინიშნება

• ctrl+d (command+d)

ხაზის წაშლა

• ctrl+shift+k (command+shift+k)