Quasar V1: Weather App for Mobile, Desktop & Web (Vue JS 2)

Install Node.js from nodejs.org, then install the Quasar CLI globally using npm, and finally create a new Quasar project with the quasar create command.

Create a new Quasar project with the Quasar create command, noting Quasar two defaults to Vue 3 composition api; this course uses Quasar one with the options api.

Explore the quasar project folder structure, starting in the source folder and traversing layouts, pages, assets, boot, components, styles, theme variables, and router to learn app loading and theming.

Install Vue devtools from the Chrome web store, open devtools, and use the view option to inspect components and view data properties, debug view x events, and update data live.

Master the Vue.js basics before continuing by watching a 45-minute Vue basics video; an optional 17-minute video covers lists and breaking components into child components.

Clean up the project by deleting the test component and the index.vue file, rename the original index.vue to index.view, and restore the original Quasar page to begin building the app.

Remove the header and the drawer to simplify the layout into a single-page view. Collapse the header, delete the drawer, and clear unused states, objects, and the essential linked component.

Add a bluish gradient background to the q page by selecting a turquoise gradient from UI gradients and applying a top-to-bottom sass style to the q page element.

Design a search bar for the Quasar weather app by selecting and customizing a text input with a location button and search button, adjusting padding, icons, placeholders, and data binding.

Display the location, weather type, and temperature with a centered white headline and a weather description beneath, including a search bar and a large degree symbol.

Design the start screen for a Quasar Vue 2 weather app, toggling between a welcome view and weather data from the open weather map API based on data presence.

Get the user's location by clicking, extract latitude and longitude from the position, then fetch weather data from the open weather map API.

Trigger a weather fetch by coords with the OpenWeatherMap API and sign up to obtain a free API key for current weather data, limited to 60 calls per minute.

Fetch current weather by geographic coordinates with axios, interpolate latitude and longitude into the API URL, include the API key, use metric units, and store the result in weather data.

Bind and display the city name, description, and temperature from the weather data using weather data.name, weather[0].main, and weather[0].temp rounded, plus the icon from weather[0].icon.

Implement a city search feature in a Vue.js 2 weather app by wiring the search input and enter key or button to get weather by search, using the q parameter.

Bind the page background to a computed property that returns bg night or bg day based on the weather icon ends with day or night.

Add loading screens using a loading plugin to handle waits when fetching location or API data, showing the spinner at the start of those operations and hiding it on success.

Install icon genie to generate cross-platform icons and splash screens from a single source image for web, iOS, Android, macOS, and Windows, using Quasar's built-in tool.

Generate icons and splash screens for the Quasar weather app using a free icon and Icon Genie, with a background color, and export via quasar def for web.

Create an easy npm script named icons to run the icon generation command, enabling cross-platform support across mac, windows, and android by running npm run icons.

Launch the mac version of our app for development, fix issues, and explore the generated source folder. Generate mac icons with icon GENI and build for production.

Launch the Mac version of the Quasar weather app for development, run in dev mode with Electron and debugging tools, and implement a geolocation fallback for Electron apps.

Implement a geolocation fallback for Electron by using a geo IP service when needed, else use the geolocation API, updating latitude and longitude and retriggering the get method.

Explore the electron main process to customize the browser window, menu bar, and file access, and implement inter-process messaging between the main process and renderer for a native-like desktop app.

Generate Mac icons from Windows and Linux by running the shortcut script ampm run icons, then verify the generated files in the icons folder ahead of the production build.

Execute terminal steps to package a Quasar weather app for macOS with Electron, locate the build in the disk folder, and verify the app icon and dock presence for production.

Publish an electron app to the Mac App Store by reviewing security concerns on the Quasar site and electronjs.org, and join the Apple Developer Program (about $99/year) to distribute.

Set up a Windows development environment on a Mac using VirtualBox, configure the VM, and build the weather app for production; verify the Windows version runs in the VM.

Install virtual box on a Mac to run a Windows 10 virtual machine for testing the Windows version of the app.

Download, extract, and import a Windows 10 virtual machine via VirtualBox from the Microsoft site, then launch it and enable file sharing to access Mac project folders from the VM.

Set up a virtual machine and enable file sharing by configuring shared folders, auto mounting, installing guest additions, and accessing the shared projects folder from the host for development.

Learn to work on the Windows version of your Quasar weather app by developing in a VM, syncing changes via git, and building for production on Mac.

Configure the Quasar electron packager for Windows by setting platform to win32 in quasar.conf, then run quasar build electron to produce and test the Windows release.

Launch the Windows version of the Quasar weather app on the virtual machine, access shared folder via Windows Explorer with Win32/64, test Electron and Quasar, and search New York City.

Explore building the Quasar V1 weather app for iOS: install with Xcode, generate icons and splash screens, test on the iOS simulator or a real device.

Install Cordova and Xcode to prepare Quasar for mobile, desktop, and web apps; use terminal commands and set up Apple developer accounts for testing on real devices and deployment.

Launch the Quasar project in development mode and run it in the iOS simulator to test the weather app, then address geolocation integration and update app icons.

Generate icons and splash screens for the Quasar weather app by running the npm run icons script, clearing the simulator cache, and confirming the resulting icon and splash screen.

Learn to debug the app using Safari dev tools by enabling the develop menu, accessing the simulator IP, and verifying functionality with a console alert.

Explain the Cordova folder in a Quasar project and how a native app embeds a web view. Note how plugins, platforms, and www assets interact, with Quasar overriding Cordova assets.

Install the cordova geolocation plugin to enable finding location in the IWA simulator. Add the code snippet to the root quasar config, then run quasar dev and verify location works.

Learn to run the weather app on various iOS simulator devices by listing available devices and launching with a targeted quasar dev command (for example, iPod Pro 11 inch).

Connect a real iOS device via a data-capable cable and deploy with quasar deploy, resolve signing and development team issues in Xcode, then test live hot reload and Safari debugging.

Build the Quasar weather app for production by configuring iOS signing in Xcode and running a release to run offline on the device.

Install Android Studio and the SDK, set up an Android emulator, launch on the emulator and real device, use Chrome DevTools to fix errors, and build for production.

Install Android Studio and set up the Android SDK, then accept all SDK licenses via SDK Manager in the terminal to complete the setup for Quasar development.

Add Android to your path on Mac by editing your profile file and inserting the provided code, adjusting for SDK location inside library, and restart terminals to apply changes.

Windows developers must install the JDK and Gradle, follow the links on the Quasar page, and set the required environment variables.

Launch Android Studio and open Android Virtual Device Manager to create a virtual device. Choose a Pixel device with a system image, download if needed, and boot cold to test.

Launch the android simulator and run Quasar Weather in development mode, generate android icons and splash screens, and use Chrome DevTools to spoof location for testing.

Debug the quasar v1 weather app with chrome dev tools, inspect devices, and resolve console warnings about insecure origins by switching to https in development, mirroring production behavior.

Fix the simulator error in the quasar v1 weather app by configuring the dev server for https, enabling location, and correcting the Open Weather Map API image URL.

Launch and test the Quasar app on a real Android device by enabling USB debugging, installing Android file transfer, and using Chrome dev tools to inspect live on-device behavior.

Build the quasar app for production, generate a production build for android, output to disk, locate the unsigned apk, and prepare it for publishing to the google play store.

Publish Android apps to the Google Play Store by creating a Google Play developer account with a one-time twenty-five dollar fee, and follow the Quasar site guide.