NativeScript - угловое приложение

Давайте создадим простое голое приложение, чтобы понять рабочий процесс приложения NativeScript.

Создание приложения

Давайте узнаем, как создать простое приложение с помощью NativeScript CLI, tns. tns предоставляет команду create, используемую для создания нового проекта в NativeScript.

Базовый синтаксис для создания нового приложения следующий:

tns create <projectname> --template <template_name>

Где,

  • Projectname это название проекта.

  • template_nameэто шаблон проекта. NativeScript предоставляет множество шаблонов запуска для создания различных типов приложений. Используйте шаблон на основе Angular.

Давайте создадим новый каталог с именем NativeScriptSamples для работы с нашим новым приложением. Теперь откройте новый терминал, затем перейдите в наш каталог и введите следующую команду -

tns create BlankNgApp --template tns-template-blank-ng

Где, tns-template-blank-ng относится к пустому мобильному приложению на основе AngularJS.

Вывод

..... 
..... 
..... 
Project BlankNgApp was successfully created. 
Now you can navigate to your project with $ cd BlankNgApp 
After that you can preview it on device by executing $ tns preview

Теперь создано наше первое мобильное приложение BlankNgApp .

Структура приложения

Давайте поймем структуру приложения NativeScript, проанализировав наше первое приложение BlankNgApp в этой главе. Приложение NativeScript организовано в несколько разделов, и они следующие:

  • Раздел конфигурации

  • Узловые модули

  • Источники Android

  • Источники iOS

  • Исходный код приложения

Общая структура приложения выглядит следующим образом -

│ angular.json 
│ LICENSE 
│ nsconfig.json 
│ package-lock.json 
│ package.json 
│ tsconfig.json 
│ tsconfig.tns.json 
│ tsfmt.json 
│ webpack.config.js 
│
├───App_Resources 
│  ├───Android 
│  │ 
│  └───iOS 
│ 
├───hooks 
│ 
├───node_modules 
| 
└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
      │  app-routing.module.ts 
      │  app.component.html 
      │  app.component.ts 
      │  app.module.ts 
      │ 
      └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

Давайте разберемся с каждым разделом приложения и тем, как он помогает нам создавать наше приложение.

Раздел конфигурации

Все файлы в корне приложения являются файлами конфигурации. Формат файлов конфигурации - JSON, что помогает разработчику легко понять детали конфигурации. Приложение NativeScript использует эти файлы для получения всей доступной информации о конфигурации. Давайте рассмотрим все файлы конфигурации в этом разделе.

package.json

Файлы package.json устанавливают идентификатор (id) приложения и всех модулей, от которых приложение зависит для его правильной работы. Ниже наш package.json -

{ 
   "nativescript": {
      "id": "org.nativescript.BlankNgApp",
      "tns-android": {
         "version": "6.3.1"
      }, "tns-ios": {
         "version": "6.3.0"
      } 
   }, "description": "NativeScript Application", 
   "license": "SEE LICENSE IN <your-license-filename>", 
   "repository": "<fill-your-repository-here>", 
   "dependencies": { 
      "@angular/animations": "~8.2.0", 
      "@angular/common": "~8.2.0", 
      "@angular/compiler": "~8.2.0", 
      "@angular/core": "~8.2.0", 
      "@angular/forms": "~8.2.0", 
      "@angular/platform-browser": "~8.2.0", 
      "@angular/platform-browser-dynamic": "~8.2.0", 
      "@angular/router": "~8.2.0", 
      "@nativescript/theme": "~2.2.1", 
      "nativescript-angular": "~8.20.3", 
      "reflect-metadata": "~0.1.12", 
      "rxjs": "^6.4.0", 
      "tns-core-modules": "~6.3.0", 
      "zone.js": "~0.9.1" 
   }, 
   "devDependencies": { 
      "@angular/compiler-cli": "~8.2.0", 
      "@ngtools/webpack": "~8.2.0", 
      "nativescript-dev-webpack": "~1.4.0", 
      "typescript": "~3.5.3" 
   }, 
   "gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14", 
   "readme": "NativeScript Application" 
}

Вот,

Identity of the application (nativescript/id)- Устанавливает идентификатор приложения как org.nativescript.BlankNgApp. Этот идентификатор используется для публикации нашего приложения в Play Store или iTunes. Этот идентификатор будет нашим идентификатором приложения или именем пакета.

Dependencies (dependencies)- Определяет все наши зависимые модули узлов. Поскольку реализация NativeScript по умолчанию зависит от Angular Framework, модули Angular включены.

Development dependencies- Определяет все инструменты, от которых зависит приложение. Поскольку мы разрабатываем наше приложение на TypeScript, оно включает машинописный текст как один из зависимых модулей.

angular.json - Информация о конфигурации Angular framework.

nsconfig.json - Информация о конфигурации фреймворка NativeScript.

tsconfig.json, tsfmt.json & tsconfig.tns.json - Информация о конфигурации языка TypeScript

webpack.config.js - Конфигурация WebPack написана на JavaScript.

Узловые модули

Поскольку проект NativeScript является проектом на основе узлов, он хранит все свои зависимости в папке node_modules. Мы можем использовать npm (npm install) или tns для загрузки и установки всех зависимостей приложения в node_moduels.

Исходный код Android

NativeScript автоматически генерирует исходный код Android и помещает его в папку App_Resources \ Android. Он будет использоваться для создания приложения для Android с использованием Android SDK.

Исходный код iOS

NativeScript автоматически генерирует исходный код iOS и помещает его в папку App_Resources \ iOS. Он будет использоваться для создания приложения iOS с использованием iOS SDK и XCode.

Исходный код приложения

Актуальный код приложения помещается в папку src. В нашем приложении есть файлы в папке src.

└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
   │ app-routing.module.ts 
   │ app.component.html 
   │ app.component.ts 
   │ app.module.ts 
   │ 
   └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

Давайте разберемся в назначении всех файлов и в том, как они организованы в этом разделе -

Шаг 1

main.ts - точка входа в приложение.

// this import should be first in order to load some required settings (like globals and reflect-metadata) 
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

Здесь мы установили AppModule в качестве модуля начальной загрузки приложения.

Шаг 2

app.css - Основная таблица стилей приложения показана ниже -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

Вот,

app.css импортирует основную таблицу стилей и таблицу стилей тем коричневого цвета фреймворка NativeScript.

Шаг 3

app \ app.module.ts - корневой модуль приложения.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], 
      imports: [
         NativeScriptModule,
         AppRoutingModule
      ], 
      declarations: [
         AppComponent
      ], schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class AppModule { }

Вот,

AppModule создается на основе NgModule и устанавливает компоненты и модули приложения. Он импортирует два модуля NativeScriptModule и AppRoutingModule и компонент AppComponent. Он также устанавливает AppComponent в качестве корневого компонента приложения.

Шаг 4

app.component.ts - корневой компонент приложения.

import { Component } from "@angular/core"; 
@Component(
   { 
      selector: "ns-app", 
      templateUrl: "app.component.html" 
   }
) 
export class AppComponent { }

Вот,

AppComponent устанавливает шаблон и таблицу стилей компонента. Шаблон разработан на простом HMTL с использованием компонентов пользовательского интерфейса NativeScript.

Шаг 5

app-routing.module.ts - Модуль маршрутизации для AppModule

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", loadChildren: () =>
   import("~/app/home/home.module").then((m) => m.HomeModule) } 
];
@NgModule(
   {
      imports: [NativeScriptRouterModule.forRoot(routes)], 
      exports: [NativeScriptRouterModule] 
   }
)
export class AppRoutingModule { }

Вот,

AppRoutingModule использует NativeScriptRouterModule и устанавливает маршруты AppModule. Он в основном перенаправляет пустой путь на / home, а указывает / home на HomeModule.

Шаг 6

app \ home \ home.module.ts - определяет новый модуль HomeModule.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule(
   {
      imports: [
         NativeScriptCommonModule,
         HomeRoutingModule
      ],
      declarations: [
         HomeComponent
      ],
      schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class HomeModule { }

Вот,

HomeModule импортирует два модуля: HomeRoutingModule и NativeScriptCommonModule и один компонент HomeComponent.

Шаг 7

app \ home \ home.component.ts - определяет компонент Home и используется в качестве домашней страницы приложения.

import { Component, OnInit } from "@angular/core";
@Component(
   {
      selector: "Home", templateUrl: "./home.component.html" 
   }
) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
}

Вот,

HomeComponent устанавливает шаблон и селектор домашнего компонента.

Шаг 8

app \ home \ home-routing.module.ts - Модуль маршрутизации для HomeModule и используется для определения маршрутизации для домашнего модуля.

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
const routes: Routes = [
   { path: "", component: HomeComponent } 
]; 
@NgModule(
   { 
      imports: [NativeScriptRouterModule.forChild(routes)], 
      exports: [NativeScriptRouterModule] 
   }
) 
export class HomeRoutingModule { }

Вот,

HomeRoutingModule устанавливает пустой путь к HomeComponent.

Шаг 9

app.component.html и home.component.html - они используются для разработки пользовательского интерфейса приложения с использованием компонентов пользовательского интерфейса NativeScript.

Запустите ваше приложение

Если вы хотите запустить приложение без использования какого-либо устройства, введите следующую команду -

tns preview

После выполнения этой команды будет сгенерирован QR-код для сканирования и подключения к вашему устройству.

Вывод

QRCode

Теперь QR-код создается и на следующем шаге подключается к PlayGround.

NativeScript PlayGround

Откройте приложение NativeScript PlayGround на своем мобильном устройстве iOS или Android, затем выберите параметр « Сканировать QR-код» . Это откроет камеру. Сфокусируйте QR-код, отображаемый на консоли. Это просканирует QR-код. Сканирование QR-кода запустит сборку приложения, а затем синхронизирует приложение с устройством, как показано ниже -

Copying template files... 
Platform android successfully added. v6.3.1 
Preparing project... 
File change detected. Starting incremental webpack compilation... 
webpack is watching the files… 
Hash: 1f38aaf6fcda4e082b88 
Version: webpack 4.27.1 
Time: 9333ms 
Built at: 01/04/2020 4:22:31 PM
               Asset          Size        Chunks         Chunk Names 
               0.js           8.32 KiB     0     [emitted] 
          bundle.js           22.9 KiB    bundle [emitted] bundle 
       package.json          112 bytes           [emitted] 
         runtime.js             73 KiB   runtime [emitted] runtime 
tns-java-classes.js            0 bytes  [emitted] 
          vendor.js            345 KiB   vendor  [emitted] vendor 
Entrypoint bundle = runtime.js vendor.js bundle.js 
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy 
namespace object 160 bytes {bundle} [built] [./app.css] 1.18 KiB {bundle} [built] [./app/app-routing.module.ts] 688 bytes {bundle} [built] 
[./app/app.component.html] 62 bytes {bundle} [built] 
[./app/app.component.ts] 354 bytes {bundle} [built] 
[./app/app.module.ts] 3.22 KiB {bundle} [built] 
[./app/home/home.module.ts] 710 bytes {0} [built] 
[./main.ts] 1.84 KiB {bundle} [built] 
[@angular/core] external "@angular/core" 42 bytes {bundle} [built] [nativescript-angular/nativescript.module] external "nativescript-
angular/nativescript.module" 42 bytes {bundle} [built] 
[nativescript-angular/platform] external "nativescript-angular/platform" 42 
bytes {bundle} [built] [tns-core-modules/application] external "tns-core-
modules/application" 42 bytes {bundle} [built] 
[tns-core-modules/bundle-entry-points] external "tns-core-modules/bundle-entry-points" 42 
bytes {bundle} [built] 
[tns-core-modules/ui/frame] external "tns-core-
modules/ui/frame" 42 bytes {bundle} [built] 
[tns-core-modules/ui/frame/activity] external "tns-core-
modules/ui/frame/activity" 42 bytes {bundle} [built] 
   + 15 hidden modules Webpack compilation complete. Watching for file changes. 
Webpack build done! 
Project successfully prepared (android) 
Start sending initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-
b02f-3dc6d4ee0e1f). 
Successfully sent initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-b02f-3dc6d4ee0e1f). 
LOG from device Bala Honor Holly: HMR: Hot Module Replacement Enabled. Waiting for signal. 
LOG from device Bala Honor Holly: Angular is running in the development mode. 
Call enableProdMode() to enable the production mode.

Вывод

После сканирования вы должны увидеть свое BlankNgApp на своем устройстве. Это показано ниже -

Запустите ваше приложение на устройстве

Если вы хотите протестировать подключенное устройство в своем приложении, вы можете проверить его, используя следующий синтаксис:

'tns device <Platform> --available-devices'

После этого вы можете запустить свое приложение, используя следующую команду -

tns run

Приведенная выше команда используется для локального создания ваших приложений и установки на устройства Andriod или iOS. Если вы хотите запустить свое приложение на симуляторе Android, введите следующую команду -

tns run android

Для устройства iOS вы можете выполнить следующую команду -

tns run ios

Это инициализирует приложение на устройстве Android / iOS. Мы обсудим это более подробно в следующих главах.

LiveSync

NativeScript обеспечивает синхронизацию изменений в приложении с приложением предварительного просмотра в реальном времени. Давайте откроем проект с помощью любого из ваших любимых редакторов (Visual Studio Code будет идеальным выбором для лучшей визуализации). Давайте внесем некоторые изменения в наш код и посмотрим, как это будет обнаружено в LiveSync.

Теперь откройте файл app.css, и он будет иметь содержимое ниже -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/blue.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

Здесь оператор импорта сообщает цветовую схему нашего приложения. Изменим синюю цветовую схему наbrown цветовая схема, как указано ниже -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

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

Вывод

Ниже находится домашняя страница BlankNgApp - Коричневая тема.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved