{"id":20957542,"url":"https://github.com/junobuild/workshop","last_synced_at":"2025-05-14T06:31:18.161Z","repository":{"id":181160289,"uuid":"666310703","full_name":"junobuild/workshop","owner":"junobuild","description":"Workshop material to discover Juno","archived":false,"fork":false,"pushed_at":"2024-08-17T07:29:25.000Z","size":522,"stargazers_count":14,"open_issues_count":3,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T13:48:42.290Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junobuild.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-07-14T07:45:51.000Z","updated_at":"2024-10-04T08:09:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"b4899db8-12aa-4703-a5c6-c93c70a986ac","html_url":"https://github.com/junobuild/workshop","commit_stats":null,"previous_names":["buildwithjuno/workshops","junobuild/workshops","junobuild/workshop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junobuild%2Fworkshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junobuild%2Fworkshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junobuild%2Fworkshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junobuild%2Fworkshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junobuild","download_url":"https://codeload.github.com/junobuild/workshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254084635,"owners_count":22011914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-19T01:34:19.753Z","updated_at":"2025-05-14T06:31:17.672Z","avatar_url":"https://github.com/junobuild.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Juno: Workshop\n\n![A screenshot of the example developed during the workshop](https://raw.githubusercontent.com/junobuild/create-juno/main/screenshots/screenshot-example.png)\n\nThis repository provides code samples and instructions to guide attendees in discovering Juno during a workshop.\n\n## Getting Started\n\nClone the repository and install the dependencies:\n\n```bash\ngit clone https://github.com/junobuild/workshop\ncd workshop\nnpm ci\n```\n\n## Workshop\n\nWe are developing a note-taking app, and the core functionality is already in place. However, we still need to integrate Juno, which we plan to implement during the workshop.\n\nBy following the steps below and replacing the provided snippet, we will be able to implement the app and learn about building on Web3 simultaneously.\n\n---\n\n### Table of contents\n\n1. [Initialization](#initialization)\n2. [Authentication](#authentication)\n3. [Storing Document](#storing-documents)\n4. [Listing Document](#listing-documents)\n5. [Uploading Files](#uploading-files)\n6. [Deployment](#deployment)\n\n---\n\n### Initialization\n\nBefore we can integrate Juno into the app, we’ll need to create a satellite. This process is explained in detail in the [documentation](https://juno.build/docs/add-juno-to-an-app/create-a-satellite).\n\n\u003e New developers will also need to sign in to Juno's [console](https://console.juno.build) and may even need to create an Internet Identity.\n\nOnce the satellite is created, we can initialize Juno with its ID.\n\nFirst, configure the satellite ID in the `juno.config.mjs` file.\n\n\u003e TODO: find and replace STEP_1_CONFIGURATION\n\n```javascript\nimport { defineConfig } from \"@junobuild/config\";\n\n/** @type {import('@junobuild/config').JunoConfig} */\nexport default defineConfig({\n  satellite: {\n    // TODO: STEP_1_CONFIGURATION\n    id: \"replace-satellite-id\",\n    source: \"dist\",\n  },\n});\n```\n\nThen, enable the initialization of the library within the application.\n\n\u003e TODO: find and replace STEP_2_INITIALIZATION\n\n```javascript\nawait initSatellite();\n```\n\n---\n\n### Authentication\n\nTo securely identify users anonymously, they will need to sign in.\n\n\u003e TODO: find and replace STEP_3_AUTH_SIGN_IN\n\n```javascript\nimport { signIn } from \"@junobuild/core\";\n\nawait signIn();\n```\n\nTo get to know the user’s state, Juno provides an observable function called `authSubscribe()`. We can use it as many times as required, but I find it convenient to subscribe to it at the top of an app.\n\n\u003e TODO: find and replace STEP_4_AUTH_SUBSCRIBE\n\n```typescript\nimport { authSubscribe, type User } from \"@junobuild/core\";\n\nconst sub = authSubscribe((user: User | null) =\u003e console.log(user));\n```\n\nUsers should obviously also be able to sign out.\n\n\u003e TODO: find and replace STEP_5_AUTH_SIGN_OUT\n\n```javascript\nimport { signOut } from \"@junobuild/core\";\n\nawait signOut();\n```\n\n---\n\n### Storing Documents\n\nStoring data on the blockchain with Juno is done through a feature called “Datastore”. Follow the instructions in the documentation to create a collection, which can be named accordingly (“notes”).\n\nOnce our collection is created, we can persist data on the blockchain using the `setDoc` function.\n\n\u003e TODO: find and replace STEP_6_SET_DOC\n\n```javascript\nawait setDoc({\n  collection: \"notes\",\n  doc: {\n    key,\n    data: {\n      text: inputText,\n    },\n  },\n});\n```\n\n---\n\n### Listing Documents\n\nTo fetch the list of documents saved on the blockchain, we can use the `listDocs` function.\n\n\u003e TODO: find and replace STEP_7_LIST_DOCS\n\n```javascript\nconst { items } = await listDocs({\n  collection: \"notes\",\n});\n```\n\n---\n\n### Uploading Files\n\nAs for the documents, to upload assets we will need first to create a collection in the “Storage”. We can be name it “images”.\n\nOnce our collection is set, we can upload a file on chain using the `uploadFile` function.\n\n\u003e TODO: find and replace STEP_8_UPLOAD_FILE\n\n```javascript\nconst { downloadUrl } = await uploadFile({\n  collection: \"images\",\n  data: file,\n  filename,\n});\n```\n\nIn this particular workshop, we also want to save a reference within the document to its related asset.\n\n\u003e TODO: find and replace STEP_9_ADD_REFERENCE\n\n```javascript\nawait setDoc({\n  collection: \"notes\",\n  doc: {\n    key,\n    data: {\n      text: inputText,\n      ...(url !== undefined \u0026\u0026 { url }), // \u003c--- We add this reference\n    },\n  },\n});\n```\n\n---\n\n### Deployment\n\nAfter we have developed and built our application, we can launch it.\n\nWe recommend using [GitHub Actions](https://juno.build/docs/guides/github-actions) to continuously deploy real applications, but for the sake of this workshop, we will do this manually. That means we need to install the Juno CLI.\n\n```bash\nnpm i -g @junobuild/cli\n```\n\nOnce the installation is complete, we log in to grant access from our terminal to our satellite.\n\n```bash\njuno login\n```\n\nFinally, we deploy our project.\n\n```bash\njuno deploy\n```\n\nCongratulations! Your dApp has been launched on chain 🎉.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunobuild%2Fworkshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunobuild%2Fworkshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunobuild%2Fworkshop/lists"}