123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- ---
- layout: cordova
- permalink: /
- priority: 1.0
- change_frequency: monthly
- ---
- <!-- Main jumbotron for a primary marketing message or call to action -->
- <div id="hero">
- <div class="container vertical-center-parent">
- <div id="hero_section" class="row vertical-center-child">
- <div class="col-xs-12 col-sm-5 cordova-bot">
- <img src="{{ site.baseurl }}/static/img/cordova_bot.png" />
- </div>
- <div class="col-xs-12 col-sm-7 hero_content">
- <img class="hero_logo hidden-xs" src="{{ site.baseurl }}/static/img/cordova-logo-newbrand-textonly.svg" />
- <!-- <img class="hero_logo visible-xs" src="{{ site.baseurl }}/static/img/logo_full_2.svg" /> -->
- <p>Mobile apps with <em>HTML</em>, <em>CSS</em> & <em>JS</em></p>
- <p>Target multiple platforms with <em>one code base</em></p>
- <p>Free and <em>open source</em></p>
- <div class="hero_supported_platforms">
- <img src="{{ site.baseurl }}/static/img/platform-logos.svg" width="140px" />
- </div>
- <div class="hero_buttons">
- <a href="#getstarted" class="col-xs-12 col-sm-5 btn btn-lg btn-primary">
- Get Started
- </a>
- <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/" class="col-xs-12 col-sm-6 btn btn-lg btn-primary">
- Documentation
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="hero_bottom_strip">
- <div class="container">
- <div class="row">
- <div class="col-xs-4">
- <div class="row">
- <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_shared_code"></div></div>
- <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Reusable code across platforms</p></div></div>
- </div>
- </div>
- <div class="col-xs-4">
- <div class="row">
- <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_offline"></div></div>
- <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Support for offline scenarios</p></div></div>
- </div>
- </div>
- <div class="col-xs-4">
- <div class="row">
- <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_apis"></div></div>
- <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Access native device APIs</p></div></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="blue-divider"></div>
- <div class="container get-started-section">
- <!-- Example row of columns -->
- <div class="row">
- <div class="col-md-12 text-center">
- <a id="getstarted" name="getstarted" class="fragment-anchor"></a>
- <h1>Get Started Fast</h1>
- </div>
- </div>
- <!-- GETTING STARTED -->
- <div class="row">
- <div class="col-md-1 col-xs-2">
- <div class="number_circle">1</div>
- </div>
- <div class="col-md-7 col-xs-10">
- <h2>Installing Cordova</h2>
- <p>Cordova command-line runs on <a target="_blank" href="http://nodejs.org/">Node.js</a> and is available on
- <a target="_blank" href="https://npmjs.org/package/cordova">NPM</a>.
- Follow <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/index.html#develop-for-platforms">platform specific guides</a>
- to install additional platform dependencies. Open a command prompt or Terminal, and type <code>npm install -g cordova</code>.</p>
- </div>
- <div class="col-md-4 col-xs-12">
- <div class="well_code">
- <div>
- <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-npm-install-text">Copy</button>
- </div>
- $ npm install -g cordova
- <div id="copy-npm-install-text" class="copy-text">npm install -g cordova</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-1 col-xs-2">
- <div class="number_circle">2</div>
- </div>
- <div class="col-md-7 col-xs-10">
- <h2>Create a project</h2>
- <p>Create a blank Cordova project using the command-line tool. Navigate to the directory where you wish to create your project and type <code>cordova create <path></code>.</p>
- <p>For a complete set of options, type <code>cordova help create</code>.</p>
- </div>
- <div class="col-md-4 col-xs-12">
- <div class="well_code">
- <div>
- <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-create-text">Copy</button>
- </div>
- $ cordova create MyApp
- <div id="copy-cordova-create-text" class="copy-text">cordova create MyApp</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-1 col-xs-2">
- <div class="number_circle">3</div>
- </div>
- <div class="col-md-7 col-xs-10">
- <h2>Add a platform</h2>
- <p>After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app.</p>
- <p>To add a platform, type <code>cordova platform add <platform name></code>.</p>
- <p>For a complete list of platforms you can add, run <code>cordova platform</code>.</p>
- </div>
- <div class="col-md-4 col-xs-12">
- <div class="well_code">
- <div>
- <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-platform-add-text">Copy</button>
- </div>
- <p>$ cd MyApp</p>
- <p>$ cordova platform add browser</p>
- <div id="copy-cordova-platform-add-text" class="copy-text">cd MyApp cordova platform add browser</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-1 col-xs-2">
- <div class="number_circle">4</div>
- </div>
- <div class="col-md-7 col-xs-10">
- <h2>Run your app</h2>
- <p>From the command line, run <code>cordova run <platform name></code>.</p>
- </div>
- <div class="col-md-4 col-xs-12">
- <div class="well_code">
- <div>
- <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-run-text">Copy</button>
- </div>
- $ cordova run browser
- <div id="copy-cordova-run-text" class="copy-text">cordova run browser</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-1 col-xs-2">
- <div class="number_circle">5</div>
- </div>
- <div class="col-md-7 col-xs-10">
- <h2>Common next steps</h2>
- <ul class="nav">
- <li>
- <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/overview/">Read the docs</a>
- </li>
- <li>
- <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/cli/#add-plugins">Add a Plugin</a>
- </li>
- <li>
- <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/images.html">Customize app icons</a>
- </li>
- <li>
- <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/">Configure Your App</a>
- </li>
- </ul>
- </div>
- <div class="col-md-4 col-xs-12">
- </div>
- </div>
- </div>
- <!-- /container -->
- <div class="blue-divider"></div>
- <div class="container-fluid dark vertical-aligned-columns">
- <div class="container">
- <div class="row showcase_section_intro" id="supported_platforms_section">
- <div class="col-md-12 text-center">
- <h1>Supported Platforms</h1>
- <h2>See a list of
- <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/support/index.html">features supported</a> in each platform</h2>
- <p>
- Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms.
- These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every
- phone or tablet on the market today and publish to their app stores.
- </p>
- </div>
- </div>
- </div><!-- /container -->
- <div class="container-fluid supported_platforms vertical-aligned-columns">
- <div class="container">
- <div class="row">
- <div class="col-md-12">
- <ul class="platform_logos">
- <li><img src="{{ site.baseurl }}/static/img/3rdparty_logo_sprite.svg"/></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- {% include tools_and_showcase.html %}
- </div><!-- /container-fluid -->
|