English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1.5 Hours | 1.44 GB
Use Vue JS to create a Beautiful Weather App for Web, iOS, Android, Mac & Windows – with Quasar, using a Single Codebase
In this short course, I’ll show you how to use Vue JS (and Quasar Framework) to create a gorgeous Weather App from scratch – and get it running and working on 5 different platforms – Web, iOS, Android, Mac & Windows.
In this app we can get the user’s location and display the weather where they are (using the OpenWeatherMap API) all within a beautifully designed layout.
We can also search for a location using the Search Bar.
We’ll create beautiful Icons & Splashscreens for all the different devices.
We’ll setup Simulators for testing on Android & iOS
And setup a Virtual Machine using Virtualbox for testing on Windows.
We’ll even get the app running on Real iOS & Android devices.
If you want a quick introduction to creating Cross-Platform Apps using Vue JS, then this is the course for you.
What you’ll learn
- How to create a beautiful, cross-platform weather app for Android, iOS, Mac, Windows & Web using Vue JS & Quasar Framework
- How to get the user’s location on all devices
- How to create Icons & Splashscreens for all devices
- How to launch the app for development on Mac, Windows, iOS & Android
- How to setup simulators for iOS & Android
- How to debug your app on all platforms
- How to launch & debug the app on Real iOS & Android devices
- A quick introduction to creating Cross-Platform apps with Vue JS & Quasar Framework
Table of Contents
Introduction
1 Introduction & Course App
2 What is Quasar
Getting Started
3 Install Node.js and Quasar CLI
4 Create & Launch a New Quasar Project
5 Folder Structure – Layouts, Pages & Routes
6 Install Vue Devtools on Chrome
7 Vue.js Basics
8 Clean up the Project
Layout & Design
9 Layout – Remove Header & Drawer
10 Add a Gradient Background
11 Design – Search Bar
12 Design – Location, Weather Description & Temperature
13 Design – Add Image & Skyline
14 Design – Start Screen
Get Location & Weather
15 Get User’s Location
16 Setup OpenWeatherMap API
17 Get Weather by Coordinates
18 Display Data in View
19 Get Weather By Search
Finishing Touches
20 Different Backgrounds for Day & Night
21 Add Loading Screens
Icons & Splash Screens
22 Install IconGenie
23 Generate Icons & Splashscreens
24 Create an NPM Script for Easy Icon & Splash Generation
Platforms – Mac (Electron)
25 Module Introduction If You Don’t Have a Mac
26 Launch App on Mac for Development
27 Add a Geolocation Fallback for Electron
28 src-electron folder
29 Generate Mac Icons
30 Build for Mac
31 Publishing to Mac App Store
Platforms – Windows (Electron)
32 Module Introduction
33 Install Virtualbox
34 Install Windows 10 Virtual Machine
35 Setup Virtual Machine & Enable File Sharing
36 How to work on the Windows version of your app
37 Build the App for Windows
38 Launch App on Windows 10 Virtual Machine
39 Publishing to the Windows Store
Platforms – iOS (Cordova)
40 Module Introduction If You Don’t Have a Mac
41 Build the App for Production
42 Publishing to iOS App Store
43 Install Cordova and Xcode
44 Launch App on iOS Simulator for Development
45 Generate Icons & Splashscreens
46 Debug with Safari Dev Tools
47 Src-cordova folder
48 Install Cordova Geolocation Plugin
49 Simulator – Run on Different iOS Devices
50 Develop on a Real iOS Device
Platforms – Android (Cordova)
51 Module Introduction
52 Develop on a Real Android Device
53 Build the App for Production
54 Publish to Google Play Store
55 Install Android Studio and SDK
56 Add Android to your Path (Mac Users)
57 Install Additional Software & Set Environment Variables (Windows Users)
58 Setup Android Virtual Device
59 Launch on Android Simulator
60 Generate Icons & Splash Screens
61 Debug with Chrome Dev Tools
62 Fix Error On Simulator
Finished Source Code
63 Finished Source Code
More Quasar
64 More Quasar
Resolve the captcha to access the links!