{"id":7462,"date":"2020-11-11T09:01:41","date_gmt":"2020-11-11T09:01:41","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=7462"},"modified":"2020-11-11T09:23:29","modified_gmt":"2020-11-11T09:23:29","slug":"framework-ionic-tool-untuk-membuat-aplikasi-mobile","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile","title":{"rendered":"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile"},"content":{"rendered":"<p>Diartikel kali ini kita akan membahas mengenai Framework bernama Ionic,salah satu manfaat framework ini memiliki dan membangun aplikasi mudah dan cepat.Ionic merupakan salah satu kerangka kerja pengembangan perangkat lunak berbasis mobile.Aplikasi yang dihasilkan dengan framework ionic bersifat hybrid yang menggabungkan sistem native dan webview. Meski demikian,performa aplikasi ini tidak perlu diragukan lagi.Langsung saja kita bahas satu per satu,mulai dari pengertian,kelebihan dan yang lainnya.<\/p>\n<h2><strong>Pengertian Framework Ionic<\/strong><\/h2>\n<p>Merupakan sebuah framewok\u00a0aplikasi\u00a0mobile berbasis HTML5 yang digunakan untuk mengembangkan apikasi mobile dengan teknologi web seperti HTML,CSS dan Javascript.Dengan menggunakan Ionic,para developer web bisa membuat aplikasi lintas platform seperti untuk Android dan iOS.<\/p>\n<p>Aplikasi ionic ditulis menggunakan HTML,Javascript dan CSS.Ionic dianggap sebagai kerangka kerja UI yang menangani interaksi UI aplikasi dengan dukungan untuk komponen mobile asli dan desain yang indah.<\/p>\n<h2>Sejarah Framework Ionic<\/h2>\n<p>Tahun 2013 : Ionic mulai dibuat oleh <strong>Max Lynch, Ben Sperry, dan Adam Bradley.<\/strong>Ionic menggunakan AngluarJS.Jadi untuk bisa membuat aplikasi dengan Ionic,kalian harus bisa menggunakan angularjs.Lalu Angular versi 2 rilis dan pada versi ini js\u00a0 dihilangkan diganti menggunakan Typescript.Karena itu, disebut Angular bukan Angularjs.Ionic versi 2 dan 3 juga rilis mengikuti Angular.Seiring berjalannya waktu, framework javascript juga menjamur.Berbagai macam framework bermunculan.Begitu juga yang terjadi dalam pengembangan Ionic.Pada tanggal 23 Januari 2019 Ionic versi 4 dirilis dengan slogan Ionic for Everyone.<sup id=\"fnref:3\"><\/sup>Artinya,Ionic tidak hanya fokus menggunakan Angular saja.Ionic juga akan mendukung untuk menggunakan framework lain seperti Vuejs,React bahkan juga Web Components.<\/p>\n<h2><strong>Kelebihan Framework Ionic<\/strong><\/h2>\n<p>Berikut beberapa kelebihan Ionic dalam membangun aplikasi menggunakan framework ini :<\/p>\n<ul>\n<li>Bersifat open source.<\/li>\n<li>Menggunakan teknologi web terbaru.<\/li>\n<li>Aplikasi dibangun bisa dilihat melalui browser.<\/li>\n<li>Terbilang cepat dibandingkan framework lainnya.<\/li>\n<li>Aplkasi biasa ditransfer menjadi Android,iOS atau Windows Phone.<\/li>\n<\/ul>\n<h2 style=\"font-weight: 400;\"><strong>Kekurangan <\/strong><strong>Framework Ionic<\/strong><\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: inherit; font-style: inherit;\">\u00a0Y<\/span>akni itu berbayar untuk versi pro.Untuk versi pro tersebut programer tinggal drag and drop component kemudian dengan menggunakan sedikit koding sudah bisa jadi kedalam sebuah aplikasi yang di inginkan dan satu lagi aplikasi tersebut dapat disimpan online.<\/li>\n<li style=\"font-weight: 400;\">Yaitu ketika membangun program tergantung pada internet sehingga ketika tidak ada internet maka ioni tidak bisa dijalankan dengan semestinya.<\/li>\n<li style=\"font-weight: 400;\">Resourse yang besar ketika melakukan pembuatan aplikasi dimana satu program bisa sampai ratusan mb yang diperlukan untuk menampung dari resaurce tersebut.<\/li>\n<\/ul>\n<h2><strong>Tool Resmi Ionic<\/strong><\/h2>\n<ul>\n<li><strong>Ionic Lab<\/strong><\/li>\n<\/ul>\n<p>Merupakan solusi bagi kita yang ingin kenyamanan.Ionic Lab adalah Versi GUI dari Ionic CLI,kalian tinggal klik untuk melakukan operasi-operasi yang semula harus mengetikan perintah di Console.<\/p>\n<ul>\n<li><strong>Ionic CLI<\/strong><\/li>\n<\/ul>\n<p>Merupakan tool command line yang digunakan untuk membuat project dan juga menjalankan project.<\/p>\n<ul>\n<li><strong>Ionic Creator<\/strong><\/li>\n<\/ul>\n<p>Merupakan produk gratis yang akan memudahkan anda mendesain tampilan UI dari aplikasi.Ionic Creator sendiri adalah WebApp artinya harus mengaksesnya lewat Browser.Untuk Akun gratisnya kita hanya bisa mendesain satu aplikasi saja,Jika ingin lebih harus membeli paket Premium.<\/p>\n<ul>\n<li><strong>Ionic ViewApp<\/strong><\/li>\n<\/ul>\n<p>Merupakan aplikasi Android.Fungsi utamanya adalah mempreview program Ionic langsung dari Android.Aplikasi yang bisa di preview oleh ViewApp bisa aplikasi yang kita buat atau aplikasi orang lain yang dishare di Ionic Market.<\/p>\n<h2><strong>Persiapan Coding Untuk Ionic<\/strong><\/h2>\n<p>Adapun alat-alat yang dipersiapkan untuk belajar atau coding Ionic adalah <strong>Text Editor,Nodejs dan Ionic CLI.<\/strong>Lalu untuk membuat APK dan menjalankannya di emulator,kita juga membutuhkan Android Studio dan Android SDK.Tapi,mari kita fokus mengugnakan peralatan utama,yaitu: Nodejs dan Ionic CLI..<\/p>\n<h3><strong>Instalasi Nodejs<\/strong><\/h3>\n<p>Nodejs adalah peralatan pertama yang harus diinstal,gunakan perintah berikut untuk menginstal Nodejs di Linux (Ubuntu) :<\/p>\n<p><strong>sudo apt-get install -y nodejs<\/strong><\/p>\n<ul>\n<li>Setelah itu,periksa versi Nodejs dan NPM yang terinstal.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7469 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_14-1.png\" alt=\"\" width=\"629\" height=\"424\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_14-1.png 629w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_14-1-400x270.png 400w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/p>\n<ul>\n<li>Berikutnya,menginstal Ionic CLI.<\/li>\n<\/ul>\n<h2><strong>Instalasi Ionic CLI<\/strong><\/h2>\n<p>Ionic CLI merupakan prgram atau tool berabasis teks untuk membuat project Ionic,menjalankan server dan build aplikasi.Kita bisa menginstal Ionic CLI menggunakan npm dengan perintah :<\/p>\n<p><strong>sudo npm -g install iconic<\/strong><\/p>\n<ul>\n<li>Tunggu sampai prosesnya selesai.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7470 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_2-2.png\" alt=\"\" width=\"656\" height=\"431\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_2-2.png 656w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_2-2-640x420.png 640w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_2-2-400x263.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/p>\n<ul>\n<li>Setelah itu,periksa versi yang terinstal dengan perintah ionic.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7485 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_3-3.png\" alt=\"\" width=\"632\" height=\"428\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_3-3.png 632w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_3-3-400x271.png 400w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/p>\n<h2><strong>Membuat Project Baru<\/strong><\/h2>\n<p>Setelah kita menginstal semua peralatan yang dibutuhkan,sekarang coba membuat sebuah project Ionic.<\/p>\n<p>Ketik perintah berikut di terminal :<\/p>\n<p><strong>iconic start myApp tabs<\/strong><\/p>\n<ul>\n<li>Tunggu sampai proses selesai.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7472 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_4-2.png\" alt=\"\" width=\"653\" height=\"443\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_4-2.png 653w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_4-2-640x434.png 640w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_4-2-400x271.png 400w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/p>\n<p>Keterangan:<\/p>\n<ul>\n<li>start adalah perintah untuk memulai project;<\/li>\n<li>myApp adalah nama project atau aplikasi yang akan dibuat;<\/li>\n<li>tabs dalah jenis template yang akan digunakan.<\/li>\n<\/ul>\n<p>Ada jenis template untuk memulai project baru :<\/p>\n<ul>\n<li>Blank.<\/li>\n<li>Tabs.<\/li>\n<li>Side Menu.<\/li>\n<\/ul>\n<p>Perintah ionic start merupakan perintah untuk membuat project Ionic.Perintah ini membuat sebuah direktori baru berisi source code aplikasi.Sekarang buka project yang baru di buat pada teks editor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7473 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_5-1.png\" alt=\"\" width=\"626\" height=\"436\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_5-1.png 626w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_5-1-400x279.png 400w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/p>\n<ul>\n<li>Inilah struktur direktori project Ionic.Terdapat beberapa file dan Folder.Buat yang pertama melihat ini, mungkin ada beberapa file dan folder yang belum diketahui fungsinya.<\/li>\n<\/ul>\n<h2>Struktur Project Ionic<\/h2>\n<p>Terdiri 3 direktori utama : e2e,mode_modules dan src.Direktori paling penting adalah src karena direktori ini berisi source code aplikasi.<\/p>\n<p>fungsi setiap folder dan file:<\/p>\n<ul>\n<li>\ud83d\udcc1 e2e berisi source untuk Melakukan End 2 End Testing.<\/li>\n<li>\ud83d\udcc1node_modules berisi modul Nodejs.<\/li>\n<li>\ud83d\udcc1 src berisi source code aplikasi,disini kita menulis code.\n<ul>\n<li>\ud83d\udcc1 \u00a0app beisi modul aplikasi.<\/li>\n<li>\ud83d\udcc1\u00a0assets\u00a0berisi file statis seperti gambar;<\/li>\n<li>\ud83d\udcc1\u00a0environtment\u00a0berisi file untuk mengatur environtment;<\/li>\n<li>\ud83d\udcc1\u00a0theme\u00a0berisi file SASS untuk definisi tema aplikasi;<\/li>\n<li>\ud83d\udcc4\u00a0global.scss\u00a0file sass global;<\/li>\n<li>\ud83d\udcc4\u00a0index.html\u00a0file HTML untuk aplikasi;<\/li>\n<li>\ud83d\udcc4\u00a0karma.config.js\u00a0file konfigurasi untuk karma;<\/li>\n<li>\ud83d\udcc4\u00a0main.ts\u00a0file utama aplikasi;<\/li>\n<li>\ud83d\udcc4\u00a0polyfills.ts\u00a0file polyfills yang dibutuhkan oleh angular;<\/li>\n<li>\ud83d\udcc4\u00a0test.ts\u00a0file ini dibutuhkan oleh\u00a0karma.config.js;<\/li>\n<li>\ud83d\udcc4\u00a0testconfig.app.json\u00a0file ini akan di-load oleh\u00a0test.ts;<\/li>\n<li>\ud83d\udcc4\u00a0testconfig.spec.json\u00a0file ini akan di-load oleh\u00a0test.ts;<\/li>\n<\/ul>\n<\/li>\n<li>\ud83d\udcc4\u00a0.gitignore file git yang berisi daftar file dan folder yang diabaikan;<\/li>\n<li>\ud83d\udcc4\u00a0angular.json\u00a0file JSON yang berisi konfigurasi untuk Angular;<\/li>\n<li>\ud83d\udcc4\u00a0ionic.config.json\u00a0file JSON yang berisi konfigurasi untuk Ionic;<\/li>\n<li>\ud83d\udcc4\u00a0package-lock.json\u00a0file JSON yang berisi daftar versi modul nodejs;<\/li>\n<li>\ud83d\udcc4\u00a0package.json\u00a0file JSON yang berisi info project dan daftar modul nodejs yang dibutuhkan;<\/li>\n<li>\ud83d\udcc4\u00a0testconfig.json\u00a0file JSON yang berisi konfigurasi untuk testing;<\/li>\n<li>\ud83d\udcc4\u00a0tslint.json\u00a0file JSON yang berisi konfigurasi untuk linting.<\/li>\n<\/ul>\n<h2><strong>Menjalankan Development Server<\/strong><\/h2>\n<p>Ini merupakan sebuah fitur Ionic CLI yang fungsinya untuk membuat web server sehingga aplikasi dapat dibuka melalui web browser.Tujuannya memudahkan pengembangan aplikasi.<\/p>\n<p>Ini yang diakukan saat membuat aplikasi android dengan Java (Android Studio) :<\/p>\n<ul>\n<li>Buat Project.<\/li>\n<li>Coding.<\/li>\n<li>Build dan Run.<\/li>\n<li>Buka Emulator.<\/li>\n<li>Ada Error,ulangi langkah 2.<\/li>\n<li>App Selesai,Publish.<\/li>\n<\/ul>\n<p>Ini yang dilakukan saat membuat aplikasi android engan Ionic:<\/p>\n<ul>\n<li>Buar project.<\/li>\n<li>Coding.<\/li>\n<li>Jalankan Server.<\/li>\n<li>Ada error,balik ke langkah 2.<\/li>\n<li>App Selesai,Publish.<\/li>\n<\/ul>\n<p>Untuk menjalankan Development Server,masuk dulu ke direktori projectnya dengan perintah\u00a0cd.<\/p>\n<p><strong>cd myApp<\/strong><\/p>\n<p>Kemudian jalankan perintah :<\/p>\n<p><strong>ionic serve<\/strong><\/p>\n<p>untuk menjalankan\u00a0Development Server.Maka web browser akan terbuka.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7479 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_6-1.png\" alt=\"\" width=\"641\" height=\"354\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_6-1.png 641w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_6-1-400x221.png 400w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/p>\n<p>Ini adalah tampilan aplikasi dengan template tabs. Kita bisa memanfaatkan inspect element untuk melihat tampilan versi mobile.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7480 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_7-1.png\" alt=\"\" width=\"637\" height=\"464\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_7-1.png 637w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_7-1-400x291.png 400w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/p>\n<p>Sampai sini selesai,kalian sudah mengenal Ionic dan sudah berhasil membuat aplikasi pertama serta menjalankannya di Dev Server.<\/p>\n<p>sekian artikel kali ini semoga bisa bermanfaat untuk kalian semua \ud83d\ude42<\/p>\n<h2>Baca Juga Artikel Ini :<\/h2>\n<p class=\"entry-title\"><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/hosteko.com\/blog\/inilah-4-teknik-seo-untuk-meningkatkan-traffic-website\">Inilah 4 Teknik SEO untuk Meningkatkan Traffic Website<\/a><\/span><\/p>\n<p class=\"entry-title\"><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-dan-cara-kerja-voip\">Pengertian, Fungsi dan Cara Kerja VoIP<\/a><\/span><\/p>\n<p class=\"entry-title\"><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/hosteko.com\/blog\/progressive-web-app-untuk-website-lebih-lancar\">Progressive Web App untuk Website Lebih Lancar<\/a><\/span><\/p>\n<p class=\"entry-title\"><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/hosteko.com\/blog\/beberapa-contoh-newsletter-untuk-email-marketing\">Beberapa Contoh Newsletter Untuk Email Marketing<\/a><\/span><\/p>\n<p class=\"entry-title\"><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/hosteko.com\/blog\/mengecek-website-down-atau-tidak-dengan-menggunakan-tool-online\">Mengecek Website Down atau Tidak Dengan Menggunakan Tool Online<\/a><\/span><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;7462&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;3&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;1.7&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;1.7\\\/5 - (3 votes)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Framework Ionic :Tool Untuk Membuat Aplikasi Mobile&quot;,&quot;width&quot;:&quot;37.4&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&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: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 37.4px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            1.7\/5 - (3 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Diartikel kali ini kita akan membahas mengenai Framework bernama Ionic,salah satu manfaat framework ini memiliki dan membangun aplikasi mudah dan cepat.Ionic merupakan salah satu kerangka kerja pengembangan perangkat lunak berbasis mobile.Aplikasi yang dihasilkan dengan framework ionic bersifat hybrid yang menggabungkan sistem native dan webview. Meski demikian,performa aplikasi ini tidak perlu diragukan lagi.Langsung saja kita bahas [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":7476,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3,153],"tags":[2241,2240,2238,2243,2239,2244,2242],"class_list":["post-7462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pengetahuan-umum","tag-kekurangan-framework-ionic","tag-kelebihan-framework-ionic","tag-pengertian-framework-ionic","tag-persiapan-untuk-coding-ionic","tag-sejarah-ionic","tag-struktur-project-ionic","tag-tool-resmi-ionic"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g-1140x445.jpeg",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g-463x348.jpeg",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g-300x169.jpeg",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg",1280,720,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Framework Ionic :Tool Untuk Membuat Aplikasi Mobile - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Diartikel kali ini kita akan membahas mengenai Framework bernama Ionic,salah satu manfaat framework ini memiliki dan membangun aplikasi mudah dan cepat.Ionic merupakan salah satu kerangka kerja pengembangan perangkat lunak berbasis mobile.Aplikasi yang dihasilkan dengan framework ionic bersifat hybrid yang menggabungkan sistem native dan webview. Meski demikian,performa aplikasi ini tidak perlu diragukan lagi.Langsung saja kita bahas [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-11T09:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-11T09:23:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"feni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"feni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile\"},\"author\":{\"name\":\"feni\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61\"},\"headline\":\"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile\",\"datePublished\":\"2020-11-11T09:01:41+00:00\",\"dateModified\":\"2020-11-11T09:23:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile\"},\"wordCount\":1141,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg\",\"keywords\":[\"Kekurangan Framework Ionic\",\"Kelebihan Framework Ionic\",\"Pengertian Framework Ionic\",\"Persiapan Untuk Coding Ionic\",\"Sejarah Ionic\",\"Struktur\u00a0 Project Ionic\",\"Tool Resmi Ionic\"],\"articleSection\":[\"Blog\",\"pengetahuan umum\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile\",\"url\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile\",\"name\":\"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg\",\"datePublished\":\"2020-11-11T09:01:41+00:00\",\"dateModified\":\"2020-11-11T09:23:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61\",\"name\":\"feni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g\",\"caption\":\"feni\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile","og_locale":"en_US","og_type":"article","og_title":"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile - Hosteko Blog","og_description":"Diartikel kali ini kita akan membahas mengenai Framework bernama Ionic,salah satu manfaat framework ini memiliki dan membangun aplikasi mudah dan cepat.Ionic merupakan salah satu kerangka kerja pengembangan perangkat lunak berbasis mobile.Aplikasi yang dihasilkan dengan framework ionic bersifat hybrid yang menggabungkan sistem native dan webview. Meski demikian,performa aplikasi ini tidak perlu diragukan lagi.Langsung saja kita bahas [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile","og_site_name":"Hosteko Blog","article_published_time":"2020-11-11T09:01:41+00:00","article_modified_time":"2020-11-11T09:23:29+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg","type":"image\/jpeg"}],"author":"feni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"feni","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile"},"author":{"name":"feni","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61"},"headline":"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile","datePublished":"2020-11-11T09:01:41+00:00","dateModified":"2020-11-11T09:23:29+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile"},"wordCount":1141,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg","keywords":["Kekurangan Framework Ionic","Kelebihan Framework Ionic","Pengertian Framework Ionic","Persiapan Untuk Coding Ionic","Sejarah Ionic","Struktur\u00a0 Project Ionic","Tool Resmi Ionic"],"articleSection":["Blog","pengetahuan umum"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile","url":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile","name":"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg","datePublished":"2020-11-11T09:01:41+00:00","dateModified":"2020-11-11T09:23:29+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/framework-ionic-tool-untuk-membuat-aplikasi-mobile#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Framework Ionic :Tool Untuk Membuat Aplikasi Mobile"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61","name":"feni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g","caption":"feni"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/1_nlhD6_U277a1s_VxSbH11g.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/7462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=7462"}],"version-history":[{"count":0,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/7462\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/7476"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=7462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=7462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=7462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}