Недавно я изучал разработку приложений с помощью JavaScript, и могу сказать, что это действительно круто, менее напряженно и не так сложно, как написание приложений на таких языках, как Java, Kotlin и т. Д.

Прежде чем мы начнем, позвольте мне пролить свет на то, что такое Framework7 и Cordova.
Что такое Framework7?

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

Недавно я потратил некоторое время на его оценку и был удивлен, увидев, что теперь он поддерживает Material Design, а также несколько новых компонентов. Если вы ищете платформу для мобильных приложений, чтобы быстро приступить к созданию красивых приложений, вам обязательно стоит попробовать Framework7. Он не полагается на какой-либо конкретный фреймворк, кроме собственного фреймворка для манипуляций с DOM (DOM7), считайте его оптимизированной для мобильных устройств версией jQuery. Теперь его можно использовать с другими популярными фреймворками, такими как React.JS, Vue.JS, Angular и т. Д.

Функции

Встроенная библиотека FastClick для обработки задержек кликов для сенсорного интерфейса.

  • Простой, знакомый синтаксис для всех, кто знаком с jQuery, чтобы быстро приступить к работе
  • Независимость от фреймворка - может использоваться с React, Angular и другими шаблонизаторами, такими как Handlebars.
  • Множество предварительно стилизованных виджетов / компонентов. Некоторые примеры перечислены ниже, но посмотрите их приложения для кухонной мойки для iOS и Android, чтобы увидеть их все для каждой платформы:
  • Панель поиска со встроенной фильтрацией
  • Экран входа в систему
  • Всплывающие окна
  • Оверлеи и сборщики
  • Разделение основных / подробных видов
  • Боковые панели (левая / правая с возможностью перехода)
  • Браузер фотографий
  • Просмотр текстовых сообщений
  • Многочисленные варианты списка (список мультимедиа, список контактов, сортируемый список, виртуальный список)
  • Swipeouts (элемент списка для удаления и т. Д.)
  • Аккордеоны
  • Вкладки
  • Прелоадеры (спиннеры)
  • Плавающая кнопка действия
  • Карты
  • Чипсы (Материальный дизайн)
  • Компоненты формы
  • Потяните для обновления
  • Встроенная система компоновки сеток
  • Настраиваемый
  • Темы и цветовые решения
  • Многочисленные параметры для простой обработки различных сценариев (например, скрытие панелей навигации и панелей инструментов при прокрутке и т. Д.)
  • Гибкий маршрутизатор - загружайте страницы из шаблонов, используя Ajax, встраивая или динамически через гибкий маршрутизатор API.
mainView.router.load({url: 'list.html'});    mainView.router.load({     template: Template7.templates.listTemplate,     context: resp.results   });

<div data-background="path/to/image.jpg" class="lazy">

  • Поддержка виртуального списка
  • Использует собственную прокрутку
  • Настраиваемое кеширование HTML для более быстрой загрузки страницы
  • Стили, похожие на бутстрап
  • API плагинов
  • Расширьте рамки и поделитесь с сообществом. Уже включает в себя множество полезных плагинов, перечисленных на их сайте, таких как экран приветствия / учебника, индексированный список прокрутки, 3D-панели, дополнительные настраиваемые клавиатуры и многое другое.
  • Иконки - включает в себя некоторые базовые (меню, поиск), но вы можете использовать с ним любой иконочный шрифт или библиотеку, например Font Awesome или Ionicons. Ознакомьтесь со стартовыми шаблонами на noodl.io, чтобы увидеть больше примеров использования иконок.
  • Хорошая документация, наглядные примеры, стартовые приложения и отличная поддержка на форуме, часто самим автором.

Что такое Кордова?

Apache Cordova - это среда разработки мобильных приложений, изначально созданная Nitobi. Adobe Systems приобрела Nitobi в 2011 году, она была переименована в PhoneGap, а позже выпустила версию программного обеспечения с открытым исходным кодом под названием Apache Cordova.

Думаю, объяснений хватит, давайте перейдем к делу. Прежде чем мы начнем писать какой-либо код, у вас должно быть установлено и настроено следующее:

Перейдите по этой ссылке, чтобы настроить среду разработки. например, переменные пути и среды и т. д. для пользователей Windows.

  1. Узел и NPM
  2. Git
  3. Кордова
  4. Android Studio (SDK) и инструменты Android
  5. Джава

У вас также должен быть установлен NVM (Диспетчер версий узлов). Загрузить ссылку для загрузки нажмите здесь

Если все настроено и работает, приступим.

1. Запустите командную строку или терминал.
введите «npm install framework7-cli -g» и введите, чтобы установить framework7-cli.

2. В командной строке или в терминале.
введите «npm install cordova -g» и введите, чтобы установить cordova.

3. В командной строке или в терминале.
введите «mkdir my_first_app && cd my_first_app», нажмите Enter и введите «framework7 create», нажмите Enter.

4. После ввода «framework7 create» в командной строке или в терминале интерфейс командной строки Framework 7 задаст вам вопросы о том, как настроить ваше приложение.
выберите следующие параметры:
1. Приложение Cordova (предназначено для iOS и Android).
2. Введите любое имя, которое вы хотите, я назову свое EmmanuelApp, затем нажмите Enter.
3. Просто нажмите "Ввод" в пакете приложения (идентификатор пакета).
4. Нажмите "a", чтобы переключить все, и нажмите "Ввод".
5. Выберите Framework7 Core.
6. Виды с вкладками .
7. Нет сборщика.
8. Нет, использовать цветовую тему по умолчанию.
9. Да, включить шрифты значков.

Дайте ему время закончить свои дела.

5. Откройте папку в любом текстовом редакторе. Прежде чем мы создадим приложение в виде APK, мы предварительно его предварительно увидим в браузере.
Чтобы просмотреть его в браузере, просто введите npm install http-serve -g в терминале или в командной строке, чтобы установить http- обслуживать.

6. Предварительно просматривая приложение в браузере, убедитесь, что http-serve установлен правильно, а затем убедитесь, что вы находитесь в каталоге приложения. В терминале или в командной строке введите «http-serve», он должен предоставить вам URL-адрес для предварительного просмотра приложения в браузере.

7.Предварительный просмотр приложения в браузере после посещения данного URL-адреса, вы захотите добавить www в качестве пути, например, http://192.168.56.1:8081/www/.
После проверки его из браузер остановит подачу, нажав CTRL-C

8. Теперь мы можем создать приложение для Android или iOS, просто введите
'npm run build-cordova-android' или npm run build-cordova-ios '
Я буду создавать свое приложение для Android, пусть строительный процесс!

После завершения сборки для установки приложения на ваше устройство просто перейдите к 'cordova \ platform \ android \ app \ build \ output \ apk \ debug \ app-debug.apk' внутри каталога my_first_app и скопируйте 'app-debug.apk' на свое устройство и установите его. Имя приложения в папке отладки будет «app-debug.apk». Если вы хотите, вы можете переименовать файл .apk во все, что захотите.

Вот приложение, устанавливаемое на реальное устройство:

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