forked from apache/cordova-docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (202 loc) · 9.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
---
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 -->