{"id":7727,"date":"2021-11-24T00:00:44","date_gmt":"2021-11-24T00:00:44","guid":{"rendered":"https:\/\/max-drake.cc\/?p=7727"},"modified":"2021-11-24T19:23:02","modified_gmt":"2021-11-24T19:23:02","slug":"appgyver-2nd-look-exporting-web-app-to-server-app-to-android-phone","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=7727","title":{"rendered":"AppGyver 2nd look- Exporting Web app to server &#038; app to android phone"},"content":{"rendered":"\n<p>I had a quick test yesterday with AppGyver to try getting the web app built. I used the basic default app and went to Launch&gt;Distribute tab&gt; Configure and then ran the build. It came up with Status created but that just means that its processing it. <\/p>\n\n\n\n<p>Later I got an email saying that the web-app had been created and there was a download button that would allow you to download a zipped file of the webapp so you could load it onto a server.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"254\" height=\"367\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-07_25_43-AppGyver-Composer-Pro-\u2014-Mozilla-Firefox.jpg\" alt=\"\" class=\"wp-image-7729 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-07_25_43-AppGyver-Composer-Pro-\u2014-Mozilla-Firefox.jpg 254w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-07_25_43-AppGyver-Composer-Pro-\u2014-Mozilla-Firefox-208x300.jpg 208w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-07_25_43-AppGyver-Composer-Pro-\u2014-Mozilla-Firefox-50x72.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-07_25_43-AppGyver-Composer-Pro-\u2014-Mozilla-Firefox-35x50.jpg 35w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-07_25_43-AppGyver-Composer-Pro-\u2014-Mozilla-Firefox-100x144.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-07_25_43-AppGyver-Composer-Pro-\u2014-Mozilla-Firefox-69x100.jpg 69w\" data-sizes=\"(max-width: 254px) 100vw, 254px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 254px; --smush-placeholder-aspect-ratio: 254\/367;\" \/><\/figure>\n\n\n\n<p>I first displayed the webapp in my browser on my PC and of course the proportions were all wrong so I sent it to my phone and results as below image<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"461\" height=\"1024\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-461x1024.jpg\" alt=\"\" class=\"wp-image-7728 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-461x1024.jpg 461w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-135x300.jpg 135w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-768x1707.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-691x1536.jpg 691w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-922x2048.jpg 922w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-50x111.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-23x50.jpg 23w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-100x222.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-45x100.jpg 45w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-288x640.jpg 288w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-640x1422.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-346x768.jpg 346w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-1024x2276.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-486x1080.jpg 486w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-05-58-14-08_3aea4af51f236e4932235fdada7d1643-scaled.jpg 720w\" data-sizes=\"(max-width: 461px) 100vw, 461px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 461px; --smush-placeholder-aspect-ratio: 461\/1024;\" \/><\/figure>\n\n\n\n<p>I also downloaded and unzipped the file onto my PC. It has an index.html file and on clicking on that it opened the webapp in my browser. It has nodered.js.min (minified nodered.Javascript to do all the JS events for the page, so that is what is driving the back end. <\/p>\n\n\n\n<h3 class=\"has-light-green-cyan-background-color has-background wp-block-heading\">WebApp Uploading to Server<\/h3>\n\n\n\n<p>I took the downloaded web app and moved the file onto my server. For one of my websites which is active I loaded the files into a sub-directory and was able to open it in a browser, so that it becomes an accessible webapp. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"934\" height=\"602\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox.jpg\" alt=\"\" class=\"wp-image-7732 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox.jpg 934w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox-300x193.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox-768x495.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox-50x32.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox-78x50.jpg 78w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox-100x64.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox-155x100.jpg 155w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_30_14-AppGyver-\u2014-Mozilla-Firefox-640x413.jpg 640w\" data-sizes=\"(max-width: 934px) 100vw, 934px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 934px; --smush-placeholder-aspect-ratio: 934\/602;\" \/><\/figure>\n\n\n\n<h3 class=\"has-light-green-cyan-background-color has-background wp-block-heading\">Create an APK<\/h3>\n\n\n\n<p>So my next exercise will be to create a keystore file and see if I can create and install an android app. I&#8217;ll start with a simple blank as before as the test is in the process, not the actual app itself at this point. <\/p>\n\n\n\n<p>After adding the java SDK path to the keytool.exe file into system variable <strong>path <\/strong>I should be in a position to be able to create an APK file. <\/p>\n\n\n\n<p>I followed the beginning of the video :<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AppGyver: Building the App for Android &amp; Distributing it in Google Play\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/YL56TeHEyr4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>and used :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>keytool -genkey -v -keystore testmax.keystore -alias testmax -keyalg RSA -keysize 2048 -validity 1000<\/code><\/pre>\n\n\n\n<p>and added password that needs to be 6 digits long minimum. <\/p>\n\n\n\n<p>Anyway, following the steps of the video it all went fine and I did a build on the app and got an email about 1\/2 hour later to say I can download the zip file. <\/p>\n\n\n\n<p>This I did &amp; then after unzipping the file there was a file application.apk. I renamed it testmax.apk <\/p>\n\n\n\n<p>I then tried to copy to mobile phone from computer with USB\/micro USB with USB C attachment but the phone did not register the device, so I had to use MicoSD car to copy files across. Uploading the .apk file it opened , with warnings, the app on the mobile phone. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"461\" height=\"1024\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-461x1024.jpg\" alt=\"\" class=\"wp-image-7731 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-461x1024.jpg 461w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-135x300.jpg 135w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-768x1707.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-691x1536.jpg 691w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-922x2048.jpg 922w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-50x111.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-23x50.jpg 23w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-100x222.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-45x100.jpg 45w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-288x640.jpg 288w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-640x1422.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-346x768.jpg 346w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-1024x2276.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-486x1080.jpg 486w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/Screenshot_2021-11-24-12-37-59-28_076b369921f83545a51a4a23154b74a2-scaled.jpg 720w\" data-sizes=\"(max-width: 461px) 100vw, 461px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 461px; --smush-placeholder-aspect-ratio: 461\/1024;\" \/><\/figure>\n\n\n\n<p>There was also a file called Bundle.aab and that is a special file for loading app to Google Play, so that they download less onto peoples phones. So it generates that file too. Not equired if you are doing a direct load to your phone <\/p>\n\n\n\n<h2 class=\"has-light-green-cyan-background-color has-background wp-block-heading\">App builds<\/h2>\n\n\n\n<p>Seeing what is created in the web-app build I&#8217;ve an appreciation of what is actually happening. There is the app developed in Composer pro , then it is put through 3 different automations to create either Android, iOS or Web App. All the processes are different and are external formats based on the different OS&#8217;s, so that build process will need to be updated each time a new OS is updated. <\/p>\n\n\n\n<p>So whereas Glideapps is all just web apps, this is building for 3 different install methods. So the tools need to be more robust and the features need to be viable in all 3 environments. <\/p>\n\n\n\n<p>This means the resultant app can be distributed in a variety of ways, to suit specific flavours. <\/p>\n\n\n\n<p>Also all of them have better distribution systems such that you can come away with a separate app that you can share in multiple ways, either via a URL from your server for the web app or a downloadable APK file for android and a whatever for apple. <\/p>\n\n\n\n<p>So the end result is a free standalone tool, which is great. The reliability and lack of information on first using it is a concern. <\/p>\n\n\n\n<h2 class=\"has-light-green-cyan-background-color has-background wp-block-heading\">App information and layout<\/h2>\n\n\n\n<p>I watched a couple of videos this morning about AppGyver, one was about a pizza app and the setting up of the layout just looked painful and tedious. Still, I suppose there is no way around that. Lots of fiddling though. <\/p>\n\n\n\n<p>The 2nd thing I noted that containers seemed to be the way to divide up your screen into items like Navigation (linking pages and menu&#8217;s etc), Logo area, content and buttons. Also that there were scrolling containers, these allow you to add lists to have multiple items. <\/p>\n\n\n\n<p>When I was watching the pizza app development I started to wonder about where the data was kept and how you accessed that, that is an area I want to explore a bit more to see if I can store data in a sub-directory somewhere but I did note that you can use a firebase database to store info too, as well as hooking into an API<\/p>\n\n\n\n<h4 class=\"has-light-green-cyan-background-color has-background wp-block-heading\">Sensor information<\/h4>\n\n\n\n<p>I was unimpressed by the permissions when creating an android app in the build in that it seemed to only have access to things like camera and fine location and mic but not to sensors. I stand corrected as you can access these on your app, I found some documentation <strong><a href=\"https:\/\/docs.appgyver.com\/reference\/sensor-variables\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"has-light-green-cyan-background-color has-background wp-block-heading\">End comment<\/h2>\n\n\n\n<p>SAP only bought out AppGyver this year in feb , see <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/news.sap.com\/2021\/02\/sap-acquire-appgyver\/\" target=\"_blank\">article<\/a><\/strong>. Also AppGyver from Helsinki, Finland. So maybe when I was trying to run it was in middle of night over there and everyone was to bed and asnoozing. So they only found out issues when they came in in the morning. <\/p>\n\n\n\n<p>Today I was able to:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>generate builds for the basic default template and configure and build a web-app that I could download. <\/li><li>Move the files to my VPS and install them on an active domain and access that app from the browser.<\/li><li>Configure and create keystore file and configure and build an android app that AppGyver was able to generate a zip file that was downloadable. <\/li><li>The zip unloaded had an application.apk (that I renamed) and I transferred that to my phone and was able to open the app. <\/li><\/ol>\n\n\n\n<p>So the program allows me to create, build and serve apps either as a webapp or as an android app.  <\/p>\n\n\n\n<p>I suppose I could go further and pay $25US and get a developer account and upload it to Google Play, but for the time being I&#8217;m happy being able to create a web app and an android app. <\/p>\n\n\n\n<p>Its worth taking the next step and start using the program for its features. <\/p>\n\n\n\n<p>So the decision now is what do I want to build? I think I&#8217;ll have to look at configuration to see about displays for phone or web pages for apps.<\/p>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I had a quick test yesterday with AppGyver to try getting the web app built. I used the basic default app and went to Launch&gt;Distribute tab&gt; Configure and then ran the build. It came up with Status created but that just means that its processing it. Later I got an email saying that the web-app [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7733,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[204,417,29,468],"tags":[],"class_list":["post-7727","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automation","category-mobile","category-web","category-webapps"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_58_07-Edit-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-600x400.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/11\/2021-11-24-12_58_07-Edit-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-600x600.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/7727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7727"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/7727\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/7733"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}