All language subtitles for 13. iOSAndroid App Development Page - Setup

I'm here in the project directory and make sure you have your development server running so that we

can begin to build out our I OS and Android app development page.

Let's start by creating a new file in the components folder and let's call this mobile apps.

J.S. in here let's start by importing all of our typical imports.

So start with react from react import Lodhi from.

React.

Lordy import the link from react.

Router Dom import make styles and use theme from material UI core styles.

Import the grid from material UI core.

Grid and then import typography material UI typography and we'll also import the EU's media query from

material UI use media query.

And lastly the hidden component from material UI.

Hidden let's create are a constant of use styles using our Make styles hook theme arrow function return

our object and then export default function.

Mobile apps open it up constant classes equals use styles and then let's also create our constant theme

use themes.

We know we'll need that and now we can return it multi line statement wrapping a grid container direction

of column for our entire page and we'll open it up.

Now the first part of this page is very similar to the custom software page because we're going to be

using the same arrows and the same heading structure.

So I want to actually come over and open up a custom software dot J.S. and let's scroll down to this

first item container wrapping the entire first row so let's go ahead and copy the whole thing.

First item container we'll copy that.

Go over to the mobile apps page and paste that right inside of our new grid container.

Now we obviously have a couple things to import.

So let's start by coming up and let's create a constant of matches MDA equals Z use media query for

theme break points down for medium and then the constant matches small for use media query theme.

Break points down for small.

And actually it looks like we don't use that.

So actually let's just change that to x s and create another one if we need it later but it looks like

we just needed the medium and extra small right now.

C props is also not defined so we need to come up and we'll take props as our input but we'll still

need to then go into app dot J.S. and we'll import our mobile apps component from da slash mobile apps

and then we'll copy this render prop and down here where we have the component for our mobile apps dummy

component replace that with the render prop change services to mobile apps and now we can save that

and it's telling us we have an error but that's because we haven't saved this file but it looks like

we solve a couple of things to import so our icon button I must have missed that.

So underneath make styles will import the icon button from material UI core icon button and then the

C we have back arrow and forward arrow and I think those are the last things.

So from underneath those imports and import the forward arrow from our assets forward arrow and then

import the back arrow from assets back arrow.

Now we can save this page.

This will refresh.

And here we see the custom software development page now it looks like this first arrow is actually

missing but I'm pretty sure this margin left of negative three point five m is actually just pulling

it off the screen right now so we can't see it but once we get the correct styles in place this should

look correct.

So we actually need to come back over to the custom software page and let's take these first three styles

the heading arrow container and row container.

Let's go ahead and copy that and we'll flip back to the mobile apps page and inside of the style object

here.

Let's go ahead and paste those styles.

And if we save this now we'll see the page refresh.

And this jumps and our back arrow has appeared so it was just being pulled off the screen and everything

is already on the right track.

Let's get this changed though because we're not on the custom software development page anymore.

We are on the I Os slash Android app development page.

So make sure you get that changed within the typography variant H2 and then let's open up the design

file and let's come over.

Actually it's down below.

Come over to the Iaw and the Android app development section and let's copy in these paragraphs so we'll

get that first.

Here get this second paragraph there.

And our third paragraph right there.

So we can get rid of this last typography.

We can minimize the design file and save this.

We'll see it jump.

And now we have the correct text on the page right now.

These arrows are actually taking us to the wrong pages though.

So if we look this is still taking us back to the services page when now we actually want this icon

button to if we go backwards it's going to take us to the custom software page.

So it's changed the alter here to back to back to custom software development page and it will need

to change the user selected index here to 1 and then we'll scroll down and on the forward arrow.

This will take us forward to the Web site.

Web site development page will need to go to slash Web sites and set these selected index to three which

will set it to the last index for Web site development.

Here on this page so we can save this and the page will refresh.

And now if we move on to the forward arrow where it slash Web sites you can see that is set to being

active and if we go back to the IOW Android after all on a page we can site the back arrow to be taken

to the custom software development page.

Now we can go forward and we're back back see the menu is being set correctly and go forward.

And it is all still being managed correctly we've got the top set up so we can start working on the

actual content for this page.

So remember underneath this we'll have the row for a another text section and animation and another

section of text so we'll start by underneath this grid item.

So with only one grid tag underneath create a grid item container and I'll set the direction of row

here explicitly and just so that we keep that in mind.

And let's go ahead and add actually the class name of classes dock row container because we know we're

going to need to put that on all of the rows.

They recreate to create the correct border.

The first item in this container will be a grid item container where they direction of column and this

will be for our text.

So the first grid item in here will wrap a typography variant H for with the gutter bottom property.

And this will say integration.

So that will be our title here.

And actually on this grid item container with a direction of column I'm going to add the medium property

already because I know that I'm going to want all of these items to share the space available until

the medium breakpoint and below but let's add another grid item adjacent to this one a grid item.

And this is going to wrap our typography variant of body 1 and then the paragraph prop and let's go

ahead and copy.

Max I know we'll need this at least one more time and let's open up the design file.

We've got two paragraphs here.

So we'll copy in the first integration paragraph and then copy in this second paragraph as well.

And we can save that minimize this file and we can see the text now appear on the page let's keep getting

this content out and so adjacent to the grid item container direction column with the medium prop let's

add a new grid item but just a grid item and we'll still add the medium property here because it's going

to be sharing the space with the other items.

And this is going to contain a lady component with its options set to default options because we're

only going to have one animation on this page so we can close that.

And now let's go back to the custom software development page real quick and find this document options

or any of those options and we'll copy that and come up to the top here.

So underneath our matches access Constance Let's paste this in and let's change this to default options

and then we need to come up now and we will import the integration animation from up to the animations

directory integration animation data dot Jason and now we'll change documents animations here to integration

animation.

OK.

And we can scroll down our lady component should already be set.

Now we can save the page to see this animation appear.

So this is a little animation I made that kind of just goes through some different devices to show how

they can all be kind of connected to each other and how you can have your Web site mobile applications

and everything all connected.

So that illustration just kind of shows them all morphing into each other.

And I think it just looks pretty cool but it's obviously too big.

So we'll address that in a second but I'm gonna go ahead and pause that real quick and I'm going to

set that property of is stopped here to true.

We'll save that.

So the page will refresh and you don't have to put that.

Remember I'm just setting that so that the animation isn't constantly playing on my screen.

But let's go ahead and we'll actually take this grid item container direction of column for integration

and let's go ahead and copy all of that and underneath our grid item wrapping the audio component well

let's paste that in and now change integration to a simultaneous platform support.

OK.

Now let's open up the design file come over to the simultaneous platform support section.

Let's copy in these two paragraphs.

So go ahead paste those in.

Copy and paste.

So now what.

Minimise this and save the file.

So our page refreshes.

And here you can see the text although real quick you can notice it is left aligned and so let's go

in on each of the typography components for the simultaneous platform support section.

Let's add the line of right property.

So let's go ahead and copy that paste that down onto both of these guys.

Save the file and Page refresh.

And now.

That's right aligned and it's already looking very close to our design file and let's pause right here

for a second and we'll come back to finish out the rest of the page in the next one.