Оригінальна публікація: How to Learn Programming – The Guide I Wish I Had When I Started Learning to Code

Лише одна думка про програмування може лякати. Слово «код» загадкове за визначенням. Воно означає технічну форму спілкування, яку розуміють комп’ютери, а не люди.

Багато людей починають вчитися програмувати, вибираючи популярну мову програмування та стрибаючи в неї з головою, не маючи ніякого напряму. Це можуть бути онлайн-курси, навчальні проєкти або випадкова покупка книги на певну тему.

Потенційні розробники рідко починають з детального плану, який окреслює релевантні поняття програмування, мови та інструменти, якими розробники користуються щодня.

У цій публікації я пропоную такий план. Я окреслив 14 кроків, у кожному з яких розповідається про основні поняття, мови чи інструменти, які професійні розробники використовують для написання коду, співпраці та створення професійних проєктів.

Я обрав саме ці кроки на основі особистого досвіду, який охоплює 20 років.

Однією з причин, чому мені знадобилося так багато часу, щоб бути впевненим у собі розробником, є те, що я вивчав конкретні теми без ширшого контексту.

Кожен із кроків обговорює «основи програмування» — те, що, на мою думку, є критично важливим на початку вашого шляху програмування (потрібно принаймні знати, що ці поняття існують).

Останнє зауваження перед планом: звичайно, прочитавши цю публікацію, ви не станете досвідченим програмістом. Мета цієї статті — повідомити вам, що кожна з цих тем існує, і, сподіваюся, дати вам базове уявлення про те, як працює кожна з них, щоб ви могли розвивати її в майбутньому.

14-кроковий план для початківців

  1. Ознайомтеся з архітектурою комп’ютера та основами даних
  2. Вивчіть, як працюють мови програмування
  3. Дізнайтесь, як працює інтернет
  4. Практикуйте основи командного рядка
  5. Розвивайте текстові навички з Vim
  6. Візьміться за HTML
  7. Попрацюйте із CSS
  8. Розпочніть програмувати із JavaScript
  9. Продовжіть програмувати з Python
  10. Розширте свої знання з Java
  11. Відстежуйте свій код, використовуючи Git
  12. Зберігайте дані з базами даних та SQL
  13. Прочитайте про вебфреймворки та MVC
  14. Порозважайтесь з системами керування пакунків

Без зайвих слів, почнемо!

1) Ознайомтеся з архітектурою комп’ютера та основами даних

Сучасні мови програмування чудові тим, що дозволяють нам створювати фантастичні програми, не задумуючись над дрібними деталями (здебільшого).

Це називається абстрагуванням — можливістю працювати з інструментами вищого рівня (у цьому разі мовами програмування), які спрощують та звужують необхідний обсяг наших навичок.

Однак це не означає, що вам не потрібно знати основи того, що виконує код. Розуміння бази допоможе орієнтуватися в робочих розмовах про високе використання центрального процесора та пам’яті.

Отже, ось мінімум основ комп’ютерної архітектури для початку:

Найважливіші частини комп’ютера живуть на мікрочипах (також відомі як інтегральні мікросхеми).

Робота підкрочипів залежить від електричного компоненту, який називається транзистором. Транзистори — це крихітні електричні перемикачі, які в будь-який момент часу вимкнені (0) або увімкнені (1). Один мікрочип може містити мільйони чи мільярди крихітних транзисторів, вбудованих у нього.

Більшість сучасних комп’ютерів мають мікрочип, який називається центральним процесором. Його можна вважати мозком комп’ютера. Він обробляє більшість логічних завдань, які виконує комп’ютер.

Кожен ЦП має так звану систему команд, яка є набором двійкових (нулів і одиниць) команд, які розуміє ЦП. На щастя, нам, розробникам програмного забезпечення, не потрібно турбуватися про це! В цьому сила абстрагування.

Якщо ЦП є логічним центром мозку, корисно також мати пам’ять, щоб зберігати інформацію тимчасово або надовго.

Комп’ютери мають оперативну пам’ять як «робочу пам’ять» (або короткочасну пам’ять) для зберігання інформації, яка активно використовується запущеними програмами.

Оперативна пам’ять складається з набору адрес, які можна використовувати для зберігання бітів даних. У старих мовах (наприклад, C) програмісти можуть напряму працювати з адресами за допомогою вказівників, але це рідко трапляється в сучасніших мовах.

Торкнемось компонента, з яким ви знайомі — жорсткий диск. У нашій аналогії з мозком він означає довготривалу пам’ять. Жорсткий диск — це внутрішній або зовнішній пристрій, на якому зберігаються дані, які мають зберігатися навіть після вимкнення комп’ютера.

Перш ніж перейти до детальнішої інформації про мови програмування, давайте трохи поговоримо про дані. Але що саме ми маємо на увазі під словом «дані»?

На високому рівні ми думаємо про текстові документи, зображення, відео, електронні листи, файли та папки. Це все високорівневі структури даних, які ми щодня створюємо та зберігаємо на своїх комп’ютерах.

Але комп’ютерний чип не знає, що таке «зображення» чи «відео».

З точки зору чипа, усі ці структури зберігаються як довгі послідовності одиниць і нулів. Ці одиниці та нулі називаються бітами.

Біти зазвичай зберігаються в наборі з восьми, відомому як байт. Байт — це послідовність із восьми бітів (наприклад, 00000001, 01100110 або 00001111). Представлення інформації таким чином називається двійковим представленням.

2) Вивчіть, як працюють мови програмування

У попередньому розділі ми згадували, що більшість комп’ютерів покладаються на центральний процесор, а він може розуміти певний набір команд у формі одиниць і нулів.

Теоретично ми могли б написати код, який повідомляє ЦП, що робити, об’єднуючи довгі послідовності одиниць і нулів у формі, яку розуміє ЦП. Команди, записані в двійковій формі, називають машинним кодом.

Не дуже хочеться працювати з таким, правда? Можливо, це так, але я не знаю, оскільки здебільшого використовую мови програмування вищого рівня, як-от JavaScript, Python та Java.

Мова програмування вищого рівня надає набір зрозумілих людині ключових слів, інструкцій та правил синтаксису, які набагато простіші для вивчення, налагодження та роботи.

Мови програмування забезпечують засіб подолання розриву між тим, як людський та комп’ютерний мозок розуміють світ.

Зрештою, код, який ми пишемо, потрібно перетворити у двійкові команди (машинний код), які розуміє ЦП.

Залежно від вибраної вами мови ми кажемо, що ваш код компілюється або інтерпретується в машинний код, який може виконуватися вашим ЦП. Більшість мов програмування містять програму під назвою компілятор або інтерпретатор, яка виконує це перетворення.

Наведу декілька прикладів: JavaScript і Python є інтерпретованими мовами, а Java є компільованою мовою. Те, чи мова компільована/інтерпретована (або якась комбінація обох), впливає на зручність розробника, обробку помилок, продуктивність та інші сфери, але ми не будемо вдаватися в ці деталі тут.

3) Дізнайтесь, як працює інтернет

Яким би типом програмування ви не хотіли займатися, ви зіткнетеся з ситуаціями, коли взаємодія з іншими комп’ютерами буде корисною. Зазвичай це відбувається через інтернет.

Інтернет — це всього лише глобальна колекція підключених комп’ютерів. Іншими словами, це глобальна мережа. Кожен комп’ютер у мережі узгоджує набір правил, які дозволяють їм спілкуватися між собою. Для комп’ютера «розмова» означає передачу даних.

Як ми обговорювали в попередньому розділі, усі типи даних — вебсторінки, зображення, відео, електронні листи тощо — можуть бути представлені як одиниці та нулі.

Тому інтернет можна вважати дуже великим набором комп’ютерів, які можуть передавати одиниці та нулі між собою таким чином, щоб зберегти значення цих даних. Інтернет — це не що інше, як цифрове середовище спілкування.

Якщо інтернет — це просто велика арена для спілкування, давайте визначимо учасників розмови.

По-перше, аналогія: більшість людських розмов вимагають принаймні двох учасників. У більшості випадків одна особа починає розмову, а інша відповідає.

В інтернеті комп’ютер, який ініціює розмову, називається клієнтом. Комп’ютер, який відповідає, називається сервером.

Скажімо, ви відкриваєте браузер і переходите на «www.google.com». У такому разі ваш браузер є клієнтом. Крім того, ви також можете вважати комп’ютер, на якому працюєте, клієнтом.

У більш абстрактному сенсі, ВИ є клієнтом, тому що саме ви ініціюєте розмову. Якщо ввести «www.google.com» у пошуковий рядок і натиснути <ENTER>, ваш браузер надішле запит на початок розмови з одним із комп’ютерів гуглу.

Комп’ютер гуглу називається сервером. Він відповідає, надсилаючи дані, необхідні для відображення вебсторінки гуглу у вашому браузері. І вуаля! Перед вашими очима з’являється вебсторінка гуглу. Усі передачі даних в інтернеті використовують тип відносин «клієнт/сервер».

4) Практикуйте основи командного рядка

Спершу командний рядок може налякати. Його часто показують у фільмах як загадковий чорний екран із незрозумілим текстом, цифрами та символами, що прокручуються. Зазвичай це асоціюється зі злим хакером або геніальним технарем.

Не потрібно бути генієм, щоб використовувати або розуміти командний рядок. Насправді він дозволяє виконувати багато тих самих завдань, які зручно виконувати за допомогою мишки.

Основна відмінність полягає в тому, що він переважно приймає введення через клавіатуру, що може значно пришвидшити процес, коли ви звикнете.

Ви можете використовувати командний рядок, щоб переглядати папки, виводити список вмісту папок, створювати нові папки, копіювати та переміщувати файли, видаляти файли, запускати програми та багато іншого. Вікно, у якому можна вводити команди в командному рядку, називається терміналом.

Давайте пройдемося по короткому посібнику з базових команд навігації, який дасть вам відчуття роботи в командному рядку.

Коли ви відкриваєте термінал, типове перше запитання: «Де я?» Ми можемо використати команду pwd (розшифровується як «Print Working Directory», укр. надрукувати робочу директорію), щоб знайти відповідь. Вона виводить наше поточне розташування у файловій системі, що повідомляє нам, у якій папці ми зараз знаходимося.

Спробуйте самі:

Як використовувати командний рядок

Якщо ви користуєтеся Mac, відкрийте програму Terminal, яка, по суті, є терміналом командного рядка Unix.

Якщо ви використовуєте операційну систему без GUI (графічного інтерфейсу користувача), як-от Linux або Unix, ви повинні бути в командному рядку під час запуску комп’ютера за замовчуванням. Якщо ваша версія Linux або Unix має графічний інтерфейс користувача, вам потрібно відкрити термінал вручну.

У полі введіть pwd і натисніть <ENTER>. Командний рядок надрукує шлях до папки, у якій ви зараз перебуваєте.

За замовчуванням під час відкриття командного рядка активною папкою є домашня директорія користувача, який увійшов у систему. Це можна налаштувати, якщо вам потрібний запуск в іншому місці.

Для зручності посилання на домашню директорію можна вказати за допомогою символа тильди ~. Ми використаємо його в декількох наступних прикладах.

Тепер, коли ми знаємо, у якій папці знаходимося, можна використати команду ls, щоб переглянути вміст поточної директорії. Команда ls означає «List» (укр. список).

Введіть ls та натисніть <ENTER>. Вміст (файли та вкладені папки), який знаходиться в поточній директорії, надрукується на екрані.

Повторно запустіть попередню команду як ls -al і натисніть <ENTER>. Тепер ми отримаємо більше деталей про вміст директорії, включно з розмірами файлів, датами змін та дозволами на файли.

Дефіс у попередній команді дозволяє встановити певні позначки, які змінюють поведінку команди. У цьому випадку ми додали прапорець -a, який відображатиме весь вміст директорії (включно з прихованими файлами), а також прапорець -l, який відображає додаткові відомості про файли.

Потім ми можемо створити нову папку за допомогою команди mkdir, що означає «Make Directory» (укр. створити директорію). Нижче ми створюємо нову папку під назвою «testdir».

Введіть mkdir testdir та натисніть <ENTER>. Потім введіть ls та натисніть <ENTER>. Ви повинні побачити свою нову директорію у списку.

Щоб створити декілька вкладених директорій одночасно, використайте прапорець -p, аби створити цілий ланцюжок директорій: mkdir -p directory1/directory2/directory3

Командний рядок не такий корисний, якщо ми залишаємося лише в одному місці, тому давайте навчимося переглядати різні директорії у файловій системі. Ми можемо зробити це за допомогою команди cd, яка означає «Change Directory» (укр. змінити директорію).

Спершу введіть cd testdir та натисніть <ENTER>. Потім введіть pwd та натисніть <ENTER>. Зауважте, що тепер вивід показує, що ми перебуваємо в директорії «testdir», вказаній в команді cd. Ми перегорнули вперед!

Введіть cd .. та натисніть <ENTER>. .. вказує командному рядку перейти назад до батьківської директорії.

Потім введіть pwd та натисніть <ENTER>. Зауважте, що тепер вивід показує, що ми повернулись у початкову директорію. Ми перегорнули назад!

Тепер ми навчимось створювати порожній файл у поточній директорії.

Введіть touch newfile1.txt та натисніть <ENTER>. Ви можете використати команду ls, щоб побачити, що новий файл створено в поточній директорії.

Тепер ми скопіюємо цей файл з однієї папки в іншу за допомогою команди cp.

Введіть cp newfile1.txt testdir та натисніть <ENTER>. Тепер використайте команди ls та ls testdir, щоб переконатися, що новий файл досі існує в поточній директорії та скопійований до директорії «testdir».

Ми також можемо переміщувати файли, а не копіювати, за допомогою команди mv.

Введіть touch newfile2.txt та натисніть <ENTER>, щоб створити новий файл. Потім введіть mv newfile2.txt testdir та натисніть <ENTER>, щоб перемістити файл до папки «testdir».

Використайте команди ls та ls testdir, щоб підтвердити, що файл було переміщено до папки «testdir» (він більше не повинен з’являтися в місці, де був створений, оскільки його було переміщено, а не скопійовано).

Команду mv також можна використовувати для перейменування файлів.

Для цього введіть touch newfile3.txt та натисніть <ENTER>, щоб створити новий файл. Потім введіть mv newfile3.txt cheese.txt та натисніть <ENTER>, щоб оновити ім’я файлу. Використайте ls, щоб підтвердити, що файл було перейменовано.

Зрештою, ми можемо видалити файли та папки за допомогою команди rm.

Введіть rm cheese.txt та натисніть <ENTER>, щоб вилучити файл. Використайте ls, щоб підтвердити, що файл було вилучено.

Введіть rm -rf testdir та натисніть <ENTER>, щоб вилучити директорію «testdir» та її вміст. Використайте ls, щоб підтвердити, що директорію було вилучено.

Зверніть увагу, що під час вилучення директорій потрібно використовувати прапорці -rf. Це призведе до видалення папки та всього її вмісту.

5) Розвивайте текстові навички з Vim

Наразі ми розглянули основи командного рядка та побачили декілька прикладів того, як ми можемо працювати з файлами без мишки.

Хоча тепер ми знаємо, як створювати, копіювати, переміщувати, перейменовувати та видаляти файли з командного рядка, ми не бачили, як редагувати вміст текстових файлів у терміналі.

Робота з текстовими файлами в терміналі важлива, оскільки комп’ютерний код — це звичайний текст, збережений в організованому наборі файлів.

Звісно, ми могли б використовувати текстовий редактор типу Microsoft Word (або, швидше за все, спеціалізовані редактори коду, як-от Sublime чи Atom), щоб писати та редагувати наш код, але це не обов’язково. Термінал часто є найзручнішим місцем для написання та редагування коду, оскільки він зазвичай уже відкритий для виконання команд!

Існує декілька чудових текстових редакторів, створених спеціально для цієї мети, і я рекомендую вивчити основи одного з них під назвою Vim.

Vim — один з найстаріших текстових редакторів, перевірений часом. Vim розшифровується як "VI iMproved" (укр. покращений Vi), оскільки він є наступником інструменту Vi.

Як уже згадувалося, Vim — це текстовий редактор, створений для запуску безпосередньо в терміналі, тому нам не потрібно відкривати окреме вікно для роботи чи використовувати мишку взагалі. Vim має набір команд і режимів, які дозволяють нам зручно створювати та редагувати текстовий вміст, використовуючи лише клавіатуру.

Vim має деяку криву навчання, але завдяки практиці ви отримаєте навички, які принесуть дивіденди протягом вашої кар’єри.

Vim встановлений на багатьох операційних системах за замовчуванням. Щоб перевірити, чи він встановлений на вашому комп’ютері, відкрийте командний рядок і введіть vim -v.

Якщо Vim відкриється у вашому терміналі та покаже версію, все готово! Якщо ні, вам потрібно встановити його у своїй системі. (Зауважте, що ви можете вийти з Vim, ввівши :q! і натиснувши <ENTER>). Для додаткової інформації про встановлення Vim див. https://www.vim.org/.

На мою думку, найшвидший і найпростіший спосіб навчитися користуватися Vim — скористатися вбудованим підручником VimTutor. Щоб запустити його, переконайтеся, що Vim встановлено у вашій системі, відкрийте командний рядок, введіть vimtutor і натисніть <ENTER>.

Це настільки хороший підручник, що я не хочу витрачати час, намагаючись пояснити щось тут. Тому запустіть VimTutor прямо зараз! Зустрінемось у наступному розділі.

Якщо у вас залишились сили після того, як ви завершили роботу з VimTutor, перегляньте 7 команд Vim, які значно покращать вашу продуктивність, коли почнете працювати з Vim.

6) Візьміться за HTML

HTML (скорочено для HyperText Markup Language, укр. мова розмітки гіпертексту) можна вважати скелетом вебсторінки. Він визначає структуру сторінки, вказуючи елементи, які мають відображатися, і порядок відображення.

Кожна вебсторінка, яку ви коли-небудь відвідували у своєму браузері, має певний код HTML, пов’язаний з нею. Коли ви відвідуєте вебсторінку, то вебсервер, на якому розміщена вебсторінка, надсилає деякий HTML вашому браузеру. Потім ваш браузер читає його та відображає для вас.

Більшість вебсторінок містить досить стандартний набір вмісту, включно із заголовком, текстовим вмістом, посиланнями на зображення, навігаційними посиланнями, верхніми та нижніми колонтитулами тощо. Уся ця інформація зберігається у вигляді HTML, який визначає структуру сторінки.

Потрібно пам’ятати, що HTML технічно не є мовою програмування, хоча часто можна почути «код HTML».

Як ми побачимо пізніше, інші мови програмування дозволяють писати код, який щось робить (наприклад, послідовне виконання набору інструкцій). HTML нічого не робить. Ми не запускаємо та не виконуємо HTML. HTML просто зберігається у файлі й чекає, поки його буде надіслано веббраузеру, який відобразить його кінцевому користувачеві.

По суті, HTML — це просто дані, які визначають, як має виглядати вебсторінка, і не більше.

Отже, як написати HTML? HTML використовує стандартний набір тегів (по суті, просто мітки) для визначення доступних елементів, з яких складається вебсторінка. Кожен тег визначається за допомогою ламаних дужок.

Наприклад, тег заголовка визначений як <title>Заголовок моєї сторінки</title>, а тег абзацу визначений як <p>Довільний текстовий вміст.</p>.

Кожен елемент HTML складається з початкового та кінцевого тегів. Початковий тег — це лише мітка тегу між ламаними дужками, наприклад:

<tagname>

Це відкриє новий тег HTML. Кінцевий тег, по суті, такий самий, але потрібно використати косу риску після першої ламаної дужки, щоб позначити його як кінцевий тег:

</tagname>

Будь-який текст між двома тегами є вмістом, який відображатиметься на сторінці.

Розглянемо пару найпоширеніших тегів. Першим є тег <html>. Він визначає початок сторінки HTML. Відповідний тег </html> (зверніть увагу на косу риску) визначає кінець сторінки HTML. Будь-який вміст між цими тегами буде частиною сторінки.

Другим є тег <head>. Він визначає додаткову інформацію, яку браузер використовуватиме для розуміння сторінки. Більшість вмісту цього тегу не відображається користувачеві. Відповідний тег </head> визначає кінець розділу HEAD.

Раніше ми бачили тег <title>. Він визначає заголовок сторінки, який браузер відображатиме у вкладці браузера. Цей тег потрібно розмістити всередині розділу <head>...</head>.

Наступним є тег <body>. Увесь вміст цього тегу становить основний вміст вебсторінки. Поєднання цих чотирьох тегів виглядає приблизно так:

<html>
    
    <head>
        <title>Заголовок моєї сторінки</title>
    </head>
        
    <body>
        <p>Довільний текстовий вміст.</p>
    </body>

</html>

Наведений вище фрагмент HTML представляє звичайну вебсторінку із заголовком і одним абзацом як основний вміст.

Цей приклад торкається того, про що ми не згадали в попередньому розділі. Теги HTML можна вкладати один в одного. Це означає, що теги HTML можна розміщувати всередині інших тегів HTML.

HTML надає багато інших тегів, щоб надати багатий набір вмісту вебкористувачам. Ми не будемо розглядати їх детально, але нижче наведено короткий список для довідки:

  • <p>: абзац тексту з нового рядка
  • <h1>: заголовок сторінки
  • <h2>: заголовок розділу
  • <hx>: де х є числом між 3 та 6 для менших заголовків
  • <img>: зображення
  • <a>: посилання
  • <form>: форма, яка містить поля для введення
  • <input>: поле для введення інформації, зазвичай у межах форми
  • <div>: поділ вмісту, який використовується для групування кількох інших елементів з метою розподілу інтервалів
  • <span>: ще один елемент групування, але використовується для обгортання текстових фраз в інший елемент, зазвичай для застосування певного форматування лише до певної частини текстового вмісту

7) Попрацюйте із CSS

Вебсторінка без CSS (Cascading Style Sheets, укр. каскадні таблиці стилів) — це те саме, що торт без крему. Він виконує свою функцію, але не виглядає привабливо!

CSS дозволяє пов’язувати властивості стилю (колір фону, розмір шрифту, ширина, висота тощо) з нашими елементами HTML.

Кожна властивість стилю вказує браузеру відобразити бажаний ефект на екрані. Як і HTML, CSS технічно не є мовою програмування. Він не дозволяє виконувати дії, а просто дозволяє додавати стилі до скелету HTML.

Поглянемо, як асоціювати стилі CSS з нашими елементами HTML. Цей пазл складається з трьох фрагментів:

Селектор CSS: використовують для ідентифікації елемента або елементів HTML, до яких ми хочемо застосувати стиль.

Назва властивості CSS: ім’я певної властивості стилю, яку ми хочемо додати до відповідних елементів HTML.

Значення властивості CSS: значення властивості стилю, яке ми хочемо надати.

Ось приклад того, як ці елементи поєднуються, щоб задати колір і розмір шрифту абзацу:

p {
  color: red;
  font-size: 12px;
}

Розпочнемо з початку, ще до фігурних дужок. Сюди йде селектор CSS. У цьому разі ним є літера p, яка позначає тег <p> (абзац). Це означає, що стилі всередині фігурних дужок будуть застосовані до всіх тегів <p> на вебсторінці.

Перейдемо до того, що міститься у фігурних дужках — до стилів, які ми хочемо застосувати до цільових елементів.

Тут ми знаходимо пари властивостей і значень CSS, розділених двокрапкою. Властивості (у нашому разі «color» та «font-size») знаходяться ліворуч, а їхні значення (у нашому разі «red» та «12px») — праворуч. В кінці кожної пари властивість/значення потрібно ставити крапку з комою.

Ви, мабуть, розумієте, як це працює. Наведені вище фрагменти коду повідомляють браузеру використовувати червоні літери розміром 12 пікселів для всього тексту, розміщеного в тегах <p>.

Отже, як сторінка HTML дізнається про стилі CSS? Введіть HTML-тег <link>. Зазвичай стилі CSS створюються в окремих файлах (файли .css). Це означає, що нам потрібно якось імпортувати їх до наших файлів HTML, щоб браузер знав, що стилі існують.

Елемент <link> існує не просто так. Ми розміщуємо елементи <link> всередині розділу <head> файлів HTML, що дозволяє нам вказати зовнішні файли CSS для імпорту:

<head>

    <title>Заголовок моєї сторінки</title>

    <link rel="stylesheet" type="text/css" href="/home/style.css">

</head>

У цьому прикладі ми імпортуємо стилі CSS, визначені атрибутом href (у цьому разі файл /home/style.css).

У наступних 3 розділах ми (нарешті) зануримося в інші мови програмування!

Ми загально розглянемо JavaScript, Python та Java, а також пройдемось по основних концепціях програмування, спільних для трьох мов. Ми порівняємо мовні особливості та приклади коду, щоб ви зрозуміли основи усіх трьох мов.

8) Розпочніть програмувати із JavaScript

Розпочнемо з відповіді на таке запитання: якщо ми можемо використовувати HTML, щоб створити структуру вебсторінки та CSS, щоб вона виглядала красиво, навіщо нам JavaScript?

Технічно, він непотрібний. Якщо ми задоволені статичним сайтом, який просто існує і виглядає гарно, ми можемо використовувати лише HTML і CSS.

Ключовим словом є «статичний». Якщо ми хочемо додати до наших вебсторінок динамічні функції, як-от зміна вмісту та складніші взаємодії з користувачем, потрібно використовувати JavaScript.

Що таке JavaScript?

Що ж таке JavaScript? JavaScript — це мова програмування, яка була створена спеціально для вебсайтів та інтернету. Як згадувалось в другому розділі, більшість мов програмування компільовані або інтерпретовані, а програми зазвичай виконуються самостійно.

JavaScript є дещо унікальним у цьому плані, оскільки він розроблений для виконання безпосередньо у браузерах. Це дозволяє писати код, який представляє набори дій, які виконуватимуться на вебсторінках, щоб зробити сайти набагато динамічнішими.

Ви можете писати код JavaScript у текстових файлах із розширенням .js або всередині тегів <script> одразу в HTML.

Протягом багатьох років JavaScript здебільшого використовували всередині браузерів. Але проєкт Node.js змінив цю парадигму, створивши окреме середовище JavaScript, яке може працювати де завгодно.

Замість того, щоб перебувати у браузері (тобто на стороні клієнта), Node.js можна встановити локально на будь-який комп’ютер, щоб дозволити розробку та виконання коду JavaScript. Ви також можете встановити Node на вебсерверах, що дозволить вам використовувати JavaScript як backend для програм, а не як простий frontend веббраузера.

Ми розібралися із фоновою інформацією, а зараз зануримось в основи мови JavaScript.

Змінні та присвоєння у JavaScript

Змінні являють собою, мабуть, найбільш фундаментальну основу програмування. Змінна — це просте ім’я або заповнювач, які використовують для позначення певного значення.

Слово «змінна» означає, що збережене значення може змінюватися під час виконання програми.

Ви можете використовувати змінні для зберігання чисел, текстових рядків, списків та інших структур даних, про які ми поговоримо пізніше.

Усі мови програмування використовують змінні, але відрізняється синтаксис.

Змінні корисні, оскільки ми можемо посилатися на їхні значення в коді. Це дає нам змогу перевіряти їхні значення за потреби та виконувати різні дії залежно від того, як змінюється значення змінної.

У JavaScript ми оголошуємо змінні за допомогою ключового слова let, ось так: let x;.

Це оголошує x як змінну, яку ми можемо використати у коді. Зауважте, що ми додали крапку з комою в кінці рядка. У JavaScript (та багатьох інших мовах) крапку з комою використовують, щоб визначити кінець кожної інструкції.

Ми створили змінну x, а отже можемо присвоїти до неї значення за допомогою знаку рівності, який також називають оператором присвоєння: x = 10;.

Ми присвоїли число 10 до змінної під назвою x. Тепер щоразу, коли ми використовуємо x у нашому коді, значення буде змінено на 10.

Оголошення та присвоєння можна виконати в одному рядку, як показано нижче:

let x = 10;

Типи даних у JavaScript

У попередньому розділі ми зберегли значення цілого числа у змінній під назвою x. Ви також можете зберігати десяткові числа, також відомі як числа з плаваючою комою. Наприклад, ми можемо написати let x = 6.6;.

Різні типи значень, які ми можемо зберігати в змінних, називають типами даних. Поки що ми бачили лише числові типи даних (цілі числа та числа з плаваючою комою), але це лише мала частина. Ми також можемо зберігати текстові дані у змінних.

У термінології фрагмент тексту називається рядком. Ми можемо зберегти рядкове значення в нашій змінній x, узявши його в одинарні або подвійні лапки:

let x = 'Привіт!';

let y = "Здоровенькі були!";

Далі обговоримо булевий тип даних. Булеві можуть містити лише два значення: true або false, і вони повинні бути малими літерами. У JavaScript ключові слова true і false використовують спеціально як значення для булевих змінних:

let x = true;

let y = false;

Зауважте, що значення true та false не оточені лапками. Якщо взяти їх у лапки, то значення будуть рядками, а не булевими.

Ми часто використовуємо булеві значення, щоб контролювати потік програм в умовних інструкціях (if/else), про які ми дізнаємося далі.

Інструкції контролю потоку програм у JavaScript

Тепер ми маємо певне розуміння змінних і основних типів даних у JavaScript, тому давайте глянемо на те, що ми можемо з ними робити.

Змінні не такі вже й корисні, якщо ми не можемо сказати нашому коду щось робити з ними. Ми можемо змусити наші змінні щось робити за допомогою інструкцій.

Інструкції — це спеціальні ключові слова, які дозволяють виконувати дії у коді, часто на основі значення визначеної змінної. Інструкції дозволяють визначати логічний потік наших програм, а також виконувати багато корисних дій, які визначатимуть роботу наших програм.

Інструкція if / else

Першою ми розглянемо інструкцію if. Інструкція if дозволяє виконувати певні дії лише тоді, коли бажана умова істинна. Ось як це працює:

let x = 10;

if ( x > 5 ) {
    console.log('X є БІЛЬШИМ за 5!');
} else {
    console.log('X є МЕНШИМ за 5!');
}

Ми визначили змінну під назвою x та встановили значення на 10. Потім йде наша інструкція if. Після ключового слова if ми маємо набір дужок, який містить умову для оцінення, у цьому разі x > 5. Ми визначили, що x дорівнює 10, тому умова в прикладі є істинною.

Оскільки інструкція в дужках істинна, код у фігурних дужках буде виконано та ми побачимо рядок «Х є БІЛЬШИМ за 5!» на екрані. (Ми не обговорювали console.log(), тому наразі знайте, що значення в дужках виводиться на екран).

У цьому ж прикладі ми використали інструкцію else. Вона дозволяє виконати певний код, якщо умовою є false.

Цикли while

Наступною інструкцією ми розглянемо цикл while. Цикли дозволяють повторювати блок коду бажану кількість разів, не копіюючи та не вставляючи код знову і знову.

Припустимо, нам потрібно надрукувати речення на екрані 5 разів. Ми могли б зробити так:

console.log('Надзвичайно важливе повідомлення!');
console.log('Надзвичайно важливе повідомлення!');
console.log('Надзвичайно важливе повідомлення!');
console.log('Надзвичайно важливе повідомлення!');
console.log('Надзвичайно важливе повідомлення!');

Добре, що у цьому разі лише 5 повідомлень, але як щодо 100 чи 1000? Нам потрібен кращий спосіб багаторазового повторення фрагментів коду, і цикли дозволяють це робити. У термінології багаторазове повторення частини коду називається ітерацією.

Наступний цикл while продовжуватиме виконувати блок коду в ньому, доки зазначена умова є істинною:

let x = 1;

while ( x <= 100 ) {
    
    console.log('Надзвичайно важливе повідомлення!');
    
    x = x + 1;
    
}

У цьому прикладі ми ініціалізуємо x значенням 1. Потім ми пишемо цикл while. Схоже до інструкції if, ми додаємо умову в дужках. У цьому разі умовою є x <= 100. Умова буде true, доки x менше чи дорівнює 100.

Далі ми вказуємо блок коду для виконання у фігурних дужках. Спочатку ми друкуємо наше повідомлення на консоль. Потім ми збільшуємо x на 1.

На цьому етапі цикл намагається повторно оцінити умову, щоб побачити, чи вона досі true. Тепер змінна x має значення 2, оскільки її було збільшено під час першого запуску циклу. Умова досі true, оскільки 2 менше за 100.

Код у циклі повторюється, доки x не збільшиться до 101. Значення x більше за 100, тому тепер умова false і код у циклі припиняє виконання.

Тег <script> у HTML

Ми ознайомились із JavaScript, тому обговоримо, як додавати файли коду JavaScript до сторінки HTML. Це можна зробити за допомогою тегу HTML, який ми ще не обговорювали — <script>.

Він схожий до елемента <link>, який ми використовували для додавання файлів CSS до HTML, але елемент <script> призначений спеціально для JavaScript.

Скажімо, ми зберегли один з попередніх прикладів JavaScript, який обговорювали у файлі під назвою customscript.js у тій же папці, що наш файл HTML. Ми можемо додати цей файл JavaScript до нашого HTML, додавши наступний тег HTML до розділу <head>...</head>:

<script type="text/javascript" src="customscript.js"></script>

Це завантажить код JavaScript з файлу, який буде виконано, коли вебсторінка відображається у браузері.

Опанувавши навички JavaScript, ви можете спробувати створити деякі з цих проєктів для початківців.

9) Продовжіть програмувати з Python

Ми вивчили основи JavaScript, і було б корисно перейти до іншої мови програмування — Python.

Багато мов програмування надають подібний набір функціональності, включно зі змінними, арифметичними операціями, інструкціями if/else, циклами та функціями.

Корисно побачити, як різні мови програмування реалізують подібні функціональності. Поняття зазвичай дуже схожі, але синтаксис (спосіб написання коду) відрізняється.

Що таке Python?

Спочатку ми розглянемо трішки основної інформації про Python. Як і JavaScript, Python є мовою програмування високого рівня, яка надає перевагу легкості розробки над швидкістю виконання.

На мою думку, Python є однією з найкращих мов для початківців. Синтаксис чистий та зрозумілий, і це дуже популярна мова у сферах відкритого коду та бізнесу.

Раніше ми говорили про компільовані та інтерпретовані мови. Python є інтерпретованою мовою. Щоразу, коли ми хочемо запустити програму Python, інтерпретатор Python активно обробляє код і виконує його на вашій машині.

Це відрізняється від компільованих мов, у яких ми спочатку використовуємо компілятор для обробки коду в більш оптимізовану форму (яку можна виконати), а пізніше виконуємо його.

На відміну від JavaScript, Python не створений для запуску безпосередньо у браузерах. Python було створено, щоб бути зручною мовою сценаріїв — мовою, яку можна використовувати для написання коду довільних завдань, які зазвичай виконуються на локальному комп’ютері користувача.

Код Python можна виконати на будь-якому комп’ютері, на якому встановлено інтерпретатор Python. Це досі широко використовувана мова сценаріїв, яка також широко використовується для обробки даних і програм зі сторони сервера.

Змінні та присвоєння у Python

Як і JavaScript, Python дозволяє визначати змінні. У Python можна просто використати знак рівності, щоб створити та присвоїти змінні за потреби:

x = 10
y = "сир"

Між синтаксисом для визначення змінних у Python і JavaScript існує дві відмінності. У Python нам не потрібні ключове слово let та крапка з комою в кінці кожного рядка.

Python використовує набір синтаксичних правил, заснованих на пробілах і відступах. Це усуває потребу в символах закінчення рядка, як-от крапка з комою, і блокування області за допомогою фігурних дужок.

Типи даних у Python

У Python також є набір типів даних, які ми можемо присвоїти до змінних. До них належать цілі числа, числа з плаваючою комою (десяткові дроби), рядки, списки та словники.

Цілі числа, числа з плаваючою комою та рядки, по суті, такі ж, як і їхні аналоги в JavaScript, тому ми не будемо повторювати цю інформацію.

Булеві у Python дуже схожі до булевих у JavaScript, але ключові слова True та False потрібно писати з великої літери:

x = True

y = False

Інструкції контролю потоку програм у Python

Як і JavaScript, Python має схожий набір інструкцій контролю потоку, але синтаксис трішки відрізняється.

Інструкція if / else

Ось еквівалент для прикладу if/else, який ми раніше бачили у JavaScript:

x = 10

if ( x > 5 ):
    print('X є БІЛЬШИМ за 5!')
    
else:
    print('X є МЕНШИМ за 5!')

Ми визначили змінну під назвою x і встановили для неї значення 10, а потім використали інструкцію if. Оскільки умова в дужках оцінюється як True, код із відступом після інструкції if буде виконано, і ми побачимо рядок «X є БІЛЬШИМ за 5!» на екрані.

Ми використовуємо функцію print(), щоб надрукувати інформацію на екрані у Python.

Також зверніть увагу на наведену вище інструкцію else, яка виведе на екран альтернативний рядок, якщо умова False.

Є дві основні відмінності між наведеним вище кодом Python і кодом JavaScript, який ми бачили раніше. Python використовує двокрапку замість фігурних дужок, щоб позначити початок блоку інструкції if.

Крім того, відступ функції print() насправді має значення у Python. У JavaScript відступ або пробіл між операторами не мають значення, оскільки JavaScript ідентифікує блоки коду за допомогою фігурних дужок і визначає кінець оператора за допомогою крапки з комою. Але в цьому прикладі Python не має ні крапки з комою, ні фігурних дужок!

Це через те, що Python насправді використовує пробіли та символи нового рядка для визначення кінця інструкцій і блоків коду.

Двокрапка повідомляє інтерпретатору Python, що починається блок if. Щоб інтерпретатор Python знав, що він є частиною блоку if, код, який утворює блок if, повинен мати відступ (1 табуляція = 4 пробіли). Наступний рядок без відступу означатиме кінець блоку if.

Цикли while

Наступними ми розглянемо цикли у Python. Цикл while у Python по суті такий ж, як і в JavaScript, але з синтаксисом Python:

x = 1

while ( x <= 100 ):
    print('Надзвичайно важливе повідомлення!')
    x = x + 1

print('Цього немає в циклі!')

Відмінності у циклі while для Python та JavaScript полягають у тому, що:

  • ми вилучили let, коли визначали змінну;
  • ми видалили крапку з комою в кінці рядка;
  • ми замінили фігурні дужки на двокрапку;
  • ми переконалися, що код у циклі має відступ із табуляцією.

Ми надрукували додаткове повідомлення поза циклом, щоб показати, що рядки коду без відступів не є частиною циклу та не повторюватимуться.

Для пайтоністів-початківців я рекомендую глянути до Дзену Python, який є списком із 20 практичних правил для написання коду Python.

А коли ви навчитеся основам, спробуйте створити деякі з цих проєктів Python для початківців.

10) Розширте свої знання з Java

Ми попрацювали з декількома мовами програмування вищого рівня, тому зробимо крок назад та розглянемо Java.

На відміну від JavaScript і Python, які виконують вихідний код у реальному часі за допомогою інтерпретатора, Java є компільованою мовою. Це означає, що використовується компілятор (замість інтерпретатора) для перетворення вихідного коду Java у форму, зрозумілу комп’ютеру.

Більшість компіляторів генерують один або декілька виконуваних файлів, які складаються з машинного коду та готові до запуску в певній операційній системі та апаратній платформі, для якої вони були компільовані.

Але Java дещо особлива тим, що вона компілює вихідний код Java у проміжну форму під назвою байткод. Це відрізняється від машинного коду, який створює більшість інших скомпільованих мов. Байткод Java призначений для виконання чимось, що називається віртуальною машиною Java (JVM).

JVM можна вважати програмою, яку ви встановлюєте на своєму комп’ютері та яка дозволяє запускати програми Java, виконуючи байткод Java. Коли люди говорять про те, «чи інстальовано Java на комп’ютері», вони зазвичай запитують, чи інстальовано JVM на комп’ютері.

JVM виконує подібну функцію до інтерпретаторів, які ми обговорювали в попередніх розділах. Але замість вихідного коду (який зберігається у файлах .java) як вхідні дані, він приймає скомпільований байткод.

Перевага цього налаштування в тому, що JVM може виконувати байткод, скомпільований на певних операційних системах і платформах, на будь-якій платформі.

Уявіть, що у нас є файл коду Java, який був написаний і скомпільований у байткод на комп’ютері під керуванням операційної системи Windows. JVM може виконати (тобто програма може бути запущена) цей байткод на будь-якій платформі, включно з Windows, Mac OS, Linux тощо.

Це не стосується більшості скомпільованих виконуваних файлів іншими мовами програмування, які можуть виконуватися лише в середовищі, для якого вони були скомпільовані.

Змінні та присвоєння у Java

Однією з основних відмінностей між Java та мовами, які ми вже розглянули (Python і JavaScript), є те, що Java — це статично типізована мова.

Це означає, що типи даних наших змінних повинні бути відомими та встановленими під час компіляції програми.

Кожного разу, коли ми створюємо змінну в коді Java, нам потрібно вказати тип даних цієї змінної (наприклад, ціле число, рядок тощо). Це називається оголошенням змінної.

Щойно ми оголосили тип даних змінної, вона може зберігати лише цей тип даних протягом усього виконання програми.

Це дуже відрізняється від JavaScript і Python, де типи даних встановлюються під час виконання програми, також відомого як середовище виконання. Тому такі мови, як JavaScript і Python, називаються динамічно типізованими: ми не вказуємо типи даних змінних у вихідному коді та можемо легко перепризначити змінну будь-якому типу на льоту.

У Java ми створюємо змінні, використовуючи цей синтаксис:

Datatype name = value;

Datatype — це тип даних, які зберігатиме змінна (наприклад Integer, String тощо). name представляє назву змінної, яку ми визначаємо, щоб її можна було використати в нашому коді. value — це значення, яке ми присвоюємо змінній. Зауважте, що, як і в JavaScript, усі інструкції Java закінчуються крапкою з комою.

Типи даних у Java

Вбудовані типи даних у Java називаються примітивними типами даних і вони здаватимуться схожими до тих, які ми бачили у мовах високого рівня, як-от Python та JavaScript. Головними примітивними типами є:

  • ціле число int: зберігає цілі числа від −2,147,483,648 до 2,147,483,647;
  • число з плаваючою комою float: зберігає числа з плаваючою комою від -3.4x10^38 до -1.4x10^-45 для від’ємних значень та від 1.4x10^-45 до 3.4x10^38 для додатних;
  • булеве bool: зберігає одне з двох булевих значень (true або false).

Зауважте, що є декілька інших примітивних типів (short, long, byte та double), які ми не розглядатимемо, оскільки вони використовуються не так часто, як інші. Ось як ми ініціалізуємо ці типи даних:

Ціле число: int x = 100;

Число з плаваючою комою: float pi = 3.14;

Символ: char середнійІніціал = 'T';

Булеве: bool єЛюдиною = true;

Хочу повторити, що коли тип даних змінної оголошено, ця змінна може містити лише значення вказаного типу даних.

Наприклад, буде видана помилка, якщо наша програма спробує зберегти символ всередині змінної, яка була оголошена як ціле число. Ми не можемо призначити символ «S» цілочисловій змінній x у попередньому прикладі.

Наступним ми обговоримо рядок — послідовність символів та чисел, представлених у вигляді текстових даних.

Рядки в Java є непримітивним типом даних, тобто вони складаються з менших частин. Щоб оголосити рядкову змінну, ми використовуємо тип даних String і пишемо присвоєне значення в подвійних лапках:

String name = "Harry Potter";

Інструкції контролю потоку програм у Java

Як і JavaScript, Java використовує фігурні дужки для визначення блоків коду інструкцій if, циклів та функцій. Ми розглянемо ті самі інструкції контролю програми, що й у попередніх розділах, і оновимо приклади використання синтаксису Java.

Інструкція if / else

Ось інструкція if/else у Java, яка віддзеркалює приклади попередніх розділів:

int x = 10;

if ( x > 5 ) {
    System.out.println("X є БІЛЬШИМ за 5!");
} else {
    System.out.println("X є МЕНШИМ за 5!");
}

Цей базовий приклад if майже ідентичний до JavaScript. Єдина відмінність полягає в тому, що ми оголосили тип даних x як int і використовуємо System.out.println() замість console.log(), щоб надрукувати повідомлення.

Цикли while

Тепер перейдемо до циклів у Java. Оскільки синтаксис Java і JavaScript досить схожий, цикл while у Java по суті такий же, як і в JavaScript:

int x = 1;

while ( x <= 100 ) {

    System.out.println("Надзвичайно важливе повідомлення!");
    
    x = x + 1;
    
}

Цей цикл while надрукує вказане повідомлення 100 разів.

На цьому наші розділи про певні мови програмування завершуються. Можливо, інформація повторювалась, оскільки ми розглянули ті самі поняття трьома мовами, але, сподіваюся, це допомогло закріпити основні ідеї.

Тепер ми завершимо публікацію декількома проміжними темами, які ви б не почали вивчати одразу.

Ми поговоримо про важливий інструмент для співпраці під назвою Git. Потім ми навчимося зберігати та отримувати доступ до даних у базі даних. Далі ми коротко торкнемося фреймворків веброзробки і систем керування пакунків.

11) Відстежуйте свій код, використовуючи Git

Git — це найпопулярніша система керування версіями (VCS) на сьогодні. Вона дозволяє декільком розробникам спільно працювати над програмним забезпеченням. У цьому розділі ми дізнаємося, що таке Git, як він працює та як використовувати його основні команди.

Перш ніж перейти одразу до Git, розберемо деякі загальні поняття проєктів.

Повний набір директорій і файлів, які складають програмний проєкт, називається кодовою базою. Корінь проєкту — папка найвищого рівня в дереві директорій проєкту. Файли коду можна розміщувати одразу в кореневій папці проєкту або організувати папки в декілька рівнів.

Коли кодова база буде готова до тестування або впровадження, її можна вбудувати в програму, яка працюватиме на вашому комп’ютері. Цей процес може складатись з одного або декількох кроків, які перетворюють код, написаний людьми, у виконуваний файл, який можна запускати на мікросхемах обробки вашого комп’ютера.

Щойно код вбудований, ваша програма готова до запуску у конкретній операційній системі (наприклад, Linux, Mac OS або Windows).

З часом розробники оновлюють код проєкту, додаючи нові функції, виправляючи помилки, впроваджуючи оновлення безпеки тощо. Загалом розробники можуть внести ці зміни в проєкт програмного забезпечення трьома способами:

  1. додати нові файли та папки до проєкту
  2. відредагувати наявні файли та папки
  3. видалити наявні файли та папки

Оскільки проєкт розвивається та додаються нові функції, кількість файлів та папок (а також кількість коду в них) зростає. Великі проєкти можуть розростатися до сотень тисяч файлів, які містять мільйони рядків коду.

Щоб підтримати таке зростання, зазвичай збільшується кількість розробників у великих проєктних групах. Великі проєкти можуть мати сотні чи навіть тисячі розробників, які працюють одночасно.

Тут виникає питання: «Як усі розробники (які, можливо, розкидані по всьому світу) відстежують код свого проєкту таким чином, що можуть працювати разом над одним проєктом?»

Командам розробників потрібен спосіб відстежувати, які саме зміни було внесено до коду, які файли чи папки було змінено та хто вніс кожну зміну. Кожен розробник також повинен мати можливість отримувати оновлення від усіх інших розробників.

Цей процес називається керуванням версіями. Розробники використовують спеціальні інструменти під назвою системи керування версій (VCS), щоб відстежувати, керувати та ділитись версіями проєктів. Сьогодні до найпопулярніших систем контролю належать:

  • Git
  • Subversion (SVN)
  • Mercurial (Hg)

Однак корону отримує Git. Це, безумовно, найпопулярніша VCS, яка використовується державними, комерційними та відкритими спільнотами по всьому світу.

Git є основою популярних вебплатформ VCS, як-от GitHub та Bitbucket. Git є важливим інструментом будь-якого розвиненого розробника, який варто додати до своїх навичок.

Основні команди Git

Git створює та зберігає інформацію про наші проєкти в так званому репозиторії Git. Репозиторій Git — це проста прихована папка на вашому комп’ютері, яку Git використовує для зберігання даних про файли коду у проєкті.

Зазвичай кожен проєкт, над яким ми працюємо, має власний репозиторій Git для зберігання інформації, пов’язаної з цим проєктом. Таким чином код, пов’язаний з різними проєктами на одному комп’ютері, можна відстежувати окремо.

Існує два основних способи створення репозиторію Git на вашому комп’ютері. Перший — створити абсолютно новий репозиторій Git в наявній папці у вашій файловій системі.

Для цього відкрийте командний рядок, створіть нову папку в зручному місці (наприклад, на робочому столі) та прогляньте її:

cd ~/Desktop

mkdir testgit
 
cd testgit/

Ми створили та проглянули нову папку, і тепер можемо ініціалізувати новий репозиторій Git за допомогою команди:

git init

Ви повинні бачити схожий вивід:

Initialized empty Git repository in /Users/me/Desktop/testgit/.git/

Усі команди Git, які ми будемо запускати, починаються зі слова git, після якого йде пробіл, а потім — конкретна команда Git, яку ми хочемо виконати. Іноді ми додаємо прапорці та аргументи після команд Git.

Команда git init створює прихований файл під назвою .git у поточній директорії. Ця папка є репозиторієм Git, який ми згадували вище. Ви можете побачити це, виконавши команду ls -al.

Другий спосіб отримати репозиторій Git на комп’ютері — завантажити його з іншого місця (наприклад, Bitbucket або GitHub).

Bitbucket і Github — це вебсайти, які дозволяють людям розміщувати проєкти з відкритим кодом, які можна завантажити на свій комп’ютер.

Якщо ви знайдете цікавий проєкт на Bitbucket або GitHub, ви побачите кнопку «Clone». Ця кнопка надасть вам команду та URL, які можна скопіювати та вставити у терміналі командного рядка. Це виглядатиме приблизно ось так:

git clone https://jacobstopak@bitbucket.org/jacobstopak/baby-git.git

Команда git clone завантажує репозиторій з вказаного URL в нову папку на вашому комп’ютері. URL може бути вебадресою, як у прикладі вище, або SSH URL, як показано нижче:

git clone git@bitbucket.org:jacobstopak/baby-git.git

Після запуску команди git clone ви повинні побачити нову папку, у якій є всі файли та папки, з яких складається завантажений файл.

Наступною ми розглянемо команду git add <filename.ext>. Команда git add використовується для того, щоб повідомити Git, які файли потрібно відстежувати та для того, щоб додавати зміни вже відстежуваних файлів до staging area.

Щойно нові або змінені файли було організовано, їх можна закріпити до репозиторію за допомогою команди git commit -m "Commit message". Це збереже зміни в усіх файлах у репозиторії Git.

Команди git status та git log корисні для перегляду поточного стану робочої директорії та історії комітів вашого проєкту.

Ми розглянули лише верхівку айсберга. Git має багато інших корисних команд, з якими варто ознайомитись.

12) Зберігайте дані з базами даних та SQL

База даних — це програма, спеціально розроблена для ефективного зберігання, оновлення, отримання та видалення великих обсягів даних. Одним словом, її можна вважати контейнером таблиць.

Ви напевно працювали з таблицями в Microsoft Excel. Таблиця — це простий набір стовпців і рядків, які містять дані. Ми можемо створити таблиці в базі даних для зберігання інформації, необхідної нашим програмам для належної роботи.

Незалежно від того, чи ми пишемо програми на JavaScript, Python, Java чи іншій мові, ми можемо сказати нашим програмам взаємодіяти з базами даних за потреби.

Ми можемо отримати дані з бази даних, щоб показати їх нашим користувачам на вебсторінці. Ми можемо прийняти вебформу реєстрації від користувача та зберегти інформацію цього користувача в базі даних для подальшого використання.

Наші програми можуть взаємодіяти з базами даних у реальному часі, коли події відбуваються в нашій програмі. Для цього більшість баз даних розмовляють мовою SQL, скорочено від Structured Query Language (укр. мова структурованих запитів).

SQL — це мова програмування, створена для баз даних. Вона дозволяє повідомляти бази даних про те, що їм потрібно робити.

Фрагмент коду SQL називається запитом. Ми можемо писати запити SQL, щоб отримати дані, які нам потрібні в певний час, або вставити нові дані в певну таблицю. Грубо кажучи, існує два основних типи запитів SQL: запит на вибірку та запит на зміну.

Запит на вибірку просто отримує дані з бази даних, щоб ми могли їх побачити та використовувати. Він не змінює дані бази взагалі.

А ось запит на зміну додає нові дані до таблиці, оновлює наявні дані або видаляє їх. У цьому розділі ми навчимося писати деякі базові запити на вибірку.

Перед написанням запиту нам потрібно знати що ми запитуємо! Традиційні бази даних містять таблиці, що складаються зі стовпців і рядків. Коли ми пишемо запит на вибірку, нашою метою зазвичай є отримання підмножини цих рядків і стовпців.

Скажімо, у нас є таблиця під назвою ОСОБА з 4 стовпцями, ІМ’Я та ПРІЗВИЩЕ. Ми можемо використати наступний запит, щоб обрати всі дані лише зі стовпця ІМ’Я:

SELECT ІМ’Я FROM ОСОБА;

Ключове слово SELECT повідомляє базу даних, що ми хочемо отримати дані. Після нього йде назва стовпця (ІМ’Я), який ми хочемо отримати.

Потім ми використовуємо ключове слово FROM, щоб повідомити базі даних, з якої таблиці ми хочемо отримати дані (у цьому разі з таблиці ОСОБА). Зауважте, що всі команди SQL закінчуються крапкою з комою.

Однією з найпоширеніших вимог до даних є фільтрування, тобто обмеження набору результатів на основі заданої умови.

Наприклад, ми хочемо вибрати рядки з таблиці ОСОБА лише для людей з іменем ВАСИЛЬ. Ми можемо застосовувати фільтри в запитах SQL, використавши ключове слово WHERE:

SELECT * FROM ОСОБА WHERE ІМ’Я = 'ВАСИЛЬ';

Цей запит повертає всі стовпці з таблиці ОСОБА, оскільки ми використали зірочку * у пункті SELECT, а не вказали конкретні стовпці. Буде отримано лише рядки таблиці ОСОБА, де значення ІМ’Я встановлено як ВАСИЛЬ.

Поговоримо ще про сортування. Буває багато випадків, коли ми хотіли б бачити результати наших запитів, відсортовані в певному порядку. Для цього можна використати пункт ORDER BY:

SELECT *
FROM ОСОБА
ORDER BY ПРІЗВИЩЕ;

Це поверне всі стовпці в таблиці ОСОБА, відсортовані в алфавітному порядку за прізвищем.

За замовчуванням результати будуть відсортовані в порядку зростання, від А до Я. Ми можемо додати додаткове ключове слово ASC або DESC, щоб вказати сортування в порядку зростання чи спадання:

SELECT *
FROM ОСОБА
ORDER BY ПРІЗВИЩЕ DESC;

13) Прочитайте про вебфреймворки та MVC

Часто ми пишемо код для дуже поширених типів програм. Вебпрограми (або вебзастосунки) — це програми, для роботи яких потрібен інтернет. Вебзастосунки є одними з найпоширеніших типів програмних додатків.

По суті, вебзастосунок є функціональнішою та сильнішою версією вебсайту. Більшість вебзастосунків реалізовують деякий backend, який знаходиться на вебсервері та виконує логіку за лаштунками для підтримки функціональності програми.

До поширених мов програмування для backend належать Python, Java та JavaScript.

Деякі функції, загальні для більшості вебзастосунків:

  • забезпечення зручного способу динамічної зміни вмісту вебсторінок;
  • виконання безпечної автентифікації користувача через сторінку входу;
  • надання надійних функцій безпеки програми;
  • читання та запис даних у базу даних.

Вебфреймворк — це набір бібліотек коду, які містять загальні функції, які використовують усі вебзастосунки. Вебфреймворки надають розробникам систему для створення своїх програм, не турбуючись про написання коду для багатьох закулісних завдань, спільних для всіх вебзастосунків.

Нам потрібно використовувати лише ті частини фреймворку, які відповідають потребам нашого вебзастосунку.

Наприклад, якщо нам не потрібно підключатися до бази даних у певному вебзастосунку, ми можемо просто ігнорувати функції бази даних і використовувати інші функції, які нам потрібні.

Ми досі маємо повну можливість налаштовувати вебсторінки, які складають нашу програму, потік користувачів і бізнес-логіку. Вебфреймворк можна вважати набором інструментів програмування, який ми можемо використовувати для створення вебзастосунків.

Кожна мова програмування, яку ми розглянули в цій статті, має один або декілька популярних вебфреймворків, які зараз використовуються. Це чудово, тому що це дає командам розробників гнучкість використовувати фреймворк мови, якою вони володіють найкраще.

Java має Spring Framework, який став особливо зручним завдяки Spring Boot. Python має Django Framework. У JavaScript є середовище виконання Node.js із декількома варіантами фреймворку, включно з Express.js і Meteor.js. Усі ці фреймворки безкоштовні та мають відкритий код.

14) Порозважайтесь з системами керування пакунків

Останньою темою, яку ми розглянемо в цьому посібнику, є cистема керування пакунками. Залежно від контексту пакунок може являти собою окрему програму, готову для встановлення на комп’ютері, або зовнішню бібліотеку коду, яку ми хочемо використати в одному з наших програмних проєктів.

Оскільки наші програми часто залежать від цих зовнішніх бібліотек коду, ми називаємо їх залежностями.

Система керування пакунками — це програма, яка допомагає нам підтримувати залежності системи або проєкту. Під «підтримкою» ми маємо на увазі встановлення, оновлення, перелік і видалення залежностей за потреби.

Залежно від контексту, системи керування пакунками, які ми обговоримо, можуть бути використані або для підтримки програм, які ми встановили на наших операційних системах, або для підтримки залежностей проєкту.

Mac OS X: Homebrew

Homebrew є найпопулярнішою системою керування пакунків для операційної системи Mac OS X. Вона пропонує зручний спосіб встановлення, оновлення, відстеження, створення списку та видалення пакунків і програм на вашому Mac.

Багато програм, які можна встановити за допомогою завантажених файлів .dmg, також можна завантажити та встановити за допомогою Homebrew.

Ось приклад встановлення пакунка wget через Homebrew:

brew install wget

Linux: Apt and Yum

Оскільки Linux побудовано навколо командного рядка, не дивно, що системи керування пакунків є способом встановлення програм за замовчуванням.

Більшість стандартних варіантів Linux постачаються з вбудованою системою керування пакунків. Advanced Package Tool (APT) — це власний менеджер пакетів для дистрибутивів Linux на базі Debian і Ubuntu. Yellowdog Updater, Modified (YUM) — це власний менеджер пакетів для дистрибутива RedHat Linux.

Ось приклад встановлення Vim за допомогою APT:

sudo apt-get install vim

Та за допомогою Yum:

sudo yum install vim

JavaScript: Node Package Manager (NPM)

Ми побачили, як працюють деякі менеджери пакунків на рівні операційної системи, тому давайте подивимося на деякі менеджери пакунків для мови програмування. Це може допомогти керувати бібліотеками програмного забезпечення, від яких залежить багато наших проєктів. Node Package Manager (NPM) встановлено за замовчуванням разом із Node.js.

Одна відмінність між NPM і попередніми системами полягає в тому, що NPM можна запускати в локальному або глобальному режимі. Локальний режим використовується для встановлення пакунка лише в межах конкретного проєкту (чи директорії), над яким ми працюємо, а глобальний режим використовується для встановлення пакунка в системі.

За замовчуванням пакунок встановлюється локально, однак можна використати прапорець -g, щоб встановити пакунок глобально:

npm install request -g

Python: Pip

Python також має систему керування пакунків під назвою Pip. Можливо, Pip уже встановлено у вашій системі, оскільки він постачається з останніми версіями Python. Pip дозволяє легко встановити пакунки з Python Package Index за допомогою команди pip install <package-name>:

pip install requests

Java: Apache Maven

Apache Maven (зазвичай просто Maven) — це безкоштовний набір інструментів із відкритим кодом, який містить керування залежностями.

Maven здебільшого використовують для проєктів Java, хоча він підтримує й інші мови. Використання Maven дещо складніше, але завдяки йому можна багато чого зробити, тому ми не будемо вдаватися в деталі.

Висновок

У цій публікації я ознайомив вас з важливими поняттями та інструментами, аби ви мали загальне уявлення про програмування.

Ми розглянули такі теми, як інтернет, декілька мов програмування, системи керування версіями і бази даних, а головною метою було зрозуміти, як вони поєднуються разом.

Наступні кроки

Якщо вам сподобалась ця публікація, я написав книжку «Coding Essentials Guidebook for Developers» з 14 розділами, які охоплюють обговорені нами теми.

У книжці я детальніше розглядаю ці 14 тем, тому це може бути хорошим ресурсом для вас, щоб перевірити, чи ви запам’ятали щось з публікації.

Можливо, вас притягнула певна мова програмування, інструмент чи концепція. У такому разі я закликаю глибше зануритися в цю сферу, щоб продовжити навчання.

Якщо у вас є будь-які питання, пропозиції чи зауваження щодо книжки, я хотів би почути вас на jacob@initialcommit.io.