aem-apps-lab-developer

### Lesson: Building a Secure Mobile App with AEM and Developer Studio Banking API

**Objective:** By the end of this lab, you will have built a mobile app that fetches real-time banking data from the Developer Studio API and displays it in an AEM-driven UI. The app will include secure authentication using OAuth2 and dynamic data rendering.

---

#### **Step 1: Set Up Your AEM Development Environment**
1. **Prerequisites:** Ensure you have AEM 6.5+ (or AEM as a Cloud Service) and Node.js (v16+) installed.
2. **Create a New AEM Project:** Use the AEM Archetype 24 to scaffold your project:
   ```bash
   mvn archetype:generate \
     -DarchetypeGroupId=com.adobe.aem \
     -DarchetypeArtifactId=aem-project-archetype \
     -DarchetypeVersion=24 \
     -DgroupId=com.example.aem.apps \
     -DartifactId=banking-app \
     -Dversion=1.0.0 \
     -Dpackage=com.example.aem.apps
   ```
3. **Start AEM Locally:** Run the project in your local AEM instance:
   ```bash
   mvn clean install -PautoInstallPackage
   ```

---

#### **Step 2: Integrate Developer Studio Banking API**
1. **Obtain API Credentials:** Sign up for a Developer Studio account and create a new banking API application to get your `client_id` and `client_secret`.
2. **Configure API Endpoints:** In your AEM project, add the API base URL and endpoints to the `config/com.example.aem.apps.impl.ServiceConfigImpl.cfg.json` file:
   ```json
   {
     "apiBaseUrl": "https://api.developer-studio.com/v1",
     "authEndpoint": "/oauth/token",
     "dataEndpoint": "/accounts"
   }
   ```
3. **Implement OAuth2 Authentication:** Create a service to handle token retrieval. Use the `HttpClient` to fetch the token:
   ```java
   @Component(service = BankingAuthService.class)
   public class BankingAuthServiceImpl implements BankingAuthService {
       private static final String CLIENT_ID = "your_client_id";
       private static final String CLIENT_SECRET = "your_client_secret";

       public String getAccessToken() throws IOException {
           HttpClient client = HttpClient.newHttpClient();
           String requestBody = "grant_type=client_credentials&client_id=" + CLIENT_ID + "&client_secret=" + CLIENT_SECRET;
           HttpRequest request = HttpRequest.newBuilder()
               .uri(URI.create("https://api.developer-studio.com/oauth/token"))
               .header("Content-Type", "application/x-www-form-urlencoded")
               .POST(HttpRequest.BodyPublishers.ofString(requestBody))
               .build();

           HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
           return new JSONObject(response.body()).getString("access_token");
       }
   }
   ```

---

#### **Step 3: Fetch and Display Banking Data in AEM**
1. **Create a Sling Model:** Define a model to fetch account data from the API:
   ```java
   @Model(adaptables = Resource.class)
   public class AccountModel {
       @Inject
       private BankingAuthService authService;

       public List<Account> getAccounts() throws Exception {
           String token = authService.getAccessToken();
           HttpClient client = HttpClient.newHttpClient();
           HttpRequest request = HttpRequest.newBuilder()
               .uri(URI.create("https://api.developer-studio.com/v1/accounts"))
               .header("Authorization", "Bearer " + token)
               .GET()
               .build();

           HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
           JSONArray accounts = new JSONArray(response.body());
           return IntStream.range(0, accounts.length())
               .mapToObj(i -> accounts.getJSONObject(i))
               .map(json -> new Account(json.getString("id"), json.getString("name"), json.getDouble("balance")))
               .collect(Collectors.toList());
       }
   }
   ```
2. **Render Data in AEM:** Use HTL to display the accounts in a component:
   ```html
   <div data-sly-use.accountModel="com.example.aem.apps.models.AccountModel">
       <h2>Your Accounts</h2>
       <ul>
           <sly data-sly-repeat.account="${accountModel.accounts}'>
               <li>${account.name} - $${account.balance}</li>
           </sly>
       </ul>
   </div>
   ```

---

#### **Step 4: Deploy and Test**
1. **Deploy to AEM Cloud:** Push your changes to AEM as a Cloud Service using the `aem-vault-plugin`:
   ```bash
   mvn clean install -PcloudManager
   ```
2. **Test the App:** Open the AEM app on your mobile device or emulator. Verify that the accounts are displayed with correct balances.
3. **Debugging Tips:** Use the AEM Developer Tools extension for Chrome to inspect API calls and responses.

---

#### **GitHub Repository**
Access the complete code for this lesson: [github.com/example/aem-banking-app](https://github.com/example/aem-banking-app).

---

**Next Steps:** Extend this app by adding transaction history or implementing push notifications for balance alerts.