# Home {% content-ref url="/pages/ro11gSomzhcWEmOxUjyT" %} [Woocommerce Mobile App](/woocommerce-mobile-app/bookstore) {% endcontent-ref %} {% content-ref url="/pages/oNw4Bq9nywMfNJqIxt22" %} [J2store Mobile App](/j2store-mobile-app/outfit) {% endcontent-ref %} # Bookstore # Introduction What is Book store mobile app? {% hint style="info" %} Book store app is a universal e-commerce app inspired by the Flutter framework. Bookstore comes as a complete solution for optimizing to deliver your app to the market with high productivity and cost-efficiency. It could be able to satisfy all of the business requirements including e-commerce functionalities, and smooth performance on both iOS and Android devices. {% endhint %} ### **Getting Started**
System Requirements
Operating systemmacOS (64-bit), Windows 10 (64-bit), x86-64 based
Disk space2.8 GB
SDK

Download the following installation bundle to get the latest stable release of the Flutter SDK

Windows macOS

Tools

Flutter depends on these tools being available in your environment.

# Environment Setup **Installation:** **Mac:** Extract the file in the desired location, for example: ``` cd ~/development unzip ~/Downloads/flutter_macos_2.10.5-stable.zip ``` Add the `flutter` tool to your path: ``` export PATH="$PATH:`pwd`/flutter/bin" ``` This command sets your `PATH` variable for the *current* terminal window only. To permanently add Flutter to your path, see [Update your path](https://docs.flutter.dev/get-started/install/macos#update-your-path). **Windows:** \ Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter). {% hint style="danger" %} **Warning:** Do not install Flutter to a path that contains special characters or spaces. {% endhint %} {% hint style="danger" %} **Warning:** Do not install Flutter in a directory like `C:\Program Files\` that requires elevated privileges. {% endhint %} #### 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 ``` This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you might need to install or further tasks to perform For example: {% hint style="info" %} \[-] Android toolchain - develop for Android devices • Android SDK at /Users/obiwan/Library/Android/sdk ✗ Android SDK is missing command line tools; download from ; • Try re-installing or updating your Android SDK, visit for detailed instructions.
{% endhint %} # Platform setup ### iOS setup To develop Flutter apps for iOS, you need a Mac with Xcode installed. 1. Install the latest stable version of Xcode (using [web download](https://developer.apple.com/xcode/) or the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835)). 2. Configure the Xcode command-line tools to use the newly-installed version of Xcode by running the following from the command line: *content\_copy* ``` $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer $ sudo xcodebuild -runFirstLaunch ``` This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead. 3. Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running `sudo xcodebuild -license` from the command line. Versions older than the latest stable version may still work, but are not recommended for Flutter development. Using old versions of Xcode to target bitcode is not supported, and is likely not to work. With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator. #### Set up the iOS simulator To prepare to run and test your Flutter app on the iOS simulator, follow these steps: 1. On your Mac, find the Simulator via Spotlight or by using the following command: *content\_copy* ``` $ open -a Simulator ``` 2. Make sure your simulator is using a 64-bit device (iPhone 5s or later). You can check the device by viewing the settings in the simulator’s **Hardware > Device** or **File > Open Simulator** menus. 3. Depending on your development machine’s screen size, simulated high-screen-density iOS devices might overflow your screen. Grab the corner of the simulator and drag it to change the scale. You can also use the **Window > Physical Size** or **Window > Pixel Accurate** options if your computer’s resolution is high enough. * If you are using a version of Xcode older than 9.1, you should instead set the device scale in the **Window > Scale** menu. ### Android setup {% hint style="info" %} **Note:** Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that. {% endhint %} #### Install Android Studio 1. Download and install [Android Studio](https://developer.android.com/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. 3. Run `flutter doctor` to confirm that Flutter has located your installation of Android Studio. If Flutter cannot locate it, run `flutter config --android-studio-dir ` to set the directory that Android Studio is installed to. #### Set up your Android device To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher. 1. Enable **Developer options** and **USB debugging** on your device. Detailed instructions are available in the [Android documentation](https://developer.android.com/studio/debug/dev-options). 2. Windows-only: Install the [Google USB Driver](https://developer.android.com/studio/run/win-usb). 3. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device. 4. In the terminal, run the `flutter devices` command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your `adb` tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the `ANDROID_SDK_ROOT` environment variable to that installation directory. #### Set up the Android emulator To prepare to run and test your Flutter app on the Android emulator, follow these steps: 1. Enable [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration) on your machine. 2. Launch **Android Studio**, click the **AVD Manager** icon, and select **Create Virtual Device…** * In older versions of Android Studio, you should instead launch **Android Studio > Tools > Android > AVD Manager** and select **Create Virtual Device…**. (The **Android** submenu is only present when inside an Android project.) * If you do not have a project open, you can choose **Configure > AVD Manager** and select **Create Virtual Device…** 3. Choose a device definition and select **Next**. 4. Select one or more system images for the Android versions you want to emulate, and select **Next**. An *x86* or *x86\_64* image is recommended. 5. Under Emulated Performance, select **Hardware - GLES 2.0** to enable [hardware acceleration](https://developer.android.com/studio/run/emulator-acceleration). 6. Verify the AVD configuration is correct, and select **Finish**. For details on the above steps, see [Managing AVDs](https://developer.android.com/studio/run/managing-avds). 7. In Android Virtual Device Manager, click **Run** in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device. #### Agree to Android Licenses Before you can use Flutter, you must agree to the licenses of the Android SDK platform. This step should be done after you have installed the tools listed above. 1. Make sure that you have a version of Java 8 installed and that your `JAVA_HOME` environment variable is set to the JDK’s folder. Android Studio versions 2.2 and higher come with a JDK, so this should already be done. 2. Open an elevated console window and run the following command to begin signing licenses.*content\_copy* ``` $ flutter doctor --android-licenses ``` 3. Review the terms of each license carefully before agreeing to them. 4. Once you are done agreeing with licenses, run `flutter doctor` again to confirm that you are ready to use Flutter. # Set up an editor ### Set up an editor You can build apps with Flutter using any text editor combined with our command-line tools. However, we recommend using one of our editor plugins for an even better experience. These plugins provide you with code completion, syntax highlighting, widget editing assists, run & debug support, and more. Follow the steps below to add an editor plugin for Android Studio, IntelliJ, VS Code, or Emacs. Install any one of the following editors * [Android Studio and IntelliJ](https://docs.flutter.dev/get-started/editor?tab=androidstudio#androidstudio) * [Visual Studio Code](https://docs.flutter.dev/get-started/editor?tab=androidstudio#vscode) * [Emacs](https://docs.flutter.dev/get-started/editor?tab=androidstudio#emacs) ### **Install the Flutter and Dart plugins** 1. Start VS Code. 2. Invoke **View > Command Palette…**. 3. Type “install”, and select **Extensions: Install Extensions**. 4. Type “flutter” in the extensions search field, select **Flutter** in the list, and click **Install**. This also installs the required Dart plugin. Use the following instructions for macos: 1. Start Android Studio. 2. Open plugin preferences (**Preferences > 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. #### Run example "Test drive” This is **optional** section is just to make sure you have set up all libraries ready before using the product, please skip and go next menu item if you feel good with the installing, please refer to this guide # Run the App #### Run InspireUI Apps After extracting the source code package from Themeparrot, open the code folder with Android Studio. 1. Update the Android SDK for Bookstore project, open Android Studio > Preference > search Flutter and update Flutter SDK Path 2. Head to the file pubspec.yaml and select pub get or Packages get to install the required libraries. 3. Open IOS/Android simulator. 4. Press the run button (green play icon) to start the project. # Website Integration This guide is used for the fresh Wodpress Installing, please follow these 5 easy steps and you are good to go (If you are using an existing site, please make sure to back up the database before running the import): 1. Install and activate the [WooCommerce](https://wordpress.org/plugins/woocommerce/) plugin. 2. Generate the WooCommerce REST API key and save them to your private file for later usage. 3. Woocommerce -> settings -> Advanced ->REST API -> Add key ![](/files/D6KyWtDqdCMWxipDiX9Y) ![](/files/MpbXsRH6Uw78WnNQ9iC6) ![](/files/037SqnEQK2EjA4t0N1Ce) ### Plugin Integration * You need to install the 2 plugins on your Wordpress website * Download "[**JWT**](https://wordpress.org/plugins/jwt-auth/) **and variable** ", then upload and active this plugin on your website #### Enable HTTP Authorization Header * Most shared hosts have disabled the **HTTP Authorization Header** by default. * To enable this option you’ll need to edit your **.htaccess** file by adding the following: ``` RewriteEngine on RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1] ``` #### **WPENGINE** To enable this option you’ll need to edit your **.htaccess** file by adding the following (see [this issue](https://github.com/Tmeister/wp-api-jwt-auth/issues/1)): ``` SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1 ``` **Configure the Secret key** The JWT needs a **secret key** to sign the token. This **secret key** must be unique and never be revealed. To add the **secret key**, edit your wp-config.php file and add a new constant called **JWT\_AUTH\_SECRET\_KEY**. ``` define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key'); ``` You can use a string from [here](https://api.wordpress.org/secret-key/1.1/salt/) ### App Integration Now we are going to connect your book store app to your website 1. Open .env file Change the URL to your website domain(e.g: [https://demo.com](https://mediapp.umedicart.com/appstore/) ). Then replace the consumer key and consumer secret you created in the previous section (Website Integration). # UI Customize #### Change the app main color 1. Open `lib/config.dart` the file in the project. 2. You can change the most of the color components in this section ``` //App main color const maincolor = 0xFF3FC1BE; ``` #### Change the app logo and splash screen 1. To change the **logo,** replace the logo.png in the following folder assets/images/ 2. Open `lib/images.dart` in the project folder and cross check your logo image name 3. Your logo must be 466 \* 97 ``` const String constLogo = 'assets/images/name of your image.extension ``` 1. To change the **Splashscreen** replace the splashscreen.png in the following folder assets/images/ 2. Open `lib/images.dart` in the project folder and cross check your splashscreen image name 3. Your logo must be 829 \* 1792 ``` const String constSplashScreen = 'assets/images/name of your splashscreen.extension ``` # Firebase configuration 1. Go to the firebase console[`https://console.firebase.google.com`](https://console.firebase.google.com/)and register with an email address. 2. Create Project in the firebase console, if you click on Add Project Button it will ask you for your project name, fill in your project name and click on the continue button. ![](/files/EaiveFDESaABu9b6rlxJ) 1. Then enable the google analytics for the firebase project then click continue ![](/files/KPzfOegC8t8pzqRnToS9) * After successfully created the firebase project click continue to enter into the project console. ![](/files/bpp74ttFH7qI8QHL6N92) iOS configuration # Android Configuration **Integrating Firebase with the Android app** * Open your firebase project console, click the gear icon in the upper left corner, and select Project setting * At the top, click on the Android icon to add a new android application. ![](/files/EwQC56C1TeWbKJIyOErb) * The next screen will ask you for some information about your application. ![](/files/nBjUbzLolu5dkDUX6juD) * Your Android package name should match the Id from your AndroidManifest.xml file * Nickname and Debug Signing Certificate are optional * Then click the Register app button. **Download and Use the google-services.json file** * Download the google-services.json file to your local machine. Then move the file into your J2store mobile app Android project directory, specifically under android/app/. # iOS Configuration **Prerequisites** iOS push notifications are significantly more complicated to set up than Android. You must have a [`paid Apple Developer account`](https://developer.apple.com/) *and* take care of the following items prior to being able to test push notifications with your iOS application: 1. [`Setup the proper Development` ](https://help.apple.com/xcode/mac/current/#/dev60b6fbbc7)or Production certificates & provisioning profiles for your iOS application in the Apple Developer Portal 2. [`Create an APNS certificate or key`](https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/establishing_a_certificate-based_connection_to_apns) for either Development or Production in the Apple Developer Portal 3. [`Ensure Push Notification capabilities have been enabled`](https://help.apple.com/xcode/mac/current/#/dev88ff319e7) in your application in Xcode 4. Have a physical iOS device as per the guidelines in the [`Environment Setup`](https://capacitorjs.com/docs/getting-started/environment-setup) documentation**.** **Integrating Firebase with the iOS app** Open your firebase project console, click the gear icon in the upper left corner, and select Project setting At the top, click on the iOS icon to add a new iOS application. ![](/files/HETT9RK30FF13edyuBz4) **Add the GoogleService-Info.plist file to your iOS app** {% hint style="success" %} Note: This is not the same file used for your Android app. {% endhint %} * Download the GoogleService-Info.plist provided to your local machine. * You’ll then want to open Xcode and move the .plist file into your Xcode project as instructed by Firebase, ensuring to add it to all targets. # Dynamic UI changes #### Enable the Remote config * Firebase Remote Config is the easiest way to customize your mobile app once you release it to play and app stores. In general, you need to update the app if you have any changes. * These updates need to be pushed to the stores after proper testing and approvals though it might be a small change but to make it live needs a lot of time. * And also all the users may not update the app once you release it so this process may further get delayed. * To avoid all these situations we make use of a remote config option available with [Firebase](https://firebase.google.com/products/remote-config). Which will make it easier to deal with content changes within the app. * First, we need to enable the remote config feature in the firebase console * Open the Firebase console & select your project under the engage section to select the remote config ![](/files/feFbuX4GMzcAPVj6NE7Z) * After clicking the create configuration here we need to create our parameters. ![](/files/YzAPwm6sT4JXhCfIxPXD) #### Change the Banner ![](/files/4HvrLlTCrW7dY3ajSCGg) * To update the banner in the mobile app, first, you should upload your banner images to your website and copy the link to the images * Then you need to create the parameters in the remote config for banners * In our app currently, we have 3 banners that banners parameter names are **slider1\_img, slider2\_img, slider3\_img** * Also here we need to create the **banner id parameter** in the remote config for navigation, our slider parameter names are followed by **slider1\_id, slider2\_id, slider3\_id** ![](/files/W3Jdljc4Ipu3gQ2lBBMh) * After create the parameter you need to publish the parameter in Remote config ![](/files/hI9vDbvizTaQ0r7fa3wj) ![](/files/yWe6cpniyRXiuayiQinb) * After sucessfully publish the changes we can easily access the banner images in our app. ![](/files/2LS2On6tKMOs1NhNHd67) #### Change the category image ![](/files/OiA45Ou6wUvZ0zFcWDZq) * To update the category images in the mobile app, first, you should upload your category images to your website and copy the link to the images * Then you need to create the **parameters** in the remote config for **category images & category image Id** * In our app currently, we have 4 category that parameter names are **category1\_img, category2\_img,category3\_img,category4\_img** * Also here we need to create the **category image id parameter** in the remote config , our category image id parameter names are followed by **category1\_id, category2\_id, category3\_id,category4\_id** * After create the parameter you need to **publish** the parameter in Remote config **Change the product category** ![Product category section](/files/7xieBWe4ikDQ2YU0IXmP) * To update the product category section you need to create the following **parameters** in the remote config for **Product** **category name , Product category Id & Category may like id** * In our app currently, we have 3 product category section that parameter names are **category\_name1, category\_name2,category\_name3** * Also here we need to create the **Product category image id parameter** in the remote config , our Product category image id parameter names are followed by **category\_id1, category\_id2, category\_id3** * Also here we need to create the **Product may like id parameter** in the remote config , that parameter names are followed by **category\_like1, category\_like2, category\_like3** * After create the parameter you need to **publish** the parameter in Remote config # Basic Features Bookstore WooCommerce is the Full Flutter Application to connect to your existing WooCommerce website. * Sync Unlimited Products * Ready to Use * UI Layout Free Install & Setup * Dynamic Dashboard * High Performance Woocommerce app delivers high quality, bug-free by strictly following the development process. This app saves you an immense amount of time and development costs and updates. Features **Native Apps :** Build native iOS, Android mobile app from single codebase **Social Login:** Social Login is a single sign-on for end users. Using existing login information from a social network provider like Facebook & Google, the user can sign in to the book store app instead of creating a new account. This simplifies registrations and logins for end users. **SMS Login:** Allows users to verify their identities with a code that is sent to them via text message Smooth login via SMS with just a few steps by using phone number **Push Notification :** Admin can easily send the offer details to the customers via the Firebase push notification, once the notification is triggered customer will get the offer details. **Shipping :** The Bookstore app supports the default woo commerce shipping methods, also calculates the shipping charge based on the minimum amount. No need to do any additional work in coding. **Multi payments :** The main purpose of a payment gateway is to process transactions for your business of any kind. To make this happen, multiple payment gateways can be the best option. It provides you with extended pay-ability and a high level of perceived professionalism, trust and legitimacy. All these attributes of multiple gateways are sure to make a convenient shopping experience. **Multi-Product types:** The app supports Simple, variable, and Flex Variable product types only. The configurable and downloadable products are not available with the mobile app. **Fully Customizable :** You can change the branding including store colors, logo, custom screen layout, custom menu, custom app bar, and more. The app is built using the Flutter framework and works beautifully with your woocommerce website. **App Store and Store Listening :** In particular, we can help you to publish your Book store mobile app in Apple’s App Store and Google Play Store at no extra cost. Now, it’s easy to publish in your own App Store & Play store account. **Quick, Smooth Checkout :** Let the customer view the product, add it to the cart & checkout. Easily choose payment options and make the payment. And Done! It’s fast and simple. **Order History:** The app comes with complete order history. Customers can view the entire history and the order details. **Dynamic UI:** Dynamic UI Change is aimed to update Banner and Category List without code push in the app store and play store. # Release # Publish to google play #### Adding a launcher icon * To customize the app icon, you might want to open the assets/icon/logo.png file and replace your app icon. * Then cross-check the file image name in the **pubspec.yaml** ``` flutter_icons: android: true ios: true image_path: "assets/icon/logo.png" ``` * Then run the following command in your terminal ``` $flutter pub run flutter_launcher_icons:main ``` * After successfully creating the icon you will get the following message ``` ════════════════════════════════════════════ FLUTTER LAUNCHER ICONS (v0.8.0) ════════════════════════════════════════════ • Creating default icons Android • Overwriting the default Android launcher icon with a new icon • Overwriting default iOS launcher icon with new icon ✓ Successfully generated launcher icons ``` #### Reviewing the app manifest * Review the default App Manifest file, AndroidManifest.xml, located in \[project]/android/app/src/main and verify that the values are correct, especially the following: **Appname** * Edit the `android:label` in the `application` tag to reflect the final name of the app. **Change the App bundle ID** * Change the package name in your `AndroidManifest.xml` * Open the \[project]/android/app/src/main/AndroidManifest.xml and change the package name **com.bookstore.book** into your bundle Id ``` ``` * Open the \[project]/android/app/build.gradle and under the defaultConfig change the applicationId **com.bookstore.book** into your applicationId ``` applicationId "com.bookstore.book" ``` * Open the \[project]/android/app/src/debug/AndroidManifest.xml and change the package name **com.bookstore.book** into your bundle Id ``` ``` * Open the \[project]/android/app/src/main/kotlin/com/example/appname/MainActivity.kt and change the package name **com.bookstore.book** into your package name ``` package com.bookstore.book ``` * Open the \[project]/android/app/src/profile/AndroidManifest.xml and change the package name **com.bookstore.book** into your bundle Id ``` ``` #### Building the app for release You have two possible release formats when publishing to the Play Store. * App bundle (preferred) * APK #### Build an app bundle * Enter cd \[project] * Run **flutter build appbundle** * The release bundle for your app is created at **/build/app/outputs/bundle/release/app.aab** #### Build an APK From the command line * Enter cd \[Project] * Run **flutter build apk** * Now we have our release APK ready for the Google Play Store. * To release the app to the play store kindly follow this [`instructions`](https://play.google.com/console/about/guides/releasewithconfidence/) #### Publishing to the Google Play Store # Publish to App store #### Requirements: * Xcode * A Paid Apple Developers account * A valid provisioning profile * App Development and Distribution certificates #### 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: * Open the [App IDs](https://developer.apple.com/account/ios/identifier/bundle) page of your developer account. * Click **+** to create a new Bundle ID. * Enter an app name, select **Explicit App ID**, and enter an ID. * Select the services your app uses, then click **Continue**. * On the next page, confirm the details and click **Register** to register your Bundle ID. #### Register your app on App Store Connect: * Open [App Store Connect](https://appstoreconnect.apple.com/) in your browser. * On the App Store Connect landing page, click **My Apps**. * Click **+** in the top-left corner of the My Apps page, then select **New App**. * 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**. * Navigate to the application details for your app and select **App Information** from the sidebar. * 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](https://help.apple.com/app-store-connect/#/dev2cd126805). #### 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](https://help.apple.com/xcode/mac/current/#/dev91fe7130a). Navigate to your target’s settings in Xcode: * In Xcode, open `Runner.xcworkspace` in your app’s `ios` folder. * 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. * Select the **General** tab. #### Verify the most important settings. In the **Identity** section: `Display Name`The display name of your app.`Bundle Identifier`The App ID you registered on App Store Connect. In the **Signing & Capabilities** 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](https://developer.apple.com/library/content/documentation/Security/Conceptual/CodeSigningGuide/Introduction/Introduction.html).`Team`Select the team associated with your registered Apple Developer account. If required, select **Add Account…**, then update this setting. In the **Build Settings** section: `iOS Deployment Target`The minimum iOS version that your app supports. Flutter supports iOS 9.0 and later. If your app or plugins include Objective-C or Swift code that makes use of APIs newer than iOS 9, update this setting to the highest required version. The **General** tab of your project settings should resemble the following: ![](/files/ESAmKjnvcxNIrfZN2OMM) ### Create a build archive with Xcode This step covers creating a build archive and uploading your build to App Store Connect. During development, you’ve been building, debugging, and testing with *debug* builds. When you’re ready to ship your app to users on the App Store or TestFlight, you need to prepare a *release* build. At this point, you might consider [obfuscating your Dart code](https://docs.flutter.dev/deployment/obfuscate) to make it more difficult to reverse engineer. Obfuscating your code involves adding a couple flags to your build command. In Xcode, configure the app version and build: 1. In Xcode, open `Runner.xcworkspace` in your app’s `ios` folder. 2. Select **Runner** in the Xcode project navigator, then select the **Runner** target in the settings view sidebar. 3. In the Identity section, update the **Version** to the user-facing version number you wish to publish. 4. In the Identity section, update the **Build** identifier to a unique build number used to track this build on App Store Connect. Each upload requires a unique build number. Finally, create a build archive and upload it to App Store Connect: 1. Run `flutter build ipa` to produce a build archive. **Note:** On versions of Flutter where `flutter build ipa` is unavailable, open Xcode and select **Product > Archive**. In the sidebar of the Xcode Organizer window, select your iOS app, then select the build archive you just produced. 2. Open `build/ios/archive/MyApp.xcarchive` in Xcode. 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](https://appstoreconnect.apple.com/). **Note:** When you export your app at the end of **Distribute App**, Xcode will create a directory containing an IPA of your app and an `ExportOptions.plist` file. You can create new IPAs with the same options without launching Xcode by running `flutter build ipa --export-options-plist=path/to/ExportOptions.plist`. See `xcodebuild -h` for details about the keys in this property list. You should receive an email within 30 minutes notifying you that your build has been validated and is available to release to testers on TestFlight. At this point, you can choose whether to release on TestFlight or go ahead and release your app to the App Store. For more details, see [Upload an app to App Store Connect](https://help.apple.com/xcode/mac/current/#/dev442d7f2ca). The [Distribute your app](https://help.apple.com/xcode/mac/current/#/dev8b4250b57) guide provides a detailed overview of the process of releasing an app to the App Store. # UI Screens ![Menu Section](/files/p59VEpqMV873StoN8Kra) ![Dashboard screen](/files/upc2FnwMzizoLVWCf7Sx) ![Single product screen](/files/75svCmLayIwbWRAOqWpH) ![Cart Screeen](/files/DBIUN60UWkNt8rXksLxz) ![Checkout screen](/files/P8uEaZ3aGG03BiAhyqmy) ![Shipping screen](/files/yNzhBPQILpP18yIpNg54) ![Payment method screen](/files/H3dWJOqfIua8B6AsgaYo) ![Register screen](/files/G5o3KtxIZSqz1dK7dmSe) ![Login Screen](/files/kHxBIgS3hyEqWm2ksktw) ![Category List screen](/files/eC0uQl5BB3Qvws1Yci2X) # Outfit # Introduction **What is J2store mobile app?** {% hint style="success" %} J2store mobile app is an e-commerce app is used to build a native app for your e-commerce website on both iOS and Android with an impressive UI & UX design mobile layout. On macOS, you can build both iOS and Android app. On Windows, you can build only an Android app. {% endhint %} ### **Getting Started** | System Requirements | | | ------------------- | ------------------------------------------------- | | Operating system | macOS (64-bit), Windows 10 (64-bit), x86-64 based | | Disk space | 2.8 GB | # Environment Setup #### Website Requirements | | | | --------------------- | ----------------------------- | |

J2store

|

3.3.6 or higher

| |

Joomla

| 3.5 or higher | |

PHP

| 7.0 or higher | **Install Components and Plugins to your website** * Login as Administrator and then Simply choose Extensions → Manage → Install in any back-end page to install components, and plug-ins. ![](/files/6PWoZHCANsh22BdwM7Mb) * In the Upload Package File section, click the "Drag and drop file here" section to browse to and select the component file on your hard drive ![](/files/2hTWTpyySmnotX1wjK22) ![](/files/fbcydPTVAK4PsswfHx5t) * After upload the plugins installation will be start. When it finishes, it displays a message telling you that installation was successful. ![](/files/xsS76DZPXeM4DoLQt8d6) {% hint style="success" %} Note : If you Install Plugin don't forget to Enable it. {% endhint %} #### Enable Plugins in Joomla * To enable a plugin, log in to the admin panel of your Joomla site and click on the Extension -> Plugins option from the top navigation bar. ![](/files/9DdZFxs5JRAVCtfXu1QH) * On this page, you will see a list of plugins available for your Joomla site. You can also search and sort the plugins to find whatever you want. ![](/files/jPLidYhPZdG0JiB74Go7) * For instance, Let’s say we want to enable the J2Store RESTful API on our site. To enable the J2Store RESTful API plugin, just find it in the list. ![](/files/IJ95tnCJm6fibvD18mEx) ![](/files/xfnqTVJsY3dyEpBvgFHY) * select it using the checkbox given in the first column of the table and then click on the Enable button given at the top-left corner of the page. ![](/files/q6jpajjy5qk5BXCFKjSA) * Once the plugin is enabled, you will see a success message. ![](/files/mmzUcRWD36fASrHr6MU4) **Get Rest API Client Id and Secret Key :** * After Enabled J2Store RESTful API plugin, click on the J2Store RESTful API get Client Id and Secret Key Informations ![](/files/mK0AseLFg9qXlC9lgGYS) ![](/files/0MXzz2P4vv6CKjja5wNY) #### Configure Firebase Auth Key in Website * Goto Administrator and then Simply choose Components → J2MobApp → Settings ![](/files/EIlOVL6US5UGL3vuSiFB) ![](/files/yPE23XKAZPLYxjjlpFq3) * Enter your firebase auth key ![](/files/k2OtJflHRO3CJvJsyN7H) * After configured, you will send notification to your users. {% hint style="success" %} To get started with Ionic Framework, the only requirement is a Node, npm environment & a code editor. {% endhint %} #### **Node & npm** 1. Download the node from the following URL [`https://nodejs.org/en/download`](https://nodejs.org/en/download/) 2. We recommend selecting the LTS version to ensure the best compatibility. 3. A code editor for writing code [`https://code.visualstudio.com`](https://code.visualstudio.com/) 4. To verify the installation, open a new terminal window and run: ``` $ node --version ``` ``` $ npm --version ``` # Install the Ionic CLI ### Install the Ionic CLI with npm ``` $ npm install -g @ionic/cli ``` #### Test Drive * Download the source code. * Next, open the project file * In the terminal run the command ``` $ npm i ``` * After the successful installation run the following command ``` $ ionic serve ``` * Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed. # Firebase Configuration **Firebase Instructions :** * Go to the firebase console[`https://console.firebase.google.com`](https://console.firebase.google.com/)and register with an email address. * Create Project in the firebase console, if you click on Add Project Button it will ask you for your project name, fill in your project name and click on the continue button. ![](/files/kJc0Dc7YaKfrmsom4nYs) * Then enable the google analytics for the firebase project then click continue ![](/files/xAXQ85KJzE7L1HjVMHtR) * Then configure the google analytics with a google account then click on the create project button ![](/files/b9IqNM390eNmQRcxHPEY) * After successfully created the firebase project click continue to enter into the project console. ![](/files/efP9FCYm8IVEIITlJnu3) # iOS Configuration **Prerequisites** iOS push notifications are significantly more complicated to set up than Android. You must have a [`paid Apple Developer account`](https://developer.apple.com/) *and* take care of the following items prior to being able to test push notifications with your iOS application: 1. [`Setup the proper Development` ](https://help.apple.com/xcode/mac/current/#/dev60b6fbbc7)or Production certificates & provisioning profiles for your iOS application in the Apple Developer Portal 2. [`Create an APNS certificate or key`](https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/establishing_a_certificate-based_connection_to_apns) for either Development or Production in the Apple Developer Portal 3. [`Ensure Push Notification capabilities have been enabled`](https://help.apple.com/xcode/mac/current/#/dev88ff319e7) in your application in Xcode 4. Have a physical iOS device as per the guidelines in the [`Environment Setup`](https://capacitorjs.com/docs/getting-started/environment-setup) documentation**.** **Integrating Firebase with the iOS app** Open your firebase project console, click the gear icon in the upper left corner, and select Project setting At the top, click on the iOS icon to add a new iOS application. ![](/files/b6D7611KtTMCkpqJMAAy) **Add the GoogleService-Info.plist file to your iOS app** {% hint style="success" %} Note: This is not the same file used for your Android app. {% endhint %} * Download the GoogleService-Info.plist provided to your local machine. * You’ll then want to open Xcode * and move the .plist file into your Xcode project as instructed by Firebase, ensuring to add it to all targets. # Android Configuration **Integrating Firebase with the Android app** * Open your firebase project console, click the gear icon in the upper left corner, and select Project setting * At the top, click on the Android icon to add a new android application. ![](/files/YOrMmuTM16Gl2VXAeDlx) * The next screen will ask you for some information about your application. ![](/files/XTDs9ds1mnkKGPJAU1au) * Your Android package name should match the Id from your config.xml file * Nickname and Debug Signing Certificate are optional * Then click the Register app button. **Download and Use the google-services.json file** * The next prompt will ask you to download a google-services.json file. This file contains the information of your J2store mobile app that needs to connect to Firebase from Android. ![](/files/Dcs1uIi1TJXJ4GeZIVde) * Download the google-services.json file to your local machine. Then move the file into your J2store mobile app Android project directory, specifically under android/app/. # Ionic platforms To add ionic platforms using the below commands. {% tabs %} {% tab title="Android" %} ``` $ ionic cordova platform add android ``` {% endtab %} {% tab title="iOS" %} ``` $ ionic cordova platform add ios ``` {% endtab %} {% endtabs %} * After added the android platform update your android manifest file \[platforms/android/app/src/main/AndroidManifest.xml] From ``` ``` To ``` ``` Prepare your ionic application using the below commands. {% tabs %} {% tab title="Android" %} ``` $ ionic cordova prepare android ``` {% endtab %} {% tab title="iOS" %} ``` $ ionic cordova prepare ios ``` {% endtab %} {% endtabs %} Build your ionic application using the below commands. {% tabs %} {% tab title="Android" %} ``` $ ionic cordova build android ``` {% endtab %} {% tab title="iOS" %} ``` $ ionic cordova build ios ``` {% endtab %} {% endtabs %} Run your ionic application using the below commands. {% tabs %} {% tab title="Android" %} ``` $ ionic cordova run android ``` {% endtab %} {% tab title="iOS" %} ``` $ ionic cordova run ios ``` {% endtab %} {% endtabs %} # Push Notifications **Sending Push Notifications :** {% hint style="success" %} Once completed the process of creating an IOS application on firebase. You can send a push message by selecting Cloud Messaging under Engage in the navigation menu of the firebase console. {% endhint %} ![](/files/iHj3ilD6gwJtliIGoGj5) To get the APNs Authentications key, you must have an apple developer account. follow all the steps in the [`iOS Configuration`](https://mobiledocs.themeparrot.com/firebase-configuration/ios-configuration) # UI Customization You can change the branding including store colors, logo, header, footer, and more. The app is built using the Ionic framework and works beautifully with the J2Store website. #### 1. Change store Name : Open **`src/pages/dashboard/dashboard.html`**file in the project. ```

Outfit

 ``` In the previous code, you can change the Store Name #### **2. Change Store Colors :** Open **`src/theme/variables.scss`** file in the project ``` $colors: ( primary: #F6846C, secondary: #D75E41, btnclr: #B33F26, light: #F7FEDD, dark: #222, energy: #9ad32f ); ``` {% hint style="success" %} The Primary is the main color of the app and Btnclr is the button color of the app {% endhint %} We can change the button color main color in this section. #### **3. Adding the new Menu :** * J2store mobile app supports dynamic menu structure. * Uploaded the menu.json in the server * If you need to add menu simply add that in the menu.json file no need to do any additional work in coding. Add single menu : * Just add the menu name and category id in the json file. ![Single menu ](/files/cwHLS2WEDsvzDJXy9cvo) Add sub menu: * For the sub menu we need to set CID as 0 in the json file. ![Submenu](/files/Nj7WtRdhA52HkJ3Dy2rr) ![](/files/V41U4tq3I9Wl7YklWTRm) #### 4. Change the API URL : Open **`src/providers/url-service`** file in the project ``` apiUrl = 'https://themeparrot.com/api/v1/'; apiUrl2 = 'https://themeparrot.com/api/v2/'; ``` Change the `https://themeparrot.com` to `https://yourdomain.com` #### 5. Change the Image URL : Open **`src/providers/config-service/config-service.ts`** file in the project ``` export const IMG_PATH= 'https://themeparrot.com'; ``` Change the `https://themeparrot.com` to `https://yourdomain.com` #### 5. Change the Category details : Open **`src/pages/dashboard/dashboard.html`** file in the project ```
Women
 ``` Here you can change the Category image URL, Category name, & Category Id ![Dash board Screen](/files/lHH5sFlVF0gEz01u6Wyw) #### 6. Change the App Icon * Upload your logo and splash screen to the following [`URL`](https://apetools.webprofusion.com/#/) * Icon size should be 1024 \*1024 * Splash screen size should be 4096 \* 4096 * Download the zip folder from [`URL`](https://apetools.webprofusion.com/) and paste that folder in the `resources/` folder ![](/files/gjs7IX4be0Han4ZEsZJM) ![](/files/a9DwfmzwCj78JzItkMlo) #### 7. Change Logo : * Added the Logo in the `src/assets/imgs/` folder * Logo size should be 1024 \* 1024 * To add a logo for the app open src/pages/dashboard/dashboard.htmlfile in the project. and replace the 'headertitle' code with the 'headerimg'. From ```

Outfit

 ``` To ``` ``` #### 8. Change the Client\_id & client\_secret: 1. Open the `src/pages/dashboard/dashboard.ts` ,`src/pages/login/login.ts` & `src/pages/myaccount/myaccount.ts`file and find the client\_id & client\_secret replace that with your client\_id & client\_secret. (This information will get after install j2rest plugin) ``` refreshData = { grant_type: 'password', client_id: 'xxxxxxxxxxx', client_secret: 'xxxxxxxx' }; ``` #### 9. Change the Forget Password URL : 1. Open the `src/pages/login/login.ts`file, in the forget() function changed the url with your forget Password url From ``` forget(){ let browserRef = window.open('https://w3cert.net/outfit/index.php/en/register?view=reset&tmpl=component', '_self', 'hideurlbar=yes,location=no'); this.navCtrl.popToRoot(); browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) { var loc = e.url; if(loc != "https://w3cert.net/outfit/index.php/en/register?view=reset&tmpl=component") { browserRef.close(); } }); } ``` To ``` forget(){ let browserRef = window.open('https://yourwebsiteforgetpasswordURL?view=reset&tmpl=component', '_self', 'hideurlbar=yes,location=no'); this.navCtrl.popToRoot(); browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) { var loc = e.url; if(loc != "https://yourwebsiteforgetpasswordURL?view=reset&tmpl=component") { browserRef.close(); } }); } ``` #### 10. Changed the Checkout URL : Open the `src/pages/checkout/checkout.ts` file, in the lstnurl3() function changed the url with your website url From ``` lstnurl3(){ let localaccesstoken = localStorage.getItem('token'); let currencycode = localStorage.getItem('currency_id'); let browserRef = window.open('https://w3cert.net/outfit/index.php?option=com_j2store&view=checkout&access_token=' + localaccesstoken + '&mobile=mobile¤cy=' + currencycode + '&tmpl=component', '_self', 'hideurlbar=yes,location=no'); this.navCtrl.push(MyaccountPage); browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) { var loc = e.url; if(loc.includes('com_j2store&view=myprofile&mobile=mobile')){ localStorage.removeItem('cart_id'); browserRef.close(); } else{ console.log("inside else"); } }); } ``` To ``` lstnurl3(){ let localaccesstoken = localStorage.getItem('token'); let currencycode = localStorage.getItem('currency_id'); let browserRef = window.open('https://yourwebsite URL?option=com_j2store&view=checkout&access_token=' + localaccesstoken + '&mobile=mobile¤cy=' + currencycode + '&tmpl=component', '_self', 'hideurlbar=yes,location=no'); this.navCtrl.push(MyaccountPage); browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) { var loc = e.url; if(loc.includes('com_j2store&view=myprofile&mobile=mobile')){ localStorage.removeItem('cart_id'); browserRef.close(); } else{ console.log("inside else"); } }); } ``` # Basic Features #### **Real Time Synchronization** * Every product detail like images, contents, user, inventory , and order-related data can be sync with the website in real-time. ![](/files/R2Ul8uc31qHVZOofx05e) #### Product Type Support * The App supports Simple, variable, and Flexivariable product types only. ![Simple Product ](/files/pyCeuPZbo12nncKySXj8)
Variable Product
![Flexi Variable Product](/files/v1Z5p4NcCW9p2KrY52oS) #### FULLY READY-MADE * The app can be customized and launched with a source code package. * Customers can open the app, add products to the cart, checkout, and pay. All happens within the mobile app same as your j2store website. #### Quick Smooth Checkout * Let the customer view the product, add it to the cart & checkout. Easily choose payment options and make the payment. And Done! It's fast and simple. ![Cart](/files/5tgxyYBXElPvResCkdYE) ![Checkout](/files/PJsArzfTenr5vtZ7YjGc) #### Shipping Methods * Same like j2store listed shipping methods are supported in mobile app too.No need to do any additional work in coding #### Order History : * The App comes with complete order history. Customers can view the entire history and the order details. ![Order History ](/files/7fNoOuCnPstgx16CxFMb) #### Multiple Product Images * Show more than one image for your product just like the j2store website. It looks better in your storefront and it helps you showcase your products in a better way. ![](/files/igRc56k4Mnv4p3d4RNqf) ![](/files/vL9vHYqvOszRo9BpnByh) #### UP-SELLS & CROSS-SELLS / REALTED PRODUCTS. * You can display additional product modules to recommend the customers with similar products and generate additional sales. * Cross-Selling is to recommend the customer to buy products related to the one they are purchased or about to buy ![Up-sells](/files/7rJajNemjNUF52nUWkVz) ![Cross-sells](/files/srWkdIiI46WbTXEBUy6K) #### PUSH NOTIFICATION * Allows you to send a notification to a specific category/Product. when your customer click on the notification, opens intended category/Product page. ![](/files/2sgRbypPNlBNphype1gA) # Releases # Publish to Google Play #### 1. Change the app name Replace the "outfit" string with your app name in the following file **j2StoreMobileapp/config.xml** ``` Outfit ``` #### 2. Change the app Bundle ID * Go to the j2StoreMobileapp/config.xml file and change the 'com.outfit.themeparrot' to your bundle id. #### 3. Change the App Icon * Upload your logo and splash screen to the following [`URL`](https://apetools.webprofusion.com/#/) * Icon size : 1024 \*1024 * Splash screen size : 4096 \* 4096 **Android Publishing :** To generate a release build for Android, we can use the following cordova cli command: ``` $ ionic cordova build android --prod --release -- -- --packageType=bundle ``` * This will generate a release build based on the settings in your config.xml. * After build creation, our unsigned AAB bundle is available in ``` /Users/Desktop/appname/platforms/android/app/build/outputs/bundle/release/app.aab ``` #### Generate our private key using the key tool: * To generate the private key run the following key in the terminal ``` $ keytool -genkey -v -keystore my-release-key.jks -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 ``` * You’ll first be prompted to create a password for the key store. * Then, answer the rest of the questions and when it’s all done, you should have a file called my-release-key.jks created in the current directory. {% hint style="info" %} Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to submit updates to your app. {% endhint %} #### Sign the unsigned APK : * Run the jarsigner command in the terminal ``` jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks /Users/Desktop/appname/platforms/android/app/build/outputs/bundle/release/app.aab alias_name ``` #### Optimize the APK * To Optimize the AAB bundle, run the following command in the terminal ``` /Users/Library/Android/sdk/build-tools/29.0.2/zipalign -v 4 /Users/Desktop/appname/platforms/android/app/build/outputs/bundle/release/app.aab signed.aab ``` or ``` ./zipalign -v 4 /Users/Desktop/appname/platforms/android/app/build/outputs/bundle/release/app.aab signed.aab ``` * Now we have our release APK ready for the Google Play Store. * To release the app to the play store kindly follow this [`instructions`](https://support.google.com/googleplay/android-developer/answer/9859152?hl=en) # Publish to Apple Store #### Requirements: * Xcode * A Paid Apple Developers account * A valid provisioning profile * App Development and Distribution certificates #### Generating a release build through Xcode : * Add support for the iOS Platform into your app, if you have not done so. Type the command given below into the terminal pointing to your app’s root folder. ``` $ ionic cordova platform add ios ``` * After the addition of the platform creates a build pointing to the –prod flag. Use the command given below to make the prod build. ``` $ ionic cordova prepare ios ``` or ``` ionic cordova build ios --buildFlag="-UseModernBuildSystem=0" ``` * Now, you can find the .xcworkspace file inside /platforms/ios/. Open the file in Xcode. #### Add your developer account to Xcode : * Click the left side “+” button at the lower side and log in to your Apple developer account. * Pick the account and click on the detail, it should open a popup to ask you to request Certificates. * Pick the valid iOS distribution and development certificate which you generated in your developer account earlier #### Move the app to the Apple store : * Before Archiving, set the Target to Generic iOS Device ![](/files/wT2JxH6yuDi7iz19IWDK) * In the Xcode menu, go to Product > Archive and archive your app for release. #### Submitting the app to the App Store : * Generating the archive will build a version of the app which is ready for distribution in the app stores. * After the archive has been created, the Xcode Organizer modal gets opened. * Pick the last build and click on the “Validate” button to validate App publishing process. * Once it is successfully validated. * Then, you are able to see the “Upload to App Store” button, just click on the same to submit your app. * After successfully upload your app is listed in iTunes Connect. From there one can enable the TestFlight for the beta testing version.