The application has three tabs and a left panel navigation page.
The implemented pages are the following;
- Home, where all the added products are being shown.
- Search, where specific products can be searched for.
- Product List, has the same functionality as Home.
- Shop List, where all the added shops are being shown.
- New Shop, where a new shop can be added.
- New Product, where a new product can be added.
The JS files:
app.jscontains the app initialization for Framework7 and other general functions used for modifying data.
config.jsincludes configurations for the Firebase Database.
database.jscontains the methods for the Firebase Db.
localStorage.jsif a Firebase db is not initialized, we’re going to save our data to the Local Storage. This file contains the methods for that.
routes.jshas the necessary routes for navigation.
You can download the full project from this GitHub repository. It is also highly recommended to take a look at the structure first. A demo of the app is also available here, but please keep in mind that some of the features are not working properly through web browsers. In order to install and test the app properly, please refer to the Building the Application section of this article.
Due to the size and length of the app, in the tutorial, we will guide you through the main features and implementations only.
Let’s Start with Some Definitions
If you already used these technologies before you can jump to the next section.
Monaca - is a cloud-based mobile app development environment that supports iOS/Android/PC hybrid apps in one source. Built using open-source Apache Cordova, it provides resources including Cloud IDE, local development tools, a debugger, and backend support.
Framework7 - is a free and open-source mobile HTML framework to develop hybrid mobile apps or web apps with an iOS native look and feel. It is very well documented, has a rich ecosystem and you can easily build apps for any platform. In case you haven’t used Framework7 before, I suggest you give it a try.
Yahoo (Japan) - The Yahoo ショッピング API allows creating and enriching applications by directly using Japan’s largest product database.
Firebase - Real-Time Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. Cloud Storage is built for app developers who need to store and serve user-generated content, such as photos or videos.
Now, that we talked about the used technologies, take a look at the prerequisites and install those that are not yet installed on your PC.
Download Node.js from the official website to access a program called
npm, a package manager for Node.js.
Install the Monaca CLI
The best way to start developing locally is to use the Monaca CLI tool, where you can create a brand new project with the prebuilt template. Later on, we will also use this tool to perform various tasks (i.e. debugger).
Monaca CLI is the full stack development tool for hybrid apps. It is compatible with Cordova CLI and makes the development much easier and faster.
If you haven’t installed it already, you can do so by using this simple line of command in your terminal.
npm install -g monaca
For another option; you can also create your project and follow along using the Monaca Cloud IDE if you rather prefer that. However, as mentioned earlier, in this tutorial we will use the Monaca CLI tool.
Create a New Project
Now, that we have the tools ready, let’s create a new Monaca project with Framework7.
Each page has a slightly different design and it would take a long time to explain everything about it in detail. For now, please copy-paste the necessary codes to the corresponding HTML files. If you came across something that you don’t understand, refer to the Framework7 documentation.
For styling, we don’t have much to do because Framework7 does the job for us. As for some adjustment, add these lines to the app.css in the www/css folder.
In the app, we will use these functionalities :
- Geolocation, to locate a shop’s location.
- Barcode scanner, to scan a product’s barcode.
- Camera, to take a picture from the product or choose one from the gallery.
To use these, we have to access native device functions by adding plugins to our code. The previously mentioned ones are already built-in plugins and can be found in the Cloud IDE, however, we’ll also need a custom plugin to tackle the cross-origin problem through fetching data. Let’s have a look at these.
Most of the plugins are well documented with examples on the Cordova website.
openFilePicker is very similar to the
openCamera function. The only difference is the
We haven’t talked about the Yahoo API yet, but in order to avoid any CORS issues and fetch the data, we have to use the Advanced HTTP Cordova plugin to send a
get request, which takes the URL, parameters and headers.
onSuccess callback, we’ll create a marker on the map according to the current position coordinates by using the Leaflet library.
To display or modify a shop’s location, we are going to use Leaflet to display maps and add custom markers to them. You can either use the CDN to add the library to your code or install it:
npm install leaflet
Now, we are going to initialize and add the maps to the
Previously, when we talked about the Geolocation plugin, we introduced the
onSuccesscallback function. Here is the code snippet about it:
It will take the latitude and longitude coordinates and create a marker with a pop-up message to the current position on the map.
We also want the option to pick a location on our own.
It has similar elements like the
onSuccess callback function, but instead of the current location, it will use the position of a click/tap fired by the user (
chosenPositionMarker) to add a red marker and a pop-up to the map.
One of the most important parts of this implementation is how we could get the data about a specific product from the API using only the scanned barcode. First, let’s create your own Yahoo API key by registering here. After you completed the registration, you have to fill out some information about your app, then you’ll receive your API key.
Good, let’s take a look at the code.
First, it constructs the URL for fetching data by the API key and the barcode. Then, as we explained before, we have to use the Cordova plugin to tackle the cross-origin problem. If the data is available, it will return it as a JSON string. To use it we have to parse it. After that, we will add the results to the DOM.
To save our data we’re primarily going to use Google’s Firebase. To set it up, visit the official website for step by step instructions. If you copy-pasted the HTML from the
index.html to your project, it already includes the Firebase libraries before the closing
</body> tag. During the development the 8.2.6 version of Firebase was available. Please check the official site for the newer version under the Available libraries, Available Firebase JS SDKs (from the CDN).
config.js include the following code. Don’t forget to change the
firebaseConfig part to yours.
To create a new Product or Shop document in the Firebase database we’ll have two separate collections for each. This is how we’ll add the data to the database. Paste it to the
In the previously showed Camera plugin code, in the end we added the picture to the DOM. Now, (in case if it’s a new product) we’ll grab that picture and upload it to the Firebase Storage.
To display the uploaded data and listen to every change, we’ll use the Realtime Database.
onSnapshot()is listening to the result of the query. This creates a query snapshot. The snapshot handler will receive a new query snapshot every time the query results change (that is when a document is added, removed, or modified). After we read our data, adding it to the DOM to display it is left. We will create a template literal and add its content to the DOM. This process is continuing until the forEach reaches its end.
In the application we also implemented the modify aka update and remove functionalities. Those are not so hard to understand, and it wouldn’t add anything to the article to add another chunk of code here, therefore we will skip.
As a second option, in case if the Firebase is not initialized, the data will be saved to the Local Storage. In that case, the structure of the saving/editing/deleting is pretty similar, except we have to use different methods.
Since this post is already getting too long, and the main features of the app have been shown, we will only give you a small snippet of the methods we were using to add and manipulate data within the local storage. If you’re interested in more, check out the code.
localStorage.setItem(keyName, keyValue)To add a new element or modify one
localStorage.getItem(keyName, keyValue)To get an element
localStorage.removeItem(keyName, keyValue)To remove an element
Building the Application
To build the application for debugging or releasing purposes, we are going to use the Cloud IDE. You can quickly access the Cloud IDE Build page from the terminal by running the following command line from your project’s folder or if you’ve downloaded the full GitHub repo, then from that folder.
monaca remote build --browser
After the project has uploaded successfully to the cloud, a new browser tab will be open just as the picture shows below.
In this example, we will build a Debugger for our application in order to test it. Since it uses a custom plugin, we have to build it with a Custom Debugger to completely use its features.
- Select Android/iOS from the left panel.
- Choose “Build for Debugging” as the build type.
- As an option choose the “Custom Build Debugger”.
- Then click on the “Start Build” button.
It may take a few minutes for the project to build based on its size, your account subscription plan, and how many builds are in the queue before your project. Once the build is successful, you can install the package via QR code to your chosen device.
Now that we have our Custom Debugger Build installed on our device we can test our application. To develop and test synchronously, I would recommend using the Monaca CLI’s
debug command. Here you can find more details about it.
In this article, you have seen the main features of this sample stock management app by using JS & Framework7 with using Monaca with added plugins and 3rd parties like Firebase, Leaflet and Yahoo’s API. If you’ve read all along, congratulations, it was a long one. Still, a lot of other things haven’t been covered, so if you’re interested or just found some parts hard to understand in this article, feel free to check out the repo for the full code to study it on your own.