DEV Community: Thomas George | 1st Phorm

Portfolio Review

Thomas George | 1st Phorm — Fri, 17 Jul 2020 02:15:47 +0000

Hey everyone! My name is Thomas and I am a Mobile Applications Developer working with Ionic/Angular for 1st Phorm. Over the past few years I have been slowing tweaking and adding items to my portfolio and I was wondering what y'all think and if there's anything I should add/change? I want to make this a very interactive, and in-depth portfolio (and I also love software Easter Eggs so there are a few in there). Thanks for any constructive critism.

You can find my portfolio below:

http://thethomasgeorge.com

-Thomas

Adding Badge Notifications with Ionic 5 and Angular

Thomas George | 1st Phorm — Fri, 19 Jun 2020 03:49:29 +0000

So you have an app that you’ve been working on for a while, and you can picture the perfect item to add next. A way for people who use your app to know when they have something that needs their attention.

Recently, I’ve had the same thought and found a few issues with implementing it in an Ionic application successfully. So here i’ll go through adding it and possible issues you might have with making it build and successfully run.

Getting Started

The only items you will need to get started is your project you wish to add Badge Notifications to, (obviously) a working computer, and internet connection.

Adding the code

The last time I checked the Ionic documentation had three different pages all talking about different ways to implement Badge Notifications. In these pages, there was only one that worked for our specific goal in mind, the second was speaking about adding Badge Notification Icons to your project (on tabs or columns) and the last was an outdated version of what we were trying to do that only worked on Ionic 3.

If you’re using Cordova:

ionic cordova plugin add cordova-plugin-badgenpm 
install @ionic-native/badge

If you’re using Capacitor:

npm install cordova-plugin-badgenpm 
install @ionic-native/badge
ionic cap sync

Next, we will be adding the code required to actually make it work in your project.

Starting out, open the page you would like to add the Badge Notification to. Once you have opened the file you would like to use it on, add the following to the import section of your file.

import { Badge } from '@ionic-native/badge/ngx';

In the Constructor, add private badge: Badge to the list.
There are four main functions used for Badge manipulation. The first being this.badge.set() which takes in one argument of type integer to set the badge count to. For example:

public notifyUser() {
   if(thisUser.notifications.value >== 0){
      this.badge.set(this.notifications.value);
   }
}

The next function used for Badge manipulation is this.badge.increase() which takes in one argument of type integer to add to the current badge count.

public updateBadge() {
   if(SOMETHING_HAS_CHANGED) {
      this.badge.increase(NUMBER_TO_ADD_TO_CURRENT);
   }
}

There is another function that does the opposite of the previous function we spoke about and that is this.badge.decrease() which also takes in one argument of type integer. However, instead of incrementing the current badge count, it decrements. For example, if you would like to keep track of if a user has view some notifications but not all, you can simply:

public updateBadge(countToDecrement) {
      this.badge.decrease(countToDecrement);
}

The last and final main function that the Badge class gives us is this.badge.clear() which clears the current badge count and removes it from displaying on the app icon. An example of how this would work is:

public updateBadge(currentBadgeCount) {
   if(currentBadgeCount === 0) {
      this.badge.clear();
   }
}

Issues I’ve Faced and Their Solutions

While adding this to my very own project, I came into some issues. Whether they were from me just not knowing the common practices of adding a new feature to an Ionic App, or if it was truly an issue. Either way, I have added them below to make sure y’all don’t have to go through them and spend hours traversing the internet in search for fixes.

ERROR Error: StaticInjectorError(AppModule)[Badge]: 
  StaticInjectorError(Platform: core)[Badge]: 
    NullInjectorError: No provider for Badge!

This error will show in the Console Window after you run ionic serve and nothing displays on the page that loads. To fix this issue, go into your app.module.ts file and in the ‘Providers’ section, and add Badge into the list. The final thing to do to fix this issue is add the following line at the top where the import list is:

import { Badge } from '@ionic-native/badge/ngx';

Once you add those two things, re-build and run your project and it should fix your issue.

If you would like to view my previously written articles or connect with me, visit my website by clicking here!

Personalities & Perspectives of UI & UX Design for Websites

Thomas George | 1st Phorm — Fri, 19 Jun 2020 03:42:50 +0000

Take a walk through your local town and you will see people with a variety of different shapes, sizes, personalities, and perspectives. Each with their own goals, dreams, thoughts, and expressions of the world. What if I told you that websites should have and need a particular personality of their own? For example, when you visit Facebook, why is the layout structured in that specific way? Why are the icons THAT type of icon? Why are there certain tools or items integrated into it? It has to deal with how the user of the site thinks and perceives the world around them.

When you use an Android Phone, what type of person do you believe it is centered around? What about an iPhone? The Android setup has more effort put into the utilitarian side of the market. So you would usually picture someone who loves to know what’s all running, and the nitty-gritty of the whole phones’ ecosystem. Whereas the iPhone focuses majorly keeping items neat and visually appealing. When you picture the type of person that would enjoy using iPhones, you picture someone who enjoys simplicity and organization without having to worry about all the settings and extra options.

Today I will be discussing a few ways that add a personality to your projects and really make the user feel connected to your application.

Brand Colors

When it comes to choosing which colors you will use for your application, first you must think about how you would like your user to feel when they traverse it. For example, what do you think that Facebook wants the users who visit their site to feel when they visit it? If you recall, Facebook’s colors are dark blue, light blue, and white. Using the figure below, we can see that the color blue gives a calming sense to the person. If we look at another widely used software like Evernote, we see that they focused their main color around shades of green. Green expresses refreshments and signifies growth.

Images

Whether a site is meant to be formal or informal can all come down to one thing, and that’s what type of imagery the developer or company has displayed throughout their site. Let me give an example, look at the next couple images below and before going to the next paragraph write down what type of website comes to mind or the

When you viewed the two images above did your mind picture a large company with hundreds of employees that are very formal and dedicated with what they work on? Or what about a law firm that handles many of the cities biggest clients and gets them out of trouble (to be honest, I might just be watching too much of Suits…).

Let us take a look at another example. Again, before going on to the next paragraph, think about what comes to mind when viewing these images.

When viewing these images did you picture a very personal vlog of a person traveling around the world exploring new places and seeing what the world has to offer? Do you see what I mean? Based on what type of imagery you use, determines what type of emotions the visitors of your site get.

Personal Touches

When users visit your website and see that you added items that — although they are not required for the site to run — are added to help them as a user, they have a higher chance of becoming brand loyal. One way you can add a personal touch to your companies website or application is by adding Easter Eggs. What are Easter Eggs you may ask? They’re hidden references, clues to other games, movies, or software that are scattered throughout a website where only a number of people usually find them or know about them. If you would like to read more about Easter Eggs, view my article “🎉 Everybody Loves Easter Eggs”.

Click Here to View This Easter Egg

References:
DIGITAL MARKETING AND GUERRILLA MARKETING: HUGE OPPORTUNITIES FOR START-UP COMPANIES — Scientific Figure on ResearchGate. Available from: https://www.researchgate.net/figure/Colors-and-their-meanings_fig1_320489998 [accessed 22 May, 2020]

The Different Types of Ionic 5 Starter Template

Thomas George | 1st Phorm — Fri, 19 Jun 2020 03:37:40 +0000

For the developers in the room who have already created a few applications using Ionic, this article will be boring and dull as attending a 2-hour Zoom conference call. I would suggest for the more advanced people to get ahead to the next article.
For the developers in the room that are wanting a quick introduction into the pages of Ionic, how the look, and what they come with without actually having to install, open, and run each of them separately, this is the article for you!

What is Ionic?

So before we get to the actual pages in Ionic normally used, first we must know what exactly is Ionic. Ionic is a framework that “makes it easy to build high-performance mobile and Progressive Web Apps (or PWAs) that look and feel beautiful on any platform or device” (“What is Ionic.”). It pairs with any commonly used Javascript (JS) or JS frameworks, such as AngularJS, ReactJS, and VueJS to make it simple and easy to create applications for Android, iPhone, and Windows mobile devices.

What are Progressive Web Apps?

If you’re a beginner in all this, you also might be thinking to yourself “What are Progressive Web Apps?” Progressive Web Apps (PWAs) are web applications that have been designed so that they can take the best of web apps and mobile (native) apps. In the past, all apps used to be built natively, which means it is coded in a specific programming language for that device. In the recent few years, we have seen a rise is PWAs across both Google Play and the Apple App Store. Two well-known examples of PWAs are Slack and Spotify.

Blank Template

I know this may be difficult to grasp, but running the below command creates… you guessed it… a blank template. Of course, where it has that’s where you place the name of your project.

ionic start <YOUR_APP_NAME> blank
ionic serve --lab

Tabs Template

This template creates a starter Ionic app that has 3 different tabs at the bottom of the screen for a user to click and be able to switch between pages.

ionic start <YOUR_APP_NAME> tabs
ionic serve --lab

Super Template

The Super Template includes everything but the kitchen sink (although I believe they’re adding that in the next update 🤔). I would not suggest starting with this one as your first dive into Ionic because it comes PACKED.

ionic start <YOUR_APP_NAME> super
ionic serve --lab

Side-Menu Template

In the Side-Menu Template, you see just how having a sidebar would work inside an Ionic application. The cool part of this template is that it will still work even outside the mobile view in Desktop Mode! The only thing that will change is that the side-menu will become static and you will always be able to view the menu.

ionic start <YOUR_APP_NAME> sidemenu
ionic serve --lab

Conference Template

I truly love what the Ionic Team makes and they’re keen eye for detail when it comes to documentation and examples. They have set the bar high for future frameworks and software applications. The conference app shows just how much care and detail they put into everything by giving the developer a running example of a mobile application that might possibly be used for a conference.

ionic start <YOUR_APP_NAME> conference
ionic serve --lab

“My First App” Template

The “My First App” template provides a working mobile application that shows you many different elements that an Ionic application can come with. As well as how to set up each element!

ionic start <YOUR_APP_NAME> my-first-app
ionic serve --lab

— References
Ionic Framework. “What Is Ionic.” Ionic Framework, ionicframework.com/what-is-ionic.

If you would like to view my previously written articles or connect with me, visit my website by clicking here!

Here’s A List of Ideas to Get Started Learning Ionic 5!

Thomas George | 1st Phorm — Thu, 18 Jun 2020 18:48:00 +0000

We’ve all been there… Learning a new programming language (or even your first programming language) and you have all these ideas as to what you will make once you understand that language. Then that time comes along and you have completely forgotten all those great ideas that you thought about when you first began learning.

I’ve been there PLENTY of times, probably too many for me to count; however, when I was learning Ionic/Angular, I finally fixed that problem by actually writing them down!
Below I have added a list of ideas not just for me to build to improve my knowledge in Ionic but for you as well! If you have any more ideas I can add to this list, DM me on twitter by clicking here!

Note Taking App

I don’t know about you, but I’m the type of person that without a to-do list, I’m all over the place and never actually know what I need to do. Which, over the years means I’ve stacked up MANY notebooks of to-do lists.
To kick this habit, I’ve tried using Google Keep, Making lists on an electronic notepad, and even Evernote. But each of them either does not everything I need in a task list or gets lost in all the other lists.

One way to solve this is by creating your OWN app. In my own example, I would keep the Notebook feature of Evernote, but add sticky notes at the top of the notebook that stays in the specific notebook that you create it in. I would even add a way for people to be able to share specific pages of a notebook and even add in a feature for task time estimations and completion statuses.

Pinterest App

This idea combines skills from many different places and brings them together into one main cool idea. For this to work, you need to combine the HTML, CSS specific styling to capture the masonry layout that catches anybody's eye when visiting Pinterest, the back-end service to send the app actual “Pins” to list inside the app, and Ionic to display it in a mobile-friendly fashion. Bonus points if you integrate Electron into it after you're done to make it able to be run from the desktop!

Netflix App

I’m pretty sure everyone reading this has at least binge-watched a show or two in their lifetime. If you haven't, you should try. It’d be a lot cooler if you did.

If you want to make the layout a lot different than what the basic Netflix app looks like, I would suggest searching “Netflix re-design” on Pinterest or Behance for some great ideas!

Tip Calculator App

We’ve all been there. We go out to eat with friends and everyone decides to pitch in for the tip. But it takes time to figure out what percentage of each persons’ meal cost relative to the total bill amount.
This would be another great opportunity to improve your skill in Ionic and any framework you choose to use with it (such as Angular, React, or Vue).
Local Tourist App

Popular App Re-design

We all have our own specific apps we like to use in our free time, and I challenge you to take your favorite app and see if you can re-design with possibly your own twist or additions!
If you would like to view my previously written articles or connect with me, visit my website by clicking here!