Как да превърнете вашия обикновен Mac лаптоп в бушуващо чудовище за разработка
Имате лаптоп Mac, който не е твърде стар? Искате ли да научите как да разработвате модерни приложения? Тогава вие сте целта на тази статия. Искам да ви въведа в забавния и вълнуващ свят на приложното програмиране!
Забележка: тази статия се отнася за клона „master“. Оттогава това е преименувано на „главно“, защото думите имат значение!
Всеки Mac идва с относително прости възможности за програмиране. Те са скрити, за да не объркват хората, които не искат да програмират. От тези прости инструменти можем да заредим по-сложни инструменти, които ще ни помогнат да направим наистина страхотни съвременни приложения.
Но трябва да изравня очакванията ви. Под „наистина страхотно“ имам предвид, че вашето приложение може да напише куп текст в прозорец на браузър или може би да зареди картина и да има няколко бутона. В сравнение с всички създатели на сайтове там, това не е много готино. Чувството на удовлетворение е, че сте го направили сами и сте отворили почти неограничена свобода да правите каквото вие искате, а не само това, което създателят на сайт смята, че искате.
Ще бъде трудно да стигнете до точката, в която можете да правите сайтове толкова красиви, колкото и създателите на сайтове, признавам. И всяка борба започва с първа стъпка. Възнамерявам да ви помогна през тази първа стъпка тук и да ви насоча в правилната посока възможно най-скоро. След това ще трябва да контролирате собственото си пътуване и върху какво искате да се съсредоточите.
Нека започна с някои много основни неща, които вероятно вече знаете. В долната част на всеки Mac е Dock; това е лента с инструменти с икони и трябва да има App Store и Launchpad. Предполагам, че вече знаете как да правите основна навигация на Mac, отваряйки приложения от Dock или Launchpad, затваряйки ги с червения бутон в горния ляв ъгъл на всеки прозорец. Предполагам също, че знаете как да изтегляте приложения от браузър и да ги инсталирате в системата.
Първото нещо, от което ще се нуждаете, е другата половина от кода за разработка от Apple, Xcode. Предполага се, че Xcode е за разработка на iOS или iPhone, но има други елементи, които ще ни трябват за програмиране с общо предназначение. За да намерите Xcode, отворете App Store и го потърсете.
Моят има бутон, на който пише ОТВОРИ, защото вече го имам инсталиран. Ако все още не сте го инсталирали, ще пише GET. Вземете го сега. Изтеглянето и инсталирането може да отнеме известно време, така че отидете на почивка за кафе. Това ще бъде първата от многото паузи за кафе, които ще трябва да правите, чакайки нещата да се изтеглят или изграждат.
Второто нещо, което ще трябва да намерите, е терминалният емулатор. Това е мястото, където програмистите правят голяма част от писането си. Можете да го намерите, като отворите Launchpad в Dock и отворите папката „Други“.
Кликнете върху „Терминал“, за да отворите терминален емулатор.
Вашият екран може да изглежда малко по-различно; можете да зададете различни шрифтове или цветови схеми, както желаете. Редът <username>@<computername> ~ % е вашият команден ред (редът на елементите в реда може да е малко по-различен на вашия терминален емулатор, но всички елементи трябва да са там). Когато ви кажа да изпълните команда или да изпълните от командния ред, вие ще я въведете в прозореца на терминала. Ето няколко команди за изпълнение:
mkdir src cd src
Командата mkdir ще създаде нова директория или папка, където можете да съхранявате неща. командата cd ще премести командния ред в тази директория. Има много команди, които можете да изпълнявате в терминала, но няма да ги разглеждаме всички. След като изпълните горната команда, трябва да видите нещо подобно:
randalkamradt@Fuji ~ % mkdir src randalkamradt@Fuji ~ % cd src randalkamradt@Fuji src %
Забележете, че ~ се е променило на src Този елемент от командния ред е текущата директория, за да ви помогне да следите къде се намирате. ~ е съкращение за вашата „домашна“ директория, обикновено /Users/<username>. Изпълнете командата pwd, за да видите къде се намирате
randalkamradt@Fuji src % pwd /Users/randalkamradt/src randalkamradt@Fuji src %
Това казва, че сте в директория, наречена src, която е в директория, наречена <username>, която е в директория, наречена Users.
Следващото нещо, от което се нуждаете, е редактор. Това е източник на много спорове в света на развитието. Всеки е влюбен в любимия си редактор и да хвърлиш клевета върху нечий редактор определено е „изстрелян“. Но ще изляза на крак и ще направя препоръка. Редакторът Atom е хубав основен редактор без много функции, които може да са объркващи за начинаещите програмисти. Можете да го изтеглите от тук https://atom.io/. Трябва да има бутон за изтегляне; щракването върху него ще изтегли atom-mac.zip в папката ви за изтегляния. Използвайки Finder в Dock, можете да намерите папката си за изтегляния и можете да щракнете двукратно върху atom-mac.zip, за да разширите.
Сега плъзнете приложението Atom в раздела Приложения вляво и това трябва да го добави към вашия Launchpad. Стартирайте го оттам, за да отворите нов прозорец на Atom.
Щракнете върху Отваряне на проект и ще се появи падаща информация за „проекти“ и ще ви даде друг бутон за действително отваряне на проект. Щракнете върху този бутон и той ще ви отведе до екран за търсене. Изберете папката src, която създадохме по-рано, и тя ще отвори прозорец от лявата страна с папката src като корен на дърво. Всъщност това е място, където ще се съхраняват всички ваши проекти, а не самият проект.
Следващият бутон надолу е „Контрол на версиите с Git и GitHub“. GitHub е място, където можете да споделите целия си код с приятелите си. Това е нещо като Facebook за разработчици, само че по-малко страховито. Всеки разработчик трябва да има акаунт в GitHub, така че това ще бъде следващата ни стъпка.
Ако все още нямате акаунт в GitHub, отидете на https://github.com/ и влезте с имейл адрес, потребителско име и парола. Изберете безплатния акаунт, отговорете на няколко въпроса и потвърдете своя имейл адрес. В крайна сметка ще ви отведе до начален екран, където ще ви попита „Какво искате да направите първо?“ Изберете „Създаване на хранилище“ и ще ви отведе до екрана за създаване на хранилище. Дайте на хранилището име, описание и му кажете да създаде README.md. Кажете му, че ще създавате проект Node (падащото меню Add .gitignore) и му дайте подходящ лиценз. Трябва да изглежда подобно на това:
Използвам лиценза на MIT, защото звучи наистина умно. Щракнете върху бутона Създаване на хранилище и вашето хранилище ще бъде създадено!
Целта на хранилището на GitHub е вие (или други хора с акаунт в GitHub) да можете лесно да изтеглите целия си код. Можете да го промените и след това да го „бутнете“ обратно в GitHub. Други хора също могат да го променят, но трябва да поискат разрешение с „заявка за изтегляне“, за да обединят промените си обратно в хранилището.
И така, как да пренесем кода на нашия компютър? Има няколко начина, но ще разгледам това, което според мен ще бъде най-лесният начин в момента. Щракнете върху зеления бутон за клониране или изтегляне и изберете „Отваряне в работния плот“. Това ще ви отведе до екран с голям лилав бутон „Изтегляне за macOS“. Щракнете върху този бутон и той ще изтегли файл GitHubDesktop.zip в папката ви за изтегляния. Точно както направихте с Atom, намерете го и щракнете два пъти, за да го извлечете. Когато бъде извлечен, можете да го плъзнете до Приложения и след това да го стартирате от Launchpad. Ще ви помоли да се удостоверите чрез GitHub и да настроите Git. След това ще ви отведе до екрана на хранилището.
Трябва да намерите хранилището, което току-що създадохте, в десния панел. Изберете го и след това изберете бутона Клониране. Ще ви попита къде да го поставите; Промених това, така че да не влиза в Documents, но отива в директорията src, която създадохме по-рано.
На следващия екран щракнете върху бутона „Отваряне в Atom“ и той ще отвори вашето ново хранилище в новия ви редактор на Atom! Можете да затворите всички начални екрани и да щракнете върху файла README.md в левия панел и можете да видите съдържанието на този файл.
Забележете, че в лентата в долната част от дясната страна ви показва както GitHub, така и Git икона. Това означава, че е наясно, че Git проследява вашите промени (защо се нарича „git“, вижте тук: https://en.wikipedia.org/wiki/Git#Naming). Нека направим промяна и да видим какво ще се случи. Въведете нещо в десния панел и използвайте Command-s, за да запазите (или преминете през менютата, за да запазите). Сега вашият екран трябва да изглежда така:
Файлът README.md е променил цветовете, за да покаже, че е бил променен. Сега можем да извършим промените.
За да извършите промените си, щракнете върху иконата Git в долния десен ъгъл и ще се покаже екран за извършване. Git има концепция за „етапни“ промени, което означава промени, които са готови за извършване. Обикновено бихте инсценирали всичките си промени, ръчното им избиране е предразположено към грешки. Щракнете върху бутона „Етап на всички“ и добавете описание на вашите промени
Сега можете да щракнете върху бутона „Ангажиране с мастер“. Но това все още не връща вашите промени в GitHub. Къде са те? Когато изтеглите Git хранилище, това всъщност е операция „клониране“. Той клонира цялото хранилище във вашето локално пространство. Ако погледнете в левия панел, можете да видите сива директория, наречена .git. В тази директория са файловете, които съдържат всички ангажименти, които някога сте правили към това хранилище. Можете да видите описанията на всички ангажименти обратно в панела Git, точно под бутона Комитиране към мастер. Сега трябва да има две, тази, която току-що направихте, и „Първоначалният ангажимент“
Този многоетапен процес означава, че можем да направим няколко промени, преди да го „преместим“ обратно в GitHub. Нека направим още промени. Добавих „Напълно страхотна програма Node“ към README.md, сега трябва да се справя с това. Най-накрая можем да направим истинско програмиране!
Истинско програмиране
Но първо трябва да инсталираме някои езици за програмиране и тук става трудно. Откъде програмистите получават езици за програмиране за своите Mac? App Store не е добър източник. Така че те излязоха с мениджър на пакети, който инсталира инструменти с отворен код вместо нас. След като го инсталирате, можете да инсталирате десетки различни езици за програмиране. Нарича се Homebrew или накратко brew и можете да намерите инструкции за инсталирането му на https://brew.sh/. Неговият инсталатор е скрипт, който се изпълнява във вашия терминален емулатор; можете да копирате и поставите командата от техния уеб сайт във вашия терминал, за да я изпълните. Така че отворете терминала си отново и копирайте и поставете командата за инсталиране от уебсайта на Homebrew. Инсталирането ще отнеме известно време, така че време за още една пауза за кафе.
В края на инсталацията може да отпечата няколко реда с молба да изпълните някои други команди, за да направите нещата работещи. Когато инсталирате неща, Homebrew прави най-добре да инсталира всичко останало, необходимо за конкретен елемент, но понякога има проблем с кокошка и яйце и ще ви помоли да изпълните някои други команди и след това да опитате отново. Опитайте се да не се разочаровате, ако изглежда като безкраен процес. Homebrew може да бъде трудно; ако сте в задънена улица и не можете да го накарате да работи, оставете коментар и аз ще се опитам да помогна.
Ще инсталираме Node.js, който е JavaScript, предназначен да работи извън браузъра. Обикновено мислим за JavaScript като за скриптовия език на браузърите, но с Node.js можем да изпълняваме процеси от командния ред.
brew install node
Тази инсталация също така ще инсталира мениджъра на пакети на npm и npx Node и изпълнителя на пакети, които ще използваме в следващата стъпка
Ако вашият терминален емулатор все още е в директорията src, изпълнете командата cd GitHub, за да стигнете до директорията, където сме клонирали вашия GitHub проект. Изпълнете командата ls, за да изброите съдържанието на директорията:
randalkamradt@Fuji GitHub % ls myfirstrepository
Трябва да видите myfirstrepository там (или както сте нарекли създаденото от вас хранилище). Ако сте се изгубили, въвеждането на cd само по себе си ще ви отведе до началната директория и след това въведете cd src/GitHub. Сега изпълнете тези команди, за да изградите рамка за прост сървър (имайте предвид, че myfirstrepsitory в първия и втория ред трябва да съвпадат точнос името на директорията, посочена по-горе):
npx express-generator -f myfirstrepository cd myfirstrepository npm install npm start
След npm start трябва да отпечата няколко реда и след това просто да спре. Какво прави? Той чака да обслужи уебсайт на вашия браузър. За да го видите, отворете браузъра си и отидете на http://localhost:3000/.
Надявам се да намерите това за вълнуващо! Ако не, може би програмирането не е подходящо за вас :) Намирам за много задоволително, когато мога да създам нещо, което работи според очакванията.
Върнете се към вашия терминал и можете да видите още няколко реда, отпечатани от нашия сървър:
randalkamradt@Fuji myfirstrepository % npm start > [email protected] start /Users/randalkamradt/src/GitHub/myfirstrepository > node ./bin/www GET / 200 252.652 ms - 170 GET /stylesheets/style.css 200 2.954 ms - 111
Сървърът е HTTP сървър, той отговаря на малък набор от команди, като GET е една от тях. Глаголът GET означава върни ми нещо; в този случай браузърът поиска / и /stylesheets/style.css. И в двата случая сървърът върна статус 200, което означава OK. Той също така показва колко време е отнело в милисекунди и колко знака са върнати. Браузърите са проектирани да изпращат командата GET до хоста на URL адреса, който въвеждате. В този случай localhost е съкращение за „този компютър“
Ако използвате браузъра Chrome, можете да натиснете клавиша Option-Command-i в браузъра, за да отворите конзолата за програмисти. Кликнете върху раздела Елементи, за да видите всички елементи, които се изобразяват от браузъра. Всичко е в йерархична структура и можете да разширявате и свивате частите с малката триъгълна икона до тях. Ще забележите също, че докато задържате мишката върху елементите, те ще се маркират на главния екран:
Тук имам маркиран таг за абзац „Добре дошли в Express“ (<p>). Тази конзола за разработчици ще бъде много удобна, когато създавате по-сложни уебсайтове.
Когато генерирахме всичко това, какво точно направихме? Ако се върнете към вашия Atom редактор, можете да видите:
Цялото зелено в левия панел са новите файлове, които генераторът е създал за вас. Важните са package.json, app.js и папките views, routes, bin/www и public. package.json описва приложението, от какви допълнителни библиотеки се нуждае и как да го стартирате. bin/www е основният JavaScript файл, от който се стартира програмата. Всичко това вероятно изглежда много само за сървър, който показва просто приветствено съобщение на екрана. Но това ще ви даде много място за растеж. Можете да отворите различните файлове и да видите какво има във всеки от тях и след това ще направим някои промени.
Когато браузър отиде на URL адрес, който няма файл в края, сървърът има набор от файлове, които ще се опита да покаже по подразбиране. В повечето случаи те започват с index като index.html. Това е предимно исторически артефакт. В ранните, първите дни на мрежата, index.html беше списък с файлове в определена директория. Но този индекс по подразбиране е оцелял до днес и ако сте проучили достатъчно, ще сте намерили index.js и index.jade. Jade е машина за шаблони, която генерира HTML за нас. Ако погледнете в index.js ще намерите това:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
Това, което прави, е, че всеки път, когато сървърът получи URL адрес без файл или път, той ще се рендира от index.jade съдържанието. Съдържанието на index.jade е
extends layout
block content
h1= title
p Welcome to #{title}
Това е опростен и шаблонен HTML, който ще бъде върнат от GET / заявката към сървъра. Така че променете реда res.render(‘index’, { title: ‘Express’ }); във файла index.js, така че заглавието да е нещо различно от 'Express'.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'My awesome server' });
});
module.exports = router;
Уверете се, че запазвате с Command-s. Сега обратно в прозореца на терминала, въведете Control-c, за да спрете сървъра, и въведете npm start, за да го стартирате обратно. Сега, обратно в браузъра си, опреснете страницата:
Сега вашето приложение е много по-страхотно! Трябва да направите още една промяна и след това ще изпратим всичко обратно в GitHub, където можете да го покажете на приятелите си. В public/stylesheets/style.css можем да дадем на сайта някои страхотни цветове. Кой цвят е по-страхотен от червеното? Променете public/stylesheets/style.css, за да направите целия текст по-голям и по-червен:
body {
padding: 50px;
font: 24px "Lucida Grande", Helvetica, Arial, sans-serif;
color: #FF0000;
}
a {
color: #FF0000;
}
Отново Control-c за спиране и npm start за рестартиране (подсказка, натискането на стрелка нагоре в терминала ще изведе предишните ви команди). Сега обновете браузъра си.
Забележете, че казах „Моят страхотен сървър“ вместо „Моят страхотен сайт“. Това е важно, защото това, което изграждате, е сървър. Сървърите могат да изпълняват всякакви трикове, които са трудни или невъзможни в кода на браузъра. Те могат да общуват с бази данни и други сървъри. Те могат да запомнят кой сте с бисквитки и други държавни механизми. И те могат динамично да създават HTML.
Нека организираме, ангажираме и преместим всичко това обратно в GitHub. Обратно във вашия Atom редактор в панела Git, можете да щракнете върху бутона „Stage All“, да добавите описание към вашия ангажимент и да щракнете върху бутона „Коммит към мастер“.
Сега, обратно във вашето настолно приложение GitHub, можете да се върнете към Github.
Може да изглежда объркващо, че пише „Без локални промени“. Това просто означава, че сте извършили всичките си промени и всичко е готово за „натискане“. Така че щракнете върху бутона „Изпращане на източника“ и това ще върне целия код обратно в GitHub. Git има концепция за „произход“, което е мястото, от което е клонирано хранилището. Най-вероятно това е мястото, до което ще искате да отидете.
Когато работите в екип, почти никога няма да ангажирате своя код за овладяване, което правим ние. Най-често срещаният подход е да направите „клон“, да се ангажирате с клона и след това можете да натиснете и създадете „заявка за изтегляне“, която вашите съотборници да прегледат. След като всички одобрят, можете да обедините клона обратно в главния и всеки може да актуализира своите локални хранилища с команда „издърпване“. Но това е цяла статия сама по себе си.
Ако все още сте в приложението GitHub Desktop, можете да щракнете върху бутона „Преглед в GitHub“ и той ще ви върне обратно в GitHub, където ще видите всичките си промени, съхранени на безопасно място и достъпни за преглед от целия свят.
Може би използването на експресния генератор, който е създал целия код за вас, се е почувствало като да бъдете пуснати в средата на лабиринт и да трябва да намерите изход. Но когато получите първата си работа по програмиране, вашият шеф вероятно няма да ви помоли да напишете програма от нулата. Те ще ви насочат към хранилище, пълно с може би зле написан код, и ще ви кажат да добавите нов бутон към сайт, без да нарушавате нищо друго.
Надявам се, че съм ви дал цялата информация, от която се нуждаете, за да продължите да се учите да програмирате. Няма да публикувам това зад платената стена, така че всеки да може да научи. Надявам се, че някои деца могат да помолят родителите си да съберат достатъчно, за да им купят Mac и да научат полезно умение. Особено за жените и цветнокожите, разработката на софтуер е егалитарен занаят. Ако можете да покажете, че можете да го направите, можете да стигнете напред.
Сигурен съм, че някои от вас може би се чудят защо не предоставям инструкции за лаптопи или компютри с Windows, които са много по-евтини. Според мен Windows осигурява високо ниво на устойчивост на развитие. Работих с Windows през по-голямата част от своята над 30-годишна кариера и Mac е далеч по-простата среда за разработка. Програмирането е достатъчно трудно и доплащането за Mac ще улесни значително въвеждането ви в програмирането. Все още можете да правите всичко, за което говорих тук, с лаптоп с Windows, но може да се наложи да прескочите някои пламтящи обръчи, за да го постигнете.
