Information For Best Mobile Project Strategy

Mobile Apps
#1

Hey Wapplers…

I want to start learning how to build a mobile app (Android and iOS) alongside my desktop one.

I understand that I will create a mobile app front end which accesses the APIs from my PHP/MySQL based desktop app. (I currently have around 250 often very complex Server Actions, so they won’t be changing any time soon.)

As new Wappler features are coming out fast, I’d like some direction as to the most up-to-date way forwards for the mobile app.

I’d appreciate views and be pointed to any documentation / videos about:

  1. Is Capacitor definitely the way to go?
  2. What are the pros and cons of Framework7 versus Bootstrap 5?
  3. How do I implement the client login for the mobile app so they aren’t entering their password each time they access it? Once entered, is the password stored somewhere on the mobile device?
  4. If I want to store data locally on the phone (when the app is used without an internet connection) and then have it sync with the desktop app’s MySQL database, how is that done? With SQL Lite? How is the sync operation implemented? Can it be done with my PHP server actions, or does it need node?
  5. I can’t get my head around how or if couch/pouchdb have any role in what I’m trying to do…

Thanks in anticipation!
Antony.

2 Likes
#2

Hey Antony,

  • Is Capacitor definitely the way to go?
    I have only quickly played with Capacitor and it looks like a more modern way to approach things, but I don’t have real world experience on this yet. That being said, you will likely still end up using cordova plugins, which can be done with capacitor as I understand it.

  • What are the pros and cons of Framework7 versus Bootstrap 5?
    I have done projects in both. I found that fw7 has a few more mobile specific components that are nice to have, but I would assume can also be replicated with external js libraries added to bootstrap. Bootstrap has what I believe is a huge advantage in your case – you can copy the code from your front end, and then modify. It also obviously would be a framework you already know. I go with bootstrap these days.

  • How do I implement the client login for the mobile app so they aren’t entering their password each time they access it? Once entered, is the password stored somewhere on the mobile device?
    This is no different than web. Your application is still in a browser view within the app, so just like web, the remember me option will generate a cookie that keeps the user logged in.

  • If I want to store data locally on the phone (when the app is used without an internet connection) and then have it sync with the desktop app’s MySQL database, how is that done? With SQL Lite? How is the sync operation implemented? Can it be done with my PHP server actions, or does it need node?
    See couch/pouch

  • I can’t get my head around how or if couch/pouchdb have any role in what I’m trying to do…
    A lot of us are anxiously waiting for this, which wappler hopefully will provide via couch/pouch soon.

6 Likes
#3

I am using Capacitor since version 1 for production development (with the Ionic Framework and to bundle Construct3 games) and can definitely recommend it. Cordova is still around, but gets more and more outdated. Most of the Cordova plugins are supported on Capacitor, too.

F7 is a mobile UI, bootstrap is a mobile friendly UI. That makes a difference. If it’s an App, make it feel and look like an App, that’s a user experience a user expects. You can use BS for apps, depends on your use case.

SQLite is a standard for local storage on mobiles.

4 Likes
#4

Generally speaking, this is the right approach, but I would use slighty different way on an app:

  • Once the user is logged in, create a “secret” (a UUID) on the server, store it on the user database (or create a new table with login dates to track logins) and store this secret on the users device in SQlite. Everytime the user opens the app, the secret (also called Token) is checked, if it’s still valid (or expired, it’s on you) and the continue or display the sign in screen.

Local Storage (and Cookies) are limited in space AND under risk beeing removed by the operating system if the whole system runs out of space or the app hasn’t been used for a while. SQlite is stored in the apps sandbox and not affected.

Question: why do you want that? There are use cases where the app needs to be able to work offline, but in most of the cases, this is not required. This time the mobiles are online 24/7 and coverage in general is good.

I’ve done a couple of apps who required local syncing, as they are used at locations where no network is available or very bad (think of large construction site / buildings), and this can be a difficult task, as you need to keep track of the synced items.

And then there are cases where the user hasn’t synced for a while (e.g. while travelling and disabled data) and then an app update happens while you still have unsynced items on the local device. Been there…

There are solutions for every problem, but you have think about them.

4 Likes
#5

This particular topic is exactly where I am right now.
It appears that I might as well concentrate on Native app development and crossing the Apple and Android store hurdles.

One thing that confuses me is getting the impression that Wappler Framework 7 is a modified version in order to work with Wappler Connect App functionality.
Looking at the official Framework 7 download and comparing it to the Wappler install there are key differences.

Framework 7 has a core, then vue, react, svelte only packages. Leading me to assume that Wappler’s “Framework 7” is a proprietary re-packaged custom implementation.

Which means Wappler has a locked-in package with key modifications to make it possible to utilize it as a design framework depending on Wappler Connect app.

So when I read of enhancements/bug fixes/new functionalities to Framework 7 Official I am concerned with choosing Framework 7 (Wappler update version) instead of Bootstrap.

I am sure this will prompt some Wappler responses. :grinning:

1 Like
#6

“Core” is the version of F7 to be used without a dedicated framework (pure JavaScript), while the React, Vue and Svelte (or Wappler’s AppConnect) are component based (UI-) frameworks and state/flow managements.

To make things a bit more complicated, the maker of F7 already has an updated / new version of F7 to utilize Tailwind CSS, called Konsta UI. This is specifially for component based frameworks like React, Svelte and Vue.

Wappler is a bit behind with the F7 releases, v7.1.2 is the current one, with Wappler you’ll find bundled 6.3.14, so we’re a bit dependend from Wappler to support the new F7, which might be difficult, as F7 v7 is radically differently built than F7 v6. But that’s for Wappler to fill in :wink:

1 Like
#7

Thanks for that!

Yes, I did note the different release numbers.

But since App Connect is closed versus React, Vue, Svelte, now Konsta, then as each upgrade version of Framework 7 is published at GitHub it gets a complementary React, Vue, Svelte package update when needed.

Meaning, I presume, extra work for Wappler to take time to sift through new Framework 7 compatabilities and what to port over into Connect App. So dependence on Connect App will for the time being await attention from the Wappler development team.

#8

If i had to make a mobile app today I’d use wappler for backend and flutterflow.io for front-end. Never used it really though.

1 Like
#9

I checked out FlutterFlow. It has some nice features (OpenAI Codex integration, Supabase integration, prebuilt chat/group chat) but it’s missing important components like local databases and would require coding at a certain point.

#10

Yes, because Vladimir maintains this projects. So it’s obvious that he supports all of his own components in those frameworks.

I would assume, so.

For me it’s a new experience with Wappler, and I wasn’t planning it for producton development, but I think it’s a powerful environment and package for experienced users.

#11

Agreed, but from my experience: if you need more data stored than Local Storage supports, than storing data in the cloud is a usually feasible solution.

(Haven’t checked out FlutterFlow yet)

#12

I looked at FlutterFlow.
Another cloud-is-the-platform web app builder.

I was attracted to Wappler because I could install it on a home machine with all of the benefits that go with that.

I just do not in 2023 Trust Building Apps on a cloud server.
No matter the hype about Developing apps-in-some-cloud in my opinion we are still in a Stone Age of internet connectivity. Ubiquitous, omnipresent, always on, low-latency, dependability, super high speed connectivity to a series of virtual servers spun up all over the globe is a no go for me.

Sure, once the development is done, what choice do you have when deploying apps but to pipe into the Global standards for distributing & running an app.

But, the “internet” connection I buy from a local provider network is just not non-interruptible enough to put all the Build/Development Eggs into the promise of mounting the whole project into a browser interface.

Local connectivity issues are widely diverse and cloud services are mucked with every minute from some disruptor’s keyboard. The deliberate state-sponsored havoc on top of the myriad of infrastructure related screw ups is enough reason for me to prefer a tool that I can install on my own machine.

1 Like
#13

It’s, like Wappler, a wrapped application (built with Flutter/Dart, hence the name).
You can download a Mac build at least (pretty sure for Windows as-well), not sure how it works without connection, as I have seen downloads while using the builder.

CleanShot 2023-02-01 at 16.46.46
CleanShot 2023-02-01 at 16.46.461342×974 169 KB

…but we’re highjacking the thread :slight_smile:

#14

Capacitor is definitely the way to go. We are also making more and more Capacitor plugins a App Connect components and flow actions and also have them auto installed when used. We don’t do that for Cordova as it is getting slowly deprecated.

6 Likes
#15

aren’t you worried with the ionic acquisition by outsystems, capacitor might not have a very long/bright future?

1 Like
#16

Nope, exact the other way round: Capacitor (and Stencil) are currently the most important Technology Drivers for cross platform development. But this branch totally lacks of support for Rapid Development Tools (aka No-Code/Low Code).

Ionic tried to launch Ionic Studio, but the expectation was high, as the existing customer group expected some sort of VSCodeReactStudio. Max Lynch, founder of Ionic, created then a lightweight solution called „lynx“ but it was a side project.

Demand is high, I think Outsystem can scale in a couple of directions with Ionic Capacitor and Stencil under the hood.

Imagine we could have Wappler with Ionic (framework and cap)…

1 Like
#17

Where does it all end?

So Stencil is based on TypeScript

Screenshot 2023-02-03 at 18.50.30
Screenshot 2023-02-03 at 18.50.30752×776 49.8 KB

and this branches off into Appflow …

and let’s not ignore “resources” –


Screenshot 2023-02-03 at 18.45.24
Screenshot 2023-02-03 at 18.45.242864×1030 320 KB

A developing morass of “solutions, platforms, DevOps tools, automated App Store Publishing” all from ionic.

1 Like
#18

Appflow is one of the build services I mentioned earlier, and I love their OTA / Live Update features - we use it in our projects.

Microsoft offers something similar, and there are other services.

1 Like