DEV Community: Simon Grimm

Sign in with Apple using Supabase and Ionic Angular

Simon Grimm — Wed, 07 Dec 2022 10:00:48 +0000

Sign in with Apple has become a standard most websites implement, and with Supabase we can easily add this to our Ionic application!

To celebrate #SupaLaunchWeek next week I’ve made this little guide on adding Sign in with Apple using Supabase, and turns out we don't need to write a lot of code for it.

To achieve the flow, we need to configure our Supabase project in a specific way and setup some information within the Apple Developer Program to which you need to be enrolled.

It's a bit tricky but shouldn't take you more than a couple of minutes.

Setup a Supabase Project

First of all we need a new Supabase project. If you don't have a Supabase account yet, you can get started for free!

In your dashboard, click "New Project" and leave it to the default settings, but make sure you keep a copy of your database password!

For the moment there's nothing else we need to do in here, so just let the project creation happen in the background and move on to Apple.

Sign in with Apple Configuration

To integrate Sign in with Apple we need to create a few things like described in the Supabase documentation, namely:

An Apple App ID
An Apple Service ID
A Key
A secret string based on the key

To get started, sign in to your Apple developer account.

Within your account you can first of all create a new App ID, which is usually required when you build a native iOS application.

Inside the dialog scroll down and make sure you active the Sign in with Apple capability from the list.

Once your App ID is registered, you can add another Service ID from the same menu point. Give it a meaningful name and identifier, click continue and enable Sign in with Apple.

Now we need to configure the Service ID, and this becomes more challenging as we need to combine some information.

To configure it correctly you need to:

Select the app ID we created in the previous step as the Primary App ID
Define the web domain where your project is hosted
Set the callback URL that points to Supabase

You can obtain the callback URL by opening up the Providers menu inside the Authentication menu entry of your Supabase project. From here, enable the Apple provider and grab the Redirect URL:

If you already host the current version of your web app somewhere you can use that domain, in my case I simply created a project in Netlify and uploaded the build of an Ionic Angular project to get a domain!

To get a domain quickly, scroll down to Hosting your App with Netlify and perform the steps based on a blank new Ionic app.

With that in place you can finally configure the service ID correctly:

Bear with me, we are almost there!

The last step is to register a new key inside your Apple portal for which you also want to enable Sign in with Apple and select your Primary App ID from before.

At the end of that dialog you need to download the p8 key file and you can also take note of the key id(it's also in the name of the file)!

Now things take a strange turn as we need to generate a secret key based on the auth key, and we can do it with a little Ruby script that Supabase provides.

Go ahead and create a file in a folder in which you also place the downloaded p8 file from before, and create a new file secret_gen.rb with the following next to it:

require "jwt"

key_file = "AuthKey_7Z2PMU8UY9.p8"
team_id = "ZS...."
client_id = "com.devdactic.supaauthservice"
key_id = "723..."

validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.

private_key = OpenSSL::PKey::EC.new IO.read key_file

token = JWT.encode(
    {
        iss: team_id,
        iat: Time.now.to_i,
        exp: Time.now.to_i + 86400 * validity_period,
        aud: "https://appleid.apple.com",
        sub: client_id
    },
    private_key,
    "ES256",
    header_fields=
    {
        kid: key_id
    }
)
puts token

Make so to insert your own information at the top for the four variables. The client_id is the Service ID we generated before - don't confuse it with the App ID although it might look similar!

Now you can execute that script by running:

ruby secret_gen.rb > client_secret.txt

Inside the new client_secret.txt you will find a string that you want to copy now and insert into the Secret Key field of your Supabase Apple provider configuration.

At this point you also add the Service ID to Supabase, and with that the provider configuration is done!

Now there is just one more thing, and that's making sure that Supabase will redirect to our App after the callback from Apple is triggered.

To do this, you need to add the domain where your app is hosted under the URL Configuration as the Site URL of your Supabase project. I simply used my Netlify default domain again:

It's done - you have (hopefully) successful configured Sign in with Apple for your Supabase project!

Supabase Project Configuration

One addition I recommend is to create a simple users table now because when you are using Sign in with Apple, the full user information is only returned on initial sign up.

When a user uses Apple Sign in again in the future, you will only get a minimum of information back.

Therefore bring op the SQL Editor of your Supabase project and run the following query:

create table users (
  id uuid not null primary key,
  email text,
  name text
);

-- Function for handling new users
create or replace function public.handle_new_user()
returns trigger as $$
begin
  insert into public.users (id, email, name)
  values (new.id, new.email, new.raw_user_meta_data ->> 'full_name');
  return new;
end;
$$ language plpgsql security definer;

create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

Now you have a new table, and a trigger that runs when a new user is first time authenticated. This will grab some user information including the full name and add it to your table!

Sign in with Apple from Ionic Angular

The last part is the easiest as we simply need to connect Supabase to our Ionic app and call one function. Get started by bringing up a new Ionic app and install the Supabase JS client:

ionic start supaAuth blank --type=angular
cd ./supaAuth

npm install @supabase/supabase-js

Now add the Supabase credentials that you can find under Project Settings -> API and add them to the src/environments/environment.ts file:

export const environment = {
    production: false,
    supabaseUrl: 'https://YOURSUPABASEPROJECT.supabase.co',
    supabaseKey: 'YOURKEY'
};

For our page we will simply create the usual connection to Supabase and use onAuthStateChange to listen to changes regarding the authentication state.

Triggering the Apple sign in flow is now as easy as calling signInWithOAuth and passing apple as the provider - and yes, you could easily do this for other providers like Google as well!

Go ahead and change the src/app/home/home.page.ts to this now:

import { Component } from '@angular/core';
import { SupabaseClient, User, createClient } from '@supabase/supabase-js';
import { BehaviorSubject } from 'rxjs';
import { environment } from '../../environments/environment';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss']
})
export class HomePage {
    user = new BehaviorSubject<User | null>(null);
    private supabase: SupabaseClient;

    constructor() {
        this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey);

        this.supabase.auth.onAuthStateChange((event, session) => {
            console.log(event);
            console.log(session);

            if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
                this.user.next(session!.user);
            } else {
                this.user.next(null);
            }
        });
    }

    async signInWithApple() {
        const { data, error } = await this.supabase.auth.signInWithOAuth({
            provider: 'apple'
        });
    }

    async signOut() {
        const { error } = await this.supabase.auth.signOut();
    }
}

Based on the user object we can now extract some values and either show a login button or the information and a log out button inside the src/app/home/home.page.html:

<ion-header>
    <ion-toolbar color="success">
        <ion-title> Supabase + Ionic </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-button (click)="signInWithApple()" expand="block" *ngIf="(user | async) === null">
        Sign in with Apple
    </ion-button>

    <ion-card *ngIf="(user | async) !== null">
        <ion-card-content>
            <ion-item>
                <ion-label>{{ (user | async)?.user_metadata!['full_name'] }}</ion-label>
            </ion-item>
            <ion-item>
                <ion-label
                    >{{ (user | async)?.email }}
                    <p>Provider: {{ (user | async)?.app_metadata!.provider }}</p>
                </ion-label>
            </ion-item>

            <ion-button (click)="signOut()" expand="block"> Sign out </ion-button>
        </ion-card-content>
    </ion-card>
</ion-content>

YOu have to trust me on those values as we can't test this locally because of the different redirect URLs we configured, and because SSL is required for Sign in with Apple.

To finally prepare our app for hosting let's slightly change the routing inside the src/app/app-routing.module.ts:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    {
        path: '',
        loadChildren: () => import('./home/home.module').then((m) => m.HomePageModule)
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule]
})
export class AppRoutingModule {}

Now we can test our app - but we need to do it on our domain!

Hosting your App with Netlify

Don't worry if you have no domain (although you had to use one during configuration!) but you easily get this with Netlify or other providers.

First of all build your app by running:

ionic build

Inside Netlify you can now click Add new site and select Deploy manually to make this as easy as possible.

Simply drag the www folder of your Ionic project into the dialog and your app will be deployed in seconds!

You can now test the flow and your app should open the Sign in with Apple dialog and afterwards guide you back to the same URL, but now you should be authenticated and see some logs with more information.

If you want to see it in action you can test the flow with my hosted Ionic app!

Testing Sign in with Apple

During testing you might have to reset your information some time, but as said before the actual information from Apple is only returned once.

The trick is that you can not only remove the user data from Supabase, but you can also reset Sign in with Apple for a specific service!

For this, bring up the system preferences on your Mac (works almost the same on mobile) and click on your Apple ID.

From there, navigate to Password & Security in the menu and at the bottom click Edit... next to Apps using Apple ID.

In that dialog you now only need to find your service and remove it - and you can test the whole Sign in with Apple flow again!

Conclusion

We have implemented Sign in with Apple using Supabase for the web, however the process right now would not work perfectly for a native mobile app.

To make this work, we could easily integrate the Capacitor Community Plugin which would trigger the native Sign in with Apple dialog and return us some tokens.

The problem after that step is that we currently don't have a way to pass that information to Supabase as the OIDC functions were removed until the team comes up with a better way to integrate this process.

Supabase is already actively working on this, so I expect a solution for native apps soon - but extending our code with a Capacitor plugin and passing the result to Supabase will hopefully be a small change of about 5 minutes when we got access to the right functions.

How to Create an Expandable Card Using IONIC REACT

Simon Grimm — Wed, 30 Nov 2022 06:41:40 +0000

Shared element transitions is a common pattern in both web and mobile application. Youtube and Instagram use them heavily throughout their mobile application:

Youtube uses this pattern in their mobile application when you minimize a playing video.
Instagram uses it when you tap a photo on the profile or discover page - animating the photo from the grid to its enlarged full-screen version.

Shared element transition improves the user experience (UX) of your application by creating an association between the two views you are transitioning between. Take Instagram's interaction for example. By enlarging and snapping the tapped photo into position as it transitions from a grid view to a single photo view, it creates a stronger connection between the tapped photo and the new page. It tells the user that they are looking at a larger version of the image they tapped.

In this tutorial, we'll learn how to create a simplified shared element transition. We'll create a list with cards that will expand into a full page modal when clicked. There are a few different approaches to creating this interaction, but this tutorial will focus on using Framer Motion to create the animations.

Prerequisite

To follow along, create a new Ionic React application by running the following command:

ionic start ionicInteractive blank --type=react

If you are new to Ionic, follow the Getting Started guide to set up your local dev environment.

Framer Motion

Framer Motion is a motion library for React that enables you to create complex user interactions using a declarative syntax. Framer Motion includes a robust set of animation utilities ranging from simple transitions to complex gesture handling. We'll be using Framer Motion's layout animation to create the shared element transition for this tutorial.

Install Framer Motion dependencies by running the following command:

npm i framer-motion

Setup

We'll use the default Home page component for our tutorial. Open Home.tsx in the pages directory and add the following code:

import { IonHeader, IonItem, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import './Home.css';

const Home: React.FC = () => {
    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen></IonContent>
        </IonPage>
    );
};

export default Home;

Next, let's add some base styling to our page. Open Home.css in the pages directory and add the following code:

ion-title {
    color: #1e5093;
}
ion-content {
    --background: #fff;
}

Create Layers

We'll be manually layering out the page using CSS grids instead of navigating to a new page or opening a modal. We'll cover how you can create shared element transition for those scenarios in separate blog posts.

The image below is a 3D representation of how the two layers are stacked on top of each other.

Let's start with creating the container for our list and the popup layer. We'll use a regular div element inside the IonContent component and give it a class content-container to add the necessary stylings. Open pages/Home.tsx:

import { IonHeader, IonItem, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import './Home.css';

const Home: React.FC = () => {
    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                {/* Add this 👇 */}
                <div className="content-container"></div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Set the display: grid to content-container and set it to have a single full height row and a single full-width column. Open pages/Home.css

ion-title {
    color: #1e5093;
}
ion-content {
    --background: #fff;
}

/* Add styling for the wrapper container 👇 */
.content-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100%;
}

Next, create the container elements for our list and popup. We'll use Ionic's IonList component for our list and a regular div element for the popup. Open pages/Home.tsx and add the following:

// Add IonList to the list of imports 👇
import { IonHeader, IonItem, IonPage, IonTitle, IonToolbar, IonList } from '@ionic/react';
import './Home.css';

const Home: React.FC = () => {
    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    {/* Add IonList 👇 */}
                    <IonList></IonList>

                    {/* Add Popup container 👇 */}
                    <div className="popup-container"></div>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

To stack the popup-container on top of the IonList, we'll need to set both elements to the same row and column of the parent's grid. We'll also need to set a higher z-index for the popup-container element to guarantee that it will always be above the IonList layer. Open pages/Home.css and add the following

ion-title {
    color: #1e5093;
}
ion-content {
    --background: #fff;
}

.content-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100%;
}

/* Add styling for the ion list component 👇 */
ion-list {
    --ion-item-background: #fff;
    grid-row: 1 / 2;
    grid-column: 1 /2;
    overflow-y: auto;
}

/* Add styling for the popup container 👇 */
.popup-container {
    grid-row: 1 / 2;
    grid-column: 1 /2;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 20;
}

Create List of Cards

Before we continue with building our animations, let's first fill our list with dummy data so we have something to click on. Let's also comment out the popup-container element for now to avoid blocking the list underneath. Open pages/Home.tsx and add the following:

// Update the list of imports 👇
import {
    IonHeader,
    IonItem,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonImg,
    IonText
} from '@ionic/react';
import './Home.css';

// Add this 👇
interface Post {
    id: string;
    image: string;
    name: string;
    description: string;
}

const Home: React.FC = () => {
    // Add data to be rendered in the list 👇
    const posts: Post[] = [
        {
            id: '1',
            image:
                'https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
            name: 'Cruises are sailing again'
        },
        {
            id: '2',
            image:
                'https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80',
            name: 'Things to do when visiting Bali'
        },
        {
            id: '3',
            image:
                'https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80',
            name: '10 Best Islands to travel to in 2022'
        }
    ];

    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    {/* Update IonList 👇 */}
                    <IonList mode="ios" className="ion-no-padding">
                        {posts.map((post) => (
                            <IonItem
                                key={'card-' + post.id}
                                mode="ios"
                                lines="none"
                                className="ion-no-padding ion-no-inner-padding"
                            >
                                <IonCard className="ion-no-padding">
                                    <div className="card-content">
                                        <IonImg className="card-image" src={post.image} />
                                        <IonCardContent>
                                            <div className="title-container">
                                                <IonText>{post.name}</IonText>
                                            </div>
                                        </IonCardContent>
                                    </div>
                                </IonCard>
                            </IonItem>
                        ))}
                    </IonList>

                    {/* Comment out the following for now, so we can focus on building out the list layer first 👇 */}
                    {/*
        <div className="popup-container">
        </div>
        */}
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Now, let's add some styling to our cards to make them look like the example you saw at the beginning of the tutorial. Open pages/Home.css and add the following:

ion-title {
    color: #1e5093;
}
ion-content {
    --background: #fff;
}

.content-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100%;
}

ion-list {
    --ion-item-background: #fff;
    grid-row: 1 / 2;
    grid-column: 1 /2;
    overflow-y: auto;
}

/* Add styling for the contents of the list 👇 */
ion-item {
    --background: #fff;
    width: 100%;
}
ion-card {
    margin: 5px 10px;
    width: 100%;
    background-color: #fff;
}
ion-card .card-content ion-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}
ion-card ion-img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.popup-container {
    grid-row: 1 / 2;
    grid-column: 1 /2;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 20;
}

Checkpoint: Run ionic serve and open localhost:8100 on your browser. If you've followed along, you should see the following:

Add Click Events to Open and Close Popup

We'll use React's useState to keep track of the selectedPost state in our component. When a user clicks on the card, it will set the selectedPost variable to the data of the selected card. This will then display the popup element. Setting the selectedPost variable to undefined will then dismiss the popup element. Open pages/Home.tsx and add the following:

import {
    IonHeader,
    IonItem,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonImg,
    IonText
} from '@ionic/react';
// Import useState 👇
import { useState } from 'react';
import './Home.css';

interface Post {
    id: string;
    image: string;
    name: string;
    description: string;
}

const Home: React.FC = () => {
    // Add this 👇
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image:
                'https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
            name: 'Cruises are sailing again'
        },
        {
            id: '2',
            image:
                'https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80',
            name: 'Things to do when visiting Bali'
        },
        {
            id: '3',
            image:
                'https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80',
            name: '10 Best Islands to travel to in 2022'
        }
    ];

    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    <IonList mode="ios" className="ion-no-padding">
                        {posts.map((post) => (
                            <IonItem
                                key={'card-' + post.id}
                                mode="ios"
                                lines="none"
                                className="ion-no-padding ion-no-inner-padding"
                            >
                                {/* Add a click event to set the selectedPost variable 👇 */}
                                <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                                    <div className="card-content">
                                        <IonImg className="card-image" src={post.image} />
                                        <IonCardContent>
                                            <div className="title-container">
                                                <IonText>{post.name}</IonText>
                                            </div>
                                        </IonCardContent>
                                    </div>
                                </IonCard>
                            </IonItem>
                        ))}
                    </IonList>

                    {/*
        <div className="popup-container">
        </div>
        */}
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Uncomment the popup-container and wrap it in a conditional. This will display the popup when selectedPost is truthy and remove it when it's falsy. We'll also add a click listener to the popup-container so we can close the popup when we click on it. Open pages/Home.tsx and add the following:

import { IonHeader, IonItem, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonCard, IonCardContent, IonImg, IonText } from '@ionic/react';
// Import useState 👇
import { useState } from 'react';
import './Home.css';

interface Post {
  id: string,
  image: string,
  name: string,
  description: string
}

const Home: React.FC = () => {

    // Add this 👇
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image: "https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80",
            name: "Cruises are sailing again",
        },
        {
            id: '2',
            image: "https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80",
            name: "Things to do when visiting Bali",
        },
        {
            id: '3',
            image: "https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80",
            name: "10 Best Islands to travel to in 2022",
        },
    ]

  return (
    <IonPage>
      <IonHeader mode="ios">
        <IonToolbar mode="ios">
          <IonTitle>Blog Posts</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
      <div className="content-container">
        <IonList mode="ios" className="ion-no-padding">
            {
                posts.map((post) =>
                 <IonItem key={'card-'+post.id} mode="ios" lines="none" className="ion-no-padding ion-no-inner-padding">
                 <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                     <div className="card-content">
                        <IonImg className="card-image" src={post.image} />
                        <IonCardContent>
                            <div className="title-container">
                                <IonText>{post.name}</IonText>
                            </div>
                        </IonCardContent>
                     </div>
                 </IonCard>
                </IonItem>
            )}
            </IonList>

        {
            {/* Conditionally display the popup container 👇 */}
            selectedPost &&
            {/* Add a click listener to close the popup */}
            <div
                className="popup-container"
                onClick={() => setSelectedPost(undefined)}>
            </div>
        }
      </div>
      </IonContent>
    </IonPage>
  );
};

export default Home;

Checkpoint: Run ionic serve and open localhost:8100 on your browser. Click on one of the cards in the list and you should see a white element covering the entire view. This is the empty popup element. Click on the white element, and you should see the list of cards again.

Create Popup Element

The popup layer contains an image at the top, the title, and some text contents. We'll use a static string for the main text of the popup component for simplicity. Open pages/Home.tsx and add the following:

import {
    IonHeader,
    IonItem,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonImg,
    IonText
} from '@ionic/react';
import { useState } from 'react';
import './Home.css';

interface Post {
    id: string;
    image: string;
    name: string;
    description: string;
}

const Home: React.FC = () => {
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image:
                'https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
            name: 'Cruises are sailing again'
        },
        {
            id: '2',
            image:
                'https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80',
            name: 'Things to do when visiting Bali'
        },
        {
            id: '3',
            image:
                'https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80',
            name: '10 Best Islands to travel to in 2022'
        }
    ];

    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    <IonList mode="ios" className="ion-no-padding">
                        {posts.map((post) => (
                            <IonItem
                                key={'card-' + post.id}
                                mode="ios"
                                lines="none"
                                className="ion-no-padding ion-no-inner-padding"
                            >
                                <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                                    <div className="card-content">
                                        <IonImg className="card-image" src={post.image} />
                                        <IonCardContent>
                                            <div className="title-container">
                                                <IonText>{post.name}</IonText>
                                            </div>
                                        </IonCardContent>
                                    </div>
                                </IonCard>
                            </IonItem>
                        ))}
                    </IonList>

                    {selectedPost && (
                        <div className="popup-container" onClick={() => setSelectedPost(undefined)}>
                            {/* Add contents of the popup container 👇 */}
                            <IonImg src={selectedPost.image} />
                            <h1>{selectedPost.name}</h1>
                            <IonText>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                                    officia deserunt mollit anim id est laborum.
                                </p>
                            </IonText>
                        </div>
                    )}
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Next, let's add some styles to our popup content. Open pages/Home.css and add the following:

ion-title {
    color: #1e5093;
}
ion-content {
    --background: #fff;
}

.content-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100%;
}

ion-list {
    --ion-item-background: #fff;
    grid-row: 1 / 2;
    grid-column: 1 /2;
    overflow-y: auto;
}

ion-item {
    --background: #fff;
    width: 100%;
}
ion-card {
    margin: 5px 10px;
    width: 100%;
    background-color: #fff;
}
ion-card .card-content ion-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}
ion-card ion-img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.popup-container {
    grid-row: 1 / 2;
    grid-column: 1 /2;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 20;
}

/* Add styling for the contents of the popup container 👇 */
.popup-container ion-img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.popup-container h1 {
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 20px;
}

.popup-container p {
    color: #555;
    font-size: 1.1rem;
    padding: 0 20px;
    line-height: 2rem;
}

Checkpoint: Run ionic serve and open localhost:8100 on your browser. Click on a card and you should see the popup opening on top of the list, displaying information from the clicked card.

Add Shared Element Transition

Framer Motion contains a special set of components prefixed with motion that is designed to simplify creating animations. These components accept animation-related configuration as properties, allowing us to orchestrate our animations directly in the template.

To create a shared element transition, we'll need to animate an element from its original position to its final position and vice versa. In our case, the card and image should expand and reposition themselves as the popup is rendered. Framer Motion lets us create this type of animation by attaching a layoutId to the target element. Framer Motion looks for the same layoutId in your template and animates the elements as each one is being added and removed from the DOM - creating the shared element transition effect.

Layout animations is Framer Motion's optimized animation to animate between CSS layouts by using transforms instead of the layout system.

Open pages/Home.tsx and replace the card-content and popup-container elements with motion.div elements with the same layoutId:

import { IonHeader, IonItem, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonCard, IonCardContent, IonImg, IonText } from '@ionic/react';
import { useState } from 'react'

// Import motion 👇
import { motion } from 'framer-motion';;
import './Home.css';

interface Post {
  id: string,
  image: string,
  name: string,
  description: string
}

const Home: React.FC = () => {
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image: "https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80",
            name: "Cruises are sailing again",
        },
        {
            id: '2',
            image: "https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80",
            name: "Things to do when visiting Bali",
        },
        {
            id: '3',
            image: "https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80",
            name: "10 Best Islands to travel to in 2022",
        },
    ]

  return (
    <IonPage>
      <IonHeader mode="ios">
        <IonToolbar mode="ios">
          <IonTitle>Blog Posts</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
      <div className="content-container">
        <IonList mode="ios" className="ion-no-padding">
            {
                posts.map((post) =>
                 <IonItem key={'card-'+post.id} mode="ios" lines="none" className="ion-no-padding ion-no-inner-padding">
                 <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                    {/* Replace div with motion.div and add a layoutId 👇 */}
                     <motion.div
                        className="card-content"
                        layoutId={'card-'+post.id}
                        >
                        <IonImg className="card-image" src={post.image} />
                        <IonCardContent>
                            <div className="title-container">
                                <IonText>{post.name}</IonText>
                            </div>
                        </IonCardContent>
                     </motion.div>
                 </IonCard>
                </IonItem>
            )}
            </IonList>

        {
            selectedPost &&
            {/* Replace div with motion.div and add a layoutId,
                also add an initial, and animate property to make the
                popup fade in as it enters 👇 */}
            <motion.div
                className="popup-container"
                onClick={() => setSelectedPost(undefined)}
                layoutId={'card-'+selectedPost.id}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}>
                <IonImg  src={selectedPost.image} />
                <h1>{selectedPost.name}</h1>
                <IonText>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </IonText>
            </motion.div>
        }
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Home;

The changes above should expand the card when you click on it. However, no animation will be applied as the popup is dismissed. This is because the element is immediately removed from the React tree. To play the reverse animation as the element is removed, wrap the target element in Framer Motion's AnimatePresence component. Open pages/Home.tsx and add the following:

import {
    IonHeader,
    IonItem,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonImg,
    IonText
} from '@ionic/react';
import { useState } from 'react';

// Import AnimatePresence 👇
import { AnimatePresence, motion } from 'framer-motion';
import './Home.css';

interface Post {
    id: string;
    image: string;
    name: string;
    description: string;
}

const Home: React.FC = () => {
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image:
                'https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
            name: 'Cruises are sailing again'
        },
        {
            id: '2',
            image:
                'https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80',
            name: 'Things to do when visiting Bali'
        },
        {
            id: '3',
            image:
                'https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80',
            name: '10 Best Islands to travel to in 2022'
        }
    ];

    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    <IonList mode="ios" className="ion-no-padding">
                        {posts.map((post) => (
                            <IonItem
                                key={'card-' + post.id}
                                mode="ios"
                                lines="none"
                                className="ion-no-padding ion-no-inner-padding"
                            >
                                <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                                    <motion.div className="card-content" layoutId={'card-' + post.id}>
                                        <IonImg className="card-image" src={post.image} />
                                        <IonCardContent>
                                            <div className="title-container">
                                                <IonText>{post.name}</IonText>
                                            </div>
                                        </IonCardContent>
                                    </motion.div>
                                </IonCard>
                            </IonItem>
                        ))}
                    </IonList>

                    {/* Wrap the target element in the Animate component 👇 */}
                    <AnimatePresence>
                        {selectedPost && (
                            <motion.div
                                className="popup-container"
                                onClick={() => setSelectedPost(undefined)}
                                layoutId={'card-' + selectedPost.id}
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                            >
                                <IonImg src={selectedPost.image} />
                                <h1>{selectedPost.name}</h1>
                                <IonText>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                                        culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                </IonText>
                            </motion.div>
                        )}
                    </AnimatePresence>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Next, we'll do a similar animation for the images. The image should slide to the top of the popup layer from its current location in the card as we open the popup and vice versa as we close the popup. Wrap the images in a motion.div component and assign a unique layoutId:

import {
    IonHeader,
    IonItem,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonImg,
    IonText
} from '@ionic/react';
import { useState } from 'react';

// Import AnimatePresence 👇
import { AnimatePresence, motion } from 'framer-motion';
import './Home.css';

interface Post {
    id: string;
    image: string;
    name: string;
    description: string;
}

const Home: React.FC = () => {
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image:
                'https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
            name: 'Cruises are sailing again'
        },
        {
            id: '2',
            image:
                'https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80',
            name: 'Things to do when visiting Bali'
        },
        {
            id: '3',
            image:
                'https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80',
            name: '10 Best Islands to travel to in 2022'
        }
    ];

    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    <IonList mode="ios" className="ion-no-padding">
                        {posts.map((post) => (
                            <IonItem
                                key={'card-' + post.id}
                                mode="ios"
                                lines="none"
                                className="ion-no-padding ion-no-inner-padding"
                            >
                                <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                                    <motion.div className="card-content" layoutId={'card-' + post.id}>
                                        {/* Wrap the target element in the motion.div component 👇 */}
                                        <motion.div layoutId={'image-container' + post.id}>
                                            <IonImg className="card-image" src={post.image} />
                                        </motion.div>
                                        <IonCardContent>
                                            <div className="title-container">
                                                <IonText>{post.name}</IonText>
                                            </div>
                                        </IonCardContent>
                                    </motion.div>
                                </IonCard>
                            </IonItem>
                        ))}
                    </IonList>

                    <AnimatePresence>
                        {selectedPost && (
                            <motion.div
                                className="popup-container"
                                onClick={() => setSelectedPost(undefined)}
                                layoutId={'card-' + selectedPost.id}
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                            >
                                {/* Wrap the target element in the motion.div component 👇 */}
                                <motion.div layoutId={'image-container' + post.id}>
                                    <IonImg src={selectedPost.image} />
                                </motion.div>
                                <h1>{selectedPost.name}</h1>
                                <IonText>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                                        culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                </IonText>
                            </motion.div>
                        )}
                    </AnimatePresence>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Checkpoint: Run ionic serve and open localhost:8100 on your browser. Click on a card and you should see the card expand into a full-screen popup. Clicking on the popup should dismiss the popup, animating it back to the original card.

Polishing up the Animations

We'll add some more subtle animations to create a more polished experience. Let's start with animating the text in the card as the popup is being opened. We'll give it a fade-in and fade-out animation. Open pages/Home.tsx and add the following:

import {
    IonHeader,
    IonItem,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonImg,
    IonText
} from '@ionic/react';
import { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import './Home.css';

interface Post {
    id: string;
    image: string;
    name: string;
    description: string;
}

const Home: React.FC = () => {
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image:
                'https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
            name: 'Cruises are sailing again'
        },
        {
            id: '2',
            image:
                'https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80',
            name: 'Things to do when visiting Bali'
        },
        {
            id: '3',
            image:
                'https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80',
            name: '10 Best Islands to travel to in 2022'
        }
    ];

    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    <IonList mode="ios" className="ion-no-padding">
                        {posts.map((post) => (
                            <IonItem
                                key={'card-' + post.id}
                                mode="ios"
                                lines="none"
                                className="ion-no-padding ion-no-inner-padding"
                            >
                                <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                                    <motion.div className="card-content" layoutId={'card-' + post.id}>
                                        <motion.div layoutId={'image-container' + post.id}>
                                            <IonImg className="card-image" src={post.image} />
                                        </motion.div>
                                        <IonCardContent>
                                            {/* Add fade in and fade out animation 👇 */}
                                            <motion.div
                                                className="title-container"
                                                variants={{
                                                    show: {
                                                        opacity: 1,
                                                        transition: {
                                                            duration: 0.5,
                                                            delay: 0.3
                                                        }
                                                    },
                                                    hidden: {
                                                        opacity: 0,
                                                        transition: {
                                                            duration: 0.1
                                                        }
                                                    }
                                                }}
                                                initial="show"
                                                animate={selectedPost?.id === post.id ? 'hidden' : 'show'}
                                            >
                                                <IonText>{post.name}</IonText>
                                            </motion.div>
                                        </IonCardContent>
                                    </motion.div>
                                </IonCard>
                            </IonItem>
                        ))}
                    </IonList>

                    <AnimatePresence>
                        {selectedPost && (
                            <motion.div
                                className="popup-container"
                                onClick={() => setSelectedPost(undefined)}
                                layoutId={'card-' + selectedPost.id}
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                            >
                                <motion.div layoutId={'image-container' + post.id}>
                                    <IonImg src={selectedPost.image} />
                                </motion.div>
                                <h1>{selectedPost.name}</h1>
                                <IonText>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                                        culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                </IonText>
                            </motion.div>
                        )}
                    </AnimatePresence>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Next, we'll add a fade-in and slide-up animation to our text contents in the popup container. We'll also add a delay to the main text of the popup to give it a staggering effect. Open pages/Home.tsx and add the following:

import {
    IonHeader,
    IonItem,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonImg,
    IonText
} from '@ionic/react';
import { useState } from 'react';

// Import AnimatePresence 👇
import { AnimatePresence, motion } from 'framer-motion';
import './Home.css';

interface Post {
    id: string;
    image: string;
    name: string;
    description: string;
}

const Home: React.FC = () => {
    const [selectedPost, setSelectedPost] = useState<Post | undefined>(undefined);

    const posts: Post[] = [
        {
            id: '1',
            image:
                'https://images.unsplash.com/photo-1599640842225-85d111c60e6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
            name: 'Cruises are sailing again'
        },
        {
            id: '2',
            image:
                'https://images.unsplash.com/photo-1512649408904-c0a00fb810da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2531&q=80',
            name: 'Things to do when visiting Bali'
        },
        {
            id: '3',
            image:
                'https://images.unsplash.com/photo-1545579133-99bb5ab189bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3570&q=80',
            name: '10 Best Islands to travel to in 2022'
        }
    ];

    return (
        <IonPage>
            <IonHeader mode="ios">
                <IonToolbar mode="ios">
                    <IonTitle>Blog Posts</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <div className="content-container">
                    <IonList mode="ios" className="ion-no-padding">
                        {posts.map((post) => (
                            <IonItem
                                key={'card-' + post.id}
                                mode="ios"
                                lines="none"
                                className="ion-no-padding ion-no-inner-padding"
                            >
                                <IonCard className="ion-no-padding" onClick={() => setSelectedPost(post)}>
                                    <motion.div className="card-content" layoutId={'card-' + post.id}>
                                        <motion.div layoutId={'image-container' + post.id}>
                                            <IonImg className="card-image" src={post.image} />
                                        </motion.div>
                                        <IonCardContent>
                                            <motion.div
                                                className="title-container"
                                                variants={{
                                                    show: {
                                                        opacity: 1,
                                                        transition: {
                                                            duration: 0.5,
                                                            delay: 0.3
                                                        }
                                                    },
                                                    hidden: {
                                                        opacity: 0,
                                                        transition: {
                                                            duration: 0.1
                                                        }
                                                    }
                                                }}
                                                initial="show"
                                                animate={selectedPost?.id === post.id ? 'hidden' : 'show'}
                                            >
                                                <IonText>{post.name}</IonText>
                                            </motion.div>
                                        </IonCardContent>
                                    </motion.div>
                                </IonCard>
                            </IonItem>
                        ))}
                    </IonList>

                    <AnimatePresence>
                        {selectedPost && (
                            <motion.div
                                className="popup-container"
                                onClick={() => setSelectedPost(undefined)}
                                layoutId={'card-' + selectedPost.id}
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                            >
                                <motion.div layoutId={'image-container' + post.id}>
                                    <IonImg src={selectedPost.image} />
                                </motion.div>
                                {/* Add fade-in and slide-up animation 👇 */}
                                <motion.div
                                    initial={{ opacity: 0, transform: 'translateY(20px)' }}
                                    animate={{
                                        opacity: 1,
                                        transform: 'translateY(0)',
                                        transitionDuration: '0.5s',
                                        transitionDelay: '0.15s'
                                    }}
                                >
                                    <h1>{selectedPost.name}</h1>
                                </motion.div>
                                {/* Add fade in and fade out animation with some delay 👇 */}
                                <motion.div
                                    initial={{ opacity: 0, transform: 'translateY(20px)' }}
                                    animate={{
                                        opacity: 1,
                                        transform: 'translateY(0)',
                                        transitionDuration: '0.5s',
                                        transitionDelay: '0.2s'
                                    }}
                                >
                                    <IonText>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                                            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                                            in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </IonText>
                                </motion.div>
                            </motion.div>
                        )}
                    </AnimatePresence>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Home;

Checkpoint: Run ionic serve and open localhost:8100 on your browser. Click on a card and you should see the card expand into a full-screen popup, followed by the text animating to its final position.

Conclusion

Adding shared element transition strategically in your application can improve the overall UX of your application. It maintains the context better, clearly indicating that the new view contains information related to the item that was clicked.

If you are interested in more content like this or have any questions, let me know in the comments or tweet me at @williamjuan27.

If you want to learn even more about Ionic with a library of 60+ video courses, templates, and a supportive community, you can join the Ionic Academy and get access to a ton of learning material to boost your Ionic development skills.

Angular Material Mobile App with Capacitor

Simon Grimm — Mon, 28 Nov 2022 16:19:00 +0000

Angular Material is an awesome library of Material Design components for Angular apps, and with its sidenav plus the help of Capacitor we can easily build a native mobile app from one codebase!

In this tutorial we will go through all the steps of setting up an Angular project and integrating Angular Material. We will create a responsive navigation which shows a side menu on smaller screen and a regular top navigation bar on desktops screens.

Finally we will install Capacitor to quickly build a native iOS and Android app from our Angular app.

This means we are able to cover 3 different platforms all from one codebase!

Creating an Angular Material Sidenav

Let's begin with a new Angular project. After creating the project you can use a schematic to add all required packages and changes to our project for using Angular Material.

You can basically select yes for everything during that wizard, and afterwards run another schematic from Angular Material which automatically bootstraps the basic sidenav component for us!

# Start a new app
ng new materialApp --routing --style=scss
cd ./materialApp

# Schematic to add Angular Material
ng add @angular/material

# Generate a component with sidenav
ng generate @angular/material:navigation app-navigation

When we are done, we can change our src/app/app.component.html as we want to display our new component instead of all the dummy code that default app comes with:

<app-app-navigation></app-app-navigation>

This will load our component instead, and now it's a good time to take a look at the general setup of the sidenav:

The whole code is surrounded by the mat-sidenav-container component
The actual side menu that we can display is inside mat-sidenav
Everything inside mat-sidenav-content is the actual main area which later shows our different pages

If you run the app right now you will see the side menu even on bigger screens, but usually you will use a top navigation in that case (although some websites also use a side menu).

To achieve this behaviour, we will change the src/app/app-navigation/app-navigation.component.html and remove the opened property from the mat-sidenav:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav
        #drawer
        class="sidenav"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
    >
        <mat-toolbar>Menu</mat-toolbar>
        <mat-nav-list>
            <a mat-list-item href="#">Link 1</a>
            <a mat-list-item href="#">Link 2</a>
            <a mat-list-item href="#">Link 3</a>
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button
                type="button"
                aria-label="Toggle sidenav"
                mat-icon-button
                (click)="drawer.toggle()"
                *ngIf="isHandset$ | async"
            >
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <span>My App</span>
        </mat-toolbar>
        <!-- Add Content Here -->
        MY CONTENT HERE
    </mat-sidenav-content>
</mat-sidenav-container>

If you now run the app you should only see the menu icon on smaller screens and otherwise just the toolbar with our app title at the top!

This page automatically comes with an isHandset Observable that you can find inside the src/app/app-navigation/app-navigation.component.ts, and it uses the Angular BreakpointObserver to emit if we have reached a "handset" device size.

Since this is an Observable, all occurrences to the isHandset variable use the Angular async pipe to subscribe to it.

Adding Navigation with different Routes

So far we only have this one page, now it's time to add more pages and we start by generating some components, one even using another schematic from Angular Material to setup a nice little dashboard:

ng generate @angular/material:dashboard dashboard
ng generate component about
ng generate component error

Now we need to reference the different components and creating the according routing entries so the Angular router can resolve a URL to a specific component.

For this, open the src/app/app-routing.module.ts and change it to:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ErrorComponent } from './error/error.component';

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: DashboardComponent
            },
            {
                path: 'about',
                component: AboutComponent
            },
            {
                path: '404',
                component: ErrorComponent
            },
            {
                path: '**',
                redirectTo: '404'
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

We have now different routes in our app:

/ will open the Dashboard
/about will open About
/404 will open the Error page
Everything else will be redirected to the error page

If you'd like to show something like a login before these pages, take a look at my login app template with Ionic!

Right now the routing doesn't work because we haven't added the router-outlet in any place of our app.

The best place for it is actually towards the bottom of our sidenav where we have a comment by default, so bring up the src/app/app-navigation/app-navigation.component.html and insert:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav
        #drawer
        class="sidenav"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
    >
        <mat-toolbar color="primary">Menu</mat-toolbar>
        <mat-nav-list>
            <!-- TODO -->
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button
                type="button"
                aria-label="Toggle sidenav"
                mat-icon-button
                (click)="drawer.toggle()"
                *ngIf="isHandset$ | async"
            >
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <span>My App</span>
            <!-- TODO -->
        </mat-toolbar>

        <!-- Add Content Here -->
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

Now you should be able to directly navigate to the different routes that we created before!

But of course we need the navigation links in our menu and nav bar as well, so we need to change the file again.

This time we add the routerLink items in two places.

In the mat-sidenav we also add a click handler to directly close the sidenav menu when we select an entry using the drawer template reference.

In the full screen navigation bar we add a space element so we can move the buttons to the right hand side using the flexbox layout later!

Go ahead and change the src/app/app-navigation/app-navigation.component.html again:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav
        #drawer
        class="sidenav"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
    >
        <mat-toolbar color="primary">Menu</mat-toolbar>
        <mat-nav-list>
            <a
                mat-list-item
                routerLink="/"
                routerLinkActive="active-link"
                [routerLinkActiveOptions]="{ exact: true }"
                (click)="drawer.toggle()"
                >Dashboard</a
            >
            <a mat-list-item routerLink="/about" routerLinkActive="active-link" (click)="drawer.toggle()"
                >About</a
            >
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button
                type="button"
                aria-label="Toggle sidenav"
                mat-icon-button
                (click)="drawer.toggle()"
                *ngIf="isHandset$ | async"
            >
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <span>My App</span>
            <span class="spacer"></span>
            <div [class.hidden]="isHandset$ | async">
                <a
                    mat-button
                    routerLink="/"
                    routerLinkActive="active-link"
                    [routerLinkActiveOptions]="{ exact: true }"
                    >Dashboard</a
                >
                <a mat-button routerLink="/about" routerLinkActive="active-link">About</a>
            </div>
        </mat-toolbar>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

Additional all buttons and items for routing will receive the active-link CSS class when the route becomes active, and to make sure our dashboard path isn't activated for every possible page we apply exact match to the routerLinkActiveOptions!

Finally our top navigation is wrapped inside a div which will be hidden when we reach a the handset device width - at that point we have our burger menu and don't need those items anyway.

Now we just need to add the missing classes and comment out one initial class since this would overwrite the stylig of the toolbar inside the menu. Therefore bring up the src/app/app-navigation/app-navigation.component.scss and change it to:

.sidenav-container {
    height: 100%;
}

.sidenav {
    width: 200px;
}

// .sidenav .mat-toolbar {
//   background: inherit;
// }

.mat-toolbar.mat-primary {
    position: sticky;
    top: 0;
    z-index: 1;
}

.hidden {
    display: none;
}

.spacer {
    flex: 1 1 auto;
}

.active-link {
    color: #ffc000;
}

In order to show some more content and make it easier to route, let's put in some dummy content into our src/app/about/about.component.html:

<div class="grid-container">
    <h1 class="mat-h1">About</h1>
    This is my epic project!
    <button mat-button routerLink="/asd" color="primary">Broken link</button>
</div>

Let's also do the same for the src/app/error/error.component.html:

<div class="grid-container">
    <h1 class="mat-h1">Error</h1>
    This page doesn't exist -
    <button mat-button routerLink="/" color="primary">Back home</button>
</div>

And finally add a global styling for both pages inside the src/styles.scss:

.grid-container {
    margin: 20px;
}

With all of that in place we have a decent responsive web application with different routes and a super clean UI - this could be your template for your next web app!

But we won't stop here...

Adding Capacitor to our Angular Project

With Capacitor we are able to easily build a native application from our web app code - without any actual changes to the code itself!

To setup Capacitor we install the CLI as a local dependency and call the init command. Simply hit enter for every question for now!

Additionally you need to install a few packages for the core and the native platforms iOS/Android that you want to use and add them in the end one time:

# Install the Capacitor CLI locally
npm install @capacitor/cli --save-dev

# Initialize Capacitor in your Angular project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

At this point you should see an error because Capacitor is looking in the wrong place for the build of your Angular app, so let's open the capacitor.config.ts and change it to:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
    appId: 'com.example.app',
    appName: 'material-app',
    webDir: 'dist/material-app',
    bundledWebRuntime: false
};

export default config;

Now we are pointing to the right build folder, and we can create a new build and sync those files into our native platforms:

# Build the Angular project
ng build

# Sync our files to the native projects
npx cap sync

Now you just need to deploy the app to your device!

Build and Deploy native apps

You now need Xcode for iOS and Android Studio for Android apps on your machine. Additionally you need to be enrolled in the Apple Developer Program if you want to build and distribute apps on the app store, and same for the Google Play Store.

If you never touched a native mobile project, you can easily open both native projects by running:

npx cap open ios
npx cap open android

Inside Android Studio you now just need to wait until everything is ready, and you can deploy your app to a connected device without changing any of the settings!

Inside Xcode it's almost the same, but you need to setup your signing account if you wan to deploy your app to a real device and not just the simulator. Xcode guides you through this if you've never done it (but again, you need to be enrolled in the Developer Program).

After that it's as easy as hitting play and run the app on your connected device which you can select at the top!

Congratulations, you have just deployed your Angular web app to a mobile device!

But there are still some challenges ahead, especially on iOS the UI doesn't look good yet. Before we fix that, let's make our debugging process faster.

Capacitor Live Reload

By now you are used to have live reload with all modern frameworks, and we can have the same functionality even on a mobile device with minimum effort!

The idea is to make your locally served app with live reload available on your network, and the Capacitor app will simply load the content from that URL.

First step is figuring out your local IP, which you can get on a Mac by running:

ipconfig getifaddr en0

On Windows, run ipconfig and look for the IPv4 address.

With that information you can now tell Angular to use it directly as a host (instead of the keyword localhost) or you can simply use 0.0.0.0 which did the same in my test:

ng serve -o --host 0.0.0.0

# Alternative
ng serve -o --host 192.168.x.xx

Now we only need to tell Capacitor to load the app directly from this server, which we can do right in our capacitor.config.ts with another entry:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
    appId: 'com.example.app',
    appName: 'material-app',
    webDir: 'dist/material-app',
    bundledWebRuntime: false,
    server: {
        url: 'http://192.168.x.xx:4200',
        cleartext: true
    }
};

export default config;

Make sure you use the right IP and port, I've simply used the default Angular port in here.

To apply those changes we can now copy over the changes to our native project:

npx cap copy

Copy is mostly like sync, but will only copy over the changes of the web folder and config, not update the native project.

Now you can deploy your app one more time through Android Studio or Xcode and then change something in your Angular app - the app will automatically reload and show the changes!

Caution: If you install new plugins like the camera, this still requires a rebuild of your native project because native files are changed which can't be done on the fly.

Fixing the Mobile UI of Angular Material

Now we can tackle the open issues of our mobile app more easily.

To begin with, we need to change a meta tag inside our src/index.html and also include viewport-fit:

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />

By doing this we can now access an environment variable that gives us information about the iOS notch area at the top which you usually need to keep empty.

The easiest way to correctly apply this in our case is to open the src/app/app-navigation/app-navigation.component.scss and adding a new rule:

mat-toolbar {
  padding-top: env(safe-area-inset-top);
  height: calc(56px + env(safe-area-inset-top));
}

Because we change the top padding, we also need to calculate a new height of the toolbar. But with this in place, you have a very native UI!

An additional "bug" can be seen when you drag the view down on iOS, something know as over-scroll:

There seems to be no easy solution for this that works in all scenarios, but I found a pretty decent one in this Github issue.

We can disable the behaviour directly inside Xcode - Capacitor allows us to change the native projects however we want, and the changes won't be overwritten by some magical script!

Therefore, generate a new DisableBounce.m file inside Xcode and insert this (select yes for generating a bridging header): ios/App/App/DisableBounce.m

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@implementation UIScrollView (NoBounce)
- (void)didMoveToWindow {
    [super didMoveToWindow];
    self.bounces = NO;
}
@end

And with that fix in place, no more over-scroll on iOS! This means, people won't really notice they are actually using a web app - which most of us have already done without noticing most likely!

Recap

Angular Material is a great library of components to build beautiful Angular apps, and we haven't even touched all the other amazing components that you could now use!

By using a sidenav we can also make our page responsive quite easily, and later add in Capacitor to the mix to get the benefit of building a mobile app from our existing codebase.

If you got any questions just let me know ✌️

Building an Angular App with Airtable & Netlify Functions

Simon Grimm — Sun, 13 Nov 2022 11:54:16 +0000

If you want to build a public landing page with Angular and email signup you likely don't want to expose any secret keys, and I'll show you how with Netlify cloud functions.

In this tutorial we will connect a simple Airtable table as some sort of backend to store emails to our Angular landing page. We do this with the help of Netlify where we will both host our application and also deploy a cloud function!

If you don't want to use Airtable for storing your users emails you could easily plug in any email service into the cloud function as well. The only thing that matters is that we don't want to expose any secret keys inside our Angular app and instead keep that kind of information hidden.

Once the technical side is done we will also make the page more polished by adding Tailwind to our Angular app and add relevant meta tags.

If you want more weekly news right to your inbox, make sure to join my newsletter!

Creating an Airtable Table

We begin by setting up our Airtable table, so simply create a new table, remove all the fluff and just make it have one column Email. Don't mind the two rows in the image below, I later removed the Name column.

Inside the URL of that table we can find most relevant information for the connection to Airtable, so right now just leave that tab open until we come back to it.

Creating the Angular Project

Next step is creating a new Angular project using the Angular CLI - install it and additionally the Netlify CLI if you haven't done before.

We create our app including a routing file and SCSS styling, and we also generate a new landing component inside. Finally we install additional packages for our cloud functions, so go ahead now and run:

# Install CLIs if you haven't done before
npm install -g netlify-cli @angular/cli

# Setup new Angular project
ng new prelaunch-page --routing --style=scss
cd ./prelaunch-page

# Generate a new component
ng generate component landing

# Install the Airtable package
npm i airtable

# Netlify functions package
npm i @netlify/functions

Because we will later encounter some Typescript warnings, we now need to add one key to the tsconfig.json to solve that issue right upfront:

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,

Besides that we should import all necessary modules so we can perform Http calls with the HttpClientModule and build a form with the ReactiveFormsModule.

Therefore open up the src/app/app.module.ts and change it to:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingComponent } from './landing/landing.component';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [AppComponent, LandingComponent],
    imports: [BrowserModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

Since we want to display our new component instead of the default page, we can now touch the src/app/app-routing.module.ts and include a path to our new component like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingComponent } from './landing/landing.component';

const routes: Routes = [
    {
        path: '',
        component: LandingComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

Finally we remove all the boilerplate code of the src/app/app.component.html and change it to just one line so the Angular router simply displays the right information/component in our app:

<router-outlet></router-outlet>

If you haven't done until now you should bring up the live preview of your app by running:

ng serve -o

At this point you should see your landing component on the screen with a small message, which means we are ready to continue.

Creating the Angular Landing Page

Now it's time to implement the most basic version of our landing page to capture an email. We will tweak the UI later with Tailwind, right now we just want the fields and the logic to work.

Get started by defining a form inside the src/app/landing/landing.component.ts where we make our one email field required and add an empty submit function for the moment:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-landing',
    templateUrl: './landing.component.html',
    styleUrls: ['./landing.component.scss']
})
export class LandingComponent {
    form: FormGroup;

    constructor(private http: HttpClient, private fb: FormBuilder) {
        this.form = this.fb.group({
            email: ['', [Validators.required, Validators.email]]
        });
    }

    submit() {
        console.log('SUBMIT THIS: ', this.form.value);
    }
}

To use the FormGroup we connect it to a form tag and define the ngSubmit function. The one input is connected to the email field through its formControlName, and if a button inside the form has the submit type our submit action will be called!

Go ahead and change our src/app/landing/landing.component.html to this now:

<form [formGroup]="form" (ngSubmit)="submit()">
    <input formControlName="email" type="email" placeholder="saimon@devdactic.com" />
    <button type="submit">Submit</button>
</form>

It's not really a great landing page yet, but we should be able to insert our data and see a log when we submit the form.

Before we make it look nicer, we focus on the technical side which is the actual cloud function.

Adding a Netlify Cloud Function to the Angular Project

A cloud function is a simple piece of code that is executed in the cloud without you having to run and maintain your own server.

In our case, we want to use Netlify for this but there are several other hosting options available which offer the same functionality by now.

We begin by creating a new file (and the according folders in our project) at netlify/functions/signup.ts, and we insert the following:

import { Handler, HandlerEvent } from '@netlify/functions';
import Airtable from 'airtable';

// Initialize Airtable connection
const { AIRTABLE_KEY } = process.env;

// USE YOUR TABLE BASE HERE
const base = new Airtable({ apiKey: AIRTABLE_KEY }).base('appXYZ');

const handler: Handler = async (event: HandlerEvent, context: any) => {
    try {
        // Parse the body of the request
        const data = JSON.parse(event.body || '');

        // Make sure we got all data
        if (!data.email) {
            return {
                statusCode: 400,
                body: 'Please include email.'
            };
        }

        // USE YOUR TABLE NAME
        // Insert our data into the table columns
        await base('tbXYZ').create({
            Email: data.email
        });

        return {
            statusCode: 200,
            body: JSON.stringify({
                message: 'Thanks for signing up!'
            })
        };
    } catch (e: any) {
        return {
            statusCode: 500,
            body: e.message
        };
    }
};

export { handler };

Quite a lot going on:

We initialize a connection to Airtable using an AIRTABLE_KEY and the base name (which you can find in the URL from the beginning)
We define a handler for our function which tries to load the email from the body
We call the create() function to insert a row into our table (using the table name from the URL at the beginning)
We return the right status codes and messages along the way

It's a straight forward function, and you could make any kind of external API call in here if you are using a different API like ConvertKit.

By loading the AIRTABLE_KEY from our process environment we make sure it's save and not exposed anywhere, but right now we don't even have that environment. But hold on, we will get to that part soon.

For now we will create another file at the roo of our project called netlify.toml which holds some information for Netlify about how to build and deploy our project:

[build]
  publish = "dist/prelaunch-page"
  command = "ng build"
  functions = "./netlify/functions"
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

By defining this we also know upfront that our cloud function will be available at .netlify/functions/signup on our domain.

Since we want to make this work both locally and when deployed, we can now open up our src/app/landing/landing.component.ts again and implement the submit function to send the data to this endpoint and use the current window location before that:

  submit() {
    const baseUrl = window.location.origin;
    this.http
      .post(`${baseUrl}/.netlify/functions/signup`, this.form.value)
      .subscribe({
        next: (res: any) => {
          alert(res.message);
        },
        error: (err) => {
          alert('ERROR: ' + err.error);
        },
      });
  }

As you can see, making a call to a cloud function is a simple Http call, nothin more, nothing less!

Now we can also use the Netlify CLI to run all of this locally, so simply type:

netlify dev

This would host your Angular app and also deploy your cloud function locally, but it will most likely fail because we have no Airtable key defined yet.

To fix this right now you can simply insert your Airtable key hardcoded into our cloud function.

BTW, you can find that secret key inside your Airtable account page!

Once you used a real value and the Airtable connection works, you should already have a working prototype from which you can submit your email to Airtable!

Host our Angular App with Netlify

But of course we don't want it hardcoded, and we also want to host our app on Netlify. For all of this we need a new Github (or similar Git service) repository, so create a new one now.

Back in your Angular project you can add all files, commit them and add the Github repository as your remote and finally push the code:

ngit add .
git commit -am "First commit"

# If you are not using main as default
git branch -M main

git remote add origin https://github.com/...
git push -u origin main

Now your app is available on Github and we can create a connection to Netlify. We can do this through the admin UI or simply from the CLI by running:

netlify init

Go through the steps of "Create & configure a new site" and you can keep everything as it is. I'm positive that this already takes the information from the toml file we created before!

When this is done we can finally add our secret Airtable key to our Netlify environment by running:

netlify env:set AIRTABLE_KEY YOUR_AIRTABLE_KEY

Of course replace the last part with your real value - and you could also do this through the Netlify web UI if you wanted to.

At this point you can remove the hard coded value from the cloud function as even our dev environment will have access to the key!

Note: If your deployed version on Netlify isn't working yet, it might not have picked up the new environment variable. Simple rebuild the project and the whole process including the cloud function should work!

You can find the URL to your Netlify project in your account or also on the CLI after you ran the init command.

Adding Tailwind

At this point you have a very ugly but working Angular landing page - that's already a great success!

But if you want to make this a serious landing page you could now go ahead and add a UI framework like Tailwind to your Angular app, which I'll show you real quickly.

Begin with these commands to install all necessary packages, and a new file for the Tailwind configuration will be created:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Now we need to include all of our templates in the configuration so open the new tailwind.config.js and change it to:

module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Finally we also need to import the Tailwind styling, which we can do right in our src/styles.scss like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

You can now try any Tailwind selector in your app and it should work fine. For the landing page you could now use the following block inside our src/app/landing/landing.component.html:

<div class="bg-white py-16 sm:py-24">
    <div class="relative sm:py-16">
        <div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
            <div
                class="relative rounded-2xl px-6 py-10 bg-indigo-600 overflow-hidden shadow-xl sm:px-12 sm:py-20"
            >
                <div class="relative">
                    <div class="sm:text-center">
                        <h2 class="text-3xl font-extrabold text-white tracking-tight sm:text-4xl">
                            Get notified when we&rsquo;re launching.
                        </h2>
                        <p class="mt-6 mx-auto max-w-2xl text-lg text-indigo-200">
                            Subscribe to our prelaunch list and be the first to join our upcoming app!
                        </p>
                    </div>
                    <form
                        [formGroup]="form"
                        (ngSubmit)="submit()"
                        class="mt-12 sm:mx-auto sm:max-w-lg sm:flex"
                    >
                        <div class="min-w-0 flex-1">
                            <label for="cta-email" class="sr-only">Email address</label>
                            <input
                                type="email"
                                formControlName="email"
                                class="block w-full border border-transparent rounded-md px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
                                placeholder="Enter your email"
                            />
                        </div>
                        <div class="mt-4 sm:mt-0 sm:ml-3">
                            <button
                                type="submit"
                                class="block w-full rounded-md border border-transparent px-5 py-3 bg-indigo-500 text-base font-medium text-white shadow hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600 sm:px-10"
                            >
                                Notify me
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Adding Tailwind snippets is horrible, but hopefully your app now looks a lot nicer.

You can now commit and push your changes and the project will build again on Netlify, but before you actually launch your page I recommend one more thing.

Adding Meta Tags

If some shares your Angular SPA the OG tags for social sharing don't exist. If you have multiple pages you would need a specific package to dynamically set these tags, but if you plan just a simple landing page go with the fastest method, which is simply adding the required tags and information to your src/index.html like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Angular Prelaunch</title>
        <base href="/" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />

        <meta name="Description" content="An epic app coming soon." />

        <meta property="og:site_name" content="Angular Prelaunch" />
        <meta property="og:url" content="https://super-cool-site-by-saimon24.netlify.app/" />
        <meta property="og:description" content="An epic app coming soon." />
        <meta
            property="og:image"
            content="https://super-cool-site-by-saimon24.netlify.app/assets/meta.webp"
        />
        <meta
            property="og:image:secure_url"
            content="https://super-cool-site-by-saimon24.netlify.app/assets/meta.webp"
        />
        <meta name="twitter:text:title" content="Angular Prelaunch" />
        <meta
            name="twitter:image"
            content="https://super-cool-site-by-saimon24.netlify.app/assets/meta.webp"
        />
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

You can now paste your URL into a tool like MetaTags and see the improved preview of your page (of course only after committing and building your project)!

Just be aware that these tags would be used for all different pages of your app, so once you add more pages, you would need a dedicated package for this.

Teardown

It's always challenging to connect a private API to your Angular application as all your source code is basically public.

To overcome this challenge you can use a cloud function which holds the secret key to an API you want to use within the process environment and therefore sheltered from the outside world.

To make this even more secure you could also make the cloud function only callable from your domain, but by preventing access to your key you've already taken the most important step to building a landing page with Angular.

If you want to see the full process in action, you can find a video version of this tutorial below.

Want more tutorials?
Follow me on Dev.to and join my weekly newsletter ✌️

Building a Native Mobile App with Next.js and Capacitor

Simon Grimm — Tue, 08 Nov 2022 14:46:47 +0000

If you are using Next.js to build a web app, you can easily benefit from Capacitor and make your web app a native mobile app without any big changes or learning something new!

I've previously talked about how to build a native mobile app using React with Capacitor and intentionally without React Native - and you can do the same for most Next.js applications.

In this tutorial we will start with a new Next.js app and move into native land using Capacitor and eventually also add Ionic for an improved mobile UI, although the last step is completely optional.

About Capacitor

Unlike React Native, Capacitor can simply be dropped into any web project and helps to wrap your whole application into a native webview.

Capacitor then generates the native Xcode and Android Studio project for you, and afterwards only syncs your changes to that project.

Additionally you can use Capacitor plugins (which we will do) to access native device functionality like the camera through a JS bridge.

Because Capacitor has a super slim API and not a lot of functionality, it's very easy to integrate it into any web project while still giving you an amazing native mobile app in the end.

Preparing Your Next.js App

There are different ways to start React applications, but for the sake of this tutorial let's use the easiest one that will give us a blank new Next.js application:

npx create-next-app my-app

To build a native mobile app in the end we need an export of our project, so let's add a simple script to our package.json which we can use to build and export the Next project:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "static": "next build && next export"
  },

When executing the command I got errors, because image optimization won't work in this setting.

Therefore open up the next.config.js and change it to:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    experimental: {
        images: {
            unoptimized: true
        }
    }
};

module.exports = nextConfig;

Now you can safely run npm run static and you should see a new out folder at the root of your project.

This folder will later be used by Capacitor, but first of all we need to set it up correctly.

Adding Capacitor to Your Next.js App

To wrap any web app into a native mobile container we need to take a few steps - but those have to be done just one initial time, later it's as easy as running a sync command.

First of all we can install the Capacitor CLI as a development dependency and then initialise it in our project - you can press enter during the dialog to use the defualt values for name and bundle ID.

After that we need to install the core package and the respective packages for the iOS and Android platform.

Finally you can add the platforms, and Capacitor will create the folders for each platform at the root of your project:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

At this point you should see a new ios and android folder in your React project.

Those are real native projects!

To open the Android project later you should install Android Studio, and for iOS you need to be on a Mac and install Xcode.

Additionally you should see a capacitor.config.ts in your project, which holds some basic settings for Capacitor that are used during sync. The only thing you need to worry about is the webDir which should point to the output of your build command - right now this is incorrect.

To fix this, open the capacitor.config.json and change the webDir:

{
    "appId": "com.example.app",
    "appName": "my-app",
    "webDir": "out",
    "bundledWebRuntime": false
}

Now you can give it a try by running the following commands:

npm run static
npx cap sync

The first command will simply build your Next.js project and export the static build, while the second command will sync all the web code into the right places of the native platforms so they can be displayed in an app.

Additionally the sync command might update the native platforms and install plugins, so when you install a new Capacitor plugins it's time to run sync again.

Without noticing you are now actually done, so let's see the app on a device!

Build and Deploy native apps

If you never touched a native mobile project, you can easily open both native projects through the Capacitor CLI:

npx cap open ios
npx cap open android

Inside Android Studio you now just need to wait until everything is ready, and you can deploy your app to a connected device without changing any of the settings!

After that it's as easy as hitting play and run the app on your connected device which you can select at the top!

Congratulations, you have just deployed your Next.js web app to a mobile device!

But hold on, there's also a way to do this in a faster way during development...

Capacitor Live Reload

By now you are used to having hot reload with all modern frameworks, and we can have the same functionality even on a mobile device with minimum effort!

The idea is to make your locally served app with live reload available on your network, and the Capacitor app will simply load the content from that URL.

First step is figuring out your local IP, which you can get on a Mac by running:

ipconfig getifaddr en0

On Windows, run ipconfig and look for the IPv4 address.

Now we only need to tell Capacitor to load the app directly from this server, which we can do right in our capacitor.config.ts with another entry:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
    appId: 'com.example.app',
    appName: 'my-app',
    webDir: 'out',
    bundledWebRuntime: false,
    server: {
        url: 'http://192.168.x.xx:3000',
        cleartext: true
    }
};

export default config;

Make sure you use the right IP and port, I've simply used the default Next.js port in here.

To apply those changes we can now copy over the changes to our native project:

npx cap copy

Copy is mostly like sync, but will only copy over the changes of the web folder and config, not update the native project.

Now you can deploy your app one more time through Android Studio or Xcode and then change something in your React app - the app will automatically reload and show the changes!

Caution: If you install new plugins like the camera, this still requires a rebuild of your native project because native files are changed which can't be done on the fly.

Using Capacitor Plugins

We have teased this a few times, now let's see the usage of a Capacitor plugin in action. For this we can install a quite simple one by running:

npm i @capacitor/share

There's nothing fancy about the Share plugin, but it anyway brings up the native share dialog! For this we now only need to import the package and call the according share() function from our app, so let's change the pages/index.js to this:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { Share } from '@capacitor/share';

export default function Home() {
    const share = async () => {
        await Share.share({
            title: 'Simons YT Channel',
            text: 'Learn to build awesome mobile apps!',
            url: 'https://www.youtube.com/simongrimmdev_',
            dialogTitle: 'Share with friends'
        });
    };

    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className={styles.main}>
                <h1 className={styles.title}>
                    Welcome to <a href="https://nextjs.org">Simonics!</a>
                </h1>

                <p className={styles.description}>
                    <h2>Cool channel</h2>
                    <a onClick={() => share()}>Share now!</a>
                </p>
            </main>
        </div>
    );
}

As said before, after installing new plugins we need to run one sync and then redeploy the app to our device:

npx cap sync

Now hit that button and witness the beautiful native share dialog!

But the button doesn't look mobile friendly without any styling, so let me introduce you to my favourite UI component library for web apps next (no pun intended).

Adding Ionic UI

I've worked years with Ionic to build awesome cross platform applications and it's one of the best choices if you want a really great looking mobile UI that adapts to iOS and Android specific styling.

I even run a full blown online school where you can learn everything Ionic!

To use it, we only need to install the Ionic react package:

npm install @ionic/react

Additionally Ionic usually ships with Ionicons, a great icon library that again adapts to the platform it's running on. Let's also add it by running:

npm install ionicons

Because Next handles the build and export slightly different than usual we also need another plugin to fix a bug that we would get right now if we wanted to use any Ionic component. For this, install the following package:

npm install next-transpile-modules

Now we need to include the package and all libraries from Ionic in the next.config.js like this:

const withTM = require('next-transpile-modules')([
    '@ionic/react',
    '@ionic/core',
    '@stencil/core',
    'ionicons'
]);

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    experimental: {
        images: {
            unoptimized: true
        }
    }
};

module.exports = withTM(nextConfig);

Doesn't feel cool, but at the time writing this was required to use Ionic UI components with Next.js!

Because we haven't had enough pain, there's also a problem with the hydration of Ionic components when using server side rendering, so we effectively need to turn off SSR.

What I found works best is described in this article, so let's create a new file components/NoSSRWrapper.jsx and insert the following:

import dynamic from 'next/dynamic';
import React from 'react';

const NonSSRWrapper = (props) => <React.Fragment>{props.children}</React.Fragment>;
export default dynamic(() => Promise.resolve(NonSSRWrapper), {
    ssr: false
});

We can now surround the rest of our components with this wrapper and fix one bug - but we also need to take care of actually loading Ionic and its styling!

For this we can bring in a bunch of CSS imports and most important call the setupIonicReact() because otherwise you will see a blank white page.

For all of this, open the pages/_app.js and change it to this:

import '../styles/globals.css';
import Head from 'next/head';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css'; // Remove if nothing is visible
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import { setupIonicReact } from '@ionic/react';

setupIonicReact();

import NonSSRWrapper from '../components/NoSSrWrapper';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app" />
                <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <NonSSRWrapper>
                <Component {...pageProps} />
            </NonSSRWrapper>
        </>
    );
}

export default MyApp;

I've also added a little meta tag in here to set the viewport-fit because Ionic components will like this setting way more. Trust me.

Now we are free to use any of the Ionic UI components so I'm just adding a little header bar to our app and change our one click handler to use a real button UI.

To use those components we need to import them separately, and because you might not like a mobile friendly status bar on the web you could also surround this with a little platform check that's part of Capacitors core package - very handy and convenient!

Finish up the tutorial by changing your pages/index.js to this now:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { Share } from '@capacitor/share';
import { IonHeader, IonTitle, IonToolbar } from '@ionic/react';
import { Capacitor } from '@capacitor/core';

export default function Home() {
    const share = async () => {
        await Share.share({
            title: 'Simons YT Channel',
            text: 'Learn to build awesome mobile apps!',
            url: 'https://www.youtube.com/simongrimmdev_',
            dialogTitle: 'Share with freiends'
        });
    };

    return (
        <div>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            {Capacitor.isNativePlatform() && (
                <IonHeader>
                    <IonToolbar color="primary">
                        <IonTitle>Simons Capacitor App</IonTitle>
                    </IonToolbar>
                </IonHeader>
            )}

            <main className={styles.main}>
                <h1 className={styles.title}>
                    Welcome to <a href="https://nextjs.org">Simonics!</a>
                </h1>
                <ion-button color="success" onClick={() => share()}>
                    Share now!
                </ion-button>
            </main>
        </div>
    );
}

If your live reload is out of sync after all the installation just restart everything and then you should see a somewhat native looking mobile app, built with Next.js and Capacitor!

Conclusion

Capacitor is the easiest solution when it comes to building a native application based on your existing web project.

The other common React solution would be React Native, however this usually only allows to share logic and not the actual UI code while we didn't really have to touch the UI at all if we are using Capacitor.

If you enjoyed the tutorial or got any further questions, just drop a comment below!

Adding Sign In with Apple to an Ionic App

Simon Grimm — Tue, 07 Apr 2020 13:29:13 +0000

This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy. Simon also writes about Ionic frequently on his blog Devdactic.

Introduced a while ago, Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID. As of April 2020, this feature is required if you use any sort of 3rd party or social login on iOS (some exclusions apply). This includes Facebook Login, Google Sign-In, Sign in with Twitter, Sign In with LinkedIn, Login with Amazon, or WeChat Login.

The flow of this authentication process is mostly the same as with any other OAuth provider, which means it should be familiar, but it involves a lot of detailed configuration in different places.

To make this process easy for you, we’ll go through all necessary steps together in order to implement this new sign in functionality in your Ionic app using Capacitor. After you are done with the implementation you will have an identity token from Apple that you could use to build a full authentication flow with e.g. Firebase or your own custom backend!

Apple App Configuration

Before we do any coding, we need to configure a few things. First of all, you need an Apple App ID - either create a new one like in the image below or use your already existing ID.

If you need a new one, simply click the plus the create a new identifier inside your Apple developer account.

Besides the regular information, it’s important that you enable Sign In with Apple further down the page in the list of capabilities.

You will later need the bundle ID you specified in here, so leave the tab open or remember it.

Setting up Your Ionic App

Now we can get into some code. Let’s start by creating a new Ionic app with a blank template and Capacitor integration:

ionic start appleApp blank --type=angular --capacitor
cd ./appleApp
npm i https://github.com/rlfrahm/capacitor-apple-login

We only need to install the Capacitor community plugin for Apple Sign In to implement the Apple Sign-in additionally.

If you haven’t done during initialization you also need to make sure Capacitor uses the right Bundle ID for your app, so open the capacitor.config.json and insert the name of the App ID that you created in our first step:

{
  "appId": "com.devdactic.appleauth",
  "appName": "appleApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {}
}

To add the iOS project and build the native app through Capacitor you can now simply run:

ionic build
npx cap add ios

# Whenever you make changes
ionic build && npx cap copy

Now we just need a few more lines...

Building the Apple Sign In Flow

First of all, you should check on which platform your app runs, since the plugin we installed only works for native iOS apps.

For the login process, you only need to call the Authorize() function on the Capacitor plugin, which will then trigger the native Apple dialog. Once we get the result, we can use the token to perform any kind of other operation or authentication against another service.

You can now change your app/home/home.page.ts to:

import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { Plugins } from '@capacitor/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  showAppleSignIn = false;
  user = null;
  constructor(private alertController: AlertController) {}
  async ngOnInit() {
    const { Device } = Plugins;
    // Only show the Apple sign in button on iOS

    let device = await Device.getInfo();
    this.showAppleSignIn = device.platform === 'ios';
  }

  openAppleSignIn() {
    const { SignInWithApple } = Plugins;
    SignInWithApple.Authorize()
      .then(async (res) => {
        if (res.response && res.response.identityToken) {
          this.user = res.response;
        } else {
          this.presentAlert();
        }
      })
      .catch((response) => {
        this.presentAlert();
      });
  }

  async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Login Failed',
      message: 'Please try again later',
      buttons: ['OK'],
    });
    await alert.present();
  }
}

The response you get from Apple will have the following structure (for successful authentication):

{
  "response": {
    "email": "foo@bar.com",
    "identityToken": "importantToken",
    "familyName": "Grimm",
    "user": "AppleUserId",
    "givenName": "Simon",
    "authorizationCode": "authCode"
  }
}

The response also depends on whether the users allow to show the email or hide it, in the latter case you will receive a more anonymous email from Apple which will forward all emails to the real user email.

It’s also important to note that you will see this full response only during the first successful sign in. After that, the familyName, givenName and email fields will be null, so be cautious if you use the information of this token to update your user records!

Note: I’ll show you a way to reset the whole process at the end so you can test it more than once!

Now the view is actually the most boring part of this tutorial - simply add a button and perhaps surround everything with a little check on the user, so we can print out all the user information from the token if we are logged in.

The following code goes to your app/home/home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Apple Sign In
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <ion-card *ngIf="!user; else welcome">
    <ion-card-content>
      <ion-button expand="full" (click)="openAppleSignIn()" *ngIf="showAppleSignIn">
        <ion-icon name="logo-apple" slot="start"></ion-icon>
        Sign in with Apple
      </ion-button>
    </ion-card-content>
  </ion-card>

  <ng-template #welcome>
    <ion-card>
      <ion-card-header>
        <ion-card-title>Welcome back!</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        {{ user | json }}
      </ion-card-content>
    </ion-card>
  </ng-template>

</ion-content>

Now we are ready, but in order to run everything successfully we also need to apply a little change to our native project.

Xcode Settings

You should have already added the iOS platform by now, so run a new build with your code changes and then open the workspace file of your project either from finder or by running:

npx cap open ios

Inside the Xcode project, we need to navigate to Signing & Capabilities -> Add Capability, and from the list select Sign In with Apple like you did in our first step inside your Apple identifier as well.

Now you can finally build the app on your device and go through the Apple Sign In flow - and you should also see the identity token of the Apple response printed in your card!

Testing Apple Sign In

In most cases, you want to test the process a few times, but after going through the initial dialog once, you won’t see it again, even if you uninstall the app.

But here’s a fix to reset your data that allows you to perform everything fresh again: Inside your iOS device, open the settings app and navigate to Apple ID -> Password & Security -> Apple ID logins. In this screen, you can see all the apps where you used Apple Sign In, and you can simply delete the entry for your own app.

Now you can test the process again inside your app, and the initial dialog to sign in will show up again like in the image you see below.

Conclusion

Implementing the new Apple Sign In flow is certainly not hard from a code perspective, but it’s important to configure everything correctly in order to make it work.

Of course, this is not yet a full authentication mechanism - you could add something like Firebase to the mix and pass the identity token to Firebase and create users based on that data. If you want to see a post about that as well just leave a comment and I’m happy to share it with the community!

For everyone still using Cordova, you can of course also use a Cordova plugin instead of Capacitor - the process will mostly be the same.

If you want to learn more about Ionic with a library of 40+ courses and supportive community, you can also join the Ionic Academy and get access to a ton of learning material.

And don’t forget to subscribe to my YouTube channel for fresh Ionic tutorials coming every week!

Building an Ionic 4 Firebase Location Tracker with Capacitor & Google Maps

Simon Grimm — Fri, 28 Jun 2019 14:15:19 +0000

With Capacitor 1.0 just days ago released it’s time to get into it – and what would be a better scenario than refreshing and updating one of the most read tutorials?

In this tutorial we will go through the steps of building a Capacitor App with Ionic 4, Firebase integration and Google maps.

This means we will combine different technologies but none of them on their own are hard to handle, so just follow along and you’ll have your first Capacitor app ready soon!

Setting up our Ionic App, Capacitor & Firebase

As a small prerequisite make sure you got a Firebase app, so simply create a free account and start a new project like you can also see in my previous Firebase tutorial!

To use Capacitor you don’t have to install anything specific, and you got two options for integration:

Start a new Ionic project and automatically integrate it
Add Capacitor to an existing project

We are going with the first option, but the second works totally fine as well.

So simply run the commands below to create a new project, build the project once (which is important) and then you can add the native platforms:

ionic start devdacticTracking blank --capacitor
cd devdacticTracking
npm install firebase @angular/fire

// Build at least once to have a www folder
ionic build

npx cap add android
npx cap add ios

We will use a geolocation plugin from Capacitor, and normally Cordova would add some permissions for iOS and Android automatically.

However, Capacitor is different. You can read more about it in the release post and as well in the information about native projects.

In general this means that the native iOS/Android project should now be a real part of your project – not just an autogenerated folder that you don’t touch!

Therefore, you will have to get into the native projects and specify the right permissions like described for iOS and Android.

But from my observation, the iOS changes were already applied upfront.

If you run into problems on your Mac also make sure to check your pods version:

pod --version #should be >= 1.6
# Update if needed
sudo gem install cocoapods
pod setup

So if needed update your pods which are a system like NPM for native iOS apps that manages dependencies.

Now your Capacitor app is basically ready but we need to integrate a few more things.

Preparing our App

As we want to show a map with locations we need an API key from Google. Apparently this can be done in seconds following this link and generating a new key.

Once you got the key, open your index.html and add this snippet at the end of the head block:

<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY"></script>

Now we also need to tell our app about Firebase, and as we are using Angularfire we need to initialize it with the information from Firebase.

In the previous part you should have created a Firebase project, and now it’s time to copy the project settings that you should see after you have added a platform to your project. The information goes straight to your environments/environment.ts file and should look like this:

export const environment = {
  production: false,
  firebase: {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  }
};

Now we just need to load this environment information in our app/app.module.ts and also import the Auth and Store module so we got access to all the functionality that we need:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { environment } from '../environments/environment';

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

As we are using a simply anonymous login make sure to enable it inside your Firebase authentication settings as well!

We don’t need anything else for Capacitor as we have set up our app with it and it was already included. The geolocation plugin is already part of the core API!

Building our Geolocation Tracker

Now it’s time to get to the meat of the article, in which we build and combine everything.

First of all our app needs to load the Google map on startup, and to prevent any Typescript errors we can simply declare the variable google at the top. Remember, we have added the maps script to our index.html so we don’t need any other package.

We will also automatically sign in a user – anonymously. This makes the tutorial a bit easier but of course you could simply add a login and authentication system as well.

There are great courses on this topic inside the Ionic Academy as well!

After the automatic login we establish a connection to our Firebase collection at locations/${this.user.uid}/track. This means, we can store geolocation points for each anon user in their own separate list.

Now go ahead and add this first bit of code to your app/home/home.page.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import {
  AngularFirestore,
  AngularFirestoreCollection
} from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { Plugins } from '@capacitor/core';
const { Geolocation } = Plugins;

declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  // Firebase Data
  locations: Observable<any>;
  locationsCollection: AngularFirestoreCollection<any>;

  // Map related
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  markers = [];

  // Misc
  isTracking = false;
  watch: string;
  user = null;

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {
    this.anonLogin();
  }

  ionViewWillEnter() {
    this.loadMap();
  }

  // Perform an anonymous login and load data
  anonLogin() {
    this.afAuth.auth.signInAnonymously().then(res => {
      this.user = res.user;

      this.locationsCollection = this.afs.collection(
        `locations/${this.user.uid}/track`,
        ref => ref.orderBy('timestamp')
      );

      // Make sure we also get the Firebase item ID!
      this.locations = this.locationsCollection.snapshotChanges().pipe(
        map(actions =>
          actions.map(a => {
            const data = a.payload.doc.data();
            const id = a.payload.doc.id;
            return { id, ...data };
          })
        )
      );

      // Update Map marker on every change
      this.locations.subscribe(locations => {
        this.updateMap(locations);
      });
    });
  }

  // Initialize a blank map
  loadMap() {
    let latLng = new google.maps.LatLng(51.9036442, 7.6673267);

    let mapOptions = {
      center: latLng,
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }
}

There will be errors as some functions are still missing but we’ll get there now.

You can see that we also apply the standard map() on the Firebase collection data which is needed to also retrieve the ID from the objects! And the ID again is needed to later reference and remove a single entry.

We’ll also subscribe to any changes to the array and update our map once we got new data in order to display all marker (and clean old markers).

Now we can also dive into Capacitor and basically use it like you have previously used Cordova and Ionic native. We watch for any location changes and whenever we get a new position, we will add the geolocation with a timestamp to Firebase using our locationsCollection.

I’d say more about it but that’s already all the magic going on here – it’s that easy!

Now append the following functions inside your app/home/home.page.ts:

// Use Capacitor to track our geolocation
startTracking() {
  this.isTracking = true;
  this.watch = Geolocation.watchPosition({}, (position, err) => {
    if (position) {
      this.addNewLocation(
        position.coords.latitude,
        position.coords.longitude,
        position.timestamp
      );
    }
  });
}

// Unsubscribe from the geolocation watch using the initial ID
stopTracking() {
  Geolocation.clearWatch({ id: this.watch }).then(() => {
    this.isTracking = false;
  });
}

// Save a new location to Firebase and center the map
addNewLocation(lat, lng, timestamp) {
  this.locationsCollection.add({
    lat,
    lng,
    timestamp
  });

  let position = new google.maps.LatLng(lat, lng);
  this.map.setCenter(position);
  this.map.setZoom(5);
}

// Delete a location from Firebase
deleteLocation(pos) {
  this.locationsCollection.doc(pos.id).delete();
}

// Redraw all markers on the map
updateMap(locations) {
  // Remove all current marker
  this.markers.map(marker => marker.setMap(null));
  this.markers = [];

  for (let loc of locations) {
    let latLng = new google.maps.LatLng(loc.lat, loc.lng);

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: latLng
    });
    this.markers.push(marker);
  }
}

When we start the tracking we also keep track of the ID so we can later clear our watch with that ID again.

And regarding our map – we don’t really got the code completion here but all of this is documented by Google pretty well. So whenever we want to update our markers, we set the map to null on all existing markers and then create new ones. Feel free to improve this logic of course by keeping the old ones and only changing what needs to be changed.

If you now also want to draw a route between these points, check out my tutorial on creating a Geolocation tracker!

We now just want to get our map, a few buttons to start/stop the tracking and a list to see our Firebase data update in realtime, so in general just some basic elements.

Note that our locations array is still an Observable so we need to use the async pipe to automatically get the latest data here.

Also, we are using a sliding item so we can pull in that little remove icon from one side and get rid of positions that we don’t want to have in our list!

Now change your app/home/home.page.html to:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Devdactic Tracking
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div #map id="map" [hidden]="!user"></div>

  <div *ngIf="user">

    <ion-item>
      <ion-label>User ID: {{ user.uid }}</ion-label>
    </ion-item>

    <ion-button expand="block" (click)="startTracking()" *ngIf="!isTracking">
      <ion-icon name="locate" slot="start"></ion-icon>
      Start Tracking
    </ion-button>

    <ion-button expand="block" (click)="stopTracking()" *ngIf="isTracking">
      <ion-icon name="hand" slot="start"></ion-icon>
      Stop Tracking
    </ion-button>

    <ion-list>
      <ion-item-sliding *ngFor="let pos of locations | async">
        <ion-item>
          <ion-label text-wrap>
            Lat: {{ pos.lat }}
            Lng: {{ pos.lng }}
            <p>
              {{ pos.timestamp | date:'short' }}
            </p>
          </ion-label>
        </ion-item>

        <ion-item-options side="start">
          <ion-item-option color="danger" (click)="deleteLocation(pos)">
            <ion-icon name="trash" slot="icon-only"></ion-icon>
          </ion-item-option>
        </ion-item-options>

      </ion-item-sliding>
    </ion-list>

  </div>

</ion-content>

Right now you wouldn’t see the map as it needs some CSS to be seen. You can start with the following in your app/home/home.page.scss but of course play around with it so it fits your needs!

#map {
  width: 100%;
  height: 300px;
}

Now you can run the app on your browser, you should be able to get your location (yes, Capacitor plugins work directly in your browser!) and you can also fake your location in Chrome to see new points added without leaving the house:

Inside the debugging area click on the 3 dots -> More tools -> Sensors.

From there you can control your Geolocation and fake it to other places!

Build your Ionic + Capacitor App

If you now want to build the native project, for example iOS, you simply run:

npx cap sync
npx cap open ios

Capacitor works different as said in the beginning – the native projects persists and we only sync our web app files with the native project. This also means, your build is way faster than with Cordova before!

Conclusion

Although he initial task might have sounded intimidating, it’s actually super easy to combine all of these services and technologies. Even within a website and not a real app!

There’s a lot more to say about Capacitor and I’ll talk about it soon. If you want to see anything specific with Capacitor just leave me a comment below.

You can also watch a video version of this article below.

https://www.youtube.com/watch?v=Sq0NbvQihrk

DEV Community: Simon Grimm

Sign in with Apple using Supabase and Ionic Angular

Setup a Supabase Project

Sign in with Apple Configuration

Supabase Project Configuration

Sign in with Apple from Ionic Angular

Hosting your App with Netlify

Testing Sign in with Apple

Conclusion

How to Create an Expandable Card Using IONIC REACT

Prerequisite

Framer Motion

Setup

Create Layers

Create List of Cards

Add Click Events to Open and Close Popup

Create Popup Element

Add Shared Element Transition

Polishing up the Animations

Conclusion

Further Reading

Angular Material Mobile App with Capacitor

Creating an Angular Material Sidenav

Adding Navigation with different Routes

Adding Capacitor to our Angular Project

Build and Deploy native apps

Capacitor Live Reload

Fixing the Mobile UI of Angular Material

Recap

Building an Angular App with Airtable & Netlify Functions

Creating an Airtable Table

Creating the Angular Project

Creating the Angular Landing Page

Adding a Netlify Cloud Function to the Angular Project

Host our Angular App with Netlify

Adding Tailwind

Adding Meta Tags

Teardown

Building a Native Mobile App with Next.js and Capacitor

About Capacitor

Preparing Your Next.js App

Adding Capacitor to Your Next.js App

Build and Deploy native apps

Capacitor Live Reload

Using Capacitor Plugins

Adding Ionic UI

Conclusion

Adding Sign In with Apple to an Ionic App

Apple App Configuration

Setting up Your Ionic App

Building the Apple Sign In Flow

Xcode Settings

Testing Apple Sign In

Conclusion

Building an Ionic 4 Firebase Location Tracker with Capacitor & Google Maps

Setting up our Ionic App, Capacitor & Firebase

Preparing our App

Building our Geolocation Tracker

Build your Ionic + Capacitor App

Conclusion