Путь через джунгли – «быстрый» легкий (и совершенно свободный) способ достижения полезных результатов в его мире

Если вы новичок в этом и хотите выяснить, что он может предложить – возможно, вы все еще в школе или старше и рассматриваете смену карьеры, или даже на пенсии и просто любопытно – что угодно – вы можете чувствовать себя довольно смущенным По идеальным джунглям инструментов, технологий и техник, с которыми вы столкнулись. Что еще хуже (хотя это является частью притяжения и очень актуальна для этой конкретной истории), вы, вероятно, начинаете понимать, что это джунгли, которые развиваются с головокружительной скоростью. С чего начать?

Этот пост рекомендует маршрут, который вы можете рассмотреть следующим образом. Если вы просто заинтересованы в том, чтобы узнать, как работают современные ИТ -технологии, будьте уверены, что то, что я должен показать, вы будете интересны. Если вы просто ищете работу, к сожалению, я не уверен, что маршрут сделает вас сразу трудоустройство, но, по крайней мере, вы сможете разумно рассказать о технологии и смогут продемонстрировать что -то, что вы создали, используя Это. Однако, если вы чувствуете себя предпринимательским и готовы застрять, я могу гарантировать, что это маршрут, способный подавать серьезное применение ИТ.

Давайте начнем с прояснения конечной цели этого пути и причины, по которым я рекомендую. Предполагается, что вы хотите сделать что -то полезное, а не просто выучить сумку с новыми трюками, поэтому давайте согласимся с тем, что основная цель – разработать программное обеспечение, которое будет читать некоторую информацию в компьютер, обрабатывать его, а затем отобразить его на экране. Кроме того, как только вы создали свой шедевр, вы хотите, чтобы кто -нибудь, где угодно, мог его использовать.

В мире есть множество способов достижения этой простой задачи, и мы все были бы измотаны, если бы я попытался пройти через них подробно. Поэтому позвольте мне просто заявить, что, по моему опыту, простым вариантом является использование интернет -браузера, такого как Chrome или Safari в качестве «Launchpad» для вашего приложения. Это может показаться странным, но вот причина: вы хотите, чтобы ваше приложение было доступно пользователям в любом месте мира, используя любое мыслимое устройство – мобильный телефон, ноутбук, планшет, настольный компьютер или что -то еще. Браузеры предоставляют отличный способ изолировать ваше приложение от различий в аппаратных и операционных системах. Кроме того, они дают вам сложную и очень практичную среду для поддержки логики вашего приложения. Наконец, когда дело доходит до обмена приложением и его данных с вашими пользователями, браузеры уже расположены в Интернете, в конце концов, вся цель, в конце концов, состоит в том, чтобы облегчить обмен информацией.

Таким образом, маршрут, который я предлагаю,-это маршрут, который приводит к тому, что сейчас известно как «WebApp», кусок программного обеспечения, который активируется просто введением «имя» веб-приложения в веб-браузер. Это веб -приложение будет способно поддерживать постоянные хранилища данных («базы данных») и обеспечит безопасность для них через функцию Signon. Технология, которую он использует, может не подходить для разработки серьезно сложных, «высоких ставок», которые должны быть разработаны и поддерживаются крупными командами инженеров -программистов (подумайте о приложениях Amazon или Facebook), но это, безусловно, очень серьезный подход Подходит для широкого класса полезных приложений и одного, который предлагает четкий путь к более масштабным операциям.

Итак, что вам нужно знать, чтобы следовать этому пути? В этом «кратком» посте я могу только набросить шаги в общих чертах. Но каждый шаг предназначен для получения позитивной доходности и привести вас без ошибок к вашей цели. О, и когда я сказал, что это будет легко, я уверен, что вы узнаете, что я шучу. Ничто не стоит того, что никогда не бывает легко, и здесь есть чему поучиться. Но будьте уверены, что я буду заботиться, вам придется учиться только на каждом этапе, что вам строго нужно знать, и что также будет полезно для вас в долгосрочной перспективе. Я в равной степени полон решимости сохранить количество концепций и технологий, которые вам необходимо освоить до абсолютного минимума. Давай тогда – я гарантирую, что это будет весело!

Вот список вещей, которые вам нужно знать:

• HTML: Язык с надписью гипертекста – «Язык», используемый для рассказа, как форматировать данные на экране
• IDE – интерактивная среда разработки – инструмент редактирования, который вы используете для создания кода – VSCODE – это рекомендуемый инструмент.
• JavaScript – язык программирования, используемый для добавления логики в сценарий HTML.
• Инструменты для браузера – инструменты, используемые для отладки программы HTML/JavaScript.
• Google Firebase – компонент Google Cloud Platform – среда, которая позволяет вам обмениваться вашим приложением и его данными в Интернете.

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

HTML (язык наценки гипертекста)

Вы разрабатываете программное обеспечение для запуска в веб -браузере. Веб -браузеры работают по простым кодам «разметки», давая указания о том, как отображать встроенный в них текст – простое расположение, но способное обеспечить чрезвычайно мощные эффекты. Эти коды разметки довольно громоздки, принимая форму пар «тегов», которые окружают ваш текст и указывают как положение, так и внешний вид. Вы можете создать образец, просто введя инструкции в текстовый файл в простом редакторе, таком как блокнот Microsoft. Попробуйте это простое упражнение

Введите следующую строку в ваш любимый текстовый редактор (например, утилита блокнота Microsoft), а затем сохраните ее в виде файла с расширением HTML (например, “myfirstapp.html”):

Hello there

Теперь используйте инструмент хранения файлов вашего компьютера (Microsoft File Explorer или что-то еще), чтобы найти файл и запустить его в веб-браузере вашего компьютера по умолчанию. Браузер должен ответить в свою очередь, отображая экран, отображая слова «Привет». Поздравляю, вы написали свое первое веб -приложение (хотя и никто Но вы можете увидеть, но мы исправим это позже).

IDE (интерактивная среда разработки)

Возможно, вы просто понимаете, что разработка вашего веб -приложения будет включать в себя много печати. Ваше веб -приложение, действительно, вероятно, потребует от вас ввести сотни, возможно, тысячи строк «кода». Вы могли бы, как в примере выше, просто ввести эти строки в простом направлении текста, но это было бы плохой идеей. Браузеры являются неумолимыми зверями, и любые ошибки правописания в вашем коде приведут к впечатляющему отказу ваших намерений. Вам нужен текстовый редактор, который будет следить за кодом во время его ввода, который будет отформатировать и выделять его способами, которые помогают вашей контролю над его структурой, и, возможно, даже спасет вас часть набора текста, внося полезные предложения. Многочисленные IDE доступны, но я рекомендую, это Microsoft VSCODE – бесплатно для установки и очень широко используется. Я использовал несколько других в свое время, но в целом это было лучшее и сэкономил мне бесконечные проблемы. Еще раз есть чему поучиться, но Microsoft предоставляет отличную онлайн -документацию

JavaScript

Вам понадобится язык, чтобы представлять логику вашего веб -приложения – инструкции, которые получают информацию от ваших пользователей, а затем обрабатывают и развертывают ее полезными способами. Нативный язык, который управляет веб -приложением, называется JavaScript, и вы найдете это легко изучать и чрезвычайно мощные в действии. Его особая способность в качестве языка браузера заключается в том, что он способен как читать, так и записывать в структуры данных, описанные в разделах HTML вашего веб -приложения – в простых терминах, он может как читать, так и писать непосредственно на экран. Это возможно, потому что структурированный характер сценария HTML означает, что браузер может построить «модель» макета экрана. Эта модель принимает форму структуры дерева, называемой моделью DomainObject (DOM). Внутри DOM различные ветви и листья все индивидуально адресованы JavaScript. Вот пример. Возьмите файл myfirstapp.html, введенный выше, и отредактируйте его следующим образом:

Hello there

Если вы теперь повторно запустите файл до того, как пообедали (чтобы быть конкретным, до 12 часов дня), вывод теперь появится синим цветом, а не по умолчанию, как в оригинальной версии. После обеда вывод появится в красном. Поздравляю, вы закодировали свой первый «интеллектуальный» WebApp.

Линии между HTML <Скрипт> и Теги - ваш первый бит кода JavaScript. Строка, запускающая «переменную», содержащую объект «даты» «», представляющая время выполнения (на самом деле точное время в миллисекундах с 1 января 1970 года UTC), а ссылка .gethours - это «метод», который извлекает из объекта даты число число От 0 до 23, представляющих час дня вашего конкретного пробега. Вы, вероятно, заметили, что

Вы узнаете гораздо больше об этих терминах, «объект», «метод», «функция», «стиль» и т. Д., По мере того, как вы начинаете справляться с тонкостями JavaScript и DOM. Их совсем не трудно освоить, и они быстро станут для вас второй натурой.

Инструменты системы браузера

Неизбежно, ваш код HTML и JavaScript будет содержать ошибки - макеты экрана не будут предоставлять эффекты, которые вы намеревались (чтобы выразить это мягким!), И ваша логика будет неисправной. Вам понадобится инструмент, который поможет вам исследовать эти проблемы.

Хорошей новостью является то, что почти каждый браузер поставляется со встроенным «отладчиком», который позволяет вам проверять определения макета экрана и выполнение инструкций JavaScript. Например, в случае Google Chrome, отладчика называется «инструменты разработчика» и доступ к ним просто щелкнут правой кнопкой мыши на экране браузера и выбирая «осмотр» из всплывающего окна, выявленного. Плохая новость заключается в том, что в первом знакомстве окно отладчика кажется непостижимым, но позвольте мне заверить вас, что с опытом этот инструмент, вероятно, является лучшим элементом дизайна пользователя-интерфейса, с которым вы когда-либо сталкивались. Это делает отладку веб -приложения позитивным восхищением. Описание этого подробно займет некоторое время, но, возможно, я смогу быстро дать вам вкус ее силы.

Отладчик способен осмотреть многие аспекты внутренних участников веб -приложения - макет, сетевой активности, производительность и т. Д. - но самым простым, чтобы продемонстрировать, является его способность контролировать работу кода JavaScript. Для этого запустите свой myfirstapp.html снова и запустите отладчик, как указано выше. Теперь нажмите на вкладку с надписью «Источники» и обратите внимание, как код приложения отображается на центральной панели. Теперь создайте «точку останова» на первой строке кода ( dourofday = ... ), нажав слева слева от строки - теперь следует отобразить синий цвет. Что это сделало, так это «инструмент» приложения, готовый к отладке. Когда мы перезапустим файл, браузер будет искать нашу точку останова и остановит выполнение, когда он достигнет его. Затем мы можем начать проверять, какие значения были назначены переменным программы.

Таким образом, чтобы увидеть это в действии, повторите файл и обратите внимание, как в браузере теперь отображается сообщение «приостановлена для отладки» и наблюдать, как вся точка отладки теперь выделена синим. Смотрите скриншот ниже:

На этом этапе мы, вероятно, заинтересованы в значении, которое было назначено переменной «часовой день», но обратите внимание, что, хотя приложение приостановилось на Hourofday = .. Строка, на самом деле еще не выполнившей его, нажмите на значок «Шаг над следующей функцией» в сообщении «Приостановлена для отладки» (тот, который на крайнем рам if (Hourofday <11 .... line. Теперь, если вы мышитесь на поле часа дня, вы увидите появление подсказки, отображая его значение. Нажмите на значок «Шаг над следующей функцией» снова, и вы увидите управление проходом к соответствующему document.getElementById (.. строка, как выбран Test if Нажмите еще раз, и вы увидите цвет сообщения «Hello There» (в настоящее время отображается в черном по умолчании) на соответствующий цвет.

Когда я впервые увидел это в действии, я был буквально безмолвным - это было похоже на то, как открыть заднюю часть швейцарских часов и поиск впервые, что вы можете осмотреть его сложные работы!

Google Firebase

Это «большой». До сих пор все, что я описал, было связано с разработкой в вашей собственной «локальной» среде с использованием файлов и инструментов на вашем собственном компьютере. Но, как и было обещано, цель состоит в том, чтобы сделать ваше веб -приложение для всех в любом месте. В принципе, вы можете превратить свой собственный компьютер в устройство, которое достигнет этого конца, но процесс был бы дорогим и чрезвычайно сложным. В прошлом вы обычно имели бы дело с этим, открыв учетную запись с «интернет -поставщиком» (ISP) - коммерческой операцией, такой как Hostpapa или 123REG. Ваш интернет-провайдер в обмен на определенную сумму ваших с трудом заработанные деньги предоставит хранилище на компьютере «сервер» для «размещения» вашего веб-приложения и назначить ему уникальный «URL» (по вашему выбору) как «адрес» Средства, к которым ваши пользователи могут получить к нему доступ.

Пока все хорошо, но я пообещал вам «путь джунглей», который был бы свободен. До недавнего времени я бы сказал, что не было много альтернативы оплате денег провайдеру, но несколько лет назад Google, у которого довольно опытный послужной список разработки интеллектуальных идей (чтобы выразить это мягким), взял на себя компанию называется Firebase и включила функциональность их продукта в облачную платформу Google. Чтобы подняться на погоню, Firebase позволяет вам «развернуть» локально разработанный веб-приложение в облако под URL, который Google предоставит бесплатно. Конечно, в будущем, если ваше веб -приложение внезапно становится дико популярным, Google Уилл Зарядка, но к этому времени вы, конечно, уже будете богаты (ну, мы все можем мечтать!)

Но в Firebase есть гораздо больше, чем просто свободный URL. Мы до сих пор не говорили много об данных, но почти наверняка, что ваш веб -приложение должно быть связано с какой -либо «базой данных» - надежным хранилищем, где пользователи могут безопасно вносить свои собственные данные и из которых они также могут получить доступ Данные, хранящиеся вашим веб -приложением. В прошлом ваш интернет -провайдер снова был рад предоставить эти средства базы данных в рамках своего пакета обслуживания. Но на данный момент вы бы обнаружили, что это было только начало совершенно новой главы о несчастье. Для начала вам пришлось бы выучить язык, используемый для указания и доступа к базе данных - скорее всего, что -то, что называется SQL (Languaged Query Language). Затем, как будто этого было недостаточно, вы обнаружите, что вам также нужно выучить новый язык программирования для запуска команд SQL. SQL можно получить только непосредственно из программного обеспечения, работающего на сервере, и, угадайте, что для практических целей вы, вероятно, окажетесь в направлении такого языка, как PHP или Python, а не к JavaScript, который вы изучали. Многие люди сдались бы на данный момент.

Немного истории здесь - но это актуально, потому что она устанавливает то, что я должен сказать дальше в контексте. Если бы мы решили написать WebApp, даже 10 лет назад, мы могли бы написать все это в PHP (что означает «личные домашние страницы»). Первоначально PHP был задуман как способ создания HTML для функции ввода/вывода браузера. Объединение этого с серверными задачами обработки казалось хорошей идеей. Таким образом, вместо того, чтобы запустить файл. HTML в вашем браузере, вы бы запустили файл PHP, задача которой было «Echo» HTML обратно в ваш браузер. На практике, однако, все не так хорошо. Сложное локальное взаимодействие, такое как проверка ввода или навигация по иерархии экранов, становится злобно сложным, когда его необходимо выполнять с помощью логики с дистанционным размером. Таким образом, именно в этот момент логика JavaScript, работающая непосредственно в браузере, начала входить в картинку более убедительно. С тех пор история была неумолимым подъемом JavaScript.

Служба Firebase Google привнесла эту историю к своему логическому выводу. Это означает, что вы можете просто забыть обо всех этих технологиях разработки PHP, SQL Server. Ключевым компонентом Firebase является служба управления данными, называемая Firestore и Wonder of Wonders, команды, которые вы используете для чтения и записи данных в/из «базы данных Firestore», могут быть запущены непосредственно из браузера с использованием Pure JavaScript. Когда я обнаружил это, я честно подумал, что все мои дни рождения пришли сразу! Конечно, задача научиться использовать сам Firestore не прост (просто инициализацию проекта Firebase и внедрение его в саму облако представляет некоторые любопытные и налогообложения новинок), но, по крайней мере, вы будете развиваться на навыках, которые вы уже приобрели Анкет

Особая задача (и тот, который вам пришлось бы столкнуться с любыми соглашениями о базе данных серверов, вы могли бы использовать), заключается в том, что чтение и запись в базу данных в JavaScript по сути сложно. Это связано с тем, что ввод и вывод с удаленных устройств через JavaScript обрабатываются «асинхронно». Проще говоря, это означает, что когда вы начинаете такую операцию, управление переходит к остальной части вашей программы, не ожидая результата. Идея состоит в том, чтобы убедиться, что программы могут быть написаны таким образом, чтобы пользователи приложения JavaScript не нашли свою программу «замораживание». Но это расположение требует, чтобы дизайнер программы тщательно структурировал вещи, чтобы инструкции стреляли только в том случае, когда все готово для них. В прошлом это повлекло за собой некоторое значительное осложнение (мы использовали, что соглашения знают как «обратные вызовы», которые следовали за кодом довольно трудным). Однако с растущим признанием преимуществ использования JavaScript в качестве основной платформы разработки, новый синтаксис был добавлен в язык, и обратные вызовы теперь ушли в прошлое. Вот образец кода взаимодействия с базой данных Firestore:

async function buildTextTypesArray() {
  let textTypesSnapshot = await db.collection("textTypes").get();
  textTypesSnapshot.forEach((doc) => {
    textTypes[doc.data().textType] = { 
      textColor: doc.data().textColor, 
      textHeader: doc.data().textHeader };
  });
}

В приведенном выше фрагменте BuildTextTypesarray () - это функция, которая создает локальную копию текстовых документов, хранящихся в базе данных Firestore. Тексты связаны с такими характеристиками, как «цвет» и «заголовок», и, поскольку эти детали часто упоминаются, удобно удерживать их на месте. Чтобы построить мой местный магазин во время программы, все, что мне нужно сделать, это запустить инструкции BuildTextTypesarray (). Внутри этой функции запрос Firestore запускается по запросу на функцию библиотеки Firestore под названием get (). Как указано выше, однако, когда называется get (), его результаты возвращаются асинхронно, так как я могу организовать вещи, чтобы успешные .foreach ((doc) = > {инструкция ` - Чья цель состоит в том, чтобы пережечь список текстовых документов, возвращаемых .get () - не работает до того, как результат get () действительно появится? Ответ предоставлен ключевым словом «ожидания», сидящим перед вызовом get () (одно из тех недавних дополнений к языку JavaScript). На этом этапе, пожалуйста, примите мои заверения, если вы еще не знакомы с синтаксисом JavaScript, что все эти странные скобки, => символы и т. Д. Однажды станут для вас второй натурой. Весь смысл, который я хотел бы, чтобы вы отняли из этого примера, заключается в том, что код, созданный для предоставления проекта JavaScript и Firestore, является кратким, читаемым и предоставленным инструментами системного браузера, легко отлаживать.

Слово предупреждения здесь. Технологии, которые я здесь описываю, по -прежнему очень грубые и подвержены продолжающемуся развитию - в некоторых смыслах современные ИТ -технологии напоминают своего рода дарвинианскую борьбу, представленную на «Fast Forward». Хотя я, как правило, большой поклонник Googling для информации, я бы посоветовал против этого подхода для руководства по передовым вопросам JavaScript. Скорее всего, вы столкнетесь с массой противоречивых советов, которые могут оставить вас более запутанным, чем когда вы начали. Что вам нужно здесь, это хорошая книга. Я рекомендую, это «красноречивый JavaScript Марин Хавербеке». Вы можете найти последнее издание онлайн по адресу https://eloquentjavascript.net/ Анкет Если вы должны тратить какие -либо деньги на этот проект, я предлагаю бумажную копию Eloafent JavaScript - лучшая инвестиция, которую вы можете сделать! К сожалению, на момент написания статьи окончательная книга о Firestore еще предстоит написать. Но собственная документация Google в https://cloud.google.com/firestore/docs/client/get-firebase должен хотя бы начать.

Вы также можете задаться вопросом, есть ли ограничения или недостатки в системе Firebase. До сих пор мой собственный опыт был «никто, о котором я знаю», и вы можете быть уверены, что я дал вещи довольно хороший тест. Поскольку ваше веб -приложение закреплено внутри браузера, вы подвергаетесь общим проблемам, связанным с браузером, а именно, что кусок кода может работать по -разному в зависимости от того, какой браузер вы выбираете. Кроме того, некоторые аппаратные функции (например, геолокация) могут быть недоступны. И хотя Firebase позволяет вам избежать необходимости изучать SQL и на основе серверных языков программирования, будут времена, когда старые руки будут упускать точность и элегантность SQL, а также гибкость и мощность PHP. В целом, однако, я рад жить с этими раздражениями, чтобы моя кодовая база была сосредоточена на управляемом JavaScript, а не на различных платформах и языках.

Я думаю, что я также должен просто сказать, что я действительно поцарапал поверхность в отношении средств, доступных через Firebase. Например, я не упоминал о договоренностях для обеспечения данных в базе данных Firestore. Первым элементом этого в обычных приложениях всегда является предоставление какого -то «входа». По моему опыту, это всегда было серьезной, неприятной, трудоемкой задачей. Firebase уменьшает весь утомительный бизнес до простого упражнения на конфигурации. Аналогичным образом, вам может быть интересно, как может быть организовано ваше приложение для выполнения тяжелых фоновых задач без сервера. В системе Firebase они могут быть назначены «функциям», работающим в облаке Google и программированы, еще раз, в JavaScript. Кроме того, я не описал, как вы внесете поправки и протестировали приложение после того, как оно пошло «вживую». Firebase обеспечивает режим работы «эмуляции», в котором вся установка Firebase работает локально на вашем собственном оборудовании. Я мог бы сказать больше, но вы, наверное, уже достаточно достаточно ....

Если вы хотите увидеть пример в эксплуатации веб -приложения Firebase, попробуйте мою собственную разработку испытаний по адресу https://bablite.web.app Анкет Используйте фиктивный адрес электронной почты, чтобы зарегистрироваться для этого, если вы не хотите, чтобы я видел ваш реальный адрес. Надеюсь, вы найдете шотландского гэльского развлечения!

Как и было обещано ранее, если есть достаточный интерес, я буду рад написать более полный отчет о различных «ногах» пути. В качестве первого шага я уже написал подробное введение в разработку Firebase. Вы можете найти первую часть этого при использовании Firebase V9 - Конфигурация проекта.

Оригинал: "https://dev.to/mjoycemilburn/a-path-through-the-jungle-a-quick-and-easy-and-completely-free-way-of-achieving-practical-results-in-the-world-of-it-21ei"