https://github.com/glaucia86/music-player-swa

Repositório responsável pela demo usando P5.js de uma aplicação de music player realizando deploy no Azure Static Web Apps e integrado com o GitHub Actions
https://github.com/glaucia86/music-player-swa

azure azure-static-web-apps css github-actions html javascript nodejs p5js static-web-app

Last synced: 3 months ago
JSON representation

Repositório responsável pela demo usando P5.js de uma aplicação de music player realizando deploy no Azure Static Web Apps e integrado com o GitHub Actions

• Host: GitHub
• URL: https://github.com/glaucia86/music-player-swa
• Owner: glaucia86
• License: mit
• Created: 2020-07-15T00:06:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-02-11T14:15:10.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T16:51:09.800Z (4 months ago)
• Topics: azure, azure-static-web-apps, css, github-actions, html, javascript, nodejs, p5js, static-web-app
• Language: CSS
• Homepage:
• Size: 14.7 MB
• Stars: 11
• Watchers: 2
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🎵 Music Player com P5.js + SWA + GitHub Actions



  



Music Player em JavaScript usando a biblioteca **[p5.js](https://p5js.org/examples/)**. O projeto foi baseado no seguinte artigo **[AQUI](https://tympanus.net/codrops/2018/03/06/creative-audio-visualizers/)**

A intenção dessa demo é não ensinar sobre o p5.js, mas sim, mostrar a todos como é fácil realizar deploy de aplicações estáticas usando o serviço Azure Static Web Apps e como podemos integrar facilmente com o GitHub Actions!

Caso desejam saber um pouco mais sobre a biblioteca p5.js, estarei disponibilizando links e recursos necessários sobre a bíblioteca aqui no README.md

## 🚀 Recursos Utilizados 

- **[Visal Studio Code](https://code.visualstudio.com/?WT.mc_id=javascript-0000-gllemos)**

- **[JavaScript library - P5.js](https://p5js.org/examples/)**

- **[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-0000-gllemos)**

- **[Vs Code Extension - Azure Static Web Apps](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps&WT.mc_id=javascript-0000-gllemos)**

- **[GitHub Actions](https://docs.github.com/en/actions)**

- **[Conta Azure Free](https://azure.microsoft.com/free/?WT.mc_id=javascript-0000-gllemos)**

## ⭐️ Conta - Azure For Students 

Caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no **[Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=javascript-0000-gllemos)**. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: **[AQUI](https://azure.microsoft.com/free/students/?WT.mc_id=javascript-0000-gllemos)**

## 🔥 Executando aplicação Localmente

Antes de iniciar os passos abaixo é muito importante que você execute nesse momento o MongoDb localmente!

1) Instalar os pacotes com o comando: (dentro da pasta `src`)

``` 

> npm install

```

2) Depois executar o seguinte comando para executar a aplicação (dentro da pasta `src`):

```

> npm run start

```

Depois bastam abrir o postamn em **localhost:8000** e testar as requisições

E vòilá! :heart: :heart:

## ❗️ Recursos e Links Importantes

- ✅ **[Documentação Oficial do Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-0000-gllemos)**

- ✅ **[Curso Microsoft Learn - Publicando uma aplicação e API JavaScript do Angular, React, Svelte ou Vue com Azure Static Web Apps](https://docs.microsoft.com/learn/modules/publish-app-service-static-web-app-api/?WT.mc_id=javascript-0000-gllemos)**

- ✅ **[Curso Microsoft Learn - Criando e publicando uma aplicação Web estático com o Gatsby e Azure Static Web Apps](https://docs.microsoft.com/learn/modules/create-deploy-static-webapp-gatsby-app-service/?WT.mc_id=javascript-0000-gllemos)**

- ✅ **[Curso Microsoft Learn - Compilando fluxos de trabalho de integração contínua (CI) com o GitHub Actions](https://docs.microsoft.com/learn/modules/github-actions-ci/?WT.mc_id=javascript-0000-gllemos)**

- ✅ **[Documentação Oficial do P5.sound](https://p5js.org/reference/#/libraries/p5.sound)**

- ✅ **[Artigo baseado na demo](https://tympanus.net/codrops/2018/03/06/creative-audio-visualizers/)**

## ❓ Tenho Dúvidas... O que Faço?! 

Caso tenham dúvidas aos códigos desenvolvidos durante a série de artigos, sintam-se a vontade em abrir uma **[ISSUE AQUI](https://github.com/glaucia86/music-player-swa/issues)**. Assim que possível, estarei respondendo as todas as dúvidas que tiverem!