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.

Capacitor

Installation

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

Initialization

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.

Ionic App Setup

To create the Ionic app, you’ll need to have the Ionic CLI installed. To install it, you’ll need to have NodeJS installed. …

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.

A few weeks ago, the team at Ionic announced that they had completed their integration with VueJs. If you’re not familiar with Ionic, it's a framework that allows you to write mobile applications with your favorite Javascript framework/library (Angular, React, or Vue). Now it's not a native mobile application, but it does allow you to access native features like GPS, camera, contacts, etc.

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.

Matches and Vuexfire

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.

Discover API Endpoint

This specific endpoint we’ll be using to display…

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.

Adding a Partner

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…