Wednesday, June 18, 2025

Design Uplift part VI - Using Tools , AI Co pilot in deisgn and development.

I am giving here complete details of my Linked in post related to using co pilot in generating code and making change quickly.

Ref:  


Design Objectives:
  • User requests / User actions like "like content"  "commentcontent" will be queued and processed.
  •  The path of processing will be different from the regular API request/ response used for application.
  • Objective is to achieve scalable processing architecture and also possible to prioritise processing   user requests and enabling realtime updates to clients .
  • Generating 90% of the code using co pilot and using other tools in design and development. 

Terminology Used: 

Signal R: SignalR supports "server push" functionality, in which server code can call out to client code in the browser using Remote Procedure Calls (RPC), rather than the request-response model common on the web

GitHub Co pilot: GitHub Copilot is an AI-powered tool designed to assist developers throughout the software development lifecycle. It provides contextualized assistance, including code completions, chat assistance, code explanations, and answers to documentation queries

Azure Service Bus:  Azure Service Bus is a fully managed enterprise message broker with message queues and publish-subscribe topics

BFF PatternThe Backend for Frontend (BFF) Pattern addresses the challenge of serving diverse client applications by creating a dedicated backend for each type of client—such as web, mobile, or IoT. Instead of a single backend trying to cater to all, BFF allows tailored APIs that optimize performance, reduce client-side complexity, and improve the user experience. This architecture ensures each client receives only the data and functionality it needs, enhancing efficiency and scalability across platforms.

Use case: 

User actions on web interface processed at back end ,  The user actions here are  like commenting , or like  or just view content .  Regular web requests will fetch data and display data and some actions will be saved to DB. In this example  the actions can processed using a totally decoupled system where the request priority can be managed,  should be able to process huge volumes of request . These User actions can be processed with some delay if processing time is more and some user actions needs Server to Client notifications.


Initial idea is to use copilot and generate as much code as possible.  It is possible ot provide uml as context to copilot. I have provideded diagram shown above as context and started chat with co pilot.

Initial commands are 
generate code . ( I could get all blocks code in c# even client generated in c#)

co piloot generated: BookMarkApi.cs, BFFBookmark.cs etc with methods and properties.

As I am expecting writing from BFF to bookmark api though servie bus and also Need angular UI which can listen to notifications from server. I could add more chat commands
to generate BFFBookmark class as graphql end point with graphql server and passing data from bff to back end using service bus. Co pilot also able to generate test client to listen to the notificaiton from srever using signal R.

In my second learning experience, I could generate lot of code which required to integrate above feature to my product.

How I could integrate above code to my project:

talash.azurewebsite.com is my product where images are displayed on home page.  Here is steps I have done to use above generated code to my web site and on integration there are lot of runtime / compilation error got resolved using git hub copilot. 

  1. Azure portal 
  • Objective: create resource for service bus. app services will host front end and back and and fucntion app to process messages on service bus. 
    1. Create service bus in azure and queue. 
    2. Create function app which has trigger to ready service bus.
    3. signal r uses websockets, make sure server api configuration websockets are enabled.
    4. Web app and Api already deployed to azure as app services.\
  1. UI changes:  
Objective: UI will display likes for content and also will show real time updates from other users. Here image on talash.azurewebsites.com is one examples above infrastructure common to other apps using Talash platform.
    1. Add like button at images on the front page.


    1.  
  1. BFF changes: 
Objective: It is BFF layer which can consume all calls from front end and updating user actions like likes is an mutation operation. which basically writes back to service bus where other services can pick up data and process.

  Loosly coupled system design basically to address queueing and able to process request at different priorities and also can handle high input requests without increasing hardware proportionally with number of user requests. It is a common infrastructure for the apps using Talash back end services.so integration to the system will be more generic dont tie up with any of the apps .

    1. Add mutation UpdaeUserAction in Bff  api code.
    2. Data on service bus will have application id , so the like could be for any data from other clients like talash video app or talash pdf drive. (http://talashlogs.z26.web.core.windows.net/)  so the infrastructure is to process for all above app which are build on Talash api. 
    3. This feature can work on any web apps which are using BFF.
    4.  BFF code write to the service bus. 
    5. Here Strategy pattern used for prioritizing processing of queue content and also some additional processing required for analytics and sales data.
  1.  Function app
    1.  Function app with trigger to read data from service bus and write to MongoDB.
  2. Api with signal R Hub.
Objective :  To enable real time updates to all the users browsing Conent signal R used. The system can be further improved with azure cache using Radis as in-memory db instead of directly reading and writing to DB. This layer will be further improved with a better cache design. 
    1. Changes to like count will be send back to client using signal R.
    2. so all web apps which are Browsing this content will show same like count. still query is cached at graphql server level so any new web client will get data from cached query not from mongo db. Even though the images served same with in the given cache expiry time, still the like count will be shown real time.
    3. Only small mismatch will be if  web app opened after like action with the existing query count. That can be rectified by cache invalidations. But otherwise real time updates achieved at the same time mongo db not hit with in the cache expiry time. This solution can be further tweaked.
    4. Add show error details in verbose while creating signal R service on server which helps to understand if any issue connecting to Hub. 
    5. Design of cache: above data integrity issue can be addressed with azure cache / radis  where writing and reading happens from cache.
  1. Testing: 
Objective: apps using above feature should show real time notifications .
    1.  Above website will have image data which is two way binding to home page.
    2.  New updated likes will be  shown to all client which are browsing  home page.
    3. All unit tests are generated using copilot.
  1. Debugging and trouble shooting
         Here is one query error  which took some time to search  and but co pilot given me quick answer with accurate solution for this  mutation query error. In this case just one space is wrong in the mutation query.

Here is chat with the co pilot. 




i will share git repo here after masking few passwords.  Above steps are completed using the code generated from copilot and it is really useful. Next we can discuss more details of using these tools in more effective way.

Testing , code reviews and code refracturing also can be done effectively with copilot. Documentation is best feature I found with co pilot .  Copilot can explain existing code and also if required it can do generate documents. "/Explain" will give us the every thing about code  and logic used to build. so going forward "/Explaing"  "/Fix" "/Test" "/Docuement"  these may become quite popular terminology among dev community.


AI Search & Prompts:


As part of app modernization the major feature implemented or recommended are depending on AI capabilities.  Searching and querying the huge number fo documents based on vectorized documents DB or converting  plain language  to sql or voice to query related features . Now a days it is quick and easy to generate related code using the AI development studios available with vendors like Microsoft , Amazon and google  and others.


Entities. DB and Analytics


In one of the AI based discussion  the query is about  can Co pilot generate adhoc reports from DB?  As part of "Vision" feature in co pilot it is possible to generate Sql from entity diagram and the sql generated is quite good.  could be generating reports out of sql will be big step and could be very useful for other professionals in IT like business analyst and Quality engineers and managers.  this one is one space to watch out in future, where it can help to quickly get summary reports and how far this new features  can be used reliable way.

Build and deploy Use cases:


Here is an example for using copilot with terraform modules.

please write the terraform config for a lambda function
please allow the lambda function to access sns topics and sqs queues
write me a list of variables to use

Over all co pilot kind of tools covering most of the development , testing and Dev ops space and helping to improve productivity by more than 30 to 40 percent. Initial impression for me is just it is doing some code refracturing.  But now it is much improved tool and we can expect more features in near future.










 






No comments:

Post a Comment

Design Uplift part VI - Using Tools , AI Co pilot in deisgn and development.

I am giving here complete details of my Linked in post related to using co pilot in generating code and making change quickly. Ref:   Desi...