Introduzione allo sviluppo dell'app Smart Watch con Tizen

Cosa starai creando

Diventare uno sviluppatore di app smart watch è una grande idea, ma cosa succede se sei uno sviluppatore HTML? Sarai in grado di realizzare il tuo sogno senza passare a una piattaforma completamente diversa? Devi abbandonare tutte le tue competenze HTML e ricominciare tutto da capo? Non ti preoccupare Tizen viene in tuo soccorso.

Tizen è un sistema operativo della famiglia Linux, che si rivolge a una gamma di dispositivi, dagli smartphone agli orologi intelligenti e molto altro ancora. Mentre Tizen è un progetto all'interno della Linux Foundation, è guidato dall'Associazione Tizen, i cui membri includono Samsung, Intel e altre società ben note nel settore tecnologico.

In questo tutorial, ti mostrerò come installare e configurare Tizen SDK per Wearable e sviluppare un'applicazione smart watch con l'IDE. Iniziamo.

1. Installazione e configurazione dell'SDK

Passaggio 1: Tizen SDK o Tizen SDK per Wearable?

Attualmente sono disponibili due tipi di SDK, Tizen SDK e Tizen SDK per Wearable. Poiché questo tutorial riguarda lo sviluppo di un'app smart watch autonoma, ciò che ti serve è Tizen SDK per Wearable.

È possibile scaricarlo dal sito Web di Tizen Developers. È necessario scaricare un appropriato installa gestore che corrisponde al tuo sistema operativo e versione. Se si preferisce un'installazione offline a una online, è necessario scaricare un Immagine SDK pure. Se il tuo sistema operativo è Windows 8 o Windows 8.1, puoi scaricare i file di installazione classificati in Windows 7. Funzioneranno su Windows 8 e 8.1 bene.

Passaggio 2: requisiti

Fare riferimento alle istruzioni dettagliate di Tizen per informazioni sui requisiti hardware e software che il computer deve soddisfare.

È possibile installare l'SDK anche se il computer non soddisfa questi requisiti hardware. Tuttavia, se lo fai, l'emulatore di smart watch sarà lento, risultando in test di app poveri. Visita la documentazione per maggiori dettagli. Spiega come abilitare Tecnologia di virtualizzazione (VT) nel BIOS e prevenzione di esecuzione dei dati Su Windows.

Passaggio 3: installazione dell'SDK

1. Corri il installa gestore hai scaricato prima. Questo è un file .exe con un nome di file come tizen-wearable-sdk-2.2.159_windows64.exe, a seconda del sistema operativo e della versione.
2. Clic Avanzate per andare alla schermata successiva.
3. In quella schermata, controlla il Immagine SDK pulsante di scelta e accedere al file zip contenente l'immagine SDK appropriata. Nota che presumo che tu preferisca un'installazione offline e che tu abbia già scaricato l'immagine SDK necessaria sul tuo computer di sviluppo.
4. Seleziona il Immagine SDK file zip e fare clic Aperto nella finestra di dialogo.
5. Un Estrazione dell'immagine SDK apparirà il messaggio Clic ok dopo aver terminato l'estrazione.
6. Clic Il prossimo e il Accordo di licenza apparirà la finestra.
7. Accettare la licenza e fare clic Il prossimo.
8. Il finestra di configurazione apparirà il prossimo Consiglio di lasciare tutte le caselle di controllo spuntate e facendo clic Il prossimo.
9. Finalmente, quando il installa gestore chiede una posizione per l'installazione, specificare la scelta selezionando un percorso e facendo clic Installare.
10. Se hai già configurato correttamente il tuo BIOS, Intel Hardware Accelerated Execution Manager (Intel HAXM) verrà automaticamente installato durante questo processo. In caso contrario, chiudere il processo di installazione e configurare il BIOS in modo che possa consentire Intel HAXMessere installato.
11. Non dimenticare di abilitare prevenzione di esecuzione dei dati se il tuo sistema operativo è Windows. Riprendi l'installazione.

Se lo desideri, puoi installare HAXM Intel separatamente. Al termine dell'installazione, riavvia il computer.

Passaggio 4: configurazione dell'IDE

1. Passare alla cartella in cui è installato l'SDK e navigare verso ide sottocartella. Esegui il file eseguibile denominato IDE.
2. Dopo alcuni minuti, verrà visualizzata una finestra che richiede una posizione per spazio di lavoro per salvare le app che sviluppi. Specificare un percorso a scelta per la posizione e fare clic ok. Dopo la configurazione, dovrebbe apparire l'IDE.

Passaggio 5: caratteristiche dell'IDE

Nel riquadro sinistro dell'IDE ci sono due finestre, Project Explorer e Connection Explorer. Il Project Explorer mostra i progetti creati dall'utente. Il Connection Explorer elenca i dispositivi collegati attualmente disponibili, le istanze dell'emulatore o i dispositivi remoti.

Passaggio 6: creazione di un'istanza dell'emulatore

1. Nel Connection Explorer, clicca sul Emulatore Manager icona, il pulsante blu più a sinistra.
2. Clic sì nel Controllo dell'account utente finestra che appare. Questo mostrerà il Emulatore Manager finestra.
3. Clic Aggiungere nuova e dare un nome all'istanza dell'emulatore.
4. Quando si fa clic Confermare, verrà creata la nuova istanza dell'emulatore. Fai clic sul pulsante blu con una freccia nell'icona dell'emulatore per avviare l'emulatore.

Ci vorrà del tempo per lanciare l'emulatore. Dovresti vedere una finestra con una schermata iniziale simile allo screenshot qui sotto quando è attiva e funzionante. L'istanza dell'emulatore dovrebbe apparire come una voce nel Connection Explorer.

Scorri verso l'alto dal punto centrale inferiore della schermata iniziale per andare alla schermata che mostra le app installate sul dispositivo o sull'emulatore. Dal momento che non hai ancora installato nessuna app, solo la impostazioni l'icona è visualizzata.

Puoi tornare alla schermata precedente o uscire da un'applicazione scorrendo verso il basso nella parte superiore centrale dello schermo.

2. Sviluppare una semplice app comica

In questo esempio, creeremo una semplice app per visualizzare una striscia a fumetti. Diamo un'occhiata a ogni fase a sua volta.

Passaggio 1: creazione di un nuovo progetto

Creiamo un nuovo progetto nell'IDE.

1. Vai a File> Nuovo> Tizen Wearable Web Project.
2. Nella finestra che appare, seleziona Di base> Applicazione di base e impostare il Nome del progetto a myapp.
3. Spunta il Usa la posizione predefinita selezionare la casella o selezionare una posizione diversa di propria scelta e fare clic finire.
4. Il tuo nuovo progetto, myapp, dovrebbe apparire nel Project Explorer.
   
5. Fai clic sulla piccola freccia a sinistra di myapp per espandere la struttura del progetto.
6. Dovresti vedere un index.htmlfile, a css sottocartella, a js sottocartella e alcuni altri file e cartelle.

HTML, CSS e JavaScript costituiscono la base per la programmazione sulla piattaforma Tizen. Se sei un mago HTML, allora non devi imparare un nuovo linguaggio di programmazione per scrivere applicazioni per la piattaforma Tizen. Puoi utilizzare le tue competenze HTML, CSS e JavaScript esistenti.

Passaggio 2: aggiunta di file, risorse e risorse

Prima dobbiamo aggiungere due sottocartelle al myapp progetto, comico e immagini. Per fare ciò, fare clic con il tasto destro del mouse su myapp cartella del progetto nell'IDE e selezionare Nuovo> Cartella. Le sottocartelle dovrebbero apparire nell'espansione myappcartella nell'IDE.

Scarica i file sorgente per questo progetto da GitHub e vai a immagini sottocartella, che contiene un numero di file png. Copia i file png sul immagini sottocartella che hai creato un momento fa.

È possibile incollare file su immagini sottocartella nel Project Explorer finestra facendo clic con il tasto destro sulla sottocartella e selezionando Incolla dal menu popup.

Quindi, creare nove file HTML con i seguenti nomi di file in comico sottocartella facendo clic con il tasto destro del mouse su comico sottocartella e selezione Nuovo> File. Assicurati di includere il .html estensione per i file.

• page1.html
• page2.html
• ...
• page9.html

Ora dovresti avere nove file HTML nel comico sottocartella.

Passaggio 3: aggiunta del codice

Modifichiamo ora il codice index.html. Questo file è il punto di ingresso della tua applicazione. Doppio click index.html per aprire il file nell'IDE. Cambia il contenuto del . Quindi, modifica il contenuto di tag con il seguente:

 
 
 
<<>>
 
 

Tutto ciò che abbiamo fatto è aggiungere un'immagine alla pagina e due pulsanti per navigare verso le altre pagine poiché il nostro fumetto avrà dieci pagine. Dopo aver apportato queste modifiche, salva il file selezionando File> Salva dal menu.

Se sei nuovo su HTML e CSS, Tuts + ha una vasta collezione di tutorial eccellenti che ti aiuteranno a familiarizzare con le basi dello sviluppo web.

Quindi, fai doppio clic style.css nel css sottocartella e cambiare il suo contenuto come mostrato di seguito.

* font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;  body margin: 0px auto; background-color: # 0a3003;  img margin: 0; padding: 0; confine: 0; larghezza: 100%; altezza: auto; blocco di visualizzazione; fluttuare: a sinistra; . btn display: inline-block; imbottitura: 15px 4% 15px 4%; margin-left: 1%; margine-destra: 1%; margin-top: 5px; margin-bottom: 5px; font-size: 30px; allineamento del testo: centro; allineamento verticale: medio; confine: 0; colore: #ffffff; background-color: # 4b4237; larghezza: 40%; altezza: 80 px; decorazione del testo: nessuna; 

Abbiamo aggiunto alcuni stili per il corpo, le immagini e i menu di navigazione. Dopo aver apportato le modifiche, salva il file.

Allo stesso modo, aggiungi il codice a tutti gli altri file HTML che hai creato. Il style.css file nel css la sottocartella deve essere collegata esternamente a tutti questi file HTML. Se sei sicuro di questo passaggio, scarica i file sorgente da GitHub ed esamina la fonte per chiarimenti.

Passaggio 4: test dell'applicazione

Per testare la tua app, seleziona il myapp cartella del progetto e, dal menu, scegliere Progetto> Crea progetto per costruire il progetto. Assicurati che l'istanza dell'emulatore sia attiva e funzionante.

Fare clic con il tasto destro del mouse su myapp cartella e selezionare Esegui come> Applicazione Web indossabile Tizen per eseguire il progetto nell'emulatore. Utilizzare i pulsanti freccia nell'interfaccia utente per navigare alla pagina successiva o precedente. Scorri verso il basso dalla parte superiore dello schermo per uscire dall'app.

Conclusione

In questo tutorial, abbiamo creato una semplice app comica con Tizen SDK per Wearable e l'abbiamo eseguita sull'emulatore smart watch fornito in dotazione con l'IDE. Il vero divertimento inizia quando sei pronto per installarlo ed eseguirlo su un dispositivo fisico.

Puoi trovare molte informazioni aggiuntive sui siti Web Samsung e Tizen Developers. Che cosa state aspettando?