Merge pull request #439 from internet4000/master

youtube key

README.md

@@ -1,10 +1,10 @@
 # Radio4000
 
-This repository is the main website for Radio4000, CMS for music libraries → https://radio4000.com.
+This repository is the main website for Radio4000, web CMS for streamed media libraries → https://radio4000.com.
 
 Join the discussion about the evolution and the development of Radio4000 on 
 [GitHub issues](https://github.com/internet4000/radio4000/issues) and the 
-[radio4000:matrix.org](https://riot.im/app/#/group/+radio4000:matrix.org) chat.
+[#radio4000:matrix.org](https://riot.im/app/#/group/+radio4000:matrix.org) chat.
 
 ## Presentation
 
@@ -16,18 +16,51 @@ The goals and objectives of Radio4000 are defined in its
 [manifest](https://github.com/internet4000/publications/blob/master/radio4000-manifest.md).
 
 The application in this repository is written in JavaScript, using the frontend framework
-[Ember.js](https://emberjs.com) for the client part of the application. The server part is, 
-for now, using Google's Firebase and the code can be found on the 
-[radio4000-api](https://github.com/internet4000/radio4000-api) repository.
+[Ember.js](https://emberjs.com) for the client part of the
+application. Ember Data is used for the local data store, and also to build the API calls.
+[Emberfire](https://github.com/firebase/emberfire) is used for its
+adapter and serializers to our Firebase database.
+
+The server part is, for now, using Google's Firebase and the code can
+be found on
+the[radio4000-api](https://github.com/internet4000/radio4000-api)
+repository.
 
 The code for the music player used by this project can be found at 
 [radio4000-player](https://github.com/internet4000/radio4000-player).
 
-The plan is to move everything to libre software, self-hosted, with decentralization in mind. It is not there yet and we would love assistance in architecture and development.
+The plan is to move everything to libre software, self-hosted, with
+decentralization in mind. It is not there yet and we would love
+assistance in architecture and development.
+
+## Using
+
+To use Radio4000, you only have to visit
+[radio4000.com](https://radio4000.com), and start discovering new user
+selections.
+
+The rest of this document will introduce some of the technical aspects
+of:
+- setting up and running an instance of Radio4000 (ex: radio3999.com)
+- developping features and fixing bugs for the Radio4000 project
 
 ## Development
 
-Clone this repository, install dependencies and start a development server:
+See the file [contributing](./CONTRIBUTING.md), for more information
+on how to contribute to the project.
+
+### Pre-requisites
+
+To start developing on this project (namely radio4000, radio4000-cms,
+r4-cms), you will have to:
+
+1. have [git setup](https://help.github.com/en/github/getting-started-with-github/set-up-git).
+2. have [npm setup (recommended install:
+   nvm)](https://github.com/nvm-sh/nvm)
+3. have the npm package [yarn set up](https://yarnpkg.com); it is then used as an alternative
+   to npm in this project
+
+Then, clone this repository, install dependencies and start a development server:
 
 ```
 git clone git@github.com:internet4000/radio4000.git
@@ -36,11 +69,13 @@ yarn
 yarn start
 ```
 
-Note: we recommend `yarn` to ensure you get exact dependencies, but you can also use `npm` and `npm install`.
+The start command will launch the application locally, find it in your
+browser at http://localhost:4000.
 
-The start command will launch the application locally, find it in your browser at http://localhost:4000.
+By default this repository uses the `radio4000-staging` database. It
+can also work with any other instance of Firebase Realtime database.
 
-## Testing
+### Testing
 
 Run `yarn test` for a single test or `yarn ember test --server` to start a test server.
 
@@ -49,7 +84,8 @@ Lint scripts with:
 * `yarn lint:js`
 * `yarn lint:js -- --fix`
 
-## Deployment
+
+## Deployment of the production version (radio4000.com)
 
 The site is hosted on netlify.com. Netlify deploys each branch and pull request automatically. 
 
@@ -62,32 +98,53 @@ The site is hosted on netlify.com. Netlify deploys each branch and pull request
 
 See [contributing.md](https://github.com/internet4000/radio4000/blob/master/CONTRIBUTING.md) for more.
 
-## Backend
+## Backend (api.radio4000.com)
 
-We use Google's Firebase as our database and API, as well as for authentication (see next section).
+We use Google's Firebase as our backend (database and API, on Google
+Cloud Engine), as well as for authentication.
 
-By default this repository will use the Radio4000 staging database, but it will work
-with any Firebase database instance.
+> Firestore is not supported. Plans are more leaning toward moving off
+> Google's infrastructures.
 
-The security rules, deciding what can be done on each endpoint are in the [radio4000-api](https://github.com/internet4000/radio4000-api) repository.
+### Security Rules
 
-To run your own firebase instance, in the file
-`radio4000/config/environment.js` you will have to update the key
-`ENV.firebase.databaseURL` to the URL of your instance as provided by
-Firebase. 
+The security rules defining what can be read, updated, written,
+deleted, on each API endpoints are in the
+[radio4000-api](https://github.com/internet4000/radio4000-api)repository,
+in the `./database.rules.json` file.
 
-Ember Data is used for the local data store, and also to build the API calls.
-[Emberfire](https://github.com/firebase/emberfire) is used for its
-adapter and serializers to our Firebase database.
+> You will need to use this file to setup you database instance if you are
+> running your instance of radio4000. In the Firebase Console of your
+> project, under Datatbase > Rules.
+
+### Running your own instance
 
-The YouTube API can be used to fetch video titles when you paste in a
-URL. The API key comes from
-https://console.developers.google.com/apis/credentials?project=firebase-radio4000.
+To run your own firebase instance:
 
-You will need a Google Cloud Console API key, restricted to `Youtube
-Data API v3`, and put it into the `radio4000/config/environment.js`
-file, under the key `youtubeApiKey` (you should have two, one for
-production, and one for development environment).
+1. on the [Firebase Console](https://console.firebase.google.com),
+   create new project, to get an instance of Firebase Realtime database.
+
+2. update the security rules of your project's database, as described
+   in the section above, [**Security**](./#Security Rules)
+
+3. If there you don't have an app already, create one of type `Web
+App`. You can fin the values for your application, in your firebase
+project's console, at `Settings > Project Settings > General > Your
+Apps`. This will provide us the Firebase API keys.
+
+### API Keys
+
+Add your API keys to the CMS, in the file `./config/environment.js`
+
+#### Firebase keys
+
+- `apiKey` : `'your-api-key'`
+- `authDomain` : `'your-project.firebaseapp.com'`
+- `databaseURL` : `'your-project.firebaseio.com'`
+```
+
+> You will have to update the following keys, for the default
+> environment, as well as `production` depending on your objectives.
 
 ## Authentication
 
@@ -114,25 +171,8 @@ Links:
 > Password`, `Google`, `Facebook`. Note that social providers
 > authentication with Google and Facebook will be shutdown in future versions.
 
-For authentication to work, in the file
-`radio4000/config/environment.js` you will have to update the
-following keys, for the default environment, as well as `production`
-depending on your objectives.
-
-```
-apiKey: ''
-authDomain: ''
-databaseURL: ''
-```
-
-You can fin the values for your application, in your firebase project's
-console, at `Settings > Project
-Settings > General > Your Apps`.
-
-If you don't have an app already, create one of type `Web App`.
-
-You can find the values you're looking for under `Firebase SDK snippet
-> Config`.
+For authentication to work, you need to already have setup the
+Firebase keys in the file `radio4000/config/environment.js`
 
 ### Email/password
 

app/about/intro/route.js

@@ -4,6 +4,10 @@ import ChannelsIndexRoute from 'radio4000/channels/index/route'
 
 export default ChannelsIndexRoute.extend({
 	model() {
-		return this.store.findAll('channel')
+		return this.store.query('channel', {
+			orderBy: 'isFeatured',
+			equalTo: true,
+			limitToLast: 10
+		});
 	}
 })

app/about/intro/template.hbs

@@ -48,17 +48,19 @@
 <section class="Section">
 	<div class="Container Container--full">
 		<div class="Grid Grid--center Grid--vcenter Grid--firstHidden">
-			{{#each model as |item|}}
+			{{#if model}}
+				{{#each model as |item|}}
+					<div class="Grid-cell">
+						{{channel-card channel=item}}
+					</div>
+				{{/each}}
 				<div class="Grid-cell">
-					{{channel-card channel=item}}
+					<div class="ChannelCard ChannelCard--text">
+						<p>Tap a channel to play it!</p>
+						<p>Each channel is as unique as the person who is crafting it. <a href="{{href-to 'channels.search'}}" title="">Go to all radios</a>.</p>
+					</div>
 				</div>
-			{{/each}}
-			<div class="Grid-cell">
-				<div class="ChannelCard ChannelCard--text">
-					<p>Simply tap a channel to play it!</p>
-					<p>Each channel is as unique as the person who is crafting it. <a href="{{href-to 'channels.search'}}" title="">Go to all radios</a>.</p>
-				</div>
-			</div>
+			{{/if}}
 		</div>
 	</div>
 </section>

config/environment.js

@@ -23,7 +23,7 @@ module.exports = function(environment) {
 		},
 
 		/* https://console.developers.google.com/apis/credentials?project=firebase-radio4000 */
-		youtubeApiKey: 'AIzaSyBJSepQPx0l5mdrEZxbmyXW3mXjp9uiPSw',
+		youtubeApiKey: 'AIzaSyCfWaTUSMUgxCTybvT9eBvFvQ9toQwk5Mo',
 
 		// Radio4000 staging project.
 		firebase: {