Running Custom Native iOS Code in Ionic with Capacitor

Running Custom Native iOS Code in Ionic with Capacitor

One of the limiting factors of the hybrid application approach is the reliance on a mostly community driven plugin ecosystem to access native functionality with Cordova. Most of the time you can easily find a Cordova plugin that provides the functionality you want. However, sometimes for more niche requirements you may struggle to find an existing plugin that does what you need, or perhaps you can find one but it is no longer maintained. If you don’t know how to take matters… continue reading.

Accessing and Adding Styles to the Host Element in Stencil

Accessing and Adding Styles to the Host Element in Stencil

In the previous tutorial , we rebuilt a component that was originally designed with Angular. However, instead of using Angular to build it we used Stencil instead to create a generic web component that could work anywhere. Since we were no longer using a framework like Angular, we had to make a couple of changes to the component, but it still ended up functioning mostly the same. One feature we did leave out is the animated bar that indicates how long the flash message… continue reading.

Using Stencil to Create a Custom Web Component with a Public API Method

Using Stencil to Create a Custom Web Component with a Public API Method

Last week, we built a flash message component with Angular . The purpose of this component was to allow for a way to easily make a one-line call from anywhere in the application to display a flash message like this: I think it is interesting to then consider what this same component might look like, and how we might use it, if we were to build it with Stencil as a web component rather than as an Angular component. These kinds of direct comparisons help to really… continue reading.

Improving the UI/UX of an Ionic Component

Improving the UI/UX of an Ionic Component

In this tutorial, we are going to improve upon the flash message service that we created in the last tutorial . I offered some suggestions for improving the service at the end of that tutorial which included: Allowing for different messages styles (success, danger, warning, etc.) Displaying a bar to indicate how long the message will be displayed Adding an indicator to communicate that the message can be closed by being tapped We will be adding all of these features to the… continue reading.

Creating a Flash Message Service in Ionic

Creating a Flash Message Service in Ionic

You will often run into circumstances in your application where you want to send some kind of alert to the user. You might want to let them know that they have lost their Internet connection, or that a post failed to upload, or that a photo has finished successfully uploading. In terms of the built-in Ionic components, you could use the to fulfill this role. However, it does require a little work to set up the alert, and you may not always want to use that style of overlay… continue reading.

Debugging CSS in Ionic: Tips & Tricks

Debugging CSS in Ionic: Tips & Tricks

The browser debugging tools are endlessly useful for helping to build your Ionic applications, and debug any issues you come across. In this article, I am going to discuss a few of the tools and techniques I use to help debug CSS issues in my Ionic application. As well as using these tools to help debug, I also often use the browser debugging tools to help design my application as well, as I can quickly see the effect that changes would have. This isn’t going to be a super… continue reading.

Building a PWA with Stencil: Storage and Services

Building a PWA with Stencil: Storage and Services

Over the past couple of weeks, we have been working our way through building a Progressive Web Application (PWA) with Ionic web components and Stencil. We have been building a clone of the cryptoPWA application that I built a little while ago using Ionic/Angular. We have mostly finished the main parts of the application, the biggest feature that we have remaining to complete is the ability to save added holdings and fetch the current price for those holdings. In this… continue reading.

An Early Look at Capacitor (A New Native Bridge for Web Apps)

An Early Look at Capacitor (A New Native Bridge for Web Apps)

A short while ago, the Ionic team announced that they were working on a project called “Avocado” which later took on its official moniker of Capacitor . In this article, I want to introduce you to Capacitor and what it will do. I will get into the specifics soon (and we will build an example as well), but for now, it is easiest to think of Capacitor as the Ionic team’s own version of Cordova . Capacitor is not only for Ionic applications. All you need to do to make… continue reading.

Building a PWA with Stencil: Routing and Forms

Building a PWA with Stencil: Routing and Forms

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 it, and so far it looks like this: We just have a single page that has a layout created using Ionic web components. In this tutorial, we are going to add an additional page and set up routing so that the user can navigate to it. We will discuss we can handle navigation using Stencil… continue reading.

Building a PWA with Stencil: Rendering Layouts

Building a PWA with Stencil: Rendering Layouts

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 new application using the Ionic PWA Toolkit , and we will focus on creating the basic layout for our application. The application that we will be building is going to be a clone of the cryptoPWA application that I created a few weeks ago as a PWA using Ionic/Angular. This was also a multi-part… continue reading.

Building a PWA with Stencil: Project Structure and Syntax

Building a PWA with Stencil: Project Structure and Syntax

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 what exactly Stencil is and how it fits into the Ionic ecosystem: In this tutorial, we are going to start getting a little more practical and examine the structure and syntax of Stencil projects. As I mentioned in the last article, I am introducing Stencil in the context of developers who… continue reading.

Building a PWA with Stencil: An Introduction to Stencil

Building a PWA with Stencil: An Introduction to Stencil

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 before we get there. Given a lot of the recent developments, I want to tread carefully in explaining everything, because it will be very easy to become lost in A Sea of Frameworks and Acronyms (surely, George R. R. Martin’s next bestseller). This tutorial series is targeted at people who are… continue reading.

Replicating a Cloudant Database to CouchDB

Replicating a Cloudant Database to CouchDB

Last week, I wrote a tutorial that walked through how to set up a CouchDB database on a self-hosted Ubuntu server . I talked about some of the benefits of going for a self-hosted approach over using a service like Cloudant . One of the big benefits of the CouchDB protocol is how portable it is. With a lot of backend solutions, it can be extremely hard to move data from one place to another. With CouchDB, we can easily and almost instantly replicate the data in the database… continue reading.

Adding CAPTCHA to Ionic with NodeJS Middleware

Adding CAPTCHA to Ionic with NodeJS Middleware

When I built the Elite Ionic course, I built it as a PWA using Ionic . Anybody who signs up for the course can log in to the application and browse through the various modules. When people create accounts, they need passwords, and when passwords are involved they will inevitably be forgotten at some point. For convenience, I added a public-facing “Forgot Password” feature to the course application that would send a password reset email to the registered user’s email… continue reading.

Creating a CouchDB Database on an Ubuntu Server (Digital Ocean)

Creating a CouchDB Database on an Ubuntu Server (Digital Ocean)

One of the cool things about CouchDB is how portable it is. It can run just about anywhere and interact with other CouchDB style databases anywhere. Any database that speaks the CouchDB Replication Protocol will be able to interact with any other database that does the same. This is why we can use libraries like PouchDB with our mobile applications to store data locally, that can then sync to a CouchDB database hosted on a server somewhere, or even to a DBaaS (Database… continue reading.

Learning Vue for Ionic/Angular Developers – Part 5

Learning Vue for Ionic/Angular Developers – Part 5

Over the last four tutorials, we have covered most of the basics you need to know in order to build Ionic applications on top of the VueJS framework. One big step we have remaining is to get the Ionic/Vue applications that we build running on iOS and Android devices. This is easy to do in the Ionic/Angular environment because the Ionic CLI handles integrating with Cordova for us. However, when using Ionic/Vue we will need to do some extra configuration ourselves. In this… continue reading.

Adding ES6/TypeScript Support to a NodeJS Server

Adding ES6/TypeScript Support to a NodeJS Server

In past tutorials, we have covered setting up a basic Node/Express server and even integrating a Node server with Ionic . Up until this point, we have just been using the standard ES5 JavaScript syntax when building the server. If you are used to using Ionic, and many readers of this blog would be, then you may find using ES5 syntax a bit awkward. When we build Ionic applications we are able to use the ES6/TypeScript syntax, which provides a range of useful new JavaScript… continue reading.

Building a Time Locked Advent Calendar in Ionic

Building a Time Locked Advent Calendar in Ionic

As a kid, advent calendars were one of my favourite Christmas traditions. There was something special about ripping open that perforated cardboard each day and eating chocolate first thing in the morning. As an adult, I would prefer one of those whiskey advent calendars, but 24 little bottles of bourbon work out to be quite expensive for Australians. Although my wish for whiskey may not be fulfilled until another Christmas, I wanted to try something a little festive for a… continue reading.

Learning Vue for Ionic/Angular Developers – Part 4

Learning Vue for Ionic/Angular Developers – Part 4

Most applications will at some point require saving some kind of data that needs to be persisted across application reloads. Often, we want to make use of the local storage on the user’s device to do this. When using Ionic/Angular we can use Ionic’s built-in Storage API to easily interact with storage without needing to know what is happening behind the scenes – Ionic will automatically use the best storage mechanism available. Once again, with Vue, we don’t have these… continue reading.

Hosting an Ionic PWA with Firebase Hosting

Hosting an Ionic PWA with Firebase Hosting

In the past couple of tutorials, we have been working on building a cryptocurrency price tracking application as a progressive web application in Ionic. In this tutorial, we are going to walk through how to host an Ionic PWA using Firebase Hosting. Although this is the final post in a series of tutorials on building a PWA in Ionic, there is no need to read the previous tutorials if all you are interested in is hosting your own PWA. These steps are generic, and just assume… continue reading.