Как превратить обычный ноутбук Mac в неистового монстра разработки
У вас не слишком старый ноутбук Mac? Хотите узнать, как разрабатывать современные приложения? Тогда вы - цель этой статьи. Я хочу погрузить вас в увлекательный и захватывающий мир программирования приложений!
Примечание: эта статья относится к «основной» ветви. Это с тех пор было переименовано в «главное», потому что слова имеют значение!
Каждый Mac имеет относительно простые возможности программирования. Они спрятаны, чтобы не сбивать с толку людей, которые не хотят программировать. С помощью этих простых инструментов мы можем загрузить более сложные инструменты, которые помогут нам создавать действительно крутые современные приложения.
Но я должен уравновесить твои ожидания. Под «действительно круто» я имею в виду, что ваше приложение может записывать кучу текста в окно браузера или, может быть, загружать изображение и иметь пару кнопок. По сравнению со всеми создателями сайтов, это не очень круто. Чувство удовлетворения заключается в том, что вы сделали это сами и открыли почти неограниченную свободу делать все, что вы хотите, а не только то, что создатель сайта думает, что вы хотите.
Я признаю, что добраться до того момента, когда вы сможете делать сайты такими же красивыми, как и конструкторы сайтов, будет нелегко. И каждая борьба начинается с первого шага. Я намерен помочь вам в этом первом шаге и как можно скорее указать вам правильное направление. После этого вам придется контролировать свое собственное путешествие и то, на чем вы хотите сосредоточиться.
Позвольте мне начать с очень простых вещей, которые вы, вероятно, уже знаете. Внизу каждого Mac находится док-станция; это панель инструментов со значками, в ней должны быть App Store и Launchpad. Я предполагаю, что вы уже знаете, как выполнять базовую навигацию на Mac, открывая приложения из Dock или Launchpad, закрывая их красной кнопкой в верхнем левом углу каждого окна. Я также предполагаю, что вы знаете, как загружать приложения из браузера и устанавливать их в системе.
Самое первое, что вам понадобится, это вторая половина кода разработки от Apple, Xcode. Xcode предназначен для разработки под iOS или iPhone, но в нем есть и другие элементы, которые нам понадобятся для программирования общего назначения. Чтобы найти Xcode, откройте App Store и найдите его.
У меня есть кнопка ОТКРЫТЬ, потому что она у меня уже установлена. Если он еще не установлен, появится сообщение GET. Давай, получи это сейчас. Загрузка и установка может занять некоторое время, поэтому сделайте перерыв на кофе. Это будет первый из многих перерывов на кофе, которые вам придется сделать в ожидании загрузки или сборки.
Второе, что вам нужно будет найти, - это эмулятор терминала. Именно здесь программисты часто набирают текст. Вы можете найти его, открыв панель запуска в Dock и открыв папку «Other».
Щелкните «Терминал», чтобы открыть эмулятор терминала.
Ваш экран может немного отличаться; вы можете установить разные шрифты или цветовые схемы по своему усмотрению. Строка <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 на вкладку «Приложения» слева, и оно должно быть добавлено на панель запуска. Запустите его оттуда, чтобы открыть новое окно Atom.
Нажмите «Открыть проект», и появится раскрывающаяся информация о «проектах» и другая кнопка для открытия проекта. Нажмите эту кнопку, и вы попадете на экран поиска. Выберите папку src, которую мы создали ранее, и она откроет панель слева с папкой src в качестве корня дерева. Собственно, это место, где будут храниться все ваши проекты, а не сам проект.
Следующая кнопка - «Контроль версий с помощью Git и GitHub». GitHub - это место, где вы можете поделиться своим кодом с друзьями. Это что-то вроде Facebook для разработчиков, только менее жутко. У каждого разработчика должна быть учетная запись GitHub, так что это будет нашим следующим шагом.
Если у вас еще нет учетной записи GitHub, перейдите на https://github.com/ и войдите в систему, используя адрес электронной почты, имя пользователя и пароль. Выберите бесплатную учетную запись, ответьте на несколько вопросов и подтвердите свой адрес электронной почты. В конце концов, он приведет вас к стартовому экрану, где вас спросят: Что вы хотите сделать в первую очередь?. Выберите Создать репозиторий, и вы перейдете на экран создания репозитория. Дайте репозиторию имя, описание и скажите ему создать README.md. Сообщите ему, что вы будете создавать проект Node (раскрывающийся список Добавить .gitignore) и дадите ему подходящую лицензию. Это должно выглядеть примерно так:
Я использую лицензию MIT, потому что это звучит очень умно. Нажмите кнопку «Создать репозиторий», и ваш репозиторий будет создан!
Репозиторий GitHub предназначен для того, чтобы вы (или другие люди с учетной записью GitHub) могли легко загрузить весь свой код. Вы можете изменить его, а затем «отправить» обратно на GitHub. Другие люди тоже могут его изменить, но они должны запросить разрешение с помощью «запроса на перенос», чтобы объединить свои изменения обратно в репозиторий.
Итак, как нам загрузить код на наш компьютер? Есть несколько способов, но я сейчас остановлюсь на том, что, на мой взгляд, будет самым простым. Нажмите зеленую кнопку «Клонировать» или «Загрузить» и выберите «Открыть на рабочем столе». Откроется экран с большой фиолетовой кнопкой «Загрузить для macOS». Нажмите эту кнопку, и файл GitHubDesktop.zip загрузится в вашу папку загрузок. Как и в случае с Atom, найдите его и дважды щелкните, чтобы извлечь. Когда он будет извлечен, вы можете перетащить его в Приложения, а затем запустить с панели запуска. Вам будет предложено пройти аутентификацию через 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, чуть ниже кнопки Commit to master. Теперь их должно быть два: тот, который вы только что сделали, и «Начальная фиксация».
Этот многоэтапный процесс означает, что мы можем внести несколько изменений, прежде чем «отправить» его обратно на GitHub. Внесем еще несколько изменений. Я добавил на README.md «Совершенно потрясающую программу для узлов», теперь я должен соответствовать этому. Наконец, мы можем заняться настоящим программированием!
Настоящее программирование
Но сначала мы должны установить несколько языков программирования, и здесь все становится непросто. Где программисты берут языки программирования для своих Mac? Магазин приложений не является хорошим источником. Поэтому они придумали менеджер пакетов, который устанавливает для нас инструменты с открытым исходным кодом. После его установки вы можете установить десятки разных языков программирования. Он называется Homebrew, или сокращенно вари, и вы можете найти инструкции по его установке на https://brew.sh/. Его установщик - это сценарий, который запускается в эмуляторе терминала; вы можете скопировать и вставить команду с их веб-сайта в свой терминал, чтобы запустить ее. Итак, снова откройте свой терминал, скопируйте и вставьте команду установки с веб-сайта Homebrew. Установка займет некоторое время, так что пора сделать еще один перерыв на кофе.
В конце установки он может распечатать некоторые строки с просьбой запустить некоторые другие команды, чтобы все работало. Когда вы устанавливаете что-то, Homebrew делает все возможное, чтобы установить все остальное, что необходимо для определенного элемента, но иногда возникает проблема с курицей и яйцом, и он просит вас запустить некоторые другие команды, а затем повторить попытку. Постарайтесь не расстраиваться, если это кажется бесконечным процессом. Домашнее пиво может быть непростым делом; Если вы зашли в тупик и не можете заставить его работать, оставьте комментарий, и я постараюсь помочь.
Мы собираемся установить Node.js, JavaScript, предназначенный для работы вне браузера. Обычно мы думаем о JavaScript как о языке сценариев браузеров, но с Node.js мы можем запускать процессы из командной строки.
brew install node
Эта установка также установит npm и npx менеджер пакетов и исполнитель пакетов узла, которые мы будем использовать на следующем шаге.
Если ваш эмулятор терминала все еще находится в каталоге 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, что означает ОК. Он также показывает, сколько времени прошло в миллисекундах и сколько символов было возвращено. Браузеры предназначены для отправки команды 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 для перезапуска (подсказка, нажатие стрелки вверх в терминале вызовет ваши предыдущие команды). Теперь обновите ваш браузер.
Обратите внимание, что я сказал «Мой потрясающий сервер» вместо «Мой потрясающий сайт». Это важно, потому что вы строите сервер. Серверы могут выполнять всевозможные трюки, которые сложно или невозможно выполнить в коде браузера. Они могут общаться с базами данных и другими серверами. Они могут помнить, кто вы, с помощью файлов cookie и других государственных механизмов. И они могут динамически создавать HTML.
Давайте подготовим, зафиксируем и отправим все это обратно на GitHub. Вернувшись в редактор Atom на панели Git, вы можете нажать кнопку «Stage All», добавить описание к своей фиксации и нажать кнопку «Commit to master».
Теперь, вернувшись в свое настольное приложение GitHub, вы можете вернуться на Github.
Может показаться странным, что там написано «Никаких местных изменений». Это просто означает, что вы зафиксировали все свои изменения и все готово к «продвижению». Так что нажмите кнопку «Push origin», и весь код вернется на GitHub. В Git есть понятие «происхождение», то есть место, откуда был клонирован репозиторий. Скорее всего, это то место, куда вам захочется подтолкнуть.
Когда вы работаете в команде, вы почти никогда не отдадите свой код мастеру, что мы и делаем. Наиболее распространенный подход - создать «ветвь», зафиксировать ветку, а затем вы можете отправить и создать «запрос на вытягивание» для просмотра членами вашей команды. Как только все одобрят, вы можете объединить ветку обратно в master, и каждый сможет обновить свои локальные репозитории с помощью команды «pull». Но это отдельная статья.
Если вы все еще используете приложение GitHub Desktop, вы можете нажать кнопку «Просмотреть на GitHub», и вы вернетесь на GitHub, где вы увидите все свои изменения, которые хранятся в безопасном месте и доступны для просмотра всему миру.
Возможно, используя экспресс-генератор, который создал весь код, вы почувствовали себя брошенным в середину лабиринта и вынуждены были искать выход. Но когда вы получите первую работу по программированию, ваш начальник, вероятно, не попросит вас написать программу с нуля. Они укажут вам на репозиторий, полный, возможно, плохо написанного кода, и скажут вам добавить новую кнопку на сайт, ничего не нарушая.
Надеюсь, я дал вам всю информацию, необходимую для продолжения обучения программированию. Я не собираюсь публиковать это за платным доступом, чтобы каждый мог узнать. Я надеюсь, что некоторые дети смогут умолять своих родителей собрать достаточно денег, чтобы купить им Mac и изучить полезный навык. Разработка программного обеспечения - это эгалитарное занятие, особенно для женщин и цветных людей. Если вы можете показать, что можете это сделать, вы сможете вырваться вперед.
Я уверен, что некоторым из вас может быть интересно, почему я не даю инструкции для ноутбуков с Windows или ПК, которые намного дешевле. На мой взгляд, Windows обеспечивает высокий уровень устойчивости к разработке. Я работал с Windows большую часть своей 30-летней карьеры, и Mac - намного более простая среда разработки. Программировать достаточно сложно, и доплата за Mac значительно облегчит вам знакомство с программированием. Вы все еще можете делать все, о чем я здесь говорил, на ноутбуке с Windows, но вам, возможно, придется перепрыгнуть через несколько пылающих обручей, чтобы добиться этого.
