3 dəq oxuma

FilmIsBest Təcrübəm

Bugün sizlərlə mənim ilk layihəm olan FilmIsBest haqqında danışmaq istəyirəm. Mən proqramlaşdırmayı 1 il ərzində tam sıfırdan bu layihənin üzərində işləyərək öyrəndim. Bu saytı yaradarkən bir çox problemlərlə üzləşdim və onları aradan qaldırmağa çalışdım. Elə bu bloq post'da da həmin problemlərdən, yaşadığım təcrübələrdən bəhs edəcəyəm

Blog Poster
FilmIsBest Təcrübəm

Nəyə görə lazım idi FilmIsBest?

DIM imtahanına hazırlaşarkən, İngilis dili hazırlığından əlavə, həftədə bir gün film klubumuz olurdu və orada ingilis dilində filmlər izləyirdik. Hər dəfə fərqli bir şəxs qrupla qərarlaşdıraraq, istədiyi filmə birlikdə baxırdıq. Bir dəfə növbə mənə çatanda filmi laptopuma yüklədim, lakin USB yaddaşın işləmədiyinin fərqinə vardım. Mənə təcili və kreativ bir həll lazım idi. (Həmin vaxtlarda işlətdiyim batareyası 1 dəqiqəyə bitən 10 illik əməkdar laptopumun özünü aparma kimi bir şansım da yox idi)

Ona görə problemə yox, həllə fokuslanıb əlimdəki imkanları dəyərləndirdim. 2-3 aydır öyrənməyə çalışdığım HTML və çox az CSS ilə, sadəcə nümayiş etdirəcəyim filmin videosunu <iframe> tag'ında göstərə biləcəyimi fərq etdim. Tez 2 saat ərzində bu dediklərimi etdim və hətta seçim etməyimiz üçün 4 ədəd film və YouTube'dan fraqmanlarınıda əlavə etdim.

Sayt görüntü cəhətdən pis olsa da, funksional və işlək idi. Tez Vercel Hosting'ə deploy edib, yollandım film klubumuza və filmlərdən birini seçib izlədik. Filmi izlədiyim zaman bu websaytı və dolayı yolla özümü inkişaf etdirə biləcəyimi fikirləşdim.

Websaytın inkişafı

Sayt ilk başda çox statik və əsasən yalnız HTML'dən ibarət idi. Heç bir proqramlaşdırma dili bilmədiyim üçün geniş funksionallıqlar yarada bilmirdim. JavaScript'i Mimo adlı tətbiqdən öyrənməyə çalışdım, lakin bir müddət sonra tətbiq maraqsızlaşdı. Praktik təcrübəm olmadığı üçün FilmIsBest'i inkişaf etdirməyə yenidən başladım. Praktika ilə öyrənmə daha yaxşı bir üsul oldu. Əsas diqqət yetirdiyim səhifələr "Filmlər" səhifəsi və fərdi olaraq filmlərin göstərildiyi səhifə idi.

Qarşıma çıxan problemlər

  1. Filmlər səhifəsində film kartlarını necə render etmək olar?
  2. Fərdi film səhifələrini necə yaratmaq olar ki, minimum əməklə hər bir film üçün ayrıca səhifə və slug yaradılsın?
  3. SEO üçün meta taglarını necə generasiya etmək olar?
  4. Filmlərin məlumatlarını necə saxlamaq olar?
  5. Sitemap.xml'i dinamik olaraq necə yaratmaq olar?

Həlli

Həmin vaxt bu problemlərin heç birini həll etmədim 😅. Film kartlarını kopyala-yapışdır metodu ilə məlumatları əllə doldururdum. Hər bir film üçün ayrıca HTML faylı yaradırdım, məsələn, alice-in-wonderland.html. SEO və filmlərin datasını da HTML fayllarında əllə yazırdım (qısaca rendering'i özüm edirdim).

Bir müddət sonra əlbəttə bunun səmərəli olmadığını anladım və məlumatları JSON faylına yığmağa başladım. Daha sonra Sanity CMS'dən istifadə etdim və JavaScript ilə fetching öyrəndim. movies/alice-in-wonderland.html yaratmaq əvəzinə, movie.html adlı bir fayl yaratdım və slug məlumatını movie?m=alice-in-wonderland kimi ötürdüm. Beləcə, NextJS'in dynamic route özəlliyini (searchparams olaraq) özüm hazırladım.

Film kartlarını render etmək üçün xüsusi JavaScript kodu yazdım, amma bu yorucu idi. Saf JavaScript'də hər bir kartın tag'ını yaradıb bir array'a yığırdım. Daha sonra kartlar HTML'ə göndərilirdi.

Sitemap.xml faylını isə Sanity'dən fetch etdiyim məlumatlarla xüsusi Python kodu ilə yazdım. Hər dəfə Python kodunu işə saldıqda sitemap.xml faylını yaradırdı, beləcə NextJS'in sitemap.tsx faylını (qismən) özüm hazırladım.

Bu websaytın ilk versiyasında (Vanilla) bir çox həllər tətbiq etdim və daha sonra NextJS'i də bu saytı yenidən kodlayaraq öyrəndim.

Nəticə

Qeyd etdiyim kimi bu sayt mənim web sahəsindəki bacarıqlarımı inkişaf etdirməyə çox kömək oldu. Sizdə əgər bu sahəyə yeni başlayırsızsa, tövsiyə edirəm ki, sadəcə bir layihə seçin özünüzə və onun üzərində dayanmadan uzun müddət işləyin. Nə lazım olsa öncəliklə Google, Stack Overflow, GitHubdan və ən önəmlisi docslardan baxın. İkinci metod olaraq ChatGPT'dən istifadə etməkdən də çəkinməyin.

Postu bura qədər oxuduğunuz üçün sizə təşəkkür edirəm.

Saytın kodları: FilmIsbest Repo

Kofe al