ვებ აპლიკაციების ბილდერების შესწავლა

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

ᲕᲔᲑ ᲐᲞᲔᲑᲘ

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

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

ბევრი მონაწილე აირჩევს მობილური აპლიკაციის შექმნას ჩვენი რეკომენდებული აპლიკაციების ბილდერების, App Inventor-ის ან Thunkable-ის გამოყენებით. თუ ახალბედა ხართ კოდირებაში ან უკვე იცით, რომ გსურთ App Inventor-ის ან Thunkable-ის გამოყენება, შეგიძლიათ ეს გაკვეთილი გამოტოვოთ! 

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

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

მობილური აპლიკაცია

  • პროგრამა, რომელიც მუშაობს ტელეფონზე
  • ჩამოტვირთული და დაინსტალირებულია მოწყობილობაზე 
  • შეუძლია წვდომა ტელეფონის ფუნქციებზე, როგორიცაა GPS და კამერა
  • სპეციფიკურ პლატფორმაზეა (iOS ან Android) 
  • კოდირებულია კონკრეტული ენებით ოპერატიულ სისტემასთან ტოლფასობისთვის

ვებ აპლიკაცია

  • ძალიან ჰგავს მობილური აპლიკაციას
  • მუშაობს ინტერნეტ ბრაუზერში
  • არ არის შექმნილი კონკრეტული მოწყობილობისთვის (iOS ან Android) 
  • ზოგადად კოდირებულია HTML, CSS, Javascript და Python-ით
  • ხაზგარეშე რეჟიმში გაშვება შეუძლებელია

პროგრესული ვებ აპლიკაცია

  • სპეციალური ტიპის ვებ აპი, რომელიც წარმოადგენს მობილურ აპსა და ვებ აპის ჰიბრიდს
  • მუშაობს ბრაუზერში
  • ასევე შეიძლება დაინსტალირდეს მობილურ მოწყობილობაზე, როგორც ჩვეულებრივი მობილური აპი
  • შეუძლია ხაზგარეშე რეჟიმში მუშაობა

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

ჩვენ შევისწავლით ვებ აპების შექმნის რამდენიმე ვარიანტს დამწყებთათვის.

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

ვებ აპების შესაქმნელად ორი ძირითადი ენა გამოიყენება.

JAVASCRIPT (ჯავა სკრიპტი)

javascript ლოგო

Javascript, ან JS არის სკრიპტული ენა. ეს ნიშნავს, რომ კოდი სრულდება გაშვების დროს და არა წინასწარ კომპილირებისას, როგორც ეს მობილურ აპებში ხდება. ის ჰგავს მსახიობს, რომელიც ყოველ წარმოდგენაზე სცენარს ასრულებს.

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

ᲞᲘᲗᲝᲜᲘ

პითონის ლოგო

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

Python აღიქმება მარტივ, მრავალმხრივ ენად, რომელიც განსაკუთრებით ხელმისაწვდომია ახალბედა კოდერებისთვის. იგი გამოიყენება პროგრამული უზრუნველყოფის სხვადასხვა ასპექტში. ერთ-ერთი მიმართულება არის ვებ-პროგრამირება. მეორე კი მანქანური სწავლება (Machine Learning). ამიტომ, Python შესანიშნავი არჩევანია მოწინავე AI ვებ-აპლიკაციების შესასწავლად და შესაქმნელად. 

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

რამდენიმე ძირითადი მახასიათებელი:

  • კარგი ვარიანტია მათთვის, ვისაც აქვს ბლოკებზე დაფუძნებული კოდირების დიდი გამოცდილება და ეძებს ახალ გამოწვევას
  • კარგია მათთვის, ვინც მუშაობს ტექსტზე დაფუძნებულ კოდირებაზე
  • ძალიან მრავალმხრივი ენა, რომელიც ფართოდ გამოიყენება
  • საჭიროა პროგრამული უზრუნველყოფის კომპიუტერზე დაყენება
      • პითონი და მასთან დაკავშირებული ბიბლიოთეკები
      • კოდის რედაქტორი
  • Streamlit-ს აქვს ბრაუზერში გაშვების შესაძლებლობა Github-ის გამოყენებით
      • ეს ვარიანტი სასწავლო კურიკულუმში განხილული არ იქნება
  • მასთან ერთად შეგიძლიათ გამოიყენოთ AI
      • ყველაზე პოპულარული ენა მანქანური სწავლების მოდელების შესაქმნელად და გამოყენებისთვის
      • ჩვენ გამოვიყენებთ Jupyter Notebooks-ს მოდელის შესაქმნელად

ᲓᲐᲬᲧᲔᲑᲐ

თქვენი Technovation პროექტისთვის ვებ აპლიკაციების კოდირებისთვის დაგჭირდებათ:

  • კომპიუტერი ან ლეპტოპი
  • ინტერნეტთან წვდომა

უნდა იყოთ გარკვეულწილად კომფორტული Terminal ფანჯრის გამოყენებაში Mac-სა თუ Linux-ზე, ან Terminal-ის ან Command Prompt-ის გამოყენებაში Windows-ზე. თუ არ გაქვთ გამოცდილება, ან არც კი იცით, რა არის Terminal ფანჯარა, მაშინ გადახედეთ ამ საწყის ვიდეოებს, სანამ აქტივობაზე გადახვალთ.

უყურეთ თქვენი ოპერატიული სისტემის შესაბამის ვიდეოს.

ტერმინალის (Terminal) გამოყენება

3 ვიდეო

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

ქვემოთ მოცემულია თითოეულის რამდენიმე დადებითი და უარყოფითი მხარე.

ᲗᲥᲕᲔᲜᲡ ᲙᲝᲛᲞᲘᲣᲢᲔᲠᲖᲔ

პლიუსები:

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

ᲛᲘᲜᲣᲡᲔᲑᲘ:

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

Cloud-ზე

პლიუსები:

  • ფაილები ინახება cloud-ზე
  • არ არის საჭირო თქვენს კომპიუტერზე რაიმეს დაყენება
  • ავტომატური ბმული Github-ზე პორტფელის მიზნებისთვის
  • მარტივია თანაგუნდელებთამ გასაზიარებლად 

ᲛᲘᲜᲣᲡᲔᲑᲘ:

  • არ ექნება ლოკალურად პროგრამული უზრუნველყოფის გამოყენების გამოცდილება
  • დამოკიდებულება ინტერნეტ კავშირზე

აირჩიეთ აქტივობა A ან აქტივობა B (ლოკალური კოდირება თქვენს კომპიუტერზე თუ კოდირება cloud-ზე).

ᲐᲥᲢᲘᲕᲝᲑᲐ A: შეისწავლეთ პითონი თქვენს კომპიუტერზე

სავარაუდო დრო: 45 წუთი

ᲓᲐᲐᲘᲜᲡᲢᲐᲚᲘᲠᲔᲗ ᲞᲠᲝᲒᲠᲐᲛᲣᲚᲘ ᲣᲖᲠᲣᲜᲕᲔᲚᲧᲝᲤᲐ ᲓᲐ ᲙᲝᲓᲘᲠᲔᲑᲘᲡ ᲐᲞᲘ

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

  1. ნაბიჯი 1: დააინსტალირეთ პითონი. აქ მოცემულია ინსტრუქციების კარგი კომპლექტი Window, Mac ან Linux-ისთვის.
  2. ნაბიჯი 2: დააინსტალირეთ კოდის რედაქტორი და Streamlit. ეს ვიდეო გაჩვენებთ, თუ როგორ დააინსტალიროთ Visual Studio Code და შემდეგ დააინსტალიროთ Streamlit , რომ გაუშვათ ის კოდის რედაქტორიდან.
  3. ნაბიჯი 3: გაუშვით ძალიან მარტივი Streamlit ვებ აპი VS Code-ში ამ ვიდეოს შემდეგ.
  4. იზეიმეთ თქვენი პირველი ვებ აპის შექმნა სკრინშოტის გადაღებით და გაუგზავნეთ იგი თქვენს მენტორს კომენტარით!

ᲐᲥᲢᲘᲕᲝᲑᲐ B: შეისწავლეთ ᲞᲘᲗᲝᲜᲘ CLOUD-ზე

სავარაუდო დრო: 45 წუთი

ᲨᲔᲥᲛᲔᲜᲘᲗ ᲐᲜᲒᲐᲠᲘᲨᲔᲑᲘ ᲓᲐ ᲓᲐᲐᲙᲝᲓᲘᲠᲔᲗ ᲐᲞᲘ

მიჰყევით ვიდეოს, რომ დარეგისტრირდეთ Streamlit.io-სა და Github-ზე. შემდეგ დააკავშირეთ ორი ანგარიში და შექმენით ძალიან მარტივი Streamlit აპლიკაცია.
ვიდეოს ნახვა

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

  • ვებ აპლიკაცია – აპლიკაცია, რომელიც ჰგავს მობილური აპლიკაციას, მაგრამ მუშაობს ინტერნეტ ბრაუზერში და კოდირებულია HTML, CSS და Javascript ან Python-ის გამოყენებით

რეფლექსია

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

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

ᲓᲐᲛᲐᲢᲔᲑᲘᲗᲘ ᲠᲔᲡᲣᲠᲡᲔᲑᲘ

აუცილებლად გამოიყენეთ დოკუმენტაცია და გაკვეთილები Python და Streamlit-თან მუშაობისას. ქვემოთ მოცემულია რამდენიმე კარგი პლატფრომა დასაწყებად.