blog.vverh.digital
Open in
urlscan Pro
178.21.11.88
Public Scan
URL:
https://blog.vverh.digital/2021/chto-takoe-apache-cordova-what-is-it/
Submission: On October 08 via api from US — Scanned from DE
Submission: On October 08 via api from US — Scanned from DE
Form analysis
4 forms found in the DOMPOST /2021/chto-takoe-apache-cordova-what-is-it/#wpcf7-f2805-p3328-o3
<form action="/2021/chto-takoe-apache-cordova-what-is-it/#wpcf7-f2805-p3328-o3" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="2805">
<input type="hidden" name="_wpcf7_version" value="5.0.5">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2805-p3328-o3">
<input type="hidden" name="_wpcf7_container_post" value="3328">
</div>
<div class="mainFontCont blog-form">
<center><br>
<h3 class="treedtitleNoS">Разработка мобильных приложений</h3>
<p></p>
</center><br>
<center>
<p class="subSpanNoS">Разработаем мобильное приложение под цели и задачи бизнеса, поможем составить техническое задание для договора!</p>
<p></p>
</center>
<p></p>
<div class="col-md-4"><span class="wpcf7-form-control-wrap text-201"><input type="text" name="text-201" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"
placeholder="Имя"></span></div>
<div class="col-md-4"><span class="wpcf7-form-control-wrap tel-854"><input type="tel" name="tel-854" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" placeholder="Ваш телефон"></span>
</div>
<div class="col-md-4"><span class="buttomMain"><input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></span></div>
</div>
<p></p>
<center>
<p class="politica-conf" style="text-align: center; color: white; width: 100%;">Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c
<br><a href="/wp-content/uploads/2019/12/policy.pdf" target="blank">политикой конфиденциальности</a></p>
<p></p>
</center>
<p></p>
<input type="hidden" class="wpcf7-pum" value="{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}">
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
POST https://blog.vverh.digital/wp-comments-post.php
<form action="https://blog.vverh.digital/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate="">
<p class="comment-notes"><span id="email-notes">Ваш e-mail не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p>
<p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p>
<p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required"></p>
<p class="comment-form-email"><label for="email">E-mail <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required"></p>
<p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200"></p>
<div class="g-recaptcha" data-sitekey="6LfNm6MUAAAAAA7VoIxQyPWhUKNGVOt2dThf2wj-">
<div style="width: 304px; height: 78px;">
<div><iframe title="reCAPTCHA" width="304" height="78" role="presentation" name="a-usa4u6sbvqxc" frameborder="0" scrolling="no"
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"
src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LfNm6MUAAAAAA7VoIxQyPWhUKNGVOt2dThf2wj-&co=aHR0cHM6Ly9ibG9nLnZ2ZXJoLmRpZ2l0YWw6NDQz&hl=ru&v=lLirU0na9roYU3wDDisGJEVT&size=normal&cb=ttb8igleve9r"></iframe>
</div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div><iframe style="display: none;"></iframe>
</div>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий"> <input type="hidden" name="comment_post_ID" value="3328" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>
</form>
POST /2021/chto-takoe-apache-cordova-what-is-it/#wpcf7-f2674-o1
<form action="/2021/chto-takoe-apache-cordova-what-is-it/#wpcf7-f2674-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="2674">
<input type="hidden" name="_wpcf7_version" value="5.0.5">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2674-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
</div>
<div class="back-popup">
<h3>СКИДКИ ДО 20% НА SEO!</h3>
<hr>
<p>Ознакомиться с предложением можно <a href="https://vverh.digital/"><span>по ссылке</span></a>, или отправьте нам свои контактные данные и мы свяжемся с вами в течении <span>5 минут</span></p>
<div class="row">
<div class="col-md-4"><span class="wpcf7-form-control-wrap text-656"><input type="text" name="text-656" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"
placeholder="Ваше Имя"></span> </div>
<div class="col-md-4"><span class="wpcf7-form-control-wrap tel-664"><input type="tel" name="tel-664" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true"
aria-invalid="false" placeholder="Ваш телефон"></span></div>
<div class="col-md-4"><input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></div>
<p class="politica-conf">Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c <br><a href="/wp-content/uploads/2019/12/policy.pdf" target="blank">политикой конфиденциальности</a></p>
</div>
</div>
<input type="hidden" class="wpcf7-pum" value="{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}">
<div class="wpcf7-response-output wpcf7-display-none"></div><input type="hidden" name="pum_form_popup_id" value="2675">
</form>
POST /2021/chto-takoe-apache-cordova-what-is-it/#wpcf7-f1905-o2
<form action="/2021/chto-takoe-apache-cordova-what-is-it/#wpcf7-f1905-o2" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1905">
<input type="hidden" name="_wpcf7_version" value="5.0.5">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1905-o2">
<input type="hidden" name="_wpcf7_container_post" value="0">
</div>
<div class="back-popup">
<h3>БЛАГОДАРИМ ЗА ДОВЕРИЕ!</h3>
<hr>
<p>Отправьте нам свои контактные данные<br> и мы свяжемся с вами в течении <span>5 минут</span></p>
<div class="row">
<div class="col-md-4"><span class="wpcf7-form-control-wrap text-656"><input type="text" name="text-656" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"
placeholder="Ваше Имя"></span> </div>
<div class="col-md-4"><span class="wpcf7-form-control-wrap tel-664"><input type="tel" name="tel-664" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true"
aria-invalid="false" placeholder="Ваш телефон"></span></div>
<div class="col-md-4"><input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></div>
<p class="politica-conf">Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c <br><a href="/wp-content/uploads/2019/12/policy.pdf" target="blank">политикой конфиденциальности</a></p>
</div>
</div>
<input type="hidden" class="wpcf7-pum" value="{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}">
<div class="wpcf7-response-output wpcf7-display-none"></div><input type="hidden" name="pum_form_popup_id" value="1903">
</form>
Text Content
+7 (343) 302-27-24 * Ключевые услуги * Комплексное продвижение * Настройка рекламы * Реклама в Яндекс Директ * Реклама в Google Adwords * SEO-продвижение * Обслуживание сайтов * Разработка сайтов * Мобильные приложения * Создание CRM * Готовая CRM-система * Рубрики * SEO * Веб-разработка * Мобильная разработка * Блокчейн и криптовалюта * Персонал * Менеджмент * Интересное * Маркетинг * Все статьи * Полезное * Блог * Вопрос-ответ * Личный кабинет * Компания * О нас * Контакты Навигация Агентство полного цикла * Услуги * Комплексное продвижение * Настройка рекламы * Реклама в Яндекс Директ * Реклама в Google Adwords * SEO-продвижение * Обслуживание сайтов * Разработка сайтов * Мобильные приложения * Создание CRM * Готовая CRM-система * Рубрики * SEO * Веб-разработка * Мобильная разработка * Блокчейн и криптовалюта * Персонал * Менеджмент * Интересное * Маркетинг * Все статьи +7 (343) 302-27-24 Обратный звонок Главная / Мобильная разработка / Что такое Apache Cordova: от объяснения до приложения ЧТО ТАКОЕ APACHE CORDOVA: ОТ ОБЪЯСНЕНИЯ ДО ПРИЛОЖЕНИЯ Ноябрь 08, 2021 Автор статьи МАКСИМ КОЛМОГОРОВ Соучредитель, технический директор vverh.digital ВВЕДЕНИЕ Сегодня мы поговорим про замечательную технологию Apache Cordova. Cначала, глянем поверхностно, чтобы “чайнику” было понятно, потом заглянем под капот, дабы не обидеть технарей, сравним с React Native, чтобы поднять градус ажиотажа и конечно же сделаем свое Hello World приложение. Примечание от автора: надеюсь, Вам понравится, приятного чтения. ЧТО ТАКОЕ APACHE CORDOVA Apache Cordova – (или просто Cordova) это среда разработки, позволяющая создавать мобильные приложения с помощью веб-технологий: HTML, CSS, JavaScript и его фреймворков. Cordova максимально понятный и доступный инструмент с помощью которого почти любой веб-программист может создать простое мобильное приложение. Конечно, существует ряд “но”, куда без них. Во-первых, для реализации приложения, где будут какие-то функции кроме нескольких экранов и текста, полученного с сервера, необходимо уже иметь профильные знания в мобильной разработке. Во-вторых, программисту потребуется настроить свой компьютер для работы: установить нужные программы и пакеты. В целом, это все, ниже рассмотрим уже более углубленно. КАК ОНО РАБОТАЕТ Изначально программист ведет разработку в обычном виде, как-будто он делает SPA приложение (читать как сайт). Работа ведется в любимом редакторе кода, а изменения все просматриваются прямо в браузере. SPA – (на англ) single page application, что значит “одностраничное приложение”. Если в контексте статьи будете видеть аббревиатуру SPA, то читайте ее как “сайт”. Технически SPA это и есть сайт, просто у данного термина более глубокий смысл. ПРОЦЕСС СБОРКИ Когда SPA готово, его начинают собирать с помощью Cordova и превращать в мобильное приложение. В зависимости от платформы, под которую делается приложение (iOS, Android или все вместе), программист вбивает в командную строку (терминал) нужные команды. Далее, в зависимости от выбранной платформы файлы SPA добавляются в заранее созданное ядро, его называют платформой. Это и есть фреймворк Cordova, который будет уже в телефоне запускать наше SPA в виде приложения. Можете сами рассмотреть исходники платформ iOS и Android, они очень маленькие в сравнении с некоторыми фреймворками. КАК JAVASCRIPT РАБОТАЕТ В ПРИЛОЖЕНИИ Технически грамотные ребята должны были уже задуматься: “А как JavaScript может работать в приложении?”. Есть два способа: выполнить JavaScript код средствами языка программирования платформы (создав исполнительную среду, позже пример покажем) или запустить его через WebView представление. Как раз Cordova использует второй вариант, весь JavaScript код обрабатывается с помощью WebView. Сейчас все эти сложные шутки объясним, не беспокойтесь. Просто много технической информации нам нужно выкладывать постепенно для адекватного объяснения. ЧТО ТАКОЕ WEBVIEW Простыми словами WebView – это браузер, правда, сильно урезанный. Любое приложение, сделанное на Cordova – это браузер плюс сайт. Браузер – это наш WebView. Сайт – это файлы SPA приложения, которые сохранены на телефоне, WebView имеет к ним доступ, и поэтому сайт открывается без интернета. Если голова взорвалась – переходите к следующему разделу, остальные же могут читать дальше, будет уже техническое описание для программистов. Если подходить более технически к данному вопросу, то WebView – это тулза (виджет) для открытия веб-сайтов. Т.е это не браузер, это одна из составляющих браузера. Вообще, браузер может состоять из нескольких экранов (настройки, закладки, скачанные файлы, истории), базы данных и WebView. Поэтому Cordova приложение состоит из JavaScript, CSS, HTML файлов и нативного кода, который запускает WebView Engine и добавляет возможность другим программистам интегрировать свои собственные решения (плагины). CORDOVA И ГИБРИДНАЯ РАЗРАБОТКА По факту, приложения, сделанные на Cordova, являются гибридными, ведь в их файлах можно найти аж несколько разных языков и технологий, которые переплетены между собой. Cordova имеет мощный инструмент, позволяющий расширять свой функционал нативным кодом, автор текста даже писал про это статьи: “Пишем плагин Cordova для iOS на Swift”, “Пишем плагин Cordova для Android на Java” и “Пишем плагин Cordova для Android на Kotlin”. По этим причинам можно сказать, что полет фантазии программиста и заказчика ничем не ограничен. С помощью этих инструментов можно создать все что угодно. Для знакомых с iOS разработкой и Swift: автор статьи умудрялся вызывать нативные “шторки” в виде новых ViewControllers, которые добавлял как плагины. Хотя исходники Cordova на iOS написаны на Objective-C, программисту ничего не мешает писать и на Swift. Android платформа написана на Java, но создатели добавили поддержку Kotlin больше года назад. CORDOVA И REACT NATIVE: ОСНОВНЫЕ ОТЛИЧИЯ Между Cordova и React огромная пропасть в реализации, она диаметрально противоположная, поэтому разделим раздел на две части: в первой кратко для НЕ программистов объясним разницу, во второй для программистов c кучей технических терминов. ОТЛИЧИЯ ПРОСТЫМ ЯЗЫКОМ Для обычного пользователя различий в приложениях на Cordova и React Native почти нет. Конечному пользователю наплевать на реализацию, ему важен результат (что несет с собой приложение). По скорости работы любые кроссплатформенные (читать как не родные) решения проигрывают нативным. Приложения на Flutter, React Native и Cordova всегда будут медленней приложений на Swift/Objective-C (iOS) или Java/Kotlin (Android). Поэтому, если из приложения необходимо выжать максимум, то не смотрите в сторону кросс-решений. Сюда смотрят только ради экономии денег и ничего больше. Если сравнивать скорость Cordova и React Native, то последний будет чуть быстрее (незначительно, хотя же вроде “натив”), и то только до той поры пока на экране не будет рендериться куча элементов, почему так? Прочитаете в технической части. На Cordova можно реализовать все что угодно, на React Native тоже, но с уточнением. У React Native есть несколько систем сборок: Init и Expo. Первая позволяет писать нативные плагины (как на Cordova), но родного функционала мало (снова как Cordova), вторая имеет огромный функционал, но если чего-то нет, придется смириться, плюс из-за этого вес приложения становится раздутым. Как итог, автор статьи как предприниматель и как программист не видит какой-то серьезной разницы. Вроде она есть, но какая-то незначительная. Свой выбор автор сделал в пользу нативных приложений, но если речь идет о кроссплатформенной разработке, то выберет Cordova только потому что нет проблем с обратной совместимостью (чего иногда в React Native не хватает). ТЕХНИЧЕСКИЕ ОТЛИЧИЯ React – это JavaScript фреймворк, использующийся для разработки реактивных интерфейсов в веб-приложениях. React Native – это реализация React для разработки интерфейсов в мобильных приложениях. Выше мы уже объяснили, что Cordova использует WebView, а также рассказали про ее возможности. А что же у нас под капотом у React Native? В начале статьи мы рассказали, что есть две возможности работать с JavaScript внутри приложений. Первый вариант – создание среды внутри приложения, в котором будет исполняться JavaScript, второй – WebView. React Native использует первый вариант. Когда программист разрабатывает приложение, в основном, он пишет на JSX (похоже на смесь HTML и XML, в конце концов превращается в самый обычный JavaScript). Если посмотрите на скриншот ниже, можете увидеть JSX объекты по типу StatusBar и Text. JSX объекты – это синтаксический сахар для функции React.createElement(component, props, …children). По факту, под капотом у каждого элемента кроется вызов этой функции. Просто мельком гляньте сюда, сразу все поймете. Прелесть React (именно React) в том, что он не сильно связан с DOM деревом. Поэтому, разработчики из FaceBook* просто сделали так (вырезали DOM API), что вместо рендеринга обычных HTML-элементов будут рендериться нативные компоненты той операционной системы, в которой работает приложение: Uikit (Objective-C) или Material Design (Java). Магия тут кроется в том, что язык платформы создает некую область, внутри которой может исполняться JavaScript. Пример исполнения JavaScript внутри Swift. Вам ничего не мешает ловить результаты каких-то функций (а возвращать можно хоть даже объекты) и в зависимости от результа отрисовывать нативные кнопки или еще что-нибудь. Конечно, набор компонентов у React Native ограничен, поэтому программист не может воспользоваться всеми прелестями web-технологий в данном подходе. Вообще, у React Native есть несколько вариантов сборки: Init и Expo. Если кратко, то Init урезанный, но гибкий за счет того что в него можно добавлять свой нативный код (как плагины для Cordova), а Expo имеет огромный набор функций, но если там чего-то нет, придется забить. При сборке на React Native и Cordova внутри приложений будут JavaScript файлы и документы, которые были добавлены в проект. Из всего вышесказанного можно сделать вывод, что по итоговому весу приложения на Cordova и React Native не будут отличаться друг от друга, но это не так: если приложение собрано через Expo, оно будет весить аж в 5 раз больше приложения собранного через Init. А тот в свою очередь все равно весит чуть больше чем Cordova приложения (но уже незначительно, так что считайте одинаково). По скорости работы тут тоже все неоднозначно. С одной стороны, нативные компоненты должны быть быстрее, но из-за того что они в реальном времени появляются через JavaScript, то скорость сильно страдает. Если компонентов много на экране, то скорость сравнима с Cordova приложениями. СОЗДАДИМ HELLO WORLD ПРОЕКТ НА CORDOVA Далее материал для программистов, автор не будет утруждать себя обяснять некоторые вещи, кому надо погуглят. ПЕРЕД СТАРТОМ Так как мы вступаем в мир мобильной разработки, пора готовить свой компьютер устанавливая нужные программы. Если хотите собрать приложение под Android, то придется установить на компьютер Android Studio, в AVD менеджере подготовить эмуляцию, установить Java SDK 8, Gradle и настроить корректно все системные переменные ($path на Mac и Linux или “Системная переменная” на Windows). Для сборки приложений под iOS требуется Xcode, а он устанавливается только на компьютеры Apple. Если кто не понял последнее приложение, то перефразируем: для сборки iOS приложения придется купить MacBook (или любой другой ПК от Apple). Почему? Ну вот так Apple сделали. Без этого невозможно собрать приложение под iOS. Не хотите тратить деньги? Можете поставить хакинтош. Автор статьи слышал истории адептов линукса, которые умудрились поставить Xcode на свою машину, но при просьбе показать куда-то внезапно пропадали. СОЗДАЕМ ПРИЛОЖЕНИЕ Сначала необходимо установить Cordova на компьютер, сделаем это с помощью менеджера пакетов npm из Node.js. Открываем командную строку (терминал) и вводим команды: npm install -g cordova Далее создаем приложение: cordova create hello com.example.hello HelloWorld После, перемещаемся в папку с приложением: cd hello И добавляем платформу (пока ограничимся Android): cordova platform add android В папке www есть файл index.js, в нем, в функциях onDeviceReady(), можете добавить alert(“Hello World”) после this.receivedEvent() или любой другой код. После запустите эмуляцию командой: cordova emulate android В результате у Вас откроется эмуляция и будет что-то подобное: Скриншот взят из статьи “Разработка Cordova плагина на Java для Android”. Чтобы запустить все тоже самое на iOS, достаточно добавить нужную платформу: cordova platform add ios А после запустить: cordova emulate ios Вообще, во время этих манипуляций могут посыпаться сотни ошибок (у Android, iOS обычно без проблем ставит все с первого раза), ибо траблшутинг при кроссплатформенной разработке это отдельный вид извращений. Так что, если что-то не получилось, читайте официальный гайд. РАЗРАБОТКА МОБИЛЬНЫХ ПРИЛОЖЕНИЙ Разработаем мобильное приложение под цели и задачи бизнеса, поможем составить техническое задание для договора! Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности *Организация Meta, а также её продукт Facebook, на который мы ссылаемся в этой статье, признаны экстремистскими на территории РФ. Рассказать друзьям: * ВКонтакте * Twitter Прошлая записьPrevious post:Что такое легаси в программировании Следующая записьNext post:Как написать свой Cordova плагин для Android приложения на Kotlin ОСТАВЬТЕ КОММЕНТАРИЙ ОТМЕНИТЬ ОТВЕТ Ваш e-mail не будет опубликован. Обязательные поля помечены * Комментарий Имя * E-mail * Сайт КЛЮЧЕВЫЕ УСЛУГИ * Настройка рекламы * Seo-оптимизация * Обслуживание сайтов * Разработка сайтов * Мобильные приложения * Интеграция и разработка crm-систем * Готовая CRM-система ПОЛЕЗНОЕ * Блог * Вопрос-ответ * О нас * Контакты * Личный кабинет КОНТАКТЫ ул. Большакова 61, Екатеринбург, Свердловская обл., 620144 3 этаж, офис 302 +7 (343) 302-27-24 info@vverh.digital Написать нам СКИДКИ ДО 20% НА SEO! -------------------------------------------------------------------------------- Ознакомиться с предложением можно по ссылке, или отправьте нам свои контактные данные и мы свяжемся с вами в течении 5 минут Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности × БЛАГОДАРИМ ЗА ДОВЕРИЕ! -------------------------------------------------------------------------------- Отправьте нам свои контактные данные и мы свяжемся с вами в течении 5 минут Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности × Сообщение ВКонтактеОставить сообщениеОтправьте нам сообщениеБизнес-мессенджер