Introduction til Smart Watch App Development med Tizen
36
Del
4
Del
Dette cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Hva du skal lage
Bli en smart klokke app utvikleren er en god idé, men hva hvis 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 helt på nytt? Ikke bekymre deg. Tizen kommer til unnsetning.
Tizen er et operativsystem for Linux familien, rettet mot en rekke enheter fra smarttelefoner til smarte klokker og mye mer. Mens Tizen er et prosjekt innen Linux Foundation, er det styrt av Tizen Association, hvis medlemmer inkluderer Samsung, Intel og andre kjente selskaper i teknologiindustrien.
I denne opplæringen, vil jeg viser deg hvordan du installerer og konfigurerer Tizen SDK for Wearable og utvikle en smartur søknad med IDE. La oss komme i gang.
1. Installere & Konfigurere SDK
Trinn 1: Tizen SDK eller Tizen SDK for bærbar?
Foreløpig to typer SDK er tilgjengelig, Tizen SDK og Tizen SDK for bærbar. Siden thistutorial handler om å utvikle en frittstående smartur app, det du trenger er TizenSDK for bærbar.
Du kan laste det ned fra Tizen Utviklere website.You må laste ned et passende installere manager som passer din operatingsystem og versjon. Hvis du foretrekker en offline installasjon til en elektronisk en, må du laste ned en SDK bilde også. Hvis operativsystemet er Windows 8 eller 8.1, kan du laste ned installasjonsfilene kategorisert i henhold Windows7. De vil fungere på Windows 8 og 8,1 helt fint
Trinn 2:.. Krav
Se Tizen detaljerte instruksjoner for å lese om maskinvare og programvare maskinen din bør møtes
Du kan installere SDK selv om datamaskinen ikke oppfyller disse krav til maskinvare. Men hvis du gjør det, vil smartur emulator være treg, noe som resulterer i dårlig app testing. Besøk dokumentasjonen for mer informasjon. Den forklarer hvordan du aktiverer Virtualization Technology (VT) i BIOS og Data Execution Prevention på Windows
Trinn 3:. Installere SDK
- Klikk Avansert for å gå til neste skjermbilde.
- i denne skjermen, kontroller SDK bildeknappen og naviger til zip-fil som inneholder riktig SDK bilde. Legg merke til at jeg antar at du foretrekker en offline installasjon og du allerede har lastet ned den nødvendige SDK bildet til utviklingsmaskinen.
- Velg SDK bilde zip-filen og klikk på Åpne i dialogboksen.
< li> En Trekke SDK Bilde melding vises. Klikk OK etter endt ekstraksjon.
- Klikk på Neste og Lisensavtale
vindu vises.
Godta lisensen og klikk på Neste. konfigurasjons~~POS=TRUNC vinduet~~POS=HEADCOMP vises neste. Jeg anbefaler å la alle boksene sjekket og klikke på Neste.
- Til slutt, når installasjonssjef ber om en plassering for installasjonen, angi ditt valg ved å velge en bane og klikke på Installer.
- 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 installasjonen og konfigurere BIOS slik at den kan tillate Intel HAXM som skal installeres.
- Ikke glem å aktivere Data Execution Prevention hvis operativsystemet er Windows. Gjenoppta installasjonen.
Hvis du ønsker, kan du installere Intel HAXM separat. Når installasjonen er ferdig, starter du datamaskinen
Trinn 4:. Konfigurere IDE
- Etter noen minutter, vil et vindu dukke opp, ber om en plassering for arbeidsområdet til å lagre programmer du utvikler. Angi en bane av ditt valg for plassering og klikk på OK. Etter konfigurasjon, bør IDE vises
Trinn 5:. Funksjoner av IDE
På venstre ruten i IDE, er det to vinduer, Prosjekt Explorer og tilkobling Explorer. Prosjekt Explorer viser prosjekter som er opprettet av brukeren. The Connection Explorer viser tilkoblede enheter som er tilgjengelige, emulator forekomster eller eksterne enheter
Trinn 6:. Opprette en Emulator Instance
- Klikk på Legg til ny og gi emulator eksempel et navn.
- Når du klikker Bekreft den nye emulator forekomsten blir opprettet. Klikk på den blå knappen med en pil i emulator ikonet for å starte emulator.
Det vil ta litt tid å starte emulator. Du skal se et vindu med en startskjerm som ligner på skjermbildet under når det er oppe og går. Emulator eksempel skal vises som en oppføring i Connection Explorer.
Sveip opp fra bunnen midtpunktet av startskjermen for å gå til skjermen som viser installerte programmer på enheten eller emulator. Siden du ikke har installert noen apps ennå, er bare på ikonet Innstillinger vises.
Du kan gå tilbake til forrige skjermbilde eller avslutte en app ved å sveipe ned fra toppen midt på skjermen.
2. Utvikling av en enkel Comic App
I dette eksempelet 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
- Merk av for Bruk standardplassering i boksen eller bla til en annen plassering av ditt valg, og klikk på Fullfør
. Din nye prosjekt, MinApp, bør vises i prosjekt~~POS=TRUNC Explorer.
Klikk på den lille pilen til venstre MyApp å utvide prosjektstrukturen.
Du bør se en index.html
< em>
fil, en css undermappe, en js undermappe, og noen andre filer og mapper.
HTML, CSS og Javascript danne grunnlag for programmering på Tizen plattformen. Hvis du er en HTML-veiviser, så du trenger 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 filer, eiendeler og ressurser
Vi må først legge til to undermapper til MyApp prosjektet, komisk og bilder. For å gjøre dette, høyreklikker du på MyApp prosjektmappen i IDE og velg Ny > Folder
. De undermapper skal vises i utvidet MyApp mappen i IDE.
Last ned kildefilene for dette prosjektet fra GitHub og naviger til bilder undermappe, som inneholder en rekke png filer. Kopier png filer til bildene undermappe du opprettet et øyeblikk siden.
Du kan lime inn filer til bilder mappen i Project Explorer-vinduet ved å høyreklikke undermappen og velge Lim inn fra hurtigmenyen.
Deretter oppretter ni HTML-filer med følgende filnavn i tegneserien mappen ved å høyreklikke på tegnemappen og velge Ny > Fil. Sørg for å inkludere .html for files.
page1.html
page2.html
...
page9.htmlYou skal nå ha ni HTML-filer i tegneserien mappen
Trinn 3:. Legge Kode
La oss nå redigere koden i index.html. Denne filen er inngangsporten på søknaden din. Dobbeltklikk index.html å åpne filen i IDE. Endre innholdet i < title > tag til < title > andre Race < /title >. Deretter endrer innholdet i < body > tag med følgende:
< body > ≪ div > ≪ div > < img src = "images /coverpage.png" alt = "forside" /> < /div > ≪ div > < a href = "#" class = "btn" > & lt; & lt; < /a > < a href = "comic /page1.html" class = "btn" > & gt; & gt; < /a > < /div > ≪ /div > < /body >Alt vi gjorde, er å legge et bilde til siden og to knapper for å navigere til de andre sidene siden vår tegneserie vil ha ti sider. Når du har gjort disse endringene, lagre filen ved å velge Fil > Lagre fra menyen.
Hvis du er ny på HTML og CSS, har Tuts + en stor samling av gode opplæringsprogrammer som vil hjelpe deg å få opp til hastighet med det grunnleggende webutvikling.
< p> Deretter dobbeltklikker style.css i css mappen og endre innholdet som vist nedenfor product: * {font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;} body {margin:. 0px auto; background-color: # 0a3003;} img {margin: 0; padding: 0; border: 0; width: 100%; height: auto; display: block; float: left;} btn {display: inline-block;. padding: 15px 4% 15px 4%; margin-left: 1%; margin-right: 1%; margin-top: 5px; margin-bottom: 5px; font-size: 30px; text-align: center; vertical-align: middle; border: 0; color: # ffffff; background-color: # 4b4237; width: 40%; height: 80px; text-decoration: none;}Vi har lagt til noen styling for kropp, bilder og navigasjonsmenyer. Når du har gjort endringene, lagre filen.
På samme måte legge til kode til alle de andre HTML-filer du har opprettet. Den style.css fil i css mappen må være eksternt knyttet til alle disse HTML-filer. Hvis du er oppmerksom på at om dette trinnet, deretter laste ned kildefilene fra GitHub og undersøke kilden for avklaring
Trinn 4:. Teste App
For å teste appen, velger MyApp prosjektmappe, og fra menyen velger du
prosjekt > Bygg Prosjekt
å bygge prosjektet. Kontroller at emulator eksempel er oppe og går
Høyreklikk på MyApp
mappen og velg Kjør som >.; Tizen Wearable Web Application for å kjøre prosjektet i emulator. Bruk piltastene i brukergrensesnittet for å navigere til neste eller forrige side. Sveip ned fra toppen av skjermen for å avslutte programmet.
Konklusjon
I denne opplæringen, bygget vi en enkel tegneserie app med Tizen SDK for Wearable og kjørte den på smartur emulator som leveres med IDE. Den virkelige moroa begynner når du er klar til å installere og kjøre den på en fysisk enhet.
Du kan finne mye mer informasjon om Samsung og Tizen Utviklere nettsteder. Hva venter du på?
Gå til Fil >.. New > . Tizen Wearable webprosjekt
I vinduet som vises, velger Basic > Grunnleggende program og sette prosjektet navn til MinApp.
- Merk av for Bruk standardplassering i boksen eller bla til en annen plassering av ditt valg, og klikk på Fullfør
I Connection Explorer, klikk på Emulator manager ikon, lengst til venstre blå knappen.
Klikk på Ja i vinduet Brukerkontokontroll som vises. Dette vil bringe opp Emulator Manager-vinduet.
- Klikk på Legg til ny og gi emulator eksempel et navn.
Bla til mappen der du har installert SDK og naviger til ide undermappe. Kjør den kjørbare filen som heter IDE.
Kjør installasjonssjef du lastet ned tidligere. Dette er en .exe-fil med et filnavn som tizen-bærbar-SDK-2.2.159_windows64.exe, avhengig av operativsystem og versjon.