Introductie tot Smart Watch App Development met Tizen

Wat je gaat creëren

Een slimme ontwikkelaar van horloge-apps worden is een geweldig idee, maar wat als je een HTML-ontwikkelaar bent? Zult u in staat zijn om uw droom te realiseren zonder over te schakelen naar een heel ander platform? Moet je al je HTML-vaardigheden opgeven en helemaal opnieuw beginnen? Maak je geen zorgen. Tizen komt je te hulp.

Tizen is een besturingssysteem van de Linux-familie, gericht op een reeks apparaten van smartphones tot slimme horloges en nog veel meer. Hoewel Tizen een project is binnen de Linux Foundation, wordt het begeleid door de Tizen Association, wiens leden Samsung, Intel en andere bekende bedrijven in de technologie-industrie omvatten.

In deze zelfstudie laat ik je zien hoe je de Tizen SDK voor Wearable installeert en configureert en ontwikkel een slimme horloge-applicatie met de IDE. Laten we beginnen.

1. Installeren en configureren van de SDK

Stap 1: Tizen SDK of Tizen SDK voor draagbaar?

Momenteel zijn er twee soorten SDK's beschikbaar, Tizen SDK en Tizen SDK voor Wearable. Omdat deze zelfstudie gaat over het ontwikkelen van een standalone slimme horloge-app, is wat je nodig hebt Tizen SDK voor Wearable.

Je kunt het downloaden van de website van Tizen Developers. U moet een geschikt downloaden installatie manager die overeenkomt met uw besturingssysteem en versie. Als u de voorkeur geeft aan een offline installatie voor een online installatie, downloadt u een SDK-afbeelding te. Als uw besturingssysteem Windows 8 of Windows 8.1 is, kunt u de installatiebestanden downloaden die zijn gecategoriseerd onder Windows 7. Ze werken prima op Windows 8 en 8.1.

Stap 2: Vereisten

Raadpleeg de gedetailleerde instructies van Tizen voor meer informatie over de hardware- en softwarevereisten waaraan uw computer moet voldoen.

U kunt de SDK installeren, zelfs als uw computer niet aan deze hardwarevereisten voldoet. Als u dat wel doet, zal de slimme horloge-emulator traag zijn, wat resulteert in slechte app-testen. Raadpleeg de documentatie voor meer informatie. Het legt uit hoe te activeren Virtualisatie Technologie (VT) in uw BIOS en Preventie van gegevensuitvoering op Windows.

Stap 3: De SDK installeren

1. Voer de ... uit installatie manager je hebt eerder gedownload. Dit is een .exe-bestand met een bestandsnaam zoals tizen-wearable-sdk-2.2.159_windows64.exe, afhankelijk van uw besturingssysteem en versie.
2. Klik gevorderd om naar het volgende scherm te gaan.
3. In dat scherm, controleer de SDK-afbeelding keuzerondje en ga naar het zipbestand met de juiste SDK-afbeelding. Houd er rekening mee dat ik ervan uitga dat u de voorkeur geeft aan een offline installatie en dat u de benodigde SDK-afbeelding al naar uw ontwikkelmachine hebt gedownload.
4. Selecteer de SDK-afbeelding zipbestand en klik Open in het dialoogvenster.
5. Een SDK-afbeelding extraheren bericht verschijnt. Klik OK na het afronden van de extractie.
6. Klik volgende en de Licentieovereenkomst venster verschijnt.
7. Ga akkoord met de licentie en klik volgende.
8. De configuratievenster verschijnt hierna. Ik raad aan om alle selectievakjes aangevinkt en te klikken volgende.
9. Eindelijk, wanneer de installatie manager vraagt ​​naar een locatie voor de installatie, geef uw keuze op door een pad te selecteren en op te klikken Installeren.
10. Als u uw BIOS al correct hebt geconfigureerd, Intel Hardware Accelerated Execution Manager (Intel HAXM) wordt tijdens dit proces ook automatisch geïnstalleerd. Als dat niet het geval is, verlaat u het installatieproces en configureert u het BIOS zodat Intel HAXM kan worden gebruiktworden geïnstalleerd.
11. Vergeet niet aan te zetten Preventie van gegevensuitvoering als uw besturingssysteem Windows is. Doorgaan met de installatie.

Als je wilt, kun je installeren Intel HAXM afzonderlijk. Zodra de installatie is voltooid, start u de computer opnieuw op.

Stap 4: De IDE configureren

1. Blader naar de map waarin u de SDK hebt geïnstalleerd en navigeer naar de ide submap. Voer het uitvoerbare bestand met de naam uit IDE.
2. Na een paar minuten verschijnt er een venster waarin om een ​​locatie wordt gevraagd voor de werkruimte om de apps die u ontwikkelt op te slaan. Geef een pad naar keuze op voor de locatie en klik op OK. Na de configuratie zou de IDE moeten verschijnen.

Stap 5: Functies van de IDE

Aan de linkerkant van de IDE zijn er twee vensters, Projectverkenner en Verbindingsverkenner. De Projectverkenner toont de projecten gemaakt door de gebruiker. De Verbindingsverkenner geeft de verbonden apparaten weer die momenteel beschikbaar zijn, emulatorinstanties of externe apparaten.

Stap 6: Een emulator-instance maken

1. In de Verbindingsverkenner, Klik op de Emulator Manager pictogram, de meest linkse blauwe knop.
2. Klik Ja in de Gebruikersaccount controle venster dat verschijnt. Dit zal de Emulator Manager venster.
3. Klik Voeg nieuw toe en geef de instantie van de emulator een naam.
4. Wanneer u klikt Bevestigen, de nieuwe emulator-instantie wordt gemaakt. Klik op de blauwe knop met een pijl in het emulatorpictogram om de emulator te starten.

Het duurt even voordat de emulator is gestart. U zou een venster moeten zien met een startscherm dat lijkt op het onderstaande screenshot wanneer het actief is. De emulatorinstantie zou moeten verschijnen als een item in de Verbindingsverkenner.

Veeg omhoog vanuit het onderste middelpunt van het startscherm om naar het scherm te gaan waarin de geïnstalleerde apps op het apparaat of de emulator worden weergegeven. Omdat je nog geen apps hebt geïnstalleerd, alleen de instellingen pictogram wordt weergegeven.

U kunt teruggaan naar het vorige scherm of een app afsluiten door vanaf het midden bovenaan in het scherm naar beneden te vegen.

2. Een eenvoudige komische app ontwikkelen

In dit voorbeeld gaan we een eenvoudige app maken om een ​​strip weer te geven. Laten we elke stap om de beurt bekijken.

Stap 1: een nieuw project maken

Laten we een nieuw project maken in de IDE.

1. Ga naar Bestand> Nieuw> Tizen Wearable Web Project.
2. Selecteer in het venster dat verschijnt Basic> Basistoepassing en stel de Naam van het project naar myapp.
3. Kruis de ... aan Gebruik standaardlocatie aankruisvakje of blader naar een andere locatie van uw keuze en klik op Af hebben.
4. Jouw nieuwe project, myapp, zou moeten verschijnen in de Projectverkenner.
   
5. Klik op de kleine pijl links van myapp om de projectstructuur uit te breiden.
6. Je zou een moeten zien index.htmldien een ... in css submap, a js submap en enkele andere bestanden en mappen.

HTML, CSS en JavaScript vormen de basis voor het programmeren op het Tizen-platform. Als u een HTML-wizard bent, hoeft u geen nieuwe programmeertaal te leren om toepassingen voor het Tizen-platform te schrijven. U kunt uw bestaande HTML-, CSS- en JavaScript-vaardigheden gebruiken.

Stap 2: Bestanden, middelen en bronnen toevoegen

We moeten eerst twee submappen toevoegen aan de myapp project, grappig en afbeeldingen. Klik hiervoor met de rechtermuisknop op myapp projectmap in de IDE en selecteer Nieuw> map. De submappen moeten verschijnen in de uitgebreide map myappmap in de IDE.

Download de bronbestanden voor dit project vanuit GitHub en navigeer naar de afbeeldingen submap, die een aantal png-bestanden bevat. Kopieer de png-bestanden naar de afbeeldingen submap die u zojuist hebt gemaakt.

U kunt bestanden plakken in de afbeeldingen submap in de Projectverkenner venster door met de rechtermuisknop op de submap te klikken en te selecteren Pasta vanuit het pop-upmenu.

Maak vervolgens negen HTML-bestanden met de volgende bestandsnamen in de grappig submap door met de rechtermuisknop op de knop te klikken grappig submap en selecteren Nieuw> Bestand. Zorg ervoor dat u de .html extensie voor de bestanden.

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

U zou nu negen HTML-bestanden moeten hebben in de grappig submap.

Stap 3: Code toevoegen

Laten we nu de code bewerken index.html. Dit bestand is het beginpunt van uw applicatie. Dubbelklik index.html om het bestand in de IDE te openen. Wijzig de inhoud van de . Wijzig vervolgens de inhoud van de tag met het volgende:

 
 
 
<<>>
 
 

Het enige wat we deden, is een afbeelding aan de pagina toevoegen en twee knoppen om naar de andere pagina's te navigeren, omdat onze strip tien pagina's bevat. Nadat u deze wijzigingen hebt aangebracht, slaat u het bestand op door te selecteren Bestand> Opslaan van het menu.

Als HTML en CSS nieuw voor u zijn, heeft Tuts + een enorme verzameling uitstekende zelfstudies die u helpen om op de hoogte te blijven van de basisbeginselen van webontwikkeling..

Dubbelklik vervolgens op style.css in de css submap en verander de inhoud zoals hieronder getoond.

* font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;  body margin: 0px auto; background-color: # 0a3003;  img marge: 0; opvulling: 0; rand: 0; breedte: 100%; hoogte: auto; weergave: blok; zweven: links;  .btn display: inline-block; opvulling: 15px 4% 15px 4%; marge links: 1%; margin-right: 1%; margin-top: 5px; margin-bottom: 5px; lettertypegrootte: 30px; text-align: center; vertical-align: middle; rand: 0; kleur: #ffffff; achtergrondkleur: # 4b4237; breedte: 40%; hoogte: 80 px; tekstdecoratie: geen; 

We hebben een aantal styling toegevoegd voor body, afbeeldingen en de navigatiemenu's. Nadat u de wijzigingen hebt aangebracht, slaat u het bestand op.

Voeg op dezelfde manier code toe aan alle andere HTML-bestanden die u hebt gemaakt. De style.css bestand in de css submap moet extern zijn gekoppeld aan al deze HTML-bestanden. Als u zeker weet dat u deze stap uitvoert, downloadt u de bronbestanden van GitHub en onderzoekt u de bron voor verduidelijking.

Stap 4: De app testen

Selecteer de app om uw app te testen myapp projectmap en kies uit het menu Project> Bouwproject om het project te bouwen. Zorg ervoor dat het emulator-exemplaar actief is.

Klik met de rechtermuisknop op de myapp map en selecteer Run As> Tizen Wearable Web Application om het project in de emulator uit te voeren. Gebruik de pijlknoppen in de gebruikersinterface om naar de volgende of vorige pagina te gaan. Veeg omlaag vanaf de bovenkant van het scherm om de app te sluiten.

Conclusie

In deze tutorial hebben we een eenvoudige komische app gebouwd met de Tizen SDK voor Wearable en uitgevoerd op de slimme horloge-emulator die meegeleverd wordt met de IDE. De echte lol begint wanneer u klaar bent om het te installeren en uit te voeren op een fysiek apparaat.

U kunt veel aanvullende informatie vinden op de websites van Samsung en Tizen Developers. Waar wacht je op?