Implement CompilerService for API Communication [frontend]

[salazarsebas]

🌐 Implement CompilerService for API Communication 🔌

📝 Description

Create a CompilerService in Angular to handle HTTP communication with the backend for compilation and testing requests. This service will abstract API calls, making the codebase modular and easier to maintain. It will ensure secure and reliable communication with the backend, handling responses and errors appropriately.

🎯 Objective

Develop a TypeScript service in apps/frontend/src/app/services/ to send Rust code to /api/compile and /api/test endpoints and process responses.

🗂 Structure

• Directory: apps/frontend/src/app/services/
• Files:
  • apps/frontend/src/app/services/compiler.service.ts
  • apps/frontend/src/app/app.module.ts
• Expected structure:

  apps/frontend/
  ├── src/
  │   ├── app/
  │   │   ├── services/
  │   │   │   └── compiler.service.ts
  │   │   └── app.module.ts
  

✅ Requirements

• Generate the service with bun x ng generate service compiler.
• Import HttpClientModule in app.module.ts.
• Create methods in compiler.service.ts:
  • compile(code: string): Observable<{ output: string }>
  • test(code: string): Observable<{ output: string }>
• Use HttpClient to send POST requests to http://localhost:3000/api/compile and http://localhost:3000/api/test.
• Include error handling with RxJS catchError.
• Inject the service into EditorComponent for future use.
• Commit changes with a message like feat: implement compiler service.
• Push changes to the GitHub repository.

🏆 Expected Outcomes

• CompilerService sends POST requests with Rust code to the backend.
• Service handles successful responses and errors gracefully.
• Service is injectable and ready for use in EditorComponent.
• Changes are committed and pushed to GitHub.

🔗 References

• Angular HttpClient
• RxJS Catch Error
• Angular Services

📋 Notes

• Hardcode the API URL (http://localhost:3000) for now; make configurable later.
• Ensure TypeScript types are used for request and response data.

[Sandijigs]

@salazarsebas assign me this issue , I already Know How the designs will be implementes

[pushkarm029]

Hey, I can complete this quickly. Thanks @salazarsebas