Showing posts with label access Content Fragment output as JSON. Show all posts
Showing posts with label access Content Fragment output as JSON. Show all posts

Tuesday 18 December 2018

AMP with AEM - Demonstrating the ability of Content Fragments in AEM


AMP integration with AEM - CaaS Model(Content as a service) demo 

I was receiving requests for writing sample code to showcase Third party AMP page which retrieve data from AEM (Content as a service).

What is AMP?

The AMP Project is an open-source Google-run website publishing technology initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. More details on https://www.ampproject.org/

How can I develop AMP websites?

You need to refer the above url for implementing AMP Projects, which has detailed information about syntax of AMP.

AMP integration with AEM

Step 1: To work with AMP and AEM, create an AMP file as shown below and deploy it on any server.
(You can refer PWA implementation & deployment article for the same: Set-up PWA running environment).

A sample AMP Structure is given below.

Save below file as 'Sample_AMP.html'


<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>AMP demo with AEM</title>
  <link rel="canonical" href="index.html" />
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
  <noscript>
         <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
  </noscript>
</head>
<body>
<amp-list width="auto"
  height="100"
  layout="fixed-height" src="test.json">
  <template type="amp-mustache">
    <div class="url-entry">
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list> 
</body>
</html>

It takes a JSON input file(src="test.json") and publish data on page.


Step 2: Author a content fragment in AEM which has JSON format as below.
Follow this link for Creating & Authoring Content Fragments:  Create & Author Content Fragments in AEM

{
 "items": [
   {
     "title": "AMP YouTube",
     "url": "https://www.youtube.com/"
   },
   {
     "title": "AMPproject.org",
     "url": "https://www.ampproject.org/"
   },
   {
     "title": "AEM Tutorial Blog",
     "url": "http://aem-cq-tutorials.blogspot.com/"
   },
   {
     "title": "Solr with AEM Totorial",
     "url": "http://aemsolr.blogspot.in/"
   }
 ]
}


Step 3: Now, update the 'Sample_AMP.html' for src="test.json"with publish url of content fragment authored page


Step 4: Ensure CORS is enabled in AEM. (Confused? Refer https://aem-cq-tutorials.blogspot.com/2018/12/integrate-pwa-aem-and-retrieve-aem.html to updated CORS)

Step 5: Now invoke the AMP file, from server, you can see that data is appearing as shown below.

AMP with AEM - click on it to see big

*(I haven't done styling just Functionality is tested).

Notes:
AMP - uses specific tags and syntax which needs to be validated after each change in code. You can use online AMP validator(https://validator.ampproject.org/) for this purpose.

Related Posts

>Step 1: Set-up PWA running environment
>Step 2: How to create & Deploy a Progressive Web Application
>Step 3: Create & Author Content Fragments in AEM
>Step 4: Integrate PWA & AEM and retrieve the AEM content from PWA.


AEM Content Fragments Demo: Integrate AMP with AEM
 

Friday 14 December 2018

AEM With Progressive Web Apps - Demonstrating the ability of Content Fragments in AEM - Display AEM Content to Third Party Applications

AEM - Getting more headless

We all know that AEM is the leader in CMS-world ; day by day new features are getting added as part of new version upgrades. Recently Adobe released AEM 6.5 version with lot more features.

From previous few AEM versions support head-less capability, which means AEM Content can be delivered to multi channels or third party applications.

AEM Provides headless capability through Content Fragments and Experience Fragments. 
In this post we will show a use case of , how to use content fragments with external applications

Click on image to see it big



In this tutorial we will see,
  • How to create & Deploy a Progressive Web Application - PWA(Including 'what is PWA', 'how do we run a PWA')?
  • Create Content Fragments in AEM.
  • Integrate PWA & AEM and retrieve the AEM content from PWA.


Let us first understand what is PWA?

In my previous post I have given an overview of PWA

Progressive Web Application - PWA:
This is an application which behaves like a native application and developed using modern web technologies. This application supports offline features(using service worker & Web App Manifest) when no internet connection and are extremely fast & engaging.

  • PWA is an idea proposed by Google developers.
  • A PWA is mainly dependent on Service Worker and Manifest files.

What is a Service Worker?
They are scripts that stand between your web application and your network

What is a Web App Manifest?

Web App Manifest is a JSON file with meta-information about the site.

PWA can be developed using technologies : Angular, React , Vue


PWA Features:

1. Responsive

2. Push Notification.

3. Offline Support.

4. Fast and efficient.

5. Not served through app store.

6. relatively cheaper than developing native apps

7. Does not require installation

Follow below sections to continue with this tutorial to learn integrating AEM With Progressive Web Apps

>Step 1: Set-up PWA running environment
>Step 2: How to create & Deploy a Progressive Web Application
>Step 3: Create & Author Content Fragments in AEM
>Step 4: Integrate PWA & AEM and retrieve the AEM content from PWA.


Demo Videos:


AEM Content Fragments Demo Part 1: PWA With AEM 



AEM Content Fragments Demo Part 2: PWA Running Environment setup

AEM Content Fragments Demo Part 3: Create & Deploy a Progressive Web Application

AEM Content Fragments Demo Part 4: Create & Author Content Fragments

AEM Content Fragments Demo Part 5 : Integrate AEM with PWA

Thursday 22 June 2017

AEM Content Fragment output as JSON

AEM Content Fragments can be accessed through JSON file URL's. This helps to verify the data while authoring.

To ensure the JSON format is enabled follow below steps:

To enable the content fragment JSON, we need to enable /system/console/configurations > AEM Content Service Feature Flag > (Select) Enable AEM Content Services check box.


YouTube demo videos for Content Fragments:
         AEM 6.3 Content Fragments Basics
         Content Fragments AEM
         View Content fragment output in aem

Say we have created 'this-is-my-frag' Content Fragment,

We can see the complete content using infinity json as url.
http://localhost:4502/content/dam/this-is-my-frag.infinity.json

If we want to generate its output as caas way below url helps.
http://localhost:4502/content/dam/this-is-my-frag/_jcr_content.caas.json

{
    "_children": [{
        "name": "jcr:content",
        "title": "This is my frag",
        "path": "/content/dam/this-is-my-frag/jcr:content",
        "type": "dam:AssetContent",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content.caas.json"
    }]
}

Now when we load the children from above _jcr_content.caas.json

{
    "title": "This is my frag",
    "dam:assetState": "processed",
    "description": "Hello there",
    "contentFragment": true,
    "lastFragmentSave": "Wed Jun 21 2017 15:29:39 GMT+0530",
    "dam:relativePath": "this-is-my-frag",
    "_children": [{
        "name": "renditions",
        "path": "/content/dam/this-is-my-frag/jcr:content/renditions",
        "type": "nt:folder",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/renditions.caas.json"
    }, {
        "name": "related",
        "path": "/content/dam/this-is-my-frag/jcr:content/related",
        "type": "nt:unstructured",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/related.caas.json"
    }, {
        "name": "associated",
        "path": "/content/dam/this-is-my-frag/jcr:content/associated",
        "type": "sling/collection",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/associated.caas.json"
    }, {
        "name": "metadata",
        "path": "/content/dam/this-is-my-frag/jcr:content/metadata",
        "type": "nt:unstructured",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/metadata.caas.json"
    }, {
        "name": "model",
        "title": "Simple Fragment",
        "path": "/content/dam/this-is-my-frag/jcr:content/model",
        "type": "nt:unstructured",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/model.caas.json"
    }]
}

Now we can iterate through the children in above json and get corresponding renditions, related, associated, metadata, model

For eg: model gives below json
{
    "title": "Simple Fragment",
    "version": 2,
    "description": "A simple fragment, containing one single element and no predefined variations",
    "precreateElements": true,
    "_children": [{
        "name": "elements",
        "path": "/content/dam/this-is-my-frag/jcr:content/model/elements",
        "type": "nt:unstructured",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/model/elements.caas.json"
    }, {
        "name": "variations",
        "path": "/content/dam/this-is-my-frag/jcr:content/model/variations",
        "type": "nt:unstructured",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/model/variations.caas.json"
    }]
}

where the variations from above link loads

{
    "_children": [{
        "name": "variation2",
        "title": "variation2",
        "path": "/content/dam/this-is-my-frag/jcr:content/model/variations/variation2",
        "type": "nt:unstructured",
        "href": "http://localhost:4502/content/dam/this-is-my-frag/_jcr_content/model/variations/variation2.caas.json"
    }]
}

This way we can iterate through the content fragment JSON.

https://www.youtube.com/channel/UCbDTGaDneAbj_RCX27VE4cA/videos



Subscribe Our YouTube Channel Here.


Related Posts

AEM Leading to head less CMS?
AEM Content Fragment output as JSON
AEM 6.3 Content Fragments Basics
How to create a Content Fragment? step by step tutorial
Create & Access the content fragment programmatically