Skip to content

Development Setup

Dependencies

To ensure a smooth development process, the following libraries and frameworks are essential:

  • Vue.js : The core framework. Ensure you have the latest stable version.
  • Vuex : For state management within Vue.js.
  • Vue Router : For managing navigation within the application.
  • Axios : For making HTTP requests to the API.
  • Node.js : The runtime environment for executing JavaScript code server-side.
  • Webpack : For module bundling.
  • Babel : For JavaScript compilation.
  • ESLint : For code linting and maintaining coding standards.
  • Jest : For unit testing.
  • Sass : For advanced styling capabilities.

Environment Setup

Setting up your development environment involves the following steps:

  1. Install Node.js and npm :

    • Download and install Node.js from nodejs.org.
    • npm (Node Package Manager) comes bundled with Node.js.
    • Verify installation by running node -v and npm -v in your terminal.

  2. Clone or Download Source Code:

  3. Project Packaging:

    • Open a terminal and navigate to the project root directory.

    • Execute the following command to package the project:

      npm run build

  4. Open Hbuilder and Create a New Project:

    • Open Hbuilder and create a new project.
    • Choose project type as "5+App."
    • Set the project name and location as desired.

  5. Project Setup:

    • After project creation, retain the unpackage folder and manifest.json.
    • Replace all files in the new project (except unpackage and manifest.json) with the contents of the dist folder generated during the build.

  6. Configure manifest.json:

    • Open manifest.json and configure it according to your requirements.

  7. Cloud Build:

    • In Hbuilder, navigate to Build -> Mobile App - Cloud Packaging.
    • Wait for the APK generation process to complete.

  8. Final Steps:

    • Once the build is finished, you will find the generated APK in the specified output directory.

Note

This guide assumes familiarity with Hbuilder and the basics of 5+App development.

Customize the manifest.json file to meet your specific application requirements.

The provided source code serves as a reference project, and developers are encouraged to modify it according to your needs.

Running Locally

To run the application locally:

  1. Local Development Server :

    • Execute npm run serve in the terminal. This command starts a local development server.
    • The application will be hosted at http://localhost:8080 by default. You can access it using a web browser.

  2. Live Reloading :

    • The local server comes with hot-reloading. Any changes made to the source code will automatically refresh the application in the browser.

  3. Accessing Application Features :

    • Test different features like robot control and system settings as they would function in the production environment.

  4. Running Unit Tests :

    • Execute npm run test to run unit tests. This ensures your local changes haven't broken existing functionalities.

  5. Linting Code :

    • Run npm run lint to identify and fix linting issues, ensuring code consistency.

Following these steps will set up a robust development environment, enabling you to efficiently develop, test, and debug the application.