Mobile app tutorial

[tomcat]

Hello,

I have searched the community but couldn’t find the tutorial and hence my question. Apologies, if I had missed out possible answers.

I am trying to create a mobile app in Wappler and looking for any tutorials which could help. I know a little about Framework7 but that is rather rudimentary.

Is there any tutorials to walk you through creating and publishing a mobile to allow me walk the end to end process?

Thank you

[Dave]

Android Mobile Application Part I - Setting up Android Studio

Part II will cover setting up the Mobile App itself, which is very simple. We’ll be using the Blank Cordova template found within the New Project area for Mobile, not Kitchen Sink (although the principle is the same in this tutorial we will integrate Bootstrap 4). Will put this together while on the train to Lisbon tomorrow, and upload it later in the afternoon…

Android Mobile Application Part II - Setting up Projects

Please see Part I for the introduction and how to set up Android Studio: Short and sweet, here is Part II Create the Web Project: Create the Web Project as normal. Don’t worry about Frameworks! Add any Server Connect Actions as normal. Save. Create the Mobile App Project: Create a New Mobile Project. New Project - Mobile - Blank Template. Provide all the details. The style file is located within the css directory inside the www directory. Open Projec…

Certificates and PlayStore:

Does Wappler publish to the app stores?

Hi all, Amazingly, I can’t find a single discussion about this in the forum, nor anything in the docs, except for this line: “Wappler allows you to build and publish amazing mobile apps directly to the Apple App Store and Google Play Store with a single click. So simple and yet, so powerful!” which is here: https://docs.wappler.io/t/mobile-apps/2839 So - does Wappler include the submissions? Or just the creation of the binaries? Regards, Andy

[tomcat]

Thank you Dave. This is very helpful. I will put them in practice one by one and hopefully can get through without much issues.

Tomcat

[kfawcett]

Hi Tomcat,

Weclome to Wappler! Just a comment about Framework7 and mobile apps. I found it challenging to design a nice looking UI, so I'm using Bootstrap instead. If you run into the same challenges and have more experience with Bootstrap you can use it in Wappler for your mobile apps.

There is also a lot of resources in different areas of Wappler's site (here on forum and in documentation).

Creating Desktop Apps

You can build standalone Desktop Apps with Wappler, thanks to the Electron integration. Building Desktop Apps is as easy as building a website in Wappler. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application. Setup Desktop App Project The first thing we need to do is to create a Desktop App Project in Wappler. Click the Projects icon: [Screenshot_1] Ope…

https://docs.wappler.io/t/mobile-apps/2839

Mobile Apps

[Dave]

Further to @kfawcett the below application is 99% Bootstrap with the clients colors in a separate style sheet so they can maintain the branding etc.

Android Mobile App built with Wappler Demo

Quick demo of an Android App built with Wappler. Featuring edits, updates, datatables, charts, repeats, login, etc. When I get a bit more time will do some proper videos but hopefully for now this eases the minds of those doubting Wapplers ability to create Mobile Apps… [Android App built with Wappler] Sorry its short but this is only a single side to this application, and as mentioned, a simple demonstration is all.

[tomcat]

Thank you Kfawcett. I was wondering about that. I havent used Bootstrap for mobile but know about some of the challenges in Framewokr7 which I faced before. I have a couple of questions that would help me greatly and I hope you can help.

1. Can a bootstrapped mobile app be compiled into native code?
2. Can you access mobile phone’s native functionality like camera, GPS, messaging, Wifi, etc.?
3. Can I do drag-n-drop ?

Tomcat

[tomcat]

Thank you Dave, I feel much better now . I need to make a skeleton app allowing a user to login to a service and get a list of activities that are set for him and confirm (by pressing a confirm button ) that they are doing it. In principle its a simple app, but in practice need to access a server and a database (both read and write). Any pointers to tutorials which help us to do this would be great and much appreciated.

Tomcat

[kfawcett]

@tomcat

1. Can a bootstrapped mobile app be compiled into native code?
2. Can you access mobile phone’s native functionality like camera, GPS, messaging, Wifi, etc.?
3. Can I do drag-n-drop ?

Tomcat

It isn't technically compiled into native code, but you can build your app using Bootstrap and then have it turned into Android, iOS, and Electron apps.

Wappler uses Cordova which wraps the app in a native container and provides access to the native functions like camera and GPS.

Drag-n-drop is possible using JS libraries like draggable. I'm not sure if there is any built-in funtionality in Wappler to help with it though. You'll most likely need to code it in your app. Fortunately Wappler allows you to easily do this.

[Dave]

Our work-flow is generally as follows as all components make the package:

1. Create blank HTML Project. Add your Frameworks etc.
2. Set-up what will be the API as a second Wappler Project. Can use PHP or Node as its the back end (Android will not natively pass PHP but on the back-end is fine).
3. Clone the website Project (we run a cron job on the directories to sync them, could use GIT).
4. Clone is for mobile. So we add Android as the Platform, update Cordova if prompted (and dependencies like Gradle etc).

Both Projects share the same synced assets and new pages (if they don’t exist).

Could also have a second clone and add Electron and do the same, and the same for any other Platform you pick.

Keeps things simple for us and maintains a lot of style uniformity among all the Projects. Easy to maintain. Both the Android and HTML projects then use the API Project for data etc. You can use anything you like from Wapplers vast library of features. We have not found one that doesn’t play well. As for the other features specific to Android there are many plugins available. Just remember to backup a lot as now and again things can go a little Pete-Tong (UK slang for wrong)…

Hope that helps a little?

[Dave]

Side Note:
For security side (as its HTML you can not apply the Enforcer to the page) you can apply the Security Provider to your Actions (in your Server Connect Actions) which will protect the pages by re-directing non permitted users. That is the only idiosyncrasy with using HTML for your data pages (would be great to have an alternative Enforcer option for non PHP but for now restricting the Server Connect Actions works just fine), obviously you could use other options for security via any API you have access to. All work well in the Android Project!

[kfawcett]

@Dave

again things can go a little Pete-Tong

Ha! Still one of my favorite DJs and the movie was a good laugh as well.