Ionic Framework – Geolocation iOS Store issues

WRITTEN BY GARETH DUNNE @DUNNEDEV

Geolocation

As I have recently published my Ionic app CoffeeTrail into the iOS store. I wanted to share with you some issues I experienced while trying to upload it.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

In total, the app was rejected twice due to lingering issues with my Ionic Native Geolocation plugin. These two issues were easily fixed although initially it wasn’t very obvious.

The first, was the lack of specificity when asking for the users location . A modal pops up asking for permission but I didn’t explain why I wanted to use their location. This goes against the iOS human interface guidelines which you can look at here.

I had to add two strings to my info.plist file. In order to do this, open up your iOS build generated from your Ionic project in Xcode.

Search for info.plist in your directory search panel:

 

And add these two strings with your custom location permissions message

  • NSLocationWhenInUseUsageDescription
  • NSLocationAlwaysUsageDescription

After I added these custom messages my error modal looked something like this:

This fixed this initial rejection.

The second issue caused me the most trouble. Apple informed me that there was a second modal showing after the user already accepted the first location permissions one.

As you can see from above, the modal was giving a uninformative output path as my app name, which Apple deemed unfit for a user to see, which is fair enough as its a bit of a eyesore for the user.

This was not a custom made modal so it was coming from a native plugin, turns out it was one of two reasons

  • My Ionic Native Geolocation plugin was outdated
  • The Geolocation plugin was not correctly put into my iOS build output.

When you have added a plugin to your projects config.xml file, it won’t necessarily build into your platform of choice when you run the build commands.

These are the steps I had to run to rectify this:

So now our Geolocation plugin is updated with the latest version and with a custom location usage description

Next we need to remove our iOS platform:

Then we need to save all our plugins:

Adding the iOS platform back in now will also add in all our saved plugins from Cordova:

To make sure you now have the correct plugins run the command:

And compare that list to the plugins in the your build output folder:

{project-name}/platforms/ios/{project-name}/Plugins

These were the two obstacles I had to overcome to get Coffeetrail in the iOS store. Feel free to try it out and give feedback. As I’ve mentioned already it was rejected twice. On my third submission there was an extra processing time so thats something to be aware of if you want to be extra careful when submitting after that. Took an extra 4 days to be looked at.

I feel after finally submitting it I’m ready to undertake a React Native application.

Keep posted!

Want a job in web development? Learn a framework.

WRITTEN BY GARETH DUNNE @DUNNEDEV

When browsing information about web development careers you might stumble upon junior or entry level developers asking about the correct way to get hired. Very frequently there will be advice given along the lines of:

  • Learn pure JavaScript.
  • Know the ins and outs of Vanilla JS.
  • Do not learn a framework until you know the intricacies of JavaScript.

And while I think all this advice is coming from a good place, its not practical.

This is somewhat of a controversial opinion when looking at online forums such a reddit webdev or reddit JavaScript. But lets take a step back and look at the facts here.

You are a junior developer with basic knowledge of JavaScript, you look at job postings online, what do you see?

Well, nearly every frontend position is looking for you to work with either Angular, React or Vue and no position is seeking someone proficient in vanilla JavaScript.

So if you were being practical, you should jump into one of these frameworks and learn how to use your basic JavaScript knowledge within the constraints of that technology. Doing this alone could increase your employability significantly.


Not Encouraged

But why is this considered a bad idea by the masses? Well it conflicts with the idea of what a good programmer should be about. The idea of what a web developer should know in order to give themselves the best chance possible to use deep knowledge that allows to debug and problem solve in the most efficient way possible.

But again, as much as I agree with this, its not practical for someone who has just entered the industry, is urgently seeking a junior position and who has possibly switched his/her career halfway through. This also applies someone who has just finished a bootcamp

Experts in the web development community have every right to demand high standards of programming, this is a highly skilled field that people devote massive amounts of time to and something they are truly passionate about it. But people entering the industry don’t have to brush up their JavaScript to the degree expected by most purists.

Why would someone in this position spend all this extra time going in depth in vanilla JavaScript when they can learn how a framework works and be able to code inside the context of this framework and land themselves a job as soon as possible.

You have to remember this isn’t someone who wants to adhere to the best coding practises currently available, at least, not yet in their career.

The most likely situation is that this person will come to terms with some of the key elements of JavaScript while working inside their chosen framework. From this point, he/she can then become proficient in the more in depth parts of the language.

Now let me stress, this is not ideal for the industry nor does it strengthen the quality of developers available to the workforce. But to deny that this isn’t the quickest surefire way to land a frontend entry position is foolish.

Abstraction

We can tie this back down to one of the most essential programming concepts, abstraction.

The latest of these in demand frontend frameworks give us a layer of abstraction to work within. This layer of abstraction is supposed to provide us with a new environment to work in, while hiding the previous complications behind the scenes.

This is exactly why a junior developer can begin learning inside the constraints of this framework, and improve their JavaScript while doing so.

Will they become an expert in JavaScript this way? No of course not, and this is the flipside of working in a abstracted environment. It hides the complexity that you could otherwise learn.

Another aspect that has to be considered  is how the latest frameworks are integrated with the latest in JavaScript practises.

Frameworks like Angular, React and Vue have standardized the use of the latest from ES6. This further adds to the argument, that you can easily jump into these frameworks and learn current and key fundamentals of Javascript.

Features like ES6 arrow functions:

Ternary operators

State Management in React

Anyone who uses these features will inadvertently broaden their knowledge of JavaScript and become more attractive to employers.

Recruiters

We also can’t ignore the dominance of external recruiters in the web development industry. I know from personal experience, as I’m sure many others  do, that these recruiters are hounding individuals with specific criteria ie, which framework do you know?

And while normally I’m the one complaining about the lack technical knowledge that a recruiter has, this is something that someone at entry level can take advantage of and be fast tracked to an interview.

Learn a framework, build a few small projects and you’ve already launched yourself into better position than you rightfully should be. You have to remember that the application of a language will be almost completely be inside the boundaries of the framework. Everyone will tell you that you can’t learn JavaScript this way but disregard these notions as if you are in the start of your career its only logical that you will learn as you go along.

A lot of the community will disregard this idea and I myself can see how it initially devalues the quality of junior developers but I like to be realistic and practical about these things.

Simply put, specialising in what people are looking for fast tracks you to a job and at the end of the day, landing that initial job can be the first step in developing your technical ability.

Technical prowess will come later, launching your career is paramount.

How to use Firebase to host your Web Application using a custom domain

WRITTEN BY GARETH DUNNE @DUNNEDEV

In comparison to a few years ago, there are a wide variety of ways to deploy a web application. Many will vouch for Heroku for prototyping and I tend to agree. Its a great service to deploy an app free of charge with the option to pay for premium features to scale up.

Another great option would be Github Pages which allows you to host a website or web application by deploying one of your repositories. It gives you a url to view your repository such as :
https://username.github.io.

Again, this is another great option for getting you application live.

The best option that I have been using at the moment is Firebase hosting. Its similar to the other options but allows you to stack extra services on top such as cloud functions. Heroku, of course, also lets you run similar server side functions and its backend and is a lot more flexible.

And although I might come back to compare all these providers the main thing to take away from these services for the purposes of this post, is that Firebase automatically provides SSL encryption. This makes it very easy to link it to a custom domain purchase from domain name sites. In my case, it was NameSilo, who I find dirt cheap without the shadiness of other low cost domain providers. Its reliable with a great albeit uninspired interface.

This is all taken from an experience I had when deploying my random beer finder web application.

This is an application that uses some nice animations from a frontend Coursetro tutorial in combination with RxJS Observables and requests to BreweryDB API.

Be sure to check it out here.

So lets deploy our web application and apply our custom purchased domain.

Setup Firebase

Full instructions from the Firebase documentation are listed here, however I’m just going to cover installing it via NPM.
Run the following command in your console window to install firebase tools globally:

Now, in the directory of your desired project, you now want to initiate hosting for Firebase:

From here you can dictate how you want you Firebase application to be configured.

Say yes to public directory and configuring as a single page app:

You should then create your project in the Firebase console here.

You project has now been initialized with Firebase. Once you are ready to deploy move onto this next section.

Deploying

When ready to deploy your Angular application to Firebase we want to build a production version of it.

Run the command:

You application will be built and the output is usually in the dist folder. You can now do a full firebase deploy with the command:

Or if you just want to deploy the hosting services

When finished your console will indicate what url your deployed application is being hosted.

In my case it was something along the lines of :

https://random-beer.firebaseapp.com

Custom Domain

So the final step in this process is to verify your purchased domain to Firebase. Firebase will also take in any other subdomains you might have and redirect it to your deployed Firebase app url.

We will need to navigate to the Firebase hosting console.

You will have to change the DNS records in order to indicate to Google that you own the domain name. We want to create a TXT record in our domain backend. This is made relatively simple in NameSilo and most other domain hosting interfaces will be quite similar.

Log in and navigate to the domain manager:

Select your desired domain and click the DNS Records option.

From here we want to add two TXT record with details from our Firebase console.

After about an hour Google was able to recognize these new records and establish that I was the owner of the domain. Google will then ask you add two A records with custom IP addresses that they will give you. From here we will do the exact same thing on your domain provider except adding two A records instead using the details from our Firebase console.

SEO

As you may be aware, a typically bundled and deployed JavaScript web app using a modern web frontend framework is not crawlable or index able by most search engine bots.  To solve, it can be a complicated beast, especially for Angular applications.

The most common approach in order to make your Angular app SEO friendly is to allow your server to generate your HTML markup dynamically. In some cases, this can be easier said than done and was mostly done with Angular Universal.

However, I found it needlessly cumbersome and I think I have found a great alternative specifically for Firebase hosted applications. The folks at Angular Firebase have come up with a fantastic tutorial for this using Rendertron. An external service that allows your site to serve dynamic SEO friendly markup only to search bots while serving your users the standard JavaScript version.

I really think this is the future of SEO for web application so I highly reccomend you watch this video.

Conclusion

Its proven relatively pain free process to transfer a domain name over to our hosted web application. This seamless process is one of the reasons I’m looking at Firebase Hosting more longer term. Apart from just hosting, there are many other added features such as cloud functions which are particulary useful for deploying server side code alongside your application. I hope to cover that soon.

Hybrid Desktop Applications – Another part of the JavaScript ecosystem?

WRITTEN BY GARETH DUNNE @DUNNEDEV

JavaScript hybrid mobile applications having taken the spotlight for the last few years with the idea of writing code once and using it among many platforms.

These hybrid application frameworks such as Ionic, use HTML, CSS and JavaScript to build versatile WebView mobile applications. This exact same stack is also available to be used to build desktop applications.

Specifically, the platform Electron is the leading framework for building hybrid desktop applications in this fashion.

Check out this Git here and a great introduction here.

Interestingly, this is yet another way for JavaScript developers to utilise their own array of tools to avoid native platform specific desktop programming languages such as C# and Java and to instead use Angular to create desktop based application that can be deployed onto OSX, Windows and Linux.

Popularity

First of all, you might be wondering if anyone is actually using technologies like Electron? You might be surprised, when looking at some well established products and applications that are using this hybrid tech stack I came across the following notable players:

Personally, I use at least two of these on a daily basis. Its quite impressive that some of these big names have already adapted Electron so quickly.

Most notably, however, is that Visual Studio Code (my favourite code editor to use) was built in Electron. This a text editor that is on par with its IDE counterparts in terms of functionality.

It is reassuring to know that there are already well-established applications out there but what advantages could Electron have provided them?

Productivity

To be honest, this is always going to be where a hybrid framework shines. In terms of managing resources, a dev team with the same skillset (HTMLJavaScript, Angular, CSS) can be spread out between web applications and desktop applications that can written once and deployed to multiple operating systems.

Cross platform sharing of code is always going to help a developer or teams productivity. Electron lowers barriers to entry for desktop development by providing these familiar tools for web developers. Their familiarity with these tools will in turn increase their work output and productivity.

Say what you like about how it fares against its native competitors, however, you must admit any company will be intrigued by that productivity boost alone.

For some companies this is enough of a compelling case to use it, despite some performance and stability trade offs.

Performance

This is quite possibly the most controversial aspect when Electron is compared to native desktop programming languages.

Some articles such as this would really try and put the nail in the coffin of frameworks like Electron before its given its fair share as an alternate way to create performant desktop applications.

And while the title of the article is offbeat and bit outlandish there is certainly a very good argument to say that hybrid desktop applications will never compare to its native counterparts due to things like having to use a web browser in a desktop app which puts a strain on resources as it is.

However, why exactly do hybrid applications have to match native performance? As memory allocation in our hardware is consistently getting better I see no problem creating apps in Electron. It can be a lot more efficient then natively developing every single possible version of an application that needs to be on OSx, Mac and Linux.

Again, I want to use Visual Studio Code as a focal point here. It of course is built using Electron and makes a strong case for being a tight competitor to major code editors like Atom and Sublime.

In terms of functionality it is as robust as major text editors such as Atom and Sublime, with seamless Git integration and an extension package window to boot.

Getting Started

I’m no expert on Electron and hybrid desktop applications in general. So this post just sums up what I’ve noticed so far. It really seems very promising and yet another way to hone your JavaScript skills and apply them to a new area of app production.

How it compares to natively developed desktop apps should only hold huge weight at a more enterprise level and even with this in mind, it doesn’t seem to stop some very big names for utilising it for major enterprise apps.

The most important thing to take away from this as a frontend dev is to know that you have yet another big section of tech product development that you can move into. Making us in more versatile in what we can achieve.

Ultimately, I suppose you have to ask yourself when will this JavaScript growth start to plateau? How many sections of development can JavaScript be adapted to? So many years ago it was boxed off as just a web-focused technology in conjunction with HTML and CSS, but its meteoric rise in other areas is now undeniable.

It’s unclear whats going to happen next but it is on a upward spiral so the future looks very promising. It may not be for the native purists because a lot of web based programming goes against what makes native languages for desktop great.

For such a promising framework such as Electron I haven’t found too many learning resources for it. Here are some of the best I’ve found so far.

I hope to cover more of this framework in the future.

Creating a blog and building a brand as a software developer.

WRITTEN BY GARETH DUNNE @JSDIARIES

Software Developer’s Identity

In order to build a reputation as a software developer consistent blog posts are essential to build an identity. This is the main reason I have started jsdiaries.

Although I have to admit, this is something that I originally couldn’t comprehend. How will building a blog boost my career in software development?  Well providing useful information not only benefits readers of your blog but also gives the blogger the opportunity to learn by teaching.  The more content researched the more likely it is that you have learned more and built a stronger brand in the process.

This is my intention with this blog – to provide consistent content on the latest technologies focused on but not limited to JavaScript frontend libraries. I hope to bring the reader’s attention to some useful tools and news along the way and to also publish development updates from my own personal projects.

This plan I have created for jsdiaries came from following John Somez’s How to Create a Blog to Boost Your Career course.

His email course provides the stepping stones for a developer to create a blog like this. His course takes place over 3 weeks and an email with information on how to create a blog for software development is sent every Monday and Thursday. If you want to sign up just click below.

How to Create a Blog That Boosts Your Career

The emails are very direct and concise on how to create a platform like this to build a brand and identity. The most impressive byproduct of this course is that software developers that are in the exact same position with their blog can network together and support the growth of each other. John has enabled this by featuring all the bloggers that finish his email course on his website Simple Programmer linked below.

Home

Its a simple but effective way of boosting his own reputation while simultaneously helping to grow the careers of other developers.

I also hope to bring on guest bloggers to collaborate and create guest posts. I would hope this would broaden the perspective on some topics and get some more in depth technical and practical posts on latest JS technologies. I hope to feature Angular 2 and Vue.js in my upcoming content. Although this is a Javascript focused blog sometimes a JS library will be combined and featured with other languages such as C#.  This is to create a broader focus on how some JS libraries are used with some other Object Oriented languages.  New content will be featured every Sunday/Monday so be sure to check it out and comment and the blog will be sure to expand with features such as email subscriptions.