K5 Playground

Instagram visualization application using Google map.

20 min
Aihara
  1. 1. Information
    1. 1.1. Ingredients
    2. 1.2. Functions
  2. 2. Create the application
    1. 2.1. Frontend
    2. 2.2. Backend
  3. 3. Customize the application
    1. 3.1. Frontend
  4. 4. Deploy the application
    1. 4.1. Backend
    2. 4.2. Frontend
  5. 5. Download
  6. 6. Version

This application displays images of Instagram into Google Maps. You can launch it immediately with this tutorial.

Information

Ingredients

  • Template: Map
  • API Loigcs: Instagram Recent Media

Functions

  • Retrieving your images from Instagram.
  • Displaying the images on Google Maps.

Create the application

Frontend

  1. Choose the Map Template.

  2. Customize the UI in K5 Playground.

Backend

  1. Edit the API Logic of GET sample_locations endpoint.

    1. Delete the Sample Data API logic.

    2. Add the Instagram Recent Media API Logic from SNS menu at the right pane.

    3. Set the accessToken for Instagram API.

    4. Add the FUJITSU Empty Logic API Logic from Custom menu at the right pane.

    5. Edit the code.

      Format /users/self/media/recent/ response for GET /sample_location response.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var images = results.data.map(function(image) {
        return {
          name: image.caption.text,
          lng: image.location.longitude,
          lat: image.location.latitude,
          type: 'cultural',
          image: image.images.low_resolution.url,
          likes: image.likes.count,
          comments: image.comments.count,
        }
      });
      next(images);

  2. Download the application.

Customize the application

Frontend

  1. Edit the frontend\app\config.js.

    Set API key for Google Map.

    1
    2
    3
    4
    bootstrapURLKeys: {
      key: process.env.GOOGLE_API_KEY || '[Add Google API Key here]',
      language: 'en',
    },

  2. Edit the frontend\app\components\pages\MapPage.js.

    Modify props of MapPin001 to display images on the map.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <MapPin001
      style={pointStyle}
      lng={point.lng}
      lat={point.lat}
      title={
        <div>
          <h2>{point.name}</h2>
          <img style={{ width: 120 }} src={point.image} />
        </div>
      }
    />

  3. Edit the frontend\app\components\pages\MapPage.js.

    Change default state to show images.

    1
    2
    3
    4
    state = {
      visibles: [0],
      openDrawer: false,
    };

Deploy the application

Backend

1
2
cd backend
cf push [APP_NAME]

Frontend

1
2
3
4
5
cd frontend
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

Download

Version

  • Map Template: v1.0.0
Tutorial React.js Flux Node.js Swagger BFF SPA Microservice K5 K5 CF Map Instagram