Google Sheet Embedded App Using nuxt

How to run the project:

Requirements:

• See the requirements page: https://developer.youcan.shop/apps/embedded_app/getstarted#requirements
• Runing MySQL server: starting from version 5.7.8 (recomended latest)

Getting Started 🚀:

• Clone the repo
• Create empty MYSQL database
• Copy .env.example into a .env file and fill its own values
• cd into the project
• Run pnpm install to install the dependencies
• Run youcan auth login to authenticate with YouCan
• Run pnpm prisma migrate dev to generate the database and its tables
• Run youcan app install to install the app on your dev store.
• Run pnpm dev to start the project and sync your settings with your partners app settings

Description:

youcan google sheet is a partner embedded app utilize google service and youcan service to:
create, update, delete, sync orders to the parner Google Spread Sheets using its own OAuth2 Credentials

MVP Demo

Infra-structure

Backend ("/server" dir):

- Composables : App Logic (auto-imported)

• Service Layer : Bussiness logic
• Repository Layer : DB logic

- Utils : Helpers (auto-imported)

• Types
• Validator
• Schemas : Validation Schemas
• Handler : (Response, Async, Sync, Catcher) and Error Handling

- Routes : Dir Based Routes

Frontend ("/" root dir):

SSR based

• Assets: Css
• Components
• Composables : Reusable Logic
• Layouts
• Pages
• Public: static Imgs
• Types

Request Cycle:

both frontend and backend is decoupled

• frontend: based on nuxt
• backend: based on nitroJS
• they can be (separated/attached at same time) :
  • separated to microServices
  • attached and share something like: error state (useError, sendError) acc to the below pic

- Example:
 1- useApi.getSetting() #frontend => "/setting/" #serverRoute
 2- "/server/route/setting/index.get" #serverRoute => settingService.get() #service
 3- settingService.get() #service => /server/composables/settingRepository.get() #repository

How Services Communicate?

• Service Communicate to each others using mediatorService its an event => listener dynamic method dispatcher instead of Observer Service (not easy to be tracked by developers) example: once googleService authClient() failed it should till SettingService to disconnect() current OAuth2Client Credentials

  • googleService
  
  - mediatorService

Embdedd Youcan APPs Developer Overview:

Check This Link

Response Shape :

same as nuxt response

{
  "statusCode": number,
  "statusMessage": string,
  "data": any,
  "stack": [] //error stack empty if debug is disabled
}

available Status/Http codes:

• 422: unprocessable entity (validation)
• 401: unauthenticated
• 404: not found
• 200: success
• 500: internal server (global error)