Upgrade to Pro — share decks privately, control downloads, hide ads and more …

building HTML hybrid app with ionic

3a9a08b8ce7c072230ca90d4d14dd6ea?s=47 bonar
March 11, 2018

building HTML hybrid app with ionic

3a9a08b8ce7c072230ca90d4d14dd6ea?s=128

bonar

March 11, 2018
Tweet

Transcript

  1. building HTML hybrid app
 with ionic @bonar

  2. Nakano Kyohei Software Engineer Co-founder at @atmoph twitter: @bonar facebook:

    nakano.kyohei
  3. None
  4. None
  5. building HTML hybrid app
 with ionic

  6. Frontend != Web Service

  7. HTML hybrid app

  8. HTML Hybrid app w 8FCٕज़Λ࢖ͬͯ࡞ΒΕͨϞόΠϧΞϓϦ w )5.-$44+BWB4DSJQUͰ6*Λ࡞Γɺ8FC7JFX΍ ίϯϙʔωϯτϒϥ΢β্Ͱಈ͔͢ w ωΠςΟϒͷػೳ͸+BWB4DSJQUܦ༝Ͱݺͼग़͢

  9. None
  10. None
  11. None
  12. building HTML hybrid app

  13. Frontend Chaos Package management • npm • bower • component

    Task runner • grunt • gulp altJS • CoffeeScript • TypeScript JavaScript Framework • jQuery • AngularJS • vue.js • backbone.js…. CSS Style • SASS • LESS CSS Framework • bootstrap • PURE • Foundation...
  14. None
  15. hybrid app ಛ༗ͷ՝୊ w 6*ͷϓϩτλΠϐϯά w σόΠε࣮ػ্ʢ༷ʑͳղ૾౓ʣͰͷ֬ೝ w ΞϓϦετΞʹఏग़ग़དྷΔωΠςΟϒΞϓϦͷੜ੒

  16. None
  17. ionic • AngularJS based UI Framework (CSS/JavaScript) • UI ύʔπ͸

    directive ͱͯ͠දݱ͞ΕΔ • Apache Cordova Λಉࠝͯ͠ iOS/Android ΞϓϦ΋࡞ΕΔ • ionic ίϚϯυΛ࢖ͬͨ਽ܗੜ੒ • ionic view ΞϓϦΛ࢖࣮ͬͨػ֬ೝ
  18. demo 1. UI Λͬ͟ͱ΢Σϒ্Ͱ࡞Δ 2. ϩʔΧϧʹνΣοΫΞ΢τ 3. ։ൃ & ςετ

    4. σόΠεʹμ΢ϯϩʔυͯ֬͠ೝ
  19. $ ionic platform add (ios|android) $ ionic build ios build

    native app
  20. None
  21. ionic • HTML hybrid app ͷτʔλϧͳ։ൃϑϩʔΛࢧԉ͢Δ • ϓϩδΣΫτͷ਽ܗΛ؆୯ʹੜ੒ • ionic

    creator Λ࢖ͬͯ΢Σϒ্Ͱͬ͟ͱUIΛ࡞Δ • ionic view ͰσόΠε্Ͱͷݟͨ໨Λ֬ೝ • ΞΠσΟΞΛମݧͰ͖Δܗ·Ͱૣ࣋ͬͯ͘ߦ͘ࣄ͕Ͱ͖Δ • ionic ͷ UI ΍ AngularJS ࣗମ͕޷͖͡Όͳ͍ͱਏ͍͔΋
  22. Thank you follow @bonar