NativeScript Cheatsheet

NativeScript - Applicazioni mobili native con JavaScript__HTML_TAG_78_ __HTML_TAG_79_ NativeScript è un framework open source per la costruzione di applicazioni mobili veramente native utilizzando JavaScript, TypeScript, Angular, Vue.js o React. Fornisce accesso diretto alle API native e ai componenti UI senza WebViews. __HTML_TAG_80_ __HTML_TAG_81_ Traduzione: 📋 Copia Tutti i comandi_HTML_TAG_84__ 📄 Generare PDF

Traduzione: ## Tavola dei contenuti - [Installazione](#installazione) [Getting Started](#getting-started) - [Struttura progetto](#struttura progetto) [Comandi CLI](#cli-commands) - [Core Concepts](#core-concepts) - [UI Components](#ui-components) - No. [Navigazione] - [Data Binding](#data-binding) [Styling](#styling) - [Platform APIs](#platform-apis) [Plugins](#plugins) - [Integrazione angolare](#integrazione angolare) - [Vue.js Integration](#vuejs-integration) - [React Integration](#react-integration) [Testing](#testing) - [Performance](#performance) - [Deployment](#deployment) [Le migliori pratiche](#best-practices) ## Installazione ## Prerequisiti Traduzione: ## NativeScript CLI Installazione Traduzione: ### Development Environment Setup Traduzione: # ### Crea nuovo progetto Traduzione: ### Modelli di progetto Traduzione: ## Struttura del progetto ### Struttura di base Traduzione: ### app.js (Entry Point) Traduzione: ### main-page.xml (UI Markup) Traduzione: ### main-page.js (Page Logic) Traduzione: # CLI # Comandi ### Project Management Traduzione: ### Comandi di sviluppo Traduzione: ## Costruire comandi Traduzione: ### Plugin Management # ## Core Concepts ## Osservabile e Data Binding Traduzione: ## Pagina Navigazione Traduzione: #### Application Lifecycle Traduzione: ## UI Components ### Componenti di base Traduzione: ### Elenco componenti Traduzione: ### Componenti avanzati Traduzione: # Layouts # ## StackLayout # Traduzione: # # GridLayout # Traduzione: ## FlexboxLayout # Traduzione: ## AbsoluteLayout # Traduzione: # DockLayout # Traduzione: ## WrapLayout # Traduzione: ## Navigazione ## # Navigazione frame Traduzione: ### Navigazione modulare Traduzione: ### Tab Navigation Traduzione: ### Cassetto di navigazione Traduzione: # Data Binding ## One-Way Binding Traduzione: ## Two-Way Binding # Traduzione: ### Event Binding Traduzione: ### Elenco dei binari Traduzione:

<!-- List with binding -->
<StackLayout>
    <Button text="Add Item" tap="{{ addItem }}" />
    <ListView items="{{ items }}" itemTap="{{ onItemTap }}">
        <ListView.itemTemplate>
            <GridLayout columns="*, auto" class="list-item">
                <StackLayout col="0">
                    <Label text="{{ name }}" class="item-name" />
                    <Label text="{{ description }}" class="item-description" />
                </StackLayout>
                <Button text="Delete" col="1" tap="{{ $parents['Page'].removeItem, $index }}" />
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>
</StackLayout>

# Styling # ## CSS Styling # # ### Supporto SCSS Traduzione:

// app.scss
@import '@nativescript/theme/scss/variables/blue';
@import '@nativescript/theme/scss/core';
@import '@nativescript/theme/scss/default';

// Variables
$primary-color: #3f51b5;
$secondary-color: #f0f0f0;
$text-color: #333;
$border-color: #e0e0e0;

// Mixins
@mixin button-style($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    padding: 12;
    border-radius: 4;
    font-size: 16;
}

@mixin card-style {
    background-color: white;
    border-radius: 8;
    elevation: 2;
    margin: 8;
    padding: 16;
}

// Styles
.page {
    background-color: $secondary-color;
}

.btn-primary {
    @include button-style($primary-color, white);
}

.btn-secondary {
    @include button-style($secondary-color, $text-color);
    border-width: 1;
    border-color: $border-color;
}

.card {
    @include card-style;
}

// Nested styles
.list-container {
    .list-item {
        padding: 16;
        border-bottom-width: 1;
        border-bottom-color: $border-color;

        .item-title {
            font-size: 18;
            font-weight: bold;
            color: $text-color;
        }

        .item-subtitle {
            font-size: 14;
            color: lighten($text-color, 20%);
        }
    }
}

## Platform-Specific Styling Traduzione: ### Dynamic Styling Traduzione: ## Platform APIs ### Informazioni sul dispositivo Traduzione: ### File System Traduzione: ### HTTP Requests Traduzione: ### Local Storage Traduzione: # Plugin # ### Traduzione: ### # Using Camera Plugin Traduzione: ### # Usando il plugin di geolocalizzazione Traduzione: ### Custom Plugin Development Traduzione: ## Integrazione angolare ## # Setup Angular Project Traduzione: ### App Module Traduzione: ### Routing # Traduzione: ### Component Traduzione:

<!-- home.component.html -->
<ActionBar title="Home" class="action-bar">
    <ActionItem text="Refresh" (tap)="onRefresh()" ios.position="right"></ActionItem>
</ActionBar>

<GridLayout rows="*">
    <ActivityIndicator [busy]="isLoading" *ngIf="isLoading"></ActivityIndicator>

    <ListView [items]="items" (itemTap)="onItemTap($event.object.bindingContext)" *ngIf="!isLoading">
        <ng-template let-item="item">
            <GridLayout columns="auto, *" rows="auto, auto" class="list-item">
                <Label [text]="item.title" row="0" col="1" class="item-title"></Label>
                <Label [text]="item.description" row="1" col="1" class="item-description"></Label>
            </GridLayout>
        </ng-template>
    </ListView>
</GridLayout>

### Servizio Traduzione: ## Vue.js Integrazione ## # Setup Vue Project Traduzione: ### Main App __________ ### Vue Component Traduzione: # # Vue Router # Traduzione: # Integrazione reattiva ### Setup React Project Traduzione: ### App Component Traduzione: # Componente di correzione Traduzione: # Agganci reattivi Traduzione: ## Testing ### Unit Testing Traduzione: # Configurazione dei test Traduzione: ### Unit Test Esempio Traduzione: ### E2E Testing Traduzione:

// e2e/test.spec.js
const wd = require('wd');
const { expect } = require('chai');

describe('App E2E Tests', function() {
    let driver;

    before(async function() {
        this.timeout(60000);

        driver = wd.promiseChainRemote('localhost', 4723);

        const desiredCaps = {
            platformName: 'Android',
            platformVersion: '10',
            deviceName: 'emulator-5554',
            app: './platforms/android/app/build/outputs/apk/debug/app-debug.apk',
            automationName: 'UiAutomator2'
        };

        await driver.init(desiredCaps);
    });

    after(async function() {
        if (driver) {
            await driver.quit();
        }
    });

    it('should display home screen', async function() {
        const title = await driver.elementByAccessibilityId('home-title');
        const titleText = await title.text();
        expect(titleText).to.equal('Home');
    });

    it('should navigate to details screen', async function() {
        const button = await driver.elementByAccessibilityId('details-button');
        await button.tap();

        const detailsTitle = await driver.elementByAccessibilityId('details-title');
        const titleText = await detailsTitle.text();
        expect(titleText).to.equal('Details');
    });

    it('should add new item', async function() {
        const textField = await driver.elementByAccessibilityId('new-item-field');
        await textField.sendKeys('Test Item');

        const addButton = await driver.elementByAccessibilityId('add-button');
        await addButton.tap();

        const listItem = await driver.elementByAccessibilityId('list-item-0');
        const itemText = await listItem.text();
        expect(itemText).to.contain('Test Item');
    });
});

## Performance ## Gestione della memoria Traduzione: ### Ottimizzazione immagine Traduzione: ## Elenco Prestazioni Traduzione: # ### Android Deployment Traduzione: ### iOS Deployment Traduzione: ### Integrazione continua Traduzione: # Migliori Pratiche ### Struttura del progetto Traduzione: ### Code Organization Traduzione: ## Performance Best Practices Traduzione: --- ## Sommario NativeScript fornisce una potente piattaforma per la costruzione di applicazioni mobili veramente native utilizzando le tecnologie web: **Key Vantaggi: ** - **True Native Performance**: Accesso diretto alle API native senza WebViews - **Code Sharing**: Condividere la logica aziendale su piattaforme mantenendo l'interfaccia utente nativa - ** Flessibilità del framework**: Supporto per Angular, Vue.js, React, and vaniglia JavaScript - **Native UI**: Piattaforma specifica Componenti dell'interfaccia utente che guardano e sentono nativo - **Plugin Ecosystem**: ecosistema ricco di plugin per funzionalità native **Migliori casi di utilizzo: ** - App che richiedono prestazioni native e UI - App cross-platform con logica aziendale complessa - Team con competenze di sviluppo web - Applicazioni che necessitano di un ampio accesso API nativo - Applicazioni Enterprise con requisiti personalizzati **Considerazioni: - Curva dell'apprendimento degli stereotipi rispetto ai quadri ibridi - Dimensioni più grandi rispetto alle soluzioni web - Richiesta di prove specifiche della piattaforma - bisogno di capire concetti di piattaforma nativo NativeScript è l'ideale per gli sviluppatori che vogliono sfruttare le tecnologie web, mentre la costruzione di applicazioni mobili veramente native con eccellenti prestazioni e integrazione della piattaforma. Traduzione: copia funzioneToClipboard() {} const commands = document.querySelectorAll('code'); tutti i Comandi = ''; comandi. per ogni(cmd => AllCommands += cmd.textContent + '\n'); navigatore.clipboard.writeText(tutti iComandi); alert('Tutti i comandi copiati a clipboard!'); # funzione generaPDF() { finestra.print(); #