Please detailed doc

Tutorials
1

Hello everyone,
I installed Framework7 on xampp local server it run good for building app web (responsive website)

My issue I can’t understand how to to transform the app web under folder dist to a native app for Android and iOS for publishing into PlayStore

Thank you in adavance

2

Hi cstech

You can use Phonegap, for compiling app, in this case it would be an hybrid application, not native.

Regards

3

Hi DanielRiera
Thank you for your reply

Please can you help to understand how I do to use Phonegap for compiling Framework7 app

4

Hey

This is official page https://phonegap.com/

Read doc about install and configuration

https://phonegap.com/getstarted/

Regards

5

I followed many tutos unfortunatelly can’t understand! even I’am good with HTML5 CSS and Javascript

I can’t undertand the utility of Phonegap with Framework7 and how to use the both software to achieve one object (Hybrid App)

6

Hi again

Step to step.

First install Node.js

Later, install Phonegap from terminal npm -g install phonegap.

When phonegap is installed, run this command from terminal. (you may have to restart the terminal)

phonegap create miFolder com.myapp.phonegap MiApp

Now look you folder, you will see a folder with name “miFolder” contain phonegap proyect.

When you have this proyect, move to js and css folder and paste the files from dist (js/css) folder.

Add sources to index.html for all files. <link …> and <script …>

Use F7 doc for build initial html

When you added all, execute from terminal phonegap serve

In terminal you should see a IP, open browser and type this IP.

If you need help, i´m here.

Regards

7

Hi DanielRiera,

You mean copy JS and CSS from localhost/f7/dist to …/miFolder/www/css and js

8

Hi @cstech

Yes

Regards

9

Hi @DanielRiera Thank you very much for your appreciated help.

Please ca you detail for me those two steps below

10

Hi

What version F7 use you?

11

Hi

F7 v 2.0.2

Regards

12

Hi @cstech

Use it in your index.html
Change urls from framework7.js and framework7.ios.min.css (or use md version).

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <link rel="stylesheet" type="text/css" href="css/framework7.ios.min.css" /> <!--ADD F7 IOS CSS-->
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>
    <div id="app">
        <div class="statusbar"></div>
        <div class="panel panel-left panel-cover">
            <div class="page">
                <div class="page-content">
                </div>
            </div>
        </div>
        <div class="view view-main view-init ios-edges" data-url="/">
            <div class="page page-index">
                <div class="navbar">
                    <div class="navbar-inner sliding">
                        <div class="left panel-open" data-panel="left">Menu</div>
                        <div class="title">My App</div>
                    </div>
                </div>
                <div class="page-content">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/framework7.js"></script> <!--ADD F7 LIBRARY-->
    <script type="text/javascript" src="js/router.js"></script>  <!--ADD F7 ROUTER-->
    <script type="text/javascript" src="js/index.js"></script>  <!--ADD CUSTOM JS (my-app.js)-->
    <script type="text/javascript">
    app.initialize();
    </script>
</body>

</html>

Regards

1 Like
13

Hi @DanielRiera

I updated the index.html file located in …/miFolder/www

I close and reopen Terminal (Git for windows) and typed phonegap serve I get [error] project directory could not be found

Regards

14

Hi @cstech

You need move to phonegap proyect directory. Where have your phonegap proyect?, the proyect when created with phonegap create ... ... ...

15

I followed this to creat a new project and the project is created in …/users/username

16

Perfect

You move to phonegap proyect directory, so cd …/users/username/miFolder and type phonegap serve

17

Yes now it display
[phonegap] starting app server…
[phonegap] listening on xxx.xxx.xx.xxx:3000
[phonegap] listening on xxx.xxx.x.x:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]

18

Now put this IP on browser or Download phonegap developer app (Android and iOS)

Regards

19

I typed the IP’s in browser, the page say want to store content or some things like in your device I answered OK! I get a blank page with some shadow color.

Do I need to download phonegrap developer app (Android and iOS) or the browser can do the same work

Regards

20

Hi @DanielRiera, hope you’re well. Thanks for your appreciated help.

Please last question
At the end which folder and files I shoud to upload to Play Store and App Store?

Thank you in advance