{"id":21957159,"url":"https://github.com/aprezcuba24/snippet","last_synced_at":"2026-04-12T04:36:35.293Z","repository":{"id":141944648,"uuid":"102958625","full_name":"aprezcuba24/snippet","owner":"aprezcuba24","description":"Aplicación para guardar recetas de código","archived":false,"fork":false,"pushed_at":"2017-09-26T18:44:34.000Z","size":40857,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T19:31:38.199Z","etag":null,"topics":["angular","electron","example","rxjs","snippets","tutorial"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aprezcuba24.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-09T13:58:04.000Z","updated_at":"2017-09-22T15:58:05.000Z","dependencies_parsed_at":"2023-03-13T10:27:20.976Z","dependency_job_id":null,"html_url":"https://github.com/aprezcuba24/snippet","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/aprezcuba24/snippet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aprezcuba24%2Fsnippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aprezcuba24%2Fsnippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aprezcuba24%2Fsnippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aprezcuba24%2Fsnippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aprezcuba24","download_url":"https://codeload.github.com/aprezcuba24/snippet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aprezcuba24%2Fsnippet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31704492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T21:17:31.016Z","status":"online","status_checked_at":"2026-04-12T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","electron","example","rxjs","snippets","tutorial"],"created_at":"2024-11-29T08:50:13.332Z","updated_at":"2026-04-12T04:36:35.271Z","avatar_url":"https://github.com/aprezcuba24.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snippet App\n\nSnippetApp es una aplicación para guardar pequeñas resetas de código para el uso personal de programadores \no profesionales que les sea útil una aplicación como esta. La aplicación es completamente funcional, pero el\nobjetivo es fundamentalmente para mostrar a otros desarrolladores un ejemplo de aplicación desarrollada con\nAngular2 y Electron, admemás de un uso intensivo de RxJs\n### Las tecnologías utilizadas son las siguientes\n\n- Angular v4.0.0\n- Angular-CLI v1.0.0\n- Electron v1.6.2\n- Electron-Packager v8.6.0\n- RxJs\n\n## Requerimientos\n\n- Instalar globalmente Node.js, v6.10.1 o superior\n- npm v3.10.10\n- @angular/cli, v1.0.0\n- Electron v1.6.2\n- Electron-Packager\n\n## Intalación\n\nSi quiere usarla simplemente como usuario y tiene linux lo puede hacer a partir \nde la aplicción snap. Para hacerlo descargue el último release ``snippet_0.1_amd64.snap`` y luego ejecute el siguiente\ncomando.\n\n```bash\nsudo snap install snippet_0.1_amd64.snap --devmode\n```\nSi la quiere usar como desarrollador haga lo siguiente\n\nClone el repositorio localmente\n\n``` bash\ngit clone https://github.com/aprezcuba24/snippet.git\n```\n\nInstalar dependencias\n\n``` bash\nnpm install\n```\n\nConstruir y ejecutar la aplicación\n\n``` bash\nnpm start\n```\n\n## Comandos incluidos\n\n- `npm run build-electron` - builds your Angular2 app and throws the result as well as your electron main.js file into the dist folder\n- `npm start` - runs `npm run build-electron` and starts your app in electron by running `main.js`\n- `npm run package-mac` - builds your application and generates a `.app` file of your application that can be run on mac. NOTE: I am like 99% sure you need to be on a MAC OS machine to be able to run this.\n- `npm run package-windows` - builds your application and creates an app consumable in windows 32 bit systems. NOTE: If you build this on MAC OS or linux you need wine installed, which can be installed with `brew install wine`\n- `npm run package-linux` - builds your application and creates an app consumable on linux systems.\n- `npm run full-build-mac` - creates a `.dmg` installer for mac platforms.\n- `npm run full-build-windows` - creates an installer for windows platforms.\n\n# Desarrollo\n\nComo se comentó anteriormente la presente aplicación es con el objetivo de explicar una manera de desarrollar, \nusando Angular2 y Electron. Se explicará como está diseñada la arquitectura y las partes fundamentales del código, pero para poder entender \nmejor se debe leer el código y los comentarios.\n  \nUno de los aportes fundamentales es el uso __Rxjs__ para el desarrollo, utilizando programción funcional como \nparadigma de progamación.\n\nPara el acceso a la base de datos se utilizó el ORM __camo__ que está bastante bien, pero podría mejorar más.\n\nEl código fuente de la aplicación está dentro de la carpeta __src__:\n- app: Código de la interfaz\n- assets: ficheros css e imágenes\n- emvironments: Ficheros de configuración\n- server: Código de acceso a la base de de datos y lógica del negocio\n\n## Server\nDentro de __server__ está la lógica de acceso a base de datos. Algo a resaltar aquí es que se usó el componente\nde Inyección de dependencias de Angular2.\n\nDentro se encuentran las siguientes carpetas y ficheros:\n- domain: Carpeta con la configuración de las entidades y dentro tenemos dos:\n  - snippet.ts: Entidada que representa un snippet\n  - tag.ts: Entidad que representa un tag\n- process: Son las clases que gestionan los eventos que se lanzan desde el cliente y devuelven las respuestas\nAdemás tiene la lógica de negocio\n- index.ts: Fichero que arranca el servidor, iniciando los procesos.\n- IpcService.ts: Clase que permite trabajar con __electron.ipcMain__ y permite trabajarla usando RxJs\n\n## App\nEn esta carpeta se almacena el código de la interfaz, implementada con Angular2. Al igual que en __server__ \nestá implmentado por completo con programación funcional usando RxJs.\n\nDentro están las siguientes carpetas y ficheros\n- Components: Aquí se almacenan los componentes globales, ahora solo están los siguientes\n  - dashboard: Componente para la pantalla de inicio donde están los listados y el buscador\n  - list: Componente para gestionar un listado. En el dashboard se muestran tres listados e implementar este \n  componente evita repetir código.\n- services: Almacena los servicios\n  - store: Almacena los servicios que se utilizan para conectarse con el server\n    - app-store.service.ts: Para conectarse a los procesos generales, específicamente al proceso MainProcess\n    - snippet-store.service.ts: Para conectarse a los procesos relacionados con los snippets, SnippetProcess\n    - tag-store.service.ts: Para conectarse a los procesos relacionados con los tags, TagProcess\n  - ipc.client.service.ts: Emboltura para __window.require('electron').ipcRenderer__ y transformado a RxJs\n  - page-load.service.ts: Clase comodín para mostrar y esconder el loader cada vez que se cambia de página\n- shared: Almacena componentes genéricos no vinculados directamente con la lógica del negocio\n  - layout: Tiene un componente para gestionar el diseño común, implementando el patrón decorator\n  - select2: Componente para gestionar los multiselect, que se usan específicamente para los  tags\n- snippet: Tiene la lógica de la gestión de los snippets\n  - detail: Componente para mostrar un snippet\n  - form: Formulario para crear o editar un snippet\n- app.component.ts: Componente principal de la aplicación, es el encargado de iniciar los procesos principales\n- domain_types.ts: Tiene las interfaces para maninpular las entidades.\n\nEl  resto de los ficheros son propios de Angular2, puede buscar documentación apropieda para comprenderlos.\n\nVer los comentarios dentro de los ficheros para entender el funcionamiento.\n\n## TODO:\nFalta implementar las pruebas automáticas, realmente se debería haber hecho desde el principio del desarrollo  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faprezcuba24%2Fsnippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faprezcuba24%2Fsnippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faprezcuba24%2Fsnippet/lists"}