[{"data":1,"prerenderedAt":518},["ShallowReactive",2],{"news-item-\u002Fnews\u002Fgcp-webservice-laravel-1":3},{"id":4,"title":5,"body":6,"category":505,"created by":506,"date":507,"description":508,"extension":509,"meta":510,"navigation":511,"path":512,"sections":513,"seo":514,"stem":515,"thumbnail":516,"__hash__":517},"content_en\u002Fnews\u002Fgcp-webservice-laravel-1.md","GCP web services used Laravel framework - Part 1",{"type":7,"value":8,"toc":497},"minimark",[9,14,18,22,25,29,38,55,65,71,75,81,85,91,94,122,126,138,140,187,197,202,215,222,227,232,246,259,263,290,300,304,316,329,334,344,355,365,369,377,380,384,407,411,417,421,424,427,430,437,441,452,456,463,467,470,474,477,481,484,488,491],[10,11,13],"h2",{"id":12},"iwhat-is-gcp","I. What is GCP?",[15,16,17],"p",{},"Google Cloud Platform (GCP), offered by Google, is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its end-user products, such as Google Search, Gmail, and YouTube. Alongside a set of management tools, it provides a series of modular cloud services including computing, data storage, data analytics, and machine learning. Registration requires a credit card or bank account details. Google Cloud Platform provides infrastructure as a service, platform as a service, and serverless computing environments.",[10,19,21],{"id":20},"ii-laravel-framework","II. Laravel Framework.",[15,23,24],{},"Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller (MVC) architectural pattern and based on Symfony. Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, utilities that aid in application deployment and maintenance, and its orientation toward syntactic sugar. The source code of Laravel is hosted on GitHub and licensed under the terms of MIT License.",[10,26,28],{"id":27},"iii-run-laravel-on-google-app-engine-gae-standard-environment","III. Run Laravel on Google App Engine (GAE) standard environment.",[15,30,31,32],{},"Before you run Laravel on GAE, you need to create a new GCP project. Log in to GCP console in this link https: ",[33,34,35],"a",{"href":35,"rel":36},"https:\u002F\u002Fconsole.cloud.google.com\u002F",[37],"nofollow",[15,39,40,44,45,50,51,54],{},[41,42,43],"strong",{},"Step 1",": After you, signed-in to GCP, create a project in the ",[33,46,49],{"href":47,"rel":48},"https:\u002F\u002Fconsole.cloud.google.com\u002Fproject",[37],"Google Cloud Platform Console",". Click on ",[41,52,53],{},"“CREATE PROJECT”"," :",[56,57],"img",{"className":58,"alt":62,"src":63,"style":64},[59,60,61],"block","mx-auto","mb-4","","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164017\u002FScreen-Shot-0032-03-17-at-15.44.33.png","width: 100%;",[15,66,67,70],{},[41,68,69],{},"Step 2",": There are steps to take to create a new GCP project.",[56,72],{"className":73,"alt":62,"src":74,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164143\u002FScreen-Shot-0032-03-17-at-15.02.00.png",[15,76,77,80],{},[41,78,79],{},"Step 3",": Dashboard in the newly created project",[56,82],{"className":83,"alt":62,"src":84,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164617\u002FScreen-Shot-0032-03-17-at-15.07.03.png",[15,86,87,90],{},[41,88,89],{},"Step 4",": Create a new project with the Laravel framework",[15,92,93],{},"Open your terminal and run command line:",[95,96,97,105,111],"ul",{},[98,99,100,101],"li",{},"Create a new project (gcp-webservices) by composer: ",[102,103,104],"code",{},"composer create-project --prefer-dist laravel\u002Flaravel gcp-webservices",[98,106,107,108],{},"Go to Laravel source directory: ",[102,109,110],{},"cd gcp-webservices",[98,112,113,114,117,118],{},"Start server localhost: ",[102,115,116],{},"php artisan serve"," In your browser, visit to URL link: ",[33,119,120],{"href":120,"rel":121},"http:\u002F\u002Flocalhost:8000\u002F",[37],[56,123],{"className":124,"alt":62,"src":125,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164641\u002FScreen-Shot-0032-03-17-at-15.20.17.png",[15,127,128,131,132,137],{},[41,129,130],{},"Step 5",": Install and initialize the ",[33,133,136],{"href":134,"rel":135},"https:\u002F\u002Fdl.google.com\u002Fdl\u002Fcloudsdk\u002Fchannels\u002Frapid\u002Fdownloads\u002Fgoogle-cloud-sdk-283.0.0-darwin-x86_64.tar.gz",[37],"Google Cloud SDK"," (for MAC OS 64bit)",[15,139,93],{},[95,141,142,148,154,172,178,184],{},[98,143,144,145],{},"Go to the downloaded directory ",[102,146,147],{},"cd google-cloud-sdk",[98,149,150,151],{},"Install Google Cloud SDK: ",[102,152,153],{},".\u002Finstall.sh",[98,155,156,157,160,161,164,165,168,169],{},"Login to GCP: ",[102,158,159],{},"gcloud auth login"," . If ",[102,162,163],{},"gcloud"," command-line not found. Please add 2 command lines below: ",[102,166,167],{},"source \"\u002Fgoogle-cloud-sdk\u002Fcompletion.bash.inc\""," ",[102,170,171],{},"source \"\u002Fgoogle-cloud-sdk\u002F\u002Fpath.bash.inc\"",[98,173,174,175],{},"Show projects list in GCP: ",[102,176,177],{},"gcloud projects list",[98,179,180,181],{},"Connect to gcp-webservices project: ",[102,182,183],{},"gcloud config set project gcp-webservices",[98,185,186],{},"Deploy:",[15,188,189,190,193,194],{},"1. Create an ",[41,191,192],{},"app.yaml"," file with the following contents: ",[102,195,196],{},"runtime: php72 env_variables: ## Put production environment variables here. APP_KEY: YOUR_APP_KEY APP_STORAGE: \u002Ftmp VIEW_COMPILED_PATH: \u002Ftmp SESSION_DRIVER: cookie",[15,198,199,200],{},"2. Go to Laravel source directory: ",[102,201,110],{},[15,203,204,205,208,209,211,212],{},"3. Replace ",[41,206,207],{},"YOUR_APP_KEY"," in ",[41,210,192],{}," with an application key you generate with the following command: ",[102,213,214],{},"php artisan key:generate --show",[15,216,217,218,221],{},"4. Modify ",[102,219,220],{},"bootstrap\u002Fapp.php"," by adding the following block of code before the return statement. This will allow you to set the storage path to \u002Ftmp for caching in production.",[15,223,224],{},[102,225,226],{},"# [START] Add the following block to `bootstrap\u002Fapp.php` \u002F* |-------------------------------------------------------------------------- | Set Storage Path |-------------------------------------------------------------------------- | | This script allows you to override the default storage location used by | the  application.  You may set the APP_STORAGE environment variable | in your .env file,  if not set the default location will be used | *\u002F $app->useStoragePath(env('APP_STORAGE', base_path() . '\u002Fstorage')); # [END]",[15,228,229,230],{},"5. Go to Laravel source directory: ",[102,231,110],{},[15,233,234,235,238,239,242,243],{},"6. Remove the ",[102,236,237],{},"beyondcode\u002Flaravel-dump-server"," composer dependency. This is a fix for an error which happens as a result of Laravel’s caching in ",[102,240,241],{},"bootstrap\u002Fcache\u002Fservices.php",". ",[102,244,245],{},"composer remove --dev beyondcode\u002Flaravel-dump-server",[15,247,248,249,252,253,258],{},"7. Enable ",[41,250,251],{},"Cloud Build API"," ",[33,254,257],{"href":255,"rel":256},"https:\u002F\u002Fconsole.developers.google.com\u002Fapis\u002Fapi\u002Fcloudbuild.googleapis.com\u002Foverview?project=gcp-webservices",[37],"here",".",[56,260],{"className":261,"alt":62,"src":262,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164734\u002Fenable_cloud_build.png",[15,264,265,266,269,270,273,274,278,279,282,283,285,286,289],{},"8. Run the following command to deploy your app: ",[102,267,268],{},"gcloud app deploy --version develop"," (“develop” is the first version to deploy). ",[41,271,272],{},"Remember"," to delete the ",[275,276,277],"em",{},"composer.lock"," file at the first deployment. ",[41,280,281],{},"Then",", add ",[275,284,277],{}," in the ",[275,287,288],{},".gcloudignore"," file.",[15,291,292,293,296,297],{},"9. Visit ",[102,294,295],{},"http:\u002F\u002FYOUR\\_PROJECT\\_ID.appspot.com"," to see the Laravel welcome page. Replace YOUR_PROJECT_ID with the ID of your GCP project, for example,",[102,298,299],{},"https:\u002F\u002Fyour-gcp-service.appspot.com\u002F",[10,301,303],{"id":302},"iv-google-vision-api","IV. Google Vision API",[15,305,306,308,309,312,313],{},[41,307,43],{},": Install the ",[41,310,311],{},"Google Vision API"," by command line: ",[102,314,315],{},"composer require wapnen\u002Fgoogle-cloud-vision-php",[15,317,318,320,321,324,325],{},[41,319,69],{},": Create a ",[41,322,323],{},"service account key"," at using this instruction ",[33,326,327],{"href":327,"rel":328},"https:\u002F\u002Fcloud.google.com\u002Fvision\u002Fdocs\u002Fbefore-you-begin",[37],[56,330],{"className":331,"alt":62,"src":332,"style":333},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165223\u002Fcreate_service_account_key.png","width: 50%;",[15,335,336,337,340,341],{},"From the ",[41,338,339],{},"Service account"," list, select ",[41,342,343],{},"New service account.",[15,345,346,347,350,351,354],{},"In the ",[41,348,349],{},"Service account name"," field, enter a name(in this example, it is “",[41,352,353],{},"test","“)",[15,356,357,358,361,362],{},"Then you click on “",[41,359,360],{},"Create","” to download a .json file. ",[41,363,364],{},"KEEP this file privately, if another one has it, they can use it for their private services, which you will pay $ for that.",[10,366,368],{"id":367},"v-implement-google-vision-api-to-recognize-texts-from-images","V. Implement Google Vision API to recognize texts from images",[15,370,371,372],{},"You can refer to this main Vision document page ",[33,373,376],{"href":374,"rel":375},"https:\u002F\u002Fcloud.google.com\u002Fvision\u002Fdocs\u002Focr#vision_text_detection-php",[37],"google-vision-php",[15,378,379],{},"Implementation is so easy with some lines of code",[56,381],{"className":382,"alt":62,"src":383,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165651\u002Fvision_php_1.png",[15,385,386,387,390,391,394,395,398,399,402,403,406],{},"With ",[41,388,389],{},"key_path"," you must set in ",[41,392,393],{},".env"," file as an environment variable point to the path of key.json file which we generated from step ",[41,396,397],{},"IV,"," in this example, I will save file ",[41,400,401],{},"key.json"," in a folder named “",[41,404,405],{},"google-credential","” and put it in root project’s directory",[56,408],{"className":409,"alt":62,"src":410,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165823\u002Fkey_path.png",[15,412,413,414,416],{},"and in ",[41,415,393],{}," include this line",[56,418],{"className":419,"alt":62,"src":420,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165845\u002Fenv_exam.png",[15,422,423],{},"Now we will create a controller to handle 2 things:",[15,425,426],{},"1. Receive upload image from request",[15,428,429],{},"2. Use the above code to show the text received from Vision API",[15,431,432,433,436],{},"I will create a controller name AnnotationController with only 1 function ",[41,434,435],{},"annotateImage","() and contain the below code",[56,438],{"className":439,"alt":62,"src":440,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165923\u002Fvision_php_1-1.png",[15,442,443,444,447,448,451],{},"I create a very simple template with only 1 input file named “",[41,445,446],{},"Upload image","” and a button submit named “",[41,449,450],{},"Convert","”",[56,453],{"className":454,"alt":62,"src":455,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170108\u002Fsample_template.png",[15,457,458,459,462],{},"Now I will choose the above image to check if Vision can recognize the texts like ",[41,460,461],{},"“Upload image”, “Choose File”,…"," or not",[56,464],{"className":465,"alt":62,"src":466,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170134\u002Fchoose_file.png",[15,468,469],{},"Now check what will we get.",[56,471],{"className":472,"alt":62,"src":473,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170200\u002Fvision_result.png",[15,475,476],{},"Amazing!! Right but now we will try with Japanese. I try with screenshot a Japanese news.",[56,478],{"className":479,"alt":62,"src":480,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170237\u002Fjapanese_news.png",[15,482,483],{},"Now, what will we have?",[56,485],{"className":486,"alt":62,"src":487,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170306\u002Fjapan_result.png",[15,489,490],{},"So cool, that right?",[15,492,493],{},[33,494,496],{"href":495},"gcp-webservice-laravel-2","Continue to Part2",{"title":62,"searchDepth":498,"depth":498,"links":499},2,[500,501,502,503,504],{"id":12,"depth":498,"text":13},{"id":20,"depth":498,"text":21},{"id":27,"depth":498,"text":28},{"id":302,"depth":498,"text":303},{"id":367,"depth":498,"text":368},"tech talk","Briswell Vietnam Co Ltd","2020-05-29","I. What is GCP? Google Cloud Platform (GCP), offered by Google, is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its end-user products, such as Google Search, Gmail, and YouTube. Alongside a set of management tools, it provides a series of modular cloud services including computing, data storage, data analytics, and machine learning. Registration requires a credit card or bank account details. Google Cloud Platform provides infrastructure as a service, platform as a service, and serverless computing environments.","md",{},true,"\u002Fnews\u002Fgcp-webservice-laravel-1",null,{"title":5,"description":508},"news\u002Fgcp-webservice-laravel-1","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F19163201\u002F0_brH9cM9rnSRx2I-S.png","D0OKhgbZLqgUSyH9yWUuRZEK0zEfSVzwmvDkumABmvc",1785320519130]