PlatziMusic

As an practice of the Ionic 4 Course offered at Platzi, a music player for mobiles was developed from scratch based on Angular. Angular features were used to build an application in less time, using components, modules and routes. Ionic components was also used to design the elements of this web application. In addition, it was deployed on the Internet through Firebase.

Preview

You can preview this project by clicking on this link.

Deploying this Project

Requirements

Cloning this Repository from GitHub is really simple. To do this you need to have some tools enough. For example.

• Node.js and npm version 12.8.0 or later
• git
• Angular CLI version 8.3.22 or later
• Ionic CLI version 5.4.14 or later
• Have an API key to use the Maps JavaScript API
• Have an account on Spotify Developers

With these elements you can now clone and execute this project on the local server.

Cloning

To clone this repository from GitHub you must use the git clone command, and pass as a parameter the url of this repository. For this you must position yourself from the git console in the place you want to clone the project and use the following command: git clone https://github.com/JandroMejia97/platzi-music.git.

Installing dependencies

Once the project has been cloned, it must be moved inside the platzi-music folder with the cd platzi-music command, and inside it must execute the npm install command. This command will download all the necessary dependencies to execute the project on the local server.

IMPORTANT: Remember that if you run this command from unix systems you should use sudo npm install, to give it permissions, and if you run it from windows remember to start the console with administrator privileges.

Before Continuing

Before continuing, make sure you do the following:

1. Follow the steps indicated in this tutorial to do the "Deploying an Angular App to Firebase Hosting", with the small modification that the public directory will be dist/platzi-music, not just dist.

2. Having obtained your API key to use Maps JavaScript API. Look how to get it here.

3. Have obtained your Client Id and Secret Client for your application in Spotify Developers. If you haven't done it yet, see how to do it here.

4. Configure the environment variables of the project.

   1. From the console, run this command: cd src && mkdir environments.

      Explain me?

      cd src will take you to the src directory and mkdir environments will create the environments directory.

      The double && is an addition connector to execute one command after the other.

   2. Then, run touch environments/environment.ts environments/environment.prod.ts environments/environment.stag.ts on Unix systems or for a% in (environment environment .prod environment.stag) do type nul> environments\%a.ts on Windows systems.

      Explain me?

      These commands create 3 files, which will have the variables for the development, stag and production environments.

5. Open the project in any code editor and paste the following variables (they can be different in each files according to your preference) in each of the files that were created in the previous step, with YOUR OWN DATA:

   export const environment = {
     production: false,
     apiUrl: 'https://platzi-music-api.now.sh', // OR https://api.spotify.com/v1/
     firebaseConfig: {
       apiKey: "<YOUR API KEY>",
       authDomain: "<YOUR AUTH DOMAIN>",
       databaseURL: "<YOUR DATABASE URL>",
       projectId: "<YOUR PROJECT ID>",
       storageBucket: "<YOUR STORAGE BUCKET>",
       messagingSenderId: "<YOUR MESSAGING SENDER ID>",
       appId: "<YOUR API ID>"
     },
     spotify: {
        clientId: '<YOUR CLIENT ID OF SPOTIFY>',
        secretClientId: '<YOUR SECRET CLIENT ID OF SPOTIFY>'
    },
    googleMaps: {
        apiKey: '<YOUR API KEY OF GOOGLE MAPS>'
    }
   };

   IMPORTANT: You will get these configuration variables from the Firebase console of the project that you created in step 1.

   Project settings > General > Your applications > Firebase SDK snippet > Select "Settings"

Ending

Ready, you have finished configuring the project. Finally use the npm start or ionic serve command to lift the server.

With this ready you can see the project running on port 4200, just open a browser and go to http://localhost:4200/ or http://localhost:8100/. Well, this is all you need to clone and execute this project in Angular from GitHub.

Contact Me

• Email
• LinkedIn
• Twitter
• Facebook
• GitHub Public Repositories

References

• Angular
• Ionic Documentation
• Ionic Icons
• Curso de Ionic
• Clonar Repositorio Angular desde GitHub
• Get an API Key for Maps JavaScript API
• App Settings - Spotify Developers
• Authorization Guide - Client Credentials Flow - Spotify Developers.
• Deploying an Angular App to Firebase Hosting
• Using windows command shell for creating multiple files