{"id":5526,"date":"2020-08-26T09:34:29","date_gmt":"2020-08-26T09:34:29","guid":{"rendered":"https:\/\/berg-software.com\/?p=5526"},"modified":"2022-07-27T07:24:08","modified_gmt":"2022-07-27T07:24:08","slug":"ionic-framework-for-hybrid-multiplatform-applications","status":"publish","type":"post","link":"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/","title":{"rendered":"Overview: Ionic framework for hybrid, multi-platform applications"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.4.1&#8243;][et_pb_fullwidth_post_title meta=&#8221;off&#8221; featured_placement=&#8221;background&#8221; _builder_version=&#8221;4.7.7&#8243; title_font=&#8221;||||||||&#8221; title_text_color=&#8221;#ff6317&#8243; title_font_size=&#8221;3.5em&#8221; meta_font=&#8221;|300|||||||&#8221; meta_text_color=&#8221;#ffffff&#8221; meta_font_size=&#8221;1em&#8221; background_enable_color=&#8221;off&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;rgba(248,248,248,0.85)&#8221; background_color_gradient_end=&#8221;rgba(248,248,248,0.75)&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; min_height=&#8221;20vh&#8221; height=&#8221;400px&#8221; custom_padding=&#8221;6vh||6vh||false|false&#8221; global_module=&#8221;403&#8243; locked=&#8221;off&#8221;][\/et_pb_fullwidth_post_title][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.1&#8243; custom_padding=&#8221;|||0px||&#8221; locked=&#8221;off&#8221;][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;intro&#8221; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.7.7&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;30px&#8221; header_3_font_size=&#8221;23px&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;16px&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; hover_enabled=&#8221;0&#8243; border_color_left=&#8221;#ff6317&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>Have you ever wondered how do some companies manage to keep consistency across multiple applications on multiple platforms (web and mobile)? How do they achieve that?<\/p>\n<p>If they use the Ionic framework, everything is much simpler than you imagined because one can:<\/p>\n<ul>\n<li>develop mobile applications with web functionalities,<\/li>\n<li>deliver consistent user experience across multiple platforms,<\/li>\n<li>use a single technology for both web and mobile apps,<\/li>\n<li>avoid duplicate coding\/implementation,<\/li>\n<li>reduce delivery time,<\/li>\n<li>reduce development costs.<\/li>\n<\/ul>\n<p>At <a href=\"https:\/\/www.berg-software.com\/\">Berg Software<\/a>, we think this is a great option for complex companies or products, regardless of the industry. Although B2C usage might benefit the most, we have seen B2B usage cases successfully deploy it, too.<\/p>\n<p>Ionic uses web technologies (HTML, CSS, and JavaScript) with integrations for popular technologies such as Angular and React. Since we build with Angular, it is great to have one single codebase that\u2019s fully supported by Ionic for great results on mobile and web, mobile and desktop.<\/p>\n<p>To walk our talk, let\u2019s have a look at the <a href=\"https:\/\/www.arobs.com\">app development<\/a> process using Ionic (i.e. rather than look at any specific app development).<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.1&#8243; custom_padding=&#8221;|||0px||&#8221; locked=&#8221;off&#8221;][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 0&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h2>How does the Ionic framework work?<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 0&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 0: Required tools<\/h3>\n<p>In order to proceed, you probably (already) have the toolbox ready:<\/p>\n<ul>\n<li>Node.js and its package manager (npm), for interacting with the Ionic ecosystem.<\/li>\n<li>A code editor with support for Javascript \/ TypeScript (e.g. Visual Studio Code)<\/li>\n<li>A command line interface\/terminal (e.g. Visual Studio Code for the command line terminal).<\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 1&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 1: Install the Ionic tooling<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. In order to install the Ionic CLI, just run the following in the command line terminal:[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">npm install -g @ionic\/cli<\/pre>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 2&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 2: Creating Ionic app<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>2.1. Enter the command:<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">ionic start &lt;name&gt;<\/pre>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]This command creates a working Ionic app. It installs dependencies for you and sets up your project. The first argument is your app\u2019s name.[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>2.2. Pick a framework<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]As can be seen in the figure below, after entering the \u201cionic start\u201d command in a terminal, the desired framework Angular or React must be selected. In our case, we selected Angular. @ionic\/angular combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.[\/et_pb_text][et_pb_image src=&#8221;\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-ionic-framework-pick-a-framework-1200px.jpg&#8221; alt=&#8221;Berg Software &#8211; ionic framework &#8211; pick a framework 1200px&#8221; title_text=&#8221;Berg Software &#8211; ionic framework &#8211; pick a framework 1200px&#8221; _builder_version=&#8221;4.4.6&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>2.2. Pick a template<\/h4>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/berg-software.com\/wp-content\/uploads\/Berg-Software-ionic-framework-pick-a-template-1200px.jpg&#8221; alt=&#8221;Berg Software &#8211; ionic framework &#8211; pick a template 1200px&#8221; title_text=&#8221;Berg Software &#8211; ionic framework &#8211; pick a template 1200px&#8221; _builder_version=&#8221;4.4.6&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 3&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 3: (Default) Ionic components &amp; start the development<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]The Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic is stocked with a number of components, including cards, lists, and tabs.<\/p>\n<p>Below, you can see an example of HTML code that uses a part of Ionic Components:[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">&lt;ion-header [translucent]=\"true\"&gt;\n  &lt;ion-toolbar&gt;\n    &lt;ion-title&gt;\n      Tab 1\n    &lt;\/ion-title&gt;\n  &lt;\/ion-toolbar&gt;\n&lt;\/ion-header&gt;\n\u00a0\n&lt;ion-content [fullscreen]=\"true\"&gt;\n  &lt;ion-list&gt;\n    &lt;ion-item&gt;\n      &lt;ion-label&gt;Input&lt;\/ion-label&gt;\n      &lt;ion-input&gt;&lt;\/ion-input&gt;\n    &lt;\/ion-item&gt;\n    &lt;ion-item&gt;\n      &lt;ion-label&gt;Toggle&lt;\/ion-label&gt;\n      &lt;ion-toggle slot=\"end\"&gt;&lt;\/ion-toggle&gt;\n    &lt;\/ion-item&gt;\n    &lt;ion-item&gt;\n      &lt;ion-label&gt;Radio&lt;\/ion-label&gt;\n      &lt;ion-radio slot=\"end\"&gt;&lt;\/ion-radio&gt;\n    &lt;\/ion-item&gt;\n    &lt;ion-item&gt;\n      &lt;ion-label&gt;Checkbox&lt;\/ion-label&gt;\n      &lt;ion-checkbox slot=\"start\"&gt;&lt;\/ion-checkbox&gt;\n    &lt;\/ion-item&gt;\n  &lt;\/ion-list&gt;\n&lt;\/ion-content&gt;<\/pre>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Here\u2019s the web page that we built from the HTML code above:[\/et_pb_text][et_pb_image src=&#8221;\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-ionic-framework-resulting-webpage-1200px.jpg&#8221; alt=&#8221;Berg Software &#8211; ionic framework &#8211; resulting webpage 1200px&#8221; title_text=&#8221;Berg Software &#8211; ionic framework &#8211; resulting webpage 1200px&#8221; _builder_version=&#8221;4.4.6&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Ionic components are written in HTML, CSS and JavaScript which makes the user interface as beautiful and functional as possible for many platforms and device types.[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<strong>&lt;ion-header&gt;<\/strong> represents the top navigation and toolbar, with &#8220;Tab 1&#8221; as the title.<br \/>\n<strong>&lt;ion-content&gt;<\/strong> contains the visual aspects of application.<br \/>\n<strong>&lt;ion-list&gt;<\/strong> is used to display rows of information such as contact list, playlist, or menu.<br \/>\n<strong>&lt;ion-item&gt;<\/strong> is an element that can contain text, icons, avatars, images, inputs, and any other native or custom elements.<br \/>\n<strong>&lt;ion-input&gt;<\/strong> is meant for text types inputs, such as \u201cpassword\u201d, \u201cemail\u201d.<br \/>\n<strong>&lt;ion-label&gt;<\/strong> is a wrapper element, that can be used in combination with &lt;ion-item&gt;, &lt;ion-input&gt;, etc.<br \/>\n<strong>&lt;ion-toggle&gt;<\/strong> is a button that can be switched on or off by pressing or swiping it.<br \/>\n<strong>&lt;ion-checkbox&gt;<\/strong> can be used to let the user know that it\u2019s necessary to make a binary decision.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 4&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 4: Running your app developed with Ionic<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Easily spin-up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build. By default, ionic serve boots up a development server on localhost.[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">ionic serve [options]<\/pre>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 5&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 5: Deploying to iOS and Android<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Mobile applications can be developed and then distributed through native application stores, to be installed on devices using Cordova or Capacitor.[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>Install Cordova:<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">npm install -g cordova<\/pre>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>Quick reminders: What is Cordova? and Why use it?<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]\u201c<em>Cordova wraps your HTML\/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.<\/em>\u201d (<a href=\"https:\/\/cordova.apache.org\" target=\"_blank\" rel=\"noopener noreferrer\">Apache Cordova website<\/a>)<\/p>\n<p>Use Apache Cordova if you want to:<\/p>\n<ul>\n<li>extend a mobile application to multiple platforms without double-implementing its functionalities;<\/li>\n<li>implement a web application that is packaged for distribution in various application portals;<\/li>\n<li>mix native application components with a WebView (i.e. a hybrid application).<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>Native plugins<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Cordova also offers JavaScript APIs. This way, the app can access a variety of device features, such as the contacts database, or the device&#8217;s camera, or location.<\/p>\n<p>For one of our projects that needed access to the current location of the device, we used the Geolocation plugin. Accessing the location (or other features) of the device depends on its platform. The Platform service can be used to get information about your current device. When the device platform is set, call a function to access the location.[\/et_pb_text][et_pb_image src=&#8221;\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-ionic-framework-geolocation-A-1000px.jpg&#8221; alt=&#8221;Berg Software &#8211; ionic framework &#8211; geolocation A 1000px&#8221; title_text=&#8221;Berg Software &#8211; ionic framework &#8211; geolocation A 1000px&#8221; _builder_version=&#8221;4.4.6&#8243; custom_padding=&#8221;||1vh||false|false&#8221;][\/et_pb_image][et_pb_image src=&#8221;\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-ionic-framework-geolocation-B-1000px.jpg&#8221; alt=&#8221;Berg Software &#8211; ionic framework &#8211; geolocation B 1000px&#8221; title_text=&#8221;Berg Software &#8211; ionic framework &#8211; geolocation B 1000px&#8221; _builder_version=&#8221;4.4.6&#8243; custom_padding=&#8221;||1vh||false|false&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]In the picture below, you can see the content of getLocation() method, in which we accessed the location of the device. The longitude and latitude can be accessed through the \u201ccoords\u201d property of position.[\/et_pb_text][et_pb_image src=&#8221;\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-ionic-framework-geolocation-C-1200px.jpg&#8221; alt=&#8221;Berg Software &#8211; ionic framework &#8211; geolocation C 1200px&#8221; title_text=&#8221;Berg Software &#8211; ionic framework &#8211; geolocation C 1200px&#8221; _builder_version=&#8221;4.4.6&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 6&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 6: Building and running the Ionic app on mobile devices<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>Building Ionic Project<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Cordova can build and deploy native projects programmatically.<\/p>\n<p>To boot up a live-reload server, build, and deploy the app, run the following:[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">ionic cordova build &lt;platform&gt; [options]<\/pre>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Examples:[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">ionic cordova build android\nionic cordova build ios<\/pre>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>Running Ionic Project<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<strong>cordova build<\/strong> is used to compile and prepare your app. Finally, the native-run utility is used to run your app on a device.[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<pre class=\"text\" style=\"font-family: monospace;\">ionic cordova run [&lt;platform&gt;] [options]<\/pre>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;step 7&#8243; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h3>Step 7: Debugging<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>Android app<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Once an app is running on an Android device or emulator, it can be debugged with Chrome DevTools.<\/p>\n<p>Chrome has web developer tool support for Android simulators and devices. Go to chrome:\/\/inspect in Chrome while the simulator is running, or a device is connected to the computer and Inspect the app that needs to be debugged.[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;2vh||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h4>iOS app<\/h4>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Once an app is running on an iOS device or simulator, it can be debugged in Safari.<\/p>\n<p>Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.<\/p>\n<p>If the Develop menu is hidden, enable it in Safari \u00bb Preferences \u00bb Advanced \u00bb Show Develop menu in menu bar.<\/p>\n<p>If the app isn&#8217;t listed, the Web Inspector may need to be enabled on the device in Settings \u00bb Safari \u00bb Advanced \u00bb Web Inspector.[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.1&#8243; custom_padding=&#8221;|||0px||&#8221; locked=&#8221;off&#8221;][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;disadvantages&#8221; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.7.7&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; hover_enabled=&#8221;0&#8243; border_color_left=&#8221;#ff6317&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h2>The disadvantages of an Ionic framework<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]The browser does not always provide the correct information about the phone&#8217;s environment, which complicates the testing. There are as many different devices as there are platforms, and for the most accurate testing, as many of them as possible need to be covered.<\/p>\n<p>Also, native functionalities are difficult to combine. There can be plugin compatibility issues, i.e. errors that can be difficult to troubleshoot and resolve.<\/p>\n<p>Finally, hybrid applications tend to be slower than native ones. However, as mobile technologies improve, this is not a persistent issue.[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.1&#8243; custom_padding=&#8221;|||0px||&#8221; locked=&#8221;off&#8221;][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;_ (1)&#8221; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_font=&#8221;|300|||||||&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h2>__<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Ionic is not a hammer to knock all nails. However, all things considered, we see many usage cases where the benefits will overwhelm the drawbacks. Its speed and convenience will make it a natural choice for the applications that need to cover multiple platforms, with short deployment times and relatively fewer resources. At Berg Software, we highly recommend it.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;_ (2)&#8221; _builder_version=&#8221;4.4.6&#8243; custom_margin=&#8221;6vh||6vh||false|false&#8221; custom_padding=&#8221;|20%||2.5vw|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#ff6317&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_font=&#8221;|300|||||||&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]<\/p>\n<h2>__<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.4.6&#8243; text_font=&#8221;|300|||||||&#8221; text_font_size=&#8221;1.1em&#8221; text_line_height=&#8221;1.4em&#8221; quote_font=&#8221;|700|||||||&#8221; quote_text_align=&#8221;left&#8221; quote_font_size=&#8221;16px&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;2em&#8221; header_3_font_size=&#8221;1.5em&#8221; header_4_font=&#8221;||||||||&#8221; header_4_font_size=&#8221;1.2em&#8221; header_4_line_height=&#8221;1.5em&#8221; header_5_font_size=&#8221;14px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; border_color_left=&#8221;#ff6317&#8243;]Do *you* use Ionic? How &amp; for each usage cases? <a href=\"mailto:contact@bergsoftprod.wpengine.com\">Let us know<\/a>![\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;3.22&#8243; background_color=&#8221;#eeeeee&#8221; custom_padding=&#8221;50px||50px||false|false&#8221; border_color_top=&#8221;#ff6317&#8243; global_module=&#8221;1642&#8243;][et_pb_row column_structure=&#8221;1_3,1_3,1_3&#8243; _builder_version=&#8221;4.4.1&#8243; custom_padding=&#8221;0px|||||&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_social_media_follow _builder_version=&#8221;4.4.4&#8243; text_orientation=&#8221;left&#8221;][et_pb_social_media_follow_network social_network=&#8221;linkedin&#8221; url=&#8221;https:\/\/www.linkedin.com\/company\/berg-computers-srl\/&#8221; _builder_version=&#8221;4.4.4&#8243; background_color=&#8221;#007bb6&#8243; follow_button=&#8221;off&#8221; url_new_window=&#8221;on&#8221;]linkedin[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=&#8221;twitter&#8221; url=&#8221;https:\/\/twitter.com\/berg_software&#8221; _builder_version=&#8221;4.4.4&#8243; background_color=&#8221;#00aced&#8221; follow_button=&#8221;off&#8221; url_new_window=&#8221;on&#8221;]twitter[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=&#8221;facebook&#8221; url=&#8221;https:\/\/www.facebook.com\/bergCOMPUTERS&#8221; _builder_version=&#8221;4.4.4&#8243; background_color=&#8221;#3b5998&#8243; follow_button=&#8221;off&#8221; url_new_window=&#8221;on&#8221;]facebook[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=&#8221;instagram&#8221; url=&#8221;https:\/\/www.instagram.com\/berg_software\/&#8221; _builder_version=&#8221;4.4.4&#8243; background_color=&#8221;#ea2c59&#8243; follow_button=&#8221;off&#8221; url_new_window=&#8221;on&#8221;]instagram[\/et_pb_social_media_follow_network][\/et_pb_social_media_follow][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_post_nav in_same_term=&#8221;on&#8221; show_next=&#8221;off&#8221; _builder_version=&#8221;4.4.1&#8243; title_text_color=&#8221;#ff6317&#8243; custom_padding=&#8221;|25px|||false|false&#8221;][\/et_pb_post_nav][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_post_nav in_same_term=&#8221;on&#8221; show_prev=&#8221;off&#8221; _builder_version=&#8221;4.4.1&#8243; title_text_color=&#8221;#ff6317&#8243; custom_padding=&#8221;|||25px|false|false&#8221;][\/et_pb_post_nav][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;CONTACT&#8221; _builder_version=&#8221;4.4.1&#8243; background_color=&#8221;#d2d2d2&#8243; custom_padding=&#8221;75px||75px||false|false&#8221;][et_pb_row column_structure=&#8221;1_4,3_4&#8243; admin_label=&#8221;Service Section Title&#8221; _builder_version=&#8221;4.4.1&#8243; custom_padding=&#8221;||25px||false|false&#8221; animation_direction=&#8221;top&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][\/et_pb_column][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.4.1&#8243; text_font=&#8221;|300|||||||&#8221; text_text_color=&#8221;#ffffff&#8221; text_line_height=&#8221;1.1em&#8221; header_5_font=&#8221;|600|||||||&#8221; header_5_text_color=&#8221;#ffffff&#8221; header_5_font_size=&#8221;14px&#8221; header_5_line_height=&#8221;1.5em&#8221; custom_margin=&#8221;||||false|false&#8221;]29 years in business | 2700 software projects | 760 clients | 24 countries<\/p>\n<h5>We turn ideas into software. What is yours?<\/h5>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;Title&#8221; _builder_version=&#8221;4.4.1&#8243; header_text_align=&#8221;center&#8221; header_2_font=&#8221;|300|||||||&#8221; header_2_text_align=&#8221;left&#8221; header_2_text_color=&#8221;#ff6317&#8243; header_2_font_size=&#8221;50px&#8221; header_2_line_height=&#8221;0.9em&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;25px||25px||false|false&#8221;]<\/p>\n<h2>Get in touch<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_4,3_4&#8243; _builder_version=&#8221;4.4.4&#8243;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.4.4&#8243;][\/et_pb_column][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;4.4.4&#8243;][et_pb_contact_form email=&#8221;contact@bergsoftprod.wpengine.com&#8221; custom_message=&#8221;WEBFORM MESSAGE||et_pb_line_break_holder||\uff3f||et_pb_line_break_holder||FROM: %%Name%%||et_pb_line_break_holder||EMAIL: %%Email%%||et_pb_line_break_holder||PHONE NUMBER: %%Phone_number%%||et_pb_line_break_holder||COMPANY: %%Company_name%%||et_pb_line_break_holder||TERMS &amp; CONDITIONS: %%Terms_and_Conditions%%||et_pb_line_break_holder||DATA PRIVACY POLICY: %%Data_Privacy_Policy%%||et_pb_line_break_holder||\uff3f||et_pb_line_break_holder||MESSAGE:||et_pb_line_break_holder||%%Message%%&#8221; success_message=&#8221;Thank you for reaching out! Your message was sent. We will get back to you right away.&#8221; _builder_version=&#8221;4.4.4&#8243; form_field_background_color=&#8221;#d2d2d2&#8243; form_field_text_color=&#8221;#ffffff&#8221; form_field_focus_background_color=&#8221;#ffffff&#8221; form_field_focus_text_color=&#8221;#000000&#8243; title_level=&#8221;h2&#8243; title_font=&#8221;|300|||||||&#8221; title_text_color=&#8221;#ff6317&#8243; title_font_size=&#8221;30px&#8221; form_field_line_height=&#8221;1.5em&#8221; custom_button=&#8221;on&#8221; button_text_size=&#8221;14px&#8221; button_text_color=&#8221;#ffffff&#8221; button_bg_color=&#8221;#ff6317&#8243; button_border_width=&#8221;0px&#8221; button_border_radius=&#8221;0px&#8221; button_icon=&#8221;%%3%%&#8221; button_on_hover=&#8221;off&#8221; border_color_all=&#8221;#ffffff&#8221; border_width_bottom=&#8221;1px&#8221;][et_pb_contact_field field_id=&#8221;Name&#8221; field_title=&#8221;Name *&#8221; fullwidth_field=&#8221;on&#8221; _builder_version=&#8221;4.4.4&#8243; form_field_background_color=&#8221;#d2d2d2&#8243; form_field_text_color=&#8221;#ffffff&#8221; form_field_focus_background_color=&#8221;#ffffff&#8221; form_field_focus_text_color=&#8221;#000000&#8243; border_width_bottom=&#8221;1px&#8221; button_text_size__hover_enabled=&#8221;off&#8221; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_text_color__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_border_width__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_border_color__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_border_radius__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_letter_spacing__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;off&#8221; button_two_letter_spacing__hover_enabled=&#8221;off&#8221; button_bg_color__hover_enabled=&#8221;off&#8221; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_contact_field][et_pb_contact_field field_id=&#8221;Email&#8221; field_title=&#8221;Email address *&#8221; field_type=&#8221;email&#8221; fullwidth_field=&#8221;on&#8221; _builder_version=&#8221;4.4.4&#8243; button_text_size__hover_enabled=&#8221;off&#8221; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_text_color__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_border_width__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_border_color__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_border_radius__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_letter_spacing__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;off&#8221; button_two_letter_spacing__hover_enabled=&#8221;off&#8221; button_bg_color__hover_enabled=&#8221;off&#8221; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_contact_field][et_pb_contact_field field_id=&#8221;Phone_number&#8221; field_title=&#8221;Phone number&#8221; required_mark=&#8221;off&#8221; fullwidth_field=&#8221;on&#8221; _builder_version=&#8221;4.4.4&#8243;][\/et_pb_contact_field][et_pb_contact_field field_id=&#8221;Company_name&#8221; field_title=&#8221;Company name&#8221; fullwidth_field=&#8221;on&#8221; _builder_version=&#8221;4.4.4&#8243;][\/et_pb_contact_field][et_pb_contact_field field_id=&#8221;Message&#8221; field_title=&#8221;Message *&#8221; field_type=&#8221;text&#8221; fullwidth_field=&#8221;on&#8221; _builder_version=&#8221;4.4.4&#8243; form_field_background_color=&#8221;#d2d2d2&#8243; form_field_focus_background_color=&#8221;#ffffff&#8221; form_field_focus_text_color=&#8221;#000000&#8243; border_width_bottom=&#8221;1px&#8221; button_text_size__hover_enabled=&#8221;off&#8221; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_text_color__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_border_width__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_border_color__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_border_radius__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_letter_spacing__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;off&#8221; button_two_letter_spacing__hover_enabled=&#8221;off&#8221; button_bg_color__hover_enabled=&#8221;off&#8221; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_contact_field][et_pb_contact_field field_id=&#8221;Terms_and_Conditions&#8221; field_title=&#8221; &#8221; field_type=&#8221;checkbox&#8221; checkbox_options=&#8221;%91{%22value%22:%22I have read and accepted the Terms and Conditions%22,%22checked%22:0,%22dragID%22:-1}%93&#8243; fullwidth_field=&#8221;on&#8221; _builder_version=&#8221;4.4.4&#8243;][\/et_pb_contact_field][et_pb_contact_field field_id=&#8221;Data_Privacy_Policy&#8221; field_title=&#8221; &#8221; field_type=&#8221;checkbox&#8221; checkbox_options=&#8221;%91{%22value%22:%22I have read and accepted the Data Privacy Policy%22,%22checked%22:0,%22dragID%22:-1}%93&#8243; fullwidth_field=&#8221;on&#8221; _builder_version=&#8221;4.4.4&#8243;][\/et_pb_contact_field][\/et_pb_contact_form][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How do companies manage to keep consistent across multiple platforms (web and mobile)? At Berg Software, we work with -and recommend- Ionic.<\/p>\n","protected":false},"author":10,"featured_media":5562,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"2880","footnotes":""},"categories":[138,33],"tags":[],"class_list":["post-5526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-insights"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ionic framework for hybrid, multi-platform applications | Berg Software<\/title>\n<meta name=\"description\" content=\"How do companies manage to keep consistent across multiple platforms (web and mobile)? At Berg Software, we work with -and recommend- Ionic.\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic framework for hybrid, multi-platform applications | Berg Software\" \/>\n<meta property=\"og:description\" content=\"How do companies manage to keep consistent across multiple platforms (web and mobile)? At Berg Software, we work with -and recommend- Ionic.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/\" \/>\n<meta property=\"og:site_name\" content=\"Berg Software\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bergCOMPUTERS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-26T09:34:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-27T07:24:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.berg-software.com\/wp-content\/uploads\/Berg-software-ionic-framework-native-hybrid-web-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@berg_software\" \/>\n<meta name=\"twitter:site\" content=\"@berg_software\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"13 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.berg-software.com\/en\/#organization\",\"name\":\"Berg Software\",\"url\":\"https:\/\/www.berg-software.com\/en\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/bergCOMPUTERS\/\",\"https:\/\/www.instagram.com\/berg_software\/\",\"https:\/\/www.linkedin.com\/company\/berg-computers-srl\/\",\"https:\/\/www.youtube.com\/channel\/UCw1FfcRJnC-CoKPwlcM10Iw\",\"https:\/\/twitter.com\/berg_software\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.berg-software.com\/en\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/berg-software.com\/wp-content\/uploads\/berg-software-logo.png\",\"contentUrl\":\"https:\/\/berg-software.com\/wp-content\/uploads\/berg-software-logo.png\",\"width\":512,\"height\":512,\"caption\":\"Berg Software\"},\"image\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.berg-software.com\/en\/#website\",\"url\":\"https:\/\/www.berg-software.com\/en\/\",\"name\":\"Berg Software\",\"description\":\"We turn ideas into software.\",\"publisher\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.berg-software.com\/en\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.berg-software.com\/wp-content\/uploads\/Berg-software-ionic-framework-native-hybrid-web-1.jpg\",\"contentUrl\":\"https:\/\/www.berg-software.com\/wp-content\/uploads\/Berg-software-ionic-framework-native-hybrid-web-1.jpg\",\"width\":1500,\"height\":750,\"caption\":\"Berg software - ionic framework native hybrid web\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#webpage\",\"url\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/\",\"name\":\"Ionic framework for hybrid, multi-platform applications | Berg Software\",\"isPartOf\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#primaryimage\"},\"datePublished\":\"2020-08-26T09:34:29+00:00\",\"dateModified\":\"2022-07-27T07:24:08+00:00\",\"description\":\"How do companies manage to keep consistent across multiple platforms (web and mobile)? At Berg Software, we work with -and recommend- Ionic.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.berg-software.com\/en\/\",\"url\":\"https:\/\/www.berg-software.com\/en\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.berg-software.com\/en\/category\/insights\/\",\"url\":\"https:\/\/www.berg-software.com\/en\/category\/insights\/\",\"name\":\"Insights\"}},{\"@type\":\"ListItem\",\"position\":3,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/\",\"url\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/\",\"name\":\"Overview: Ionic framework for hybrid, multi-platform applications\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/#\/schema\/person\/c30f728cd36ad12eb903071b34eee31f\"},\"headline\":\"Overview: Ionic framework for hybrid, multi-platform applications\",\"datePublished\":\"2020-08-26T09:34:29+00:00\",\"dateModified\":\"2022-07-27T07:24:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.berg-software.com\/en\/ionic-framework-for-hybrid-multiplatform-applications\/#primaryimage\"},\"articleSection\":\"How to,Insights\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.berg-software.com\/en\/#\/schema\/person\/c30f728cd36ad12eb903071b34eee31f\",\"name\":\"Mirela Berzescu\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/posts\/5526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/comments?post=5526"}],"version-history":[{"count":0,"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/posts\/5526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/media\/5562"}],"wp:attachment":[{"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/media?parent=5526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/categories?post=5526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.berg-software.com\/en\/wp-json\/wp\/v2\/tags?post=5526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}