cstech
December 21, 2017, 10:42am
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
Hi cstech
You can use Phonegap, for compiling app, in this case it would be an hybrid application, not native.
Regards
cstech
December 21, 2017, 10:52am
3
Hi DanielRiera
Thank you for your reply
Please can you help to understand how I do to use Phonegap for compiling Framework7 app
Hey
This is official page https://phonegap.com/
Read doc about install and configuration
https://phonegap.com/getstarted/
Regards
cstech
December 21, 2017, 11:02am
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)
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
cstech
December 21, 2017, 2:06pm
7
Hi DanielRiera,
You mean copy JS and CSS from localhost/f7/dist to …/miFolder/www/css and js
cstech
December 21, 2017, 2:38pm
9
Hi @DanielRiera Thank you very much for your appreciated help.
Please ca you detail for me those two steps below
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
cstech
December 21, 2017, 5:54pm
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
Hi @cstech
You need move to phonegap proyect directory. Where have your phonegap proyect?, the proyect when created with phonegap create ... ... ...
cstech
December 21, 2017, 6:29pm
15
I followed this to creat a new project and the project is created in …/users/username
Perfect
You move to phonegap proyect directory, so cd …/users/username/miFolder and type phonegap serve
cstech
December 21, 2017, 6:46pm
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]
Now put this IP on browser or Download phonegap developer app (Android and iOS)
Regards
cstech
December 21, 2017, 8:10pm
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
cstech
December 22, 2017, 3:36pm
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