Blogit

Exciting Features of Our News App

Discover a fully featured news app that keeps you updated with the latest stories and engaging content. Below are some of the standout features:

  • Quote Stories: Share impactful quotes from news articles for quick insights.
  • Short Videos: Watch concise video summaries to catch up on the news fast.
  • Live News: Stay informed with real-time updates on breaking news stories.
  • E-news: Access electronic newsletters with curated news content directly to your device.
  • Admin Panel: Manage app settings seamlessly, including content and configurations.
  • Multi-language Support: Easily manage keywords in multiple languages through the admin panel.
  • Dynamic Customization: Change app color, name, and icon directly from the admin interface.
  • Notifications Support: Keep users engaged with timely notifications via OneSignal.

Please bring your attention here before following documentation

If you have existing code, please click the following link to follow the documentation.

If you are new to coding, we recommend following the documentation straight away.

Admin Setup

Environment Setup

  • Required PHP version 8.1
  • Enable this on your server before proceeding in PHP openssl, pdo, mbstring, tokenizer, JSON, CURL.
  • In Apache enable "mod_write" for guidance follow this click here
  • In Config enable "allow_url_fopen" for guidance follow this click here

      • Points to Remember

      1. Please be prepared with database name, database username name and database password.
      2. Create and set up an Onesignal account and update keys in admin settings.
      3. Create and set up email settings so your email can work.
      4. Setup a deep link setting so that your notifications will work properly.
      5. Translation using Chat GPT or Google Translation will work only after adding a keys make sure you have keys.
      6. Setup a deep link setting so that your notifications will work properly.
      7. Social media login for front end update keys in admin settings.
      8. Admob will work only when keys are added in admin settings.
      9. For facebook ads working have to add keys in admin settings.
      10. To approve comments automatically enable setting in the Global settings tab.

        11. Note : Above all setup is necessary if you won’t enable any of them that will cause not functioning properly.
      11. Upload the downloaded laravel code file from codecanyon.

      Installation

      1. Login to your panel and search for "File Manager" and open it.
      2. Go to “public_html” and then click on “Upload” then upload the provided zip file on the server when the file is uploaded and extract that zip file there.
      3. Once previous steps are done open the domain URL in a new tab.
      4. On opening the site, you will get the setup wizard. Click "Check Requirements"
      5. On the Permission, click next step which is "Check Permissions"
        6. Note : If your folders don't have write permission go through all 3 sections. Change permission to 775 and reload this you can find all options to turn red to green and the button for proceeding to the next step will be visible.
      6. Click on "Form Wizard Setup".
      7. Fill your "App Name" which is a mandatory field this defines the name of your project.
        For "App URL" just copy the URL of your domain and paste it here.
        8. Note: Set the 'debug' to 'true' in the '.env' file to clearly display errors in the project. If 'debug' is set to 'false' and an error occurs, only a 500 error page will be shown. You can adjust this setting in the '.env' file at any time.

      Database Configuration

      1. For the next step, configure the "database settings" on your CPanel. Follow the steps in my CPanel: Go to "MySQL Manager".
      2. Click on “Add Database”.
      3. Next,"add credentials" and "create a new user" for your database.
      4. Then provide all privileges and save these credentials.
        5. Note: Before saving, copy the database name, username, and password one by one. Save them into Notepad or keep a record, as we'll need these credentials for the next step. Without them, you won't be able to proceed.

      Application Setup

      1. After creating the database credentials, use them in the next step. Put the credentials in the respective fields and click on 'Setup Application'.
      2. Click on 'Install'
      3. When the popup appears with 'Installation success' at the top, click on 'Click here to exit.' You will be redirected to the next step.
      4. In this step, enter the 'purchase code' received from CodeCanyon license. Put your purchase code and click on 'Verify'.
      5. When the verification is successfully done, you will be redirected to this page.
        From here, please copy and save the admin credentials so you can log in during the next step.
      6. Enter the email and password of the admin that you saved from the previous step.
      7. Once you have successfully logged in, everything is set up, and you are good to go. Congratulations! 🎉🥳

      Update Process

      Effortlessly keep your website up-to-date with our seamless automatic update process. Simply access the 'Update Website' option, click the 'Update Website' button, and your site will be refreshed with the latest enhancements and database changes. Stay current effortlessly!"

      Automatic

      1. In the 'Automatic Update' process, when we push any updates to our system, this menu in the sidebar displays the count.
      2. Navigate to the 'Update Website' option, where you'll find the 'Update Site' button. Clicking on this button will update your site with our latest changes, including any database updates.
      3. After your site is updated, the sidebar and page will appear as shown in the screenshot below, with the count in the sidebar disappearing and the 'Update Website' button no longer visible.

      Manual

      If the automatic update process did not work or you have an old code version, follow these steps to manually update your code:

      1. Download the 'update.zip' provided for the code update and extract the contents.
      2. Copy and paste the folders from the extracted files into the root folder of your code.
      3. Additionally, we will provide a file with queries. Copy the queries, go to 'MySQL', and open your database. Once your database is open, you will see all your tables. Click on the 'SQL option'.
      4. When the SQL option opens, paste all of your queries and click 'Go' to execute them. Your website is now updated with our latest changes. You're good to go!
        5. Note: In both update processes, if you have made any manual changes in the code other than our provided code, it is highly suggested not to update your website using any of the update processes, as it may result in the loss of your custom changes.

      Admin Settings

      1. Now Add Url to redirect to "Play Store URL for Android" and "App Store for iOS" as given in below screenshot :

      Basic App Setup

      1. Open Terminal
      2. To make sure your configurations are all set to run this project
        3. flutter doctor -v
      3. To make sure you are running the mentioned version given in the documentation
        4. flutter --version

        Flutter version : 3.5.0 <= 4.0.0 | Flutter version : 3.24.3 | Dart version : 3.5.3

        flutter clean
        and then run
        flutter pub get

      4. Navigate to "lib/urls/url.dart"and change values for "baseUrl" and "baseServer" to your server domain.

        ( i.e https://domain@example.com )

        5. See attached screenshot below :

      How to change app icon for iOS and Android ?

      1. Click on appicon.co to generate icons
        2. ( Note: Preferred image resolution to upload is 1024*1024 )
      2. After generating files, you can find these files :

      3. Open your project, and go to android/app/src/main/res/ file inside your project
      4. Replace below folders :
        5. For Android :
        • mipmap-hdpi
        • mipmap-mdpi
        • mipmap-xhdpi
        • mipmap-xxhdpi
        • mipmap-xxxhdpi
        For IOS :
        • Assets.xcassets
        How to change app icon within app ?
        In your project directoty, go to asset/Images/Logo/ and replace all app icons to your desired icon.
        Note : Remember to keep the same name of image and maintain resolution (512 × 512).
          • Blogit.png (512 × 512)
          • splash_logo.png (512 × 512)

      How to change Notification badge icon for android app ?

      1. Open your project, and go to android/app/src/main/res/ file inside your project
      2. Replace below folders :
        • To generate notification assets click given link : Generate Notification assets
        • android/app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png
        • android/app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png
        • android/app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png
        • android/app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png
        • android/app/src/main/res/drawable-xxxhdpi/ic_onesignal_large_icon_default.png

      How to change App Name & Bundle Id?

      How to change App Name ?
      • In your project directory, go to "android/src/main/res/androidmanifest.xml".
        Find android:label="Blogit" and replace Blogit" to "{App-Name}"

      How to change Bundle Id ?

      • Under Signal Project, Go to "android > app > src > main > AndroidManifes.xml"
        1. To change App Bundle Id
        2. To change App name
      • Under Signal Project, Go to "android > app > src > main > Kotlin > MainActivity.kt"

      We need to change host of the App Url Host
      1. In your Project Directory, go to "android/src/main/res/Androidmanifest.xml".
        Find & Changeandroid:schema="{custom-schema}" & android:host="{custom-host}"
      2. In Admin Settings, Change "Deep link Schema & Host for Android respectively".

        3. Note : In Deep Link Setting ,"Android Schema" field should match the android:schema="{custom-scheme}" & android:host="{custom-host-url}" (Android) given in Androidmanifest.xml.

      How to Create App Signing Key

        Why need app Signing key
        • With Play App Signing, Google manages and protects your app's signing key for you and uses it to sign optimized, distribution APKs that are generated from your app bundles. Play App Signing stores your app signing key on Google's secure infrastructure and offers upgrade options to increase security.
      1. Running the following at the command line: On macOS or Linux, use the following command:
        keytool -genkey -v -keystore ~/key.jks -keyalg RSA \ -keysize 2048 -validity 10000 -alias upload
        On Windows, use the following command in PowerShell :
        e
        • From the Start Menu Click Start, type PowerShell, and then click Windows PowerShell.
        • From the Start menu, click Start, click All Programs, click Accessories, click the Windows PowerShell folder, and then click Windows PowerShell.
        keytool -genkey -v -keystore {Path}\key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

      Admin Settings to App (Both Android & iOS)

      • Change App Color
      • App under Maintenance
      • Add Live News & E-News on App Dashboard
      • Enable ADS
      • Change In-App Icon

      Configure the firebase setup

      Note : This step is very much important for google ( Android & IOS ) & Apple ( IOS ) login feature to work. So please follow the below steps carefully.

      • Create Firebase Project

      1. Go to >> Firebase console <<
      2. Create project (Step-1) : Add Project Name and click "Continue"
      3. Google Analytics for your Firebase project (Step-2) : click "Continue"
      4. Configure Account (Step-3) : Select an "Account" from drop-down click "Create Project"
      5. Once the project has been created, it will automatically redirect to Firebase dashboard screen. Add an app we have IOS an Android to consider in App.
      6. Add bundle Id (ex. com.demo.app) you added to your "Signal" project
      7. Download "google-services.json" file and add to your project directory under"android/app"
      8. Go to Authentication and open " Sign-in method " Tab and enable "Google Sign in" (Both Android & IOS) and "Apple" (IOS only)
      9. How to enable cloud messaging for push notifications ?
        • Go to "Cloud Messaging"tab, click on highlighted "Manage API in Google Cloud console".
        • Enable "Cloud Messaging", click on "Enable" a.

        10. Enabling Google Signin

      10. Download "google-services.json" file and add to your project directory under"android/app"
      11. Open 'Terminal' at your project directory. Run commands given below :
        • cd android
        • ./gradlew signingReport
      12. Scroll to top where you find highligted keys (SHA1 and SHA-256)
      13. Add Keys in your Firebase project under "Project Settings" at the bottom you will be able to "Add Fingerprint"
        14. Note: These keys are for Test Mode
      14. To enable "Google signin" for production
        • Go to Google Play Console and Create an account
        • On dashboard, go to "App Integrity" and copy both "SHA-1 certificate fingerprint" and "SHA-256 certificate fingerprint", follow step 12 given above.

      How to set-up OneSignal SDK for push notifications ?

      1. Create an account on OneSignal
      2. Click on "Add App"
      3. Fill details in the screenshot given below and proceed :
      4. You need to uplaod "Service Accounnt json" file. Follow steps below :
        • Open Project Settings, Click on "Service Accounts" tab
        • Click on "generate pair key"
      5. Add Service Accounnt json
      6. Select "Flutter" and proceed
      7. Copy "App Id" and paste it to Admin settings under "Push notifications" Tab as per screenshot given below :
      8. OneSignal : >Go to Settings > Keys & IDs, Copy "REST api key"from OneSignal
        paste it to Signal Admin : Settings > Push Notifications inside "One Signal key"
      9. Go to main.dart, look for OneSignal.initialize("here add your onesignal app id") in the code at line 126. Add the notification that you have for your project

      Create App bundle Signing key & Apk for PlayStore

      1. Make sure to follow steps of Google SignIn
      2. In your project go under "android/app" you need to save the file with the mentioned name
        3. android/app/key.jks ( It is your signing key )
      3. Under "android" you can find "key.properties" there you will find properties of "key.jks".
      4. Before generating an app bundle, if you want a test apk to run on your mobile.
        5. flutter build apk
      5. After Checking above run this command,
        6. flutter build appbundle

      How to create build and release Android App ?

      Follow this link : Build and release Android App
    • Before going live, Please change signingConfigs.debug to signingConfigs.release

      • IOS setup for Signal

      Basic Setup

      1. Navigate to https://appleid.apple.com/sign-in and login to your apple account.
      2. In your Project folder, Open "ios" folder,
        Double-Tap on "Runner.xcworkspace" to open "Xcode"
      3. Click on "Team section", then Click +"Add an Account" and Login to your Apple account
      4. Setup provisioning profile on xcode
      5. Open Terminal and perform basic operations before going forward.
        Please use commands below :
        6. flutter clean
        and then run
        flutter pub get
        now run
        pod install

      How to change App Icon (IOS) ?

      Note : Before followiing this step, Please make sure you followed App Icon step.
      • Copy Assets.xcassets
      • Replace Assets.xcassets inside ios/Runner

      How to change Bundle Identifier and App Name ?

      1. Open Xcode, Under "General tab" Look for :
        1. Bundle Identifier field and replace it.
        2. In your project directory, go to "ios/runner/info.plist". Find "CFBundleDisplayName" & "CFBundleName", Replace Signal" to yourApp-Name

      Enabling Deep Link (iOS)

      1. Go to 'ios/Runner/info.plist'
      2. Change 'com.incite.app' given under 'CFBundleURLName' and change it with 'your.custom-url.example'. It is the host of your deep link.
      3. Do the same in the Admin section, Go to Dashboard > Settings > Share Settings, 'iOS Schema' to add ios://your.custom-url.example, where 'ios' is the 'schema' and 'your.custom-url.example' is your host

      Firebase Configuration (iOS)

      1. Open your firebase project and Click on "Project Settings"
      2. Scroll down and Click on Add App
      3. Then select platform for your app which is "iOS"
      4. Now, Enter your bundle ID ( Bundle Identifier ) and Click "Next"
      5. Download GoogleService-info.plist and replace in your "ios/Runner/GoogleService-info.plist", Click "Next"
      6. Click Next and proceed till Step 3 > Step 4 > Step 5 then Click on "Continue to Console"
      How to enable IOS Push Notifications (Flutter/Firebase) ?
      1. Push notification setup for iOS
      2. Refer to OneSignal iOS, then click on "Activate" iOS
        3. Note : When you follow link, Remember to :
        • Make sure you follow "OneSignal setup for Signal"
        • Add p8 certificate (not p12 certificate) which you have generated from Apple developer account.
        • Follow this documentation for One Signal only.
      3. Get Team ID from iOS developers account
      4. Select iOS Sdk and proceed

      How to create build and release iOS App ?

      Follow this link : Build and release iOS App

      Existing Project Changes

        Please remember while replacing this folder : If you have made customisations by yourself then we don't recommend this process.

          We have categorize changes in two variation :
        1. Minor updates
        2. Major updates

        Minor Updates

      • Replace "lib" folder with the newly updated code's "lib" folder
      • Navigate to "lib/urls/url.dart"and change values for "baseUrl" and "baseServer" to your server domain.

        ( i.e https://domain@example.com )

        • See attached screenshot below :

      • Go to main.dart, look for OneSignal.initialize("here add your onesignal app id") in the code at line 126. Add the notification that you have for your project
      • Replace "pubspec.yaml" file, before it please make sure you know the your app version. Please preserve it and after replacing pubspec.yaml file update the app-version (1.0.0+1) with your desired app version.

        • Major Changes (Rare Cases when major flutter version updated)

      • Before following major changes. Please follow the "Minor changes" given above
      • Replace "android/gradle/wrapper/gradle-wrapper.properties"
      • Replace "android/build.gradle"
      • Replace "android/app/build.gradle"
      • Replace "android/gradle.properties"

        • After replacing app/build.gradle file, do not forget to update the "bundle-id" of your project inside the file.

      • Replace "android/setting.gradle"