CODAPPS

Creating a project and previewing your first app

last modified: 2018-01-21

EMLyon logo corp

Clément Levallois

'Escape' or 'o' to see all sides, F11 for full screen, 's' for speaker notes

1. Creating a project

  • Open NetBeans

  • Click on the second icon from the left:

Clicking on the icon for new projects
Figure 1. Clicking on the icon for new projects
  • Select a « CodenameOne project »:

nb codenameone project
Figure 2. Selecting a Codename One type of project

Then click on Next to move to the next screen.

  • Choose a name and a location for your project. Since the app will be about one of your interests / hobbies, choose in accordance!

Put no space in the name of your app

  • No special characters like - _# »& @

  • No accent marks like é ù à or ñ, etc.

nb codenameone project name
Figure 3. Choosing the name and location of your project

This will be the administrative name of your app on the app store so please choose it carefully !

Then click on Next to move to the next screen:

Choosing the name and location of your project
Figure 4. Choosing the name and location of your project

We will explain in turn what package name, theme and template you should choose:

1. The "package name"

This is the official id of your app. Basically, this is the way for Google or Apple to give an ID card to your app.

It should be unique: one package name for each different app you create.

The package name should contain at least three parts separated by dots. The default value suggested com.mycompany.myapp

You should change this default value.

How can we find a unique package name for an app?

The convention is to take the name of your website and reverse it:

→ if you build apps for emlyon (www.em-lyon.com), you’d have a package name like : com.emlyon.myfirstapp

If you don’t own a website, you can use the reverse of your email address. If your email is barackobama@gmail.com, your package name could be:

com.gmail.barackobama.myfirstapp

2. The "theme"

This defines the general colors and appearance of your app, how it will look like (you’ll be able to modify that later).

Please choose Native in the dropdown menu: this means that your app will have an Apple look on iOS, look like Android style on Android phones, etc.

3. The "template"

In the dropdown menu, choose the template « Hello World (Bare Bones) ».

This template allows us to design our app both with by drawing on screen and by programming (coding!).

Other templates would provide us with apps already prebuilt in some ways, we don’t use them.

Click on Finish and your app will be created.

4. Done! Preview your app.

Previewing your app
Figure 5. Previewing your app
  1. The files of your app appear on the left of your screen in NetBeans.

  2. You can launch the preview of your app by clicking on the green arrow green arrow

It should show a blank screen with "Hi World" in the title, and "Hi World" again in the screen:

Previewing your app
Figure 6. Previewing your app

Congratulations, you started creating your first app and you can already preview it! 🎉

This is the end of the first module. You should now be able to:

  1. install NetBeans, on Mac or PC (we did not cover Linux but this should work as well)

  2. install the Codename One plugin in NetBeans

  3. check that the Codename One plugin is up-to-date, if not you should be able to update it.

  1. create a first project (your first empty app)

  2. launch the preview of your app from NetBeans

In the next module, we will review some basic notions of software development, and we will learn how to create a new screen for our app!

The end

Questions? Want to open a discussion on this lesson? Visit the forum here (need a free Github account).

Find references for this lesson, and other lessons, here.

Licence: Creative Commons, Attribution 4.0 International (CC BY 4.0). You are free to:

  • copy and redistribute the material in any medium or format

  • Adapt — remix, transform, and build upon the material

⇒ for any purpose, even commercially.

round portrait mini 150 This course is designed by Clement Levallois.

Discover my other courses in data / tech for business: http://www.clementlevallois.net

Or get in touch via Twitter: @seinecle

site
    stats