Build an offline first cross-platform web and mobile apps with Flutter

hi everybody my name is derek bingham i'm a developer advocate at aws and over the next 30 minutes i'm going to show you how to build a cross-platform offline first application using flutter today application acceleration is key whether you're building a the application across many different platforms or like we're doing today building it with an offline first paradigm whereas the application will work seamlessly whether it's connected or disconnected which is traditionally quite complex and would slow down your application acceleration and we all know that application acceleration is very key these days because we have to get that application in the hands of our users as quickly as possible so they can be delighted by the features that we're building for them and also provide us feedback but building cross-platform apps can be difficult cult because we have multiple code bases but what if we had a single code base and also building offline first has its own complexities complexities like how do you determine connection state changes and then reflect those changes into your application or when your application changes from connected to disconnected state how do you sort through problems like conflict detection and resolution of the data that your app is storing also complexities around having to be able to seamlessly sync data across clients so if client a is running on an ios device and client b is running on android they want the same representation of the data and they want it as fast as possible so if client a makes a change clad b wants to see it as quickly as possible and then finally all of the scaffolding code and the glue code that you traditionally have to build inside an application it slows you down and it all affects your application and the acceleration and application acceleration and why because we as developers want the maximum time to work on the actual features that delight our users the features that will distinguish our application above all the other ones in the market so today i'm going to show you how to do that i'm going to start with flutter what is flutter so flutter is a cross-platform sdk that runs on android ios web and desktop it is first released in 2017 and is slowly getting traction and momentum across all uh developers who want to build web and mobile the reason i think that it's gaining such attraction is its developer experience is fantastic and it uses the dart programming language dart is a language that's very similar to java and c sharp in that if you know both of those languages then you'll pick up dart really easy but also dart the ability of dart to compile into knit of binaries is makes the developer experience when you're building and deploying um flutter applications really really fast it has stuff like hot reload it has the ability to to change things on the fly and see them reflected in the application quickly and then finally flutter has a very simplified way of thinking about an application it thinks about everything inside the application as a widget which again simplifies that developer experience and makes it really a real joy to build in so let's start with a demo of how to get started with flutter here i've got my visual studio code on the left hand side and on the right hand side i've got an ios simulator i've installed the flutter sdk and i'm going now to check to see if it's installed correctly i do that by running flutter doctor flutterdoctor gives me a nice little output on what is installed and green ticks that i have here means everything is installed correctly so i can start building in visual studio code itself i've installed the flutter plug-in and i'm going to use the flutter flutter plug-in to create my first application i'm gonna once i build a create the scaffolding for this my first application i'll take you through the sections of what make up a flutter app first of all on the left hand side we have folders called android and ios that contain all of the device code so you can also open these folders inside xcode or android studio and they would still run also we've got a test folder a web folder for our web deployment and our dependencies are managed inside pubspec.yaml the main entry point to to to a flutter app is the main.dart here we define statefuls are all our widgets this first app has a counter so it's inside a stateful widget which state the state of the stateful widget is the counter so every time a floating action button is executed the counter will go up by one so i'm demonstrating how easy it is now to deploy that code into my ios simulator on my right hand side once it's deployed i'll start executing the app or exercising the app very simple the counter goes up every time i press the floating action button also available to me is the widget inspector which shows me all the widgets i have inside my app so i can quickly debug the ui and layout problems that i may be having i can also make use of the hot reload function inside flutter and inside dart to remove and change my title so i'm changing my title and i see that changed in seconds and i can also add breakpoints and do the usual things that you do when developing and stepping over stepping through your code to find out where those pesky bugs are so you can see the developer experience is really nice also i'm not going to demonstrate how you can deploy your flutter application to another device so in this case i'm deploying it to chrome a chrome website and i'll show you how similar this application will be whether it's running inside chrome or it's running on your ios simulator so here's my chrome web browser very familiar app to everybody the breakpoints still work that i said earlier and the increment counter still works but let's see what that looks like if we put them side by side my ios that i deployed earlier and now my chrome deployment you can see those apps the application are are identical in every way how they execute and how they look and feel so today i'm going to take you through how to build a specific application so what are we building this application we're building today is the uh my shopping list app it has a display list screen it has an ad item screen and it has a buy item screen so the whole idea of this app is if you're going shopping and you're part of a household you can create your list and then when you go to the shops you can check that list off but also this application can be used by any member of the house and they will add to the shopping list and if they go shopping by themselves independently they can shop for the items and check them off which makes paralyzes the idea of shopping also a requirement of this application is it will work offline first so whether it's connected or disconnected to the internet it will still work so let's see how we're going to build this out we'll start with building the application ui using flutter so we're back into our project i've created a um i've fleshed out main.dart a bit more and started to think about how my project is going to look so if i go into myan.you'll see i have my shopping list app which is a stateful widget inside that i need to create some state so i'm defining my state and inside that this time i'm defining some theme data so how my application's going to look and fail and the first the home screen is going to be a new widget called shopping list item view so let's go into that class and start building it out so the first thing i need in this view is a constructor and inside the constructor again this is a stateful widget i will build the state so let's create the state next there we are so there's the state so inside the state itself we have got a title controller and we've got an override build method so the override build method is where i'm defining my scaffold so scaffold is how i can organize widgets within my ui and inside that scaffold i've got two widgets i've got my nav bar and my floaty action button the nav bar which i will define now is very simple it has my shopping list as text at the top of the screen the next widget i'm defining is my floating action button so this is the big plus that i want to click the phone action button it defines a icon which is what you'll see icons.add which is one of the default icons within flutter and on pressed event it will pop up another widget called new item view so let's finally define new item view the widget new item view is a column inside which is a text field where you can enter your enter into your groceries and also has a button so when you click the button you want to add that grocery to the list so that's the ui defined let's deploy it into my ios simulator on the right and see how that looks so there it is deploying first i can check the widget inspector just make sure i've got the widgets that i expect so i've got my scaffold app bar floating action button and my icon very good so let's exercise the app floating action button put in some text so i'll i'll buy some cheese and then a button that i can add some cheese so i need to obviously implement the on pressed event but that ui is looking nice and exactly what i want so the next stage in our application development cycle is to think about how am i going to store the data of my shopping list and then how am i going to have that data available offline and online and to do that i'm going to use aws amplify so aws amplify is a way that you can configure aws backends really really fast and but also how you can seamlessly connect existing front ends to to back ends and we do that using a number of mains we do that using the amplify cli and we also use the amplify admin ui as a way of configuring those backends and then once they're configured we use the open source libraries and ui components that amplify supplies which are all up in github so you can all contribute contribute to them to then connect my application that i'm writing to the back end that i'm provisioning all using amplify in the the amplify feature categories is what amplify can add the feature that amplifier can add to your app so they are a way of encapsulating um [Music] users or user behavior and functionality inside your app so feature categories we have like authentication apis storage all can be added to your app using amplify feature categories today we're going to concentrate on one feature category and that is amplified datastore so let's find out what that is amplify datastore is a way of adding data flow to your app not only a disconnected state but also connected state so as an offline first approach it's ideal it provides a simple set of apis that you can create crowd operations on a data model it also works locally so if you're running on i o and ios device the data that you persist through the datastore api will be stored in a sql like database and also it will work in an offline first capacity i.e you do not need a back-end connection for it to work so let's see how we build out that data model using that store so here i've got the amplify sandbox this is a website that you can navigate to without having the need to have an aws account sandbox.amplifyapp.com here i want to create an app backend from here i can either pick a feature that i want to create i'm going to create some data or a data model once i click click that i'm provided with some schemas i'm just going to go blank and start from scratch and this is brings me to the data modeling ui i can add a model so shopping list i'm creating so i need a shopping list item model that'll contain my items you get an id for free and also so every shopping list item it needs a name so i'll call it itemname and the name of a shopping list item will be a string type i'll also need a way of flagging is it purchased there is the item being bought or complete this will need to be a boolean type so i'll define that as a boolean and also i'll mark the um is item name as is required because a shop in this item needs a um a name for it to be something next the amplify sandbox will take me through how i can set up my particular flutter project to use the amplified data store feature category first of all it shows me how to install the amplify cli and then it shows me how to pull down the data model i've just generated in the ui so i'll copy that command i go back to visual studio code and the amplified pool will pull down my data model generate this types in the schemas in a dart file for me so i can then refer to them and reference them uh when persisting so that's all done for me all that scaffolding called code is created next i install into pubspec.yaml all my flutter dependencies which i'm doing here and then i will go and update the ios and android folders to set the minimum version that we need to have data store working or amplify working there we are so that's ios done and we do the similar thing for android inside build.griddle next we need to go into main.dart and configure amplify so again i'm copying pasting all the code that's been supplied into my main.dart and it's configuring amplify library so i can start interacting with them and using using them to create my data model and create my data store so i've got a init state override and inside my initiate method i call configure amplify i'm just copying and pasting the code that's been provided all of the scaffolding code i don't have to think about that's been provided that i can just reuse and move on to adding them a feature okay so now i've got that configured the next thing you need to do is i need to call the datastore api so i'm going to do that inside a repository so i'm implementing a repository pattern and a repository is a great way of abstracting the complexities of where you want to call your dat underlying data model away from the ui or anything else so i'm going to define three methods in here called git list item create list item and update list item so standard crowd operations and inside that these these i'm going to call the datastore api methods and what are they well again these are provided for me so i choose the one i need so i need a query first in get list items so i copy the paste i copy and paste the code and then i'm just going to fix it up so it's clean and it works inside my particular application so i make the method a sync i tidy up its return type i make sure that i define as a future because that's how we define um asyncs inside dart and then i'll format format that as well and then i'll do the same for the create list item it takes a an item name because that's our mandatory field and then i've copied and pasted this code across from the sandbox again tidying it up making async of course the obligatory try catch block and then finally the update list items defined so update required the only thing is going to be updated is the flag is completed or is purchased and that's passed in and then i i find the id the item that i need to update and then i set the um the update again if i tighten it up async try catch block like so so here we have we've got a git list items we've got our update and all is good so let's see how that works so if i f5 this application so it deploys into my ios simulator you'll see that we now have our our ui as expected and we press the floating action button we will get again our ability to add a shopping list item cheese no the on pressed event actually populates the data model so i've got added cheese and crackers to the data model i can set the the flag of its purchase there is complete and it all works nicely and it's all working in a disconnected state so that that's great so a quick um reference to the block pattern if you've never used flutter before you'll come across the block pattern is a way of separating your events from the ui into the actual actions in this case in a repository to datastore and the block pattern is a reactive pattern so if you're familiar you've done some react programming in the past it'll be very familiar to it to you uh so on that if you go from top to bottom where we have our ui which is our own pressed event it delegates to our block which will then have create list items which will then delegate back to our repository so that abstraction is a great pattern to use and it's very easy to use so if you're building flutter have a look at it the next stage in our journey is to go past our disconnected state with datastore into our connected stim so datastore once it has a backing services so aws amplifier has deployed our managed graphql service which is aws appsync and our amazon dynamodb our nosql database then datastore will start syncing the data between the front end and the back end using a sync engine it will use graphql queries and mutations to update the data in the backend and it will subscribe to subscriptions to pull to get data back into the device so let's see how we do that so here we are back in sandbox we simply hit deploy to aws which will deploy our aws appsync instance and our amazon dynamodb nosql database for us so here we are in the admin ui for amplify you can see it's deploying and we have a number of things that we can do here but for our interns purposes we're just concentrating on data and content once it's deployed we can pull down this configuration locally so we can start interacting with this back end we've just provisioned again we use amplify pool and we give an app we define what sort of ide we're using where all the code is and we can also given the option of can we we could use the cli to provision this back end as well once that's done we can go and start creating content so a feature of the admin ui is you can create content that will be persisted in the dynamodb instance so here in my uh my simulator i'm creating content on the right hand side if i refresh content in admin ui you can see it appears so cheese is there similarly i can add crackers in the admin ui and it should then appear on my app it's not so we're missing something so if i refresh the app it's there but it's not picking up that notification or subscription why is that well we need to implement an observer on the shopping list item so that's pretty easy to do we go into our repository and we wrap the data store call that we need in this case it's amplified.datastore.observe we then pass in the type that we're observing so this is a shopping list item and then we need to return a stream which is how events are used inside flutter we then go into our block define the the same method remember this is how we're decoupling our ui from our datastore calls we define that observe items method and we act on the stream so once we get something in the stream that is a shopping list item we need to do something so the thing that we're going to do we're just going to reload all of the items which is a nice way of just refreshing the list here we grab the stream that we're listening to and we define what we're going to do so we're going to re get the list then finally we add that observe call into the ui so here we have our block provider it's already doing get list items let's also add serve list items so let's see what happens now here we are deployed or change hot deployer change and let's create another item in the admin ui milk and you'll see it appeared all right away in the right hand side and then we can also update flags so our is complete flag we can update here and you can see it updates on the right hand side as well we can also and then start deploying to other platforms so let's see how this application works on ios and android so on android let's create a it's a bread it's created hit bread and it's shopped for so there we have that cross platform offline first application uh built using flutter and aws amplify so that worked out well we were able to build our application from a single code base we were able to not even worry about connections to it amplified datastore did that for us we didn't need to buy worry about scaffolding the sandbox we copied and pasted that code across from amplifysandbox and it was it all worked then we needed to didn't have to worry about data synchronization again once amplified datastore was in a connected state it synchronized the data for us it also handled conflict detection and resolution and all of the complexities that we'd usually have to code for ourselves so it allowed us to actually concentrate on the value add features of my shopping list the ability to walk into a shop and to parallelize the act and chore of shopping so the application if you want to have a look at it it's all my github repo feel free to to pull it down and also if you want to start thinking about what else you can build and what other modern applications you can build on aws we have a great resource here and the resource hub that you can use we also have a depth and breadth of training and certification courses that you can take to help increase your your knowledge on the platform so thanks for watching until the end uh my name is derek bingham developer advocate at aws my twitter handle is here if you want to reach out anytime please feel free to do so other than that i'll see you next time bye

Channel: Derek Bingham

Views: 175

Keywords:

Id: atzW18nj02Y

Length: 26min 20sec (1580 seconds)

Published: Tue Nov 16 2021