INTRODUCING
#THEFUTUREISWRITTENINCODE

#ionic #vuejs #amplify #aws​​ #storage #s3​ Ionic Vue JS Amazon AWS Amplify Authentication CRUD Tutorial Pt 4, File, Image Upload with Storage with S3 - AMPLIFY SETUP - https://docs.amplify.aws/cli/start/install - AMPLIFY VUE - https://docs.amplify.aws/ui/q/framework/vue - DOCUMENTATION - https://docs.amplify.aws/lib/storage/getting-started/q/platform/js#storage-with-amplify 💥 CHAPTERS💥 00:00 - Intro - Video Overview of What We Are Building 01:27 - Getting The AWS Amplify Backend Set For Storage 04:02 - In AWS Amplify Admin UI Modifying The Data Model 05:22 - Looking At AWS Amplify Storage Documentation 05:50 - Adding Code For Uploading the Image 08:07 - Back to Deployment, Pull Changes From Backend To Local Code 08:50 - Back to the code, Saving Key From Storage In Task Model 12:06 - Testing Image Upload to Storage 13:30 - Getting the Image From AWS Storage To Render In App 18:30 - Testing Saving Image and Image Rendering In List 19:05 - Wrap Up 💥 VIDEO SERIES💥 Part 1: Initial Setup and Authentication UI - https://youtu.be/cMDL7o9qHs0 Part 2: Integration with Amplify Admin UI, Add First Data Model​ - https://youtu.be/ZmbnjXmiNNs Part 3: Create, Update And Delete with Datastore - https://youtu.be/75wsg1IaSCc Part 4: File & Image Uploads with Storage S3 Buckets - https://youtu.be/IXJZZgwU4N8 💥 VUE JS PLAYLIST💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz 💥 BLOG 💥 - https://dev.to/aaronksaunders​​ #ionic​ #vuejs​ #aws​ #vue3​ #crud​ #tutorial​ ​ #ionicframework​ #amplify​ #database​ #sql #awscloud #storage #s3bucket #amazon

#ionic #vuejs #amplify #aws​​ #datastore​ Ionic Vue JS AWS Amplify Authentication CRUD Tutorial Pt 3, Create, Update And Delete with Datastore In this video we will review whats was done in part two, the show how to handle adding, updating and deleting data from AWS Amplify Datastore. We also use ionic framework ion-modal for form input, - AMPLIFY SETUP - https://docs.amplify.aws/cli/start/install - AMPLIFY VUE - https://docs.amplify.aws/ui/q/framework/vue 💥 CHAPTERS💥 00:00 - Review Part Two 01:16 - Adding Tasks, Starting with The UI 05:07 - Adding Tasks, IonModal 06:53 - Adding Tasks, EntryForm Component for Entering Data from Tasks 10:00 - Adding Tasks, Connecting the EntryForm to the Home Component 12:51 - Adding Tasks, Closing the Modal or Saving Data to AWS Amplify Datastore 15:37 - Subscribe to Changes in AWS Amplify Datastore to Update UI 18:30 - Deleting Tasks from AWS Amplify Datastore 21:18 - Updating Tasks from AWS Amplify Datastore 22:59 - Wrap up 💥 VIDEO SERIES💥 Part 1: Initial Setup and Authentication UI - https://youtu.be/cMDL7o9qHs0 Part 2: Integration with Amplify Admin UI, Add First Data Model​ - https://youtu.be/ZmbnjXmiNNs Part 3: Create, Update And Delete with Datastore - https://youtu.be/75wsg1IaSCc Part 4: File & Image Uploads with Storage S3 Buckets - https://youtu.be/IXJZZgwU4N8 💥 VUE JS PLAYLIST💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz 💥 BLOG 💥 - https://dev.to/aaronksaunders​​ #ionic​ #vuejs​ #aws​ #vue3​ #crud​ #tutorial​ ​ #ionicframework​ #amplify​ #database​ #sql #awscloud

#vuejs #veevalidate #ionic Vue Form Validation w/ VeeValidate - Meetup Javascript & Friends VueJS --- This is a Livestream recording from a meetup, skip to 1:46 to start watching the actual presentation --- Covering some basic examples of using vee-validate for form validation in vuejs. I have provided the links to the codesandbox.io projects for each of the examples so you can look at the working project while reviewing the code. VeeValidate - https://vee-validate.logaretm.com/v4/ 🔥 Chapters ------------------- 00:00 - Video Setup...Sorry 01:46 - Getting Started 04:12 - VeeValidate Quick Overview 05:14 - Whats Covered In This Session 06:28 - Links to Code 07:12 - Basic Form Validation 17:22 - Basic Form Validation with Yup 27:11 - Basic Form Validation with Ionic Framework 32:00 - Form Validation Yup with Components 43:45 - Wrap Up 🔥 Slides ------------------- https://35b86ce0-1cbc-4b45-91fe-cc316c2329c3.usrfiles.com/ugd/35b86c_8ea693b761df41188dc29e73b1093dd5.pdf 🔥 Sample Code On Codesandbox.io --------------------------------------------------------- Basic Form Validation https://codesandbox.io/s/vee-validate-basic-no-ionic-derxf Basic Form Validation with Yup https://codesandbox.io/s/vee-validate-basic-no-ionic-yup-sc64j Form Validation Yup with Components https://codesandbox.io/s/vee-validate-basic-no-ionic-yup-composition-764h7 Basic Form Validation with Ionic Framework https://codesandbox.io/s/vee-validate-basic-ionic-6gt0o 🔥 More VueJS Content ------------------------------------- - Playlist: https://bit.ly/ionic-vue-playlist - Blog: https://dev.to/aaronksaunders 🔥 Additional Content ----------------------------------- 🎓 Udemy Courses - https://www.udemy.com/user/aaronsaund...​ 🎓 Gumroad Courses/Content - https://www.gumroad.com/fiwic​ 🔥 Social Media ------------------------- Twitter - https://twitter.com/aaronksaunders​ Facebook - https://www.facebook.com/ClearlyInnov...​ Instagram - https://www.instagram.com/aaronksaund...​ Dev.to - https://dev.to/aaronksaunders​ 🌐 www.fiwic.com

#amplify #vuejs #ionicframework #ionic #aws​​ #datastore​ Working on Part 3 of vuejs AWSAmplify CRUD Tutorial with Ionicframework - didn't get it done this week, here is a preview, Part 4 will cover storage and deployment to hosting. Get Started Here: https://www.youtube.com/watch?v=cMDL7o9qHs0&list=PL2PY2-9rsgl3p3_iQow4OKaeWnricQYC7

#ionic #vuejs #amplify #aws​​ #datastore​ Ionic Vue JS AWS Amplify Authentication CRUD Tutorial Part 2, Amplify Admin UI & Creating Models. In this video we will review whats was done in part one, sho how to access the new Amplify Admin UI Console and then use the console to create some data which we will query and render in the application - AMPLIFY SETUP - https://docs.amplify.aws/cli/start/install - AMPLIFY VUE - https://docs.amplify.aws/ui/q/framework/vue 💥 CHAPTERS💥 00:00 - Review Part One 00:54 - Using the Amplify Admin UI 01:55 - Amplify Admin UI To Review Model 02:51 - Pull Changes From Server to Application 03:35 - Query Data From Model 04:10 - Update App To List Tasks 07:26 - Manage Content in Amplify Admin UI 08:30 - Getting Data From Server, Clean Up App UI 10:55 - Wrap Up Overview 💥 VIDEO SERIES💥 Part 1: Initial Setup and Authentication UI - https://youtu.be/cMDL7o9qHs0 Part 2: Integration with Amplify Admin UI, Add First Data Model​ - https://youtu.be/ZmbnjXmiNNs Part 3: Create, Update And Delete with Datastore - https://youtu.be/75wsg1IaSCc Part 4: File & Image Uploads with Storage S3 Buckets - https://youtu.be/IXJZZgwU4N8 💥 VUE JS PLAYLIST💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz 💥 BLOG 💥 - https://dev.to/aaronksaunders​​ #ionic​ #vuejs​ #aws​ #vue3​ #crud​ #tutorial​ ​ #ionicframework​ #amplify​ #database​ #sql #awscloud

#ionic #vuejs #amplify #aws​​ #datastore​ Ionic Vue JS AWS Amplify Authentication CRUD Tutorial Part 1, Authentication UI Component Integrate AWS Amplify with Ionic Vue JS - this is part one of a series of video about using AWS Amplify with Vue 3 and Ionic Framework. We will utilize the new Amplify Admin UI, Create Models and some relationships and then finally deploy the application to Amazon for hosting. - AMPLIFY SETUP - https://docs.amplify.aws/cli/start/install - AMPLIFY VUE - https://docs.amplify.aws/ui/q/framework/vue - SOURCE CODE/BLOG: https://dev.to/aaronksaunders/ionic-vue-js-aws-amplify-authentication-crud-tutorial-part-1-authentication-ui-component-188p 💥 CHAPTERS💥 00:00 - Intro - What is Amplify 01:15 - Overview of the vuejs app we are starting with 01:58 - Initializing Amplify In Project 03:00 - Adding Authentication & Amplify UI Components 05:00 - Adding Amplify UI Components to Our Code 08:00 - Fixing Sample Code to use the Setup Approach vs Options Approach 12:40 - First Run Test 13:20 - Creating Account with Amplify UI 14:31 - Fixing Browser Warnings from Custom Components 15:00 - In Ionic, needed to wrap the whole page to get it to work 16:20 - Add Email to UI to show that we are Logged In 17:05 - Add Sign Out UI Component 18:42 - Wrap Up 💥 VIDEO SERIES💥 Part 1: Initial Setup and Authentication UI - https://youtu.be/cMDL7o9qHs0 Part 2: Integration with Amplify Admin UI, Add First Data Model​ - https://youtu.be/ZmbnjXmiNNs Part 3: Create, Update And Delete with Datastore - https://youtu.be/75wsg1IaSCc Part 4: File & Image Uploads with Storage S3 Buckets - https://youtu.be/IXJZZgwU4N8 💥 VUE JS PLAYLIST💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz 💥 BLOG 💥 - https://dev.to/aaronksaunders​ #ionic​ #vuejs​ #aws​ #vue3​ #crud​ #tutorial​ ​ #ionicframework​ #amplify​ #database​ #sql #awscloud

#ionic​ #vuejs​ #supabase Ionic Vue 3 CRUD App using Supabase.io : Using Storage Buckets with Supabase.io 💥 CHAPTERS💥 00:00 Intro - discussing existing playlist 00:50 Intro - supabase.io storage beta release recently 01:30 Intro - walkthrough existing application 02:35 Intro - what we are doing in this video 03:10 Code - Supabase storage documentation walkthrough 05:11 Code - Uploading Image associated with Product 15:55 Code - Rendering Image In UI, Create ImageView Component 24:55 Code - Using Supabase Subscription To Update UI 31:20 Code - Deleting Image When You Delete Product 37:20 Wrap Up 💥 VIDEO SERIES💥 Part 1: LiveStream: https://youtu.be/vkEJWFQwAOM​ Part 2: Create the UI - https://youtu.be/kBE5ppJVn_I​ Part 3: Integrate Supabase Login, Logout, Create Account - https://youtu.be/99cyhQSBTQU​ Part 4: Integrate Supabase Forgot Password, Change Password - https://youtu.be/7XpQp-EyImw https://dev.to/aaronksaunders/video-series-getting-started-vuejs-supabase-io-the-open-source-firebase-alternative-50n2 💥 BLOG 💥 - https://dev.to/aaronksaunders​ #ionic​ #vuejs​ #supabase​ #firebase​ #vue3​ #crud​ #tutorial​ #supabaselogin​ #ionicframework​ #supabase​ #database​ #sql

How To Use Storybook with Ionic Framework and Angular #ionic #storybook #angular Introduction to setting up a using Storybook js in an Ionic Framework Angular Project. See links below for VueJS or ReactJS We will create a simple ionic card component that displays content passed in as a parameter and emits custom events for clicking on a button associated with viewing details and another button and custom event for editing We show how to uses actions as an add-on in the storybook story. We use the decorators add-on to included the angular modules required for Ionic Framework to function properly with Storybook. After the story is working, we integrate the component into the main application 💥 Chapters 00:00 - Intro - Overview of Vide 01:55 - Setup Storybook with Angular 03:55 - Build Your First Story 08:30 - Pass Arguments into component 12:39 - Different scenarios validated in the story using Templates 14:12 - Add buttons and customer events to our component - Storybook Actions AddOn 23:00 - Discuss efficiency in Storybook 24:00 - Adding all the functionality for the component to the Home Page of App 26:45 - Review What We Accomplished 28:40 - What Comes in Part Two?? 💥 Links ----------------------------------- - StoryBook - https://storybook.js.org/ - Ionic Angular - https://ionicframework.com/docs/angular/overview - Source Code - See Blog Post - Blog Post - https://dev.to/aaronksaunders/how-to-use-storybook-with-ionic-and-angular-4ipb - Storybook Vue JS - https://www.youtube.com/watch?v=AMzanfFB0BM -Storybook React JS - https://www.youtube.com/watch?v=vHJK3OwDZTA 💥 Additional Content ----------------------------------- 🎓 Udemy Courses - https://www.udemy.com/user/aaronsaunders/ 🎓 Gumroad Courses/Content - https://www.gumroad.com/fiwic 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders 🌐 www.fiwic.com #ionic #storybook #angular #angularjs #ionicframework #storybookjs #javascript

Ionic Vue JS: Managing Form Validation with Custom Form Components And Vee-Validate Composition API #ionic #veevalidate #vuejs #formvalidation #compositionapi We are going to show how to create decoupled form components that can be used/reused in your application and utilizing the composition API functionality of Vee Validate to validate and submit the form. The code can work with any vue 3 application, I am just using Ionic UI Components because that is what I work with every day ## There is nothing here Ionic specific other than the UI components ## 💥 Chapters 00:00 - The Problem 02:24 - Overview of form structure 05:55 - in CredentialsComponent starting with Vee Validate integration / useField 12:05 - Update the Personal Info Component with Vee Validate integration / useField 14:10 - CreateAccountForm - Vee Validate integration useForm 17:53 - destructure the data we get back from the combined components 18:40 - testing the code 19:50 - removing a component to show how they are not coupled together 20:47 - Wrap up / Summary 💥 Links ----------------------------------- - Vee Validate - https://vee-validate.logaretm.com/v4/guide/composition-api/validation - ionic Vue - https://ionicframework.com/docs/vue/overview - Source Code - https://github.com/aaronksaunders/ionic-vue3-veevalidate-composition-api - Vue Vee Validate Playlist - https://buff.ly/30U15iV 💥 Additional Content ----------------------------------- 🎓 Udemy Courses - https://www.udemy.com/user/aaronsaunders/ 🎓 Gumroad Courses/Content - https://www.gumroad.com/fiwic 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders 🌐 www.fiwic.com