phonegap.github.io/getstarted.html at master · Jaylee89/phonegap.github.io · GitHub

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
---
layout: default
title: Get Started
permalink: /getstarted/
---
<div class="subheader">
  <div class="bounds">
    <h1>Get Started</h1>
    <div class="subheader__description">Follow these steps to install PhoneGap and get an app running on your mobile device in minutes.</div>
  </div>
</div>
<div class="bounds">
  <ol class="gs-steps">
    <li class="gs-step">
      <div class="gs-step__content">
        <h2 class="gs-step__title">Install our desktop app</h2>
        <div class="gs-step__description">
          <p>Download and install our new PhoneGap Desktop app, which is currently in beta. If you want more detailed instructions on how to install and use the app, follow the <a href="#">full guide in our documentation</a>.</p>
        </div>
        <div class="gs-step__note">If you’d like to <a href="#">use the CLI to install PhoneGap</a>, check out our docs.</div>
      </div>
      <div class="download">
        <h3 class="download__version">Version 0.1.6 (Beta)</h3>
        <div class="download__label">Download for:</div>
        <ul>
          <li>
            <div class="download__platform"><a href="#">Mac</a></div>
            <div class="download__platform__version">OS X 10.9 or later</div>
          </li>
          <li>
            <div class="download__platform"><a href="#">Windows</a></div>
            <div class="download__platform__version">Windows 8.1</div>
          </li>
          <div class="download__image">{% include images/pg-desktop.svg %}</div>
      </div>
    </li>
    <li class="gs-step">
      <div class="gs-step__content">
        <h2 class="gs-step__title">Install our mobile app</h2>
        <div class="gs-step__description">
          <p>The PhoneGap Developer app is available for multiple platforms, and will get you running your PhoneGap project on your mobile device without code-signing or compiling.</p>
          <p>You will pair this mobile app to the desktop app in step 4 to preview your new app.</p>
        </div>
        <footer class="gs-step__note">Read our <a href="#">guide on installing the mobile app</a> for step-by-step instructions.</footer>
      </div>
      <div class="download">
        <div class="download__label">Download for:</div>
        <ul>
          <li>
            <div class="download__platform"><a href="#">iOS</a></div>
            <div class="download__platform__version">From the App Store</div>
          </li>
          <li>
            <div class="download__platform"><a href="#">Android</a></div>
            <div class="download__platform__version">From Google Play</div>
          </li>
          <li>
            <div class="download__platform"><a href="#">Windows Phone</a></div>
            <div class="download__platform__version">From The Windows Phone Store</div>
          </li>
          <div class="download__image">{% include images/pg-mobile.svg %}</div>
      </div>
    </li>
    <li class="gs-step">
      <div class="gs-step__content">
        <h2 class="gs-step__title">Create your new PhoneGap app</h2>
        <div class="gs-step__description">
          <p>To begin, open the PhoneGap Desktop app (that you installed in step 1), and create a new project.</p>
        </div>
        <div class="gs-step__note">For full details on <a href="#">using our desktop app</a>, go to our docs.</div>
      </div>
      <div class="gs-step__screenshots">
        <figure>
          <figcaption>PhoneGap Desktop: Add/create project menu</figcaption>
          <img class="menu-screenshot" src="/images/menu_screenshot.png" alt="Menu screenshot">
        </figure>
      </div>
    </li>
    <li class="gs-step">
      <div class="gs-step__content">
        <h2 class="gs-step__title">Run your new app on your device</h2>
        <div class="gs-step__description">
          <p>This is where things get real!</p>
          <p>You’ll need to connect the PhoneGap Developer app you installed in step 2 with the PhoneGap Desktop app you got running in step 3.</p>
          <p>The PhoneGap Desktop app starts a small web server to host your project and once connected to that web server, the PhoneGap Developer app runs your project on your mobile device. Cool, right?</p>
        </div>
        <div class="gs-step__note">The <a href="#">instructions to pair the Desktop and Developer apps</a> are in our docs.</div>
      </div>
      <div class="gs-step__screenshots">
        <figure>
          <figcaption>PhoneGap Desktop: Server running</figcaption>
          <img class="server-screenshot" src="/images/server_screenshot.png" alt="Server running screenshot">
        </figure>
        <figure>
          <figcaption>PhoneGap Developer App: Main screen</figcaption>
          <img class="pg-dev-screenshot" src="/images/pg-dev_screenshot.png" alt="PhoneGap Developer App main screen">
        </figure>
      </div>
    </li>
    <li class="gs-step">
      <div class="gs-step__content">
        <h2 class="gs-step__title">Write some code &amp; celebrate the world of possibilities!</h2>
        <div class="gs-step__description">
          <p>Edit some content or add an alert message to instantly preview your changes. You’ve got a functioning PhoneGap app at this point. If you’d like more help with moving beyond these steps, you’ll find some <a href="#">great articles in our docs</a>.</p>
          <p>Good luck!</p>
        </div>
      </div>
    </li>
  </ol>
</div>