{"id":7956,"date":"2019-09-19T17:12:14","date_gmt":"2019-09-19T15:12:14","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=7956"},"modified":"2023-10-06T11:09:21","modified_gmt":"2023-10-06T09:09:21","slug":"ionic-3-platformy-1-projekt","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/ionic-3-platformy-1-projekt\/","title":{"rendered":"Ionic \u2013 3 platformy, 1 projekt"},"content":{"rendered":"\n<p>Ionic jest frameworkiem open-source\u2019owym z ogromnym wsparciem swojej spo\u0142eczno\u015bci, wed\u0142ug oficjalnej strony frameworku \u2013 licz\u0105cej ponad 5 milion\u00f3w developer\u00f3w. <\/p>\n\n\n\n<p>Ionic pomaga programistom tworzy\u0107 oraz deployowa\u0107 aplikacje hybrydowe, multi-platformowe oraz tak zwane aplikacje PWA (Progressive Web Application). Posiada on nawet swoje w\u0142asne dedykowane IDE \u2013 Ionic Studio oraz umo\u017cliwia integracj\u0119 z wieloma popularnymi i niezwykle u\u017cytecznymi narz\u0119dziami takimi jak Firebase.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tworzenie w Ionicu nie musi by\u0107 niczym nowym<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-medium\"><img decoding=\"async\" width=\"300\" height=\"180\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/angular-vue-react-300x180.jpg\" alt=\"Logo React, Angular, Vue.js\" class=\"wp-image-7957\"\/><\/figure>\n\n\n\n<p>Pocz\u0105tkowo framework opiera\u0142 si\u0119 na Angularze JS oraz Apache Cordova. Aktualnie jednak sk\u0142ada si\u0119 z wielu komponent\u00f3w webowych i pozwala programi\u015bcie wybra\u0107 javascriptowy framework z po\u015br\u00f3d Angulara, Reacta oraz Vue.js jako interfejs. Je\u015bli wi\u0119c developer mia\u0142 styczno\u015b\u0107, z kt\u00f3rym\u015b z wymienionych framework\u00f3w, tworzenie aplikacji w Ionicu nie b\u0119dzie do ko\u0144ca czym\u015b zupe\u0142nie nowym.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pluginy<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"840\" height=\"289\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/firebase-e1566488596857.png\" alt=\"firebase logo\" class=\"wp-image-7958\"\/><\/figure>\n\n\n\n<p>Od wtyczek tworzonych przez spo\u0142eczno\u015b\u0107 po p\u0142atne pluginy premium, Ionic umo\u017cliwia integracj\u0119 z ogromn\u0105 liczb\u0105 rozszerze\u0144, narz\u0119dzi i serwis\u00f3w. Przede wszystkim wartym wyr\u00f3\u017cnienia jest <strong>Firebase<\/strong>.&nbsp;Dzi\u0119ki integracji z t\u0105 platform\u0105, mo\u017cna uzyska\u0107 w bardzo \u0142atwy spos\u00f3b dost\u0119p do cloudowych baz danych noSQL, serwisu autentykacji znacznie upraszczaj\u0105cego logowanie u\u017cytkownik\u00f3w w aplikacji (nawet przez serwisy takie jak Facebook czy Google) lub serwisu Firebase Storage, umo\u017cliwiaj\u0105cego przechowywanie i zarz\u0105dzanie plikami. Firebase opr\u00f3cz tego umo\u017cliwia hostowanie aplikacji webowej, dzi\u0119ki czemu poprzez prost\u0105 komend\u0119 w terminalu, developer jest w stanie udost\u0119pni\u0107 swoj\u0105 aplikacj\u0119 Ionicow\u0105 jako stron\u0119 internetow\u0105 w sieci pod darmow\u0105 lub w\u0142asn\u0105 p\u0142atn\u0105 domen\u0105.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dost\u0119p do natywnych funkcji urz\u0105dzenia<\/h2>\n\n\n\n<p>Opr\u00f3cz wymienionych w poprzednim punkcje integracji, na stronie g\u0142\u00f3wnej frameworku mo\u017cna znale\u017a\u0107 ca\u0142y dzia\u0142 po\u015bwi\u0119cony wylistowanym pluginom daj\u0105cym dost\u0119p do natywnych mechanizm\u00f3w urz\u0105dze\u0144 mobilnych. Przyk\u0142adowe pluginy: Geolocation, Toast, Native Storage, Browser Tab, Camera. Warto zwr\u00f3ci\u0107 w tym miejscu uwag\u0119 na to, \u017ce pluginy Ionicowe cz\u0119sto implementuj\u0105 pod spodem pluginy Cordovy i w znaczny spos\u00f3b upraszczaj\u0105 ich u\u017cytkowanie. Nie przeszkadza to oczywi\u015bcie w tym, \u017ceby bezpo\u015brednio w projekcie implementowa\u0107 \u201enatywne\u201d wtyczki Cordovy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Komponenty UI<\/h2>\n\n\n\n<p>Ionic udost\u0119pnia r\u00f3wnie\u017c spor\u0105 palet\u0119 w\u0142asnych element\u00f3w UI, kt\u00f3rych u\u017cycie cz\u0119sto ogranicza si\u0119 do umieszczenia w odpowiednim miejscu w kodzie widoku, znacznika podobnego do standardowych znacznik\u00f3w HTML. Przyk\u0142adowo znacznik dla ostylowanego, czerwonego przycisku (np. s\u0142u\u017c\u0105cego do odrzucania zmian) b\u0119dzie wygl\u0105da\u0142 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;ion-button color=&quot;danger&quot;&gt;Discard Changes&amp;lt;\/ion-button&gt;\n<\/pre><\/div>\n\n\n<p>W \u0142atwy spos\u00f3b mo\u017cna zmienia\u0107 jego wygl\u0105d dzi\u0119ki parametrom Expand, Fill oraz Size i, co najwa\u017cniejsze, ca\u0142y czas zachowuj\u0105c przy tym sp\u00f3jny wygl\u0105d i styl ca\u0142ej aplikacji.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/Ionic-ui-component.png\"><img decoding=\"async\" width=\"357\" height=\"718\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/Ionic-ui-component.png\" alt=\"Mockup telefonu z r\u00f3\u017cnymi rozmiarami przycisk\u00f3w\" class=\"wp-image-7959\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/Ionic-ui-component.png 357w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/Ionic-ui-component-149x300.png 149w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><\/a><\/figure>\n\n\n\n<p>Wszystkie dost\u0119pne komponenty wraz z przyk\u0142adami u\u017cytkowania w wybranym frameworku (Angular, React, Vue lub po prostu Vanilla JS) oraz cz\u0119sto wizualizacj\u0105 na wybranym systemie (iOS lub Android) jak ta na za\u0142\u0105czonym wy\u017cej obrazku, dost\u0119pne s\u0105 w dokumentacji na oficjalnej stronie: <a href=\"https:\/\/ionicframework.com\/docs\/components\" rel=\"nofollow\" >https:\/\/ionicframework.com\/docs\/components<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Deployment<\/h2>\n\n\n\n<p>Zgodnie z tytu\u0142em tego artyku\u0142u po utworzeniu dowolnego projektu w Ionicu, bez wi\u0119kszych przeszk\u00f3d jeste\u015bmy w stanie wypu\u015bci\u0107 jego dystrybucj\u0119 na sytemy iOS, Android oraz po prostu do sieci z dost\u0119pem z poziomu przegl\u0105darki. Ka\u017cdy z tych proces\u00f3w jest dok\u0142adnie opisany w oficjalnej dokumentacji i nie jest przesadnie skomplikowany:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Android &#8211; <a href=\"https:\/\/ionicframework.com\/docs\/publishing\/play-store\" rel=\"nofollow\" >https:\/\/ionicframework.com\/docs\/publishing\/play-store<\/a><\/li>\n\n\n\n<li>iOS &#8211; <a href=\"https:\/\/ionicframework.com\/docs\/publishing\/app-store\" rel=\"nofollow\" >https:\/\/ionicframework.com\/docs\/publishing\/app-store<\/a><\/li>\n\n\n\n<li>PWA (przegl\u0105darka) &#8211; <a href=\"https:\/\/ionicframework.com\/docs\/publishing\/progressive-web-app\" rel=\"nofollow\" >https:\/\/ionicframework.com\/docs\/publishing\/progressive-web-app<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Podsumowanie<\/h2>\n\n\n\n<p>Ionic jest naprawd\u0119 \u015bwietnym frameworkiem, dzi\u0119ki kt\u00f3remu mo\u017cna ekspresowo tworzy\u0107, niczym nie ust\u0119puj\u0105ce natywnym, aplikacje hybrydowe. W po\u0142\u0105czeniu z Firebase\u2019m developer zyskuje ogrom mo\u017cliwo\u015bci w formie niezwykle \u0142atwej do przyswojenia i u\u017cytkowania.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;7956&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;4&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;4.7&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;4.7\\\/5 ( votes: 4)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Ionic \u2013 3 platformy, 1 projekt&quot;,&quot;width&quot;:&quot;130.8&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 130.8px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            4.7\/5 ( votes: 4)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ionic jest frameworkiem open-source\u2019owym z ogromnym wsparciem swojej spo\u0142eczno\u015bci, wed\u0142ug oficjalnej strony frameworku \u2013 licz\u0105cej ponad 5 milion\u00f3w developer\u00f3w. Ionic &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/ionic-3-platformy-1-projekt\/\">Continued<\/a><\/p>\n","protected":false},"author":189,"featured_media":8163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1316],"tags":[548,828],"class_list":["post-7956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-miekko","tag-sap","tag-ionic"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/ionic-1.jpg","category_names":["Development na mi\u0119kko"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/7956"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=7956"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/7956\/revisions"}],"predecessor-version":[{"id":24888,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/7956\/revisions\/24888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/8163"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=7956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=7956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=7956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}