Applicatie setup

« Previous Next »

Er zijn een heleboel verschillende manieren om een app structuur te geven waarbij je gebruik maakt van web technologie, en het maken van organisatorische beslissingen kost veel tijd. Gelukkig als je werkt met een 'command-line tool' als Ember CLI is de structuur al voor je bepaalt. Dit maakt het heel wat makkelijker om snel vorm te geven en nieuwe resources of templates snel te automatiseren, dit zorgy ervoor dat je meer tijd overhoud voor de dingen die echt je aandacht nodig hebben, zoals: het verbeteren van je applicatie.Dit artikel gaat over het gebruiken van Ember CLI en het maken van een app hiermee.

Het maken van je app

Zelfs nu we een heleboel verantwoordelijkheid afdragen aan Ember CLI, is het belangerijk om je bekend te maken met de manier dat projecten en dergelijken zijn opgezet. Laten we beginnen met het maken van een project. We gaan het basis app skelet opzetten en we gaan het lokaal runnen zodat we het kunnen bekijken in onze browser. Later in deze snelstartgids gaan we werken met dit skelet en we gaan er een klok mee maken die tijdzone ondersteuning.

De eerste stap is om een naam te bedenken voor je project. De beste namen zijn kort en ondhoudbaar. In het geval van deze tutorial gebruiken we wereld-klok.
In je terminal of shell ga je naar de map waar je je projecten in wilt hebben. Met deze opdracht:
```
cd path-to-directory
```
Maak je nieuwe project met deze opdracht:
```
ember new wereld-klok
```
Ember zal een nieuwe map genereren met daarin je project. Deze map is in de map waar je eerder naartoe ging. Deze map bevat alle gereedschappen en middelen die je nodig hebt voor een basis ember applicatie. Het kan zijn dat je nu de moed in je schoenen voelt zakken vanwege alle bestanden, maar het is echt heel veel makkelijker dan het lijkt en je zult echt zien dat dit 'framework' een hele hoop flexibiliteit biedt. Ook helpt Ember CLI met het toevoegen van functionaliteit aan je app.
cd naar de map waar je project is gegenereert en kijk eens rond:
```
cd wereld-klok
ls (gebruik dir in windows)
```

Start je app

Terwijl je de scripts schrijft voor je app zal Ember CLI automatisch je scripts samenstellen zodat je meer tijd overhoud voor de bug fixes en het maken van je app. Ember CLI geeft ook de mogelijkheid om een ontwikkelings-server te maken die zorgt dat je de dingen in de browser kunt bekijken. Om je app te starten:

In de map van je project type je het volgende:
```
ember serve
```
If you get the message Run 'bower install' to install missing dependencies, run the command bower install in your command line/terminal then try ember serve again.
Another message that can appear is 'ENOGIT git is not installed or not in the PATH' — this means that Git is not available; install Git then try again.
Open your browser and navigate to https://localhost:4200/. You should see a blank page with a single heading, "Welcome to Ember.js"

Application structure

There is no need to explain all of the items in your new app's structure now; you'll learn more about you work through subsequent sections of the quickstart. However, we wanted to explain a couple of things to you now.

First of all, stop the development server by going to your terminal/command line and pressing Ctrl + C. look at the directory structure again using ls/dir.

You'll notice a dist directory in the application structure. Whenever Ember CLI builds your application, it places the final production-ready files of your app in this directory. You should never edit any of these files directly, as they will be overwritten any time Ember CLI builds your files.
You'll also see an app directory: this is where you make direct changes to your application's code. The contents of this directory are built then copied into dist when you run ember serve.
There is also a public directory, where you put raw assets such as fonts and images that don't require any building. This is copied over to the dist directory unchanged when you run ember serve.
There's a package.json file in your root directory, which contains configuration information, such as the name of the app, and what dependencies it has.

Note: A more detailed explanation of your app structure can be found in the ember documentation.

Creating a Firefox OS manifest file

If you are planning to submit your application to the Firefox Marketplace so that it is available for download on Firefox OS devices, you will want to create a manifest file.

The concept of a manifest file is common practice, and you may be familiar with it from building tools or apps for various different environments. It provides important details about your application (e.g. name, description, version) and should be placed in the root directory of your project.

Using Ember CLI, we can install an add-on that generates this manifest file for us:

From the root of your project, install the add-on by running the following command:
```
npm install ember-cli-fxos --save-dev
```
We can now generate a manifest file with:
```
ember g fxos-manifest
```

This will create a manifest.webapp file in your application's /public directory. When Ember CLI builds your files, this manifest file will be copied over to the /dist folder, which as explained above is the final production directory for your code.

The manifest file created for you is pre-filled with the minimum configuration you'll need to get started. Any values prefixed with @@ (e.g. @@appName) will be pulled from your package.json file at build time. As you iterate on your application, you may need to add properties or adjust values in your manifest.

Note: You can find a full reference of Firefox OS manifest configuration options on MDN.

Next steps

We now have a fresh application running locally that we can begin working with. Next, we'll look into the developer tools that will help you view, test and debug your application as you build.