Cross-platform HTML5-ohjelmointi / uusi ketju

Aikaisemmassa ketjussa käytiin M-Karin vahvalla läsnäololla keskustelua html5 vs natiivi, johon itsekin osallistuin melko aktiivisesti.

Ajattelin aloittaa uuden ketjun ja toiveena on, että jos saadaan keskustelu käyntiin, koetetaan pysyä asiassa ja olla niin kohteliaita kuin vain ohjelmoijalle voi olla mahdollista :P. Ainakin itse sitoudun tähän ja lasken kymmeneen vaikka olisinkin eri mieltä.

Lähtökohtana keskustelulle olisi oletus, että ok, HTML5 on se mitä käytetään. Olen tutkaillut netistä asiaa monelta kantilta ja tullut siihen tulokseen, että mobiiliohjelmoinnissa alkuun on helpointa päästä natiivilla platformilla siihen tarkoitettune IDEineen. Mutta kun halutaan tehdä samalla kertaa appi vähintään Androidille ja IOSille, vastaus on HTML5.

Hyvä. Sitten asiaan, eli frameworkkien valintaan ja sen vaikeuteen.

Itselleni on tuottanut suurta tuskaa ymmärtää, mitä kaikkea tarvitaan siihen, että mulla lähtötilanteessa on ubuntu-linux-pc ja haluan softan, sanotaan vaikka "hello world", joka toimii suoraan kaikissa päätelaitteissa. En edes tiedä mistä aloittaisin. Ainaki on valittava:

- HTML5-framework, johon varsinainen koodi sitten upotetaan. Näitähän riittää, itselleni on muodostunut kuva että Ionic voisi olla hyvä valinta(?). Onko koodi HTML5:ttä, vai jotain frameworkin omaa kieltä? Vai onko siinä sekaisin html5, javascript, frameworkin oma kieli jne? Ionicissa puhutaan cli:stä, onko se tekstieditori?

- Builder (vai mikä se on nimeltään) joka tekee mitä? Onko tämä se joka tekee esim. apk-paketin, jonka voi toimittaa kauppaan?

Onko olemassa frameworkia, johon voi Android studion tapaan kirjoittaa koodin, kääntää sen, tehdä paketin ja vielä viedä kauppaan lopuksi?

- Backend ja autentikointi siihen. Miten tämä valitaan, esim. Ionic platform Ionicin tapauksessa? Entä jos haluaa vaihtaa backendia myöhemmin? Voisi kuvitella, että jos puhelimeen käännettävä koodi sisältää frameworkin omaa syntaksia, backendissa tarvittaisiin samaa, tai ainakin jotain annotaatioita tms.

- Entä jos on tehnyt appsin melkein loppuun jollain frameworkilla, ja törmää ylivoimaiseen esteeseen? Plugin puuttuu tms ja tulee tarve vaihtaa toiseen frameworkiin. Onko työ mennyt täysin hukkaan (liittyy ensimmäiseen ranskalaiseen viivaan, eli jos frameworkissa on oma kieli, niin silloinhan sitä ei voi siirtää toiseen frameworkiin vai kuinka)?

- Hinta. Esim Ionicin tapauksessa näyttää äkkiseltään siltä, että alkuun pääsee ilmaiseksi, mutta sitten alkaa maksamaan. Ovatko paremmat työkalut kaikissa frameworkeissä aina maksullisia.

- Toimittaminen kauppaan. Miten se käy?
Ilmianna
Jaa

22 Vastausta



Facebookin perustaja katuu laskemistaan html5:n varaan. Se oli hänen kaikkein suurin virheensä.

https://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/

Android studiolla pystyy tekemään softaa suoraan sekä Androidille että IOS:lle. Sama java-koodi kelpaa molempiin. Ei tarvitse opetella html5:ttä, js:ää, frameworkkeja jne.

Intelin ilmainen Multi-OS Engine on vähintään kokeilemisen arvoinen. Pluginin asennuksen jälkeen ainoastaan ui pitää tehdä erikseen laitteille, ja MOS tarjoaa GUIn molempiin.

https://software.intel.com/en-us/node/633225

Windows-puhelimet voinee unohtaa, eihän niitä enää valmistetakaan.
Kommentoi
Ilmianna
Jaa
1 VASTAUS:
"Facebookin perustaja katuu laskemistaan html5:n varaan. Se oli hänen kaikkein suurin virheensä."

Vanhentunut uutinen. Sehän vuodelta 2012!

Vuonna 2012 oli vielä Windows Mobilea minkä selain oli olennaisest IE6 tasoa. Vasta Windows Phone 7 ja joka tuli vuonna 2011 alkoi pystyä HTML5 temppuihin järkevästi.

Jos uutinen on vuodelta 2012 niin pitäisi järkikin sanoa että ei se nyt mitenkään päde nykyaikaan ja tuolloin oli vasta tullut niitä HTML5 puhelimia.

Kumma juttu kun pitää kaivella muinaisjuttuja, että ihan kuin niillä olisi mitään tekemistä nykypäivän kanssa. Standardit seuraa kännyvehkeissä desktopia noin 4,5-6v jäljessä.

"Intelin ilmainen Multi-OS Engine on vähintään kokeilemisen arvoinen. Pluginin asennuksen jälkeen ainoastaan ui pitää tehdä erikseen laitteille, ja MOS tarjoaa GUIn molempiin."

HTML5:lla ei tarvitse tehdä mitään erikseen eri laitteille.
Kommentoi
Ilmianna
Jaa
+Lisää kommentti
"Lähtökohtana keskustelulle olisi oletus, että ok, HTML5 on se mitä käytetään. Olen tutkaillut netistä asiaa monelta kantilta ja tullut siihen tulokseen, että mobiiliohjelmoinnissa alkuun on helpointa päästä natiivilla platformilla siihen tarkoitettune IDEineen."

Sanoisin että ei pidä paikkaansa. HTML5 ohjelmoinnissa alkuun pääsee kun on selain ja mikä tahansa väline mikä tekee tekstitiedostoja.

"Itselleni on tuottanut suurta tuskaa ymmärtää, mitä kaikkea tarvitaan siihen, että mulla lähtötilanteessa on ubuntu-linux-pc ja haluan softan, sanotaan vaikka "hello world", joka toimii suoraan kaikissa päätelaitteissa."

Avaat Geditin ja kirjoitat .html tiedoston jossa lukee "hello world".

https://www.mkyong.com/html/html-tutorial-hello-world/

Kannattaa muistaa että suuri osa käyttöliittymäpuolesta on suunniteltavissa ja tehtävissä ilman mitään logiikkaa, että tekee vain sitä ulkoasua. Semmoinen hyvä työväline tähän on vaikka käyttää Brackets editoria ja Chrome selainta. Sitä voi suoraan kirjoittaa koodia ja se miltä se näyttää, näkyy reaaliajassa Chromen ikkunassa.

"- HTML5-framework, johon varsinainen koodi sitten upotetaan. Näitähän riittää, itselleni on muodostunut kuva että Ionic voisi olla hyvä valinta(?). Onko koodi HTML5:ttä, vai jotain frameworkin omaa kieltä?"

Yleensä HTML5 on se matalamman tason kerros missä se dokumenttirakenteen kieli, rajapintakutsuineen. Tällä hetkellä, logiikka käännetään viimekädessä Javascriptiksi kun ajetaan selaimella. WebAssembly on tulossa.

Tavallisesti sovellus kirjoitetaan ohjelmointikielen ja frameworkin yhdistelmällä mistä se käännetään Javascriptiksi mikä toimii siinä selaimen tarjoaman HTML5:n päällä.

React puolella käytetään tavallisesti esimerkiksi Javascriptin uutta ES6 versiota ja JSX templateja, Angularilla taas Typescriptiä. Voihan noita vaihdella ja säädellä miten tykkää. Periaatteessa mitä tahansa kieltä kääntää Javascriptiksi ja ajaa sitten siinä selaimella. Frameworkin tärkein tehtävä on se, että joku yhtenäinen rakenne miten se ohjelma sitten rakentuu ja sen komponentit.

"Ionicissa puhutaan cli:stä, onko se tekstieditori?"

cli kuullostaa "Command Line Interfacelta" mutta en tiedä tuota Ionicia.

"- Builder (vai mikä se on nimeltään) joka tekee mitä? Onko tämä se joka tekee esim. apk-paketin, jonka voi toimittaa kauppaan?"

Vaikea sanoa mitä tuolla tarkoitetaan mutta voi toki olla "kääntöjärjestelmä". Ohjelmathan käännetään eri välineillä. Ei nyt mitenkään pakollista alkuun pääsemisessä.

"Onko olemassa frameworkia, johon voi Android studion tapaan kirjoittaa koodin, kääntää sen, tehdä paketin ja vielä viedä kauppaan lopuksi?"

Tuo kauppaan vienti pomppaa häiritsevästi joka yhteydessä. Mihin kauppaan? Steam? Samsungin store? Suomalainen kirjakauppa? Miksi pitää viedä?

Ohjelman jakelu on täysin eri asia kuin ohjelman tekeminen. Ohjelmaa ei ole mikään pakko viedä mihinkään kauppaan. Toimiihan tämä Suomi24 esimerkiksi mobiilisti HTML5:lla, on vaan törkeän tahmea ja mainokset lisäksi mutta ei tätä tarvitse mistään kaupasta hakea. Useimpia sovelluksia ei edes jaeta missään sovelluskaupoissa.

"- Backend ja autentikointi siihen. Miten tämä valitaan, esim. Ionic platform Ionicin tapauksessa? Entä jos haluaa vaihtaa backendia myöhemmin? Voisi kuvitella, että jos puhelimeen käännettävä koodi sisältää frameworkin omaa syntaksia, backendissa tarvittaisiin samaa, tai ainakin jotain annotaatioita tms."

Backendin voi tehdä täysin riippumatta siitä mitä frontissa on. Sitä jutellaan backendin kanssa HTTP rajapinnan kanssa. Ihan perus get, post, update, delete jne. Tuo on ihan standardia tavaraa ja ne natiivit mobiilisovellukset toimivat samalla tavalla. Välineitä on yllin kyllin.

"Entä jos on tehnyt appsin melkein loppuun jollain frameworkilla, ja törmää ylivoimaiseen esteeseen? Plugin puuttuu tms ja tulee tarve vaihtaa toiseen frameworkiin. Onko työ mennyt täysin hukkaan (liittyy ensimmäiseen ranskalaiseen viivaan, eli jos frameworkissa on oma kieli, niin silloinhan sitä ei voi siirtää toiseen frameworkiin vai kuinka)?"

No yleensä ohjelmistoprojektit lähtee siitä, että tiedetään mitä halutaan, sitten katsotaan mikä olisi sopivin tapa hoitaa se. Ei ole mitään yleisjuttua mikä käy kaikkeen. Ei esimerkiksi saa Android Studiolla tehtyä ohjelmaa siihen iPhoneen.

"Ovatko paremmat työkalut kaikissa frameworkeissä aina maksullisia."

En nyt nopeasti tiedä edes mitään maksullista. Kaikki tuntuu olevan maksuttomia. Haet ehkä jotain erikoisempaa. Itse vaan asentelen esim. npm install create-react-app ja se on siinä sit.
Kommentoi
Ilmianna
Jaa
15 VASTAUSTA:
Aloitetaanko helpommasta niin pääsee parempaan ymmärrykseen siitä mistä puhutaan. Onko jompi kumpi alla olevista oikein? Toimiikohan ascii art tällä suomi24 alustalla.. epäilen. No kokeillaan. Olis helpompi keskustella jos toimisi.

Mobiililaite Backend
+---------+ +----------+
| | HTML5 | |
| +--------------------------+ |
| | | |
+---------+ +----------+

Vai

Mobiililaite Backend
+---------+ +----------+
| | JAVASCRIPT ja HTML5 | |
| +--------------------------+ |
| | | |
+---------+ +----------+
Kommentoi
Ilmianna
Jaa
html-person kirjoitti:
Aloitetaanko helpommasta niin pääsee parempaan ymmärrykseen siitä mistä puhutaan. Onko jompi kumpi alla olevista oikein? Toimiikohan ascii art tällä suomi24 alustalla.. epäilen. No kokeillaan. Olis helpompi keskustella jos toimisi.

Mobiililaite Backend
+---------+ +----------+
| | HTML5 | |
| +--------------------------+ |
| | | |
+---------+ +----------+

Vai

Mobiililaite Backend
+---------+ +----------+
| | JAVASCRIPT ja HTML5 | |
| +--------------------------+ |
| | | |
+---------+ +----------+
No eihän se toimi kun ei oo monospace-fonttia saatavilla. Hmm. mitenköhän sais tehtyä periaatekuvia ilman että pitää linkittää ulos.
Kommentoi
Ilmianna
Jaa
html-person kirjoitti:
Aloitetaanko helpommasta niin pääsee parempaan ymmärrykseen siitä mistä puhutaan. Onko jompi kumpi alla olevista oikein? Toimiikohan ascii art tällä suomi24 alustalla.. epäilen. No kokeillaan. Olis helpompi keskustella jos toimisi.

Mobiililaite Backend
+---------+ +----------+
| | HTML5 | |
| +--------------------------+ |
| | | |
+---------+ +----------+

Vai

Mobiililaite Backend
+---------+ +----------+
| | JAVASCRIPT ja HTML5 | |
| +--------------------------+ |
| | | |
+---------+ +----------+
Kuvaan ennemminkin työjärjestyksen.

1. Käyttöliittymän ulkoasu: Brackets + Google Chrome. Rakenteellisesti puhdas ja BEM nimeäminen: http://getbem.com/

2. Kasaa käyttöliittymän sisältö .json tiedostoon yhteen siistiin rakenteeseen. Että ymmärrät sen datan. Rakenne heijastaa BEM nimeämistä

3. Analysoi ulkoasu ja sen pohjalta määrittele REST API. API pitäisi suunnitella käsikädessä käyttöliittymän kanssa ja kasasta käyttöliittymän sisältö sen tiedon mukaan. Avainasemassa on se, että pystyt muodostamaan käyttöliittymän sisällön ilman ehtolauseita. API:ssa nimetty BEM nimeämisellä.

Sinun pitäisi voida esittää käyttöliittymässä näkyvä data periaatteessa tällä templatoituna: https://mustache.github.io/

Eli kuten huomaat, ei ehtolauseita.

4. Kun sinulla on REST API:a muodostettu sekä visualisoitu käyttöliittymä, voit rakentaa backendin ja frontendin vapaavalintaisesti. Backendiin käy melkein mikä tahansa, frontendissä voit sitten valita teetkö HTML5:lla vai jollain natiivilla.

Nyt olisi ohjelma pääpiirteissään suunniteltu, että voit rakentaa siihen sen logiikan frontendiin ja backendiin. Järkevää pitää ne erillään. Hyvin usein järkevää pitää myös kaikki konfiguraatio myös erillään.

5. Se miten tästä eteenpäin riippuu vaatimuksista, mutta hyvä saada rakenne, API ja nimeäminen kuntoon ja sitten keskittyy siihen logiikkaan mikä jäisi mahdollisimman yksinkertaiseksi. Joka tapauksessa lähtisi siitä että kirjoittaa testit ensin ja sitten toteutuksen.

Eri frameworkkien kanssa käytellään vähän eri testityökaluja ja hyvä käyttää sitä mitä muutkin kyseisessä ekosysteemissä.
Kommentoi
Ilmianna
Jaa
On nää aika kököt nää suomi24 sivut. No ei mahda mitään.

Hello worldin tekeminen html:llä ei ole ongelma, kuten ei myöskään perus-javaskriptin teko. Tässä mobiili-html5 -ratkaisussa mulle on kuitenkin epäselvää missä tuo html generoidaan. Tehdäänkö se backendissa ja tarjotaan sieltä http:llä web-sivu jonka appi käy hakemassa ja tulkitsee. Vai onko html upotettuna applikaatioon ja ohjelmalogiikka käyttöliittymän osalta itse appissa, ja backendista tulevan datan avulla sitten parsitaan käyttöliittymän muutokset.

Arkkitehtuuriasioita siis, mistä yritän kysellä.

Kauppa on tärkeä siten, että jos tekee mobiiliapplikaation ja haluaa siitä rahaa, niin kaupastahan sen pystyy jakelemaan. HTML-sivun voi tehdä minne vain, mutta ei kai se silloin olekaan mobiiliapplikaatio, vaan mobiililaitteelle optimoitu web-sivu?

Kun saisi hahmotettua ensin mistä puhutaan niin olisi helpompi jatkaa.
Kommentoi
Ilmianna
Jaa
M-Kar kirjoitti:
Kuvaan ennemminkin työjärjestyksen.

1. Käyttöliittymän ulkoasu: Brackets + Google Chrome. Rakenteellisesti puhdas ja BEM nimeäminen: http://getbem.com/

2. Kasaa käyttöliittymän sisältö .json tiedostoon yhteen siistiin rakenteeseen. Että ymmärrät sen datan. Rakenne heijastaa BEM nimeämistä

3. Analysoi ulkoasu ja sen pohjalta määrittele REST API. API pitäisi suunnitella käsikädessä käyttöliittymän kanssa ja kasasta käyttöliittymän sisältö sen tiedon mukaan. Avainasemassa on se, että pystyt muodostamaan käyttöliittymän sisällön ilman ehtolauseita. API:ssa nimetty BEM nimeämisellä.

Sinun pitäisi voida esittää käyttöliittymässä näkyvä data periaatteessa tällä templatoituna: https://mustache.github.io/

Eli kuten huomaat, ei ehtolauseita.

4. Kun sinulla on REST API:a muodostettu sekä visualisoitu käyttöliittymä, voit rakentaa backendin ja frontendin vapaavalintaisesti. Backendiin käy melkein mikä tahansa, frontendissä voit sitten valita teetkö HTML5:lla vai jollain natiivilla.

Nyt olisi ohjelma pääpiirteissään suunniteltu, että voit rakentaa siihen sen logiikan frontendiin ja backendiin. Järkevää pitää ne erillään. Hyvin usein järkevää pitää myös kaikki konfiguraatio myös erillään.

5. Se miten tästä eteenpäin riippuu vaatimuksista, mutta hyvä saada rakenne, API ja nimeäminen kuntoon ja sitten keskittyy siihen logiikkaan mikä jäisi mahdollisimman yksinkertaiseksi. Joka tapauksessa lähtisi siitä että kirjoittaa testit ensin ja sitten toteutuksen.

Eri frameworkkien kanssa käytellään vähän eri testityökaluja ja hyvä käyttää sitä mitä muutkin kyseisessä ekosysteemissä.
Joo ehdit ensiksi. Tähän voi palata sitten kun ymmärrän mitä tehdään missäkin. Tää mistä sinä puhut on niin paljon enemmän advanced-tasolla että pitää aloittaa enemmän periaatteesta.

Se mitä tähän mennessä olen joskus tehnyt, on suunnilleen seuraavassa:

- tehnyt androidiin käyttöliittymän xml:llä
- tehnyt ohjelmalogiikan sitä varten appsiin
- backendiin on menty RESTillä ja data haettu / tallennettu google cloud engineen

Eli kaikki tämä menisi uusiksi ja lähden siinä mielessä nollasta.
Kommentoi
Ilmianna
Jaa
html5-mies kirjoitti:
Joo ehdit ensiksi. Tähän voi palata sitten kun ymmärrän mitä tehdään missäkin. Tää mistä sinä puhut on niin paljon enemmän advanced-tasolla että pitää aloittaa enemmän periaatteesta.

Se mitä tähän mennessä olen joskus tehnyt, on suunnilleen seuraavassa:

- tehnyt androidiin käyttöliittymän xml:llä
- tehnyt ohjelmalogiikan sitä varten appsiin
- backendiin on menty RESTillä ja data haettu / tallennettu google cloud engineen

Eli kaikki tämä menisi uusiksi ja lähden siinä mielessä nollasta.
No oikeastaan aika sama.

HTML:llä ulkoasun esittäminen on olennaisesti vastaavaa kuin XML, ja backendiin REST:illä. Logiikkaa tulee sitten frontendiin ja backendiin. Pidän nimeämistä ja käyttöliittymän datan esittämistä logiikasta vapaana tärkeänä.

Frontti nyt voi olla sitä natiivia tai HTML5:sta, tarpeen mukaan. HTML5 sopii lähes kaikkeen, on siirrettävämpää ja standardimpaa. Joskus sitten valitaan natiivi.
Kommentoi
Ilmianna
Jaa
html5-person kirjoitti:
On nää aika kököt nää suomi24 sivut. No ei mahda mitään.

Hello worldin tekeminen html:llä ei ole ongelma, kuten ei myöskään perus-javaskriptin teko. Tässä mobiili-html5 -ratkaisussa mulle on kuitenkin epäselvää missä tuo html generoidaan. Tehdäänkö se backendissa ja tarjotaan sieltä http:llä web-sivu jonka appi käy hakemassa ja tulkitsee. Vai onko html upotettuna applikaatioon ja ohjelmalogiikka käyttöliittymän osalta itse appissa, ja backendista tulevan datan avulla sitten parsitaan käyttöliittymän muutokset.

Arkkitehtuuriasioita siis, mistä yritän kysellä.

Kauppa on tärkeä siten, että jos tekee mobiiliapplikaation ja haluaa siitä rahaa, niin kaupastahan sen pystyy jakelemaan. HTML-sivun voi tehdä minne vain, mutta ei kai se silloin olekaan mobiiliapplikaatio, vaan mobiililaitteelle optimoitu web-sivu?

Kun saisi hahmotettua ensin mistä puhutaan niin olisi helpompi jatkaa.
"Hello worldin tekeminen html:llä ei ole ongelma, kuten ei myöskään perus-javaskriptin teko. Tässä mobiili-html5 -ratkaisussa mulle on kuitenkin epäselvää missä tuo html generoidaan."

Normaalisti sen tekee valittu framework frontissa. Lähinnä se sitä kun kirjoittelee komponentteja, että tekeekö niitä komponentteja Reactilla, Vue:lla vai Angularilla kun niitä yleensä käytetään. Ja näistäkin Angular tuntuu jäävän kokoajan vähemmälle.

Itse teen vaan create-react-app ohjelmalla pohjan ja alan kasaamaan siihen Reactilla componentteja ja containereita järkevään rakeenteeseen, ja käyttöliittymän datan hallinta sitten Reduxilla. Käytän Jestiä testeihin. Erona containerilla ja componentilla se, että container sisältää logiikkaa kun component sitten vaan se esitys sille.

Ulkosuun sitten joku CSS framework kuten Bootstrap, Material UI tai mitä nyt keksiikään. Tai voi kasailla omia. CSS frameworkeissa paljon valinnan varaa myös.
Kommentoi
Ilmianna
Jaa
M-Kar kirjoitti:
"Hello worldin tekeminen html:llä ei ole ongelma, kuten ei myöskään perus-javaskriptin teko. Tässä mobiili-html5 -ratkaisussa mulle on kuitenkin epäselvää missä tuo html generoidaan."

Normaalisti sen tekee valittu framework frontissa. Lähinnä se sitä kun kirjoittelee komponentteja, että tekeekö niitä komponentteja Reactilla, Vue:lla vai Angularilla kun niitä yleensä käytetään. Ja näistäkin Angular tuntuu jäävän kokoajan vähemmälle.

Itse teen vaan create-react-app ohjelmalla pohjan ja alan kasaamaan siihen Reactilla componentteja ja containereita järkevään rakeenteeseen, ja käyttöliittymän datan hallinta sitten Reduxilla. Käytän Jestiä testeihin. Erona containerilla ja componentilla se, että container sisältää logiikkaa kun component sitten vaan se esitys sille.

Ulkosuun sitten joku CSS framework kuten Bootstrap, Material UI tai mitä nyt keksiikään. Tai voi kasailla omia. CSS frameworkeissa paljon valinnan varaa myös.
Katsoin tuota create-react-app -skriptiä. Se näköjään tekee rungon, mutta miten sitä editoidaan? VI:lläkö? Entä miten nähdään tulos?

Näissä kaikissa mitä olen nyt katsonut, on sama ongelma. Dokumentaatio on vaillinnaista tai en löydä sitä. Api-kuvaukset eivät riitä, kun ei ole ymmärrystä siitä miten työkaluja käytetään.

Reactista löytyy esim

https://facebook.github.io/react/tutorial/tutorial.html

, mutta siinäkin ilmeisesti oletetaan että kehittäjällä on jo "päässä" visio työn sujumisesta alusta loppuun.

Androidin develpers -dokumentaatio on googlemaiseen tapaan aivan toisella tasolla. Sieltä löytää kädestä pitäen neuvotut esimerkit suunnilleen kaikkeen mahdolliseen, loogisessa järjestyksessä edeten aivan alusta appsin loppuun saamiseen.

Pointtini on, että näiden frameworkkien opiskeluun menee liikaa aikaa, jos kaikki pitää tehdä yrityksen ja erehdyksen kautta. Vai enkö vain löydä sitä dokumentaatiota kun en tiedä mistä etsiä? IOS-dokumentaatio on ilmeisesti lähes yhtä hyvin tehty kuin androidin, joten tuntuisi että kun android on jo jotenkuten hallussa, pääsisin nopeammin lopputulokseen jos vain opiskelisin IOS-ohjelmoinnin.

Toisaalta jos html5 näillä framewrokeillä on oikeasti helppoa, se olisi parempi. Mutta onko se kuitenkaan helppoa, kun ei tahdo löytää esimerkkejäkään mistään? Ihmetyttää, mihin noita kaikkia voidaan tarvita, kun natiivissa riittää pelkkä java.

Jos saisi jonkun toimivan esimerkin siitä mitä pitää tehdä, että saan näillä työkaluilla hello worldin ruudulle ja tavarat .apk -formaattiin, niin se olisi jo jotain.

Nuo mitä luettelit tulevat eteen vasta myöhemmin, kun ensin on selvinnyt mistä lähdetään liikkeelle.
Kommentoi
Ilmianna
Jaa
html5-person kirjoitti:
Katsoin tuota create-react-app -skriptiä. Se näköjään tekee rungon, mutta miten sitä editoidaan? VI:lläkö? Entä miten nähdään tulos?

Näissä kaikissa mitä olen nyt katsonut, on sama ongelma. Dokumentaatio on vaillinnaista tai en löydä sitä. Api-kuvaukset eivät riitä, kun ei ole ymmärrystä siitä miten työkaluja käytetään.

Reactista löytyy esim

https://facebook.github.io/react/tutorial/tutorial.html

, mutta siinäkin ilmeisesti oletetaan että kehittäjällä on jo "päässä" visio työn sujumisesta alusta loppuun.

Androidin develpers -dokumentaatio on googlemaiseen tapaan aivan toisella tasolla. Sieltä löytää kädestä pitäen neuvotut esimerkit suunnilleen kaikkeen mahdolliseen, loogisessa järjestyksessä edeten aivan alusta appsin loppuun saamiseen.

Pointtini on, että näiden frameworkkien opiskeluun menee liikaa aikaa, jos kaikki pitää tehdä yrityksen ja erehdyksen kautta. Vai enkö vain löydä sitä dokumentaatiota kun en tiedä mistä etsiä? IOS-dokumentaatio on ilmeisesti lähes yhtä hyvin tehty kuin androidin, joten tuntuisi että kun android on jo jotenkuten hallussa, pääsisin nopeammin lopputulokseen jos vain opiskelisin IOS-ohjelmoinnin.

Toisaalta jos html5 näillä framewrokeillä on oikeasti helppoa, se olisi parempi. Mutta onko se kuitenkaan helppoa, kun ei tahdo löytää esimerkkejäkään mistään? Ihmetyttää, mihin noita kaikkia voidaan tarvita, kun natiivissa riittää pelkkä java.

Jos saisi jonkun toimivan esimerkin siitä mitä pitää tehdä, että saan näillä työkaluilla hello worldin ruudulle ja tavarat .apk -formaattiin, niin se olisi jo jotain.

Nuo mitä luettelit tulevat eteen vasta myöhemmin, kun ensin on selvinnyt mistä lähdetään liikkeelle.
Onkohan Xamarin mistään kotoisin? Väittävät että sillä voisi tehdä natiivia koodia niin Androidille, iOSille kuin Windowsillekin "using existing skills,
teams, and code". Jos tuon oikein ymmärtää, niin koodia ei tarvitsisi enemmältä rukata eri ympäristöjä varten.

https://www.xamarin.com/platform
Kommentoi
Ilmianna
Jaa
natiivi.performanssi kirjoitti:
Onkohan Xamarin mistään kotoisin? Väittävät että sillä voisi tehdä natiivia koodia niin Androidille, iOSille kuin Windowsillekin "using existing skills,
teams, and code". Jos tuon oikein ymmärtää, niin koodia ei tarvitsisi enemmältä rukata eri ympäristöjä varten.

https://www.xamarin.com/platform
No samalla tavalla existing skills se käy kun tekee Reactilla. Oletus on että jokainen osaa asentaa ohjelmia, tietää mitä haluaa saada aikaiseksi, osaa käyttää selainta, mihin tehdään käyttäjän todennus, millä IDE:llä tai editorilla tykkää kirjoittaa koodia ja jne.

Nyt tuntuu olevan hakusessa ohjelmien asentaminen ja käynnistäminen, tai vaikka IP verkko jos ei saa otettua yhteyttä kännykältä vaikka siihen työkoneeseen. Nämä nyt on alkeisperusasioita eikä tarvitse yhtään koodin rukkaamista.

En näe suoraan mitään käyttöä Xamarinille, enemmän nysvää tuosta tulisi. Natiivia jos haluaa miniminysvällä niin sitä varten on react-native, että saa saman react ohjelman siirrettyä natiiviksi. Eli tekee ensiksi toimimaan ja sitten vasta miettii optimointeja.
Kommentoi
Ilmianna
Jaa
M-Kar kirjoitti:
No samalla tavalla existing skills se käy kun tekee Reactilla. Oletus on että jokainen osaa asentaa ohjelmia, tietää mitä haluaa saada aikaiseksi, osaa käyttää selainta, mihin tehdään käyttäjän todennus, millä IDE:llä tai editorilla tykkää kirjoittaa koodia ja jne.

Nyt tuntuu olevan hakusessa ohjelmien asentaminen ja käynnistäminen, tai vaikka IP verkko jos ei saa otettua yhteyttä kännykältä vaikka siihen työkoneeseen. Nämä nyt on alkeisperusasioita eikä tarvitse yhtään koodin rukkaamista.

En näe suoraan mitään käyttöä Xamarinille, enemmän nysvää tuosta tulisi. Natiivia jos haluaa miniminysvällä niin sitä varten on react-native, että saa saman react ohjelman siirrettyä natiiviksi. Eli tekee ensiksi toimimaan ja sitten vasta miettii optimointeja.
Tarkennuksena, html5-person kirjoittaa koko ajan samalla nimimerkillä eli meitä on keskustelemassa useampiakin.

Puhutko sinä, M-Kar, html5-sovelluksen yhteydessä apk-paketoidusta sovelluksesta? Vai ihan mobiilille optimoidusta web-sivusta? Jos jälkimmäisestä, niin sitten ymmärrän miksi itseni on niin vaikeaa ymmärtää mistä puhutaan ;).
Kommentoi
Ilmianna
Jaa
html5-person kirjoitti:
Katsoin tuota create-react-app -skriptiä. Se näköjään tekee rungon, mutta miten sitä editoidaan? VI:lläkö? Entä miten nähdään tulos?

Näissä kaikissa mitä olen nyt katsonut, on sama ongelma. Dokumentaatio on vaillinnaista tai en löydä sitä. Api-kuvaukset eivät riitä, kun ei ole ymmärrystä siitä miten työkaluja käytetään.

Reactista löytyy esim

https://facebook.github.io/react/tutorial/tutorial.html

, mutta siinäkin ilmeisesti oletetaan että kehittäjällä on jo "päässä" visio työn sujumisesta alusta loppuun.

Androidin develpers -dokumentaatio on googlemaiseen tapaan aivan toisella tasolla. Sieltä löytää kädestä pitäen neuvotut esimerkit suunnilleen kaikkeen mahdolliseen, loogisessa järjestyksessä edeten aivan alusta appsin loppuun saamiseen.

Pointtini on, että näiden frameworkkien opiskeluun menee liikaa aikaa, jos kaikki pitää tehdä yrityksen ja erehdyksen kautta. Vai enkö vain löydä sitä dokumentaatiota kun en tiedä mistä etsiä? IOS-dokumentaatio on ilmeisesti lähes yhtä hyvin tehty kuin androidin, joten tuntuisi että kun android on jo jotenkuten hallussa, pääsisin nopeammin lopputulokseen jos vain opiskelisin IOS-ohjelmoinnin.

Toisaalta jos html5 näillä framewrokeillä on oikeasti helppoa, se olisi parempi. Mutta onko se kuitenkaan helppoa, kun ei tahdo löytää esimerkkejäkään mistään? Ihmetyttää, mihin noita kaikkia voidaan tarvita, kun natiivissa riittää pelkkä java.

Jos saisi jonkun toimivan esimerkin siitä mitä pitää tehdä, että saan näillä työkaluilla hello worldin ruudulle ja tavarat .apk -formaattiin, niin se olisi jo jotain.

Nuo mitä luettelit tulevat eteen vasta myöhemmin, kun ensin on selvinnyt mistä lähdetään liikkeelle.
"Katsoin tuota create-react-app -skriptiä. Se näköjään tekee rungon, mutta miten sitä editoidaan? VI:lläkö? Entä miten nähdään tulos?"

Tuloksen näkee selaimella. Se create-react-app tekee siihen myös buildiympäristön ja laittaa ohjelman pyörimään nodejs:lle ja kertoo missä portissa sovellus vastaa.

Saa editoida millä haluaa. Ei se ota siihen kantaa. Itse käytän Visual Studio Codea mutta saahan sinulla olla joku oma IDE.

"Näissä kaikissa mitä olen nyt katsonut, on sama ongelma. Dokumentaatio on vaillinnaista tai en löydä sitä."

Reactin kuvaus löytyy Reactin sivuilta. Reduxin kuvaus löytyy Reduxin sivuilta. HTML5 API kuvaus löytyy joka puolelta, vaikka Mozillalta. Bootstrapin kuvaus löytyy Bootstrapin sivuilta. Ja itse lisään ihan vaan npm install react-bootsrap --save niin saa sen mukaan projektiin valmiiksi Reactille paketoituna. Ja sen kuvaus löytyy siitä.

"Api-kuvaukset eivät riitä, kun ei ole ymmärrystä siitä miten työkaluja käytetään."

Aika simppeleitä työkaluja mutta pitäis nyt varmaan tietää mistä työkalusta on kyse. Työkaluja on valtavasti ja eri asioihin, mitä kukin haluaa tehdä.

" mutta siinäkin ilmeisesti oletetaan että kehittäjällä on jo "päässä" visio työn sujumisesta alusta loppuun."

No ihan normaalisti tiedetään mitä halutaan, suunnittellaan mitä tehdään, kirjoitetaan vähään testejä ja sitten koodia. Ihan perusasia ollut ohjelmoinnissa aina.

Kun tässä nyt ei ole kyse muusta kuin html dokumentista ja siihen kytketyistä tiedostoista joka käynnistetään linkistä sieltä mistä halutaan.

"Toisaalta jos html5 näillä framewrokeillä on oikeasti helppoa, se olisi parempi."

On helppoa. Koita nyt ensiksi se create-react-app ja avaat selaimella sen. Sitten vaikka npm install react-bootsrap --save ja lisäät jonkun komponentin. Selaimesta Ctrl+Shift+I niin saat profilointia näkyviin mitä siellä tapahtuu.

"Mutta onko se kuitenkaan helppoa, kun ei tahdo löytää esimerkkejäkään mistään?"'

Joku GitHub on täynnä esimerkkiä.

"Ihmetyttää, mihin noita kaikkia voidaan tarvita, kun natiivissa riittää pelkkä java."

Ei riitä. Onhan siinäkin Android API, backend täysin samalla tavalla, IDE, emulaattori, testausautomaatio..

"Jos saisi jonkun toimivan esimerkin siitä mitä pitää tehdä, että saan näillä työkaluilla hello worldin ruudulle ja tavarat .apk -formaattiin, niin se olisi jo jotain."

No toimiva Hello World tulee esimerkiksi kun on selain, nodejs ja npm:

npm install -g create-react-app <- asenna järjestelmään create-react-app, muista oikeudet
create-react-app <-- aja sovelluksen luonti
npm install <-- asenna riippuvuudet
npm run start <-- käynnistä devinä

Mikään .apk formaatti ei tähän liity oikein mitenkään. Semmoista ei tarvitse. ja on ylimääräinen vaihe.

Sitä kun ajaa:

npm run build

niin se kääntää ohjelman tiedostot yhteen kansioon ja ne voi pistää mihin haluaa. Ja toimii sellaisenaan joka laitteessa. Tuota voi ajaa suoraan eri laitteista asentamatta kun otat vaan koneeseesi yhteyden missä ajat sitä.
Kommentoi
Ilmianna
Jaa
html5-person kirjoitti:
Tarkennuksena, html5-person kirjoittaa koko ajan samalla nimimerkillä eli meitä on keskustelemassa useampiakin.

Puhutko sinä, M-Kar, html5-sovelluksen yhteydessä apk-paketoidusta sovelluksesta? Vai ihan mobiilille optimoidusta web-sivusta? Jos jälkimmäisestä, niin sitten ymmärrän miksi itseni on niin vaikeaa ymmärtää mistä puhutaan ;).
Emmä ole mitään .apk paketointia sotkenut tähän mitenkään.

Ohjelman jakelu ei liity mitenkään ohjelman tekemiseen. En siis ymmärrä mikä hinku tähän on sotkea mitään .apk paketointia tai sovelluskauppaa millään tavalla.
Kommentoi
Ilmianna
Jaa
M-Kar kirjoitti:
Emmä ole mitään .apk paketointia sotkenut tähän mitenkään.

Ohjelman jakelu ei liity mitenkään ohjelman tekemiseen. En siis ymmärrä mikä hinku tähän on sotkea mitään .apk paketointia tai sovelluskauppaa millään tavalla.
No tuota, kun minä luulin koko ajan että puhutaan asennettavista sovelluksista. Eli okei, nyt ymmärrän miksi en meinannut millään ymmärtää mitä tarkoitat. Eli varmistetaan nyt vielä, tuo mitä sinä kuvaat on siis joku html5-sivu(sto) vapaasti valitulla saitilla, ja käyttäjä menee sinne mobiililaitteensa selaimella?

Mutta mitä tarkoitat ohjelman jakelulla? Tarkoitatko tavallista hyperlinkkiä joka ohjaa tuolle mobiilioptimoidulle html5-sivulle?
Kommentoi
Ilmianna
Jaa
html5-person kirjoitti:
No tuota, kun minä luulin koko ajan että puhutaan asennettavista sovelluksista. Eli okei, nyt ymmärrän miksi en meinannut millään ymmärtää mitä tarkoitat. Eli varmistetaan nyt vielä, tuo mitä sinä kuvaat on siis joku html5-sivu(sto) vapaasti valitulla saitilla, ja käyttäjä menee sinne mobiililaitteensa selaimella?

Mutta mitä tarkoitat ohjelman jakelulla? Tarkoitatko tavallista hyperlinkkiä joka ohjaa tuolle mobiilioptimoidulle html5-sivulle?
Minä olen puhunut kaiken aikaa sovelluksen tekemisestä.

Sovellus voidaa jakaa eri tavoin. Voi olla peli vaikka Steamissa, voi pistää CD-levylle ja myydä kivijalkamyymälässä, voi olla Google Playssä, voi olla tilattavissa ja sitten se käydään asentamassa asiakkaan palvelimelle. Voi olla nettisivu josta ladataan asennuspaketti. Voi olla tulostettuna QR-koodi josta pääsee sovellukseen. Tuo kaikki on ohjelman jakelua, ei ohjelman tekemistä.

Jakelu on täysin eri asia kuin tekeminen. Suurinta osaa ohjelmista loppukäyttäjä ei asenna mihinkään vaan käynnistää suoraan selaimella. Varmaan miljardi tms. ihmistä käyttää esimerkiksi Facebookia suoraan menemällä www.facebook.com osoitteeseen läppärin selaimella. Että ensiksi voisi tehdä sen sovelluksen ja sitten miettiä sitä jakelua.

Suurin osa työkäyttöön tehdyistä sovelluksista toimii myös näin. Esimerkiksi: https://www.getapp.com/

Sovelluksen voi käynnistää menemällä laitteen selaimella sinne mutta voihan sitä tehdä myös pikakuvaketta. Sillä ei ole oikein merkitystä minkä kokoinen laite on kyseessä. Sovelluksesta ei myöskään tarvitse tehdä erikseen mitään "mobiiliversiota" vaan voidaan näyttää ruudun sisältö sen mukaan paljon on tilaa.
Kommentoi
Ilmianna
Jaa
+Lisää kommentti
Kuinka tehdään HTML5:llä sovellus, joka tallentaa halutuin väliajoin laitteen paikannustiedot laitteen muistiin. Tämä tallennus on tärkeää, jottei tietoja menetetä vikatilanteessa tai akun loppuessa. Tiedot poistettaisiin vasta kun käyttäjä niin haluaa, jota ennen niistä lasketaan kuljettu kokonaismatka.

Windows Phonessahan käytetään Geolocator-luokkaa https://docs.microsoft.com/en-us/uwp/api/Windows.Devices.Geolocation.Geolocator, mutta kuinka paikannusdata saadaan HTML5:n avulla universaalisti? Ja kuinka laitteen talennustilaa voidaan hyödyntää tietojen tallentamiseen HTML5:n avulla?
Kommentoi
Ilmianna
Jaa
3 VASTAUSTA:
LocalStorage tallennukseen: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Geolocation: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

Sitä voi muuten vapaasti avata selaimen Javascript konsolin ja kirjoitella sinne ja tutkia sitä ympäristöä. Se toimii tulkkina.

Eli, ihan perus selaimen käyttöä.
Kommentoi
Ilmianna
Jaa
M-Kar kirjoitti:
LocalStorage tallennukseen: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Geolocation: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

Sitä voi muuten vapaasti avata selaimen Javascript konsolin ja kirjoitella sinne ja tutkia sitä ympäristöä. Se toimii tulkkina.

Eli, ihan perus selaimen käyttöä.
Kiitos vastauksesta, perehdyn noihin. Javascript-konsolia on tullut käytettyä Pythonin BeautifulSoupin kanssa websivujen palautteita käsitellessä. Python ei vaan tunnu sopivan sellaisenaan mobiiliohjelmointiin.
Kommentoi
Ilmianna
Jaa
windowsin.jälkeen kirjoitti:
Kiitos vastauksesta, perehdyn noihin. Javascript-konsolia on tullut käytettyä Pythonin BeautifulSoupin kanssa websivujen palautteita käsitellessä. Python ei vaan tunnu sopivan sellaisenaan mobiiliohjelmointiin.
Joo ei se frontissa ole hyvä. Toisaalta se on kiva kieli kun haluaa käskeä tietokonetta tekemään jotain.
Kommentoi
Ilmianna
Jaa
+Lisää kommentti

Vastaa alkuperäiseen viestiin

Cross-platform HTML5-ohjelmointi / uusi ketju

Aikaisemmassa ketjussa käytiin M-Karin vahvalla läsnäololla keskustelua html5 vs natiivi, johon itsekin osallistuin melko aktiivisesti.

Ajattelin aloittaa uuden ketjun ja toiveena on, että jos saadaan keskustelu käyntiin, koetetaan pysyä asiassa ja olla niin kohteliaita kuin vain ohjelmoijalle voi olla mahdollista :P. Ainakin itse sitoudun tähän ja lasken kymmeneen vaikka olisinkin eri mieltä.

Lähtökohtana keskustelulle olisi oletus, että ok, HTML5 on se mitä käytetään. Olen tutkaillut netistä asiaa monelta kantilta ja tullut siihen tulokseen, että mobiiliohjelmoinnissa alkuun on helpointa päästä natiivilla platformilla siihen tarkoitettune IDEineen. Mutta kun halutaan tehdä samalla kertaa appi vähintään Androidille ja IOSille, vastaus on HTML5.

Hyvä. Sitten asiaan, eli frameworkkien valintaan ja sen vaikeuteen.

Itselleni on tuottanut suurta tuskaa ymmärtää, mitä kaikkea tarvitaan siihen, että mulla lähtötilanteessa on ubuntu-linux-pc ja haluan softan, sanotaan vaikka "hello world", joka toimii suoraan kaikissa päätelaitteissa. En edes tiedä mistä aloittaisin. Ainaki on valittava:

- HTML5-framework, johon varsinainen koodi sitten upotetaan. Näitähän riittää, itselleni on muodostunut kuva että Ionic voisi olla hyvä valinta(?). Onko koodi HTML5:ttä, vai jotain frameworkin omaa kieltä? Vai onko siinä sekaisin html5, javascript, frameworkin oma kieli jne? Ionicissa puhutaan cli:stä, onko se tekstieditori?

- Builder (vai mikä se on nimeltään) joka tekee mitä? Onko tämä se joka tekee esim. apk-paketin, jonka voi toimittaa kauppaan?

Onko olemassa frameworkia, johon voi Android studion tapaan kirjoittaa koodin, kääntää sen, tehdä paketin ja vielä viedä kauppaan lopuksi?

- Backend ja autentikointi siihen. Miten tämä valitaan, esim. Ionic platform Ionicin tapauksessa? Entä jos haluaa vaihtaa backendia myöhemmin? Voisi kuvitella, että jos puhelimeen käännettävä koodi sisältää frameworkin omaa syntaksia, backendissa tarvittaisiin samaa, tai ainakin jotain annotaatioita tms.

- Entä jos on tehnyt appsin melkein loppuun jollain frameworkilla, ja törmää ylivoimaiseen esteeseen? Plugin puuttuu tms ja tulee tarve vaihtaa toiseen frameworkiin. Onko työ mennyt täysin hukkaan (liittyy ensimmäiseen ranskalaiseen viivaan, eli jos frameworkissa on oma kieli, niin silloinhan sitä ei voi siirtää toiseen frameworkiin vai kuinka)?

- Hinta. Esim Ionicin tapauksessa näyttää äkkiseltään siltä, että alkuun pääsee ilmaiseksi, mutta sitten alkaa maksamaan. Ovatko paremmat työkalut kaikissa frameworkeissä aina maksullisia.

- Toimittaminen kauppaan. Miten se käy?

5000 merkkiä jäljellä

Peruuta