გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

Val Do-ს ბლოგი

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

vim-ის insert რეჟიმის ღილაკების კომბინაციები
vim-ის insert რეჟიმის ღილაკების კომბინაციები

მოცემულ ბლოგში განვიხილავ ჩემს მიერ ყველაზე ხშირად გამოყენებულ ღილაკების კომბინაცეიბს vim-ში

ძიების კომბინაციები

კომბინაცია აღწერა
/ ძიების დაწყება
%s/მოსაძებნი_სიტყვა/ჩასანაცვლებელი_სიტყვა/gc

სიტყვის მოძებნა ფაილში და ჩანაცვლება დადასტურებით. დასადასტურებლად აუცილებელია y ან n

კოპირება ჩაკოპირება

კომბინაცია აღწერა
"+p clipboard-იდან ჩასმა (paste)
"+y clipboard-ზე დაკოპირება (copy to clipboard)

insert mode-ის ბრძანებები

კომბნაცია აღწერა
i აქტივაცია კურსორამდე
I

აქტივაცია ხაზის დასაწყისში

a

აქტივაცია კურსორის შემდეგ

A

აქტივაცია ხაზის ბოლოში

O

აქტივაცია ხაზის ზემოთ

o

აქტივაცია ხაზის ქვემოთ

ea

აქტივაცია სიტყვის ბოლოში

ctrl+h

სიმბოლოს წაშლა კურსორამდე, როდესაც უკვე აქტიურია insert რეჟიმი

ctrl+w

სიტყვის წაშლა კურსორამდე, როდესაც უკვე აქტიურია insert რეჟიმი

ctrl+j

ახალი ხაზის დაწყება, როდესაც უკვე აქტიურია insert რეჟიმი

ctrl+t

ხაზის მარჯვნივ წანაცვლება, როდესაც უკვე აქტიურია insert რეჟიმი

ctrl+d

ხაზის მარცხნივ წანაცვლება, როდესაც უკვე აქტიურია insert რეჟიმი

Esc

insert რეჟიმიდან გამოსვლა

მეტა სერვისი Angular აპლიკაციისთვის
მეტა სერვისი Angular აპლიკაციისთვის

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

index.html-ის მომზადება

<!doctype html>
<html lang="ka">

<head>
  <meta charset="utf-8">
  <title>თქვენი საიტის სათაური</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- fav icon -->
  <link rel="icon" type="image/png" href="./assets/icons/logo.png">
  <!-- open graph meta tags -->
  <meta name="og:type" content="website" />
  <meta name="og:title" content="" />
  <meta name="og:description" content="" />
  <meta name="og:url" content="" />
  <meta name="og:image" content="" />
  <meta name="image" content="" />
  <!-- twitter meta tags -->
  <meta name="twitter:card" content="" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:creator" content="" />
  <meta name="twitter:description" content="" />
  <meta name="twitter:url" content="" />
  <meta name="twitter:image" content="" />
</head>
...

როგორც ნახეთ index.html-ში წინასწარ გავამზადეთ ყველა მეტა თეგი content="" ცარიელი ატრიბუტით, რათა მომავალში აღარ დაგვჭირდეს ანგულარის აპლიკაციიდან ამ თეგების გენერაცია.

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

შემდეგ ეტაპზე ვაგენერირებთ meta სერვისს

ng g s meta

სერვისის გენერაციის შემდეგ უკვე შეგიძლიათ გამოიყენოთ ჩემი კოდის ნიმუში

meta.service.ts

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class MetaService {

  constructor(
    private _title: Title,
    private _meta: Meta,
    private _router: Router
  ) {
  }

  update(
    title: string,
    description: any,
    img?: string
  ) {
    /* page title */
    this._title.setTitle(title);
    /* meta tags */
    this._meta.updateTag({name: 'description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...`});
    this._meta.updateTag({name: 'author', content: `Val Do`});
    /* open graph */
    this._meta.updateTag({ name: 'og:title', content: title });
    this._meta.updateTag({ name: 'og:description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...` });
    this._meta.updateTag({ name: 'og:url', content:`${environment.baseUrl}/${this._router.url.slice(1)}` });
    this._meta.updateTag({ name: 'og:image', content: img || `${environment.baseUrl}/assets/social.jpg` });
    this._meta.updateTag({ name: 'image', property: 'og:image', content: img || `${environment.baseUrl}/assets/social.jpg` });
    /* twitter */
    this._meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this._meta.updateTag({ name: 'twitter:site', content: '@va1_do' });
    this._meta.updateTag({ name: 'twitter:creator', content: '@va1_do' });
    this._meta.updateTag({ name: 'twitter:title', content: title });
    this._meta.updateTag({ name: 'twitter:description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...` });
    this._meta.updateTag({ name: 'twitter:url', content:`${environment.baseUrl}/${this._router.url.slice(1)}` });
    this._meta.updateTag({ name: 'twitter:image', content: img ||`${environment.baseUrl}/assets/social.jpg` });
  }
}

meta.service.ts ფაილში გვაქვს 1 მეთოდი update(title: string, description: any, img?:string), მოცემულ მეთოდს გადმოეცემა 2 ძირითადი და 1 არა ძირითადი პარამეტრი ესენია:

  • title - გვერდის სათაური
  • description - გვერდის აღწერა
  • img? - გვერდის სურათი

როგორც ზემოთ ავღნიშნე img პარამეტრი არაა საჭირო პარამეტრი, იმ შემთხვევაში თუ პარამეტრი არ გადმოეცემა შეგიძლიათ მიუთითოთ რაიმე სტანდარტული სურათი თქვენი აპლიკაციისთვის, რომელიც იქნება პროექტის assets/ დირექტორიაში

როგორც მეტა სერვისიდან ჩანს ვიყენებ javascript-ის .replace() მეთოდს, რომელსაც გადავცემ regex-ს რომელიც უზრუნველყოფს თეგების სინტაქსის ამოღებას კონკრეტული ტექსტიდან, იმ შემთხვევაში თუ თქვენ description-პარამეტრში გადმოეცით ტექსტი, რომელიც შეიცავს html თეგებს, ასევე ვიყენებ .slice(0, 145) მეთოდს რომელიც გადმოცემული ტექსტიდან ამოიღებს მხოლოდ მაქსიმუმ 145 სიმბოლოს, რაც ზოგადად description ტექსტის მაქსიმალური სიმბოლოების რაოდენობაა.

app.component.ts

გამოყენების მაგალითი

import { Component, OnInit } from '@angular/core';
import { MetaService } from './meta.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  constructor(
    private _metaService: MetaService
  ) {}

  ngOnInit(): void {
    this._metaService.update(
      'თქვენი გვერდის სათაური',
      'თქვენი გვერდის აღწერა',
      'თქვენი გვერდის ფოტოს მისამართი path/img'
    )
  }

}

პ.ს.

იმისთვის, რომ meta სერვისმა იმუშაოს სოციალურ ქსელებში აუცილებელია თქვენი პალიკაცია იყენებდეს Angular universal-ს ანუ server side rendering-ს

Google rich result-ის კომპონენტი Angular აპლიკაციისთვის
Google rich result-ის კომპონენტი Angular აპლიკაციისთვის

როგორც იცით, იმისთვის, რომ გუგლის საძიებო სისტემაში ჩვენი გვერდი ლამაზად მეტად ინფორმირებულად გამოჩნდეს საჭიროა schema.org-ის json-ld-ის გამოყენება.

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

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

პირველ რიგში დავაგენერიროთ კომპონენტი

ng g c json-ld

კომპონენტის გენერაციის შემდეგ, ჩვენი კომპონენტი უნდა გამოიყურებოდეს შემდეგნაირად

json-ld.component.ts

import { DOCUMENT } from '@angular/common';
import { AfterViewInit, Component, Inject, Input, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-json-ld',
  templateUrl: './json-ld.component.html',
  styleUrls: ['./json-ld.component.scss']
})
export class JsonLdComponent implements AfterViewInit {

  @Input() data!: any;

  constructor(
    @Inject(DOCUMENT) private _document: Document,
    private _renderer2: Renderer2
  ) { }

  ngAfterViewInit(): void {
    const jsonLdElement: HTMLElement = this._document.querySelector('[type="application/ld+json"]') as HTMLElement;

    if (!jsonLdElement) {
      const script = this._renderer2.createElement('script');
      script.type = `application/ld+json`;
      script.text = JSON.stringify(this.data);
      this._renderer2.appendChild(this._document.head, script);
      return;
    }

    jsonLdElement.innerText = JSON.stringify(this.data);
  }

}

მას შემდეგ რაც კომპონენტს ავაწყობთ ჩვენ უკვე შეგვიძლია მას @Input() დეკორატორის დახმარებით სასურველი კომპონენტიდან გადმოვაწოდოთ ჩვენთვის სასურველი სტრუქტურის json.

მაგალითად წარმოვიდგინოთ, რომ გვაქვს ონლაინ მაღაზია და გვინდა json-ld-ის ინიციალიზაცია მაღაზიის პროდუქტებზე

product.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, tap } from 'rxjs';
import { ProductService } from '../services/product.service';

interface Product {
  title: string;
  description: string;
  images: string[];
  price: string;
}

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  product$!: Observable<Product>;
  schema!: any;

  constructor(
    private _productService: ProductService
  ) { }

  ngOnInit(): void {
    this.product$ = this._productService.getProduct().pipe(
      tap(product => {
        this.schema = {
          "@context": "https://schema.org/",
          "@type": "Product",
          "name": product.title,
          "img": product.images,
          "description": product.descr.replace(/(<([^>]+)>)/gi, "").slice(0, 145),
          "sku": product.product_id,
          "offers": {
            "@type": "AggregateOffer",
            "offerCount": product.quantity,
            "lowPrice": product.price,
            "highPrice": product.price,
            "priceCurrency": "GEL",
          }
        }
      })
    );
  }

}

product.component.html

<ng-container *ngIf="(product$|async) as product">
    ... თქვენი კოდი
    <app-json-ld [data]="schema"></app-json-ld>
</ng-container>
HTML CSS-ის ინტენსიური კურსი დამწყებთათვის
HTML CSS-ის ინტენსიური კურსი დამწყებთათვის

იმისათვის, რომ დაიწყოთ თქვენი fullstack კარიერა, აუცილებალია სრულყოფილად ფლობდებთ HTML, CSS ენებსა და მათ საფუძვლებს, რომელთა დახმარებითაც შეძლებთ ააწყოთ სტატიკური ვებ გვერდები.

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

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

კურსის სრული ხანგრძლივობა შეადგენს 22 საათს, რომლის ფარგლებშიც შეისწავლით HTML, CSS ენებს და მათი დახმარებით სტატიკური ვებ-გვერდების აწყობას.

კურსის დასრულების შემდეგ, სრულყოფილად შეძლებთ ააწყოთ კომპლექსური ვებ გვერდები.

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

👉🏻 რეგისტრაცია

🤔 გაქვს კითხვები? 👉🏻 მომწერე აქ

*იმ შემთხვევაში, თუ კურსი არ მოგეწონებათ გადახდილი თანხა მთლიანად აგინაზღაურდებათ

რა მოხდება კურსის დასრულების შემდეგ?

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

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

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

* რამდენად სწრაფად დასაქმდები და რამდენ ნიშნიანი ხელფასი გექნება, შენს მონდომებაზეა დამოკიდებული, კურსის ფარგლებში მაქსიმალურად გაგიზიარებ ჩემს გამოცდილებას.

კურსის განმავლობაში შეისწავლით:

ლექცია 1 როგორ მუშაობს ვებსაიტი
რა არის HTML და CSS
სამუშაო გარემოს მომზადება
ბრაუზერის დეველოპერის ხელსაწყოები
რა არის HTML თეგი, პირველი საიტის აწყობა
დავალება
ლექცია 2 HTML-ის ატრიბუტები
class ატრიბუტი და მისი თავისებურებები
id ატრიბუტი და მისი თავისებურებები
style ატრიბუტი, CSS-ის შესავალი
ელემენტების საწყისი (default) მნიშვნელობები და box model (margin, padding, box-sizing, border)
დავალება
ლექცია 3 CSS-ის სელექტორები
CSS-ის იმპორტი, CSS-ის ცვლადები
ბლოკური, ინლაინ, და ბლოკურ-ინლაინი ელემენტები
HTML ფორმები და მისი ელემენტები
CSS-ის ფსევდო სელექტორები
დავალება
ლექცია 4 ტიპოგრაფია, ფონტებთან მუშაობა
ვებ ფონტების კონვერტაცია
CSS position თვისება
რელაციური(relative) პოზიციის გამოყენება
ფიქსირებული(fixed) პოზიციის გამოყენება
აბსოლუტ პოზიციის(absolute) გამოყენება
სტიკი პოზიციის(sticky) გამოყენება
დავალება
ლექცია 5 display: flex; თვისება
flex container-ის თვისებების გამოყენება
flex item-ების თვისებების გამოყენება
gap თვისების გამოყენება პრაქტიკაში
პრაქტიკული მაგალითები flexbox-ზე
დავალება
ლექცია 6 display: grid; თვისება
grid container-ის თვისებების გამოყენება
grid item-ების თვისებების გამოყენება
პრაქტიკული მაგალითები grid-ზე
დავალება
ლექცია 7 რა არის რესპონსივი და რაში გამოიყენება
@media query-ების განხილვა
რესპონსიული საიტის მაგალითები
რეპონსიული საიტის აწყობა
დავალება
ლექცია 8 CSS ანიმაციების შესავალი
keyframe ტიპის ანიმაციები
transition თვისება
transform თვისება
ანიმაციური ელემენტების პრაქტიკული გამოყენება
დავალება
ლექცია 9 ცხრილებთან მუშაობა
ლისტებთან მუშაობა
სურათებთან მუშაობა და მისი პრაქტიკული სავარჯიშოები
ფონებთან მუშაობა და მისი პრაქტიკული სავარჯიშოები
დავალება
ლექცია 10 რა არის ჯავასკრიპტი (შესავალი)
ფინალური პროექტის დავალება
ფინალური პროექტის დაგეგმვა
შემდგომი ნაბიჯები
დავალება
ლექცია 11 figma-სთან მუშაობა და დიზაინის წაკითხვა
figma-ში არსებული დიზაინის აწყობა კოდში

 

 

Sublime Text 3 - კონფიგურაცია Angular-ისთვის
Sublime Text 3 - კონფიგურაცია Angular-ისთვის

გადავწყვიტე ცოტა ხნით შევეშვა VS Code-ს და დავუბრუნდე Sublime Text 3 ედითორს, ამ სტატიაში შესული იქნება Sublime Text 3-ის ჩემებური კონფიგურაცია

Package control-ის ინსტალაცია

პირველ რიგში საბლაიმის გახსნისთანავე საჭიროა დავაყენოთ Package control.

გავხსნათ საბლაიმი და დავაწვეთ command(ctrl)+shift+p, რის შემდეგაც გამოვა ჩასაწერი ველი, რომელშიც უნდა ჩავწეროთ Install Package Control, ამის შემდეგ საბლაიმი თავისით შემოგვთავაზებს ვარიანტს და ავირჩიოთ შესაბამისი Install Package Control

File Icon-ის დაყენება

საბლაიმის ფაილ აიქონები ნამდვილად არაა ლამაზი და არ წარმოაჩენს ერთი შეხედვით ფაილის ტეპებს, სწორედ ამიტომ დავაყენოთ A File Icon-ის თემა.

  1. ვაწვებით command(ctrl)+shift+p
  2. ვკრეფთ Package control
  3. ვირჩევთ Install Package
  4. ვკრეფთ A File Icon და ვაწვებით ენთერს
  5. გადავტვირთოთ საბლაიმი

Import Helper-ის დაყენება

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

ფლაგინის სახელია ImportHelper

  1. ვაწვებით command(ctrl)+shift+p
  2. ვკრეფთ Package control
  3. ვირჩევთ Install Package
  4. ვკრეფთ ImportHelper და ვაწვებით ენთერს

ფლაგინის გამოსაყენებელი ღილაკების კომბინაციაა ctrl+alt+i

Terminus-ის დაყენება

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

  1. ვაწვებით command(ctrl)+shift+p
  2. ვკრეფთ Package control
  3. ვირჩევთ Install Package
  4. ვკრეფთ Terminus და ვაწვებით ენთერს

ინსტალაციის შემდეგ გამოვიძახოთ ღილაკების კობმინაციით command(ctrl)+shift+p და მოვძებნოთ შემდეგი ტექსტი, Preferences: Terminus Key Bindings, მას შემდეგ რაც გაიხსნება პარამეტრები ცარიელ მხარეს ფაილის ჩავწეროთ შემდეგი კონფიგურაცია

[
	{ "keys": ["alt+`"], "command": "toggle_terminus_panel" },
	// Open a terminal tab at current file directory
    {
        "keys": ["ctrl+alt+t"], "command": "terminus_open", "args": {
            "cwd": "${file_path:${folder}}"
        }
    },
]

 

მოცემული კონფიგურაცია დაგვეხმარება მარტივად კლავიატურის დახმარებით გამოვიძახოთ Terminus-ი

alt+` გამოიძახებს ტერმინალს, ხოლო ctrl+alt+t გამოიძახებს ტერმინალს იმ დირექტორიაში რომელზეც ვდგავართ

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

როგორც იცით ერთ-ერთი ყველაზე გამოსადეგი ღილაკის კომბინაცია არის command(ctrl)+p, რომლის დახმარებითაც მარტივად შეგვიძლია გადავიდეთ სასურველ ფაილში, ფაილის დასახელების აკრეფით.

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

კოფიგურაციის დასამატებლად აუცილებელია გავხსნათ საბლაიმის კოფიგურაციის json ფაილი Preferences > settings და დავამატოთ შემდეგი კოფიგურაცია

"folder_exclude_patterns": [
    	"node_modules/**",
    	".angular/**",
    	"dist/**",
    	".git/**"
 ]

ხაზის წაშლის ფუნქციონალი მაკზე

ვიზუალ სტუდიო კოდიდან გადმოყოლილი ჩვევა ხაზის წაშლაზე როგორც აღმოვაჩინე საბლაიმზეც დამჭირდა, მაგრამ აქ სხვა ღილაკების კომბინაციითაა, ctrl+shift+k, მაგრამ მაკზე ჩემთვის მოსახერხებელი კომბინაცია დავაყენე Preferences > Key Bindings

{ "keys": ["super+shift+k"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Line.sublime-macro"} },

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

დირექტირიის გახსნა საიდ ბარში

Preferences > Key Bindings

{ "keys": ["super+shift+e"], "command": "reveal_in_side_bar" }

Emmet-ის დაყენება

  1. ვაწვებით command(ctrl)+shift+p
  2. ვკრეფთ Package control
  3. ვირჩევთ Install Package
  4. ვკრეფთ Emmet და ვაწვებით ენთერს

 

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

თუ გაინტერესებთ როგორ მუშაობს ინტერნეტი და ზოგადად ვებ სამყარო მაშინ სწორ ადგილას მოხვდი, დღევანდელი ბლოგით შევეცდები მარტივად, თქვენთვის გასაგებ ენაზე ავხსნა მისი საფუძვლები და მუშაობის პრინციპები.
მაგალითისთვის მოვიყვანოთ 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 მისამართის სერვერზე

ანგულარის (Angular) ინტენსიური კურსი დამწყებთათვის
ანგულარის (Angular) ინტენსიური კურსი დამწყებთათვის

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

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

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

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

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

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

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

🏷 კურსზე რეგისტრაციის ღირებულება შეადგენს თვეში 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-ზე

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

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

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

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

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

git config --global user.email "[email protected]"

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

გით (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

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

mongodb-ს ხშირად გამოყენებული ბრძანებების ცნობარი
mongodb-ს ხშირად გამოყენებული ბრძანებების ცნობარი

მოცემულ ბლოგში აღწერილი იქნება ხშირად გამოყენებული ბრძანებები, რომელიც საჭიროა mongodb-ს ბაზასთან სამუშაოდ

mongodb ბაზის არჩევა mongosh ტერმინალის დახმარებით

  • use dbname

კოლექციების სიის ჩვენება

  • show collections

კოლექციის წაშლა

  • db.collectionName.drop() წაშლის მთლიან კოლექციას

კოლექციაში მრავალი დოკუმენტის რედაქტირება

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

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

.updateMany() მეთოდს გადაეცემა 2 პარამეტრი, პირველი ფილტრი, ხოლო მეორე დასარედაქტირებელი მონაცემები

მხოლოდ 1 მნიშვნელობის განახლება id-ის მიხედვით

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

ზემოთ მოცემულ კოდში Reviews არის mongoose-ის მოდელი updateOne-ნიშნავს რომ განვაახლებთ მხოლოდ 1 ჩანაწერს კოლექციაში, _id: req.body.courseId ნიშნავს, რომ Reviews კოლექციაში ვეძებთ გადმოცემული id-ის მიხედვით.

$set ოპერატორი განაახლებს მხოლოდ isPublished თვისებას req.body.isPublished-ის მნიშვნელობით

ფავორიტი ედითორის ბრძანებები (VS CODE)
ფავორიტი ედითორის ბრძანებები (VS CODE)

ჯერ კიდევ 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)