Criar um aplicativo "Olá, Mundo!"Create a "Hello, World!" (JS)app (JS)

Este tutorial ensina a usar JavaScript e HTML para criar um aplicativo "Olá, Mundo" simples orientado para a UWP (Plataforma Universal do Windows) no Windows 10.This tutorial teaches you how to use JavaScript and HTML to create a simple "Hello, world" app that targets the Universal Windows Platform (UWP) on Windows 10. Com um único projeto no Microsoft Visual Studio, você pode criar um aplicativo que seja executado em qualquer dispositivo do Windows 10.With a single project in Microsoft Visual Studio, you can build an app that runs on any Windows 10 device.

Observação

Este tutorial usa o Visual Studio Community 2017.This tutorial is using Visual Studio Community 2017. Se você estiver usando uma versão diferente do Visual Studio, talvez ele seja um pouco diferente.If you are using a different version of Visual Studio, it may look a little different for you.

Aviso

O Visual Studio 2019 não oferece suporte ao desenvolvimento de aplicativos UWP JavaScript.Javascript UWP app development is not supported in Visual Studio 2019. Para desenvolver um aplicativo UWP JavaScript deve-se usar o Visual Studio 2017.You must use Visual Studio 2017 to develop a Javascript UWP app.

Neste tópico, você aprenderá a:In this article you'll learn how to:

  • Crie um novo projeto do Visual Studio 2017 orientado ao Windows 10 e à UWP.Create a new Visual Studio 2017 project that targets Windows 10 and the UWP.
  • Adicione conteúdo HTML e JavaScript.Add HTML and JavaScript content.
  • Execute o projeto na área de trabalho local no Visual Studio.Run the project on the local desktop in Visual Studio.

Antes de começarBefore you start

  • O que é um aplicativo UWP?.What's a UWP app?.
  • Para concluir este tutorial, você precisa do Windows 10 e do Visual Studio.To complete this tutorial, you need Windows 10 and Visual Studio. Prepare-se para começar.Get set up.
  • Também pressupomos que você esteja usando o layout de janela padrão no Visual Studio.We also assume you're using the default window layout in Visual Studio. Se você alterar o layout padrão, poderá redefini-lo no menu Janela usando o comando Redefinir Layout da Janela.If you change the default layout, you can reset it in the Window menu by using the Reset Window Layout command.

Etapa 1: Criar um novo projeto no Visual Studio.Step 1: Create a new project in Visual Studio.

  1. Inicialização do Visual Studio 2017.Launch Visual Studio 2017.

  2. No menu Arquivo, selecione Novo > Projeto para abrir a caixa de diálogo Criar um novo projeto.From the File menu, select New > Project to open the Create a new project dialog.

  3. Escolha Aplicativo em branco (Universal Windows) JavaScript e, em seguida, selecione Avançar.Choose Blank App (Universal Windows) JavaScript, and then select Next.

    (Se você não vir modelos de Universal, talvez não tenha os componentes para a criação de aplicativos UWP.(If you don't see any Universal templates, you might be missing the components for creating UWP apps. Repita o processo de instalação e adicione suporte a UWP clicando em Abrir instalador do Visual Studio na caixa de diálogo Criar um novo projeto.You can repeat the installation process and add UWP support by selecting Open Visual Studio installer in the Create a new project dialog. Confira Preparar-se.See Get set up.

  4. Na caixa de diálogo Configurar novo projeto, digite Olá, Mundo como Nome do projeto e clique em Criar.In the Configure your new project dialog, enter HelloWorld as the Project name, and then select Create.

Observação

Se esta for a primeira vez que usa o Visual Studio, talvez veja uma caixa de diálogo Configurações solicitando a habilitação do Modo de desenvolvedor.If this is the first time you have used Visual Studio, you might see a Settings dialog asking you to enable Developer mode. O Modo de desenvolvedor é uma configuração especial que habilita determinados recursos, como a permissão para executar aplicativos diretamente, em vez de apenas na Store.Developer mode is a special setting that enables certain features, such as permission to run apps directly, rather than only from the Store. Para saber mais, leia Habilitar seu dispositivo para desenvolvimento.For more information, please read Enable your device for development. Para continuar com este guia, selecione Modo de desenvolvedor, clique em Sim e feche a caixa de diálogo.To continue with this guide, select Developer mode, select Yes, and then close the dialog.

Ativar a caixa de diálogo Modo de desenvolvedor

  1. A caixa de diálogo de versão pretendida/versão mínima é exibida.The target version/minimum version dialog appears. As configurações padrão são adequadas para este tutorial, então selecione OK para criar o projeto.The default settings are fine for this tutorial, so select OK to create the project.

    Janela Gerenciador de soluções

  2. Quando o seu novo projeto é aberto, seus arquivos são exibidos no painel do Gerenciador de soluções à direita.When your new project opens, its files are displayed in the Solution Explorer pane on the right. Talvez seja necessário escolher a guia Gerenciador de soluções em vez da guia Propriedades para ver seus arquivos.You may need to choose the Solution Explorer tab instead of the Properties tab to see your files.

    Janela Gerenciador de soluções

Apesar de ser um modelo básico, Aplicativo em Branco (Universal do Windows) contém vários arquivos.Although the Blank App (Universal Window) is a minimal template, it still contains a lot of files. Esses arquivos são essenciais para todos os aplicativos UWP em JavaScript.These files are essential to all UWP apps using JavaScript. Eles fazem parte de todos os projetos criados no Visual Studio.Every project that you create in Visual Studio contains them.

O que os arquivos incluem?What's in the files?

Para exibir e editar um arquivo no projeto, clique duas vezes no arquivo no Gerenciador de Soluções.To view and edit a file in your project, double-click the file in the Solution Explorer.

default.cssdefault.css

  • A folha de estilos padrão usada pelo aplicativo.The default stylesheet used by the app.

main.jsmain.js

  • O arquivo JavaScript padrão.The default JavaScript file. Ele é referenciado no arquivo index.html.It's referenced in the index.html file.

index.htmlindex.html

  • A página da Web do aplicativo, carregada e exibida quando o aplicativo é iniciado.The app's web page, loaded and displayed when the app is launched.

Um conjunto de imagens de logotipoA set of logo images

  • Assets/Square150x150Logo.scale-200.png representa seu aplicativo no menu Iniciar.Assets/Square150x150Logo.scale-200.png represents your app in the Start menu.
  • Assets/StoreLogo.png representa seu aplicativo na Microsoft Store.Assets/StoreLogo.png represents your app in the Microsoft Store.
  • Assets/SplashScreen.scale-200.png é a tela inicial que será exibida quando o aplicativo iniciar.Assets/SplashScreen.scale-200.png is the splash screen that appears when your app starts.

Etapa 2: Adicionar um botãoStep 2: Adding a button

Clique em index.html para selecioná-lo no editor e altere o HTML que contém para ler.Select index.html to select it in the editor, and change the HTML it contains to read as follows.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <script src="js/main.js"></script>
    <link href="css/default.css" rel="stylesheet" />
</head>

<body>
    <p>Click the button..</p>
    <button id="button">Hello world!</button>
</body>

</html>

Ele deve ser assim.It should look like this.

O HTML do projeto

Este HTML referencia o main.js que conterá o JavaScript e, em seguida, adiciona uma única linha de texto e um único botão ao corpo da página da Web.This HTML references the main.js that will contain our JavaScript, and then adds a single line of text and a single button to the body of the web page. O botão recebe uma ID para que o JavaScript possa fazer referência a ele.The button is given an ID so the JavaScript will be able to reference it.

Etapa 3: Adicionar algum JavaScriptStep 3: Adding some JavaScript

Agora, vamos adicionar o JavaScript.Now we'll add the JavaScript. Clique em main.js para selecioná-lo e adicione o seguinte.Select main.js to select it, and then add the following.

// Your code here!

window.onload = function () {
    document.getElementById("button").onclick = function (evt) {
        sayHello()
    }
}


function sayHello() {
    var messageDialog = new Windows.UI.Popups.MessageDialog("Hello, world!", "Alert");
    messageDialog.showAsync();
}

Ele deve ser assim.It should look like this.

O JavaScript do projeto

Esse JavaScript declara duas funções.This JavaScript declares two functions. A função window.onload é chamada automaticamente quando index.html é exibido.The window.onload function is called automatically when index.html is displayed. Ela localiza o botão (usando a ID que declaramos) e adiciona um manipulador onclick: o método que será chamado quando o botão é clicado.It finds the button (using the ID we declared) and adds an onclick handler: the method that will be called when the button is clicked.

A segunda função, sayHello() , cria e exibe uma caixa de diálogo.The second function, sayHello(), creates and displays a dialog. Isso é muito parecido com a função Alert() que você talvez conheça do desenvolvimento de JavaScript anterior.This is very similar to the Alert() function you may know from previous JavaScript development.

Etapa 4: Executar o aplicativo.Step 4: Run the app!

Agora, você pode executar o aplicativo pressionando F5.Now you can run the app by pressing F5. O aplicativo será carregado e a página da Web será exibida.The app will load, the web page will be displayed. Clique no botão e a caixa de diálogo da mensagem será exibida.Select the button, and the message dialog will pop-up.

Executando o projeto

ResumoSummary

Parabéns, você criou um aplicativo JavaScript para o Windows 10 e a UWP!Congratulations, you've created a JavaScript app for Windows 10 and the UWP! Este é um exemplo incrivelmente simples, porém agora você pode começar a adicionar suas bibliotecas e estruturas JavaScript favoritas para criar seu próprio aplicativo.This is a ridiculously simple example, however, you can now start adding your favorite JavaScript libraries and frameworks to create your own app. E como é um aplicativo UWP, você poderá publicá-lo na Store.And as it's a UWP app, you can publish it to the Store. Para um exemplo de como estruturas de terceiros podem ser adicionadas, consulte estes projetos:For example of how third party frameworks can be added, see these projects: