In a previous tutorial, I covered how we would implement Angular routing in an Ionic 4.x application. When Ionic 4 is released, there will be more of a focus on using the baked in Angular routing, rather than Ionic’s own push/pop style routing (this style of navigation will still be available, though). In this tutorial, […]
Using the Capacitor Filesystem API to Store Photos
When we take a photo on an iOS device, the resulting file is stored inside of a temporary folder called tmp. If we use the Camera API to retrieve a photo, the resulting URI will look like this: If we are interested in long-term storage then this isn’t the best solution. The way you approach […]
Building a PWA with Stencil: Routing and Forms
Part 1: An Introduction to Stencil Part 2: Project Structure and Syntax Part 3: Rendering Layouts Part 4: Routing and Forms (this tutorial) Throughout this series, we have been building a Progressive Web Application with Ionic and Stencil. We have covered the basics of Stencil and we have started to build out an application with […]
Building a PWA with Stencil: Rendering Layouts
Part 1: An Introduction to Stencil Part 2: Project Structure and Syntax Part 3: Rendering Layout (this tutorial) Part 4: Routing and Forms In Part 3 of this series on building a Progressive Web Application with Ionic and Stencil, we will be finally be getting into the practical side of things. We will generate a […]
Building a PWA with Stencil: Project Structure and Syntax
Part 1: An Introduction to Stencil Part 2: Project Structure and Syntax (this tutorial) Part 3: Rendering Layouts Part 4: Routing and Forms This article is Part 2 in a new tutorial series on building a Progressive Web Application using Stencil and the new Ionic PWA Toolkit. In the first tutorial, we focused on discussing […]
Building a PWA with Stencil: An Introduction to Stencil
Part 1: An Introduction to Stencil (this tutorial) Part 2: Project Structure and Syntax Part 3: Rendering Layouts Part 4: Routing and Forms The end result of this article series is going to be Progressive Web Application built with the Stencil web component compiler. However, I think we need to talk about a few things […]
Learning Vue for Ionic/Angular Developers – Part 5
Learning Vue for Ionic/Angular Developers – Part 1: Vue Syntax vs Angular Syntax Learning Vue for Ionic/Angular Developers – Part 2: Navigation Learning Vue for Ionic/Angular Developers – Part 3: Services/Providers and HTTP Requests Learning Vue for Ionic/Angular Developers – Part 4: Storing Data with Local Storage, IndexedDB, WebSQL, and SQLite Learning Vue for Ionic/Angular […]
Learning Vue for Ionic/Angular Developers – Part 3
Learning Vue for Ionic/Angular Developers – Part 1: Vue Syntax vs Angular Syntax Learning Vue for Ionic/Angular Developers – Part 2: Navigation Learning Vue for Ionic/Angular Developers – Part 3: Services/Providers and HTTP Requests (this tutorial) Learning Vue for Ionic/Angular Developers – Part 4: Storing Data with Local Storage, IndexedDB, WebSQL, and SQLite Learning Vue […]
Integrating an Ionic Application with a NodeJS Backend
Developing on the client side with Ionic is a pleasure. It’s based on the web tech we know and love, and it runs straight in the browser so we can dive straight into the development in minutes. You can only get so far developing purely on the front-end/client-side, though. If your application needs to provide […]
Creating a Facebook Style Reaction Button in Ionic
Near the start of 2016, Facebook released “Reactions” which gave users a way to express themselves more deeply than just with a single “Like”. Rather than adding it a bunch of new buttons for the reactions, Facebook stayed with a single “Like” button that would then display more options when the button was held down: […]
Launching a Progressive Web App (PWA) with Ionic
About a week ago I launched the early access for Elite Ionic. This is my latest course for Ionic, and it is focused on teaching advanced Ionic concepts. Typically, when I release any paid content it is in the form of an eBook, but this time I wanted to do something a little different. Elite […]
Integrating a Backend with Ionic
I often see questions like “How do I use PHP/MySQL in Ionic?” or “Does Ionic work with X backend?” – these are reasonable questions, but it indicates a big misconception as to how integrating a backend with Ionic works. The technology that is used on the backend is completely irrelevant, as the backend and the […]
Uploading a Production PWA with Ionic
In a recent tutorial, I covered how to create a Progressive Web application with Ionic using the “bare minimum” steps. PWAs are an in-depth topic, but that tutorial covers the minimum steps required to create something that would be considered a PWA. In this video tutorial, I wanted to cover the steps you need to […]
The Bare Necessities: Progressive Web Apps in Ionic
You’ve probably heard of Progressive Web Applications by now, but if you haven’t then you may want to give this a read. In short, they are all about giving applications made available through the web a more native-like experience. This means at a minimum that they should work offline, and can be installed onto a […]
What Does Lazy Loading Do in Ionic?
Lazy loading has been around for a while now, and it’s likely that you’ve had at least some experience with it if you have been building Ionic applications recently (the Ionic CLI page generator uses lazy loading by default). If you aren’t familiar with lazy loading, then you might be interested in checking out this […]
When to Use Providers / Services / Injectables in Ionic
A concept you will quickly come to terms with in Ionic is the concept of a page. A page is just a normal Angular component that we use to display a particular page in our application. We might have a page for displaying a list of users, and so we have a component called UserListPage […]
Designing a Landing Page with a Video Background in Ionic
The initial impression of your application on a user comes from the application’s icon, the splash screen, and then the initial page of the application. Much like judging a book by its cover, by the time the user reaches the landing page for your application they will likely have already formed some strong opinions about […]
Debugging Ionic Applications When Deployed to an iOS Device
One of the most useful things about Ionic is that since the framework is web based, we can easily develop and test through the browser. However, if you do intend to build your Ionic application as a native iOS application using Cordova, you will need to test on a real device at some point. In […]
Creating a Pinterest Layout in Ionic
Ionic provides a useful Grid component that allows you to organise a layout using rows and columns. By default, if the columns contained within a row go beyond the width of the screen, they will flow automatically onto a new row. This makes it really easy to create a grid layout, like an image gallery, […]
Integrating Google AdMob Advertisements in Ionic
Advertisements, although not always the best way to monetise a venture, are one of the easiest ways to potentially earn some money from an application or website. Google’s advertisement platform allows you to easily implement advertisements without having to secure deals with advertisers yourself – you display Google’s ads and you get a percentage of […]
Using the Splash Screen Plugin with Ionic
The splash screen is the image that displays for a few seconds when your application first starts up on iOS and Android. Usually, we would be happy with the default behaviour (the splash screen will display until your application has finished loading, and then automatically disappear) but that’s not always the case. In this video […]
Asynchronous vs Synchronous: Understanding the Difference
Understanding the difference between asynchronous and synchronous code, as well as its implications, is an important topic and I have covered it a couple of times previously. Recently, I wrote an article that discussed a common asynchronous situation in Ionic that can lead to confusion. Click here to watch the video on YouTube I thought […]
Dealing with Asynchronous Code in Ionic
One of the most common things that I see people get tripped up on when learning Ionic is the difference between synchronous and asynchronous tasks and how to appropriately handle results from an asynchronous task. People may often be led to believe that something in their code or the Ionic framework is broken because they […]
Link to Pages via URLs with Deep Linking in Ionic
Primarily, Ionic is a framework for building mobile applications with web tech that look, feel, and behave like “traditional” native applications. Naturally, it makes sense for the architecture of the framework to reflect that of the mobile application world – one that doesn’t rely on the use of URLs for navigation. Unlike the Angular framework […]