Mobile app tutorial

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

Certificates and PlayStore:

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

1 Like

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).



https://community.wappler.io/c/mobile-apps/22
1 Like

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.

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

1 Like

Thank you Dave, I feel much better now :slightly_smiling_face:. 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 :slightly_smiling_face:) 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

1 Like

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.

1 Like

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?

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!

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

1 Like