{"id":2748,"date":"2016-07-14T19:33:15","date_gmt":"2016-07-14T19:33:15","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2748"},"modified":"2016-07-14T19:55:35","modified_gmt":"2016-07-14T19:55:35","slug":"build-ionic-app-searching-gifs-using-giphy-api","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/build-ionic-app-searching-gifs-using-giphy-api\/","title":{"rendered":"Build an Ionic app for searching gifs using Giphy API"},"content":{"rendered":"

Last week I held the first Ionic framework meetup in \u010cakovec. Hereby I would like to thank Goran Leva\u010di\u0107, the leader of incubation and education in TICM<\/a>, for securing us the place for this meetup.<\/p>\n

In case you’re interested about next events, be sure to check out the meetup page<\/a> and join the discussion there.<\/p>\n

What was it about?<\/h2>\n

First, we’ve shown how to set up the Ionic framework environment for those who didn’t yet have it and then we went through a typical application step by step.<\/p>\n

You can see the reactions from the first meetup here<\/a>, and some pictures are below. Also, TICM made a blog post about it on their site<\/a> so check it out if you want (attention: only Croatian version).<\/p>\n

<\/p>\n

Demo app<\/h2>\n

We made a simple application for searching (and showing) gifs from the Giphy<\/a> website by using their API<\/a>. Most apps fall into this category today; you have a service ‘somewhere’, and you call it within your app and show its data. Following the same principle, you could make an app for Youtube, IMDB, etc…<\/p>\n

The source code for the app is on Github<\/a>, and you can try it live<\/a> as well.<\/p>\n

\n Those of you who are already very familiar with Ionic may find the following pace too slow. If so, you can just take a look at the source code<\/a>.\n<\/p><\/blockquote>\n

Starting the project<\/h3>\n

First, let’s start a new Ionic project with the following command (executed from your terminal):<\/p>\n

ionic start giphyApp<\/code><\/p>\n

When the command finishes, enter the new directory:<\/p>\n

cd giphyApp<\/code><\/p>\n

Just for testing purposes, let’s run the app to see if everything is OK:<\/p>\n

ionic serve --lab<\/code><\/p>\n

You should see something like this:<\/p>\n

\"\"<\/p>\n

The --lab<\/code> switch will give you a nice side by side view of how the app would look like on iOS and Android device.<\/p>\n

Folder structure<\/h3>\n

Now, open up this folder in your editor and you should see something like this (I’m using Sublime Text 3):<\/p>\n

\"\"<\/p>\n

When developing Ionic applications, you’ll be spending most of the time in the www<\/code> folder.<\/p>\n

Just a quick TL;DR of other folders and files that we have:<\/p>\n