Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Port mobile docs #3038

Merged
merged 5 commits into from
Jan 20, 2019
Merged

Port mobile docs #3038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
40b9829
Merge pull request #1 from quasarframework/dev
mesqueeb Jan 20, 2019
22b26c5
Port of original docs from Mobile development
mesqueeb Jan 20, 2019
518e651
Update build-commands.md
rstoenescu Jan 20, 2019
20e1355
Update configuring-cordova.md
rstoenescu Jan 20, 2019
3b5655f
Update publishing-to-store.md
rstoenescu Jan 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 33 additions & 67 deletions docs/src/pages/quasar-cli/developing-mobile-apps/build-commands.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,49 @@
---
title: Docs
title: Mobile App Build Commands
---
[Quasar CLI](/quasar-cli/installation) makes it incredibly simple to develop or build the final distributables from your source code.

[Internal Link](/docs), [External Link](https://vuejs.org)
Before we dive in, make sure you got the Cordova CLI installed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`

## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

```
const m = 'lala'
```

```html
<div>
<q-btn @click="doSomething">Do something</q-btn>
<q-icon name="alarm" />
</div>
```bash
$ yarn global add cordova
# or:
$ npm install -g cordova
```

```vue
<template>
<!-- you define your Vue template here -->
</template>
## Developing
```bash
$ quasar dev -m cordova -T [ios|android]

<script>
// This is where your Javascript goes
// to define your Vue component, which
// can be a Layout, a Page or your own
// component used throughout the app.
# ..or the longer form:
$ quasar dev --mode cordova -T [ios|android]

export default {
//
}
</script>

<style>
/* This is where your CSS goes */
</style>
# using a specific emulator (--emulator, -e)
$ quasar dev -m cordova -T ios -e iPhone-7
```

| Table Example | Type | Description |
| --- | --- | --- |
| infinite | Boolean | Infinite slides scrolling |
| size | String | Thickness of loading bar. |

> Something...

::: tip
Some tip
:::
In order for you to be able to develop on a device emulator or directly on a phone (with Hot Module Reload included), Quasar CLI follows these steps:
1. Detects your machine's external IP address. If there are multiple such IPs detected, then it asks you to choose one. If you'll be using a mobile phone to develop then choose the IP address of your machine that's pingable from the phone/tablet.
2. It starts up a development server on your machine.
3. It temporarily changes the `<content/>` tag in `/src-cordova/config.xml` to point to the IP previously detected. This allows the app to connect to the development server.
3. It defers to Cordova CLI to build a native app with the temporarily changed config.xml.
4. Cordova CLI checks if a mobile phone / tablet is connected to your development machine. If it is, it installs the development app on it. If none is found, then it boots up an emulator and runs the development app.
5. Finally, it reverts the temporary changes made to `/src-cordova/config.xml`.

::: warning
Some tip
:::
> **IMPORTANT**
> If developing on a mobile phone/tablet, it is very important that the external IP address of your build machine is accessible from the phone/tablet, otherwise you'll get a development app with white screen only. Also check your machine's firewall to allow connections to the development chosen port.

::: danger
Some tip
:::
## Building for Production
```bash
$ quasar build -m cordova -T [ios|android]

::: warning CUSTOM TITLE
Some tip
:::
# ..or the longer form:
$ quasar build --mode cordova -T [ios|android]

* Something
* something
* else
* Back
* wee

## Installation
<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
# this skips .app or .apk creation and just fills in /src-cordova/www
$ quasar build -m cordova -T [ios|android] --skip-pkg
```

## Usage
<doc-example title="Standard" file="QBtn/Standard" />
These commands parse and build your `/src` folder then overwrite `/src-cordova/www` then, unless `--skip-pkg` was specified, defer to Cordova CLI to trigger the actual native app creation.

## API
<doc-api file="QTh" />
You may ask yourself. So where's the .apk or .app? Watch the terminal console to see where Cordova puts it.
93 changes: 22 additions & 71 deletions docs/src/pages/quasar-cli/developing-mobile-apps/configuring-cordova.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,34 @@
---
title: Docs
title: Configuring Cordova
---

[Internal Link](/docs), [External Link](https://vuejs.org)
We'll be using Quasar CLI (and Cordova CLI) to develop and build a Mobile App. The difference between building a SPA, PWA, Electron App or a Mobile App is simply determined by the "mode" parameter in "quasar dev" and "quasar build" commands.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
There are two configuration files of great importance to your mobile apps. We'll go over each one.

## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
## Config.xml
The most important config file for your mobile app is `/src-cordova/config.xml`. Like mentioned above, `/src-cordova` is a Cordova project folder, so please refer to [Cordova documentation](https://cordova.apache.org/docs/en/latest/) in order to understand what each file from there does. But for now, have a few moments to read about [config.xml](https://cordova.apache.org/docs/en/latest/config_ref/).

```
const m = 'lala'
```
Some properties from this file will get overwritten as we'll see in next section.

```html
<div>
<q-btn @click="doSomething">Do something</q-btn>
<q-icon name="alarm" />
</div>
```
## Quasar.conf.js
Quasar CLI helps you in setting some properties of the mobile Apps automatically (from config.xml): the Cordova "id", app version, description and android-versionCode. This is for convenience so you'll be able to have a single point where, for example, you change the version of your app, not multiple files that you need to simultaneously touch which is error prone.

```vue
<template>
<!-- you define your Vue template here -->
</template>
For determining the values for each of the properties mentioned above, Quasar CLI:
1. Look in `/quasar.conf.js` for a "cordova" Object. Does it have "id", "version", "description" and/or "androidVersionCode"? If yes, it will use them.
2. If not, then it looks into your `/package.json` for "cordovaId", "version" and "description" fields.

<script>
// This is where your Javascript goes
// to define your Vue component, which
// can be a Layout, a Page or your own
// component used throughout the app.
Other options you can configure:

export default {
//
```js
return {
framework: {
config: {
cordova: {
iosStatusBarPadding: true/false, // add the dynamic top padding on iOS mobile devices
backButtonExit: true/false // Quasar handles app exit on mobile phone back button
}
}
}
}
</script>

<style>
/* This is where your CSS goes */
</style>
```

| Table Example | Type | Description |
| --- | --- | --- |
| infinite | Boolean | Infinite slides scrolling |
| size | String | Thickness of loading bar. |

> Something...

::: tip
Some tip
:::

::: warning
Some tip
:::

::: danger
Some tip
:::

::: warning CUSTOM TITLE
Some tip
:::

* Something
* something
* else
* Back
* wee

## Installation
<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />

## Usage
<doc-example title="Standard" file="QBtn/Standard" />

## API
<doc-api file="QTh" />
Loading