Разработка мобильных приложений — захватывающая, постоянно меняющаяся и постоянно развивающаяся отрасль. Мобильные приложения являются неотъемлемой частью нашей жизни, и с развитием технологий разработки приложения становятся только лучше, а платформы для разработки мобильных приложений становятся все более и более инновационными. Поскольку скорость выхода на рынок является основным фактором при рассмотрении вопроса о разработке мобильного приложения, нет недостатка в отличных вариантах разработки приложений, которые постоянно пытаются превзойти друг друга, когда речь идет о масштабируемости, простоте использования, производительности и скорости.
Сегодня я хотел бы обсудить одну из таких новинок — NativeScript. NativeScript — это кроссплатформенная среда разработки мобильных приложений с открытым исходным кодом для iOS и Android, созданная Telerik. NativeScript — это кроссплатформенный фреймворк, который может создавать мобильные приложения с единой кодовой базой. Основным языком, используемым для разработки приложений на основе NativeScript, является Javascript. Кроме того, NativeScript предлагает множество функций, упрощающих начало работы и использование уже имеющихся навыков:
- Использует имеющиеся у вас знания HTML, JavaScript и CSS.
- Не нужно иметь знания в области программирования на Objective C, Swift или Java.
- Напиши один раз беги везде
- Доступ к собственным API платформы для iOS и Android
- Может использоваться с Angular и Typescript
В ходе этого блога я хотел бы дать вам несколько быстрых примеров кода, чтобы вы имели представление о том, как выглядит синтаксис. но сначала…
Что такое кроссплатформенная разработка мобильных приложений?
Кроссплатформенная разработка — это концепция разработки компьютерного программного обеспечения, при которой вы пишете код приложения один раз, и он работает на нескольких платформах. Это очень хорошо согласуется с концепцией «написал один раз, работает везде», чтобы сделать все быстрее, меньше и более портативным. В мобильных сценариях это применяется путем написания приложения с использованием кодовой базы и технологии, которые позволяют развертывать и распространять приложение на нескольких платформах/операционных системах/устройствах.
Итак, начнем с установки NativeScript Framework.
Итак, мы готовы. Давайте быстро погрузимся в то, как вы можете начать разработку в NativeScript.
1. Установите Node.js
NativeScript CLI построен на Node.js. Следовательно, для установки NativeScript в вашей системе должен быть установлен node.js.
2. Установите интерфейс командной строки NativeScript
NativeScript CLI можно установить через командную строку в Windows или через терминал в системе Mac. Команду ниже можно использовать для установки CLI NativeScript.
npm установить -g нативный скрипт
3. Установите зависимости для iOS и Android
Для разработки iOS нам нужна последняя версия Xcode, установленная из App Store. Для разработки под Android Android SDK можно установить с https://developer.android.com/studio/index.html.
Приложения NativeScript написаны на комбинации JavaScript, XML и CSS, как показано на рис. 1
Рис. 1. JavaScript, CSS и XML объединяются для создания приложения NativeScript.
Приложения на основе NativeScript состоят из Javascript, XML и CSS. Компонент JavaScript запускает бизнес-логику, получает доступ к данным или управляет потоком приложения. Часть XML определяет пользовательский интерфейс (UI), а CSS используется для стилизации пользовательского интерфейса, как и приложение HTML.
Приложение NativeScript очень похоже на веб-приложение на основе HTML, но это только из-за стиля кодирования и его структурной части. С точки зрения работы, NativeScript является кросс-платформенной структурой, пользовательский интерфейс написан на XML, который отображает собственные элементы пользовательского интерфейса для каждой платформы, то есть кнопка в NativeScript отображается как собственная кнопка iOS и собственная кнопка Android. Следовательно, окончательный результат на экране мобильного устройства кажется родным для соответствующих платформ.
Структура папок NativeScript
Давайте кратко рассмотрим структуру папок NativeScript.
— app
— App_Resources
— tools
— tns_modules
— app.js, main.xml, main.css, main.js,…
— node_modules
- tns-core-modules
— package.json
— платформы
— android
— ios
Папка приложения содержит все ресурсы разработки, необходимые для создания приложения. Все пользовательские файлы xml, css и js будут созданы в папке приложения. Эта папка также содержит папку App_Resources, которая содержит ресурсы для конкретной платформы, такие как значки приложений, экраны-заставки и определенные файлы, связанные с iOS и Android, в соответствующих папках. Любой сторонний плагин (например, сканер штрих-кода, push-уведомление и т. д.) будет сохранен в папке tns_modules.
Папка node_modules/tns-core-modules содержит предоставленные NativeScript модули javascript, которые используются для создания вашего приложения. Каждый из этих модулей содержит специфичный для платформы код. Например, модуль кнопки в папке tns-core-modules/ui будет иметь версии кнопки для iOS и Android.
Файл package.json содержит все детали конфигурации вашего приложения, такие как имя приложения, идентификатор приложения, версия приложения, зависимости модулей, т. е. какие модули npm использует ваше приложение.
Папка платформы содержит специфичный для платформы код, который используется NativeScript для создания приложений для iOS и Android. В папке iOS вы найдете файл ProjectName.xcodeproj и info.plist, то есть файл конфигурации проекта iOS. Точно так же для Android у нас есть androidmanifest.xml и другие связанные файлы Java.
Кодирование с помощью NativeScript
Как обсуждалось выше в разделе «Как пишутся приложения NativeScript», мы в основном разделили файлы разработки приложений на 3 части:
1. Пользовательский интерфейс (XML) main.xml
<Page xmlns="https://www.nativescript.org/tns.xsd" loaded="pageLoaded"> <StackLayout> <Label text="Tap the button" class="title"/> <Button text="TAP" /> </StackLayout> </Page>
2. Стилизация (CSS) main.css
Page {
background-color: white;
}
.title {
font-size: 30;
horizontal-align: center;
margin: 10;
font-weight: bold;
color: #FF0111;
}
button {
font-size: 40;
horizontal-align: center;
border-radius: 15;
width: 90%;
background-color: #dddddd;
}
3. Бизнес-логин (JS) main.js
function pageLoaded(args) {
var page = args.object;
}
exports.pageLoaded = pageLoaded;
Приведенный выше код даст следующие результаты на iOS и Android.
Как видно из приведенного выше представления iOS и Android, для создания этого простого приложения на обеих платформах используется единая кодовая база без написания какого-либо пользовательского кода, связанного с платформой. Для определенных сценариев, если требуется код для конкретной платформы, его также можно определить на уровне кода или на уровне файла. Например, если нам нужно поддерживать разные файлы для каждой платформы, мы можем добавить название платформы к файлу как main.ios.xml и main.android.xml. Точно так же, если вы хотите указать специфичный для платформы атрибут для элементов пользовательского интерфейса, это можно сделать следующим образом.
<Button ios:text="I'm an iOS button!" android:text="I'm an Android button!" />
Вывод
Как мы видели из этой статьи, NativeScript является хорошим вариантом для разработки кросс-платформенных мобильных приложений, поскольку можно использовать имеющиеся знания о веб-технологиях для создания замечательных многофункциональных приложений. Я надеюсь, что эта статья дала вам хороший обзор NativeScript, который поможет вам решить, подходит ли вам NativeScript.
Первоначально опубликовано на www.brandcatmedia.com.
