DEV Community: rpostulart

I Built Jira for AI Agents - Here's why your AI Coding Assistant needs its own project management

rpostulart — Fri, 27 Mar 2026 05:33:50 +0000

Think about it. Your AI agent refactors code across 12 files, makes architectural decisions, tries three approaches before settling on one, and fixes a subtle race condition. Then it commits with the message "fix bug" and all that context is gone forever.

We'd never accept this from a human developer. Why do we accept it from the tool that's increasingly writing most of our code?

AI agents need their own project management

I'm not talking about giving Claude a Jira API key. I'm talking about project management that's native to how agents work: plain files, git commits, and context windows.

That's what I built. Claude Project Tracker is Jira for AI agents — a .project/ folder you drop into any repo where your AI agent creates its own tickets, documents every decision, maintains a wiki, and closes issues when done.

No database. No SaaS. No monthly fee. Just files in git.

What it looks like in practice

You: "Fix the login timeout bug"

Claude Code:
  → Creates PROJ-1: "Fix login timeout bug"
  → Status: in-progress
  → Comment: "Investigating auth.ts — timeout at line 42"
  → Comment: "Root cause: token refresh waits for expired session"  
  → Comment: "Tried: extending timeout. Failed: masks the real issue"
  → Comment: "Fix: early return on expired tokens. Modified auth.ts, middleware.ts"
  → Updates wiki: Solutions → Authentication
  → Commits: fix(auth): resolve login timeout [PROJ-1]
  → Status: done

That's not me writing comments. That's the agent documenting its own work as it goes.

Three weeks later when the bug resurfaces:

You: "Login is broken again, check PROJ-1"

Claude Code:
  → Reads full ticket history
  → Knows the root cause, what was tried, what worked
  → Picks up with complete context

Why not just use Jira / Linear / GitHub Issues?

Because those tools are designed for humans, not agents.

The mismatch:

Human PM tools	Agent-native PM
Requires API integration	Reads/writes files directly
SaaS with auth, permissions, billing	Plain files in your repo
Designed for manual updates	Agent updates automatically
Separate from code	Lives next to code
Merge conflicts on shared state	Append-only, conflict-free

Claude Code's superpower is that it reads and writes files. It doesn't need a REST API to create a ticket — it creates a folder with a JSON file and a Markdown description. It doesn't need a webhook to add a comment — it writes a new file to the comments directory.

The file system is the API.

The architecture

.project/
├── config.json
├── issues/
│   └── PROJ-1/
│       ├── issue.json         # status, priority, labels
│       ├── description.md     # what was requested
│       └── comments/
│           ├── 001.json       # "Investigating auth.ts..."
│           ├── 002.json       # "Root cause found..."
│           └── 003.json       # "Fixed. 2 files modified."
├── wiki/
│   ├── _index.json            # page tree structure
│   └── pages/
│       ├── steering.md        # your rules for the agent
│       └── solutions-auth.md  # auto-generated docs
└── boards/
    └── default.json           # kanban column config

Why this structure:

One folder per issue — atomic git operations, clean diffs
Comments as individual files — append-only means zero merge conflicts, even with multiple agents
Wiki as Markdown — equally readable by humans and AI
No database — works offline, no setup, no migrations, no backups

Steering files: your agent's operating manual

This is where it gets interesting. You create wiki pages called "steering files" that the agent reads before every task:

Coding Standards:

Use TypeScript strict mode. Prefer Tailwind. No inline styles.

Architecture:

All API endpoints return { data, error } envelope. Use Zod for validation.

Conventions:

snake_case for DB columns. camelCase for JS. Components in PascalCase.

Your agent follows these automatically. No more repeating yourself every session. No more "I told you yesterday to use strict mode."

The web UI

Agents work in terminals. Humans like boards. So it ships with both.

The web UI gives you:

Kanban board — drag-and-drop across columns, time filter on completed work
List view — sortable, filterable, paginated
Wiki editor — tree navigation, search, Markdown editing
Skill manager — create slash commands from the browser

deno run --allow-net --allow-read --allow-write --allow-env server.ts
# → http://localhost:8000

Slash commands

The tracker installs as Claude Code skills:

Command	What it does
`/track-work`	Start a task with full audit trail
`/create-issue`	Create a new tracked issue
`/standup`	Summarize recent activity across all issues
`/review-ticket`	Read a ticket's complete history
`/wiki-update`	Create or update a wiki page
`/document-completion`	Auto-document finished work in the wiki

One-line install

From inside any git repo:

curl -sL https://raw.githubusercontent.com/rpostulart/Claude-Project-Tracker/main/init.sh | bash

That creates the .project/ folder, installs Claude Code skills, and generates a CLAUDE.md that tells Claude to track everything automatically.

The bigger picture

Here's what I think is happening: AI agents are becoming the primary producers of code. Not assistants. Not copilots. Producers.

And producers need project management. Not human PM tools with AI bolted on — but PM tools designed from the ground up for how agents work.

That means:

Files over APIs — agents think in files
Git over databases — the audit trail already exists
Context over dashboards — agents need ticket history in their context window, not a pretty UI
Append-only over CRUD — agents working in parallel need conflict-free writes

Claude Project Tracker is a first step. It works with Claude Code today. The file format is open, and there's no reason Cursor, Aider, Codex, or any future agent couldn't adopt the same structure.

Try it

GitHub: github.com/rpostulart/Claude-Project-Tracker

MIT license. Open source. Feedback welcome. Spread the word.

I'd especially love to hear:

What would you want your AI agent to track that it currently ?
What's the biggest "I wish I knew what Claude did" moment you've had?

Drop a comment or open an issue on GitHub.

The guide to set up NextJS Authentication and data fetching with AWS Amplify Gen2

rpostulart — Mon, 20 Nov 2023 20:42:30 +0000

Amplify, with its powerful suite of tools and seamless integration, truly revolutionizes the development experience. From its intuitive interface to its extensive range of functionalities, Amplify stands for innovation, empowering creators to bring their visions to life with ease. Its ability to streamline workflows and accelerate the development process makes it a go-to choice for many, especially with the new Amplify Gen 2.

Amplify Gen 2: A new way of working that fully supports Typescript.

Most of the instructions you can follow from:
https://docs.amplify.aws/gen2/start/quickstart/

Always look first at this site for the latest updates.

Get started
Create a data SCHEMA
Set up Authentication
Nextjs APP Router and Authentication
Add data to your event page
Test your app
Deploy to the cloud
Conclusion

Get started

Create a new installation of nextJS app. I am a fan of Tailwind and also to have a src folder. Of course you can change this. Replace APPNAME with the name of your app.



npm create next-app@14 --APPNAME --typescript --eslint --no-app --src-dir --tailwind --import-alias '@/*'

In your project run:



npm create amplify
? Where should we create your project? (.) # press enter

Set up your local environment

Follow this instruction to set up your local account and environment. Amplify Gen2 differs from Gen1 because you need a sandbox to develop locally.

So make sure you run this:



amplify sandbox --profile <value>

Create a data SCHEMA

Open up your created project in your favourite IDE and Open this folder and file:
/amplify/data/resource.ts

We will create an app where events can be created and those events you can search, based on city that you are living in. You need to be logged in to be able to search the events. We have these fields: name, date, description and city.

Adjust the file with this content:



import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({
  Event: a
    .model({
      name: a.string(),
      date: a.datetime(),
      description: a.string(),
      city: a.string()
    })
    .authorization([a.allow.owner(),  a.allow.private()]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool',
  },
});

Set up Authentication

Open this file:
/amplify/auth/resource.ts

This file will deploy AWS Cognito resources. We will not make adjustments to that for now. But you can add for example MFA of add external identity providers like Amazon, Google or Facebook and so on.

Nextjs APP Router and Authentication

With Nextjs you can manage authentication on the client and server side. Setting authentication on the server is a little bit more complex but it will meet stronger security requirements. In this example we set up authentication on the server.

Set up Nextjs

Create folders and files in the src folder in NextJS, so you will have this structure:



-src
--app
----(auth)
------events
---------page.tsx
------layout.tsx
----login
------page.tsx
----layout.tsx
----page.tsx
----login
--components
----ConfigureAmplifyClientSide.ts
--utils
----server-utils.tsx
--middleware.ts

The (auth) folder will contain all folders and files for authenticated users. This is not needed, but helps me to have an better overview.

The event page.tsx will get all the events and show them on the page.

page.tsx



const Events = () => {
  return (
    <div className="mx-auto max-w-4xl text-center">
      <h2 className="text-base font-semibold leading-7 text-indigo-600">
        Events
      </h2>
      <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
        Pricing plans for teams of&nbsp;all&nbsp;sizes
      </p>
    </div>
  );
};

export default Events;

layout.tsx in (auth) folder:
This is the root layout file for all the pages within the (auth) folder



"use client";
import { Header } from "@/components/Header";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="bg-white">
      <Header />
      <main className="isolate">
        <div className="sm:pt-12">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">{children}</div>
        </div>
      </main>
    </div>
  );
}

page.tsx in login folder:
This page will take care of the user authentication with AWS Amplify Authenticator component. The middleware file will redirect a user to the login page when there is no authenticated user. On the login page we will track the origin route and redirect the user to that page after logging in.



"use client";

import { withAuthenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import { useSearchParams } from "next/navigation";
import { redirect } from "next/navigation";

const Login = () => {
  const searchParams = useSearchParams();

  const origin = searchParams.get("origin");
  if (origin) {
    redirect(origin);
  }

  return <div>LOGIN</div>;
};

export default withAuthenticator(Login);

layout.tsx in app folder
The root layout is the standard file that is created when you ran npm create next-app@14. Please replace it with this content.




import ConfigureAmplifyClientSide from "@/components/ConfigureAmplifyClientSide";
import "./globals.css";
import { Amplify } from "aws-amplify";
import amplifyconfiguration from "@/amplifyconfiguration.json";

Amplify.configure(amplifyconfiguration);

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <>
          <ConfigureAmplifyClientSide />
          {children}
        </>
      </body>
    </html>
  );
}

Create ConfigureAmplifyClientSide.ts in the components folder. This file will make sure that Ampify API and services are available on the server side.



"use client";

import { Amplify } from "aws-amplify";
import config from "@amplifyconfiguration.json";

Amplify.configure(config, { ssr: true });

export default function ConfigureAmplifyClientSide() {
  return null;
}

server-utils.tsx in utils folder
This component is needed to have access to AWS Amplify services and API's on the server side.



import { createServerRunner } from "@aws-amplify/adapter-nextjs";
import config from "@/amplifyconfiguration.json";

export const { runWithAmplifyServerContext } = createServerRunner({
  config,
});

middleware.tsx in app folder
Like mentioned before this component handle your routes before the actual page is loaded. If there is no auth session then redirect to login page and otherwise show requested page.

In matcher: ["/events/:path*"] add the pages that you want to be authenticated. You can also do it the other way around. So have everything authenticated , except ...



import { fetchAuthSession } from "aws-amplify/auth/server";
import { NextRequest, NextResponse } from "next/server";
import { runWithAmplifyServerContext } from "./utils//server-utils";

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  const authenticated = await runWithAmplifyServerContext({
    nextServerContext: { request, response },
    operation: async (contextSpec) => {
      try {
        const session = await fetchAuthSession(contextSpec);
        return session.tokens !== undefined;
      } catch (error) {
        console.log(error);
        return false;
      }
    },
  });

  if (authenticated) {
    return response;
  }

  const parsedURL = new URL(request.url);
  const path = parsedURL.pathname;

  return NextResponse.redirect(new URL(`/login?origin=${path}`, request.url));
}

export const config = {
  // matcher: [
  //   /*
  //    * Match all request paths except for the ones starting with:
  //    * - api (API routes)
  //    * - _next/static (static files)
  //    * - _next/image (image optimization files)
  //    * - favicon.ico (favicon file)
  //    */
  //   // "/((?!api|_next/static|_next/image|favicon.ico|login).*)",
  //   "/((?!api|_next/static|_next/image|favicon.ico|login|events|profile).*)",
  // ],
  // PUT MORE paths to protect to this array
  matcher: ["/events/:path*"],
};

Add data to your event page

Open your root layout file of Nextjs and add these lines:



import { Amplify } from "aws-amplify";
import amplifyconfiguration from "@/amplifyconfiguration.json";

Amplify.configure(amplifyconfiguration);

Update a the event page where the data will be fetched and shown to the user:



// EventsList.tsx

"use client";
import type { Schema } from "../../../../amplify/data/resource";
import { useState, useEffect } from "react";
import { generateClient } from "aws-amplify/api";

const client = generateClient<Schema>();

export default function Events() {
  const [events, setEvents] = useState<Schema["Event"][]>([]);

  const fetchEvents = async () => {
    const { data: items, errors } = await client.models.Event.list();
    setEvents(items);
  };

  useEffect(() => {
    fetchEvents();
  }, []);

  return (
    <div>
      <ul
        role="list"
        className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
      >
        {events.map((item, index) => (
          <li
            key={index}
            className="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow"
          >
            <div className="flex w-full items-center justify-between space-x-6 p-6">
              <div className="flex-1 truncate">
                <div className="flex items-center space-x-3">
                  <h3 className="truncate text-sm font-medium text-gray-900">
                    {item.name}
                  </h3>
                  <span className="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
                    {item.description}
                  </span>
                </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Run your sandbox



npx amplify sandbox --profile YOURPROFILE --config-out-dir src

Test your app

Now your backend is running, let's also start your front end application.



npm run dev

Navigate to http://localhost:3000/events, you should notice that you are redirected to the login page. Create an account and log in. Then you will be redirected to the events page again and you should see events.

Be aware...you first need to create data before data will be shown in your app. You can create pages in your NextJS app or in the AWS Appsync Query Editor in the console.

Now you have evaluated the nextjs setup and have noticed that data is only accessible by authenticated users you can deploy your environment to the cloud.

Deploy to the cloud

Create a GIT repository in one of your favourite GIT providers.

Follow this instruction to connect your GIT repository to AWS Amplify and to deploy your backend stack.

Here is my GIT repo on GITHUB

Conclusion

As you can see, the Amplify team delivers an outstanding result with Amplify Gen 2. NextJS is a great framework to run React applications as well client side as server side. With the last release of new Amplify features to support SSR it is now possible to have a secure solution to add authentication to your application.

Happy developing!

The guide to connect AWS Amplify to any (AWS) service 2.0

rpostulart — Thu, 17 Dec 2020 15:46:00 +0000

I have written a few blogs about Amplify. One of my previous blogs was about how you can connect AWS Amplify to each AWS service with AWS Lambda and include the AWS SDK.

AWS SDK 2.0

When you did

yarn install aws-sdk

the full aws-sdk package (57MB) was installed and then you were able to import services like:

const AWS = require("aws-sdk");
AWS.config.region = "eu-west-1";
const pinpoint = new AWS.Pinpoint();

AWS SDK 3.0

With the release of @AWS-SDK 3.0 you are able to do modular package imports in React Native and Lambda now. For example if your want to access S3 (7 MB) in React Native without the Amplify framework. You can run:

yarn install @aws-sdk/client-s3

Look into this tutorial for more code examples:
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-react-native.html

Example React Native Component

In this example I will create a GeofenceCollection in the AWS Location service. I am making use of AWS Amplify for Authentication via Cognito, the main component is wrapped in withAuthenticator and I have logged in with a known user.

import React, { useEffect, useState } from "react";
import { StyleSheet } from "react-native";
import EditScreenInfo from "../components/EditScreenInfo";
import { Text, View } from "../components/Themed";
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
import Auth from "@aws-amplify/auth";
import {
  LocationClient,
  CreateGeofenceCollectionCommand,
} from "@aws-sdk/client-location";
import awsconfig from "../src/aws-exports"; // if you are using Amplify CLI

function TabOneScreen() {

  useEffect(() => {
    const CreateGeofenceCollection = async () => {
      const credentials = await Auth.currentCredentials();
      console.log(credentials);
      const client = new LocationClient({
        credentials: Auth.essentialCredentials(credentials),
        region: awsconfig.aws_project_region,
      });
      try {
        await client.send(
          new CreateGeofenceCollectionCommand({
            CollectionName: "Ramon",
            PricingPlan: "RequestBasedUsage",
          })
        );
      } catch (e) {
        console.log("Error", e);
      }
    };
    CreateGeofenceCollection();
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab One111</Text>
      <View
        style={styles.separator}
        lightColor="#eee"
        darkColor="rgba(255,255,255,0.1)"
      />
      <EditScreenInfo path="/screens/TabOneScreen.tsx" />
    </View>
  );
}

export default TabOneScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

Make sure you add a policy to the authenticated cognito role:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "geo:CreateGeofenceCollection",
            "Resource": "arn:aws:geo:REGION:ACCOUNTID:geofence-collection/*"
        }
    ]
}

More resources:

AWS-SDK V3 API Docs

https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/index.html

AWS SDK V2 API Docs

These docs are much better, to understand the input params.
https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/

Blog about performance improvement

https://aws.amazon.com/blogs/developer/modular-packages-in-aws-sdk-for-javascript/

Launch announcement

https://aws.amazon.com/blogs/developer/modular-aws-sdk-for-javascript-is-now-generally-available/

Polyfil import

I had some unclear errors, but you need to install and import two additional packages.

import "react-native-get-random-values";
import "react-native-url-polyfill/auto";

See this issue and documentation:
https://github.com/aws/aws-sdk-js-v3/issues/2288#issuecomment-824454312
https://github.com/aws/aws-sdk-js-v3#getting-started

About me

I am a doing (side)projects with technology like AWS Amplify, ReactJS, React Native and EXPO. I am an AWS community builder. I am a huge fan of AWS Amplify and blog about certain topics that come along with it. If you have any questions related to the framework, React of React Native then you can always reach out to me.

Twitter

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

The guide to create (offline) multi tenant apps with Expo and AWS Amplify

rpostulart — Wed, 04 Nov 2020 19:06:22 +0000

Cover photo by David Watkis on Unsplash

Multi tenant

A tenant is a group of users which have the same access rights. With multi tenant you design your application in a way that different tenants can make use of the same software without interfering each other and be in control about their own data assets without the risks that others can access this.

Software as a Service (SaaS)

There are different type of apps that we all use in our daily lives. One type of applications are Software as a Service (SaaS) applications. The characteristics of SaaS is that the hardware and software is abstracted away from you. You don't need to manage this and only consume the features that are provided. You make free use of these apps or you take a subscription model where you pay a monthly / yearly / whatever fee.

These applications are designed in a way that there is a software version running where multiple users can make use of in a secure and isolated way.

Slack

You can see Slack as an example of a Multi tenant Saas Solution. The software and hardware is running somewhere (in their private networks or public cloud). As a company you are able to get a subscription and add the users of your company. Your users can work together and share data in slack which is not accessible to other tenants.

Purpose of this guide

In this guide I will explain how you can set up a multi tenant application with AWS Amplify like Slack.

The power of AWS Amplify is that it connects to different front end frameworks. So, as soon as you have set up this backend you are able to build your front end application on top of the multi tenant backend.

We will build an Expo app. This is easy to set up and test your app.

There are different possibilities of a multi tenant implementation:

1) AWS account per tenant
2) Same AWS account and different DynamoDB tables per tenant
3) Same AWS account and one table for all tenants

I will focus on option 3 because this is the less complex implementation and still secure.

To achieve the implementation there are again different options:

The ideal implementation

The ideal implementation is the one where the server(less) side will check if the user is part of the tenant and it is in the right cognito group. This can be done via the VTL templates in AWS Appsync.

Let's assume we will create this model:

type channel
  @model
  @key(
    name: "channelByTenant"
    fields: ["tenant"]
    queryField: "channelByTenant"
  )
  @auth(
    rules: [
      { allow: owner, ownerField: "owner" }
      { allow: owner, ownerField: "tenant", identityClaim: "custom:tenant" }
      { allow: groups, groups: ["user"], operations: [read] }
      {
        allow: groups
        groups: ["editors"]
        operations: [create, read, update, delete]
      }
    ]
  ) {
  id: ID!
  name: String!
  messages: [message] @connection(keyName: "messageByChannel", fields: ["id"])
  tenant: ID!
  owner: ID!
}

When create a schema like above many templates are generated for you out of the box. As you can see in this schema I apply 4 auth rules.

The above model will allow owner, tenants and users in the group editors to create, read, update and delete and the users in the group users to read.

The problem with the generated templates is that it is applying OR conditions on the rules, like:

#if( !($isStaticGroupAuthorized == true || $isDynamicGroupAuthorized == true || $isOwnerAuthorized == true) )
    $util.unauthorized()
  #end

which means

$isStaticGroupAuthorized => check cognito groups 
$isDynamicGroupAuthorized => check owners and tenants
$isOwnerAuthorized => not applicable now in the model

but we want this multi tenant validation:

// if is not part of tenant, set unauthorized
if( tenant !== custom.tenantid ) {
   unauthorized()
} 

// ELSE if is not the owner or part of the groups, set unauthorized
if( user !== owner || user is not in group users or editors) {
    unauthorized()
}

Of course it is possible to change all the VTL templates, but for one model there are many templates created (see next screenshot) and if you are going to adjust them manually then you will end up with maintainability issues. Imaging if you have more models in your schema.

Each time you adjust your model then your templates are generated again and you have to apply the adjustments again.

Github issue

There is an issue created where this will be solved:
https://github.com/aws-amplify/amplify-cli/issues/317

If this is implemented by the Amplify or Appsync team we can maintain the rules and tenant set up from the schema and based on that the templates will be generated.

Our model will look like this then:

@auth(rules: [
    { and: [
        { allow: owner, ownerField: "tenant", identityClaim: "custom:tenant" } 
        { or: [
            { allow: owner, ownerField: "owner" }   
            { allow: groups, groups: ["user"], operations: [read] }
            { allow: groups groups: ["editors"] operations: [create, read, update, delete] }
        ]}
    ]}
])

Ok ... what to do now?

I am very happy that since two weeks ago datastore is offering selective sync. Which means that we only sync data between the cloud and our app that is part of the tenants. The other tenant data we will leave in the cloud and therefor it is not available to the clients.

AWS Services

I use different AWS services to accomplish this Multi tenant set up.

AWS Cognito

When a tenant creates an account will it be stored in Cognito. This is a service from AWS that handles user and access management for you. Cognito will create the user with an unique user id. This user id will be the tenant ID.

AWS Amplify

AWS Amplify is a library that acts as the glue between front end tools and the backend on AWS. You can use AWS Amplify for setting up your API's, storage, authentication and authorization, database, data store and more. Via AWS Amplify we will design who can access what data and deploy the cloud backend.

A great feature of AWS Amplify is datastore. This is a capability that enables offline data access, manage the syncing of data between clients and cloud and take care of syncing conflicts.

AWS Appsync

AWS AppSync is a fully managed service that makes it easy to develop GraphQL APIs by handling the heavy lifting of securely connecting to data sources like AWS DynamoDB, Lambda, and more.

When you make an API requests the logic of the request is in the resolvers. A resolver has a request mapping and response mapping template. Via the response mapping template we will apply logic that checks if the user is in the right auth group to access the data and if he is part of the right tenant.

AWS DynamoDB

DynamoDB is a NoSQL key-value pair database. It is database that is completely managed for you and that will be deployed via the Appsync schema.

Getting Started

We are going to create a mini Slack app. As a tenant you can add users and channels. The users in your tenant can create messages, only, in the channels which are part of the tenant.

Set up AWS Amplify

We first need to have the AWS Amplify CLI installed. The Amplify CLI is a command line tool that allows you to create & deploy various AWS services.

To install the CLI, we'll run the following command:

$ npm install -g @aws-amplify/cli

Next, we'll configure the CLI with a user from our AWS account:

$ amplify configure

For a video walkthrough of the process of configuring the CLI, click

Set up React Native

First, we'll create the React Native application we'll be working with.
Run these commands in the root dir (so not in your reactJS dir)

$ npx expo init multitenantAPP

> Choose a template: blank

$ cd multitenantAPP

$ npm install aws-amplify aws-amplify-react-native @react-native-community/netinfo

Init your Amplify Project

Now we can initialize a new Amplify project from within the root of our React Native application:

$ amplify init

Here we'll be guided through a series of steps:

Enter a name for the project: multitenantapp (or your preferred project name)
Enter a name for the environment: dev (use this name, because we will reference to it)
Choose your default editor: Visual Studio Code (or your text editor)
Choose the type of app that you're building: javascript
What javascript framework are you using: react-native
Source Directory Path: src
Distribution Directory Path: build
Build Command: npm run-script build
Start Command: npm run-script start
Do you want to use an AWS profile? Y
Please choose the profile you want to use: YOUR_USER_PROFILE
Now, our Amplify project has been created & we can move on to the next steps.

Add Auth to your project

Amplify add auth

Follow these steps:

Do you want to use the default authentication and security configuration? Manual configuration
User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)
Please provide a friendly name for your resource that will be used to label this category in the project: Enter
Please enter a name for your identity pool: Enter
Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) No
Do you want to enable 3rd party authentication providers in your identity pool? No
Please provide a name for your user pool:
How do you want users to be able to sign in? Username
Do you want to add User Pool Groups? Yes
Provide a name for your user pool group: users
Do you want to add another User Pool Group: Y
Provide a name for your user pool group: editors
Do you want to add another User Pool Group: N
Sort the user pool groups in order of preference: Enter
Do you want to add an admin queries API? No
Multifactor authentication (MFA) user login options: OFF
Email based user registration/forgot password: Enabled(Requires per-user email entry at registration)
Please specify an email verification subject: Enter
Please specify an email verification message: Enter
Do you want to override the default password policy for this User Pool? Enter
What attributes are required for signing up? Select email and name by pressing space bar and press enter when finished
Specify the app's refresh token expiration period (in days): Enter
Do you want to specify the user attributes this app can read and write? Y
Do you want to enable any of the following capabilities? Enter
Do you want to enable any of the following capabilities? Select Add user to group
Do you want to use an OAuth flow? No
Do you want to configure Lambda Triggers for Cognito? N
Enter the name of the group to which users will be added. users
Do you want to edit your add-to-group function now? N

So that is it. We need to add a custom tenantid field now. Go to:

Amplify > backend > auth > multitenant......

open the parameters.json and replace this code:

 "userpoolClientWriteAttributes": [
        "email",
        "name"
    ],
 "userpoolClientReadAttributes": [
        "email",
        "name"
    ],

with this code:

 "userpoolClientWriteAttributes": [
        "email",
        "name",
        "custom:tenantid"
    ],
 "userpoolClientReadAttributes": [
        "email",
        "name",
        "custom:tenantid"
    ],

open the .....cloudformation-template.yml and replace this code:

 Schema: 

        -
          Name: email
          Required: true
          Mutable: true

        -
          Name: name
          Required: true
          Mutable: true

with this code:

 Schema: 

        -
          Name: email
          Required: true
          Mutable: true

        -
          Name: name
          Required: true
          Mutable: true

        - 
          Name: tenantid
          Mutable: true
          AttributeDataType: String

push to the cloud first:

Amplify push

Let's create 4 users

Note: make sure you replace certain values with your own values. Do not apply quotes to string values.

Make a the tenant user

Go to the terminal and apply this command:

aws cognito-idp admin-create-user --profile <profileName you made in the Set up AWS Amplify chapter > \
    --user-pool-id <CognitoUserPoolID> \
    --username <EMAIL> \
    --temporary-password temppass \
    --user-attributes 
 Name=email,Value=<EMAIL> \
    --message-action SUPPRESS

make a note of the sub value, something like this: 0cc05b9c-9edf-4be8-87b6-25d7c4e750b6

This ID of the first user, the tenant, will be used when creating the next tenant users.

Make a tenant user in the group users

aws cognito-idp admin-create-user --profile <profileName you made in the Set up AWS Amplify chapter > \
    --user-pool-id <CognitoUserPoolID> \
    --temporary-password temppass \
    --username <EMAIL> \
    --user-attributes 
 Name=email,Value=<EMAIL> 
\
    --message-action SUPPRESS

Now update the attributes:

aws cognito-idp admin-update-user-attributes --profile <profileName> --user-pool-id <CognitoUserPoolID> --username <EMAIL> --user-attributes Name=custom:tenantid,Value=<ID THAT YOU HAVE NOTED> Name=name,Value=<A NAME>

Add this user to the "users" group

aws cognito-idp admin-add-user-to-group --profile <profileName> --user-pool-id <CognitoUserPoolID> --username <EMAIL> --group-name users

Make a tenant user in the group editors

aws cognito-idp admin-create-user --profile <profileName you made in the Set up AWS Amplify chapter > \
    --user-pool-id <CognitoUserPoolID> \
    --temporary-password temppass \
    --username <EMAIL> \
    --user-attributes 
 Name=email,Value=<EMAIL> 
\
    --message-action SUPPRESS

Now update the attributes:

aws cognito-idp admin-update-user-attributes --profile <profileName> --user-pool-id <CognitoUserPoolID> --username <EMAIL> --user-attributes Name=custom:tenantid,Value=<ID THAT YOU HAVE NOTED> Name=name,Value=<A NAME>

Add this user to the "users" group

aws cognito-idp admin-add-user-to-group --profile <profileName> --user-pool-id <CognitoUserPoolID> --username <EMAIL> --group-name editors

Make a user in another tenant in the group editors

aws cognito-idp admin-create-user --profile <profileName you made in the Set up AWS Amplify chapter > \
    --user-pool-id <CognitoUserPoolID> \
    --temporary-password temppass \
    --username <EMAIL> \
    --user-attributes 
 Name=email,Value=<EMAIL> 
\
    --message-action SUPPRESS

Now update the attributes:

aws cognito-idp admin-update-user-attributes --profile <profileName> --user-pool-id <CognitoUserPoolID> --username <EMAIL> --user-attributes Name=custom:tenantid,Value=1 Name=name,Value=<A NAME>

Add this user to the "users" group

aws cognito-idp admin-add-user-to-group --profile <profileName> --user-pool-id <CognitoUserPoolID> --username <EMAIL> --group-name editors

Great job! You have set up your authentication and you have created a tenant with two end users and a complete other tenant user. We will first create some data via the Appsync console and validate our implementation before we are going to build the front end application. But before we can do that we first need to deploy our API.

Add Graphql API to your project

Amplify add api

These steps will take place:

Select Graphql
Enter a name for the API: multitenantapp (your preferred API name)
Select an authorisation type for the API: Amazon Cognito User Pool ( Because we are using this app with authenticated users only, but you can choose other options)
Select at do you want to use the default authentication and security configuration: Default configuration
How do you want users to be able to sign in? Username (with this also the AWS Amplify Auth module will be enabled)
Do you want to configure advanced settings? Yes, I want to make some additional changes
Configure additional auth types? N
Configure conflict detection? Y
Select the default resolution strategy Auto merge
Do you want to override default per model settings? N
Do you have an annotated GraphQL schema? n
Choose a schema template: Single object ...
Do you want to edit the schema now?: n

Your API and your schema definition have been created now. You can find it in you project directory:

Amplify > backend > api > name of your api

Open the schema.graphql file and replace the code with this code.

type channel
  @model
  @key(
    name: "channelByTenant"
    fields: ["tenant"]
    queryField: "channelByTenant"
  )
  @auth(
    rules: [
      { allow: owner, ownerField: "owner" }
      { allow: groups, groups: ["users"], operations: [read] }
      {
        allow: groups
        groups: ["editors"]
        operations: [create, read, update, delete]
      }
    ]
  ) {
  id: ID!
  name: String!
  messages: [message] @connection(keyName: "messageByChannel", fields: ["id"])
  tenant: ID!
  owner: ID!
}

type message
  @model
  @key(
    name: "messageByChannel"
    fields: ["channel"]
    queryField: "messageByChannel"
  )
  @auth(
    rules: [
      { allow: owner, ownerField: "owner" }
      { allow: groups, groups: ["users"], operations: [read, create] }
      {
        allow: groups
        groups: ["editors"]
        operations: [read, update, create, delete]
      }
    ]
  ) {
  id: ID!
  channel: ID!
  user: ID!
  username: String!
  message: String!
  tenant: ID!
  owner: ID!
}

Your backend is set up and can be pushed to the cloud, please run:

amplify push

Follow these steps:

Are you sure you want to continue? Y
Do you want to generate code for your newly created GraphQL API? Y
Choose the code generation language target? Javascript
Enter the file name pattern of graphql queries, mutations and subscriptions ENTER
Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Y
Enter maximum statement depth [increase from default if your schema is deeply nested]? 2

Now create the datastore models which you use in your app. Run this code in the root of your app:

amplify codegen models

Test via the Appsync console

Please log in to the console. Go to the Appsync console, select your project and click on queries.

If you first login with the user from the editor group and create a channel and a few message. Then logout and log in with the user from the other tenant. You will notice that you can see the data of the other tenant.

This is because we don't have the right validation in place in our VTL templates like I mention before. I will update this section as soon a that github issue has been solved.

So for now we will set up this tenant filter via our application. I wanted to show this because although we set multi tenant via the app, everybody still has access if they want.

Set up your React Native App

As you are used from me, I don't focus much on the UX of an application during my blogs. I just want you to show how the basic functionality is working.

Run first

yarn add @react-navigation/native @react-navigation/stack

and

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Make a file metro.config.js in the root of your project and past this code.

module.exports = {
  resolver: {
    blacklistRE: /#current-cloud-backend\/.*/
  }
};

This will prevent metro to identify duplicate packages and cause errors.

Go to the app.js in the React Native directory and paste this code.

This file will manage the navigation and logout actions

import React from "react";
import { View, Button } from "react-native";
import Amplify, { Auth } from "aws-amplify";
import { withAuthenticator } from "aws-amplify-react-native";
import { DataStore } from "@aws-amplify/datastore";
import Channels from "./src/channels";
import ChannelMessages from "./src/channelMessages";
import LoadAuth from "./src/auth";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import awsconfig from "./src/aws-exports"; // if you are using Amplify CLI

//Amplify.configure(awsconfig);
Amplify.configure({
  ...awsconfig,
  Analytics: {
    disabled: true
  }
});

const Stack = createStackNavigator();

async function logout() {
  await DataStore.clear();
  Auth.signOut();
}

function Appstart() {
  return (
    <View
      style={{
        marginTop: 40,

        display: "flex",
        flex: 1
      }}
    >
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Auth" component={LoadAuth} />
          <Stack.Screen
            name="Channel"
            component={Channels}
            options={{
              headerLeft: null,
              headerTitle: "Channels",
              headerRight: () => (
                <Button onPress={() => logout()} title="Logout" color="#000" />
              )
            }}
          />
          <Stack.Screen name="Messages" component={ChannelMessages} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

export default withAuthenticator(Appstart);

Create this file auth.js in the src directory.

This file identify if a user is authenticated and if so set the datastore selective sync with the tenantid of the user and redirect to the channel overview.

import { Auth } from "aws-amplify";
import { DataStore, syncExpression } from "@aws-amplify/datastore";
import { Channel, Message } from "./models";
import { useNavigation } from "@react-navigation/native";

let tenantid = "";

// use for development purposes, to reset the datastore during each app start
DataStore.clear();
DataStore.configure({
  syncExpressions: [
    syncExpression(Channel, () => {
      return c => c.tenant("eq", tenantid);
    }),
    syncExpression(Message, () => {
      return c => c.tenant("eq", tenantid);
    })
  ]
});

function Datastore() {
  const navigation = useNavigation();
  const initDS = async () => {
    await Auth.currentAuthenticatedUser()
      .then(async result => {
        if (result !== "not authenticated") {
          tenantid = result.attributes["custom:tenantid"];
          await DataStore.start();
          navigation.navigate("Channel");
        }
      })
      .catch(err => {
        console.log(err);
      });
  };

  initDS();

  return null;
}

export default Datastore;

and create a file channels.js in the src directory and paste this code:

import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  SafeAreaView,
  FlatList,
  StyleSheet,
  StatusBar,
  TouchableHighlight,
  TouchableOpacity
} from "react-native";
import { DataStore } from "@aws-amplify/datastore";
import { Auth } from "aws-amplify";
import { Channel } from "./models/";
import { useNavigation } from "@react-navigation/native";

const Item = ({ id, name, navigateToMessage }) => (
  <TouchableOpacity onPress={() => navigateToMessage(id, name)}>
    <View style={styles.item}>
      <Text style={styles.title}>{name}</Text>
    </View>
  </TouchableOpacity>
);

export default function Channels() {
  let subscription;
  const [channels, setChannels] = useState([]);
  const navigation = useNavigation();

  const navigateToMessage = (id, name) => {
    navigation.navigate("Messages", { id, name });
  };

  const loadChannelArray = async () => {
    const result = await DataStore.query(Channel);

    setChannels(result);
  };

  useEffect(() => {
    loadChannelArray();
    subscription = DataStore.observe(Channel).subscribe(() => {
      loadChannelArray();
    });
    return function cleanup() {
      setChannels([]);
      subscription.unsubscribe();
    };
  }, []);

  const renderItem = ({ item }) => (
    <Item
      name={item.name}
      id={item.id}
      navigateToMessage={() => navigateToMessage(item.id, item.name)}
    />
  );

  const onSubmit = async () => {
    const auth = await Auth.currentAuthenticatedUser();

    const identifier = new Date();

    await DataStore.save(
      new Channel({
        name: "New channel " + identifier.getSeconds(),
        owner: auth.signInUserSession.accessToken.payload.sub,
        tenant: auth.attributes["custom:tenantid"]
      })
    );

    loadChannelArray();
  };

  return (
    <SafeAreaView style={styles.container}>
      <View
        style={{
          alignItems: "flex-end"
        }}
      >
        <TouchableHighlight onPress={() => onSubmit()}>
          <Text
            style={{
              fontSize: 16,
              alignItems: "flex-end"
            }}
          >
            Add new channel
          </Text>
        </TouchableHighlight>
      </View>
      <FlatList
        data={channels}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0
  },
  item: {
    backgroundColor: "#dead31",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16
  },
  title: {
    fontSize: 32
  }
});

create a file channelMessages.js in the src directory and paste this code:

This file will manage the messages of a channel

import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  SafeAreaView,
  FlatList,
  StyleSheet,
  StatusBar,
  TouchableHighlight
} from "react-native";
import { DataStore } from "@aws-amplify/datastore";
import { Auth } from "aws-amplify";
import { Message } from "./models/";

const Item = ({ username, message }) => (
  <View style={styles.item}>
    <Text style={styles.title}>Name {username}</Text>
    <Text style={styles.title}>{message}</Text>
  </View>
);

export default function Messages(props) {
  const id = props.route.params.id;

  const [messages, setMessages] = useState([]);

  async function loadMessagesArray() {
    const result = await DataStore.query(Message, c => c.channel("eq", id));
    setMessages(result);
  }

  useEffect(() => {
    const loadMessages = async () => {
      loadMessagesArray();
    };

    loadMessages();
  }, []);

  const renderItem = ({ item }) => (
    <Item username={item.username} message={item.message} />
  );

  const onSubmit = async () => {
    const auth = await Auth.currentAuthenticatedUser();

    const identifier = new Date();

    await DataStore.save(
      new Message({
        channel: id,
        user: auth.signInUserSession.accessToken.payload.sub,
        username: auth.attributes.name,
        message: "This is a new message " + identifier.getSeconds(),
        owner: auth.signInUserSession.accessToken.payload.sub,
        tenant: auth.attributes["custom:tenantid"]
      })
    );

    loadMessagesArray();
  };

  return (
    <SafeAreaView style={styles.container}>
      <View
        style={{
          alignItems: "flex-end"
        }}
      >
        <TouchableHighlight onPress={() => onSubmit()}>
          <Text
            style={{
              fontSize: 16,
              alignItems: "flex-end"
            }}
          >
            Add new message
          </Text>
        </TouchableHighlight>
      </View>
      <FlatList
        data={messages}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0
  },
  item: {
    backgroundColor: "#5d90e3",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16
  },
  title: {
    fontSize: 18
  }
});

You have set up your complete application now. If your run

expo start

Press I when loaded, this will start Expo on your IOS simulator. Login with the different users and notice the difference between tenants and between users in difference groups.

Repo

You can find my repo on github: https://github.com/rpostulart/multitenant

Conclusion

I have shown you how with tools like React Native (Expo) and AWS Amplify you can set up Multi tenant applications.

Of course this is not the ideal set up yet, because of the conditional checks are missing from the VTL templates. We can manually add those, but from a maintainability perspective we only want to do this from the schema. As soon as there is an update, I will update this blog.

I hope this was useful to you and I am looking forward for your feedback.

About me

Twitter

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

AWS Amplify cheatsheet

rpostulart — Sun, 11 Oct 2020 07:03:54 +0000

I have created a cheatsheet with the most important capabilities of AWS Amplify. If there are new updates I will add those here.

Clean DynamoDB data automaticlly

rpostulart — Mon, 21 Sep 2020 20:23:50 +0000

During one of my last project I had to remove user data that was older than two weeks.

I was looking for setting up an AWS Lambda function that is running on a recurring schedule. The idea was that this function scan all the date fields in the dynamoDB table.

It is expensive to scan all items and filter out the items which are out of date. Then you need to set up some functionality to delete these items via a batch in Dynamodb. It is possible to set up it, but there is a more easier way to do it.

TTL in DynamoDB

Make sure you have a date field in your Dynamodb table. It needs to have a Unix epoch time format. You can give this field any name.

The next step is to select the TTL field on the table. Unfortunately this is not supported from the Cloudformation templates in AWS Amplify. This is a manual process in each new environment that you set up.

https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/TTL.html

Javascript

This is how you can achieve this Unix epoch time format in JavaScript.

const numWeeks = 2; // after how many weeks the data needs to be removed
const now = date;
now.setDate(now.getDate() + numWeeks * 7);
const ttl = Math.round(now.getTime() / 1000);

 const setTTL = {
      ttlFieldName: ttl
  };

AWS Amplify

In your API schema you can create it like this.

type modelName
  @model{
  id: ID!
  ttl: Int!
}

Update

It is also possible to accomplish this via code. You can give this package a try: https://github.com/flogy/graphql-ttl-transformer

Conclusion

Your data will be removed automatically now (in this case in two weeks) according a recurring schedule.

About me

I am a huge fan of AWS Amplify and blog about certain topics that come along with it. If you have any questions related to the framework, React of React Native then you can always reach out to me.

Twitter

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

The guide to connect AWS Amplify to any (AWS) service

rpostulart — Sun, 02 Aug 2020 12:29:45 +0000

AWS Amplify

AWS Amplify is a framework that acts as a glue between every front end application and the backend deployed by Amplify on AWS.

You can use Javascript for setting up your API's, storage, authentication and authorisation, databases, storage, AI and more. In all my blogs I make extensive use of the services that Amplify is providing.

What if you need to connect to another AWS service?

The Amplify team is doing an outstanding job and AWS is releasing so many new features every day that it is impossible for the Amplify team to make these features available in the Amplify framework.

Where Amplify is the glue between front end and back end, there is Lambda the glue between AWS Amplify and every other service available on the AWS Cloud. So if a service is not provided by the AWS Amplify team then you can make use of Lambda (function) provided by the Amplify framework.

AWS SDK

A SDK is a kind of library with objects that you can use in your application without the difficulty to set it up yourself. You can download this SDK as a package and deploy it with your application

AWS SDK for JavaScript: A complete overview of all AWS services available in the AWS SDK

In this example we add a function to our Amplify set up with nodeJS as runtime, deploy the SDK with it and connect to any AWS service.

Getting Started

Set up AWS Amplify

We first need to have the AWS Amplify CLI installed. The Amplify CLI is a command line tool that allows you to create & deploy various AWS services.

To install the CLI, we'll run the following command:

$ npm install -g @aws-amplify/cli

Next, we'll configure the CLI with a user from our AWS account:

$ amplify configure

For a video walkthrough of the process of configuring the CLI, click

Add function

In the root directory type

$ amplify add function

Follow these steps:

* Provide a friendly name for your resource to be used as a label for this category in the project: **lambdafunction**
* Provide the AWS Lambda function name: **<press enter>**
* Choose the function runtime that you want to use: **NodeJS**
* Choose the function template that you want to use: **Hello world function**
* Do you want to access other resources created in this project from your Lambda function? **N**
* Do you want to invoke this function on a recurring schedule? **N**
* Do you want to edit the local lambda function now? **N**

Your Function is created now and you can find it in your project directory:

Amplify > backend > function > name of your function

Go to the src directory of the function and run

npm install aws-sdk

Open the index.js file and paste this code. In this example we will make a Pinpoint application. This is an example, but with new AWS.(here you can add any service). For example new AWS.SNS() for Simple Notification Service.

On the link above there are enough examples how to connect to the features of a service.

const AWS = require("aws-sdk");
AWS.config.region = "eu-west-1"; // fill in your right region ******
const pinpoint = new AWS.Pinpoint();

exports.handler = async (event, context) => {
  // try {

  event = event.arguments.input;
  const arg = event.arg; // optional: when you want to provide input arguments


  // Create a AWS Pinpoint project
  const appID = await createApp();
};

async function createApp() {
  let params = {
    CreateApplicationRequest: {
      /* required */
      Name: "Test app" /* Campaign name, required */
    }
  };

  return new Promise((res, rej) => {
    pinpoint.createApp(params, function(err, data) {
      if (err) {
        rej(err);
        console.log(err, err.stack); // an error occurred
      } else {
        res(data.ApplicationResponse.Id); //console.log(data);// successful response
      }
    });
  });
}

Your configuration is ready to be pushed to the cloud.

Amplify push

You have set up your application now and you know how to connect other AWS services to your application if these are not provided by the Amplify framework (yet).

Add policy

Your function is ready, but your function is not allowed to invoke other services. Here for you must set the Lambda Execution Policy.

Open lambdafunction(or other name)-cloudformation-template.json

Go to the lambdaexecutionpolicy section and add a new statement to the array after the first object.

,
                        {
                            "Effect": "Allow",
                            "Action": [
                                "mobiletargeting:*"
                            ],
                            "Resource": {
                                "Fn::Sub": [
                                    "arn:aws:mobiletargeting:${region}:${account}:apps/*",
                                    {
                                        "region": {
                                            "Ref": "AWS::Region"
                                        },
                                        "account": {
                                            "Ref": "AWS::AccountId"
                                        }
                                    }
                                ]
                            }
                        }

We have added execution rights for mobileatargeting (pinpoint) now. I can imaging that you are curious what settings you need to put in when you connect to another services, but you can find those here

Push your latest changes:

amplify push

In my previous blogs you can see how you can connect your lambda function to your front end application. This example just focused on connecting AWS Amplify to each AWS Service.

About me

I am a huge fan of AWS Amplify and blog about certain topics that come along with it. If you have any questions related to the framework, React of React Native then you can always reach out to me.

Twitter

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

The guide to add Payments to your React Native App with Stripe, Expo and AWS Amplify

rpostulart — Tue, 05 May 2020 19:50:51 +0000

How it all comes together

I have written few blogs now. If you look at all my blogs, then there is one key blog missing that is important in many user experiences and that is adding Payments to your app.

I have written a blog about Geo Search

The other blog was about Push Notifications

And one blog was about adding AI to your app

The latest blog was about offline support with AWS Amplify Datastore

@gijsvdhoven
has written a blog about our base app with Authenication, navigation and error messages

This blog is about adding a payments to your app. With all these technical Guides to implement these features you have a pretty good starting point to build almost every app. The last step is all about your own mindset and finding the the right idea. There I have written this blog about:

https://dev.to/rpostulart/how-to-survive-and-innovate-as-a-developer-11g1

Adding payments to your React Native app

The payment landscape is scattered. There are many payments providers to handle your payments. I work for a large bank in the Netherland which has invented Tikkie. Tikkie is a common used word now. When someone gets money from you, you ask him/her to send you a Tikkie. You receive a link via Whatsapp and can pay in a second with Ideal. Ideal is the most used payment method in the Netherlands.

I want to make a use-full blog with payment methods which are used world-wide, so I can't demo Tikkie with Ideal because that's only available in the Netherlands. So I will use Stripe where you can select any payment method, but you can of course use any provider.

Stripe

Stripe is payment platform which offer different payment options for your app. Stripe has different options that work smoothly with your Web App, but for React Native there is not a real solution. There is one package used by the community, but this is not officially supported by Stripe: https://www.npmjs.com/package/tipsi-stripe

Checkout

Stripe Checkout (https://stripe.com/en-nl/payments/checkout) is a completely ready solution which is line with all the regulation requirements, but it is web based. With a few configuration settings it's possible to add a new payment method.

We will use Checkout in combination with React Native Webview. This is a web component loader for your native applications. We are making use of a secure connection from Stripe.

For this set up you need to have a Stripe account. In the stripe dashboard you can register a developer API key. Which we need later.

React Native

React Native is great because you can just code in javascript and compile to IOS and Android. So less costs and a faster development cycle.

Expo

Expo works out well because it is packaged with a lot features which you can use and you can develop for IOS and Android without installing any other tools or even without having a Mac. Expo is now also compiling to web, so you will have the one tool to build all your front ends.

AWS Amplify

AWS Amplify is the glue between these tools and the backend. Here you can also use Javascript for setting up your API's, storage, authentication and authorization, database, data store and more. we will use Amplify to connect to a Lambda function via Graphql.

Getting Started

Set up AWS Amplify

We first need to have the AWS Amplify CLI installed. The Amplify CLI is a command line tool that allows you to create & deploy various AWS services.

To install the CLI, we'll run the following command:

$ npm install -g @aws-amplify/cli

Next, we'll configure the CLI with a user from our AWS account:

$ amplify configure

For a video walkthrough of the process of configuring the CLI, click

Set up ReactJS

Stripe checkout is using a success and failure URL to redirect to. We are going to set up an amplify hosting project with Reactjs. This site has two URL's: yourURL.com/payment-success en yourURL.com/payment-failure.

The webview will listen to the state change and passing the URL to a function _onNavigationStateChange when the URL of the Webview is changed.

Based on the param we proceed (success) with the payment flow in the app or we stop (failure) the flow.

Run these commands on the root of your dir:

npx create-react-app paymentsite

cd paymentsite

npm install react-router-dom query-string @stripe/stripe-js

Add this code to your app.js and replace STRIPE_PUBLIC_KEY with your key from from Stripe:

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import queryString from "query-string";
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe("STRIPE_PUBLIC_KEY");

// Showing null, because we will show the result in the app and not on the web
function Success() {
  return null;
}

// Showing null, because we will show the result in the app and not on the web
function Failure() {
  return null;
}

// Showing null, because we will show the result in the app and not on the web
function PaymentInit() {
  return null;
}

function Init() {
  return (
    <div className="App">
      <p>Payment Site</p>
    </div>
  );
}

async function initStripe() {
  const parsed = queryString.parse(window.location.search);
  const sessionId = parsed.session;

  const stripe = await stripePromise;
  await stripe.redirectToCheckout({
    sessionId
  });
}

function Payment() {
  initStripe();
  return null;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Init />
        </Route>
        <Route path="/payment">
          <Payment />
        </Route>
        <Route path="/payment-init">
          <PaymentInit />
        </Route>
        <Route path="/payment-failure">
          <Failure />
        </Route>
        <Route path="/payment-success">
          <Success />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

You can test your site locally with:

yarn start

These two URL's should work: /payment-failure and /payment-success

Follow this instruction from @dabit3 This action will publish your local React Website and host it on AWS Amplify. You get an URL which you need to add later to the lambda function.

Instruction: Amplify Console Hosting - Manual Deploys from the Amplify CLI

Set up React Native

First, we'll create the React Native application we'll be working with.
Run these commands in the root dir (so not in your reactJS dir)

$ npx expo init payApp

> Choose a template: blank

$ cd payApp

$ npm install aws-amplify aws-amplify-react-native react-native-webview @react-native-community/netinfo

Init your Amplify Project

Now we can initialize a new Amplify project from within the root of our React Native application:

$ amplify init

Here we'll be guided through a series of steps:

Enter a name for the project: payApp (or your preferred project name)
Enter a name for the environment: dev (use this name, because we will reference to it)
Choose your default editor: Visual Studio Code (or your text editor)
Choose the type of app that you're building: javascript
What javascript framework are you using: react-native
Source Directory Path: /
Distribution Directory Path: build
Build Command: npm run-script build
Start Command: npm run-script start
Do you want to use an AWS profile? Y
Please choose the profile you want to use: YOUR_USER_PROFILE
Now, our Amplify project has been created & we can move on to the next steps.

Add Graphql to your project

Your React Native App is up and running and AWS Amplify is configured. Amplify comes with different services which you can use to enrich your app. We are focussing mostly on the API service. So let’s add an API.

Amplify add api

These steps will take place:

Select Graphql
Enter a name for the API: payAPI (your preferred API name)
Select an authorisation type for the API: Amazon Cognito User Pool ( Because we are using this app with authenticated users only, but you can choose other options)
Select at do you want to use the default authentication and security configuration: Default configuration
How do you want users to be able to sign in? Username (with this also the AWS Amplify Auth module will be enabled)
Do you want to configure advanced settings? No, I am done.
Do you have an annotated GraphQL schema? n
Do you want a guided schema creation?: n
Provide a custom type name: user

Your API and your schema definition have been created now. You can find it in you project directory:

Amplify > backend > api > name of your api

Open the schema.graphql file and add this code.

I added a Product type because otherwise the schema is not deploying, but I want to show this example with Graphql instead of a plain API. In this guide we won't use the product, we show a static product, but you can use this type to add dynamic products to your app.

type Product @model {
  id: ID!
  date: String!
  name: String!
  description: String!
  price: Int!
}

type Mutation {
  createPayment(input: PaymentInput): PaymentResult
    @function(name: "makePayment-${env}")
}

input PaymentInput {
  amount: Float
  total: Int
  name: String
  email: String
}

type PaymentResult {
  statusCode: Int
  body: String
}

Add a Payment Function to your project

By adding a function we are going to create a Lambda Function.

Amplify add function

Follow these steps:

Provide a friendly name for your resource to be used as a label for this category in the project: makePayment
Provide the AWS Lambda function name:
Choose the function runtime that you want to use: NodeJS
Choose the function template that you want to use: Hello world function
Do you want to access other resources created in this project from your Lambda function? N
Do you want to invoke this function on a recurring schedule? N
Do you want to edit the local lambda function now? N

Your Functions are created now and you can find it in your project directory:

Amplify > backend > function > name of your function

Go to the src directory of the makePayment function and open the index.js file and paste this code. Please walk through the code and add your YOUR SECRET API KEY and AMPLIFY-URL.

const stripe = require("stripe")("*****ADD YOUR SECRET API KEY*******");

exports.handler = async (event, context) => {
  try {
    const amount = event.arguments.input.amount;
    const name = event.arguments.input.name;
    const email = event.arguments.input.email;

    const customer = await createCustomer(name, email);

    const session = await createCheckOutSession(amount, customer.id);

    return session;
  } catch (error) {
    console.log("er is een fout opgetreden", error);
  }
};

async function createCustomer(name, email) {
  return new Promise(function(resolve, reject) {
    stripe.customers
      .create({
        email: email,
        name: name
      })
      .then(customer => {
        resolve(customer);
      })
      .catch(err => {
        // Error response
        reject(err);
      });
  });
}

async function createCheckOutSession(amount, customer) {
  //eslint-disable-line

  return new Promise(function(resolve, reject) {
    stripe.checkout.sessions
      .create({
        payment_method_types: ["card", "ideal"],
        customer: customer,
        line_items: [
          {
            name: "Buy your stuff here",
            amount: amount * 100,
            currency: "eur",
            quantity: 1
          }
        ],
        success_url: "AMPLIFY-URL/payment-success",
        cancel_url: "AMPLIFY-URL/payment-failure",
        locale: "nl"
      })
      .then(source => {
        // Success response
        const response = {
          statusCode: 200,
          body: JSON.stringify(source)
        };

        resolve(response);
      })
      .catch(err => {
        // Error response
        const response = {
          statusCode: 500,
          body: JSON.stringify(err.message)
        };

        reject(response);
      });
  });
}

Add stripe to your node_modules in your function/src directory:

npm install stripe --save

Your backend is set up and can be pushed to the cloud, please run:

amplify push

Follow these steps:

Are you sure you want to continue? Y
Do you want to generate code for your newly created GraphQL API? Y
Choose the code generation language target? Javascript
Enter the file name pattern of graphql queries, mutations and subscriptions ENTER
Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Y
Enter maximum statement depth [increase from default if your schema is deeply nested]? 2

Set up your React Native App

As you are used from me, I don't focus much on the UX of an application during my blogs. I just want you to show how the basic functionality is working.

Go to the app.js in the React Native directory and paste this code.
I have put everything in one file, but of course you can and should refactor this in smaller components.

Replace AMPLIFY-URL with the URL that your created when you deployed your React site to AWS Amplify.

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ActivityIndicator,
  Dimensions
} from "react-native";
import { WebView } from "react-native-webview";
import Amplify, { API, graphqlOperation, Analytics } from "aws-amplify";
import * as mutations from "./src/graphql/mutations";
import { withAuthenticator } from "aws-amplify-react-native";
import config from "./aws-exports";

Amplify.configure(config);
Analytics.disable();

class App extends React.Component {
  state = {
    amount: 15,
    quantity: "0",
    screen: "product",
    initUrl: "AMPLIFY-URL/",
    url: "AMPLIFY-URL/payment-init",
    loading: true
  };

  async createPaymentSession() {
    // hardcode input values, make these dynamic with the values from the logged in user
    const input = {
      amount: this.state.amount * this.state.quantity,
      name: "ramon",
      email: "ramon@ramon.nl"
    };

    await API.graphql(
      graphqlOperation(mutations.createPayment, { input: input })
    )
      .then(result => {
        const sessionID = JSON.parse(result.data.createPayment.body);
        this.setState({
          url: this.state.initUrl + "payment?session=" + sessionID.id,
          loading: false
        });
      })
      .catch(err => console.log(err));
  }

  handleOrder() {
    this.setState({ screen: "payment" });
  }

  _onNavigationStateChange(webViewState) {
    if (webViewState.url === this.state.initUrl + "payment-init") {
      this.createPaymentSession();
    }

    if (webViewState.url === this.state.initUrl + "payment-success/") {
      this.setState({ screen: "success" });
    }

    if (webViewState.url === this.state.initUrl + "payment-failure/") {
      this.setState({ screen: "failure" });
    }
  }

  startPayment() {
    const loader = this.state.loading;
    let url = this.state.url;
    if (url === "") {
      url = this.state.initUrl;
    }

    return (
      <View style={{ flex: 1, marginTop: 50 }}>
        <View style={{ flex: 2 }}>
          {loader && (
            <View style={[styles.loader, styles.horizontal]}>
              <ActivityIndicator
                animating={true}
                size="large"
                color="#de62bf"
              />
            </View>
          )}
          <View
            style={{
              position: "absolute",
              backgroundColor: "#fff",
              height: 70,
              width: Dimensions.get("window").width,
              zIndex: 200
            }}
          />
          <WebView
            mixedContentMode="never"
            source={{
              uri: url
            }}
            onNavigationStateChange={this._onNavigationStateChange.bind(this)}
          />
        </View>
      </View>
    );
  }

  showProduct() {
    return (
      <View style={styles.container}>
        <Text style={styles.product}>Product A</Text>
        <Text style={styles.text}>
          This is a great product which we sell to you
        </Text>
        <Text style={styles.text}>
          The price for today is € {this.state.amount},- per item
        </Text>
        <Text style={styles.quantity}>How many items do you want to buy?</Text>
        <View style={{ flex: 1 }}>
          <TextInput
            style={styles.textInput}
            onChangeText={text => this.setState({ quantity: text })}
            value={this.state.quantity}
          />
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.handleOrder()}
          >
            <Text>Order now</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  render() {
    switch (this.state.screen) {
      case "product":
        return this.showProduct();
      case "payment":
        return this.startPayment();
      case "success":
        return (
          <View style={styles.container}>
            <Text style={{ fontSize: 25 }}>Payments Succeeded :)</Text>
          </View>
        );
      case "failure":
        return (
          <View style={styles.container}>
            <Text style={{ fontSize: 25 }}>Payments failed :(</Text>
          </View>
        );
      default:
        break;
    }
  }
}

export default withAuthenticator(App);

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    marginTop: 20,
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  textInput: {
    width: 200,
    borderColor: "gray",
    borderWidth: 1,
    padding: 15
  },
  quantity: {
    marginTop: 50,
    fontSize: 17,
    marginBottom: 10
  },
  text: {
    fontSize: 17,
    marginBottom: 10
  },
  product: {
    fontSize: 22,
    marginBottom: 10
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    marginTop: 50,
    margin: 10
  },
  loader: {
    flex: 1,
    justifyContent: "center"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10
  }
});

Conclusion

I have shown you how with tools like React Native (Expo), Stripe and AWS Amplify you can set up Payments in your user experience. With Stripe Checkout it is now easily to add more payment methods like Apple, Google Pay and other methods without much effort in changing your app.

I hope this was useful to you and I am looking forward for your feedback.

Twitter

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

Build a serverless Quiz in days with React and AWS Amplify DataStore

rpostulart — Sun, 26 Apr 2020 19:27:38 +0000

The covid-19 has a positive flipside! People are getting more creative and looking for other opportunities to connect with each other. I am an engineering lead responsible for IT strategy of a large bank. Suddenly, everyone in our teams had to work from home. Together with my colleague @gijsvdhoven we wanted to still bring fun to people and connect them.

We had an idea to create an online pub quiz for than 150 people. Of course there are tools like Kahoot, but we also liked the idea and challenge that we build our own solution and use that.

In three weeks during the evenings and weekends we have build a complete serverless quiz app. I can tell you (have played it a few times now with friends), it really brings fun in combination with Skype or Zoom.

Technology

We are using open source technology. We decided to use an Web app so that we don't add an extra limitation for users to first download an app from the stores. Maybe we add an app later as an option.

Front End - ReactJS

We are using React. We first have build it in Gatsby, but we noticed that this was an overkill, because React full-fill the job where we can use the lifecycle components and react hooks easily.

Back End - AWS Amplify

With this framework you can very easy set up your backend and connect it to any front end framework. AWS Amplify has been developed for developers and is the glue between your front end applications and the most important services of AWS.

We are using Graphql for the API's, DynamoDB to store the data, Cognito for the authentication, predictions to identify the language of the questions and AWS amplify hosting to deploy our content and serve to our customers.

AWS Amplify Datastore

Datastore is a service where the Amplify team worked very hard on the last years and has been launched during the last Re:Invent in 2019.

Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data. https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js

We needed a solution for our quiz that in milliseconds receives data from multi clients and send data across to multi clients and this al comes together in a realtime dashboard for the quiz admin so that the quiz can be controlled. This is something that datastore is offering.

Architecture

The content is served from AWS amplify to our customers. On the website users authenticate via Cognito, they receive a token. With this token it is possible to apply API requests. We have build the API's with AppSync (Graphql). With AppSync you define a schema and with that schema your DynamoDB database, API's and access control will be provisioned. We are using an API to identify the language of a question and save that to the database.

Features

We have build a game and admin area. In the admin area users can create a quiz, add questions to the quiz and library and run the quiz. We use predictions to identify the language and add that label to the question. In the admin area you find the game code which you can send to all your users.

The game area can be accessed with a name and game code. Then you see a start title. As soon as the admin starts the game the first questions will be send to all the clients and showed. Then users can respond with the right answer, and based on the time of the response the score will be send to the admin and all clients. This repeats till the quiz will be finished.

What we have learned?

Datastore is easy and fast to set up
Add DataStore.configure(awsConfig) and DataStore.observe... to your app.js to init the Datastore
Seamless and well performing syncing between clients and server
A scalable solution where we don't need to configure anything separately for
We struggled with relations, which are more used before datastore was launched. A relation (@connection) include other model data in the same request. With datastore you already have the data locally so you don't have to do an additional network request. We have skipped the @connection now and made a reference ID fields in the models to other models.
Every data in the model is locally. Datastore is not supporting multi tenant, so you receive all the data from all quizes. When this will be heavily used this will give performance issues. The Amplify team is now working in supporting this, so we are looking forward for the next releases.
AWS Amplify Datastore is using the HTML5 IndexedDB. It is not clear in the docs if there are additional security measurements from Datastore on top of IndexedDB.

Open Sourcing

We are running the quiz on www.kwizz.guru and we are open sourcing this project. Our idea is that these kind of quizes and fun should be available to everyone. As long as the AWS bill will not be sky high, we are going to host this but it's free for everyone to host your own version on your own domain.

It would be great if the the community can contribute to improve UX, the quality of code, add automated tests, docs and add new features.

Check our repository and please contribute: https://github.com/alowa-apps/kwizz

What's next?

We are also working on creating a full swing Expo base app which you can use to authenticate with AWS Amplify and Cognito. We are adding default cypress test cases which will run in Expo web. Soon @gijsvdhoven will write a blog about this, but check it out already: https://github.com/alowa-apps/baseApp

If you have questions, let us know in the comments and we are looking forward for your feedback :)

The guide to add AI to your React Native app with AWS Amplify

rpostulart — Sun, 08 Mar 2020 14:33:53 +0000

AWS Amplify is evolving fast. It is a framework which you can use to provision a cloud back end infrastructure in minutes with the same easiness of ordering a pizza. AWS Amplify will deliver your infrastructure even faster than that your pizza will be delivered.

It is offering a large scale of different services like authentication, storage, api's, datastore and much more. I have already written a few blogs about AWS Amplify, like GEO search and push notifications, but now it's time for AWS Amplify and AI/ML.

If you look at AI it is possible to build, test and deploy own models. You can for example use SageMaker for this (not integrated with AWS Amplify) There are also some predefined models in AWS Amplify which you can use like Translating text from one language to another, converting text to speech, text recognition from image and more.

Use case: text recognition from image

In this guide I will show how you can use a React Native app, Authenticated users can make a photo with the camera and match the text from the photo with the text from a database. You can connect a phone number or email address to the text string in the database and based on the match you can apply additional actions, like sending an email.

Getting Started

I will use NPM but of course you can also you Yarn.

Set up React Native

First, we'll create the React Native application we'll be working with.

$ npx expo init ScanApp

> Choose a template: **Tabs**

$ cd ScanApp

expo install expo-camera

$ npm install aws-amplify aws-amplify-react-native

Set up AWS Amplify

We first need to have the AWS Amplify CLI installed. The Amplify CLI is a command line tool that allows you to create & deploy various AWS services.

To install the CLI, we'll run the following command:

$ npm install -g @aws-amplify/cli

Next, we'll configure the CLI with a user from our AWS account:

$ amplify configure

For a video walkthrough of the process of configuring the CLI, click

Now we can initialise a new Amplify project from within the root of our React Native application:

$ amplify init

Here we'll be guided through a series of steps:

Enter a name for the project: amplifyAIapp (or your preferred project name)
Enter a name for the environment: dev (use this name, because we will reference to it)
Choose your default editor: Visual Studio Code (or your text editor)
Choose the type of app that you're building: javascript
What javascript framework are you using: react-native
Source Directory Path: /
Distribution Directory Path: build
Build Command: npm run-script build
Start Command: npm run-script start
Do you want to use an AWS profile? Y
Please choose the profile you want to use: YOUR_USER_PROFILE
Now, our Amplify project has been created & we can move on to the next steps.

Add Graphql to your project

Your React Native App is up and running and AWS Amplify is configured. Amplify comes with different services which you can use to enrich your app. Let’s add an API.

Amplify add api

These steps will take place:

Select Graphql
Enter a name for the API: aiAPI (your preferred API name)
Select an authorisation type for the API: Amazon Cognito User Pool ( Because we are using this app with authenticated users only, but you can choose other options)
Select by do you want to use the default authentication and security configuration: Default configuration
How do you want users to be able to sign in? Username (with this also the AWS Amplify Auth module will be enabled)
Do you want to configure advanced settings? No, I am done.
Do you have an annotated GraphQL schema? n
Do you want a guided schema creation?: n
Provide a custom type name: user

Your API and your schema definition have been created now. You can find it in you project directory:

Amplify > backend > api > name of your api

Open schema.graphql and replace the code with this code:

type text @model {
    id: ID!
    text: String!
    email: String!
}

The @model directive will create a DynamoDB for you. There are more directives possible, for the full set look at the AWS Amplify docs.

Let now first push the configuration to the cloud so that also your database is created:

amplify push

Are you sure you want to continue? Y
Do you want to generate code for your newly created GraphQL API Y
Choose the code generation language target javascript
Enter the file name pattern of graphql queries, mutations and subscriptions enter (default) Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions? Y
Enter maximum statement depth [increase from default if your schema is deeply nested] enter (default 2)

Add predictions to your app

We will first add the recognise text from an image capability to your app by following these steps:

Amplify add predictions

Select Identify
Select Identify Text
Give your capability a name and press enter
Would you also like to identify documents? N
Who should have access? Auth users only

Add S3 storage to your app

We will save the photo in a S3 bucket. We will create the bucket.

amplify add storage

Select Content (Images, audio, video, etc.)
Please provide a friendly name for your resource that will be used to label this category in the project:
Please provide bucket name:
Who should have access: Auth users only
Select create/update, read and delete
Do you want to add a Lambda Trigger for your S3 Bucket? N

Add a function to your project

By adding a function we are going to create a Lambda. The goal of this lambda is receiving the text from a photo and match that with the data from the database

Amplify add function

Follow these steps:

Provide a friendly name for your resource to be used as a label for this category in the project: matchFunction
Provide the AWS Lambda function name:
Choose the function template that you want to use: Hello world function
Do you want to access other resources created in this project from your Lambda function? Y
Select API
Select the operations you want to permit for scanapp? Read
Do you want to edit the local lambda function now? N

Your function is created now and you can find it in your project directory:

Amplify > backend > function > name of your function

Go to the src directory of the matchFunction and install this package


$ npm install aws-sdk

Open the file matchFunction-cloudformation-template.json and add this code to the statement array in the section lambdaexecutionpolicy. This code will give your lambda function access to your DynamoDB resource:

{
            "Effect": "Allow",
            "Action": [
                "dynamodb:Get*",
                "dynamodb:Query",
                "dynamodb:Scan"
            ],
            "Resource": {
               "Fn::Sub": [
                     "arn:aws:dynamodb:${region}:${account}:table/*",
             {
                                        "region": {
                                            "Ref": "AWS::Region"
                                        },
                                        "account": {
                                            "Ref": "AWS::AccountId"
                                        },
                      }
                ]
             }

}

Open the src/app.js file and paste this code.

/* Amplify Params - DO NOT EDIT
You can access the following resource attributes as environment variables from your Lambda function
var environment = process.env.ENV
var region = process.env.REGION
var apiScanappGraphQLAPIIdOutput = process.env.API_SCANAPP_GRAPHQLAPIIDOUTPUT
var apiScanappGraphQLAPIEndpointOutput = process.env.API_SCANAPP_GRAPHQLAPIENDPOINTOUTPUT

Amplify Params - DO NOT EDIT */ const AWS = require("aws-sdk");
AWS.config.region = process.env.REGION;
const dynamodb = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event, context, callback) => {
  try {
    let renderItems = await getItems();

    const text = event.arguments.input.text.toLowerCase();
    let foundItem = "";
    for (let i = 0, iMax = renderItems.length; i < iMax; i++) {
      if (text.includes(renderItems[i].text.toLowerCase())) {
        foundItem = renderItems[i];
        break;
      }
    }

    const response = {
      items: JSON.stringify(foundItem)
    };

    callback(null, response);
  } catch (error) {
    callback(error);
  }
};

function getItems() {
  let tableName = "text";
  if (process.env.ENV && process.env.ENV !== "NONE") {
    tableName =
      tableName +
      "-" +
      process.env.API_SCANAPP_GRAPHQLAPIIDOUTPUT +
      "-" +
      process.env.ENV;
  }

  let scanParams = {
    TableName: tableName
  };

  return new Promise((resolve, reject) => {
    dynamodb.scan(scanParams, (err, data) => {
      if (err) {
        console.log("err", err);
        reject(err);
      } else {
        console.log("Query succeeded.");
        resolve(data.Items);
      }
    });
  });
}

We are going to push it one more time to the cloud and then we can build our App, but before we need also have to update our API schema, go to:

Amplify > backend > api > name of your api

Open schema.graphql and replace the code with this code:

type text @model {
  id: ID!
  text: String!
  email: String!
}

type Mutation {
  match(input: matchInput): matchResult @function(name: "matchFunction-${env}")
}

type matchResult {
  items: String
}

input matchInput {
  text: String!
}

Now push it to AWS

amplify push

Add some data via Cognito and AppSync

Go in the console to AWS Cognito and click on Manager User Pools > then on your user pool > user and groups > create user. Fill in the form and leave all the checkboxes as verified. Click on the new user and make a note of the sub value (something like b14cc22-c73f-4775-afd7-b54f222q4758) and then go to App Clients in the menu and make a note of the App client ID from the clientWeb (the top one) use these values in the next step.

Let’s add some data which you can use in your app. Go to the AppSync service in the console.

Go to AWS AppSync via the console.
Open your project
Click on Queries
Log in with a Cognito user by clicking on the button 'Login via Cognito User Pools' (You can create a user via Cognito in the console or via your App) (Use the data that your have written down)
Add the following code and run the code (Update with text that is also available in the picture where you are going to take a photo from and update with your e-mail address):

mutation createText {
  createText( input: {
    text: "<TEXT>",  
    email: "<EMAILADDRESS>"
  }
  ){
    id
    text
    email
  }
}

Run this code a few times with some other values so you can see that it actually only match your text

Let's build the React Native App

I made an app where a user needs to log in and then immediately load the camera. With this camera you can take a photo from the picture. This photo will be uploaded to S3, then the text will be abstracted from the picture, send to the lambda function and there a match will take place.

As you are used from me I don't spend much time on the UX design of the app, I just want to show how easily you can set it up. The UX is up to you :)

You can download the project from: https://github.com/rpostulart/Aiapp

-- or --

Go to the root of your project and open App.js and replace it with this code:

import * as React from "react";
import { Platform, StatusBar, StyleSheet, View } from "react-native";
import { SplashScreen } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import AppNavigator from "./navigation/AppNavigator";
import useLinking from "./navigation/useLinking";

const Stack = createStackNavigator();

export default function App(props) {
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);
  const [initialNavigationState, setInitialNavigationState] = React.useState();
  const containerRef = React.useRef();
  const { getInitialState } = useLinking(containerRef);

  // Load any resources or data that we need prior to rendering the app
  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHide();

        // Load our initial navigation state
        setInitialNavigationState(await getInitialState());

        // Load fonts
        await Font.loadAsync({
          ...Ionicons.font,
          "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf")
        });
      } catch (e) {
        // We might want to provide this error information to an error reporting service
        console.warn(e);
      } finally {
        setLoadingComplete(true);
        SplashScreen.hide();
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return null;
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === "ios" && <StatusBar barStyle="default" />}
        <NavigationContainer
          ref={containerRef}
          initialState={initialNavigationState}
        >
          <Stack.Navigator>
            <Stack.Screen name="Root" component={AppNavigator} />
          </Stack.Navigator>
        </NavigationContainer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
});

Go to the screens directory and add these files

HomeScreen.js

import React from "react";
import { Alert, StyleSheet, Text, View, TouchableOpacity } from "react-native";
import Constants from "expo-constants";
import { Camera } from "expo-camera";
import * as Permissions from "expo-permissions";

import Amplify, {
  API,
  Storage,
  Predictions,
  graphqlOperation
} from "aws-amplify";

import { AmazonAIPredictionsProvider } from "@aws-amplify/predictions";
import * as mutations from "../src/graphql/mutations";
import awsconfig from "../aws-exports";

Amplify.configure(awsconfig);
Amplify.addPluggable(new AmazonAIPredictionsProvider());

import { Ionicons } from "@expo/vector-icons";

export default class CameraScreen extends React.Component {
  state = {
    flash: "off",
    zoom: 0,
    autoFocus: "on",
    type: "back",
    whiteBalance: "auto",
    ratio: "16:9",
    newPhotos: false,
    permissionsGranted: false,
    pictureSize: "1280x720",
    pictureSizes: ["1280x720"],
    pictureSizeId: 0
  };

  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ permissionsGranted: status === "granted" });
  }

  toggleFocus = () =>
    this.setState({ autoFocus: this.state.autoFocus === "on" ? "off" : "on" });

  takePicture = () => {
    if (this.camera) {
      this.camera.takePictureAsync({ onPictureSaved: this.onPictureSaved });
    }
  };

  uploadToStorage = async pathToImageFile => {
    try {
      const response = await fetch(pathToImageFile);

      const blob = await response.blob();

      const s3photo = await Storage.put("file-" + Date.now() + ".jpeg", blob, {
        contentType: "image/jpeg"
      });

      await Predictions.identify({
        text: {
          source: {
            key: s3photo.key,
            level: "public" //optional, default is the configured on Storage category
          },
          format: "PLAIN" // Available options "PLAIN", "FORM", "TABLE", "ALL"
        }
      })
        .then(async ({ text: { fullText } }) => {
          const input = {
            text: fullText
          };

          await API.graphql(graphqlOperation(mutations.match, { input: input }))
            .then(result => {
              const item = JSON.parse(result.data.match.items);

              if (typeof item.text === "undefined") {
                Alert.alert(`There was no match!`);
              } else {
                Alert.alert(
                  `Whoohoo! There was a match with ${item.text} the email has been send!`
                );
              }
            })
            .catch(err => console.log(err));
        })
        .catch(err => console.log(err));

      //
    } catch (err) {
      console.log(err);
    }
  };

  handleMountError = ({ message }) => console.error(message);

  onPictureSaved = async photo => {
    this.uploadToStorage(photo.uri);
  };

  renderNoPermissions = () => (
    <View style={styles.noPermissions}>
      <Text style={{ color: "white" }}>
        Camera permissions not granted - cannot open camera preview.
      </Text>
    </View>
  );

  renderTopBar = () => (
    <View style={styles.topBar}>
      <TouchableOpacity style={styles.toggleButton} onPress={this.toggleFocus}>
        <Text
          style={[
            styles.autoFocusLabel,
            { color: this.state.autoFocus === "on" ? "white" : "#6b6b6b" }
          ]}
        >
          FOCUS
        </Text>
      </TouchableOpacity>
    </View>
  );

  renderBottomBar = () => (
    <View style={styles.bottomBar}>
      <View style={{ flex: 0.4 }}>
        <TouchableOpacity
          onPress={this.takePicture}
          style={{ alignSelf: "center" }}
        >
          <Ionicons name="ios-radio-button-on" size={70} color="white" />
        </TouchableOpacity>
      </View>
    </View>
  );

  renderCamera = () => (
    <View style={{ flex: 1 }}>
      <Camera
        ref={ref => {
          this.camera = ref;
        }}
        style={styles.camera}
        onCameraReady={this.collectPictureSizes}
        type={this.state.type}
        autoFocus={this.state.autoFocus}
        zoom={this.state.zoom}
        whiteBalance={this.state.whiteBalance}
        ratio={this.state.ratio}
        pictureSize={this.state.pictureSize}
        onMountError={this.handleMountError}
      >
        {this.renderTopBar()}
        {this.renderBottomBar()}
      </Camera>
    </View>
  );

  render() {
    const cameraScreenContent = this.state.permissionsGranted
      ? this.renderCamera()
      : this.renderNoPermissions();
    return <View style={styles.container}>{cameraScreenContent}</View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000"
  },
  camera: {
    flex: 1,
    justifyContent: "space-between"
  },
  topBar: {
    flex: 0.2,
    backgroundColor: "transparent",
    flexDirection: "row",
    justifyContent: "space-around",
    paddingTop: Constants.statusBarHeight / 2
  },
  bottomBar: {
    backgroundColor: "transparent",
    alignSelf: "flex-end",
    justifyContent: "space-between",
    flex: 0.12,
    flexDirection: "row"
  },
  noPermissions: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 10
  },

  toggleButton: {
    flex: 0.25,
    height: 40,
    marginHorizontal: 2,
    marginBottom: 10,
    marginTop: 20,
    padding: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  autoFocusLabel: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

The uploadToStorage function will upload your photo to a S3 bucket, then prediction will identify the text, send this to a lambda function and receives the result from the match with DynamoDB.

Go to the navigation directory and add or update these files:

AppNavigator.js

import * as React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { Auth } from "aws-amplify";
import HomeScreen from "../screens/HomeScreen";
import LoginScreen from "../screens/Login";

const Stack = createStackNavigator();

export default class Navigator extends React.Component {
  //export default async function AppNavigator({ navigation, route }) {
  // Set the header title on the parent stack navigator depending on the
  // currently active tab. Learn more in the documentation:
  // https://reactnavigation.org/docs/en/screen-options-resolution.html
  state = {
    user: "not authenticated"
  };

  async componentDidMount() {
    await Auth.currentAuthenticatedUser({
      bypassCache: true // Optional, By default is false. If set to true, this call will send a request to Cognito to get the latest user data
    })
      .then(async user => {
        this.setState({ user: user });
      })
      .catch(err => {
        // Is NOT logged in
        console.log(err);
      });
  }

  render() {
    const user = this.state.user;
    return (
      <Stack.Navigator>
        {user === "not authenticated" ? (
          // No token found, user isn't signed in
          <Stack.Screen
            name="SignIn"
            component={LoginScreen}
            options={{
              title: "Sign in"
              // When logging out, a pop animation feels intuitive
            }}
          />
        ) : (
          // User is signed in
          <Stack.Screen name="Home" component={HomeScreen} />
        )}
      </Stack.Navigator>
    );
  }
}

BottomTabNavigator.js

import * as React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = "Home";

export default function BottomTabNavigator({ navigation, route }) {
  // Set the header title on the parent stack navigator depending on the
  // currently active tab. Learn more in the documentation:
  // https://reactnavigation.org/docs/en/screen-options-resolution.html

  return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: "Photo",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-code-working" />
          )
        }}
      />
    </BottomTab.Navigator>
  );
}

metro.config.js

To be sure that metro is not conflicting you need to add this file to the root of your project.

module.exports = {
  resolver: {
    blacklistRE: /#current-cloud-backend\/.*/
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
};

Your app is ready and you can start it from your root project with:

> expo start
> press "i" (this will load the simulator)

Sign in with the user that you have created via AWS Cognito, make a picture, wait a few seconds .... et voilà .... there is a match with your text. Now you can use the email address from the returned object to send an additional email. We are not diving into this functionality now.

Here you can see the movie:
https://twitter.com/i/status/1230221875248279553

Conclusion

AI is the next capability to enrich your app so you can bring more value to your customers. It took me literally two evenings to set up this app and back end and that is of course really great. Imaging how fast you can deliver the right functionalities to your customers. Don't wait and start now! Start also exploring with the other predictions capabilities. The set up would be kind of similar.

I hope you liked this guide and I am looking forward for your feedback in the comments. Happy coding!

See github for the actual code: https://github.com/rpostulart/Aiapp

Do you want to keep up to date about new blogs or if you have questions? Follow me on twitter

The guide to implement Push Notifications with React Native, Expo and AWS Amplify

rpostulart — Tue, 28 Jan 2020 19:58:55 +0000

If you build an app you want to engage your customers so that they use your app as much as possible and also in a way that it brings value to them. Therefor you have to set up push notifications. In this Guide I will show you how that can be possible with some great tools. We are going to build a simple app that demonstrates the push notifications.

There are some powerful tools out there to make app development as easy as possible.

React Native

React Native is great because you can just code in javascript and compile to IOS and Android. So less costs and a faster development cycle.

Expo

Expo works out well because it is packaged with a lot features which you need and you can develop for IOS and Android without installing any other tools or even without having a Mac.

AWS Amplify

AWS Amplify is the glue between these tools and the backend. Here you can also use Javascript for setting up your API's, storage, authentication and authorization, database, data store and more.

Push Notifications

When you will dive deeper in these tool sets and setting up your architecture you will start loving them and when you are coming to a point where you want to use push notifications you have to say good bye to Expo because AWS Amplify doesn't come with a solution out of the box where you can use push notifications without ejecting. We have some luck that AWS has more tools that can support push notifications without ejecting.

Architecture

We will use AWS Amplify, AWS Pinpoint, AWS Lambda, AWS DynamoDB and Expo Push Notifications Server to accomplish it.

In this example we will make a message in our app. We will create a scheduled Pinpoint Campaign via the AWS Lambda Pinpoint (This can also be an immediate campaign). As soon as the campaign will be triggered, first a hook will kick off. This hook will send campaign data to the AWS Lambda Push Notifications. We will prepare the push notifications message and send it via the Expo Server SDK to Expo. This will send the push message to the client, to your app. In the meanwhile the campaign data has been send back to AWS Pinpoint to send it further to others channels (if you want). You are going to set up an email channel so you can see how it works

Getting Started

I will use NPM but course you can also you Yarn.

Set up React Native

First, we'll create the React Native application we'll be working with.

$ npx expo init pushApp

> Choose a template: blank

$ cd pushApp

$ npm install aws-amplify aws-amplify-react-native

Set up AWS Amplify

We first need to have the AWS Amplify CLI installed. The Amplify CLI is a command line tool that allows you to create & deploy various AWS services.

To install the CLI, we'll run the following command:

$ npm install -g @aws-amplify/cli

Next, we'll configure the CLI with a user from our AWS account:

$ amplify configure

For a video walkthrough of the process of configuring the CLI, click

Now we can now initialize a new Amplify project from within the root of our React Native application:

$ amplify init

Here we'll be guided through a series of steps:

Enter a name for the project: amplifypushapp (or your preferred project name)
Enter a name for the environment: dev (use this name, because we will reference to it)
Choose your default editor: Visual Studio Code (or your text editor)
Choose the type of app that you're building: javascript
What javascript framework are you using: react-native
Source Directory Path: /
Distribution Directory Path: build
Build Command: npm run-script build
Start Command: npm run-script start
Do you want to use an AWS profile? Y
Please choose the profile you want to use: YOUR_USER_PROFILE
Now, our Amplify project has been created & we can move on to the next steps.

Add Graphql to your project

Amplify add api

These steps will take place:

Select Graphql
Enter a name for the API: pushAPI (your preferred API name)
Select an authorisation type for the API: Amazon Cognito User Pool ( Because we are using this app with authenticated users only, but you can choose other options)
Select at do you want to use the default authentication and security configuration: Default configuration
How do you want users to be able to sign in? Username (with this also the AWS Amplify Auth module will be enabled)
Do you want to configure advanced settings? No, I am done.
Do you have an annotated GraphQL schema? n
Do you want a guided schema creation?: n
Provide a custom type name: user

You API and your schema definition have been created now. You can find it in you project directory:

Amplify > backend > api > name of your api

The @model directive will create a DynamoDB for you. There are more directives possible, for the full set look at the AWS Amplify docs.

Configure AWS Email Service

Log into the console and go to the SES service. Then follow these instructions to configure an e-mail address and get it activated. You will need to use this email address later as the email address where you send the mails from.

https://docs.aws.amazon.com/ses/latest/DeveloperGuide/setting-up-email.html

Add analytics to your project

We are going to add analytics to your project because for now this is the easiest way to set up access to pinpoint from your pinpoint function. You can also modify the cloudformation template to do so.

Amplify add analytics

Complete the steps with your information.

Add Functions to your project

By adding functions we are going to create the Lambda's.

Amplify add function

Follow these steps:

Provide a friendly name for your resource to be used as a label for this category in the project: pushNotification
Provide the AWS Lambda function name:
Choose the function template that you want to use: Hello world function
Do you want to access other resources created in this project from your Lambda function? Y
Select the category api
Select the operations you want to permit for pushAPI read
Do you want to edit the local lambda function now? N

Repeat this step again but call the next function pinpoint and anwer these steps with this information:

Do you want to access other resources created in this project from your Lambda function? Y
Select the category Analytics
Select the operations you want to permit for Analytics create, read, update, delete
Do you want to edit the local lambda function now? N

Your Functions are created now and you can find it in your project directory:

Amplify > backend > function > name of your function

Go to the src directory of the Pinpoint function and install this package


$ npm install aws-sdk

Open the index.js file and paste this code. Please walk through the code and replace the right values.

/* Amplify Params - DO NOT EDIT
You can access the following resource attributes as environment variables from your Lambda function
var environment = process.env.ENV
var region = process.env.REGION
var apiPushAPIGraphQLAPIIdOutput = process.env.API_PUSHAPI_GRAPHQLAPIIDOUTPUT
var apiPushAPIGraphQLAPIEndpointOutput = process.env.API_PUSHAPI_GRAPHQLAPIENDPOINTOUTPUT
var analyticsAmplifypushappId = process.env.ANALYTICS_AMPLIFYPUSHAPP_ID
var analyticsAmplifypushappRegion = process.env.ANALYTICS_AMPLIFYPUSHAPP_REGION

Amplify Params - DO NOT EDIT */

const AWS = require("aws-sdk");
AWS.config.region = "<REGION>"; // fill in your right region ******
const pinpoint = new AWS.Pinpoint();

exports.handler = async (event, context) => {
  try {
    event = event.arguments.input;

    // Create a AWS Pinpoint project
    const appID = await createApp();

    // Enable the SES email address for the project
    enableChannels(appID, event.email);

    // Create the endpoints for the Pinpoint project/app
    await createEndPoints(
      appID,
      event.id,
      event.email,
      event.name,
      event.token
    );

    // Create a segment where you want to filter the endpoint you want to send a message to
    const segmentID = await createSegment(appID);

    // create starter segment and campaign.
    const hookLambda = "pushNotification-dev";
    const result = await createCampaign(
      appID,
      event.message,
      hookLambda,
      segmentID
    );

    return result;
  } catch (error) {
    console.log("Oops! An error happened.");
  }
};

async function createApp() {
  let params = {
    CreateApplicationRequest: {
      /* required */
      Name: "Push App" /* Campaign name, required */
    }
  };

  return new Promise((res, rej) => {
    pinpoint.createApp(params, function(err, data) {
      if (err) {
        rej(err);
        console.log(err, err.stack); // an error occurred
      } else {
        res(data.ApplicationResponse.Id); //console.log(data);// successful response
      }
    });
  });
}

/*
When you create a new pinpoint app you need to activate an emailaddress where the emails can be send from
*/
function enableChannels(appID, email) {
  console.log(appID, email);
  var params = {
    ApplicationId: appID /* required */,
    EmailChannelRequest: {
      /* required */
      FromAddress:
        "<FROM EMAIL ADDRESS>" /* use the emailaddress that you activated in AWS SES, required  */,
      Identity:
        "arn:aws:ses:<REGION>:<ACCOUNTID>:identity/" + email /* required */,
      Enabled: true
    }
  };
  pinpoint.updateEmailChannel(params, function(err, data) {
    if (err) console.log(err, err.stack);
    else console.log(data); // successful response
  });
}

/*
An endpoint is an object which contains user data which you can use later in a segment to send messages
*/
async function createEndPoints(appID, id, email, name, token) {

  let params = {
    ApplicationId: appID /* required */,
    EndpointId: id /* required */,
    EndpointRequest: {
      /* required */
      Address: email,
      ChannelType: "EMAIL",
      EndpointStatus: "ACTIVE",
      OptOut: "NONE",
      User: {
        UserAttributes: {
          name: [
            name
            /* more items */
          ],
          expoToken: [
            token
            /* more items */
          ]
        }
      }
    }
  };

  await pinpoint.updateEndpoint(params, function(err, data) {
    if (err) {
      console.log(err, err.stack);
      // an error occurred
    } else {
      console.log(data); // successful response
    }
  });
}

function createSegment(appID) {
  let params = {
    ApplicationId: appID /* required */,
    WriteSegmentRequest: {
      /* required */
      Dimensions: {
        Demographic: {
          Channel: {
            Values: [
              /* required */
              "EMAIL"
              /* more items */
            ],
            DimensionType: "INCLUSIVE"
          }
        }
      },
      Name: "Segment"
    }
  };

  return new Promise((res, rej) => {
    pinpoint.createSegment(params, function(err, data) {
      if (err) {
        rej(err);
        console.log(err, err.stack); // an error occurred
      } else {
        res(data.SegmentResponse.Id); //console.log(data);// successful response
      }
    });
  });
}
/*
With the endpoint(s) created you can create a segment. A segment is a filter which selects the right endpionts to send messages to
*/
async function createCampaign(appID, message, env, segmentID) {
  const utcDate = new Date(Date.now());

  const params = {
    ApplicationId: appID /* required */,
    WriteCampaignRequest: {
      /* required */
      HoldoutPercent: 0,
      Hook: {
        LambdaFunctionName: env,
        Mode: "FILTER"
      },
      IsPaused: false,
      Limits: {},
      MessageConfiguration: {
        EmailMessage: {
          Title: "Test Email Message",
          HtmlBody:
            `<!DOCTYPE html>\n    <html lang="en">\n    <head>\n    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n</head>\n<body>\n<H2>Hallo {{User.UserAttributes.name}},</H2>\n\n <br />This is a Text Message from PinPoint. \n You have send this text: \n\n` +
            message +
            `\n</body>\n</html>`,
          FromAddress: "<FROM EMAIL ADDRESS>"
        },
        DefaultMessage: {
          // you push message
          Body: message
        }
      },
      Name: "push campaign",
      Schedule: {
        IsLocalTime: false,
        QuietTime: {},
        StartTime: utcDate.toISOString(),
        Frequency: "ONCE"
      },
      SegmentId: String(segmentID),
      SegmentVersion: 1,
      tags: {}
    }
  };

  return new Promise((res, rej) => {
    pinpoint.createCampaign(params, function(err, data) {
      if (err) {
        console.log(err, err.stack); // an error occurred
        const response = {
          statusCode: 500,
          body: JSON.stringify(err)
        };
        rej(response);
      } else {
        console.log(data);
        const response = {
          statusCode: 200,
          body: JSON.stringify(data)
        };

        res(response); // successful response
      }
    });
  });
}

You are almost there. Now let's make the next function. Go to the Push Notifications directory and then to the src directory. Install this NPM package


$ npm install expo-server-sdk

Open index.js and past this code

/* Amplify Params - DO NOT EDIT
You can access the following resource attributes as environment variables from your Lambda function
var environment = process.env.ENV
var region = process.env.REGION
var apiPushAPIGraphQLAPIIdOutput = process.env.API_PUSHAPI_GRAPHQLAPIIDOUTPUT
var apiPushAPIGraphQLAPIEndpointOutput = process.env.API_PUSHAPI_GRAPHQLAPIENDPOINTOUTPUT

Amplify Params - DO NOT EDIT */ const {
  Expo
} = require("expo-server-sdk");

// Create a new Expo SDK client
let expo = new Expo();

exports.handler = function(event, context, callback) {
  try {
    let messages = [];

    // prettier-ignore
    for (var key in event.Endpoints) {
    if (event.Endpoints.hasOwnProperty(key)) {
      var endpoint = event.Endpoints[key];

        messages.push({
          to: String(endpoint.User.UserAttributes.expoToken),
          sound: "default",
          body: event.Message.apnsmessage.body,
           data: { "status": "ok" }
        });

    }
  }

    // The Expo push notification service accepts batches of notifications so
    // that you don't need to send 1000 requests to send 1000 notifications. We
    // recommend you batch your notifications to reduce the number of requests
    // and to compress them (notifications with similar content will get
    // compressed).
    let chunks = expo.chunkPushNotifications(messages);
    let tickets = [];
    (async () => {
      // Send the chunks to the Expo push notification service. There are
      // different strategies you could use. A simple one is to send one chunk at a
      // time, which nicely spreads the load out over time:
      for (let chunk of chunks) {
        try {
          let ticketChunk = await expo.sendPushNotificationsAsync(chunk);
          console.log(ticketChunk);
          tickets.push(...ticketChunk);
          // NOTE: If a ticket contains an error code in ticket.details.error, you
          // must handle it appropriately. The error codes are listed in the Expo
          // documentation:
          // https://docs.expo.io/versions/latest/guides/push-notifications#response-format
        } catch (error) {
          console.error(error);
        }
      }
    })();

    // Later, after the Expo push notification service has delivered the
    // notifications to Apple or Google (usually quickly, but allow the the service
    // up to 30 minutes when under load), a "receipt" for each notification is
    // created. The receipts will be available for at least a day; stale receipts
    // are deleted.
    //
    // The ID of each receipt is sent back in the response "ticket" for each
    // notification. In summary, sending a notification produces a ticket, which
    // contains a receipt ID you later use to get the receipt.
    //
    // The receipts may contain error codes to which you must respond. In
    // particular, Apple or Google may block apps that continue to send
    // notifications to devices that have blocked notifications or have uninstalled
    // your app. Expo does not control this policy and sends back the feedback from
    // Apple and Google so you can handle it appropriately.
    let receiptIds = [];
    for (let ticket of tickets) {
      // NOTE: Not all tickets have IDs; for example, tickets for notifications
      // that could not be enqueued will have error information and no receipt ID.
      if (ticket.id) {
        receiptIds.push(ticket.id);
      }
    }

    let receiptIdChunks = expo.chunkPushNotificationReceiptIds(receiptIds);
    async () => {
      // Like sending notifications, there are different strategies you could use
      // to retrieve batches of receipts from the Expo service.
      for (let chunk of receiptIdChunks) {
        try {
          let receipts = await expo.getPushNotificationReceiptsAsync(chunk);
          console.log(receipts);

          // The receipts specify whether Apple or Google successfully received the
          // notification and information about an error, if one occurred.
          for (let receipt of receipts) {
            if (receipt.status === "ok") {
              continue;
            } else if (receipt.status === "error") {
              console.error(
                `There was an error sending a notification: ${receipt.message}`
              );
              if (receipt.details && receipt.details.error) {
                // The error codes are listed in the Expo documentation:
                // https://docs.expo.io/versions/latest/guides/push-notifications#response-format
                // You must handle the errors appropriately.
                console.error(`The error code is ${receipt.details.error}`);
              }
            }
          }
        } catch (error) {
          console.error(error);
        }
      }
    };

    callback(null, event.Endpoints);
  } catch (error) {
    callback(error);
  }
};

Now we need to push first all the service to the cloud. Go to the root your project and run this command

amplify push

Follow these steps:

Do you want to generate code for your newly created GraphQL API?Yes
Choose the code generation language target Javascript
Enter the file name pattern of graphql queries, mutations and subscriptions Enter (default)
Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions? Y
Enter maximum statement depth [increase from default if your schema is deeply nested] Enter (default)

Go back to the src directory of your pushNotification function. Open this file: pushNotification-cloudformation-template.json and go to the "Resources": { section and paste this code:

    "LambdaInvokePermission": {
            "Type": "AWS::Lambda::Permission",
            "Properties": {
                "Action": "lambda:InvokeFunction",
                "FunctionName": {
                    "Fn::If": [
                        "ShouldNotCreateEnvResources",
                        "pushNotification",
                        {
                            "Fn::Join": [
                                "",
                                [
                                    "pushNotification",
                                    "-",
                                    {
                                        "Ref": "env"
                                    }
                                ]
                            ]
                        }
                    ]
                },
                "Principal": {
                    "Fn::Sub": [
                        "pinpoint.${region}.amazonaws.com",
                        {
                            "region": {
                                "Ref": "AWS::Region"
                            }
                        }
                    ]
                },
                "SourceArn": {
                    "Fn::Sub": [
                        "arn:aws:mobiletargeting:${region}:${account}:/apps/*",
                        {
                            "region": {
                                "Ref": "AWS::Region"
                            },
                            "account": {
                                "Ref": "AWS::AccountId"
                            }
                        }
                    ]
                }
            }
        },

Save the file. This code will set the permissions so that AWS Pinpoint can invoke the Lambda as a hook. You have to do a separate push. If you try to do it with the previous push it can be the case that not all services are pushed when you try to set the permissions.

amplify push

Go to:

Amplify > backend > api > name of your api > open schema.graphql

Now the functions have been deployed we need to update also our schema. Put this code in schema.graphql. It will create an extra mutation so you can invoke the functions in your app.

type User @model {
  id: ID!
  name: String!
  email: String!
  expoToken: String
}

type Mutation {
  pinpoint(input: pinpointInput): pinpointResult
    @function(name: "pinpoint-${env}")
}

type pinpointResult {
  statusCode: Int
  body: String
}

input pinpointInput {
  token: String!
  name: String!
  email: String!
  message: String!
  id: String!
}

Do another push

amplify push

Are you sure you want to continue? Y

Go to the root of your project, then to src directory > graphql > mutations.js check if this code is there, if not please add and save it:

export const pinpoint = /* GraphQL */ `
  mutation pinpoint($input: pinpointInput!) {
    pinpoint(input: $input) {
      statusCode
      body
    }
  }
`;

Add some data via Cognito and AppSync

Let’s add some data which you can use in your app. Go to the AppSync service in the console.

Go to AWS AppSync via the console.
Open your project
Click on Queries
Log in with a Cognito user by clicking on the button 'Login via Cognito User Pools' (You can create a user via Cognito in the console or via your App) (Use the data that your have written down)
Add the following code and run the code (update with your e-mail address):

mutation PutUser {
  createUser( input: {
    id: "b14cc22-c73f-4775-afd7-b54f222q4758",
    name: "Ramon", 
    email: "<EMAILADDRESS>"
  }
  ){
    id
    name
    email
  }
}

Let's build the React Native App

I made a simple (and a little bit ugly, everything in two components) app where a user needs to log in, we will get his user profile, look if there is valid ExpoToken available, if not then we request one and save that in the profile. In the app this user can make a message that will be send through a push notification and email to the user

Go to the root of your project and open App.js and replace it with this code:

import React from "react";
import { withAuthenticator } from "aws-amplify-react-native";
import Amplify, { Analytics } from "aws-amplify";

// Get the aws resources configuration parameters
import awsconfig from "./aws-exports"; // if you are using Amplify CLI
import Main from "./src/Main";

Amplify.configure(awsconfig);
Analytics.disable(); // disabled analytics otherwise you get annoying messages

class App extends React.Component {
  render() {
    return <Main />;
  }
}

export default withAuthenticator(App);

This will import everything you need and wraps your app with a HOC withAuthenticator. This creates login and signup functionality for your app.

Now create a file in the src folder with this name: Main.js and paste the following code:

import React from "react";
import { View, TextInput, Button } from "react-native";
import * as queries from "./graphql/queries.js";
import * as mutations from "./graphql/mutations";
import { API, graphqlOperation, Auth } from "aws-amplify";
import { Notifications } from "expo";
import * as Permissions from "expo-permissions";

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      profile: {},
      message: "",
      user: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  async componentDidMount() {
    const user = await Auth.currentSession()
      .then(data => {
        this.setState({ user: data.idToken.payload.sub });
        return data.idToken.payload.sub;
      })
      .catch(err => console.log(err));

    const profile = await this.getUserProfile(user);

    // There is no expoToken available yet, so we will request that and save it into the profile
    if (profile.expoToken === null) {
      const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);

      if (status !== "granted") {
        alert("No notification permissions!");
        return;
      }

      let token = await Notifications.getExpoPushTokenAsync();

      // Only update the profile with the expoToken if it not exists yet
      if (token !== "") {
        const inputParams = {
          id: user,
          expoToken: token
        };
        await API.graphql(
          graphqlOperation(mutations.updateUser, { input: inputParams })
        )
          .then(result => {
            console.log(result);
          })
          .catch(err => console.log(err));
      }
    }
  }

  async getUserProfile(sub) {
    const result = await API.graphql(
      graphqlOperation(queries.getUser, { id: sub })
    )
      .then(result => {
        this.setState({
          profile: result.data.getUser
        });
        return result.data.getUser;
      })
      .catch(err => console.log(err));

    return result;
  }

  async handleSubmit() {
    const inputParams = {
      message: this.state.message,
      token: this.state.profile.expoToken,
      name: this.state.profile.name,
      email: this.state.profile.email,
      id: this.state.user
    };

    await API.graphql(
      graphqlOperation(mutations.pinpoint, { input: inputParams })
    )
      .then(result => {
        console.log(result);
        console.log("success");
        this.setState({ message: "" });
      })
      .catch(err => console.log(err));
  }

  render() {
    return (
      <View style={{ marginTop: 80, marginLeft: 10, marginRight: 10 }}>
        <TextInput
          placeholder="Your push message"
          value={this.state.message}
          onChangeText={input => this.setState({ message: input })}
          style={{
            paddingLeft: 5,
            height: 40,
            fontSize: 16,
            marginBottom: 6,
            marginTop: 2
          }}
        ></TextInput>
        <Button title="Submit" onPress={this.handleSubmit} />
      </View>
    );
  }
}

export default Main;

Your app is ready and you can start it from your root project with:

expo start"

You need to install Expo client on a physical device and start the app otherwise you can't test the push notifications. Sign in with the user that you have created via AWS Cognito, fill in a push message, wait a few seconds .... et voilà .... you have received a push message in the app and an email message on your account.

Conclusion

It is really amazing how you can deliver these features fast to your customers with these great tools (AWS Amplify, React Native and Expo). Your app is ready to get your customers engaged :)

I was struggling with getting push notifications up and running while still keeping all the tools onboard so I can benefit from it. I had to think beyond the current limitations and that is how I came up with this architecture and implementation.

I hope you liked this guide and I am looking forward for your feedback in the comments or please share the projects where you have implemented this set up. Happy coding!

See github for the actual code: [https://github.com/rpostulart/pushapp]

The guide to implement push notifications with React Native, Expo and AWS Amplify

rpostulart — Fri, 24 Jan 2020 16:19:41 +0000

Sorry, accidentally published this one. I am still working on this and will publish it soon.

DEV Community: rpostulart

I Built Jira for AI Agents - Here's why your AI Coding Assistant needs its own project management

AI agents need their own project management

What it looks like in practice

Why not just use Jira / Linear / GitHub Issues?

The architecture

Steering files: your agent's operating manual

The web UI

Slash commands

One-line install

The bigger picture

Try it

The guide to set up NextJS Authentication and data fetching with AWS Amplify Gen2

Contents

Get started

Set up your local environment

Create a data SCHEMA

Set up Authentication

Nextjs APP Router and Authentication

Set up Nextjs

Add data to your event page

Run your sandbox

Test your app

Deploy to the cloud

Conclusion

The guide to connect AWS Amplify to any (AWS) service 2.0

AWS SDK 2.0

AWS SDK 3.0

Example React Native Component

More resources:

AWS-SDK V3 API Docs

AWS SDK V2 API Docs

Blog about performance improvement

Launch announcement

Polyfil import

About me

Twitter

The guide to create (offline) multi tenant apps with Expo and AWS Amplify

Multi tenant

Software as a Service (SaaS)

Slack

Purpose of this guide

The ideal implementation

Ok ... what to do now?

AWS Services

AWS Cognito

AWS Amplify

AWS Appsync

AWS DynamoDB

Getting Started

Set up AWS Amplify

Set up React Native

Init your Amplify Project

Add Auth to your project

Let's create 4 users

Make a the tenant user

Make a tenant user in the group users

Make a tenant user in the group editors

Make a user in another tenant in the group editors

Add Graphql API to your project

Test via the Appsync console

Set up your React Native App

Repo

Conclusion

About me

Twitter

AWS Amplify cheatsheet

Clean DynamoDB data automaticlly

TTL in DynamoDB

Javascript

AWS Amplify

Update

Conclusion

About me

Twitter

The guide to connect AWS Amplify to any (AWS) service

AWS Amplify

What if you need to connect to another AWS service?

AWS SDK

Getting Started