JavaScript Tutorial: My First JavaScript Mobile Application – Phonegap Build

JavaScript Tutorial: My First JavaScript Mobile Application – Phonegap Build

Lately, the world has been on hold, all activities suspended due to the COVID-19 pandemic. This has resulted in people staying at home in most countries of the world. If you are new here, my name is David Ozokoye, and I have been a freelance full-stack developer with about 2 years of experience, and proficiency in Frontend technologies such as HTML, CSS, and Bootstrap, for backend, python (Django and Flask).

While on lockdown, I decided to learn a new language (JavaScript). Although I started learning JavaScript (NodeJs) back in 2018, I stopped for some reason and focused on Python. Recently, I picked up where I left my learning track and I came up with a little project after a short while of learning.

The app I developed is called Issue Tracker, it is just a small application for now. I basically did it as part of the learning curve. The app is used to assign issues to team members, but currently, it uses local storage to store issues, so it is more like a one-man application. Prior to now, it has been a bit difficult keeping track of my day to day tasks, I tend to get confused because I fail to organize tasks based on priorities. With this app, you can assign an issue to yourself and specify the severity level. Severity level, in this case, has to do with the order of priority. Tasks with high severity get attended to first while those with low severity level, can be handled afterward.

JavaScript Development

The app was initially developed using HTML, CSS, and JavaScript for the backend. The JavaScript library used to store issues locally is chance.js. Bootstrap was used to style the web page for simplicity since the bulk of the work is done on the JavaScript Side. The JavaScript function generates a unique ID for each issue assigned, which can be used to track activities for team leads and Project managers. Although the database path has not been implemented for storing Issues. I uploaded the code for the app on my GitHub page, if anyone is interested in checking it out.

Deploying as an Android App Using Phonegap Build

After developing and testing the app locally on my system, I wanted a way to share it and deploy it into a platform available to most users. I found that I could compile my web components and deploy them as a mobile application using Adobe’s Phonegap Build Library. After reading the documentation, I was ready to deploy the app, so I designed an icon for the app and compiled all files required following the guidelines from their documentation. For this, you will need to create an account on the PhoneGap build website. In the future, I could do a walkthrough of how to deploy your website files as an android app using PhoneGap build, and even how to integrate google AdMob ads into your application and make some cool cash from it (lol). That’s the point of building anything if I am not wrong.

Testing the Application

 Prior to deploying the app, debugging the app was challenging, considering I am a beginner in JavaScript. But once that bridge was crossed, It was pretty much straight forward deploying using PhoneGap build, they have detailed documentation for deploying. Phonegap build is a platform for developing native mobile apps (iOS, Android and Windows

 

Future Works

Implementing a database for storing the issues globally, so anyone in a team can see the issues assigned to them from anywhere in the world. I intend to use Nodejs for the backend.
Creating a Team dashboard, so team leads and project managers can add their team members to their group available on their unique dashboard.
Include a tracking function to track issues ID, status, the person assigned, or issue name for effective team management.

Where to Download

The app is not currently in development, so it’s not yet hosted on Google play store, but if you’re interested in testing it out, I’ll put a link below to download the application.

Get app: 

Conclusion

Like I mentioned above, this is just a sample application for testing purposes, if you’re interested in getting the code used, you can find it on my GitHub profile through this link. I know from experience that the best way to learn is simply doing something, I used to watch tons of tutorials without necessarily practicing anything. Most of the time I rarely pick up much from the tutorial. If you’re just starting out I recommend you practice while you learn and also read the documentation for that specific language you want to learn. In a future post, I will be sharing the top 5 programming languages to learn in 2020. It will guide you on choosing the right language for Mastery