Web to App Convertor

Documentation FlyWeb

Previous (Download)

Introduction

This document shows how to install, customize, and publish to google play & app store for FlyWeb.

Note
You can subscribe to the YouTube Micro Download Channel, like, and press the bell icon to get notifications for free instructional videos.

What is FlyWeb ?

FlyWeb is a universal converter web to app inspired by Flutter framework, made by Google is an open-source mobile application development. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications.

If your website is ready you can converted to mobile application with FlyWeb. It is the best solution to convert your website to Android and iOS with just your URL :

  • Create your own application with in minutes without any special knowledge!
  • With this application you can turn your responsive website into a Modern Web To App
  • A complete web page with fully functional HTML, HTML5, CSS, JS operation
  • Fast and powerful webview engin
  • Full Screen web view
  • Renders your web in form of Mobile App
  • Convert responsive website into App with powerful webkit engine
  • Add Multiple pages
  • App drawer menu with all useful options
  • Home page
  • About us
  • Share Application
  • Custome your colors
  • Custome theme application
  • Navigation drawer
  • Send push notification
  • Clean code

Utilities

To run and generate application for deploy you need :

  • Flutter
  • Android Studio 3.6+
  • Xcode 11.4+
  • Apache HTTP server
  • MySQL Database
  • PHP

Install Android Studio

  1. Download and install Android Studio.
  2. Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.
Install the Flutter and Dart plugins

To install these:

  1. Start Android Studio.
  2. Open plugin preferences (Configure > Plugins as of v3.6.3.0 or later).
  3. Select the Flutter plugin and click Install.
  4. Click Yes when prompted to install the Dart plugin.
  5. Click Restart when prompted.

Note

Prior to v3.6.3.0, access plugin preferences as follows:

Open plugin preferences (Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux).

Select Marketplace, select the Flutter plugin and click Install.

Android

Install Flutter

To edit this project you must have Flutter & Dart installed and configured successfully on your device.

Windows install

  1. Download the following installation bundle to get the latest stable release of the Flutter SDK : From Here
  2. Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).
Install Flutter
Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

  • From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
  • Under User variables check if there is an entry called Path:
    • If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
      For example C:\src\flutter\bin
    • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.
      For example C:\src\flutter\bin
Update path
Run flutter doctor

From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

C:\src\flutter>flutter doctor
Flutter Console
1. Open flutter_console

commande flutter doctor
2. Run commande flutter doctor

Warning

If Android toolchain not verify run : flutter doctor –android-licenses

Run commande flutter doctor --android-licenses
3. Run commande flutter doctor –android-licenses
Re-Run commande flutter doctor
4. Re-Run commande flutter doctor
 Add folder flutter to the settings in flutter
5. Add folder flutter to the settings in flutter
Check Flutter
6. Check Flutter

Mac install

  1. Download the following installation bundle to get the latest stable release of the Flutter SDK: From Here
  2. Extract the file in the desired location, for example:$ cd ~/development $ unzip ~/Downloads/flutter_macos_1.17.5-stable.zip
  3. Add the flutter tool to your path:$ export PATH="$PATH:`pwd`/flutter/bin"
Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):

$flutter doctor
Run commande flutter doctor
1. Run commande flutter doctor
Add folder flutter to the settings in flutter
2. Add folder flutter to the settings in flutter

Install Xcode

To develop Flutter apps for iOS, you need a Mac with Xcode installed.

Download & install Xcode : From Here

Source Code Recommendations

Call Log module for Perfex CRM v1.0

Prime Video Flix App: Movies – Shows – Live Streaming – TV – Web Series – Premium Subscription Plan v6.0

Salon & Spa Appointment Booking App For Android – iOS App with admin panel – Beauty Belle v1.1

Config Admin Panel

This section shows the way to build the FlyWeb application with the Admin Panel.

Requirements for admin
  • Apache HTTP server
  • MySQL
  • PHP

1. Open FlyWeb zip

Next, place the downloaded code from codecanyon: “https://codecanyon.net/item/flyweb-for-web-to-app-convertor-flutter-admin-panel-v10/26840230” in some place on your computer.
In the folder “My Mobile Application” you have one zip file.
Extract the file project source code from Codecanyon to your workspace.

2. Integrate the Admin Panel

Download the Pre-config the admin panel and setup your own local development. You can use XAMPP to run project.

2.1. Install Xampp in localhost

What is Xampp?

Xampp is the most popular PHP development environment for Windows, OS X, and Linux platforms.

Xampp stands for Cross platform(x), Apache(a), Maria db(m), PHP(p), Pearl(p) which is a software distribution server which makes developer’s work eaiser for testing and deploying by creating a local web server.

Step 1. Install XAMPP:

The first step is to install XAMPP onto your computer. it is very easy to install XAMPP. Just visit the official website to download XAMPP.

 Install XAMPP

Apache Friends: https://www.apachefriends.org/index.html

On this site you can see XAMPP for Windows, Linux and OS X. Where you can download XAMPP based on your computer OS and after downloading install it.

Step 2. Select the components :

Select the components you want to install.

 Component XAMPP
Step 3. Open XAMPP control panel:

After installing XAMPP on to your PC the next step is to start the Apache server and MySQL.
The control panel XAMPP which is something like this.

XAMPP control panel

To launch Apache service and MySQL service, click on the Start button. if you want to stop any of the services at any time you can click on stop button in XAMPP control panel.

Step 4. Executing Project:

Once the Apache and MySQL services are started and running in the background. Now extract the project zip file which you have downloaded from our site.

Executing Project

After extracting you should see the folder which contains all the code and related files of the project that you have downloaded.

copy project

You should find the folder named /FlyWeb_Admin_Panel

Copy this folder and navigate to xampp folder (which is basically located in C drive) and inside this folder (xampp) find the htdocs folder and paste the project folder into this htdocs folder.

In my case, the path is something like this in Windows C:\xampp\htdocs or in the Mac /Applications/XAMPP/xamppfiles/htdocs.

Paste

After the project folder is successfully copied to the specified location on your computer, Import a database using phpMyAdmin.

3.2. Import a database using phpMyAdmin

Step 1. Log in to phpMyAdmin :

Log in to phpMyAdmin and create new database from the list on the left with name for example flyweb .
After creation select the database flyweb .

Step 2. Import database :

Click the Import tab.
Click Choose File and select your database’s backup.
Select SQL from the Format dropdown and click Go.

Log in to phpMyAdmin

Your database will begin uploading.

3.3. Upload admin panel in FTP

In order to make this as helpful as possible, I’m going to start with how to actually upload files to your server via FTP.

Source Code Recommendations

Grocery, Food, Pharmacy, Store Delivery Mobile App with Admin Panel v1.5.0

FoodTiger – Food delivery – Multiple Restaurants v1.3.2

Weboox Convert – Perfex CRM to app iOS v3.0

Step 1. Connect to your site via FTP :

To connect to your site via FTP, you’ll need:

  • Your FTP username and password – if you don’t know these already, you can get them from your host (consult your host’s documentation or support for more information).
  • An FTP program – FileZilla is a good free option and what I’ll use for my tutorial screenshots.

 Download FileZilla

Step 2. Upload admin panel :

Once you have those two things, open your FTP program and enter your credentials at the top:

Upload admin panel

Here’s what the various input boxes mean:

  • Host – the actual URL to your website (or your server’s IP address)
  • Username – the username for your FTP account, which you get from your host
  • Password – the password for your FTP account, which you get from your host
  • Port – usually you can leave this as the default, but sometimes your host will specify a different port

Once you successfully connect to your site, you should see something like this:

FileZilla
Step 3. Config database with your owen server:

Change this with your sql config in config/DBSettings.php :

// Host name
$settings['dbhost'] = 'your db host';
// Database name
$settings['dbname'] = 'flyweb';
// Username
$settings['dbusername'] = 'username';
// Password
$settings['dbpassword'] = 'password';
Config database
Config this file : config/DBSettings.php

Then go to your browser (Chrome) and type in URL field: localhost/flyweb and then hit enter. That’s it your project will start running.

Localhost

Note
You can subscribe to the YouTube Micro Download Channel, like, and press the bell icon to get notifications for free instructional videos.

Integrations

File Structures

This will help you understand what we’re working with and what everything means.

File Structure
  • data: All the common items goes in here, example., constants used in the project.
  • elements: This folder has custom widgets which are used in multiple different screens.
  • helpers: This folder holds helper classes such as data conversion.
  • models: The folder contains files each with a custom class of an object widely used throughout the app.
  • pages: This folder holds many different folders, each of which corresponds to a different screen of the app.
  • repository: This folder is for backend operation like connecting invoking HTTP calls etc.
  • themes: The theme folder just contains a UIColors.dart, UIFonts.dart, UIImages.dart, UIMetrics.dart with my app theme which I access in the main.dart file
  • main.dart: The foundation of any Flutter app, the main.dart file, should hold very little code and only serve as an overview to an app.
  • assets/img: The assets folder holds such as images files
  • assets/cfg: The cfg folder for managing different configurations by merging them together and making them available everythere inside the app via a singleton.

Run Application FlyWeb

To develop an application, you will need minimum Android studio version 3.6+ or latest.

Open this folder project in the Android Studio

  • Open Android Studio
  • Choose “open existing project”
  • Select the FlyWeb directory, which flutter create created for you
Open project
Open project
Select FlyWeb Flutter App Folder
Select FlyWeb Flutter App Folder
Run flutter pub get
From the terminal: Run flutter pub get

Source Code Recommendations

MasterStudy LMS Mobile App – Flutter iOS & Android v1.0

Classic Flutter News App best for News, Blog and Magazines v1.0

Classic Flutter News App best for News, Blog and Magazines v1.0

  1. In the target selector, select an Android device for running the app. If none are listed as available, select Tools> Android > AVD Manager and create one there. For details, see Managing AVDs.
  2. Click the run icon in the tollbar, or invoke the menu item Run > Run. Locate the main Android Studio toolbar:
Android Studio toolbar

Click the run icon in the toolbar, or invoke the menu item Run > Run.

invoke Run project

Config Firebase

Create your project firebase from https://console.firebase.google.com

For Android Config :
Change the app Bundle ID (package name)

Find in the project com.flyweb and replace all with your new package name

Android Config

We need to rename the package name

package name

Change the applicationId in the build.gradle file :

build gradle

Finally we are going to change it in both AndroidManifest.xml file :

AndroidManifest.xml

in the debug file also :

debug file also

After change the app Bundle ID go now to the firebase console

Source Code Recommendations

Fresh Fast Grocery Delivery Native Android App with Interactive Admin Panel v1.2

ProShop Multi Vendor v2.0.0 – Multipurpose Woocommerce Android App

MoFlix – Ultimate PHP Script For Movie & TV Shows v1.0.1

Config application variable

Open the file /assets/cfg/configuration.json and edit with your configin the admin panel

application variable
  • base_url : change the base URL
  • api_base_url : change the API url
  • firstColor : First color (Hexa Color, example #212121)
  • secondColor : Second color (Hexa Color, example #212121)
  • appIdOneSignal : Public Key used for initialization and app identification from Onesignal.

Project Configuration

Section intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus condimentum nisl id vulputate. Praesent aliquet varius eros interdum suscipit. Donec eu purus sed nibh convallis bibendum quis vitae turpis. Duis vestibulum diam lorem, vitae dapibus nibh facilisis a. Fusce in malesuada odio.

Settings

This part it’s the core of your application from here you can :

  • Base URL :
    Set your full URL (Ex: http://www.yourdomaine.com) with http or https. This URL will load on your app after start up screen.
Base URL
  • Title :
    Set your title application. This title show in the toolbar on your application.
  • Navigation bar style :
    4 navigation style is available choice one of them. (Left , Center, Right and No navigation bar)
Navigation style
  • Loader style :
    This loader will be shown on during loading website, you can select the loader from the given list.

New Interface for the button option

Interface

List Button Option :

New button in this version

New button

Left button option :
If you already select No navigation bar then this menu not working. Select your left navigation button. If you don’t want select No Button.

button option

Right button option :
If you already select No navigation bar then this menu not working. Select your right navigation button. If you don’t want select No Button.

Right button

Application Color

To change the color application you can select your first and second color for create gradient color or same color to create solid color :

Application ID

Add here your app id after publish your application on Play Store (andoid) or App Store (iOS) for rate application.

Application ID

About Us

You can add about for your web site.

About Us

adMob

You can earn money from adMob just to add key ad banner here :

adMob Website : https://apps.admob.com

Document guide : https://developers.google.com/admob/android/quick-start

Admob Id

Share

Set your content description for share the application :

Share

Notification (OneSignal)

This section shows the way to configure the Push Notification feature.

Use this document guide to get the App ID from OneSignal https://documentation.onesignal.com/docs/flutter-sdk-setup.

In the application web admin :

OneSignal

For send notification you can put title and content here

send notification

Menu Items

Add custom menu from here to your application :

Social Media

This screen content list social media ( Facebook, twitter, Youtube, …)

Social Media

Profile

This screen content the admin user data : First name , last name email and picture

Profile

Publish Application

Publish to Play Store

Change the app name

Open android/app/src/main/res/values/strings.xml and replace Fly Web with your app name:

<string name="app_name">Fly Web</string>

Change the app icon

To change your application icon add your icon from here:

Publish Application to Play Store
Change the app icon

Generate APK file

To generate the apk you need to clean cache and rebuild project:

Signing the app :

To publish on the Play Store, you need to give your app a digital signature. Use the following instructions to sign your app.

Create a keystore :

If you have an existing keystore, skip to the next step. If not, create one by running the following at the command line: On Mac/Linux, use the following command :

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

On Windows, use the following command :

keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key
Configure signing :

Change in file /android/gradle.properties that contains a reference to your keystore::


storeFile=key.jks
keyAlias=key
storePassword="password from previous step"
keyPassword="password from previous step"                                                
Build an APK :

Run flutter build apk --split-per-abi

This command results in three APK files:

  • /build/app/outputs/apk/release/app-armeabi-v7a-release.apk
  • /build/app/outputs/apk/release/app-arm64-v8a-release.apk
  • /build/app/outputs/apk/release/app-x86_64-release.apk

For more information go to this https://flutter.dev/docs/deployment/android

Publish to App Store

Register your app on App Store Connect :

Manage your app’s life cycle on App Store Connect (formerly iTunes Connect). You define your app name and description, add screenshots, set pricing, and manage releases to the App Store and TestFlight.

Registering your app involves two steps: registering a unique Bundle ID, and creating an application record on App Store Connect.

For a detailed overview of App Store Connect, see the App Store Connect guide.

Register a Bundle ID :

Every iOS application is associated with a Bundle ID, a unique identifier registered with Apple. To register a Bundle ID for your app, follow these steps:

  1. Open the App IDs page of your developer account.
  2. Click + to create a new Bundle ID.
  3. Enter an app name, select Explicit App ID, and enter an ID.
  4. Select the services your app uses, then click Continue.
  5. On the next page, confirm the details and click Register to register your Bundle ID.
Create an application record on App Store Connect :

Register your app on App Store Connect :

  1. Open App Store Connect in your browser.
  2. On the App Store Connect landing page, click My Apps.
  3. Click + in the top-left corner of the My Apps page, then select New App.
  4. Fill in your app details in the form that appears. In the Platforms section, ensure that iOS is checked. Since Flutter does not currently support tvOS, leave that checkbox unchecked. Click Create.
  5. Navigate to the application details for your app and select App Information from the sidebar.
  6. In the General Information section, select the Bundle ID you registered in the preceding step.

For a detailed overview, see Add an app to your account.

Review Xcode project settings

This step covers reviewing the most important settings in the Xcode workspace. For detailed procedures and descriptions, see Prepare for app distribution.

Navigate to your target’s settings in Xcode:

  1. Xcode, open Runner.xcworkspace in your app’s ios folder.
  2. To view your app’s settings, select the Runner project in the Xcode project navigator. Then, in the main view sidebar, select the Runner target.
  3. Select the General tab.

Verify the most important settings.

In the Identity section:

Display Name
Runner
Changing the display name to anything other than Runner causes the app not to run with the Flutter tools.

Open ios/Runner/Info.plist and replace the fly Web with your App Name.

<key>CFBundleName</key>
<string>Fly Web</string>
Display Name

Bundle Identifier

The App ID you registered on App Store Connect.

registered on App Store

In the Signing section:

Automatically manage signing
Whether Xcode should automatically manage app signing and provisioning. This is set true by default, which should be sufficient for most apps. For more complex scenarios, see the Code Signing Guide.
Team
Select the team associated with your registered Apple Developer account. If required, select Add Account…, then update this setting. In the Deployment Info section:

Deployment Target:
The minimum iOS version that your app supports. Flutter supports iOS 8.0 and later. If your app includes Objective-C or Swift code that makes use of APIs that were unavailable in iOS 8, update this setting appropriately.
The General tab of your project settings should resemble the following:

Deployment Target
Create a build archive

Finally, create a build archive and upload it to App Store Connect:

  1. Select Product > Archive to produce a build archive.
  2. In the sidebar of the Xcode Organizer window, select your iOS app, then select the build archive you just produced.
  3. Click the Validate App button. If any issues are reported, address them and produce another build. You can reuse the same build ID until you upload an archive.
  4. After the archive has been successfully validated, click Distribute App. You can follow the status of your build in the Activities tab of your app’s details page on App Store Connect.

For more information go to this link

End

Thank you for downloading the application in micro download. As I said at the beginning, I will be happy to help you. There is no guarantee, but I will do my best to help. If you have suggestions regarding this website, or you have more general questions related to applications in CodeCanyon, you can consider the “Micro Team” forum and ask your questions in the “Micro Help” section.

You can subscribe to the YouTube Micro Download Channel, like, and press the bell icon to get notifications for free instructional videos.

Prime Video Flix App

Prime Flix Android App Documentation by Mira | Micro Team

Quick start guide

Check video to get Short quick Guide of this project

A) Download Android studio

To use this project you need to download the android studio on your computer first you need to visit this link (click button bellow) then click the button “DOWNLOAD ANDROID STUDIO” (check video bellow ) to get the righ version for your system

1. Download Android studio

After Download the Android Studio you need to install it on your computer/Mac.

B) Open Project in Android studio

Now you need to open the Android Application on Android Studio just follow the video bellow to open the project .

C) Config Android Project

After Download , install and open the project on Android Studio , now you need to config your source code and make it ready by change package name config

1. Change the package name

Every Android Application on Google Play has a unique package name (unique id) , for this application too we need to use a unique package name , for that you need to choose a unique package name (ApplicationId) for example : com.companyname.appname , now to change you package name follow the video

Please note
● The only special characters allowed on package name its underscore
● Don't change the "com" part on package name
● Google will not allow you to change the package name after publish the app on google play

D) Paytm Payment gateway setup

If You want paytm payment gateway than watch below video and as per that Place your Paytm Merchant ID in android config file.

E) Admin Panel

Now you need to setup your admin panel and that required a shared hosting or a vps server, After prepare your server follow the video bellow to setup the admin panel

Set Purchase Code

Open configuration file db_config.php and set value of PURCHASE_CODE constant to your own Envato purchase code.
After setup your admin panel you need to install and setup database.

Panduan – Aplikasi Android Hungry Grocery Delivery dan Aplikasi Delivery Boy dengan Panel Admin Interaktif (Terbuka di tab browser baru)

Konversi Weboox – Perfex CRM ke aplikasi iOS

Panduan 11Dreamer (Buka di tab browser baru)

F) Database Setup

Now you need to setup your Database follow the video bellow to setup it.

G) Link The Android App With Admin panel

After the android app configuration and the admin panel configuration now you need to link it . to do this go to :

Android App>Config>config.java

and add your api url there
if your admin panel is “https://microdownload.net/primeflix/
daripada file konfigurasi Anda “nilai variabel” akan menjadi “https://microdownload.net/
Dan nilai variabel “mainurl” Anda adalah “https : //microdownload.net/primeflix/

Open gradle.properties

and add your api url there also
set “server_url” value to https://microdownload.net/primeflix/

H) Change the application name

Untuk mengubah nama aplikasi android, tonton video di bawah ini yang akan membantu Anda cara mengubah nama aplikasi

I) Change the policy privacy url

To change policy privacy url watch below video which will help you for how to change policy privacy url

J) Change Admob ad unit id

To admob ad unit id and enable/disable banner and interstatial ads in app watch below video which will help you for how to change youtube channel url

K) How to Use admin Panel ?

after all setup done. Start To use admin Panel

L) How to Register Your Purchase Code

videoTo Register Your Purchase Code and package name at Battleworld Watch Below Video which will show you steps how to register your purchase code and package name of android app

Thank you for downloading the application in a micro download. As I said at the beginning, I will be happy to help you. There is no guarantee, but I will do my best to help. If you have suggestions about this website, or you have general questions about the application in CodeCanyon, you can consider the “Micro Team” forum and ask your questions in the “Micro Help” section.