Sign in

Parham

Use CesiumJS to add a 3D map to your Ionic app

Hi friends 👋

Parham here, with another step-by-step guide.

In this article, we will create an Ionic/Angular app that uses CesiumJS to render a 3D map and render some 3D layers on top of it to show terrain and buildings.

3D maps are excellent 😎 and visualising your data in 3D can take it to the next level. 🤭

What if you can have a 3D map rendered in your browser with just writing one line of code.

That’s right, using CesiumJS, you can easily have a 3D map in your app.

A quick preview of what is the final…


Build a PWA Map application using Ionic and Leaflet 🗺 🧭

Featuring Google address search integration, GPS and layer switcher. (Step by step guide)

Hello friends, Parham here with another step-by-step guide.

This time, we will build an Ionic PWA app that shows a map, but that is not all.

A quick preview of what is the final results:

Here are the app features, what you can expect to learn implementing each part and the difficulty level of each part:

1. Create a blank app using Ionic CLI.

You will learn how to use Ionic CLI to create an Ionic/Angular app. (Difficulty level: simple)

2. Adding a leaflet map to your Ionic app.

You will learn how to implement a basic map integration with Ionic, Leaflet &…


This article is the second part of a two-part article on how to debug ionic apps. The techniques described here are helpful if your app is in release mode. If you are looking for ways to debug an app during development(debug version), please look at the first part of this article.

The downside of all the methods I explained in the first part of this article is that they are only available as long as the app is in debug mode (not the release version).

When you sign the app for Release, the app cannot be debugged using remote debugging…


Elevate your code series 😊

I am trying to decide where the user should land when they open the app.

The logic in plain English would be something like this:

  • If this is the very first time user visits the app show Terms & conditions so they can agree to T&C. This will be saved and the app will remember this choice. It’s a one-off thing.
  • Then If the user has agreed to T&C and has not viewed the app intro, show the introduction. This gives the user a tour of the app features and only happen once as well…


By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading — a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.
https://angular.io/guide/lazy-loading-ngmodules

To lazy load a feature module you can simply define a route for it and that’s it!
Here is an example to remind you how it’s done.

const routes: Routes = [
{…


This article builds an Ionic PWA app that uses Auth0 for authentication.

We will go through a step-by-step guide on how to do this.

Here is the final demo.

Git repo: github.com/pazel-io/ionic-auth0-react-pwa

This article was originally published on pazel.dev

Configuring Auth0

Before anything, let’s set you up with Auth0. Please head to auth0.com and register for a free account. After signing up, you can log in to your account. You will land on the Auth0 dashboard. From the menu on the left, choose the Applications page and click the “Create Application” button.

Click on the option that says a new Single Page…


This article is the first part of a two-part article on how to debug ionic apps. The techniques described here are helpful if your app is in debug mode. If you are looking for ways to debug an app in prod(signed release), please look at part two of this article.

1- Remote debugging during development using Web View

Ionic apps (native apps) are web apps that run in an embedded browser, so you can use remote debugging with chrome dev tools on Android or Safari Web Inspector on iOS to debug JavaScript, HTML and CSS.

You can use remote debugging with an actual device or simulator. If you…


Debugging a mobile application is an essential part of development and maintenance.
Using Ionic to create mobile apps gives us a lot of leverage when it comes to debugging.
In this article, I share some of the techniques I use to debug Ionic apps and some example from the projects that I have done.

The article is broken into two parts:

Apart from what I have explained in my article, there are several guides in Ionic docs around debugging that I encourage you to…


This is not a guide but rather my personal experience and struggle with macOS temp files and how I resolved it. I am not sure if it matters but I use the latest update of macOS Catalina (10.15.7)

I had 884GB of my 1TB hard disk taken by macOS temp files.
These files plus my files, apps and projects had reduced the free space to less than 100 MB (out of 1 TB) and nothing was working properly. I was getting disk space alert constantly.

These temp files are hidden so you will not find them in any reports. like…


Last updated: 12 Aug 2021

Hello friends 👋, in this article, we will have a quick look at the first rule from 10 Usability Heuristics for User Interface and see some examples.

Motivation

The cover photo is from inside of a Melbourne tram. There is a clear sign inside that tells passengers what the next stop is (The yellow text) and that someone has requested to stop at the next station (red text, otherwise the tram does not always stop for all stations).

You can see the same type of feedback or visibility in many everyday items.

Like the notification from your phone on low battery…

Parham

Web & mobile tech lead, @Auth0Ambassador. Follow me for content on JavaScript, Angular, React, Ionic & Capacitor, Progressive web apps & UI/UX.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store