Miksi natiivisovellukset ovat parempia kuin hybridisovellukset? Hybridisovellusten kehitys

Ensimmäisen ohjelmointikielen vaikean valinnan toisessa osassa käsittelemme mobiilisovelluskehityksen aihetta. Tämä trendi ei ole vielä saavuttanut suosionsa huippua, ja on edelleen mahdotonta kuvitella hetkeä, jolloin meistä kaikista tulee vähemmän riippuvaisia ​​kätevistä laitteista.

Siksi mennään suoraan asiaan ja vastataan lyhyesti yksinkertaisimpaan kysymykseen aiheesta: "Mitä mobiilisovellukset ovat?":

Web-sovellukset. Toisin sanoen, mobiiliversiot sivustot, jotka on käynnistetty suoraan laitteesi selaimen kautta. Täällä pätevät samat lait, toiminnallisuus on usein rajoitettua, ja samat kehittäjät työskentelevät usein täysimittaisten versioiden parissa.

Alkuperäiset sovellukset. Tässä me puhumme sovelluksista, jotka on kehitetty "alkuperäiselle" alustalle eli Androidille, iOS:lle tai Windowsille. Ne ladataan suoraan paikallisesta myymälästäsi, ja ne on optimoitu järjestelmän vuorovaikutukseen, akun kulutukseen ja täysi käyttö laitteen ominaisuudet.

Hybridisovellukset. Tässä asiassa on jonkin verran erimielisyyttä: jotkut pitävät hybridisovelluksia verkkosivustoina, jotka on kehitetty käyttämällä universaali järjestelmä pöytäkoneille ja mobiililaitteille. Näkyviä esimerkkejä ovat Googlen tai Amazonin sivut. Mutta sisään tämä teksti Pysymme hieman erilaisessa versiossa, sulkematta pois ensimmäistä: hybridisovellukset ovat eräänlainen kompromissi verkkosovellusten ja natiivien välillä, eli kaupasta ladattuja, joissa on alustakielellä kirjoitettu kuori, mutta niissä on verkkotoimintoja. tavalla tai toisella.

Kokeelliset sovellukset. Tällöin kehittäjä halusi vain toteuttaa ideansa välittämättä säännöistä ja kohdeyleisö. Ilmeisistä syistä tällaiset sovellukset eivät ole suosittuja, joten ne eivät yleensä sisälly vakioluokitukseen.

Otetaan tämä jako pohjaksi, siirrytään suoraan kieliin.

Web-sovellukset

Suoraan sanottuna, jos olet vasta aloittamassa matkaasi mobiilikehitys, niin verkkosovellukset ovat loistava valinta. Ensinnäkin kielten näkökulmasta "iso" HTML5 ja JavaScript riittävät sinulle täällä. Sinun on opittava ne hyvä taso jotta koulutuksen puutteet eivät johda vakaviin virheisiin. Mutta muuten, jopa kirjallisuuden näkökulmasta, kahden kirjan lukeminen riittää: "Web-sovelluskehityksen perusteet" tai "HTML5. Mobiililaitteiden sovellusten kehittäminen."

Toiseksi, sinun ei tarvitse noudattaa alusta- tai laitemääräyksiä. Sinun tarvitsee vain pakata suuri verkkosivusto pieneen kauniiseen kuoreen. Saatiin tietoa kielistä ja enemmän tai vähemmän yhteistä työtajua vastaavia sovelluksia päällä mobiililaitteet riittää hedelmälliseen työhön.

Totta, tällaisen erikoistumisen haitta on ilmeinen - valmistaudu siihen, että ansaitset paljon rahaa verkkosovelluksista vain, jos sinulla on suuri määrä tilauksia luotettavilta asiakkailta ja sen seurauksena vähän vapaa-aikaa. Ja tietysti näiden samojen asiakkaiden pyynnöt ovat mitä uskomattomimpia.

Alkuperäiset sovellukset

Mobiilisovelluksia kehitettäessä jokainen miettii ennen kaikkea omaa alkuperäistä muotoaan. Muistan heti alustojen sitoutumisen kieliinsä, vaatimukset sovelluksen suunnittelulle ja ulkonäölle, jotta se voidaan ladata virallinen kauppa, ja esimerkkejä siitä, miten sitä ei saa tehdä, vaikka muodollisesti tällainen hakemus täyttää kaikki vaatimukset. Ammattiin uppoamisen ja esittäjän vaatimusten kannalta tämä on jo edistynyt taso.

iOS:n peruskielet ovat ObjectiveC ja Swift. Jos et ole koskaan tavannut edellistä, en yksinkertaisesti näe syytä oppia sitä äidinkielenä. Asia on, että Swift luotiin tavoitteena sulkea kaikki ObjectiveC:n puutteet eikä hylätä jo vakiintuneita kehittäjiä. Tämän seurauksena se on nykyään yksi edistyksellisimmistä kielistä sekä suosion että laadun kehityksen kannalta. Aiheen oppimiseen tyhjästä, kirja "Swift. Sovelluskehityksen perusteet iOS:lle" tai intensiiviselle ".

Androidissa sinun on käytettävä Javaa. Ei ole väliä kuinka monta tuomioistuinta on, jotka vaativat Androidia tunnustamaan tämän kielen laittoman käytön, riippumatta siitä, kuinka monta uhkaa perustavanlaatuisesta kurssinmuutoksesta on, on syytä tunnustaa, että yhteistyö Javan kanssa ei ole menettänyt merkitystään. Kirjallisuutena suosittelen "Android 4. Ohjelmointisovelluksia tablet-tietokoneisiin ja älypuhelimiin." Kirja ei ole uusin, vaan aloittelijalle lisää tietoa Ei tarvitse. Noin ilmainen kurssiÄlä myöskään unohda " " GeekBrainsista.

hyvin ja Windows-alusta saarnaa C#-kieltä. WP:n natiivisovellusten kehittämisen kannalta C#:n oppimisen arvo on kyseenalainen, koska markkinat ovat epätavallisen pienet. Mutta ensinnäkin C#, kuten mikä tahansa suosittu kieli, auttaa silti luomaan kunnollisia cross-platform-sovelluksia, esimerkiksi Xamarinissa, ja toiseksi kasvunäkymät mobiililaitteista pöytäkoneisiin ovat myös hyvä motivaatio. Johdanto-alkuun kurssi "" riittää.

Muuten, noin cross-platform. Useimpia todella siistejä natiivisovelluksia ei ole rakennettu käyttämällä vain yhtä ohjelmointikieltä. Yksinkertaisimmassa tapauksessa kokoaminen tapahtuu lähdekoodi tarvittavaan, ja alkuperäisen alustan ominaisuudet "valmistetaan" paikan päällä. Mutta lähtökoodin redundanssiin ja kelluvien virheiden esiintymiseen liittyy tiettyjä vaikeuksia, ja ammattiin pääsyn kannalta tällainen perustelu ei ole hyödyllinen.

Kielitaidon taso riippuu suoraan halutun sovelluksen monimutkaisuudesta. Joidenkin tekstissä mainittujen kielten GeekBrains-kurssien lisäksi voit vierailla muilla, esimerkiksi luomalla . Ja sitten, jos tällainen suunta houkuttelee sinua, valitset itse vain sinulle sopivan kehityspolun.

Hybridisovellukset

Huolimatta kaikista tämäntyyppisten sovellusten ilmeisistä eduista, tässä on myös monia sudenkuoppia. Mutta tämän päivän aiheeseen liittyen, puhutaanpa jostain miellyttävästä. Voit käyttää mitä tahansa kieliä riippuen siitä, millainen sovellus sinulla on. Yksinkertaisimmassa tapauksessa käyttöliittymän luomiseen käytetään alkuperäistä osaa (Swift, Java, C# jne.), ja sisäosat luodaan HTML5:llä, JS:llä ja periaatteessa millä tahansa. Toisin sanoen vaihtaaksesi toiseen alustaan ​​joudut käyttämään paljon vähemmän aikaa kuin luodessasi tavallista alkuperäistä sovellusta. Erityiset puitteet voivat auttaa sinua. kuten PhoneGap tai Eclipse. Jälleen kääntäminen mistä tahansa muusta paikasta, jos jotain tapahtuu, auttaa.

Myöskään alustavaatimuksiin sopeutumisen kannalta ei ole ongelmia. Jos teet takaisin-painikkeen iOS:lle, se on Androidissa, vaikka kukaan ei tarvitsisi sitä siellä. Se on vain, että standardit täällä ovat täysin erilaisia. Hybridisovelluksen luominen korostaa ideaa, muu on toissijaista.

Haitat ovat ilmeisiä - pienempi suorituskyky verrattuna alkuperäisiin sovelluksiin, vähemmän mahdollisuuksia vuorovaikutukseen laitteiden kanssa ja suurempi virheiden todennäköisyys.

Tällä ei kuitenkaan ole mitään tekemistä kielen valinnan kanssa, mutta näyttää siltä, ​​että juuri siksi olemme kokoontuneet tänne.

On aika puhua mobiilisovellusten kehityksestä. Ymmärtääksesi kuinka useimmat sovellukset toimivat, sinulla ei tarvitse olla syvällistä tietämystä tältä alueelta. Riittää, kun ymmärtää, miten HTML, CSS ja JavaScript toimivat. Verkkoteknologioiden avulla luodaan sovelluksia, jotka toimivat erilaisia ​​alustoja, toisin kuin alkuperäiset sovellukset.

Nykyään on olemassa erilaisia ​​työkaluja ja rakenteita (kehykset), jotka auttavat meitä luomaan mobiilisovelluksia ilman suuria vaikeuksia.

Tässä artikkelissa tarkastellaan 7 parasta tällaista kehystä.

IONIC on yksi lupaavimmista mobiilisovellusten kehyksistä HTML-pohjainen 5. Rakennettu käyttämällä SASSia, joka tarjoaa suuren määrän käyttöliittymäkomponentteja, joiden avulla voit luoda interaktiivisia sovelluksia. Sovellusten suorittamiseen käytetään JavaScript MVVM- ja AngularJS-kehystä. Kaksisuuntainen tietojen kiinnitys, vuorovaikutus taustapalveluiden ja API:iden kanssa tekee AngularJS:stä suosituimman sovelluskehittäjien keskuudessa. Ei ole epäilystäkään siitä, että siitä tulee entistä suositumpi julkaisunsa jälkeen uusi versio AngularJS 2.0, mobiiliensimmäinen.

IONIC-tiimi esittelee pian uuden avustajan IONIC-sovellusten luomiseen nimeltä "IONIC creator". Se julkistetaan pian ja tukee vedä ja pudota, mikä tekee sovellusten luomisesta paljon nopeampaa.

Tutustuaksesi IONICiin paremmin, voit lukea artikkeleita mobiilisovellusten käytön aloittamisesta ja Firefox-käyttöjärjestelmään perustuvien pelien kehittämisestä.

Mobile Angular UI on HTML 5 -pohjainen kehys, joka käyttää bootstrap 3:a ja AngularJS:ää interaktiivisten mobiilisovellusten luomiseen.

Mobile AngularUI:n tärkeimmät ominaisuudet ovat:

• Bootstrap 3
• AngularJS
• Bootstrap 3 -mobiilikomponentit, kuten haarautumiset, peittokuvat ja sivupaneelit, jotka eivät olleet tavallisessa bootstrapissa.
• AngularJS-moduulit, kuten Angular-route, Angular-Touch ja Angular-animate.

Vastausmediakyselyt on erotettu ohjelmasta bootstrap ja sinun tarvitsee vain valita mitä tarvitset. Mobile Angular UI on riippumaton jQuerysta, joten mobiilisovelluksen luomiseen tarvitset vain joitain AngularJS-ohjeita.

Jos haluat nähdä Mobile Angular UI:n toiminnassa, katso esittelysivu. Suosittelemme myös, että luet ohjeet Mobile Angular UI:n käytön aloittamiseen.

Intel XDK on Intelin monikäyttöinen kehitystyö. Työskentely sen kanssa on melko helppoa, sinun tarvitsee vain ladata ilmaisia ​​sovelluksia, jotka ovat yhteensopivia Linuxin, Windowsin ja Macin kanssa. Se sisältää monia malleja, joiden avulla pääset alkuun, ja tukee käyttöliittymäkehyksiä, kuten Twitter bootstrap, jQuery Mobile ja Topcoat.

Intel XDK tarjoaa esikatselu reaaliajassa yhdistetyllä laitteellasi, samalla kun voit tutkia muita hienoja työkaluja.

Mielestämme Intel XDK on helpoin käyttää. Se käyttää vedä ja pudota -toimintoa, mikä välttää suuren murskauksen.

Intel XDK:n kanssa työskentelyn johdannossa löydät suuren määrän koulutusmateriaalia alustan kanssa työskentelystä.

Appcelerator Titanium on avoin resurssi mobiilisovelluskehykset, jotka tarjoavat edellytykset natiivisovellusten luomiselle useille mobiilialustoille.

Titanium on erinomainen kehitystyö, josta löydät kaiken tarvitsemasi hybridimobiilisovellusten luomiseen. Jos haluat työskennellä Titaniumin kanssa, lataa Titanium studio. Titanium SDK sisältää useita alustan sovellusliittymiä ja Pilvipalvelu, joka toimii varastona. Hän menee itsenäisen kanssa API-alusta, joka yksinkertaistaa pääsyä mobiililaitteeseen.

Titanium käyttää Alloyta, MVC-kehystä mobiilisovellusten nopeuttamiseen. Alloylla luotuja moduuleja voidaan käyttää helposti uudelleen erilaisia ​​sovelluksia,Täten käyntiaika ja koodirivi ovat merkittävästi lyhentyneet.

Titanium studio sisältää joitain koodiesimerkkejä ja toivomme saavamme koulutusvideoita pian SitePointiin.

Sencha Touch on HTML 5 -kehys sovellusten luomiseen alustoille, kuten iOS, Android ja Blackberry ja muille. Se on ollut olemassa useita vuosia, mutta siitä on suhteellisen hiljattain tullut suosittu hybridimobiilisovelluskehittäjien keskuudessa.

Sencha Touch on vastustajiaan edistyneempi luomaan natiivisovelluksia eri alustoille.

Sen kanssa työskentely ei myöskään ole vaikeaa, mutta saadaksesi siitä parhaan hyödyn sinun on käytettävä melko paljon aikaa.

Jotta voit täysin arvostaa Sencha Touchin etuja, katso esimerkkikoodeja virallisella verkkosivustolla.

Telerikin Kendo UI - HTML 5 -kehys monialustaisten mobiilisovellusten luomiseen. Kendo UI nojaa vahvasti jQueryyn ja sisältää useita jQuery-pohjaisia ​​widgetejä.

Hänen kanssaan työskentely ei ole vaikeaa. jQueryn tuntevat kehittäjät arvostavat Kendo-käyttöliittymän kanssa työskentelyn helppoutta. Kendo-käyttöliittymässä on avoin työkalujen ja JavaScript-kehysten resurssi.

Suurin osa käytetyistä widgeteistä on kuitenkin edelleen saatavilla vain kaupallisella lisenssillä.

Tutustu Kendo UI:n kanssa työskentelyn viralliseen dokumentaatioon. Sieltä löydät opetusvideoita, jotka auttavat sinua oppimaan tämän kehyksen.

PhoneGap on hieman pois listaltamme, koska se ei ole kehys sovelluksen luomiseen, vaan sen pakkaamiseen ja julkaisuun. Maksullinen ohjelma PhoneGap sijaitsee osoitteessa avoin lähdekoodi Cordova ja Adoben omistama. Suosittu monien mobiilisovelluskehittäjien keskuudessa.

Voit työskennellä PhoneGapin kanssa valitsemalla JavaScriptin tai käyttöliittymäkehyksen. JQuery Mobilen ja KnockOut.js:n tai AngularJS:n yhdistelmät ovat hyviä. Kun olet valmis koodin kanssa, PhoneGap viimeistelee kaiken jäljellä olevan työskentelyn alustalla, jonka kanssa työskentelet. PhoneGapilla rakennetut sovellukset käyttävät verkkonäkymää sisällön toimittamiseen. PhoneGap sisältää minimaalisen joukon verkkosovellusliittymiä mobiililaitteen ominaisuuksien käyttämiseen ja antaa sinun kirjoittaa pyydettyjä laajennuksia.

Löydät ohjeet PhoneGapin kanssa työskentelemiseen.

Bonus

App.js - JavaScript-kirjasto mobiilisovellusten luomiseen. Tämä kehys, toisin kuin muut, ei käytä AngularJS:ää. Se tarjoaa useita perusteemoja ja widgetejä. Voit kirjoittaa sovelluksen käyttämällä zeptoa tai jQueryä.

Johtopäätös

Tässä artikkelissa tarkastelimme joitain parhaista HTML 5 -mobiilisovelluskehyksistä. Mobiili-HTML 5 kehittyy hyvin ja tarjoaa uusia vaihtoehtoja joka päivä. Millaisista kehyksistä pidät enemmän? Jaa kommenteissa.

Hybridimobiilisovellukset ovat saamassa yhä enemmän suosiota. Syy on yksinkertainen: tämän tekniikan avulla voit nopeasti julkaista ohjelmia useille alustoille kerralla. Kaikki ei kuitenkaan ole niin hyvin kuin miltä ensi silmäyksellä näyttää. Julkaisunopeuden kustannuksella on menetetty sovelluksen suorituskyky ja rajoitukset. käyttöliittymä. Otamme nämä puutteet huomioon ja pidämme hybridimobiilisovelluksia kuitenkin hyväksyttävänä toteutusvaihtoehtona.

Siirrytään eteenpäin. Mahdollisuus käyttää web-sivuja sovelluksissa ei ole uutta. Se oli saatavilla aiemmin WebView-komponentin ansiosta. Hybridisovellusten kehitys aloitettiin mobiililaitteiden selaimissa näytettäväksi valmistetuilla sivustoilla. Heitä seurasi lisää monimutkaisia ​​sovelluksia ja pelejä. Kaikki näytti olevan hyvin, mutta tämä ei riittänyt. Aika saneli vaatimukset entistä laajemmalle vuorovaikutukselle käyttöjärjestelmä mobiililaitteet. Näin Cordova-kirjasto (Apache Cordova) ja vastaavat projektit ilmestyivät.

Apache Cordova on joukko laitesovellusliittymiä, joiden avulla mobiilisovellusten kehittäjät voivat käyttää laitteen alkuperäisiä toimintoja. Kuten kamera, kiihtyvyysanturi JavaScript-koodi jne. Yhdessä käyttöliittymäkehysten - jQuery Mobilen, Dojo Mobilen tai Sencha Touchin - kanssa saamme mahdollisuuden kehittää täysin toimiva mobiilisovellus käyttämällä vain HTML:ää, CSS:ää ja JavaScriptiä.

Ioninen kehys on yksi keskusteltuimmista ja laajimmin käytetyistä kehyksistä. Alustan virallisen verkkosivuston mukaan Ionic on SDK hybridimobiilisovellusten luomiseen, joukko CSS- ja JS-komponentteja, jotka on luotu AngularJS-, SASS- ja Apache Cordovan pohjalta.

Me näemme seuraavat edut Ionic-kehyksen käytössä:

• Hieno dokumentaatio. Ja myös massa hyödyllistä tietoa yhteisöltä stackoverflowssa ja puitefoorumissa.
• Suuri määrä valmiita työkaluja.
• Suuri yhteisö tarjoaa aktiivista kehitystä puitteet.

Haittoja ovat seuraavat:

• Ionic on hieman hidas - on kilpailevia kehyksiä, jotka ovat paljon nopeampia. Esimerkiksi famo.us.
• AngularJS. Pidämme sen käyttöä enemmän haittana kuin etuna.

Samaa mieltä, heikkoja kohtia on hyvin vähän. Mitä etuihin tulee, ne toimivat niin kutsuttuna hopealuodina. Toisin sanoen kallistimme valintamme Ionicin hyväksi. Lisäksi jopa projektin arkkitehtuurin valintavaiheessa.

Nyt hankkeesta. Se on monitoiminen yrityssovellus, joka sisältää chatin, uutissyötteen, viestisyötteen ja paljon muita toimintoja. Jatkossa sen määrä kasvaa entisestään. Kuten he sanovat: et voi laskea timantteja kivisissä laaksoissa.

Seuraava mielenkiintoinen työkalu "laboratoriossamme" oli Parse. Parse.com on yksi suosituimmista backend-as-a-service (BaaS) -palveluntarjoajista. Hän tarjoaa kaiken tarvittavat komponentit infrastruktuuri verkkosovelluksen kanssa työskentelemiseen yhdessä paketissa. Tietokanta, push-ilmoitukset, tiedostojen tallennus ja palvelinkoodi. Ei paha, sanot ja olet oikeassa. Koska yllä olevien herkkujen lisäksi tarjolla on myös ilmainen paketti, joka tarjoaa 30 pyyntöä sekunnissa, yhden taustatehtävän, 20 Gt tiedostotallennustilaa, 20 Gt tietokantatallennustilaa, 2 Tt liikennettä ja 1 000 000 push-ilmoitusta kuukaudessa. Hienoa - sanot sen ja olet jälleen oikeassa.

Hei Word, eli TODO

Älä poikkea yleisesti hyväksytyistä kanoneista ja koota pyörämme käyttämällä yllä olevia työkaluja. Päätimme ottaa käyttöön klassisen TODOn, joka tallentaa tiedot pilveen (Parse.com-tietokantaan). Käyttöliittymän toteutus perustuu Ioniciin. Tämän seurauksena meidän pitäisi saada cross-platform mobiilisovellus, joka on mukautettu ainakin iOS:lle ja Androidille.

Eli mitä tarvitsemme:

• laite, jossa on MacOS (tietysti iOS-kokoonpanoa varten);
• Node.js + Npm + Gulp;

Ensimmäinen askel. Ionic-kehyksen asentaminen ja sovelluksen luominen

Asenna Apache Cordova:

Asenna Ionic:

Luodaan uusi projekti:

Mene projektikansioon ja käynnistä verkkopalvelin:

Tehtyjen manipulaatioiden seurauksena meidän pitäisi saada avataan verkkoselaimella sivu, jonka otsikossa on teksti: Ionic Blank Starter. Päällä tässä vaiheessa Emme ota projektirakennetta kokonaisuudessaan huomioon. Tarvitsemme tällä hetkellä vain hakemuksen.

Vaihe 2. Rekisteröidy ja luo sovellus Parse.comissa

Rekisteröinti- ja hakemuksen luontimenettely on hyvin triviaalia. Esittelemme etunimi, sähköpostiosoite ja salasana, valitse sitten yritystyyppi "Individual Developer" ja kirjoita sovelluksen nimi. Siinä kaikki. Jäsennyssovellus on valmis käytettäväksi.

Seuraava toimenpide on tietokannan luominen. Meidän on säilytettävä tietomme jonnekin. Voit tehdä tämän luomalla taulukon

Kuten näet selvästi kuvakaappauksesta, Parsella on useita oletustaulukoita. Niitä tarvitaan tallentamaan tietoja käyttäjistä, rooleista ja asennuksista. Kuvaamme seuraavassa artikkelissa, kuinka valtuutus ja rekisteröinti etenevät. Tässä rajoitamme itsemme luomaan taulukon TODO-tietueiden tallentamista varten. Tätä varten tarvitsemme Task-luokan. Huomaa, että se on luokka, ei pöytä.

Tehtävä on siis suoritettu. Tehtäväluokka on luotu. Tuloksena saimme tyhjän taulukon, jossa oli seuraavat kentät:

• objectId — objektin tunniste, merkkijono.
• CreatedAt — luomispäivämäärä.
• updatedAt — muokkauspäivä.
• acl - tietueiden pääsynhallinta (tietueiden pääsynhallinnan yksityiskohtia käsitellään seuraavissa artikkeleissa).

Nykyinen tavoitteemme on nopea prototyyppi. Tästä syystä voit unohtaa turvallisuuden. Ei lupaa hakemuksessa. Vain hardcorea :)

Lisää taulukkoon kaksi kenttää:

• body on itse TODO-tietue
• isDone — tehtävän tila

Kassalta poistumatta, juuri Parse-konsoliin, lisäämme kaksi testitietuetta.

Vaihe 3. Parse and Ionic

Lataa Parse JavaScript SDK viralliselta verkkosivustolta ja sijoita se kätevästi www/lib-hakemistoon ja liitä se sitten tiedostoon www/js/index.html seuraavasti.

Huomaamme yhden asian erikseen - pidämme www-hakemistoa juurihakemistona ja käytämme sovelluksessa suhteellisia osoitteita.

Koska jokaisella kehittäjällä voi olla omat asetukset ja yleensä asetusten tallentaminen arkistoon on huonoa tapaa, suosittelemme asetustiedosto loi Ionic-sovelluksen. Lisää config.xml ohitusluetteloon Git tiedostot, jotta sovellustunnukset eivät päädy arkistoon. Avaa config.xml ja lisää siihen seuraavat tunnisteet:

JS-avain- ja sovellustunnusparametrit löytyvät kohdasta Jäsentäminen, valikko Paneeli > Asetukset > Avaimet.

Sovellusta rakennettaessa käytetään juurihakemiston asetustiedostoa. Tarvitsemme sitä suorittaaksemme sovelluksen selaimessa ilman esikokoonpanoa.

Parse.initialize(window.applicationConfig['ParseAppID'], window.applicationConfig['ParseJsKey']);

GetConfigFromXML on toiminto, joka tekee pyynnön xml/config.xml-tiedostoon ja lukee kaikki asetustunnisteet. Lisäksi se tallentaa globaalin muuttujan ja alustaa sitten Parse SDK:n.

Tuloksen voi tarkistaa konsolista. Tätä varten yritetään saada testitietueita jäsennysohjauspaneelissa luomastamme tietokannasta. Teemme tämän seuraavasti: julista uusi tyyppi Tehtävä Task-luokan perusteella ja luoda pyyntö luokan elementtien, esiintymien valitsemiseksi. Emme aseta hakuehtoja, etsimme vain kaikkia elementtejä. Tämän jälkeen kutsumme heti hakutoimintoa, joka palauttaa meille lupauksen ja sanoo, että meidän on näytettävä tiedot, kun olemme valmiita konsoliin. Tekstiä ja selityksiä on enemmän kuin itse koodia :)

Virallisen dokumentaation esimerkeissä käytetään yleensä takaisinsoittoa. Mielestämme nykyinen toteutus on kuitenkin paljon yksinkertaisempi. Koska tietueiden lukumäärälle ei ole nimenomaista rajoitusta, Parse itse asettaa 100 yksikön kynnyksen.

Saadaksesi kaikki tietueet kerralla, voit asettaa tarkoituksella suuren rajan tai saada niiden lukumäärän ja sitten rekursiivisella menetelmällä saada kaikki tietueet.

Vaihe 4: Näytä TODO-viestit AngularJS:n avulla

Nyt selitetään. Ilmoitimme sivulla topin tarpeesta navigointipalkki, ja myös yhdistetyt reititystiedostot ja ohjaimet.

Vaihe 5: Reititys

Rekisteröimme polut ja ohjaimet router.js-tiedostoon

ion-nav-view - säiliö, joka sitoutuu ohjaimeen ja malliin

sovellus - säilön nimi

vastaavasti alla oleva koodi

kun siirryt kohtaan #/tasks/new, näyttää mallin "templates/new-task.html" säilöön nimeltä "app" ja siirtää ohjauksen ohjaimelle "NewTaskController".

Voimme ilmoittaa toisen kontin kuten

$scope ei ole paras käytäntö. Tästä syystä pääsemme ohjaimeen sen aliaksen kautta. Emme kuitenkaan ilmoita sitä malleissa, vaan reiteissä.

Vaihe 6: Ohjaimet

Katso, kuinka työskentelemme ohjainten kanssa toimitetusta koulutusesimerkistä, äläkä tee tätä enää koskaan. Älä unohda, että päätimme menettää laadun nopeuden lisäämisen kustannuksella. Jos teet kaiken sen mukaan parhaat käytännöt Angular, silloin on otettava huomioon HMVC-arkkitehtuuri (Hierarchical model-view-controller).

Teemme siis jumalanpilkkaa ja keräämme kaikki ohjaimet yhteen controllers.js-tiedostoon. Alla on sen luettelo.

Selitykset koodille:

TasksController-ohjain on vastuussa TODO-tietueiden luettelon näyttämisestä.

Alla oleva koodinpätkä lataa tiedostoja Parse-ohjelmasta ja ilmoittaa Angularille tietojen muuttumisesta, mikä viittaa siihen, että se olisi hyvä idea piirtää ne uudelleen.

FullTask- ja uncompleteTask-funktiot vastaavat TODO-tietueen tilan/tilan muuttamisesta.

NewTaskController-ohjain on vastuussa uuden TODO-tietueen luomisesta.

Muuttuja this.newTask = (body: ", isDone: false); käytetään sitomaan syöttöelementtiin.

Koodinpätkä uuden TODO-merkinnän luomiseen ja tallentamiseen.

Koodifragmentti, joka suorittaa seuraavat toiminnot tietojen tallennuksen jälkeen: tyhjentää muuttujan ja siirtyä TODO-elementtien luetteloon.

Vaihe 7. Mallit

Mallien kokonaismäärä on aina kaksi: listaus ja tietueen luominen/muokkaus.

TODO-luettelomallin koodi templates/tasks.html

Selitykset TODO-luettelomallin koodille

view-title=”Tehtävät” on navigointipalkin otsikko.

ng-repeat="tehtävä tehtävissäCtrl.tehtävät" - käymme läpi kaikki merkinnät silmukassa, muistamme mitä tehtävätCtrl on - sama alias, joka oli ilmoitettu reittitiedostossa.

Malli TODO-tietueiden luomiseen/muokkaukseen new-task.html

Malli on yksinkertainen. Jopa hyvin yksinkertainen - yksi syöttö ja "tallenna"-painike. Kaikki. Lyhytisyys on nokkeluuden sielu.

Toinen tärkeä pointti, jota ei pidä missata missään olosuhteissa. Tehdään pieni takauma ohjaimiin

)); — Tietueen tilan/tilan muuttamisen jälkeen palaamme TasksControlleriin. Tästä me kuitenkin tultiin. On loogista olettaa, että itse asiassa menimme takaisin eikä ohjainkoodia suoritettu. Meillä ei ollut aikaa selvittää, oliko se vika vai ominaisuus, mutta saimme ongelman ja löysimme ratkaisun yllä olevasta koodinpätkästä.

Vaihe 8: Rakenna sovellus

Koodi on valmis. Sovellus on läpikäynyt alustavan testauksen selaimessa. On aika testata sovellusta oikeissa mobiililaitteissa ja emulaattoreissa. Tätä varten sinun on rakennettava ohjelma kohdealustoille. Meidän tapauksessamme nämä ovat Android ja iOS.

Jotta voimme rakentaa sovelluksen Androidille, meillä on oltava Android SDK asennettuna

ja tiedostoon .bash_profile sinun on lisättävä seuraavat rivit:

Jotta voit rakentaa sovelluksen iOS:lle, tarvitset MacOS:n ja Xcoden asennettuna.

Lisää tarvittavat alustat:

Yllä olevat komennot ovat Cordovan ympärillä ja vastaavat Cordovan alustan lisäyskomentoa.

Palataan asiaan Android-alusta ja jatka komentorivin kiusaamista.

Näiden komentojen suorittamisen pitäisi käynnistää sovellus Android-emulaattorissa. Älä pysähdy tähän vaan yritä käynnistää se oikea laite. Tätä varten sinun on otettava käyttöön sovellusten virheenkorjaus USB:n kautta:

Siirry "Asetukset" -valikkoon.

Etsi "Tietoja puhelimesta" -valikosta tai jostakin osiosta "Build Number" -painike ja paina sitä 7 kertaa peräkkäin.

Näkyy uusi jakso asetukset Kehitysvaihtoehdoilla.

Menemme siihen ja otamme virheenkorjauksen käyttöön USB:n kautta.

Sovelluksen virheenkorjaus

Ionic-sovelluksen virheenkorjaus ei ole niin vaikeaa, koska voimme käyttää webview-konsolia sen ollessa käynnissä. Voit tehdä tämän Androidissa seuraavasti:

• Käytämme Chrome-etävirheenkorjausta.
• Tämän seurauksena sovelluksemme tulee saataville selaimen osoitteessa chrome://inspect/#devices.

Voit tehdä tämän iOS:ssä seuraavasti:

Puhelimessa

• Ota käyttöön Safari-asetukset - Yksityinen selaus.
• Ota käyttöön Safarin lisäasetukset - Web Inspector.

Tietokoneella

• Safari-selain - Saferi - Asetukset - Lisäasetukset.
• Ota käyttöön Näytä kehitysvalikko valikkorivillä.
• Tämän seurauksena tietokoneeseen liitetyt laitteet näkyvät Kehitys-valikossa.

Siellä on myös vedenalaisia ​​kiviä. Koska iPhone-sovellus ei toimi taustalla, konsoli näyttää ulostulon tarkalleen sillä hetkellä, kun se käynnistetään. Jos haluat tallentaa konsolin lokit alusta alkaen, sinun tulee kirjoittaa pieni lokeri

Tulokset

Hybridimobiilisovellukset – lupaavia ja aktiivisia nouseva teknologia. Ionic-kehys on vakain ratkaisu niiden toteuttamiseen. Sen tärkeimmät edut ovat suorituskyky ja cross-platform. Haittoja ovat lievä nopeuden menetys ja tarve ymmärtää, miten alkuperäiset sovellukset toimivat (tätä ei voi kiertää). Ongelmana on, että tarvitsemasi Cordova-laajennus ei ehkä ole saatavilla tai sitä ei ehkä enää tueta. Olemme kohdanneet tämän tilanteen käytännössä. Laajennusta ei päivitetty iOS 8:n julkaisun jälkeen. Tämän seurauksena minun piti löytää ja korjata Objective C -koodin virhe itse. Jatkoa .

Tämän päivän artikkeli käsittelee lapsille tarkoitettuja Android-hybridisovelluksia. Näiden sanojen jokaisessa merkityksessä. Puhumme yksinkertaisimman hybridin kirjoittamisesta (Java+HTML+Javascript) Android-sovellukset tutkia peruskoulun oppilaita heidän reppujaan. Vähimmäistieto oletetaan javan perusteet, HTML ja JavaScript. Jos olet Android-kehittäjä, tämä artikkeli ei todennäköisesti kiinnosta sinua, sinun ei tarvitse avata sitä. Kaikille muille, jotka ovat vasta aloittamassa tai harkitsemassa Android-kehityksen aloittamista ja jotka ovat kiinnostuneita Androidin kehittämisen perusteista, katso kissa.

Johdatus. Tyttäreni (2. luokka) käskettiin tekemään tutkimustyö aiheesta "Repun painon vaikutus lapsen terveyteen". Luonnollisesti iän vuoksi päätyö jäi vanhemmille. Päätimme tehdä luokassa kyselyn siitä, kenellä on kuinka paljon heidän reppunsa painaa, kuka painaa kuinka paljon (laskeaksemme repun painon normin, joka ei saa ylittää 10% lapsen painosta), kuka käyttää reppua kouluun ja niin edelleen. Monipuolistaakseni koulun arkea päätin tehdä tyttärelläni olevaan Android-puhelimeen sovelluksen kyselyyn. Alun perin kyselyyn oli tarkoitus sisällyttää repun ja pennun paino, mutta minulla ei ollut aikaa, ja tuloksena nämä parametrit kirjoitettiin vanhaan tapaan paperille. Jäljelle jäi vain ne kysymykset, joihin pennut saattoivat vastata itse.

Tehtävän ydin: kehittää sovellus alakoululaisten kartoittamiseen luodakseen tyttärelleen esityksen siitä, kuinka haitallista raskaiden reppujen käyttäminen on. Yllä olevasta kuvasta näet, mihin päädymme.
Teen varauksen heti, yleensä kehitän natiivisovelluksia Androidille, HTML:ää puhtaasti verkkosovelluksiin, mutta tällä kertaa päätettiin kehittää hybridisovellus, koska ensinnäkin se oli nopeampi tähän tehtävään ja määräajat olivat erittäin tiukat. , ja toiseksi se oli kätevämpi sovellustoiminnallisuuden kannalta, kolmanneksi tämä oli ensimmäinen vuonna kehitetty projekti Android Studio, halusin minimoida mahdollisia ongelmia kun käytät uutta työkalua valmistuaksesi ajoissa.

Joten aloitetaan. Aluksi tietysti Java-koodi (selitykset kommenteissa), älä unohda tietysti lisätä WebView toimintaamme, antaa sille webView-tunnus:

Paketti com.probosoft.survey; tuonti android.os.Build; tuo android.support.v7.app.AppCompatActivity; tuonti android.os.Bundle; tuonti android.view.Window; tuonti android.webkit.WebSettings; tuonti android.webkit.WebView; public class MainActivity laajentaa AppCompatActivityä ( // Ylikuormita onCreate-menetelmää, siinä luomme tarvitsemamme WebView'n ja asetamme sen skaalautumiskyvyn @Override suojattu void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout. activity_main); / / Näytä sovelluksemme, joka on vastuussa WebView wv = (WebView) findViewById(R.id.webView) // Luo WebView - miniselain WebSettings = wv.getSettings( /); / Hanki miniselaimemme asetusluokka settings.setDisplayZoomControls(true) // Salli näyttää pienoisselaimen zoomausasetukset wv.loadUrl("file://android_asset/html/index.html"); // Lataa sovellussivumme miniselaimeen)
Sijoita testi index.html Asset/html-kansioon. Yritetään käynnistää se. Mikään ei toimi. Selvennetään tärkeä kohta: sisäisiä resursseja käytettäessä protokollan jälkeen ei pitäisi olla kaksi, vaan kolme kauttaviivaa. Muutamme:

Wv.loadUrl("file://android_asset/html/index.html");
osoitteessa:

Wv.loadUrl("file:///android_asset/html/index.html");
Hurraa! Kaikki on ladattu. Aloitetaan HTML- ja JS-koodin kirjoittaminen.

Kyselyn #menu ( leveys: 100 %; )



Kiitos vastauksista!

var vastaajat; var adminMode = tosi; // toiminto clearAll () ( kokeile ( if(typeof(Storage) !== "undefined") ( this.storage = localStorage; ) ) catch (e) ( alert ("Paikallinen tallennusvirhe: "+e); ) tämä .storage.clear ( ) funktio init () ( $("#mainPane").show (); $("#resultsPane").hide (); if (adminMode) $("#showResults").show (); $("#title").html("Valitse opiskelija"); .location.href) init();
Aluksi yritin käyttää AJAXia tietojen lataamiseen, mutta tulin nopeasti vakuuttuneeksi siitä, että se ei yksinkertaisesti toiminut WebView'n sisällä ja paikallisissa resursseissa. Siksi sisällön lataamiseen jouduimme käyttämään melko ristiriitaista menetelmää - tallentamaan kaikki vastaajien tiedot globaaliin taulukkoon.
Yritetään käynnistää se. Se ei toimi taas. Mikä hätänä? Emme ole ottaneet JavaScriptiä käyttöön WebView'ssamme. Korjaamme sen. Lisätään Java koodi:
settings.setJavaScriptEnabled(true);
Se toimii nyt. Hurraa! Meidän piti ottaa JavaScript käyttöön WebView'ssamme. Kirjoitamme toiminnallisia luokkia. En anna koodia. Löydät sen projektin GitHubista (artikkelin lopusta). Tässä kuvaan tärkeimmät ongelmat, joita aloitteleva hybridisovelluskehittäjä voi kohdata.

/** * Edustaa tietyn vastaajan kyselyä * @param integer id Vastaajan tunnus */ var survey = function (in_respondentId, in_respondent) ( var respondentId; // Tutkittavan opiskelijan tunnus var respondent = null; // opiskelijaa tutkitaan var kysymyksiä = null // Joukko kysymyksiä var parent = tämä // Likainen hakkerointi, jonka avulla voit saada sisäkkäisten kontekstien sisällä olevan objektin kontekstin var storage = null // Muuttuja, joka sisältää LocalStorage; sinun on käytettävä sitä uudelleen this.answers = vastaukset kyselyn kysymyksiin /** * Aloittaa valitun vastaajan kyselyn */ this.start = function () ( var res = dataQuestions; // Alusta muuttuja kysymyksillä parent.questions = new ; Kysymykset (res, parent.respondent // Luo ensimmäinen kysymys parent.questions.start () // Aloitetaan kysely) /** * Tallentaa kaikki vastaukset muistiin */ this.collectAnswersAndStore = toiminto () .storage.setItem (window.UNIQUE_STORAGE_ID+this.respondentId, JSON.stringify(this.answers)); // Tallenna kyselyn tulos window.init(); // Palata Päänäyttö) this.surveyOption = function (val) ( this.answers.push (val); // Muista opiskelijan vastaus //alert (this.answers); if (!this.questions.advanceQuestion ()) // Tarkista onko on enemmän kysymyksiä ( this.collectAnswersAndStore (); // Jos kysymyksiä ei ole enää, tallenna vastaukset ) ) // Muuttujien alustaminen this.respondentId = in_respondentId; this.respondent = in_respondent; // Yritetään käyttää tallennustilaa try ( if(typeof(Storage) !== "undefined") ( this.storage = localStorage; ) ) catch (e) ( alert ("Paikallinen tallennusvirhe: "+e); ) )
Kaikki näyttää toimivan, mutta mikään ei pelastu. Matkan varrella opimme hauskan yksityiskohdan - sisään uusimmat versiot WebView'n Android-hälytys ei... mitään. Ei mitään. Ei virhettä, ei viestiä konsolissa. On aivan kuin häntä ei olisi olemassa. Huomasimme, että käyttääksemme LocalStoragea WebView'ssa meidän on asetettava WebView'lle lisälippuja. Tehdään se:

Settings.setDomStorageEnabled(true); settings.setDatabaseEnabled(true);
Hurraa! LocalStorage toimii. Kuinka pitkä tai lyhyt, jotain käyttökelpoista kirjoitettiin viikonloppuna. Lapsi lähetettiin kuntosalille puhelimen kanssa, johon tämä tuote oli asennettu. Lapset (opettajan avustuksella tai yksin - tämä jäi kulissien taakse) täyttivät kyselyn tunnollisesti, eikä tietoja ollut vain neljästä syystä tai toisesta poissa olleesta oppilaista.

Nyt olen kohdannut ongelman: minun täytyy jotenkin purkaa tiedot (kyllä, kyllä, minun piti ajatella tätä alusta asti, mutta älä unohda, että sovellus kehitettiin kauheassa aikapaineessa ja sen oletettiin että tämä tehtävä ei ollut vaikea eikä kiireellinen, ja se voidaan päättää myöhemmin).

Suurimmaksi ongelmaksi osoittautui, että tyttärelläni oli melko vanha ja heikko puhelin (hän ​​valittiin ottaen huomioon tekijän "jotta hän ei katuisi mitään"). Yritin hakea tietoja Bluetoothin kautta, lähettää AJAX-pyynnön palvelimelle, luoda lomakkeen lähetystä varten jne. - ei vaihtoehtoja. DIV:n tekstiä ei ole valittu, joten DIV muutettiin TextAreaksi (joka näkyy GitHubin lopullisessa koodissa). Sieltä pystyin valitsemaan ja kopioimaan kyselyn tulosten tekstin ja lähettämään sen sähköpostiini. Tämän seurauksena tämä osoittautui ainoaksi toimivaksi vaihtoehdoksi.

Kirjoitamme skriptin niin, että tiedot ovat sisään Excel taulukko. Tässä vaiheessa nousi esiin toinen ongelma alkuperäisessä arkkitehtuurissa - ne opiskelijat, jotka eivät täyttäneet kyselyä, merkittiin yksinkertaisella rivillä ”Kyselylomaketta ei täytetty”. Luonnollisesti säännölliset lausekkeet, jotka oli suunniteltu normaalille datalle, "kompastuivat" näille riveille. Onneksi tällaisia ​​rivejä oli vain neljä. Ne poistettiin manuaalisesti lopputuloksista ja saimme täysin riittävän näytteen ( oikeita nimiä korvattu paikkamerkeillä):

Opiskelija 1, nimi: Aina, Ei koskaan, Pidän kaikesta repussani 2. Opiskelija 2, nimi: Aina, Joskus törmäävät, Liian painava 4. Opiskelija 3, nimi: Aikuiset, Joskus törmäävät, Se on vain epämukavaa, mutta En osaa selittää 5. Opiskelija 5, nimi: Minä, Ei koskaan, pidän kaikesta repussani 6. Opiskelija 6, nimi: Minä, Joskus he törmäävät, pidän kaikesta repussani 7. Opiskelija 7, nimi: Minä , Joskus he törmäävät, pidän kaikesta repussani 8. Opiskelija 8, nimi: Minä, Ei koskaan, pidän kaikesta repussani 9. Opiskelija 9, nimi: Minä, Joskus he törmäävät, pidän kaikesta repussani 10 Opiskelija 10, nimi: Minä, Joskus he törmäävät, pidän kaikesta repussani 11. Opiskelija 11, nimi: Minä, Joskus he törmäävät, pidän kaikesta repussani 12. Opiskelija 12, nimi: Minä, Joskus he. törmännyt, pidän kaikesta repussani 14. Opiskelija 14, nimi: Kun pidän,Ei koskaan,pidän kaikesta repussani 16. Opiskelija 16, nimi: Minä,Aina on jotain,pidän kaikesta repussani 17. Opiskelija 17, nimi: Minä,Joskus törmään,pidän kaikesta repussani 18 Opiskelija 18, nimi: Minä, Aina on jotain, pidän kaikesta repussa 19. Opiskelija 19, nimi: Minä, Joskus he törmäävät, Se on vain epämukavaa, mutta en osaa selittää 21. Opiskelija 21, nimi: Milloin, Aina on jotain, Tykkään kaikesta repussani 22. Opiskelija 22, nimi: Minä,Ei koskaan,Liian raskas 23. Opiskelija 23, nimi: Minä,Joskus he törmäävät,Pidän kaikesta repussani 24. Opiskelija 24, nimi: Minä ,Joskus jäät kiinni,Liian painava
Kaikki tämä oli tietysti mahdollista muuntaa puhelimessa, mutta se tuntui helpommalta tällä tavalla. Tämä voidaan jo helposti jäsentää yksinkertaisella säännöllisellä lausekkeella. Kirjoitamme PHP-skriptin: