Creating a Stock Management application with Monaca
In this tutorial, we will show you how to build a Stock Management hybrid application by using JavaScript and Framework7 with Monaca. The purpose of this application is to demonstrate how to combine these technologies with other elements like Cordova plugins, Leaflet JS, Firebase database and Yahoo API. If you haven’t heard of or used any of the above-listed technologies, no worries — I will link the necessary information about them here.
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.
Cordova Plugins - Usually, you need native code (Java for Android, Objective-C for iOS, etc.) to access native device functions like Camera, FileSystem, Device Storage, etc. However, you can access these native functions using JavaScript with Cordova. Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Monaca uses Cordova to enable your hybrid apps to access native device functions from JavaScript.
Leaflet - is the leading open-source JavaScript library for mobile-friendly interactive maps. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code.
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.
Prerequisites
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.
Install Node.js
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 monacaFor 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.
Development
HTML
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.
CCS
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.
Cordova Plugins
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.
Camera
The openFilePicker is very similar to the openCamera function. The only difference is the sourceType.
Barcode
Advanced HTTP
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.
Geolocation
In the onSuccess callback, we’ll create a marker on the map according to the current position coordinates by using the Leaflet library.
Leaflet
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 leafletNow, we are going to initialize and add the maps to the new-shop.html and edit-shop.html pages.
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.
Yahoo API
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.
Storing Data
Firebase
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).
At the 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 database.js.
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.
The 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.
Local Storage
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 onelocalStorage.getItem(keyName, keyValue)To get an elementlocalStorage.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 --browserAfter 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.
End Note
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.
Resources
https://monaca.io/
https://docs.monaca.io/en/
https://cordova.apache.org/
https://framework7.io/
https://leafletjs.com/
https://developer.yahoo.co.jp/webapi/shopping/
https://firebase.google.com/docs/database
https://firebase.google.com/docs/storage
