In part 2, we covered how to tap into native device features such as the camera and GPS. In this part, we’re going to look at how to display those photos. We’ll also look at how we can display a map with pins of where we’ve taken photos.
The first thing we’re going to do is change the tab icons and names. For tab 2, we’ll display an image icon and name the tab “images”. For tab 3, we’ll name it “Map” and display a map icon. To do this, head over to src/views/Tabs.vue.
At the top of the script…
In part 1, we went over how to set up an Ionic Framework mobile App with VueJs. We also configured our Firebase features including authentication, Firestore, and storage. In this article, we’re going to cover how to tap into native device features like the camera and GPS.
To add native features to our app, we’ll be using Capacitor. To enable capacitor in our application, open a terminal in the root of the app, and run the following command:
ionic integrations enable capacitor
Then we need to initialize Capacitor in our application. To do so, you’ll need to name your app…
In my last series, we built out a cocktail recipe app using the Ionic Framework and VueJs. While this was a good introduction to what you can do with Ionic, it did not cover any native features. In this series, we’ll be taking a deeper dive and accessing features such as the camera and GPS. To persist the data in our app and provide authentication, we’ll be utilizing Firebase.
In part 1 of this series, we set up the app and implemented the random cocktail tab. In part 2, we set up our search by ingredient tab and pages. In this tutorial, we’re going to be implementing a free form search tab so users can search for drinks by name.
In part 1, we set up our app and completed our first tab which loads a random cocktail when the app is loaded. Now we’re going to work on our search by ingredient functionality. When a user clicks on the search by ingredient tab, we’ll load a list of ingredients. When they click on an ingredient, we’ll display a list of drinks that contain that ingredient. And, finally, if they click on a drink, we’ll display that drink's details.
Ionic does all this by wrapping your app in a web view. While it provides many benefits to writing cross platforms app quickly, it is not as performant as native or other cross-platform alternatives (React Native and…
In part 4 we got movies flowing into our application and allowed the user to thumb them up or down. We also checked to see if their partner had any matches on the movies they thumbed up. The last thing we need to do is display those matches on another page and polish up the app a bit.
To display the matches we’re going to be using VuexFire. This will give us real-time functionality on our matches page without having to write extra code. To do this, head to src/store/modules/user.js. At the top of the file, add the following imports:
In part 3, we worked on adding partners. Now, let’s focus on displaying and voting for movies. To do this, we’ll be using The Movie Database. This API is completely free to use as long as you properly attribute the data source.
To get an API key head over to https://www.themoviedb.org/ and create an account. Then click on your account in the upper right-hand corner. Next, click on Settings in the dropdown and choose the API option on the left. You’ll then have to apply for an API key, which is instant.
In part 2, we wired up authentication in our Movie Night Picker. Now we can start to focus on the core logic. The first thing we’ll do is work on adding a partner. After we finish that we’ll start on the display and voting of movies.
In order to make matches in our system, we’ll need to link partners. For now, we’ll allow users to select one partner. Feel free to expand to multiple partners in case you wanted to use this for friends.
To add partners, we’ll search on email in the system. When we find a match, we’ll…
In part 1, we set up our project to include everything we’re going to need for development. Now, we can actually start coding the application. The first thing that we’re going to need is authentication. We’ll be using Firebase Authentication to authenticate our users.
To set up Firebase Authentication, head over to firebase.google.com, select the project you set up in part one, and click on Authentication in the left-hand menu. Then, click on the Sign-in method tab, select Email/Password, and enable it.