Serverless Socializing

Building a Quick Serverless Game with MongoDB Atlas & Realm

@AdrienneTacke

#WebExpo

Regents of the Amsterdam Leper Colony

Jan Adam Kruseman

1834 - 1835

@AdrienneTacke

#WebExpo

@AdrienneTacke

#WebExpo

@AdrienneTacke

#WebExpo

@AdrienneTacke

@AdrienneTacke

How do I make this into a game?

#WebExpo

@AdrienneTacke

How do I make this into a game?

#WebExpo

@AdrienneTacke

👂

MongoDB Realm

MongoDB Atlas

Functions

Auth

Change Stream 

listens

Realm Web SDK

External API

Direct link to data source

Game actions via Functions

Grab art piece URL

#WebExpo

How do I make this into a game?

@AdrienneTacke

👂

MongoDB Realm

Functions

Auth

Change Stream 

listens

Realm Web SDK

External API

MongoDB Atlas

Direct link to data source

Game actions via Functions

Grab art piece URL

How do I make this into a game?

#WebExpo

@AdrienneTacke

👂

MongoDB Realm

Functions

Auth

Change Stream 

listens

Realm Web SDK

External API

MongoDB Atlas

Direct link to data source

Game actions via Functions

Grab art piece URL

How do I make this into a game?

#WebExpo

@AdrienneTacke

#WebExpo

const generateRandomGameId = () => {
  return (Math.random() + 1).toString(36).substring(6);
};

exports = function() {
  const db = context.services.get('mongodb-atlas').db('classic-cards');
  const newGameId = generateRandomGameId();
  
  db.collection('games').insertOne({
    game_id: newGameId,
    owner_id: context.user.id,
    created_at: new.Date(),
    allow_submissions: false,
    image_url: null,
    submissions: [],
    winning_caption: null
  });

  return { gameId: newGameId };
};
createGame

@AdrienneTacke

👂

MongoDB Realm

Functions

Auth

Change Stream 

listens

Realm Web SDK

External API

MongoDB Atlas

Direct link to data source

Game actions via Functions

Grab art piece URL

How do I make this into a game?

#WebExpo

@AdrienneTacke

👂

MongoDB Realm

Functions

Auth

Change Stream 

listens

Realm Web SDK

External API

MongoDB Atlas

Direct link to data source

Game actions via Functions

Grab art piece URL

How do I make this into a game?

#WebExpo

@AdrienneTacke

#WebExpo

exports = async function() {
  const db = context.services.get('mongodb-atlas').db('classic-cards');
  const http = context.services.get('metApi');
  
  const randomMetObject = await db.collection('met_objectids')
    .aggregate([{ $sample: { size: 1 } }])
    .toArray();
  const randomMetObjectId = randomMetObject[0].value;
  
  const randomizedGetRequest = 'https://collectionapi.metmuseum.org/public/collection/v1/objects/${randomMetObjectId}';
  
  const parsedResponse = JSON.parse(response.body.text());
  
  return { primaryImage: parsedResponse.primaryImageSmall };
};
getRandomArtCard

@AdrienneTacke

👂

MongoDB Realm

Functions

Auth

Change Stream 

listens

Realm Web SDK

External API

MongoDB Atlas

Direct link to data source

Game actions via Functions

Grab art piece URL

How do I make this into a game?

#WebExpo

@AdrienneTacke

👂

MongoDB Realm

Functions

Auth

Change Stream 

listens

Realm Web SDK

External API

MongoDB Atlas

Direct link to data source

Game actions via Functions

Grab art piece URL

How do I make this into a game?

#WebExpo

@AdrienneTacke

#WebExpo

exports = async function(gameId, winningCaption) {
  const db = context.services.get('mongodb-atlas').db('classic-cards');
  const game = await db.collection('games').findOne({ game_id: gameId });
  
  if (game.owner_id !== context.user.id) {
    return { error: 'Not allowed', error_code: '401' };
  }
  
  await db.collection('games').updateOne(
  { game_id: gameId },
  {
    $set: { 
      'allow_submissions': false, 
      'winning_caption': winningCaption 
    }
  }
  );
};
selectWinningCaption

@AdrienneTacke

How do you play the game?

#WebExpo

@AdrienneTacke

Well, let's play it!

https://adriennetacke.github.io/house-of-memes

#WebExpo

Děkuji moc Praho a WebExpo!

@AdrienneTacke | #WebExpo