If you’re looking to immerse yourself in the refreshing world of the Drinkable app, look no further! This guide will walk you through the setup and development process, ensuring you’ll have everything you need to start creating delightful cocktail recipes and managing ingredients efficiently.

Getting Started

The Drinkable app project is bootstrapped using aurelia-cli. To dive deeper into the tooling, refer to the documentation available at Aurelia Docs.

Running the Development App

To start the development server, run the command below. Make sure to open your browser at the specified address:

npm start

Your app will be accessible at http://localhost:8080.

You can customize the standard Webpack configurations using various flags. For instance:

• To change the port to 8888: npm start — –port 8888.
• For enabling hot module reload: npm start — –hmr.
• To change both host and port, you could run: npm start — –host 127.0.0.1 –port 7070.

Building for Production

When you’re ready to prepare your app for deployment, use the following command:

npm run build

Copying Web Code

After building your web code, ensure that it’s copied into each native project by using:

npx cap copy

It’s a good practice to include this command at the end of your build script in package.json.

Building Native Projects

To build native projects for iOS and Android, you’ll need to add each native project and sync them:

npx cap add ios
npx cap add android
npx cap sync

For iOS

iOS development requires Xcode for the final app compilation. Once Xcode launches, proceed to build your app binary as per the usual workflow:

npx cap copy ios
npx cap open ios

For Android

Similarly, for Android, you require Android Studio. Use the following commands to open and run your Android project:

npx cap copy android
npx cap open android
npx cap run android

Contributing Ingredients

To contribute ingredients to the Drinkable app, locate the src/data/ingredient-data.ts file and add your desired ingredient at the end:

json
id: 165, translation: chocolate-sauce, spiritType: SpiritType.None

Make sure each id is unique and utilize the specified spiritType options for accurate categorization.

Adding Cocktails

You can similarly add cocktails in the src/data/cocktail-data.ts. Here’s the format you’ll use:

json
id: 191, 
imageSrc: images/salted_toffee_martini.jpg,
isImagePortrait: false,
translation: salted-toffee-martini,
... // additional properties

Ensure the id is unique and follow the specified structure for ingredients.

Adding Translations

To internationalize your app, follow these steps:

1. Add a new folder under src/locales with the ISO code of your language.
2. Copy existing translation files into this new folder and edit them accordingly.
3. Update src/data/languages.ts to include your new language.

Troubleshooting Ideas

While developing the Drinkable app, you might encounter some challenges. Here are some troubleshooting tips:

• If you face issues running the development server, check if the specified port is already in use by another application.
• Make sure your environment meets all prerequisites for running iOS and Android builds, such as having Xcode and Android Studio correctly set up.
• For build errors, revisit your package.json for accuracy in the scripts section.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.