Green%20and%20Black%20Gaming%20Youtube%2

INTRODUCING
#THEFUTUREISWRITTENINCODE

Welcome to the official website of #TheFutureIsWrittenInCode

This program provides technology training to support individuals looking to up-skill for better employment opportunities or looking for entry level job opportunities in the innovation economy.

Take a look at the videos below, and browse through the new and exciting content. The videos are constantly being updated, so be sure to check back for more!

Using Nuxt-Ionic: Full Stack Mobile With Prisma SQLite & Ionic Framework w/ Capacitor
56:04
Aaron Saunders

Using Nuxt-Ionic: Full Stack Mobile With Prisma SQLite & Ionic Framework w/ Capacitor

Using Nuxt-Ionic: Full Stack Mobile With Prisma SQLite & Ionic Framework w/ Capacitor #nuxt #ionic #prisma ## Apologies in advanced for the audio ## This is a follow-up to my video on using nuxt-ionic to build and deploy a mobile application using Ionic Framework Vue Components and Capacitor for deploying to native devices. [https://www.youtube.com/watch?v=f4sB7NhCgRw] In this post, we will add a Camera using Capacitor Camera Plugin, add a backend using Prisma with SQLite as our database, deploy it to a mobile device and run the server creating a full-stack mobile experience using VueJS Nuxt 3 and Ionic Framework Timestamps ---------------------------------------- 00:00 - Introduction, What We Are Building 02:08 - Adding PWA Elements Support 05:05 - Integrate Prisma and Sqlite For Database 11:30 - Nuxt Server API Using Prisma Client 17:00 - Testing API Using Thunder VSCode Extension - lightweight Rest API Client 20:31 - Clean Up UI Home Page User Interface 22:03 - User Server API To Query Database 27:42 Add Modal Dialog For Input of Image, Title, and Content 45:20 Save New Record To Database Using Server API 51:08 Build And Test On Device Additional Information ------------------------------------------- Module - https://ionic.roe.dev/ VS Code Plugin - https://marketplace.visualstudio.com/items?itemName=ionic.ionic Ionic Vue - https://ionicframework.com/vue Capacitor - https://capacitorjs.com/docs/apis/camera Prisma - https://www.prisma.io/ Volar Typescript Issue [FIXED] - https://github.com/ionic-team/ionic-framework/issues/24169#ionic Source Code - https://github.com/aaronksaunders/nuxt-ionic-prisma-camera-app/ Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic
Getting Started Building Mobile Apps With The Nuxt Ionic Module for Nuxt 3
33:37
Aaron Saunders

Getting Started Building Mobile Apps With The Nuxt Ionic Module for Nuxt 3

Getting Started Building Mobile Apps With The Nuxt Ionic Module for Nuxt 3 #nuxtjs #ionic #vue Walking through a simple ionic framework deployment of a mobile app with camera integration using the Nuxt/Ionic module from Daniel Roe. ## Part 2: Server API, Prisma Integration and More - https://youtu.be/LpJMR-PlzYU Timestamp ---------------------------------------- 00:00 - Intro 01:37 - What are the tools and other resources 02:23 - Build Project Following Documentation 03:54 - Update nuxt.config.js to include module 04:30 - Remove app.vue 05:07 - Setting Up Capacitor using VS Code Ionic Plugin 06:57 - Setting the webDir when using VSCode Plugin and changing ionic:build command 09:10 - Add Pages and Run Nuxt App to test configuration 13:52 - Issue with ionic classes not getting loaded by default 15:31 - Add an Additional page to test Routing and navigation animations 21:58 - Deploy to android emulator 23:35 - Add Capacitor Plugin to take photos using native camera + shoutout to Daniel Roe !! 30:33 - Deploy to Emulator to use the camera 32:00 - deploy to device and test Additional Information ------------------------------------------- Module - https://ionic.roe.dev/ VS Code Plugin - https://marketplace.visualstudio.com/items?itemName=ionic.ionic Ionic Vue - https://ionicframework.com/vue Capacitor - https://capacitorjs.com/docs/apis/camera Volar Typescript Issue [FIXED] - https://github.com/ionic-team/ionic-framework/issues/24169# Project Source - https://github.com/aaronksaunders/nuxt-app-using-nuxt-ionic-module Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic
Working WIth Remix-Router In React JS - A Look at Data APIs in DataBrowserRouter
32:57
Aaron Saunders

Working WIth Remix-Router In React JS - A Look at Data APIs in DataBrowserRouter

Working WIth Remix and the new version of React Router In React JS - A Look at Data APIs in DataBrowserRouter #remix #reactrouter #react #ionic #ionicframework This is based on BETA software... but it is still awesome to see what's coming!! Simple Application showing the following using the DataBrowserRouter, no useRefs, no change events for the form data... its excellent, it just works. This application also shows an approach for getting input in a modal and submitting it to a route's action function React Router v6.4 introduces all of the data abstractions from Remix for React Router SPAs. Now you can keep your UI and your data in sync with the URL automatically. Chapters --------------- 00:00 - Intro - New React Router, Data APIs 01:11 - Walking through the React Router Documentation as an Overview 03:03 - Moving To CodeSandbox.io - Setup 03:33 - DataBrowserRouter Setup 04:15 - Home Page 04:42 - About Page Adding Loader Functionality 11:10 - Home Page Add Data Mutation with Modal 17:22 - Home Page Action Function for actual Mutation 24:33 - Home Page Getting Data Back In UI With useActionData & useLoaderData 28:32 - Testing It All More Information ---------------------------- - React Router Documentation: https://beta.reactrouter.com/en/dev/getting-started/data - See It In CodeSandbox: https://codesandbox.io/s/remix-router-in-react-js-343czt - Remix Run Documentation: https://remix.run Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic
Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration
16:00
Aaron Saunders

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration #remix #aws #authentication Walkthrough a code sample of integrating AWS Amplify with a Remix Application. We show how to implement complete authentication flows to your application with minimal boilerplate. We then make a database query using the AWS Appsync API to retrieve data. This video does not walkthrough setting up an aws amplify environment, there are plenty of videos cover that already, this just shows how to using remix with that environment Chapters --------------- 00:00 Introduction 01:18 Quick Application Demo 03:28 Changes In Root.jsx 04:29 Changes to Index.jsx, redirecting when not authenticated 05:28 Login.jsx, using AWS Amplify Authenticator Component 06:50 Using a Fetcher to Submit Credential Tokens to Create Session Cookie 07:47 In Session.Server.ts managing the session cookie 08:22 Loading Data Using AppSync API with credentials saved in Session Cookie 10:44 Using Client Side SDK to Get User Information 11:29 Signout using client SDK and clear server session information 12:14 Review Pattern Source Code -------------------- - https://github.com/aaronksaunders/amplify-remix-todos-1 Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies AWS Amplify Web Client SDK - https://docs.amplify.aws/cli/start/install/ AWS Amplify Node SDK - https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html AWS Amplify UI Components - https://ui.docs.amplify.aws/react/components/authenticator Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com
Part 3 - How To Build A Supabase Nuxt 3 Ionic Capacitor Starter App, Setup and Authentication
46:53
Aaron Saunders

Part 3 - How To Build A Supabase Nuxt 3 Ionic Capacitor Starter App, Setup and Authentication

How To Build A Nuxt 3 Ionic Capacitor Starter App, Supabase Setup and Authentication #nuxt3 #nuxt #supabase #capacitor Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/ Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/ Ionic Framework - An open source mobile toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web. - https://ionicframework.com/ Supabase - Supabase is an open source Firebase alternative. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage. - https://supabase.com/ This is a series of videos walking you through how to get started with building a mobile application with Nuxt 3 and Ionic Capacitor. In this video, we add Supabase Account Creation and Authentication to the project and deploy it to a mobile device We also touch on the following Nuxt 3 Topics - composables - https://v3.nuxtjs.org/guide/directory-structure/composables/ - plugins - https://v3.nuxtjs.org/guide/directory-structure/plugins - configuration - https://v3.nuxtjs.org/api/configuration/nuxt.config - middleware - https://v3.nuxtjs.org/guide/directory-structure/middleware Timestamps -------------------- 00:00 intro 01:43 Supabase Setup 05:00 Nuxt Config Changes to Access API Keys 06:50 Create Nuxt Plugin To Initialize Supabase Client 09:48 Create Composable to Access Supabase Client In App 13:18 Add Login Screen and Supabase Sign In API Call 23:05 Add Create Account Screen and Supabase Sign Up API Call 29:00 Turn Off Email Verification in Supabase, Missed This Earlier 32:58 Protected Routes Using Nuxt 3 Middleware 39:26 Ran Into Error With Provide and Inject 45:45 Deploy On Mobile Blog ------- https://dev.to/aaronksaunders/how-to-build-a-nuxt-3-ionic-capacitor-starter-app-supabase-setup-and-authentication-3gd0 Source Code -------------------- https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-3 Videos In Series -------------------------- Part 1 - https://youtu.be/tDYPZvjVTcc Part 2 - https://youtu.be/jwntqsrTXc4 Part 3 - https://youtu.be/SgnNFiMlHJE Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps #supabase https://www.clearlyinnovative.com
 
Videos Not For You?

If you like to have a combination of video and written content to help you learn and understand technology and coding, the we got you covered.

Many of the videos posted here have an accompanying blog post and source code to supplement the video content

 
 

GET IN TOUCH

2301-D Georgia Ave Washington, DC 20001