{"id":5806,"date":"2024-01-04T11:50:53","date_gmt":"2024-01-04T16:50:53","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5806"},"modified":"2024-01-04T14:41:03","modified_gmt":"2024-01-04T19:41:03","slug":"making-api-calls-in-a-capacitor-project","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project","title":{"rendered":"Making API Calls In a Capacitor Project"},"content":{"rendered":"\n<p>Capacitor is a versatile cross-platform native runtime for web apps with a variety of official and community-created plugins to supercharge your development. However, if you can\u2019t find <a href=\"https:\/\/capacitorjs.com\/directory\">what you\u2019re looking for<\/a>, you have the opportunity to build your own <a href=\"https:\/\/ionic.io\/blog\/creating-your-own-media-plugin-for-capacitor-an-ios-tutorial\">plugin<\/a> or connect to a service using the available HTTP plugin. I recently ran into this when trying to connect my <a href=\"https:\/\/capacitorjs.com\/\">Capacitor<\/a> project to Segment.io (a popular data collection and ETL tool) so I decided to document the process of using the HTTP plugin for you to be able to build your own 3rd party integrations!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setup<\/h2>\n\n\n\n<p>In this tutorial we will be setting up an Ionic Angular project with Capacitor and sending button click tracking data to Segment.io using the Capacitor HTTP Plugin via a POST request. Before we get started we\u2019ll need to set up a few things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Segment.io account: <a href=\"https:\/\/app.segment.com\/signup\">https:\/\/app.segment.com\/signup<\/a>&nbsp;&nbsp;<\/li>\n\n\n\n<li>Ionic (Getting Started): <a href=\"https:\/\/ionicframework.com\/docs\/\">https:\/\/ionicframework.com\/docs\/<\/a><\/li>\n\n\n\n<li>Capacitor (Getting Started): <a href=\"https:\/\/capacitorjs.com\/docs\">https:\/\/capacitorjs.com\/docs<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>Below is some starter code if you would like to follow along, or you can view the entire completed project if you just want to see how to integrate with Segment:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Starter Project: <a href=\"https:\/\/github.com\/GamegineerLabs\/Ionic-Capacitor-API-Starter-Project\">https:\/\/github.com\/GamegineerLabs\/Ionic-Capacitor-API-Starter-Project<\/a>&nbsp;<\/li>\n\n\n\n<li>Completed Project: <a href=\"https:\/\/github.com\/GamegineerLabs\/Ionic-Capacitor-API-Completed-Project\">https:\/\/github.com\/GamegineerLabs\/Ionic-Capacitor-API-Completed-Project<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring Segment<\/h2>\n\n\n\n<p>In order for us to send data to Segment, we will need to configure it to accept our HTTP POST request and get the proper write key to incorporate into Capacitor\u2019s HTTP plugin.<\/p>\n\n\n\n<p>1. Navigate to https:\/\/segment.io\/<\/p>\n\n\n\n<p>2. Click &#8220;Log in&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/uGwZqFQab2u5rMR-pTOJTuTnprrMIUNXLsuJSnbXrvLeJEsghDXQN2NXtvGdc1drxEVP-gwgDiVTlKzlJfPZG513jGgur-dgg9gUZwZtZ4TmVTlKF5ttSocK7QS-C6wu35v3anXCYDO9O5k5JPNImg\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/uGwZqFQab2u5rMR-pTOJTuTnprrMIUNXLsuJSnbXrvLeJEsghDXQN2NXtvGdc1drxEVP-gwgDiVTlKzlJfPZG513jGgur-dgg9gUZwZtZ4TmVTlKF5ttSocK7QS-C6wu35v3anXCYDO9O5k5JPNImg\"><\/noscript><\/p>\n\n\n\n<p>3. Login<\/p>\n\n\n\n<p>4. Click &#8220;Sources&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/3hdhDFX7z9RJxA-ZMKFMqEnd680Y6njggXZdtIpjq_Sl0ddV-rP8sLmUKHuuNotU8wL6z7AXeB9R31L5fPg9TEPcWpadtIVH-4ff8krMC43-OuWn2ueXTCIPhuKRHgwOshXP6dxmQlROYnGTBG3pyQ\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/3hdhDFX7z9RJxA-ZMKFMqEnd680Y6njggXZdtIpjq_Sl0ddV-rP8sLmUKHuuNotU8wL6z7AXeB9R31L5fPg9TEPcWpadtIVH-4ff8krMC43-OuWn2ueXTCIPhuKRHgwOshXP6dxmQlROYnGTBG3pyQ\"><\/noscript><\/p>\n\n\n\n<p>5. Click &#8220;Add Source&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/flGF7ChNYMsM2DK9LkQTy5VgJMUGsk_sbZbvhftaqgYdRbkbTQDxkNujphWvLgWgx9dRPfG_-ZktgnKyHlWbrsKXEHIggWoVqqjoeMisXvsPSDL_gDCjEfWTnguCJc80YCnYIkz2zcd-OeUKjaYVHA\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/flGF7ChNYMsM2DK9LkQTy5VgJMUGsk_sbZbvhftaqgYdRbkbTQDxkNujphWvLgWgx9dRPfG_-ZktgnKyHlWbrsKXEHIggWoVqqjoeMisXvsPSDL_gDCjEfWTnguCJc80YCnYIkz2zcd-OeUKjaYVHA\"><\/noscript><\/p>\n\n\n\n<p>6. Click the &#8220;Filter Sources&#8221; field.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/HsWLcYm_JtxGF2z3qZQFPgkHx1cIEUAqpdwT4iwyWiYRI1s6oSp1jQxM3PDJG3IJUN_8JBKuvi4FpiW7geqbeHN7Cg9NXTRrNhgcSkIMnJc2Bq-MnWushBlPdpbm-W1zuGomf0TL46jynAFL35fFRA\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/HsWLcYm_JtxGF2z3qZQFPgkHx1cIEUAqpdwT4iwyWiYRI1s6oSp1jQxM3PDJG3IJUN_8JBKuvi4FpiW7geqbeHN7Cg9NXTRrNhgcSkIMnJc2Bq-MnWushBlPdpbm-W1zuGomf0TL46jynAFL35fFRA\"><\/noscript><\/p>\n\n\n\n<p>7. Type &#8220;HTTP&#8221;<\/p>\n\n\n\n<p>8. Click &#8220;HTTP API&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/C669lbFWJSd5GnJYvSRUagyvQWw9dk9Xg8z_UGG8EXDrGstslrYBrSyCUYX4l0Bu-zxDohTDd68Wue9U_3GoJqqr1wtEYGOZH9zHaV1jRECWbIU-4KAoXFfwyuSSzXa4IPb0f7yTZjBgMlX7Q_zkyw\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/C669lbFWJSd5GnJYvSRUagyvQWw9dk9Xg8z_UGG8EXDrGstslrYBrSyCUYX4l0Bu-zxDohTDd68Wue9U_3GoJqqr1wtEYGOZH9zHaV1jRECWbIU-4KAoXFfwyuSSzXa4IPb0f7yTZjBgMlX7Q_zkyw\"><\/noscript><\/p>\n\n\n\n<p>9. Click &#8220;Add Source&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/afcvbBXmDL_GLwZJjvYVwpm4u0kfW4M2IU-wJSKDtiNOLREx5z6M-dQy1QWSEn2z3Cl3nbp83sx91dt_l3sdXRWt7YNbcKsANKc8NCaNASdV_7jQgZqzCjDDuMy7Fw7GBKvqh4tnH37UP8VVt3kPEg\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/afcvbBXmDL_GLwZJjvYVwpm4u0kfW4M2IU-wJSKDtiNOLREx5z6M-dQy1QWSEn2z3Cl3nbp83sx91dt_l3sdXRWt7YNbcKsANKc8NCaNASdV_7jQgZqzCjDDuMy7Fw7GBKvqh4tnH37UP8VVt3kPEg\"><\/noscript><\/p>\n\n\n\n<p>10. Click &#8220;Add Source&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/_62pPoN8Kq1nN6OkY6RDBsT7gMAJkGsD9J7s8ZIbM1Yc-mmbBZDra3T55xC3twSCuAFmwvPQ7CNOS-Wr86chKR7zjsRjAqw-xU30lY6BdWp8H9Wa6G5Yl_UM268DmyHKkWPSSVDp862KBcdCGvRCZw\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/_62pPoN8Kq1nN6OkY6RDBsT7gMAJkGsD9J7s8ZIbM1Yc-mmbBZDra3T55xC3twSCuAFmwvPQ7CNOS-Wr86chKR7zjsRjAqw-xU30lY6BdWp8H9Wa6G5Yl_UM268DmyHKkWPSSVDp862KBcdCGvRCZw\"><\/noscript><\/p>\n\n\n\n<p>11. Copy your write key<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/cjVM5F6nlxWfkfdxZ783Xt5LUaNSLJW_XUG_oCz0WH5s48Pdojgmq-1MvF2WQx_ZiS2_avi9ifhhHfB6Cmij_TalHgo0HHG22vbRaDkv7T9zNQGoYLyfSpbkYCDvaDd7XW9nyvJkiGwMSd1Kicrr7w\" width=\"624\" height=\"351\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/cjVM5F6nlxWfkfdxZ783Xt5LUaNSLJW_XUG_oCz0WH5s48Pdojgmq-1MvF2WQx_ZiS2_avi9ifhhHfB6Cmij_TalHgo0HHG22vbRaDkv7T9zNQGoYLyfSpbkYCDvaDd7XW9nyvJkiGwMSd1Kicrr7w\" width=\"624\" height=\"351\"><\/noscript><\/p>\n\n\n\n<p>12. Combine your copied write key and Segment password but separated with a colon (i.e. XwFzYSPWzqTHd2amT6E7AVKCj7peT0kj:password)<\/p>\n\n\n\n<p>13. Base64 Encode the above copied write key and password<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the Project<\/h2>\n\n\n\n<p>1. Setup the project with the following commands in terminal and go through the prompts (alternatively clone the starter project from Github, run npm install, and skip to step 9)<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">ionic start httpExample blank --type=angular --capacitor<\/code><\/pre>\n\n\n\n<p>2. Change directory to your newly created project:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">cd httpExample<\/code><\/pre>\n\n\n\n<p>3. Create an http service (This will hold our code that\u2019ll do the POST request):<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">ionic g service services\/http<\/code><\/pre>\n\n\n\n<p>4. Open the project in your IDE and add the following Ionic button component to home.page.html in src\/app\/home:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;ion-button expand=&quot;block&quot; (click)=&quot;nativeCall()&quot;&gt;\nAPI Call\n&lt;\/ion-button&gt;<\/code><\/pre>\n\n\n\n<p>5. With the Ionic button added, home.page.html should look like this. It will show an error for nativeCall() but we will address that in the next step!:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;ion-header [translucent]=&quot;true&quot;&gt;\n  &lt;ion-toolbar&gt;\n    &lt;ion-title&gt;\n      Track Button Click\n    &lt;\/ion-title&gt;\n  &lt;\/ion-toolbar&gt;\n&lt;\/ion-header&gt;\n\n&lt;ion-content [fullscreen]=&quot;true&quot;&gt;\n  &lt;ion-header collapse=&quot;condense&quot;&gt;\n    &lt;ion-toolbar&gt;\n      &lt;ion-title&gt;Track Button Click&lt;\/ion-title&gt;\n    &lt;\/ion-toolbar&gt;\n  &lt;\/ion-header&gt;\n\n  &lt;ion-button expand=&quot;block&quot; (click)=&quot;nativeCall()&quot;&gt;API Call&lt;\/ion-button&gt;\n&lt;\/ion-content&gt;<\/code><\/pre>\n\n\n\n<p>6. Add the following function to home.page.ts:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">nativeCall() {\n console.log(&#039;Button Pressed!&#039;);\n}<\/code><\/pre>\n\n\n\n<p>7. home.page.ts should now look like this:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { Component } from &#039;@angular\/core&#039;;\n\n@Component({\n  selector: &#039;app-home&#039;,\n  templateUrl: &#039;home.page.html&#039;,\n  styleUrls: [&#039;home.page.scss&#039;],\n})\nexport class HomePage {\n\n  constructor() {}\n\n  nativeCall() {\n    console.log(&#039;Button Pressed!&#039;);\n  }\n}<\/code><\/pre>\n\n\n\n<p>8. Next we\u2019ll need to build our application and add the native platforms:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/Building our application\nionic build\n\n\/\/If you are creating\/testing this for mobile, make sure to add \/\/the native platforms\nionic cap add ios\nionic cap add android<\/code><\/pre>\n\n\n\n<p>9. Once that is completed, we should be able to test our application to make sure everything is working so far and that it will reload as we are making changes!:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/This will run our application in your browser on localhost:8100\nionic serve\n\n\/\/This will run our project in the XCode Simulator\nionic cap run ios -l --external\n\n\/\/This will run our project in the Android Studio Simulator\nionic cap run android -l --external<\/code><\/pre>\n\n\n\n<p style=\"color:tomato\">\n<i>\n<b>*Note:<\/b> As a M1 Mac user I did run into issues with the Android Studio connection so make sure NPM has the right permissions (you should not have to use sudo when running Ionic CLI commands), you have Java installed, the Gradle JDK configured to the right JDK and emulators configured in Device Manager.\n\nWith our project set up and working, you\u2019ll notice that we currently have a button that doesn\u2019t do anything but log out \u201cButton Pressed!\u201d Now that Segment has been configured, and our project is set up, let\u2019s connect our project to Segment to change that!\n<\/i>\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Connecting the Button to Make an API Call<\/h2>\n\n\n\n<p>1. Go to http.service.ts and import CapacitorHttp and HttpOptions from @capacitor\/core. We\u2019ll also need to import \u2018from\u2019 from rxjs to turn our response into an Observable that we can listen to:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { CapacitorHttp, HttpOptions } from &#039;@capacitor\/core&#039;;\nimport { from } from &#039;rxjs&#039;;<\/code><\/pre>\n\n\n\n<p>2. Next we need to create a method that calls the Segment API in http.service.ts (Make sure to update Authorization with \u2018Basic\u2019 and your Base64 encoded writeKey:password):<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">doPost(url: string) {\n\/\/Options that are necessary to make the POST request\n const options: HttpOptions = {\n   url,\n   headers: {\n     Authorization: &#039;Basic writeKey:password&#039;, \n     &#039;Content-Type&#039;: &#039;application\/json&#039;\n   },\n   data: {\n\t\/\/This is a test data object to be tracked so try this or create your own! \n     userId: &quot;019mr8mf4r&quot;,\n     event: &quot;API Called&quot;,\n     properties: {\n       name: &quot;Button Was Clicked&quot;,\n       &quot;Tag&quot;: &#039;Capacitor&#039;\n     },\n     context: {\n       &quot;ip&quot;: &quot;24.5.68.47&quot;\n     }\n   },\n };\n return from(CapacitorHttp.post(options));\n}<\/code><\/pre>\n\n\n\n<p style=\"color:tomato\">\n<i>\n<b>*Note:<\/b> Without Content-Type, the data won\u2019t send to the API on mobile.\n<\/i>\n<\/p>\n\n\n\n<p>3. With that method in place, our completed http.service.ts should look like this:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { Injectable } from &#039;@angular\/core&#039;;\nimport { CapacitorHttp, HttpOptions } from &#039;@capacitor\/core&#039;;\nimport { from } from &#039;rxjs&#039;;\n\n\n@Injectable({\n providedIn: &#039;root&#039;\n})\nexport class HttpService {\n\n constructor() { }\n\n doPost(url: string) {\n   const options: HttpOptions = {\n     url,\n     headers: {\n       Authorization: &#039;Basic writeKey:password&#039;,\n       &#039;Content-Type&#039;: &#039;application\/json&#039;\n     },\n     data: {\n       userId: &quot;019mr8mf4r&quot;,\n       event: &quot;API Called&quot;,\n       properties: {\n         name: &quot;Button Was Clicked&quot;,\n         &quot;Tag&quot;: &#039;Capacitor&#039;\n       },\n       context: {\n         &quot;ip&quot;: &quot;24.5.68.47&quot;\n       }\n     },\n   };\n   return from(CapacitorHttp.post(options));\n }\n}<\/code><\/pre>\n\n\n\n<p>4. Now that our http service is in place we\u2019ll need to call it home.page.ts by importing HttpService:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { HttpService } from &#039;..\/services\/http.service&#039;;<\/code><\/pre>\n\n\n\n<p>5. Then we\u2019ll need to update our constructor to properly add HttpService:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">constructor(private httpService: HttpService) {}<\/code><\/pre>\n\n\n\n<p>6. Lastly, we\u2019ll need to update nativeCall() to call doPost() with the Segment Track URL in http.service.ts and listen to the response:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">nativeCall() {\n this.httpService.doPost(&#039;https:\/\/api.segment.io\/v1\/track&#039;)\n   .subscribe(\n     (res: any) =&gt; {\n       console.log(res);\n }\n   );\n}<\/code><\/pre>\n\n\n\n<p>7. With HttpService setup and nativeCall() update home.page.ts should look like this:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { Component } from &#039;@angular\/core&#039;;\nimport { HttpService } from &#039;..\/services\/http.service&#039;;\n\n@Component({\n selector: &#039;app-home&#039;,\n templateUrl: &#039;home.page.html&#039;,\n styleUrls: [&#039;home.page.scss&#039;],\n})\nexport class HomePage {\n\n constructor(private httpService: HttpService) {}\n\n \/\/ nativeCall() {\n \/\/   console.log(&#039;Button Pressed!&#039;);\n \/\/ }\n\n nativeCall() {\n   this.httpService.doPost(&#039;https:\/\/api.segment.io\/v1\/track&#039;)\n     .subscribe(\n       (res: any) =&gt; {\n         console.log(res);\n   }\n     );\n }\n}<\/code><\/pre>\n\n\n\n<p>With everything in place, it\u2019s time to confirm that our code works and that we are successfully sending data to Segment!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Confirming the Code Works<\/h2>\n\n\n\n<p>1. With our project running from a previous step, navigate to http:\/\/localhost:8100\/home in your browser or use the mobile emulators.<\/p>\n\n\n\n<p>2. Click &#8220;API CALL&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/wsExHwqPSfd45IgkqWbViGXSYAHavRzjY0ltonsF1kzC9XqvbYNTADNexjLM65-vh21VR4NgyZpgQEFCKMfimjfP4n4UklqKLSyFn8GE7r2yrRWtHjmCMvp1IHK2UvgssUvvTzoF62QENF0pLSMtfQ\" width=\"624\" height=\"655\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/655;\"><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/wsExHwqPSfd45IgkqWbViGXSYAHavRzjY0ltonsF1kzC9XqvbYNTADNexjLM65-vh21VR4NgyZpgQEFCKMfimjfP4n4UklqKLSyFn8GE7r2yrRWtHjmCMvp1IHK2UvgssUvvTzoF62QENF0pLSMtfQ\" width=\"624\" height=\"655\"><\/noscript><\/p>\n\n\n\n<p>3. In a new tab, navigate to https:\/\/segment.com\/<\/p>\n\n\n\n<p>4. Click &#8220;Log in&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/v_MyFPyZ21CV4W5o9azknX-TQNDE2TR8UDWMwQbV8R9bJEFA7K31LSMFEM3H5G-IZGYDLeE6VfKHgJGoQQINI1ZtZAUwt5vGIT4j4QTjippS_Ix_1pkU72ePgAH26AVupU3PcIugVuN2QSZiizeXvg\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/v_MyFPyZ21CV4W5o9azknX-TQNDE2TR8UDWMwQbV8R9bJEFA7K31LSMFEM3H5G-IZGYDLeE6VfKHgJGoQQINI1ZtZAUwt5vGIT4j4QTjippS_Ix_1pkU72ePgAH26AVupU3PcIugVuN2QSZiizeXvg\"><\/noscript><\/p>\n\n\n\n<p>5. Click &#8220;Sources&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/CfvnHczRoNg1uHpEfy5Ju3zLMDBO_i7w499SfwUkcpd-Wlx_MtZjxtxzoU5UyPwlV2fXfZkZg-Kiz0qW15OTmScu_t2FbDs_he9bJs0x4cDH7keumQ69rgBheBXLIiRIJrz6KHo_MlHkWqE8sJbX-w\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/CfvnHczRoNg1uHpEfy5Ju3zLMDBO_i7w499SfwUkcpd-Wlx_MtZjxtxzoU5UyPwlV2fXfZkZg-Kiz0qW15OTmScu_t2FbDs_he9bJs0x4cDH7keumQ69rgBheBXLIiRIJrz6KHo_MlHkWqE8sJbX-w\"><\/noscript><\/p>\n\n\n\n<p>6. Click &#8220;HTTP API&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/OLCiLp1RlrMbYDPbLmPxS__U26MJwuVJ6BGkMZOLwTkjb044NuAph1Uo-BOAbI8MHHQrtLNt7y1WuG0Cps-Kscb7qLBi5xzVawAZYitzUSYfGbTrPwtASiKeIALPugfWSGJjLJyL7WFYWKGbZxJcvA\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/OLCiLp1RlrMbYDPbLmPxS__U26MJwuVJ6BGkMZOLwTkjb044NuAph1Uo-BOAbI8MHHQrtLNt7y1WuG0Cps-Kscb7qLBi5xzVawAZYitzUSYfGbTrPwtASiKeIALPugfWSGJjLJyL7WFYWKGbZxJcvA\"><\/noscript><\/p>\n\n\n\n<p>7. Click &#8220;Debugger&#8221;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/hoZ5rwaUNZzjhd0och4FDzSzWzW1Okhv4sF0X5cAhYtrPvSFNMSyf_au394_d3POD4fBojfpPgcjbAXkWE4POhx1-R_c7j-wv9un0H5lysjupER8Tm_GGgZyPO5E--2M1VGaurvUvlvnozmynKCgVg\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/hoZ5rwaUNZzjhd0och4FDzSzWzW1Okhv4sF0X5cAhYtrPvSFNMSyf_au394_d3POD4fBojfpPgcjbAXkWE4POhx1-R_c7j-wv9un0H5lysjupER8Tm_GGgZyPO5E--2M1VGaurvUvlvnozmynKCgVg\"><\/noscript><\/p>\n\n\n\n<p>8. In the debugger menu you should be able to see our button tracking calls in near real-time!<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/NZWLz9Jrd3EjNDvzMw-Rcf_Dx6ZVBhPC-WlsONdo7MjATdUhPexN88FFlEyXWd11gMtXbHHeqsP-YBd7qHAsmz6IfKhRe9raRFryvQlVNpJGQKeAERF-rWxrFJXjFRczPtVGJIaKe9DIReCaZoOnvA\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/NZWLz9Jrd3EjNDvzMw-Rcf_Dx6ZVBhPC-WlsONdo7MjATdUhPexN88FFlEyXWd11gMtXbHHeqsP-YBd7qHAsmz6IfKhRe9raRFryvQlVNpJGQKeAERF-rWxrFJXjFRczPtVGJIaKe9DIReCaZoOnvA\"><\/noscript><\/p>\n\n\n\n<p>9. Click &#8220;Raw&#8221; to see what data is being passed from our Capacitor project<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/shmHcOejYUntNipB9RcGZNLNIZdFx3pip11Sh5CYh8iLq2HBAcKsOoZQT8ba-MntvxmzHYgi3EVSk9TG6P0pdWNsAuC-qCn8maNrxIOe5ai3R_zyeg2CCYeWizYuFDzCT050fIoPWt018BcxXVsCfg\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/shmHcOejYUntNipB9RcGZNLNIZdFx3pip11Sh5CYh8iLq2HBAcKsOoZQT8ba-MntvxmzHYgi3EVSk9TG6P0pdWNsAuC-qCn8maNrxIOe5ai3R_zyeg2CCYeWizYuFDzCT050fIoPWt018BcxXVsCfg\"><\/noscript><\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/uIwC-lybWmxJ6-FZJ2sPazZQl6bbDKit8fYF-kCU0IG5unkCfscelIls1-6aawKBxb250Se-UQAY0Y0EuVoea_42YijqYE7pkSpD-yHQhfEnZQfHtui6rRKcdNLoBmFzdrjvZIDcQlsHUomFiGhhrA\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/351;\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh7-us.googleusercontent.com\/uIwC-lybWmxJ6-FZJ2sPazZQl6bbDKit8fYF-kCU0IG5unkCfscelIls1-6aawKBxb250Se-UQAY0Y0EuVoea_42YijqYE7pkSpD-yHQhfEnZQfHtui6rRKcdNLoBmFzdrjvZIDcQlsHUomFiGhhrA\"><\/noscript><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>Even without a Capacitor-Segment plugin, Capacitor provided an excellent tool that allows for integration with Segment with just a little configuration and a few lines of code. In this tutorial we walked through how to do the configuration in Segment, demonstrated the code necessary to integrate to a 3rd party API, and verified data was being sent to Segment.&nbsp;<\/p>\n\n\n\n<p>Be on the lookout for more blog posts and video content around the HTTP plugin in the future (and check out our extensive library of tutorials in the meantime on the <a href=\"https:\/\/ionic.io\/blog\/category\/tutorials\">Ionic Blog<\/a>). I\u2019ve got some unique projects in the pipeline to show off just how versatile Capacitor &amp; the HTTP plugin are and you don\u2019t want to miss it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin.<\/p>\n","protected":false},"author":103,"featured_media":5816,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"4","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"571893","discourse_permalink":"http:\/\/forum.ionicframework.com\/t\/making-api-calls-in-a-capacitor-project\/238868","wpdc_publishing_response":"success","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,124],"tags":[151,25],"class_list":["post-5806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-tutorials","tag-capacitor","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Making API Calls In a Capacitor Project - Ionic Blog<\/title>\n<meta name=\"description\" content=\"This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making API Calls In a Capacitor Project\" \/>\n<meta property=\"og:description\" content=\"This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-04T16:50:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-04T19:41:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Logan Brade\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loganbrade\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Logan Brade\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project\"},\"author\":{\"name\":\"Logan Brade\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562\"},\"headline\":\"Making API Calls In a Capacitor Project\",\"datePublished\":\"2024-01-04T16:50:53+00:00\",\"dateModified\":\"2024-01-04T19:41:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project\"},\"wordCount\":975,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png\",\"keywords\":[\"Capacitor\",\"Tutorials\"],\"articleSection\":[\"All\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project\",\"url\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project\",\"name\":\"Making API Calls In a Capacitor Project - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png\",\"datePublished\":\"2024-01-04T16:50:53+00:00\",\"dateModified\":\"2024-01-04T19:41:03+00:00\",\"description\":\"This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making API Calls In a Capacitor Project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562\",\"name\":\"Logan Brade\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg\",\"caption\":\"Logan Brade\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/loganbrade\/\",\"https:\/\/x.com\/loganbrade\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/logan-brade\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Making API Calls In a Capacitor Project - Ionic Blog","description":"This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin.","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:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project","og_locale":"en_US","og_type":"article","og_title":"Making API Calls In a Capacitor Project","og_description":"This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin.","og_url":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project","og_site_name":"Ionic Blog","article_published_time":"2024-01-04T16:50:53+00:00","article_modified_time":"2024-01-04T19:41:03+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png","type":"image\/png"}],"author":"Logan Brade","twitter_card":"summary_large_image","twitter_creator":"@loganbrade","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Logan Brade","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project"},"author":{"name":"Logan Brade","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562"},"headline":"Making API Calls In a Capacitor Project","datePublished":"2024-01-04T16:50:53+00:00","dateModified":"2024-01-04T19:41:03+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project"},"wordCount":975,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png","keywords":["Capacitor","Tutorials"],"articleSection":["All","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project","url":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project","name":"Making API Calls In a Capacitor Project - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png","datePublished":"2024-01-04T16:50:53+00:00","dateModified":"2024-01-04T19:41:03+00:00","description":"This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/making-api-calls-in-a-capacitor-project#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Making API Calls In a Capacitor Project"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562","name":"Logan Brade","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg","caption":"Logan Brade"},"sameAs":["https:\/\/www.linkedin.com\/in\/loganbrade\/","https:\/\/x.com\/loganbrade"],"url":"https:\/\/ionic.io\/blog\/author\/logan-brade"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/01\/API-calls-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5806"}],"version-history":[{"count":7,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5806\/revisions"}],"predecessor-version":[{"id":5824,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5806\/revisions\/5824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5816"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}