Accentsconagua

Introduksjon til Smart Watch App Development med Tizen

Kode
Share
Hva du skal skape

Å bli en smart watch app utvikler er en god ide, men hva om du er en HTML-utvikler? Vil du være i stand til å realisere drømmen din uten å bytte til en helt annen plattform? Må du forlate alle dine HTML-ferdigheter og starte om igjen? Ikke bekymre deg. Tizen kommer til din redning.

Tizen er et operativsystem av Linux-familien, som målretter mot en rekke enheter fra smarttelefoner til smarte klokker og mye mer. Mens Tizen er et prosjekt i Linux Foundation, styres det av Tizen Association, hvis medlemmer inkluderer Samsung, Intel og andre kjente selskaper i teknologibransjen.

I denne veiledningen vil jeg vise deg hvordan du installerer og konfigurerer Tizen SDK for Wearable og utvikler et smart watch-program med IDE. La oss komme i gang.

1. Installere og konfigurere SDK

Trinn 1: Tizen SDK eller Tizen SDK for Wearable?

Foreløpig finnes to typer SDKer, Tizen SDK og Tizen SDK for Wearable. Siden denne opplæringen handler om å utvikle en frittstående smart watch-app, trenger du Tizen SDK for Wearable.

Du kan laste den ned fra nettstedet Tizen Developers. Du må laste ned et passende installasjonsbehandling som samsvarer med operativsystemet og versjonen. Hvis du foretrekker en frakoblet installasjon til en online, må du laste ned en SDK-bilde også. Hvis operativsystemet ditt er Windows 8 eller Windows 8.1, kan du laste ned installasjonsfilene kategorisert under Windows 7. De vil fungere på Windows 8 og 8.1 bare bra.

Trinn 2: Krav

Se Tizens detaljerte instruksjoner for å lese om maskinvare- og programvarekravene datamaskinen skal møte.

Du kan installere SDK-en, selv om datamaskinen ikke oppfyller disse maskinvarekravene. Men hvis du gjør det, vil smart watch emulatoren være sakte, noe som resulterer i dårlig app testing. Gå til dokumentasjonen for mer informasjon. Det forklarer hvordan du aktiverer Virtualiseringsteknologi (VT) i BIOS og Forebygging av datautførelse på Windows.

Trinn 3: Installere SDK

  1. Kjør installasjonsbehandling du lastet ned tidligere. Dette er en .exe-fil med et filnavn som tizen-wearable-sdk-2.2.159_windows64.exe, avhengig av operativsystemet og versjonen.
  2. Klikk Avansert for å gå til neste skjermbilde.
  3. På den skjermen, sjekk SDK-bilde alternativknappen og naviger til zip-filen som inneholder riktig SDK-bilde. Vær oppmerksom på at jeg antar at du foretrekker en frakoblet installasjon, og du har allerede lastet ned det nødvendige SDK-bildet til utviklingsmaskinen din.
  4. Velg SDK-bilde zip-fil og klikk Åpen i dialogboksen.
  5. en Ekstra SDK-bilde meldingen vil vises. Klikk OK etter avslutning av ekstraksjonen.
  6. Klikk neste og Lisensavtale vinduet vil vises.
  7. Enig med lisensen og klikk neste.
  8. De konfigurasjonsvindu vises neste. Jeg anbefaler at du forlater alle avmerkingsboksene og klikker neste.
  9. Til slutt, når installasjonsbehandling ber om et sted for installasjonen, spesifiser ditt valg ved å velge en bane og klikke Installere.
  10. Hvis du allerede har konfigurert BIOS riktig, Intel Hardware Accelerated Execution Manager (Intel HAXM) vil også bli installert automatisk under denne prosessen. Hvis ikke, avslutter installasjonsprosessen og konfigurerer BIOS slik at den tillater Intel HAXMå bli installert.
  11. Ikke glem å aktivere Forebygging av datautførelse hvis operativsystemet er Windows. Fortsett installasjonen.

Hvis du ønsker det, kan du installere Intel HAXM hver for seg. Når installasjonen er ferdig, start datamaskinen på nytt.

Trinn 4: Konfigurere IDE

  1. Bla til mappen der du har installert SDK og naviger til ide undermappe. Kjør den kjørbare filen som heter IDE.
  2. Etter et par minutter vises et vindu, og ber om en plassering for arbeidsområde for å lagre appene du utvikler. Angi en valgfri sti for stedet og klikk OK. Etter konfigurasjonen skal IDE vises.

Trinn 5: Funksjoner av IDE

I venstre rute av IDE er det to vinduer, Prosjekt Explorer og Connection Explorer. De Prosjekt Explorer viser prosjektene opprettet av brukeren. De Connection Explorer Viser de tilkoblede enhetene som er tilgjengelige, emulatorinstanser eller eksterne enheter.

Trinn 6: Opprette en emulator-instans

  1. I Connection Explorer, Klikk på Emulator Manager ikon, venstre blåste knapp.
  2. Klikk Ja i Brukerkonto-kontroll vindu som vises. Dette vil hente opp Emulator Manager vindu.
  3. Klikk Legg til ny og gi emulatorinstansen et navn.
  4. Når du klikker Bekrefte, Den nye emulatorinstansen vil bli opprettet. Klikk på den blå knappen med en pil i emulatorikonet for å starte emulatoren.

Det vil ta litt tid å starte emulatoren. Du bør se et vindu med startskjerm som ligner på skjermbildet nedenfor når det er oppe. Emulatorinstansen skal vises som en oppføring i Connection Explorer.

Sveip opp fra det nederste midtpunktet på startskjermen for å gå til skjermen som viser de installerte appene på enheten eller emulatoren. Siden du ikke har installert noen apper ennå, er det bare innstillinger ikonet vises.

Du kan gå tilbake til forrige skjermbilde eller avslutte en app ved å sveipe ned fra toppen av midten av skjermen.

2. Utvikle en enkel tegneserieapp

I dette eksemplet skal vi lage en enkel app for å vise en tegneserie. La oss se på hvert trinn i sin tur.

Trinn 1: Opprette et nytt prosjekt

La oss lage et nytt prosjekt i IDE.

  1. Gå til Fil> Nytt> Tizen Wearable Web Project.
  2. I vinduet som vises, velg Grunnleggende> Grunnleggende applikasjon og sett Prosjektnavn til MinApp.
  3. Kryss av Bruk standard plassering merk av i boksen eller bla til et annet sted du ønsker, og klikk Bli ferdig.
  4. Ditt nye prosjekt, MinApp, skal vises i Prosjekt Explorer.
  5. Klikk på den lille pilen til venstre for MinApp å utvide prosjektstrukturen.
  6. Du bør se en index.htmlfil, a css undermappe, a js undermappe og noen andre filer og mapper.

HTML, CSS og JavaScript danner grunnlaget for programmering på Tizen-plattformen. Hvis du er en HTML-veiviser, trenger du ikke å lære et nytt programmeringsspråk for å skrive programmer for Tizen-plattformen. Du kan bruke dine eksisterende HTML-, CSS- og JavaScript-ferdigheter.

Trinn 2: Legge til filer, eiendeler og ressurser

Vi må først legge til to undermapper til MinApp prosjekt, komisk og Bilder. For å gjøre dette, høyreklikk på MinApp prosjektmappe i IDE og velg Ny> Mappe. Undermappene skal vises i det utvidede MinAppmappe i IDE.

Last ned kildefilene for dette prosjektet fra GitHub og naviger til Bilder undermappe, som inneholder en rekke png-filer. Kopier png-filene til Bilder undermappe du opprettet for et øyeblikk siden.

Du kan lime inn filer til Bilder undermappe i Prosjekt Explorer vindu ved å høyreklikke på undermappen og velge Lim inn fra popup-menyen.

Deretter opprett ni HTML-filer med følgende filnavn i komisk undermappe ved å høyreklikke på komisk undermappe og valg Ny> Fil. Pass på at du inkluderer .html utvidelse for filene.

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

Du bør nå ha 9 HTML-filer i komisk undermappe.

Trinn 3: Legge til kode

La oss nå redigere koden i index.html. Denne filen er inngangspunktet for søknaden din. Dobbeltklikk index.html for å åpne filen i IDE. Endre innholdet i </code> tag til <code><title>2. Race. Deretter endrer du innholdet i merk med følgende:

 
 
Forside
 
<<>>

Alt vi gjorde, er å legge til et bilde på siden og to knapper for å navigere til de andre sidene siden tegneserien vår vil ha ti sider. Når du har gjort disse endringene, lagrer du filen ved å velge Fil> Lagre fra menyen.

Hvis du er ny på HTML og CSS, har Tuts + en enorm samling av gode opplæringsprogrammer som vil hjelpe deg med å komme opp til hastigheten med det grunnleggende om webutvikling.

Deretter dobbeltklikker du style.css i css undermappe og endre innholdet som vist nedenfor.

* font-familie: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;  kropp margin: 0px auto; background-color: # 0a3003;  img margin: 0; polstring: 0; grense: 0; bredde: 100%; høyde: auto; skjerm: blokk; flyte: venstre;  .btn display: inline-block; polstring: 15px 4% 15px 4%; margin-venstre: 1%; margin-høyre: 1%; margin-topp: 5px; margin-bunn: 5px; skriftstørrelse: 30px; tekst-align: center; vertikaljustering: midt; grense: 0; farge: #ffffff; bakgrunnsfarge: # 4b4237; bredde: 40%; høyde: 80px; tekst-dekorasjon: ingen;

Vi har lagt til noen styling for kropp, bilder og navigasjonsmenyene. Når du har gjort endringene, lagre filen.

Tilsvarende legger du til kode til alle de andre HTML-filene du har opprettet. De style.css fil i css undermappe må være eksternt koblet til alle disse HTML-filene. Hvis du er sikker på om dette trinnet, laster du ned kildefilene fra GitHub og undersøker kilden for avklaring.

Trinn 4: Teste appen

For å teste appen din, velg MinApp prosjektmappe og, fra menyen, velg Prosjekt> Bygg prosjekt å bygge prosjektet. Pass på at emulator-forekomsten er oppe og i gang.

Høyreklikk på MinApp mappe og velg Kjør som> Tizen Wearable Web Application å drive prosjektet i emulatoren. Bruk piltastene i brukergrensesnittet til å navigere til neste eller forrige side. Sveip ned fra toppen av skjermen for å avslutte appen.

Konklusjon

I denne opplæringen bygget vi en enkel tegneserieapp med Tizen SDK for Wearable og kjørte den på smart watch emulatoren som følger med IDE. Den virkelige moroa begynner når du er klar til å installere og kjøre den på en fysisk enhet.

Du finner mye mer informasjon på Samsung og Tizen Developers nettsteder. Hva venter du på?

Kode
×